mirror of
https://github.com/XFox111/my-website.git
synced 2026-04-22 07:28:01 +03:00
chore(deps): dependency bumps + related refactoring (fixes #19)
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
@import "../theme.scss";
|
||||
@use "@/_styles/theme" as *;
|
||||
|
||||
.list
|
||||
{
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
@use "./theme" as *;
|
||||
|
||||
:root
|
||||
{
|
||||
scroll-behavior: smooth;
|
||||
|
||||
@media (prefers-color-scheme: light)
|
||||
{
|
||||
@include lightTheme;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark)
|
||||
{
|
||||
@include darkTheme;
|
||||
}
|
||||
}
|
||||
|
||||
*
|
||||
{
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
@include flex(column);
|
||||
@include body1;
|
||||
|
||||
min-width: 300px;
|
||||
min-height: 100vh;
|
||||
|
||||
color-scheme: light dark;
|
||||
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: geometricPrecision;
|
||||
|
||||
background-color: $colorNeutralBackground1;
|
||||
color: $colorNeutralForeground1;
|
||||
|
||||
> main
|
||||
{
|
||||
@include maxCenter;
|
||||
flex-grow: 1;
|
||||
padding: $spacingXXL;
|
||||
margin-top: 56px;
|
||||
}
|
||||
|
||||
::selection
|
||||
{
|
||||
background-color: $colorNeutralBackgroundInverted;
|
||||
color: $colorNeutralForegroundInverted;
|
||||
}
|
||||
|
||||
[hidden]
|
||||
{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
text-decoration: none;
|
||||
color: $colorBrandForeground1;
|
||||
|
||||
background-image: linear-gradient($colorNeutralBackgroundInverted, $colorNeutralBackgroundInverted);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0% 100%;
|
||||
|
||||
transition-property: background-size, color;
|
||||
transition-duration: $durationFaster;
|
||||
transition-timing-function: $curveEasyEaseMax;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible
|
||||
{
|
||||
background-size: 100% 100%;
|
||||
color: $colorNeutralForegroundInverted;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea
|
||||
{
|
||||
@include formBase;
|
||||
}
|
||||
|
||||
// [SPECIAL] case for 404 page
|
||||
main.not-found + footer > .illustration
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
{
|
||||
body:has(.cookie-banner)
|
||||
{
|
||||
padding-bottom: 110px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@forward "dark";
|
||||
@forward "light";
|
||||
@forward "typography";
|
||||
@forward "mixins";
|
||||
@forward "tokens";
|
||||
@@ -0,0 +1,342 @@
|
||||
@mixin darkTheme
|
||||
{
|
||||
--colorNeutralForeground1: #ffffff;
|
||||
--colorNeutralForeground1Hover: #ffffff;
|
||||
--colorNeutralForeground1Pressed: #ffffff;
|
||||
--colorNeutralForeground1Selected: #ffffff;
|
||||
--colorNeutralForeground2: #d6d6d6;
|
||||
--colorNeutralForeground2Hover: #ffffff;
|
||||
--colorNeutralForeground2Pressed: #ffffff;
|
||||
--colorNeutralForeground2Selected: #ffffff;
|
||||
--colorNeutralForeground2BrandHover: #c95e38;
|
||||
--colorNeutralForeground2BrandPressed: #b35433;
|
||||
--colorNeutralForeground2BrandSelected: #c95e38;
|
||||
--colorNeutralForeground3: #adadad;
|
||||
--colorNeutralForeground3Hover: #d6d6d6;
|
||||
--colorNeutralForeground3Pressed: #d6d6d6;
|
||||
--colorNeutralForeground3Selected: #d6d6d6;
|
||||
--colorNeutralForeground3BrandHover: #c95e38;
|
||||
--colorNeutralForeground3BrandPressed: #b35433;
|
||||
--colorNeutralForeground3BrandSelected: #c95e38;
|
||||
--colorNeutralForeground4: #999999;
|
||||
--colorNeutralForegroundDisabled: #5c5c5c;
|
||||
--colorNeutralForegroundInvertedDisabled: rgba(255, 255, 255, 0.4);
|
||||
--colorBrandForegroundLink: #c95e38;
|
||||
--colorBrandForegroundLinkHover: #e0683e;
|
||||
--colorBrandForegroundLinkPressed: #b35433;
|
||||
--colorBrandForegroundLinkSelected: #c95e38;
|
||||
--colorNeutralForeground2Link: #d6d6d6;
|
||||
--colorNeutralForeground2LinkHover: #ffffff;
|
||||
--colorNeutralForeground2LinkPressed: #ffffff;
|
||||
--colorNeutralForeground2LinkSelected: #ffffff;
|
||||
--colorCompoundBrandForeground1: #c95e38;
|
||||
--colorCompoundBrandForeground1Hover: #e0683e;
|
||||
--colorCompoundBrandForeground1Pressed: #b35433;
|
||||
--colorBrandForeground1: #e0683e;
|
||||
--colorBrandForeground2: #f77243;
|
||||
--colorBrandForeground2Hover: #ff875b;
|
||||
--colorBrandForeground2Pressed: #ffcbb8;
|
||||
--colorNeutralForeground1Static: #242424;
|
||||
--colorNeutralForegroundStaticInverted: #ffffff;
|
||||
--colorNeutralForegroundInverted: #242424;
|
||||
--colorNeutralForegroundInvertedHover: #242424;
|
||||
--colorNeutralForegroundInvertedPressed: #242424;
|
||||
--colorNeutralForegroundInvertedSelected: #242424;
|
||||
--colorNeutralForegroundInverted2: #242424;
|
||||
--colorNeutralForegroundOnBrand: #ffffff;
|
||||
--colorNeutralForegroundInvertedLink: #ffffff;
|
||||
--colorNeutralForegroundInvertedLinkHover: #ffffff;
|
||||
--colorNeutralForegroundInvertedLinkPressed: #ffffff;
|
||||
--colorNeutralForegroundInvertedLinkSelected: #ffffff;
|
||||
--colorBrandForegroundInverted: #9d4b2e;
|
||||
--colorBrandForegroundInvertedHover: #874229;
|
||||
--colorBrandForegroundInvertedPressed: #723924;
|
||||
--colorBrandForegroundOnLight: #9d4b2e;
|
||||
--colorBrandForegroundOnLightHover: #874229;
|
||||
--colorBrandForegroundOnLightPressed: #5e301f;
|
||||
--colorBrandForegroundOnLightSelected: #723924;
|
||||
--colorNeutralBackground1: #292929;
|
||||
--colorNeutralBackground1Hover: #3d3d3d;
|
||||
--colorNeutralBackground1Pressed: #1f1f1f;
|
||||
--colorNeutralBackground1Selected: #383838;
|
||||
--colorNeutralBackground2: #1f1f1f;
|
||||
--colorNeutralBackground2Hover: #333333;
|
||||
--colorNeutralBackground2Pressed: #141414;
|
||||
--colorNeutralBackground2Selected: #2e2e2e;
|
||||
--colorNeutralBackground3: #141414;
|
||||
--colorNeutralBackground3Hover: #292929;
|
||||
--colorNeutralBackground3Pressed: #0a0a0a;
|
||||
--colorNeutralBackground3Selected: #242424;
|
||||
--colorNeutralBackground4: #0a0a0a;
|
||||
--colorNeutralBackground4Hover: #1f1f1f;
|
||||
--colorNeutralBackground4Pressed: #000000;
|
||||
--colorNeutralBackground4Selected: #1a1a1a;
|
||||
--colorNeutralBackground5: #000000;
|
||||
--colorNeutralBackground5Hover: #141414;
|
||||
--colorNeutralBackground5Pressed: #050505;
|
||||
--colorNeutralBackground5Selected: #0f0f0f;
|
||||
--colorNeutralBackground6: #333333;
|
||||
--colorNeutralBackgroundInverted: #ffffff;
|
||||
--colorNeutralBackgroundStatic: #3d3d3d;
|
||||
--colorNeutralBackgroundAlpha: rgba(26, 26, 26, 0.5);
|
||||
--colorNeutralBackgroundAlpha2: rgba(31, 31, 31, 0.7);
|
||||
--colorSubtleBackground: transparent;
|
||||
--colorSubtleBackgroundHover: #383838;
|
||||
--colorSubtleBackgroundPressed: #2e2e2e;
|
||||
--colorSubtleBackgroundSelected: #333333;
|
||||
--colorSubtleBackgroundLightAlphaHover: rgba(36, 36, 36, 0.8);
|
||||
--colorSubtleBackgroundLightAlphaPressed: rgba(36, 36, 36, 0.5);
|
||||
--colorSubtleBackgroundLightAlphaSelected: transparent;
|
||||
--colorSubtleBackgroundInverted: transparent;
|
||||
--colorSubtleBackgroundInvertedHover: rgba(0, 0, 0, 0.1);
|
||||
--colorSubtleBackgroundInvertedPressed: rgba(0, 0, 0, 0.3);
|
||||
--colorSubtleBackgroundInvertedSelected: rgba(0, 0, 0, 0.2);
|
||||
--colorTransparentBackground: transparent;
|
||||
--colorTransparentBackgroundHover: transparent;
|
||||
--colorTransparentBackgroundPressed: transparent;
|
||||
--colorTransparentBackgroundSelected: transparent;
|
||||
--colorNeutralBackgroundDisabled: #141414;
|
||||
--colorNeutralBackgroundInvertedDisabled: rgba(255, 255, 255, 0.1);
|
||||
--colorNeutralStencil1: #575757;
|
||||
--colorNeutralStencil2: #333333;
|
||||
--colorNeutralStencil1Alpha: rgba(255, 255, 255, 0.1);
|
||||
--colorNeutralStencil2Alpha: rgba(255, 255, 255, 0.05);
|
||||
--colorBackgroundOverlay: rgba(0, 0, 0, 0.5);
|
||||
--colorScrollbarOverlay: rgba(255, 255, 255, 0.6);
|
||||
--colorBrandBackground: #874229;
|
||||
--colorBrandBackgroundHover: #9d4b2e;
|
||||
--colorBrandBackgroundPressed: #4b271a;
|
||||
--colorBrandBackgroundSelected: #723924;
|
||||
--colorCompoundBrandBackground: #c95e38;
|
||||
--colorCompoundBrandBackgroundHover: #e0683e;
|
||||
--colorCompoundBrandBackgroundPressed: #b35433;
|
||||
--colorBrandBackgroundStatic: #9d4b2e;
|
||||
--colorBrandBackground2: #21140d;
|
||||
--colorBrandBackground2Hover: #4b271a;
|
||||
--colorBrandBackground2Pressed: #050201;
|
||||
--colorBrandBackgroundInverted: #ffffff;
|
||||
--colorBrandBackgroundInvertedHover: #ffcbb8;
|
||||
--colorBrandBackgroundInvertedPressed: #ff9f7c;
|
||||
--colorBrandBackgroundInvertedSelected: #ffb69a;
|
||||
--colorNeutralStrokeAccessible: #adadad;
|
||||
--colorNeutralStrokeAccessibleHover: #bdbdbd;
|
||||
--colorNeutralStrokeAccessiblePressed: #b3b3b3;
|
||||
--colorNeutralStrokeAccessibleSelected: #c95e38;
|
||||
--colorNeutralStroke1: #666666;
|
||||
--colorNeutralStroke1Hover: #757575;
|
||||
--colorNeutralStroke1Pressed: #6b6b6b;
|
||||
--colorNeutralStroke1Selected: #707070;
|
||||
--colorNeutralStroke2: #525252;
|
||||
--colorNeutralStroke3: #3d3d3d;
|
||||
--colorNeutralStrokeSubtle: #0a0a0a;
|
||||
--colorNeutralStrokeOnBrand: #292929;
|
||||
--colorNeutralStrokeOnBrand2: #ffffff;
|
||||
--colorNeutralStrokeOnBrand2Hover: #ffffff;
|
||||
--colorNeutralStrokeOnBrand2Pressed: #ffffff;
|
||||
--colorNeutralStrokeOnBrand2Selected: #ffffff;
|
||||
--colorBrandStroke1: #c95e38;
|
||||
--colorBrandStroke2: #5e301f;
|
||||
--colorBrandStroke2Hover: #5e301f;
|
||||
--colorBrandStroke2Pressed: #381f15;
|
||||
--colorBrandStroke2Contrast: #5e301f;
|
||||
--colorCompoundBrandStroke: #c95e38;
|
||||
--colorCompoundBrandStrokeHover: #e0683e;
|
||||
--colorCompoundBrandStrokePressed: #b35433;
|
||||
--colorNeutralStrokeDisabled: #424242;
|
||||
--colorNeutralStrokeInvertedDisabled: rgba(255, 255, 255, 0.4);
|
||||
--colorTransparentStroke: transparent;
|
||||
--colorTransparentStrokeInteractive: transparent;
|
||||
--colorTransparentStrokeDisabled: transparent;
|
||||
--colorNeutralStrokeAlpha: rgba(255, 255, 255, 0.1);
|
||||
--colorNeutralStrokeAlpha2: rgba(255, 255, 255, 0.2);
|
||||
--colorStrokeFocus1: #000000;
|
||||
--colorStrokeFocus2: #ffffff;
|
||||
--colorNeutralShadowAmbient: rgba(0,0,0,0.24);
|
||||
--colorNeutralShadowKey: rgba(0,0,0,0.28);
|
||||
--colorNeutralShadowAmbientLighter: rgba(0,0,0,0.12);
|
||||
--colorNeutralShadowKeyLighter: rgba(0,0,0,0.14);
|
||||
--colorNeutralShadowAmbientDarker: rgba(0,0,0,0.40);
|
||||
--colorNeutralShadowKeyDarker: rgba(0,0,0,0.48);
|
||||
--colorBrandShadowAmbient: rgba(0,0,0,0.30);
|
||||
--colorBrandShadowKey: rgba(0,0,0,0.25);
|
||||
--colorPaletteRedBackground1: #3f1011;
|
||||
--colorPaletteRedBackground2: #751d1f;
|
||||
--colorPaletteRedBackground3: #d13438;
|
||||
--colorPaletteRedForeground1: #e37d80;
|
||||
--colorPaletteRedForeground2: #f1bbbc;
|
||||
--colorPaletteRedForeground3: #e37d80;
|
||||
--colorPaletteRedBorderActive: #e37d80;
|
||||
--colorPaletteRedBorder1: #d13438;
|
||||
--colorPaletteRedBorder2: #e37d80;
|
||||
--colorPaletteGreenBackground1: #052505;
|
||||
--colorPaletteGreenBackground2: #094509;
|
||||
--colorPaletteGreenBackground3: #107c10;
|
||||
--colorPaletteGreenForeground1: #54b054;
|
||||
--colorPaletteGreenForeground2: #9fd89f;
|
||||
--colorPaletteGreenForeground3: #9fd89f;
|
||||
--colorPaletteGreenBorderActive: #54b054;
|
||||
--colorPaletteGreenBorder1: #107c10;
|
||||
--colorPaletteGreenBorder2: #9fd89f;
|
||||
--colorPaletteDarkOrangeBackground1: #411200;
|
||||
--colorPaletteDarkOrangeBackground2: #7a2101;
|
||||
--colorPaletteDarkOrangeBackground3: #da3b01;
|
||||
--colorPaletteDarkOrangeForeground1: #e9835e;
|
||||
--colorPaletteDarkOrangeForeground2: #f4bfab;
|
||||
--colorPaletteDarkOrangeForeground3: #e9835e;
|
||||
--colorPaletteDarkOrangeBorderActive: #e9835e;
|
||||
--colorPaletteDarkOrangeBorder1: #da3b01;
|
||||
--colorPaletteDarkOrangeBorder2: #e9835e;
|
||||
--colorPaletteYellowBackground1: #4c4400;
|
||||
--colorPaletteYellowBackground2: #817400;
|
||||
--colorPaletteYellowBackground3: #fde300;
|
||||
--colorPaletteYellowForeground1: #feee66;
|
||||
--colorPaletteYellowForeground2: #fef7b2;
|
||||
--colorPaletteYellowForeground3: #fdea3d;
|
||||
--colorPaletteYellowBorderActive: #feee66;
|
||||
--colorPaletteYellowBorder1: #fde300;
|
||||
--colorPaletteYellowBorder2: #fdea3d;
|
||||
--colorPaletteBerryBackground1: #3a1136;
|
||||
--colorPaletteBerryBackground2: #6d2064;
|
||||
--colorPaletteBerryBackground3: #c239b3;
|
||||
--colorPaletteBerryForeground1: #da7ed0;
|
||||
--colorPaletteBerryForeground2: #edbbe7;
|
||||
--colorPaletteBerryForeground3: #d161c4;
|
||||
--colorPaletteBerryBorderActive: #da7ed0;
|
||||
--colorPaletteBerryBorder1: #c239b3;
|
||||
--colorPaletteBerryBorder2: #d161c4;
|
||||
--colorPaletteLightGreenBackground1: #063004;
|
||||
--colorPaletteLightGreenBackground2: #0b5a08;
|
||||
--colorPaletteLightGreenBackground3: #13a10e;
|
||||
--colorPaletteLightGreenForeground1: #5ec75a;
|
||||
--colorPaletteLightGreenForeground2: #a7e3a5;
|
||||
--colorPaletteLightGreenForeground3: #3db838;
|
||||
--colorPaletteLightGreenBorderActive: #5ec75a;
|
||||
--colorPaletteLightGreenBorder1: #13a10e;
|
||||
--colorPaletteLightGreenBorder2: #3db838;
|
||||
--colorPaletteMarigoldBackground1: #463100;
|
||||
--colorPaletteMarigoldBackground2: #835b00;
|
||||
--colorPaletteMarigoldBackground3: #eaa300;
|
||||
--colorPaletteMarigoldForeground1: #f2c661;
|
||||
--colorPaletteMarigoldForeground2: #f9e2ae;
|
||||
--colorPaletteMarigoldForeground3: #efb839;
|
||||
--colorPaletteMarigoldBorderActive: #f2c661;
|
||||
--colorPaletteMarigoldBorder1: #eaa300;
|
||||
--colorPaletteMarigoldBorder2: #efb839;
|
||||
--colorPaletteRedForegroundInverted: #d13438;
|
||||
--colorPaletteGreenForegroundInverted: #107c10;
|
||||
--colorPaletteYellowForegroundInverted: #817400;
|
||||
--colorPaletteDarkRedBackground2: #590815;
|
||||
--colorPaletteDarkRedForeground2: #d69ca5;
|
||||
--colorPaletteDarkRedBorderActive: #ac4f5e;
|
||||
--colorPaletteCranberryBackground2: #6e0811;
|
||||
--colorPaletteCranberryForeground2: #eeacb2;
|
||||
--colorPaletteCranberryBorderActive: #dc626d;
|
||||
--colorPalettePumpkinBackground2: #712d09;
|
||||
--colorPalettePumpkinForeground2: #efc4ad;
|
||||
--colorPalettePumpkinBorderActive: #df8e64;
|
||||
--colorPalettePeachBackground2: #8f4e00;
|
||||
--colorPalettePeachForeground2: #ffddb3;
|
||||
--colorPalettePeachBorderActive: #ffba66;
|
||||
--colorPaletteGoldBackground2: #6c5700;
|
||||
--colorPaletteGoldForeground2: #ecdfa5;
|
||||
--colorPaletteGoldBorderActive: #dac157;
|
||||
--colorPaletteBrassBackground2: #553e06;
|
||||
--colorPaletteBrassForeground2: #e0cea2;
|
||||
--colorPaletteBrassBorderActive: #c1a256;
|
||||
--colorPaletteBrownBackground2: #50301a;
|
||||
--colorPaletteBrownForeground2: #ddc3b0;
|
||||
--colorPaletteBrownBorderActive: #bb8f6f;
|
||||
--colorPaletteForestBackground2: #294903;
|
||||
--colorPaletteForestForeground2: #bdd99b;
|
||||
--colorPaletteForestBorderActive: #85b44c;
|
||||
--colorPaletteSeafoamBackground2: #00723b;
|
||||
--colorPaletteSeafoamForeground2: #a8f0cd;
|
||||
--colorPaletteSeafoamBorderActive: #5ae0a0;
|
||||
--colorPaletteDarkGreenBackground2: #063b06;
|
||||
--colorPaletteDarkGreenForeground2: #9ad29a;
|
||||
--colorPaletteDarkGreenBorderActive: #4da64d;
|
||||
--colorPaletteLightTealBackground2: #00666d;
|
||||
--colorPaletteLightTealForeground2: #a6e9ed;
|
||||
--colorPaletteLightTealBorderActive: #58d3db;
|
||||
--colorPaletteTealBackground2: #02494c;
|
||||
--colorPaletteTealForeground2: #9bd9db;
|
||||
--colorPaletteTealBorderActive: #4cb4b7;
|
||||
--colorPaletteSteelBackground2: #00333f;
|
||||
--colorPaletteSteelForeground2: #94c8d4;
|
||||
--colorPaletteSteelBorderActive: #4496a9;
|
||||
--colorPaletteBlueBackground2: #004377;
|
||||
--colorPaletteBlueForeground2: #a9d3f2;
|
||||
--colorPaletteBlueBorderActive: #5caae5;
|
||||
--colorPaletteRoyalBlueBackground2: #002c4e;
|
||||
--colorPaletteRoyalBlueForeground2: #9abfdc;
|
||||
--colorPaletteRoyalBlueBorderActive: #4a89ba;
|
||||
--colorPaletteCornflowerBackground2: #2c3c85;
|
||||
--colorPaletteCornflowerForeground2: #c8d1fa;
|
||||
--colorPaletteCornflowerBorderActive: #93a4f4;
|
||||
--colorPaletteNavyBackground2: #001665;
|
||||
--colorPaletteNavyForeground2: #a3b2e8;
|
||||
--colorPaletteNavyBorderActive: #546fd2;
|
||||
--colorPaletteLavenderBackground2: #3f3682;
|
||||
--colorPaletteLavenderForeground2: #d2ccf8;
|
||||
--colorPaletteLavenderBorderActive: #a79cf1;
|
||||
--colorPalettePurpleBackground2: #341a51;
|
||||
--colorPalettePurpleForeground2: #c6b1de;
|
||||
--colorPalettePurpleBorderActive: #9470bd;
|
||||
--colorPaletteGrapeBackground2: #4c0d55;
|
||||
--colorPaletteGrapeForeground2: #d9a7e0;
|
||||
--colorPaletteGrapeBorderActive: #b55fc1;
|
||||
--colorPaletteLilacBackground2: #63276d;
|
||||
--colorPaletteLilacForeground2: #e6bfed;
|
||||
--colorPaletteLilacBorderActive: #cf87da;
|
||||
--colorPalettePinkBackground2: #80215d;
|
||||
--colorPalettePinkForeground2: #f7c0e3;
|
||||
--colorPalettePinkBorderActive: #ef85c8;
|
||||
--colorPaletteMagentaBackground2: #6b0043;
|
||||
--colorPaletteMagentaForeground2: #eca5d1;
|
||||
--colorPaletteMagentaBorderActive: #d957a8;
|
||||
--colorPalettePlumBackground2: #5a003b;
|
||||
--colorPalettePlumForeground2: #d696c0;
|
||||
--colorPalettePlumBorderActive: #ad4589;
|
||||
--colorPaletteBeigeBackground2: #444241;
|
||||
--colorPaletteBeigeForeground2: #d7d4d4;
|
||||
--colorPaletteBeigeBorderActive: #afabaa;
|
||||
--colorPaletteMinkBackground2: #343231;
|
||||
--colorPaletteMinkForeground2: #cecccb;
|
||||
--colorPaletteMinkBorderActive: #9e9b99;
|
||||
--colorPalettePlatinumBackground2: #3b4447;
|
||||
--colorPalettePlatinumForeground2: #cdd6d8;
|
||||
--colorPalettePlatinumBorderActive: #a0adb2;
|
||||
--colorPaletteAnchorBackground2: #202427;
|
||||
--colorPaletteAnchorForeground2: #bcc3c7;
|
||||
--colorPaletteAnchorBorderActive: #808a90;
|
||||
--colorStatusSuccessBackground1: #052505;
|
||||
--colorStatusSuccessBackground2: #094509;
|
||||
--colorStatusSuccessBackground3: #107c10;
|
||||
--colorStatusSuccessForeground1: #54b054;
|
||||
--colorStatusSuccessForeground2: #9fd89f;
|
||||
--colorStatusSuccessForeground3: #9fd89f;
|
||||
--colorStatusSuccessBorderActive: #54b054;
|
||||
--colorStatusSuccessForegroundInverted: #0e700e;
|
||||
--colorStatusSuccessBorder1: #107c10;
|
||||
--colorStatusSuccessBorder2: #9fd89f;
|
||||
--colorStatusWarningBackground1: #4a1e04;
|
||||
--colorStatusWarningBackground2: #8a3707;
|
||||
--colorStatusWarningBackground3: #f7630c;
|
||||
--colorStatusWarningForeground1: #faa06b;
|
||||
--colorStatusWarningForeground2: #fdcfb4;
|
||||
--colorStatusWarningForeground3: #f98845;
|
||||
--colorStatusWarningBorderActive: #faa06b;
|
||||
--colorStatusWarningForegroundInverted: #bc4b09;
|
||||
--colorStatusWarningBorder1: #f7630c;
|
||||
--colorStatusWarningBorder2: #f98845;
|
||||
--colorStatusDangerBackground1: #3b0509;
|
||||
--colorStatusDangerBackground2: #6e0811;
|
||||
--colorStatusDangerBackground3: #c50f1f;
|
||||
--colorStatusDangerForeground1: #dc626d;
|
||||
--colorStatusDangerForeground2: #eeacb2;
|
||||
--colorStatusDangerForeground3: #dc626d;
|
||||
--colorStatusDangerBorderActive: #dc626d;
|
||||
--colorStatusDangerForegroundInverted: #b10e1c;
|
||||
--colorStatusDangerBorder1: #c50f1f;
|
||||
--colorStatusDangerBorder2: #dc626d;
|
||||
}
|
||||
@@ -0,0 +1,342 @@
|
||||
@mixin lightTheme
|
||||
{
|
||||
--colorNeutralForeground1: #242424;
|
||||
--colorNeutralForeground1Hover: #242424;
|
||||
--colorNeutralForeground1Pressed: #242424;
|
||||
--colorNeutralForeground1Selected: #242424;
|
||||
--colorNeutralForeground2: #424242;
|
||||
--colorNeutralForeground2Hover: #242424;
|
||||
--colorNeutralForeground2Pressed: #242424;
|
||||
--colorNeutralForeground2Selected: #242424;
|
||||
--colorNeutralForeground2BrandHover: #9d4b2e;
|
||||
--colorNeutralForeground2BrandPressed: #874229;
|
||||
--colorNeutralForeground2BrandSelected: #9d4b2e;
|
||||
--colorNeutralForeground3: #616161;
|
||||
--colorNeutralForeground3Hover: #424242;
|
||||
--colorNeutralForeground3Pressed: #424242;
|
||||
--colorNeutralForeground3Selected: #424242;
|
||||
--colorNeutralForeground3BrandHover: #9d4b2e;
|
||||
--colorNeutralForeground3BrandPressed: #874229;
|
||||
--colorNeutralForeground3BrandSelected: #9d4b2e;
|
||||
--colorNeutralForeground4: #707070;
|
||||
--colorNeutralForegroundDisabled: #bdbdbd;
|
||||
--colorNeutralForegroundInvertedDisabled: rgba(255, 255, 255, 0.4);
|
||||
--colorBrandForegroundLink: #874229;
|
||||
--colorBrandForegroundLinkHover: #723924;
|
||||
--colorBrandForegroundLinkPressed: #4b271a;
|
||||
--colorBrandForegroundLinkSelected: #874229;
|
||||
--colorNeutralForeground2Link: #424242;
|
||||
--colorNeutralForeground2LinkHover: #242424;
|
||||
--colorNeutralForeground2LinkPressed: #242424;
|
||||
--colorNeutralForeground2LinkSelected: #242424;
|
||||
--colorCompoundBrandForeground1: #9d4b2e;
|
||||
--colorCompoundBrandForeground1Hover: #874229;
|
||||
--colorCompoundBrandForeground1Pressed: #723924;
|
||||
--colorBrandForeground1: #9d4b2e;
|
||||
--colorBrandForeground2: #874229;
|
||||
--colorBrandForeground2Hover: #723924;
|
||||
--colorBrandForeground2Pressed: #381f15;
|
||||
--colorNeutralForeground1Static: #242424;
|
||||
--colorNeutralForegroundStaticInverted: #ffffff;
|
||||
--colorNeutralForegroundInverted: #ffffff;
|
||||
--colorNeutralForegroundInvertedHover: #ffffff;
|
||||
--colorNeutralForegroundInvertedPressed: #ffffff;
|
||||
--colorNeutralForegroundInvertedSelected: #ffffff;
|
||||
--colorNeutralForegroundInverted2: #ffffff;
|
||||
--colorNeutralForegroundOnBrand: #ffffff;
|
||||
--colorNeutralForegroundInvertedLink: #ffffff;
|
||||
--colorNeutralForegroundInvertedLinkHover: #ffffff;
|
||||
--colorNeutralForegroundInvertedLinkPressed: #ffffff;
|
||||
--colorNeutralForegroundInvertedLinkSelected: #ffffff;
|
||||
--colorBrandForegroundInverted: #c95e38;
|
||||
--colorBrandForegroundInvertedHover: #e0683e;
|
||||
--colorBrandForegroundInvertedPressed: #c95e38;
|
||||
--colorBrandForegroundOnLight: #9d4b2e;
|
||||
--colorBrandForegroundOnLightHover: #874229;
|
||||
--colorBrandForegroundOnLightPressed: #5e301f;
|
||||
--colorBrandForegroundOnLightSelected: #723924;
|
||||
--colorNeutralBackground1: #ffffff;
|
||||
--colorNeutralBackground1Hover: #f5f5f5;
|
||||
--colorNeutralBackground1Pressed: #e0e0e0;
|
||||
--colorNeutralBackground1Selected: #ebebeb;
|
||||
--colorNeutralBackground2: #fafafa;
|
||||
--colorNeutralBackground2Hover: #f0f0f0;
|
||||
--colorNeutralBackground2Pressed: #dbdbdb;
|
||||
--colorNeutralBackground2Selected: #e6e6e6;
|
||||
--colorNeutralBackground3: #f5f5f5;
|
||||
--colorNeutralBackground3Hover: #ebebeb;
|
||||
--colorNeutralBackground3Pressed: #d6d6d6;
|
||||
--colorNeutralBackground3Selected: #e0e0e0;
|
||||
--colorNeutralBackground4: #f0f0f0;
|
||||
--colorNeutralBackground4Hover: #fafafa;
|
||||
--colorNeutralBackground4Pressed: #f5f5f5;
|
||||
--colorNeutralBackground4Selected: #ffffff;
|
||||
--colorNeutralBackground5: #ebebeb;
|
||||
--colorNeutralBackground5Hover: #f5f5f5;
|
||||
--colorNeutralBackground5Pressed: #f0f0f0;
|
||||
--colorNeutralBackground5Selected: #fafafa;
|
||||
--colorNeutralBackground6: #e6e6e6;
|
||||
--colorNeutralBackgroundInverted: #292929;
|
||||
--colorNeutralBackgroundStatic: #333333;
|
||||
--colorNeutralBackgroundAlpha: rgba(255, 255, 255, 0.5);
|
||||
--colorNeutralBackgroundAlpha2: rgba(255, 255, 255, 0.8);
|
||||
--colorSubtleBackground: transparent;
|
||||
--colorSubtleBackgroundHover: #f5f5f5;
|
||||
--colorSubtleBackgroundPressed: #e0e0e0;
|
||||
--colorSubtleBackgroundSelected: #ebebeb;
|
||||
--colorSubtleBackgroundLightAlphaHover: rgba(255, 255, 255, 0.7);
|
||||
--colorSubtleBackgroundLightAlphaPressed: rgba(255, 255, 255, 0.5);
|
||||
--colorSubtleBackgroundLightAlphaSelected: transparent;
|
||||
--colorSubtleBackgroundInverted: transparent;
|
||||
--colorSubtleBackgroundInvertedHover: rgba(0, 0, 0, 0.1);
|
||||
--colorSubtleBackgroundInvertedPressed: rgba(0, 0, 0, 0.3);
|
||||
--colorSubtleBackgroundInvertedSelected: rgba(0, 0, 0, 0.2);
|
||||
--colorTransparentBackground: transparent;
|
||||
--colorTransparentBackgroundHover: transparent;
|
||||
--colorTransparentBackgroundPressed: transparent;
|
||||
--colorTransparentBackgroundSelected: transparent;
|
||||
--colorNeutralBackgroundDisabled: #f0f0f0;
|
||||
--colorNeutralBackgroundInvertedDisabled: rgba(255, 255, 255, 0.1);
|
||||
--colorNeutralStencil1: #e6e6e6;
|
||||
--colorNeutralStencil2: #fafafa;
|
||||
--colorNeutralStencil1Alpha: rgba(0, 0, 0, 0.1);
|
||||
--colorNeutralStencil2Alpha: rgba(0, 0, 0, 0.05);
|
||||
--colorBackgroundOverlay: rgba(0, 0, 0, 0.4);
|
||||
--colorScrollbarOverlay: rgba(0, 0, 0, 0.5);
|
||||
--colorBrandBackground: #9d4b2e;
|
||||
--colorBrandBackgroundHover: #874229;
|
||||
--colorBrandBackgroundPressed: #4b271a;
|
||||
--colorBrandBackgroundSelected: #723924;
|
||||
--colorCompoundBrandBackground: #9d4b2e;
|
||||
--colorCompoundBrandBackgroundHover: #874229;
|
||||
--colorCompoundBrandBackgroundPressed: #723924;
|
||||
--colorBrandBackgroundStatic: #9d4b2e;
|
||||
--colorBrandBackground2: #ffcbb8;
|
||||
--colorBrandBackground2Hover: #ffb69a;
|
||||
--colorBrandBackground2Pressed: #ff875b;
|
||||
--colorBrandBackgroundInverted: #ffffff;
|
||||
--colorBrandBackgroundInvertedHover: #ffcbb8;
|
||||
--colorBrandBackgroundInvertedPressed: #ff9f7c;
|
||||
--colorBrandBackgroundInvertedSelected: #ffb69a;
|
||||
--colorNeutralStrokeAccessible: #616161;
|
||||
--colorNeutralStrokeAccessibleHover: #575757;
|
||||
--colorNeutralStrokeAccessiblePressed: #4d4d4d;
|
||||
--colorNeutralStrokeAccessibleSelected: #9d4b2e;
|
||||
--colorNeutralStroke1: #d1d1d1;
|
||||
--colorNeutralStroke1Hover: #c7c7c7;
|
||||
--colorNeutralStroke1Pressed: #b3b3b3;
|
||||
--colorNeutralStroke1Selected: #bdbdbd;
|
||||
--colorNeutralStroke2: #e0e0e0;
|
||||
--colorNeutralStroke3: #f0f0f0;
|
||||
--colorNeutralStrokeSubtle: #e0e0e0;
|
||||
--colorNeutralStrokeOnBrand: #ffffff;
|
||||
--colorNeutralStrokeOnBrand2: #ffffff;
|
||||
--colorNeutralStrokeOnBrand2Hover: #ffffff;
|
||||
--colorNeutralStrokeOnBrand2Pressed: #ffffff;
|
||||
--colorNeutralStrokeOnBrand2Selected: #ffffff;
|
||||
--colorBrandStroke1: #9d4b2e;
|
||||
--colorBrandStroke2: #ff9f7c;
|
||||
--colorBrandStroke2Hover: #f77243;
|
||||
--colorBrandStroke2Pressed: #9d4b2e;
|
||||
--colorBrandStroke2Contrast: #ff9f7c;
|
||||
--colorCompoundBrandStroke: #9d4b2e;
|
||||
--colorCompoundBrandStrokeHover: #874229;
|
||||
--colorCompoundBrandStrokePressed: #723924;
|
||||
--colorNeutralStrokeDisabled: #e0e0e0;
|
||||
--colorNeutralStrokeInvertedDisabled: rgba(255, 255, 255, 0.4);
|
||||
--colorTransparentStroke: transparent;
|
||||
--colorTransparentStrokeInteractive: transparent;
|
||||
--colorTransparentStrokeDisabled: transparent;
|
||||
--colorNeutralStrokeAlpha: rgba(0, 0, 0, 0.05);
|
||||
--colorNeutralStrokeAlpha2: rgba(255, 255, 255, 0.2);
|
||||
--colorStrokeFocus1: #ffffff;
|
||||
--colorStrokeFocus2: #000000;
|
||||
--colorNeutralShadowAmbient: rgba(0,0,0,0.12);
|
||||
--colorNeutralShadowKey: rgba(0,0,0,0.14);
|
||||
--colorNeutralShadowAmbientLighter: rgba(0,0,0,0.06);
|
||||
--colorNeutralShadowKeyLighter: rgba(0,0,0,0.07);
|
||||
--colorNeutralShadowAmbientDarker: rgba(0,0,0,0.20);
|
||||
--colorNeutralShadowKeyDarker: rgba(0,0,0,0.24);
|
||||
--colorBrandShadowAmbient: rgba(0,0,0,0.30);
|
||||
--colorBrandShadowKey: rgba(0,0,0,0.25);
|
||||
--colorPaletteRedBackground1: #fdf6f6;
|
||||
--colorPaletteRedBackground2: #f1bbbc;
|
||||
--colorPaletteRedBackground3: #d13438;
|
||||
--colorPaletteRedForeground1: #bc2f32;
|
||||
--colorPaletteRedForeground2: #751d1f;
|
||||
--colorPaletteRedForeground3: #d13438;
|
||||
--colorPaletteRedBorderActive: #d13438;
|
||||
--colorPaletteRedBorder1: #f1bbbc;
|
||||
--colorPaletteRedBorder2: #d13438;
|
||||
--colorPaletteGreenBackground1: #f1faf1;
|
||||
--colorPaletteGreenBackground2: #9fd89f;
|
||||
--colorPaletteGreenBackground3: #107c10;
|
||||
--colorPaletteGreenForeground1: #0e700e;
|
||||
--colorPaletteGreenForeground2: #094509;
|
||||
--colorPaletteGreenForeground3: #107c10;
|
||||
--colorPaletteGreenBorderActive: #107c10;
|
||||
--colorPaletteGreenBorder1: #9fd89f;
|
||||
--colorPaletteGreenBorder2: #107c10;
|
||||
--colorPaletteDarkOrangeBackground1: #fdf6f3;
|
||||
--colorPaletteDarkOrangeBackground2: #f4bfab;
|
||||
--colorPaletteDarkOrangeBackground3: #da3b01;
|
||||
--colorPaletteDarkOrangeForeground1: #c43501;
|
||||
--colorPaletteDarkOrangeForeground2: #7a2101;
|
||||
--colorPaletteDarkOrangeForeground3: #da3b01;
|
||||
--colorPaletteDarkOrangeBorderActive: #da3b01;
|
||||
--colorPaletteDarkOrangeBorder1: #f4bfab;
|
||||
--colorPaletteDarkOrangeBorder2: #da3b01;
|
||||
--colorPaletteYellowBackground1: #fffef5;
|
||||
--colorPaletteYellowBackground2: #fef7b2;
|
||||
--colorPaletteYellowBackground3: #fde300;
|
||||
--colorPaletteYellowForeground1: #817400;
|
||||
--colorPaletteYellowForeground2: #817400;
|
||||
--colorPaletteYellowForeground3: #fde300;
|
||||
--colorPaletteYellowBorderActive: #fde300;
|
||||
--colorPaletteYellowBorder1: #fef7b2;
|
||||
--colorPaletteYellowBorder2: #fde300;
|
||||
--colorPaletteBerryBackground1: #fdf5fc;
|
||||
--colorPaletteBerryBackground2: #edbbe7;
|
||||
--colorPaletteBerryBackground3: #c239b3;
|
||||
--colorPaletteBerryForeground1: #af33a1;
|
||||
--colorPaletteBerryForeground2: #6d2064;
|
||||
--colorPaletteBerryForeground3: #c239b3;
|
||||
--colorPaletteBerryBorderActive: #c239b3;
|
||||
--colorPaletteBerryBorder1: #edbbe7;
|
||||
--colorPaletteBerryBorder2: #c239b3;
|
||||
--colorPaletteLightGreenBackground1: #f2fbf2;
|
||||
--colorPaletteLightGreenBackground2: #a7e3a5;
|
||||
--colorPaletteLightGreenBackground3: #13a10e;
|
||||
--colorPaletteLightGreenForeground1: #11910d;
|
||||
--colorPaletteLightGreenForeground2: #0b5a08;
|
||||
--colorPaletteLightGreenForeground3: #13a10e;
|
||||
--colorPaletteLightGreenBorderActive: #13a10e;
|
||||
--colorPaletteLightGreenBorder1: #a7e3a5;
|
||||
--colorPaletteLightGreenBorder2: #13a10e;
|
||||
--colorPaletteMarigoldBackground1: #fefbf4;
|
||||
--colorPaletteMarigoldBackground2: #f9e2ae;
|
||||
--colorPaletteMarigoldBackground3: #eaa300;
|
||||
--colorPaletteMarigoldForeground1: #d39300;
|
||||
--colorPaletteMarigoldForeground2: #835b00;
|
||||
--colorPaletteMarigoldForeground3: #eaa300;
|
||||
--colorPaletteMarigoldBorderActive: #eaa300;
|
||||
--colorPaletteMarigoldBorder1: #f9e2ae;
|
||||
--colorPaletteMarigoldBorder2: #eaa300;
|
||||
--colorPaletteRedForegroundInverted: #dc5e62;
|
||||
--colorPaletteGreenForegroundInverted: #359b35;
|
||||
--colorPaletteYellowForegroundInverted: #fef7b2;
|
||||
--colorPaletteDarkRedBackground2: #d69ca5;
|
||||
--colorPaletteDarkRedForeground2: #420610;
|
||||
--colorPaletteDarkRedBorderActive: #750b1c;
|
||||
--colorPaletteCranberryBackground2: #eeacb2;
|
||||
--colorPaletteCranberryForeground2: #6e0811;
|
||||
--colorPaletteCranberryBorderActive: #c50f1f;
|
||||
--colorPalettePumpkinBackground2: #efc4ad;
|
||||
--colorPalettePumpkinForeground2: #712d09;
|
||||
--colorPalettePumpkinBorderActive: #ca5010;
|
||||
--colorPalettePeachBackground2: #ffddb3;
|
||||
--colorPalettePeachForeground2: #8f4e00;
|
||||
--colorPalettePeachBorderActive: #ff8c00;
|
||||
--colorPaletteGoldBackground2: #ecdfa5;
|
||||
--colorPaletteGoldForeground2: #6c5700;
|
||||
--colorPaletteGoldBorderActive: #c19c00;
|
||||
--colorPaletteBrassBackground2: #e0cea2;
|
||||
--colorPaletteBrassForeground2: #553e06;
|
||||
--colorPaletteBrassBorderActive: #986f0b;
|
||||
--colorPaletteBrownBackground2: #ddc3b0;
|
||||
--colorPaletteBrownForeground2: #50301a;
|
||||
--colorPaletteBrownBorderActive: #8e562e;
|
||||
--colorPaletteForestBackground2: #bdd99b;
|
||||
--colorPaletteForestForeground2: #294903;
|
||||
--colorPaletteForestBorderActive: #498205;
|
||||
--colorPaletteSeafoamBackground2: #a8f0cd;
|
||||
--colorPaletteSeafoamForeground2: #00723b;
|
||||
--colorPaletteSeafoamBorderActive: #00cc6a;
|
||||
--colorPaletteDarkGreenBackground2: #9ad29a;
|
||||
--colorPaletteDarkGreenForeground2: #063b06;
|
||||
--colorPaletteDarkGreenBorderActive: #0b6a0b;
|
||||
--colorPaletteLightTealBackground2: #a6e9ed;
|
||||
--colorPaletteLightTealForeground2: #00666d;
|
||||
--colorPaletteLightTealBorderActive: #00b7c3;
|
||||
--colorPaletteTealBackground2: #9bd9db;
|
||||
--colorPaletteTealForeground2: #02494c;
|
||||
--colorPaletteTealBorderActive: #038387;
|
||||
--colorPaletteSteelBackground2: #94c8d4;
|
||||
--colorPaletteSteelForeground2: #00333f;
|
||||
--colorPaletteSteelBorderActive: #005b70;
|
||||
--colorPaletteBlueBackground2: #a9d3f2;
|
||||
--colorPaletteBlueForeground2: #004377;
|
||||
--colorPaletteBlueBorderActive: #0078d4;
|
||||
--colorPaletteRoyalBlueBackground2: #9abfdc;
|
||||
--colorPaletteRoyalBlueForeground2: #002c4e;
|
||||
--colorPaletteRoyalBlueBorderActive: #004e8c;
|
||||
--colorPaletteCornflowerBackground2: #c8d1fa;
|
||||
--colorPaletteCornflowerForeground2: #2c3c85;
|
||||
--colorPaletteCornflowerBorderActive: #4f6bed;
|
||||
--colorPaletteNavyBackground2: #a3b2e8;
|
||||
--colorPaletteNavyForeground2: #001665;
|
||||
--colorPaletteNavyBorderActive: #0027b4;
|
||||
--colorPaletteLavenderBackground2: #d2ccf8;
|
||||
--colorPaletteLavenderForeground2: #3f3682;
|
||||
--colorPaletteLavenderBorderActive: #7160e8;
|
||||
--colorPalettePurpleBackground2: #c6b1de;
|
||||
--colorPalettePurpleForeground2: #341a51;
|
||||
--colorPalettePurpleBorderActive: #5c2e91;
|
||||
--colorPaletteGrapeBackground2: #d9a7e0;
|
||||
--colorPaletteGrapeForeground2: #4c0d55;
|
||||
--colorPaletteGrapeBorderActive: #881798;
|
||||
--colorPaletteLilacBackground2: #e6bfed;
|
||||
--colorPaletteLilacForeground2: #63276d;
|
||||
--colorPaletteLilacBorderActive: #b146c2;
|
||||
--colorPalettePinkBackground2: #f7c0e3;
|
||||
--colorPalettePinkForeground2: #80215d;
|
||||
--colorPalettePinkBorderActive: #e43ba6;
|
||||
--colorPaletteMagentaBackground2: #eca5d1;
|
||||
--colorPaletteMagentaForeground2: #6b0043;
|
||||
--colorPaletteMagentaBorderActive: #bf0077;
|
||||
--colorPalettePlumBackground2: #d696c0;
|
||||
--colorPalettePlumForeground2: #43002b;
|
||||
--colorPalettePlumBorderActive: #77004d;
|
||||
--colorPaletteBeigeBackground2: #d7d4d4;
|
||||
--colorPaletteBeigeForeground2: #444241;
|
||||
--colorPaletteBeigeBorderActive: #7a7574;
|
||||
--colorPaletteMinkBackground2: #cecccb;
|
||||
--colorPaletteMinkForeground2: #343231;
|
||||
--colorPaletteMinkBorderActive: #5d5a58;
|
||||
--colorPalettePlatinumBackground2: #cdd6d8;
|
||||
--colorPalettePlatinumForeground2: #3b4447;
|
||||
--colorPalettePlatinumBorderActive: #69797e;
|
||||
--colorPaletteAnchorBackground2: #bcc3c7;
|
||||
--colorPaletteAnchorForeground2: #202427;
|
||||
--colorPaletteAnchorBorderActive: #394146;
|
||||
--colorStatusSuccessBackground1: #f1faf1;
|
||||
--colorStatusSuccessBackground2: #9fd89f;
|
||||
--colorStatusSuccessBackground3: #107c10;
|
||||
--colorStatusSuccessForeground1: #0e700e;
|
||||
--colorStatusSuccessForeground2: #094509;
|
||||
--colorStatusSuccessForeground3: #107c10;
|
||||
--colorStatusSuccessForegroundInverted: #54b054;
|
||||
--colorStatusSuccessBorderActive: #107c10;
|
||||
--colorStatusSuccessBorder1: #9fd89f;
|
||||
--colorStatusSuccessBorder2: #107c10;
|
||||
--colorStatusWarningBackground1: #fff9f5;
|
||||
--colorStatusWarningBackground2: #fdcfb4;
|
||||
--colorStatusWarningBackground3: #f7630c;
|
||||
--colorStatusWarningForeground1: #bc4b09;
|
||||
--colorStatusWarningForeground2: #8a3707;
|
||||
--colorStatusWarningForeground3: #bc4b09;
|
||||
--colorStatusWarningForegroundInverted: #faa06b;
|
||||
--colorStatusWarningBorderActive: #f7630c;
|
||||
--colorStatusWarningBorder1: #fdcfb4;
|
||||
--colorStatusWarningBorder2: #bc4b09;
|
||||
--colorStatusDangerBackground1: #fdf3f4;
|
||||
--colorStatusDangerBackground2: #eeacb2;
|
||||
--colorStatusDangerBackground3: #c50f1f;
|
||||
--colorStatusDangerForeground1: #b10e1c;
|
||||
--colorStatusDangerForeground2: #6e0811;
|
||||
--colorStatusDangerForeground3: #c50f1f;
|
||||
--colorStatusDangerForegroundInverted: #dc626d;
|
||||
--colorStatusDangerBorderActive: #c50f1f;
|
||||
--colorStatusDangerBorder1: #eeacb2;
|
||||
--colorStatusDangerBorder2: #c50f1f;
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
@use "tokens" as *;
|
||||
@use "typography" as *;
|
||||
|
||||
@mixin maxCenter($maxWidth: 1400px)
|
||||
{
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
max-width: $maxWidth;
|
||||
}
|
||||
|
||||
@mixin centerTwo
|
||||
{
|
||||
@include maxCenter;
|
||||
|
||||
display: grid;
|
||||
grid-auto-columns: 1fr;
|
||||
grid-auto-flow: column;
|
||||
gap: $spacingXXXL;
|
||||
|
||||
@media screen and (max-width: 860px)
|
||||
{
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flex($direction: row, $wrap: nowrap)
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: $direction;
|
||||
flex-wrap: $wrap;
|
||||
}
|
||||
|
||||
@mixin align($align: flex-start, $justify: flex-start)
|
||||
{
|
||||
align-items: $align;
|
||||
justify-content: $justify;
|
||||
}
|
||||
|
||||
@mixin formBase
|
||||
{
|
||||
@include body2($fontFamilyBaseAlt);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: $spacingXS $spacingL;
|
||||
min-width: 96px;
|
||||
min-height: 40px;
|
||||
|
||||
background-image: linear-gradient($colorNeutralBackground1Hover, $colorNeutralBackground1Hover);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0% 100%;
|
||||
background-color: transparent;
|
||||
|
||||
color: $colorNeutralForeground1;
|
||||
text-decoration: none;
|
||||
|
||||
border: $strokeWidthThin solid $colorNeutralForeground1;
|
||||
|
||||
transition-property: background-image, background-size, background-color, color, border;
|
||||
transition-duration: $durationFast;
|
||||
transition-timing-function: $curveEasyEaseMax;
|
||||
|
||||
&:not(:disabled, [disabled])
|
||||
{
|
||||
&:not([type=submit]):user-invalid
|
||||
{
|
||||
background-image: linear-gradient($colorStatusDangerBackground1, $colorStatusDangerBackground1);
|
||||
border-color: $colorStatusDangerBorder1;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-visible
|
||||
{
|
||||
background-size: 100% 100%;
|
||||
|
||||
&:active
|
||||
{
|
||||
background-image: linear-gradient($colorNeutralBackground1Pressed, $colorNeutralBackground1Pressed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[disabled]
|
||||
{
|
||||
color: $colorNeutralForegroundDisabled;
|
||||
border-color: $colorNeutralStrokeDisabled;
|
||||
background-color: $colorNeutralBackgroundInvertedDisabled;
|
||||
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin slideIn($offset: 32px, $duration: $durationFast)
|
||||
{
|
||||
animation: slideIn $duration $curveEasyEaseMax;
|
||||
|
||||
@keyframes slideIn
|
||||
{
|
||||
from
|
||||
{
|
||||
opacity: 0;
|
||||
transform: translateX($offset);
|
||||
}
|
||||
|
||||
to
|
||||
{
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,438 @@
|
||||
// Border radius
|
||||
$borderRadiusNone: 0;
|
||||
$borderRadiusSmall: 2px;
|
||||
$borderRadiusMedium: 4px;
|
||||
$borderRadiusLarge: 6px;
|
||||
$borderRadiusXLarge: 8px;
|
||||
$borderRadiusCircular: 10000px;
|
||||
|
||||
// Motion / Curves
|
||||
$curveAccelerateMax: cubic-bezier(1,0,1,1);
|
||||
$curveAccelerateMid: cubic-bezier(0.7,0,1,0.5);
|
||||
$curveAccelerateMin: cubic-bezier(0.8,0,1,1);
|
||||
$curveDecelerateMax: cubic-bezier(0,0,0,1);
|
||||
$curveDecelerateMid: cubic-bezier(0.1,0.9,0.2,1);
|
||||
$curveDecelerateMin: cubic-bezier(0.33,0,0.1,1);
|
||||
$curveEasyEaseMax: cubic-bezier(0.8,0,0.1,1);
|
||||
$curveEasyEase: cubic-bezier(0.33,0,0.67,1);
|
||||
$curveLinear: cubic-bezier(0,0,1,1);
|
||||
|
||||
// Motion / Durations
|
||||
$durationUltraFast: 50ms;
|
||||
$durationFaster: 100ms;
|
||||
$durationFast: 150ms;
|
||||
$durationNormal: 200ms;
|
||||
$durationGentle: 250ms;
|
||||
$durationSlow: 300ms;
|
||||
$durationSlower: 400ms;
|
||||
$durationUltraSlow: 500ms;
|
||||
|
||||
// Shadows
|
||||
$shadow2: 0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28);
|
||||
$shadow4: 0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28);
|
||||
$shadow8: 0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28);
|
||||
$shadow16: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28);
|
||||
$shadow28: 0 0 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28);
|
||||
$shadow64: 0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28);
|
||||
$shadow2Brand: 0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25);
|
||||
$shadow4Brand: 0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25);
|
||||
$shadow8Brand: 0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25);
|
||||
$shadow16Brand: 0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25);
|
||||
$shadow28Brand: 0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25);
|
||||
$shadow64Brand: 0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25);
|
||||
|
||||
// Spacing
|
||||
$spacingNone: 0;
|
||||
$spacingXXS: 2px;
|
||||
$spacingXS: 4px;
|
||||
$spacingSNudge: 6px;
|
||||
$spacingS: 8px;
|
||||
$spacingMNudge: 10px;
|
||||
$spacingM: 12px;
|
||||
$spacingL: 16px;
|
||||
$spacingXL: 20px;
|
||||
$spacingXXL: 24px;
|
||||
$spacingXXXL: 32px;
|
||||
|
||||
// Stroke widths
|
||||
$strokeWidthThin: 1px;
|
||||
$strokeWidthThick: 2px;
|
||||
$strokeWidthThicker: 3px;
|
||||
$strokeWidthThickest: 4px;
|
||||
|
||||
// Fonts / Font family
|
||||
$fontFamilyBase: var(--font-base), "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
|
||||
$fontFamilyBaseAlt: var(--font-alt), "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
|
||||
$fontFamilyMonospace: var(--font-mono), Consolas, "Courier New", Courier, monospace;
|
||||
$fontFamilyNumeric: var(--font-base), Bahnschrift, "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
|
||||
|
||||
// Fonts / Font size
|
||||
$fontSizeBase100: 10px;
|
||||
$fontSizeBase200: 12px;
|
||||
$fontSizeBase300: 14px;
|
||||
$fontSizeBase400: 16px;
|
||||
$fontSizeBase500: 20px;
|
||||
$fontSizeBase600: 24px;
|
||||
$fontSizeHero700: 28px;
|
||||
$fontSizeHero800: 32px;
|
||||
$fontSizeHero900: 40px;
|
||||
$fontSizeHero1000: 68px;
|
||||
|
||||
// Fonts / Font weight
|
||||
$fontWeightRegular: 400;
|
||||
$fontWeightMedium: 500;
|
||||
$fontWeightSemibold: 600;
|
||||
$fontWeightBold: 700;
|
||||
|
||||
// Fonts / Line height
|
||||
$lineHeightBase100: 14px;
|
||||
$lineHeightBase200: 16px;
|
||||
$lineHeightBase300: 20px;
|
||||
$lineHeightBase400: 22px;
|
||||
$lineHeightBase500: 28px;
|
||||
$lineHeightBase600: 32px;
|
||||
$lineHeightHero700: 36px;
|
||||
$lineHeightHero800: 40px;
|
||||
$lineHeightHero900: 52px;
|
||||
$lineHeightHero1000: 92px;
|
||||
|
||||
// Colors
|
||||
$colorNeutralForeground1: var(--colorNeutralForeground1);
|
||||
$colorNeutralForeground1Hover: var(--colorNeutralForeground1Hover);
|
||||
$colorNeutralForeground1Pressed: var(--colorNeutralForeground1Pressed);
|
||||
$colorNeutralForeground1Selected: var(--colorNeutralForeground1Selected);
|
||||
$colorNeutralForeground2: var(--colorNeutralForeground2);
|
||||
$colorNeutralForeground2Hover: var(--colorNeutralForeground2Hover);
|
||||
$colorNeutralForeground2Pressed: var(--colorNeutralForeground2Pressed);
|
||||
$colorNeutralForeground2Selected: var(--colorNeutralForeground2Selected);
|
||||
$colorNeutralForeground2BrandHover: var(--colorNeutralForeground2BrandHover);
|
||||
$colorNeutralForeground2BrandPressed: var(--colorNeutralForeground2BrandPressed);
|
||||
$colorNeutralForeground2BrandSelected: var(--colorNeutralForeground2BrandSelected);
|
||||
$colorNeutralForeground3: var(--colorNeutralForeground3);
|
||||
$colorNeutralForeground3Hover: var(--colorNeutralForeground3Hover);
|
||||
$colorNeutralForeground3Pressed: var(--colorNeutralForeground3Pressed);
|
||||
$colorNeutralForeground3Selected: var(--colorNeutralForeground3Selected);
|
||||
$colorNeutralForeground3BrandHover: var(--colorNeutralForeground3BrandHover);
|
||||
$colorNeutralForeground3BrandPressed: var(--colorNeutralForeground3BrandPressed);
|
||||
$colorNeutralForeground3BrandSelected: var(--colorNeutralForeground3BrandSelected);
|
||||
$colorNeutralForeground4: var(--colorNeutralForeground4);
|
||||
$colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled);
|
||||
$colorNeutralForegroundInvertedDisabled: var(--colorNeutralForegroundInvertedDisabled);
|
||||
$colorBrandForegroundLink: var(--colorBrandForegroundLink);
|
||||
$colorBrandForegroundLinkHover: var(--colorBrandForegroundLinkHover);
|
||||
$colorBrandForegroundLinkPressed: var(--colorBrandForegroundLinkPressed);
|
||||
$colorBrandForegroundLinkSelected: var(--colorBrandForegroundLinkSelected);
|
||||
$colorNeutralForeground2Link: var(--colorNeutralForeground2Link);
|
||||
$colorNeutralForeground2LinkHover: var(--colorNeutralForeground2LinkHover);
|
||||
$colorNeutralForeground2LinkPressed: var(--colorNeutralForeground2LinkPressed);
|
||||
$colorNeutralForeground2LinkSelected: var(--colorNeutralForeground2LinkSelected);
|
||||
$colorCompoundBrandForeground1: var(--colorCompoundBrandForeground1);
|
||||
$colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover);
|
||||
$colorCompoundBrandForeground1Pressed: var(--colorCompoundBrandForeground1Pressed);
|
||||
$colorBrandForeground1: var(--colorBrandForeground1);
|
||||
$colorBrandForeground2: var(--colorBrandForeground2);
|
||||
$colorBrandForeground2Hover: var(--colorBrandForeground2Hover);
|
||||
$colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed);
|
||||
$colorNeutralForeground1Static: var(--colorNeutralForeground1Static);
|
||||
$colorNeutralForegroundStaticInverted: var(--colorNeutralForegroundStaticInverted);
|
||||
$colorNeutralForegroundInverted: var(--colorNeutralForegroundInverted);
|
||||
$colorNeutralForegroundInvertedHover: var(--colorNeutralForegroundInvertedHover);
|
||||
$colorNeutralForegroundInvertedPressed: var(--colorNeutralForegroundInvertedPressed);
|
||||
$colorNeutralForegroundInvertedSelected: var(--colorNeutralForegroundInvertedSelected);
|
||||
$colorNeutralForegroundInverted2: var(--colorNeutralForegroundInverted2);
|
||||
$colorNeutralForegroundOnBrand: var(--colorNeutralForegroundOnBrand);
|
||||
$colorNeutralForegroundInvertedLink: var(--colorNeutralForegroundInvertedLink);
|
||||
$colorNeutralForegroundInvertedLinkHover: var(--colorNeutralForegroundInvertedLinkHover);
|
||||
$colorNeutralForegroundInvertedLinkPressed: var(--colorNeutralForegroundInvertedLinkPressed);
|
||||
$colorNeutralForegroundInvertedLinkSelected: var(--colorNeutralForegroundInvertedLinkSelected);
|
||||
$colorBrandForegroundInverted: var(--colorBrandForegroundInverted);
|
||||
$colorBrandForegroundInvertedHover: var(--colorBrandForegroundInvertedHover);
|
||||
$colorBrandForegroundInvertedPressed: var(--colorBrandForegroundInvertedPressed);
|
||||
$colorBrandForegroundOnLight: var(--colorBrandForegroundOnLight);
|
||||
$colorBrandForegroundOnLightHover: var(--colorBrandForegroundOnLightHover);
|
||||
$colorBrandForegroundOnLightPressed: var(--colorBrandForegroundOnLightPressed);
|
||||
$colorBrandForegroundOnLightSelected: var(--colorBrandForegroundOnLightSelected);
|
||||
$colorNeutralBackground1: var(--colorNeutralBackground1);
|
||||
$colorNeutralBackground1Hover: var(--colorNeutralBackground1Hover);
|
||||
$colorNeutralBackground1Pressed: var(--colorNeutralBackground1Pressed);
|
||||
$colorNeutralBackground1Selected: var(--colorNeutralBackground1Selected);
|
||||
$colorNeutralBackground2: var(--colorNeutralBackground2);
|
||||
$colorNeutralBackground2Hover: var(--colorNeutralBackground2Hover);
|
||||
$colorNeutralBackground2Pressed: var(--colorNeutralBackground2Pressed);
|
||||
$colorNeutralBackground2Selected: var(--colorNeutralBackground2Selected);
|
||||
$colorNeutralBackground3: var(--colorNeutralBackground3);
|
||||
$colorNeutralBackground3Hover: var(--colorNeutralBackground3Hover);
|
||||
$colorNeutralBackground3Pressed: var(--colorNeutralBackground3Pressed);
|
||||
$colorNeutralBackground3Selected: var(--colorNeutralBackground3Selected);
|
||||
$colorNeutralBackground4: var(--colorNeutralBackground4);
|
||||
$colorNeutralBackground4Hover: var(--colorNeutralBackground4Hover);
|
||||
$colorNeutralBackground4Pressed: var(--colorNeutralBackground4Pressed);
|
||||
$colorNeutralBackground4Selected: var(--colorNeutralBackground4Selected);
|
||||
$colorNeutralBackground5: var(--colorNeutralBackground5);
|
||||
$colorNeutralBackground5Hover: var(--colorNeutralBackground5Hover);
|
||||
$colorNeutralBackground5Pressed: var(--colorNeutralBackground5Pressed);
|
||||
$colorNeutralBackground5Selected: var(--colorNeutralBackground5Selected);
|
||||
$colorNeutralBackground6: var(--colorNeutralBackground6);
|
||||
$colorNeutralBackgroundInverted: var(--colorNeutralBackgroundInverted);
|
||||
$colorNeutralBackgroundStatic: var(--colorNeutralBackgroundStatic);
|
||||
$colorNeutralBackgroundAlpha: var(--colorNeutralBackgroundAlpha);
|
||||
$colorNeutralBackgroundAlpha2: var(--colorNeutralBackgroundAlpha2);
|
||||
$colorSubtleBackground: var(--colorSubtleBackground);
|
||||
$colorSubtleBackgroundHover: var(--colorSubtleBackgroundHover);
|
||||
$colorSubtleBackgroundPressed: var(--colorSubtleBackgroundPressed);
|
||||
$colorSubtleBackgroundSelected: var(--colorSubtleBackgroundSelected);
|
||||
$colorSubtleBackgroundLightAlphaHover: var(--colorSubtleBackgroundLightAlphaHover);
|
||||
$colorSubtleBackgroundLightAlphaPressed: var(--colorSubtleBackgroundLightAlphaPressed);
|
||||
$colorSubtleBackgroundLightAlphaSelected: var(--colorSubtleBackgroundLightAlphaSelected);
|
||||
$colorSubtleBackgroundInverted: var(--colorSubtleBackgroundInverted);
|
||||
$colorSubtleBackgroundInvertedHover: var(--colorSubtleBackgroundInvertedHover);
|
||||
$colorSubtleBackgroundInvertedPressed: var(--colorSubtleBackgroundInvertedPressed);
|
||||
$colorSubtleBackgroundInvertedSelected: var(--colorSubtleBackgroundInvertedSelected);
|
||||
$colorTransparentBackground: var(--colorTransparentBackground);
|
||||
$colorTransparentBackgroundHover: var(--colorTransparentBackgroundHover);
|
||||
$colorTransparentBackgroundPressed: var(--colorTransparentBackgroundPressed);
|
||||
$colorTransparentBackgroundSelected: var(--colorTransparentBackgroundSelected);
|
||||
$colorNeutralBackgroundDisabled: var(--colorNeutralBackgroundDisabled);
|
||||
$colorNeutralBackgroundInvertedDisabled: var(--colorNeutralBackgroundInvertedDisabled);
|
||||
$colorNeutralStencil1: var(--colorNeutralStencil1);
|
||||
$colorNeutralStencil2: var(--colorNeutralStencil2);
|
||||
$colorNeutralStencil1Alpha: var(--colorNeutralStencil1Alpha);
|
||||
$colorNeutralStencil2Alpha: var(--colorNeutralStencil2Alpha);
|
||||
$colorBackgroundOverlay: var(--colorBackgroundOverlay);
|
||||
$colorScrollbarOverlay: var(--colorScrollbarOverlay);
|
||||
$colorBrandBackground: var(--colorBrandBackground);
|
||||
$colorBrandBackgroundHover: var(--colorBrandBackgroundHover);
|
||||
$colorBrandBackgroundPressed: var(--colorBrandBackgroundPressed);
|
||||
$colorBrandBackgroundSelected: var(--colorBrandBackgroundSelected);
|
||||
$colorCompoundBrandBackground: var(--colorCompoundBrandBackground);
|
||||
$colorCompoundBrandBackgroundHover: var(--colorCompoundBrandBackgroundHover);
|
||||
$colorCompoundBrandBackgroundPressed: var(--colorCompoundBrandBackgroundPressed);
|
||||
$colorBrandBackgroundStatic: var(--colorBrandBackgroundStatic);
|
||||
$colorBrandBackground2: var(--colorBrandBackground2);
|
||||
$colorBrandBackground2Hover: var(--colorBrandBackground2Hover);
|
||||
$colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed);
|
||||
$colorBrandBackgroundInverted: var(--colorBrandBackgroundInverted);
|
||||
$colorBrandBackgroundInvertedHover: var(--colorBrandBackgroundInvertedHover);
|
||||
$colorBrandBackgroundInvertedPressed: var(--colorBrandBackgroundInvertedPressed);
|
||||
$colorBrandBackgroundInvertedSelected: var(--colorBrandBackgroundInvertedSelected);
|
||||
$colorNeutralStrokeAccessible: var(--colorNeutralStrokeAccessible);
|
||||
$colorNeutralStrokeAccessibleHover: var(--colorNeutralStrokeAccessibleHover);
|
||||
$colorNeutralStrokeAccessiblePressed: var(--colorNeutralStrokeAccessiblePressed);
|
||||
$colorNeutralStrokeAccessibleSelected: var(--colorNeutralStrokeAccessibleSelected);
|
||||
$colorNeutralStroke1: var(--colorNeutralStroke1);
|
||||
$colorNeutralStroke1Hover: var(--colorNeutralStroke1Hover);
|
||||
$colorNeutralStroke1Pressed: var(--colorNeutralStroke1Pressed);
|
||||
$colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected);
|
||||
$colorNeutralStroke2: var(--colorNeutralStroke2);
|
||||
$colorNeutralStroke3: var(--colorNeutralStroke3);
|
||||
$colorNeutralStrokeSubtle: var(--colorNeutralStrokeSubtle);
|
||||
$colorNeutralStrokeOnBrand: var(--colorNeutralStrokeOnBrand);
|
||||
$colorNeutralStrokeOnBrand2: var(--colorNeutralStrokeOnBrand2);
|
||||
$colorNeutralStrokeOnBrand2Hover: var(--colorNeutralStrokeOnBrand2Hover);
|
||||
$colorNeutralStrokeOnBrand2Pressed: var(--colorNeutralStrokeOnBrand2Pressed);
|
||||
$colorNeutralStrokeOnBrand2Selected: var(--colorNeutralStrokeOnBrand2Selected);
|
||||
$colorBrandStroke1: var(--colorBrandStroke1);
|
||||
$colorBrandStroke2: var(--colorBrandStroke2);
|
||||
$colorBrandStroke2Hover: var(--colorBrandStroke2Hover);
|
||||
$colorBrandStroke2Pressed: var(--colorBrandStroke2Pressed);
|
||||
$colorBrandStroke2Contrast: var(--colorBrandStroke2Contrast);
|
||||
$colorCompoundBrandStroke: var(--colorCompoundBrandStroke);
|
||||
$colorCompoundBrandStrokeHover: var(--colorCompoundBrandStrokeHover);
|
||||
$colorCompoundBrandStrokePressed: var(--colorCompoundBrandStrokePressed);
|
||||
$colorNeutralStrokeDisabled: var(--colorNeutralStrokeDisabled);
|
||||
$colorNeutralStrokeInvertedDisabled: var(--colorNeutralStrokeInvertedDisabled);
|
||||
$colorTransparentStroke: var(--colorTransparentStroke);
|
||||
$colorTransparentStrokeInteractive: var(--colorTransparentStrokeInteractive);
|
||||
$colorTransparentStrokeDisabled: var(--colorTransparentStrokeDisabled);
|
||||
$colorNeutralStrokeAlpha: var(--colorNeutralStrokeAlpha);
|
||||
$colorNeutralStrokeAlpha2: var(--colorNeutralStrokeAlpha2);
|
||||
$colorStrokeFocus1: var(--colorStrokeFocus1);
|
||||
$colorStrokeFocus2: var(--colorStrokeFocus2);
|
||||
$colorNeutralShadowAmbient: var(--colorNeutralShadowAmbient);
|
||||
$colorNeutralShadowKey: var(--colorNeutralShadowKey);
|
||||
$colorNeutralShadowAmbientLighter: var(--colorNeutralShadowAmbientLighter);
|
||||
$colorNeutralShadowKeyLighter: var(--colorNeutralShadowKeyLighter);
|
||||
$colorNeutralShadowAmbientDarker: var(--colorNeutralShadowAmbientDarker);
|
||||
$colorNeutralShadowKeyDarker: var(--colorNeutralShadowKeyDarker);
|
||||
$colorBrandShadowAmbient: var(--colorBrandShadowAmbient);
|
||||
$colorBrandShadowKey: var(--colorBrandShadowKey);
|
||||
$colorPaletteRedBackground1: var(--colorPaletteRedBackground1);
|
||||
$colorPaletteRedBackground2: var(--colorPaletteRedBackground2);
|
||||
$colorPaletteRedBackground3: var(--colorPaletteRedBackground3);
|
||||
$colorPaletteRedForeground1: var(--colorPaletteRedForeground1);
|
||||
$colorPaletteRedForeground2: var(--colorPaletteRedForeground2);
|
||||
$colorPaletteRedForeground3: var(--colorPaletteRedForeground3);
|
||||
$colorPaletteRedBorderActive: var(--colorPaletteRedBorderActive);
|
||||
$colorPaletteRedBorder1: var(--colorPaletteRedBorder1);
|
||||
$colorPaletteRedBorder2: var(--colorPaletteRedBorder2);
|
||||
$colorPaletteGreenBackground1: var(--colorPaletteGreenBackground1);
|
||||
$colorPaletteGreenBackground2: var(--colorPaletteGreenBackground2);
|
||||
$colorPaletteGreenBackground3: var(--colorPaletteGreenBackground3);
|
||||
$colorPaletteGreenForeground1: var(--colorPaletteGreenForeground1);
|
||||
$colorPaletteGreenForeground2: var(--colorPaletteGreenForeground2);
|
||||
$colorPaletteGreenForeground3: var(--colorPaletteGreenForeground3);
|
||||
$colorPaletteGreenBorderActive: var(--colorPaletteGreenBorderActive);
|
||||
$colorPaletteGreenBorder1: var(--colorPaletteGreenBorder1);
|
||||
$colorPaletteGreenBorder2: var(--colorPaletteGreenBorder2);
|
||||
$colorPaletteDarkOrangeBackground1: var(--colorPaletteDarkOrangeBackground1);
|
||||
$colorPaletteDarkOrangeBackground2: var(--colorPaletteDarkOrangeBackground2);
|
||||
$colorPaletteDarkOrangeBackground3: var(--colorPaletteDarkOrangeBackground3);
|
||||
$colorPaletteDarkOrangeForeground1: var(--colorPaletteDarkOrangeForeground1);
|
||||
$colorPaletteDarkOrangeForeground2: var(--colorPaletteDarkOrangeForeground2);
|
||||
$colorPaletteDarkOrangeForeground3: var(--colorPaletteDarkOrangeForeground3);
|
||||
$colorPaletteDarkOrangeBorderActive: var(--colorPaletteDarkOrangeBorderActive);
|
||||
$colorPaletteDarkOrangeBorder1: var(--colorPaletteDarkOrangeBorder1);
|
||||
$colorPaletteDarkOrangeBorder2: var(--colorPaletteDarkOrangeBorder2);
|
||||
$colorPaletteYellowBackground1: var(--colorPaletteYellowBackground1);
|
||||
$colorPaletteYellowBackground2: var(--colorPaletteYellowBackground2);
|
||||
$colorPaletteYellowBackground3: var(--colorPaletteYellowBackground3);
|
||||
$colorPaletteYellowForeground1: var(--colorPaletteYellowForeground1);
|
||||
$colorPaletteYellowForeground2: var(--colorPaletteYellowForeground2);
|
||||
$colorPaletteYellowForeground3: var(--colorPaletteYellowForeground3);
|
||||
$colorPaletteYellowBorderActive: var(--colorPaletteYellowBorderActive);
|
||||
$colorPaletteYellowBorder1: var(--colorPaletteYellowBorder1);
|
||||
$colorPaletteYellowBorder2: var(--colorPaletteYellowBorder2);
|
||||
$colorPaletteBerryBackground1: var(--colorPaletteBerryBackground1);
|
||||
$colorPaletteBerryBackground2: var(--colorPaletteBerryBackground2);
|
||||
$colorPaletteBerryBackground3: var(--colorPaletteBerryBackground3);
|
||||
$colorPaletteBerryForeground1: var(--colorPaletteBerryForeground1);
|
||||
$colorPaletteBerryForeground2: var(--colorPaletteBerryForeground2);
|
||||
$colorPaletteBerryForeground3: var(--colorPaletteBerryForeground3);
|
||||
$colorPaletteBerryBorderActive: var(--colorPaletteBerryBorderActive);
|
||||
$colorPaletteBerryBorder1: var(--colorPaletteBerryBorder1);
|
||||
$colorPaletteBerryBorder2: var(--colorPaletteBerryBorder2);
|
||||
$colorPaletteLightGreenBackground1: var(--colorPaletteLightGreenBackground1);
|
||||
$colorPaletteLightGreenBackground2: var(--colorPaletteLightGreenBackground2);
|
||||
$colorPaletteLightGreenBackground3: var(--colorPaletteLightGreenBackground3);
|
||||
$colorPaletteLightGreenForeground1: var(--colorPaletteLightGreenForeground1);
|
||||
$colorPaletteLightGreenForeground2: var(--colorPaletteLightGreenForeground2);
|
||||
$colorPaletteLightGreenForeground3: var(--colorPaletteLightGreenForeground3);
|
||||
$colorPaletteLightGreenBorderActive: var(--colorPaletteLightGreenBorderActive);
|
||||
$colorPaletteLightGreenBorder1: var(--colorPaletteLightGreenBorder1);
|
||||
$colorPaletteLightGreenBorder2: var(--colorPaletteLightGreenBorder2);
|
||||
$colorPaletteMarigoldBackground1: var(--colorPaletteMarigoldBackground1);
|
||||
$colorPaletteMarigoldBackground2: var(--colorPaletteMarigoldBackground2);
|
||||
$colorPaletteMarigoldBackground3: var(--colorPaletteMarigoldBackground3);
|
||||
$colorPaletteMarigoldForeground1: var(--colorPaletteMarigoldForeground1);
|
||||
$colorPaletteMarigoldForeground2: var(--colorPaletteMarigoldForeground2);
|
||||
$colorPaletteMarigoldForeground3: var(--colorPaletteMarigoldForeground3);
|
||||
$colorPaletteMarigoldBorderActive: var(--colorPaletteMarigoldBorderActive);
|
||||
$colorPaletteMarigoldBorder1: var(--colorPaletteMarigoldBorder1);
|
||||
$colorPaletteMarigoldBorder2: var(--colorPaletteMarigoldBorder2);
|
||||
$colorPaletteRedForegroundInverted: var(--colorPaletteRedForegroundInverted);
|
||||
$colorPaletteGreenForegroundInverted: var(--colorPaletteGreenForegroundInverted);
|
||||
$colorPaletteYellowForegroundInverted: var(--colorPaletteYellowForegroundInverted);
|
||||
$colorPaletteDarkRedBackground2: var(--colorPaletteDarkRedBackground2);
|
||||
$colorPaletteDarkRedForeground2: var(--colorPaletteDarkRedForeground2);
|
||||
$colorPaletteDarkRedBorderActive: var(--colorPaletteDarkRedBorderActive);
|
||||
$colorPaletteCranberryBackground2: var(--colorPaletteCranberryBackground2);
|
||||
$colorPaletteCranberryForeground2: var(--colorPaletteCranberryForeground2);
|
||||
$colorPaletteCranberryBorderActive: var(--colorPaletteCranberryBorderActive);
|
||||
$colorPalettePumpkinBackground2: var(--colorPalettePumpkinBackground2);
|
||||
$colorPalettePumpkinForeground2: var(--colorPalettePumpkinForeground2);
|
||||
$colorPalettePumpkinBorderActive: var(--colorPalettePumpkinBorderActive);
|
||||
$colorPalettePeachBackground2: var(--colorPalettePeachBackground2);
|
||||
$colorPalettePeachForeground2: var(--colorPalettePeachForeground2);
|
||||
$colorPalettePeachBorderActive: var(--colorPalettePeachBorderActive);
|
||||
$colorPaletteGoldBackground2: var(--colorPaletteGoldBackground2);
|
||||
$colorPaletteGoldForeground2: var(--colorPaletteGoldForeground2);
|
||||
$colorPaletteGoldBorderActive: var(--colorPaletteGoldBorderActive);
|
||||
$colorPaletteBrassBackground2: var(--colorPaletteBrassBackground2);
|
||||
$colorPaletteBrassForeground2: var(--colorPaletteBrassForeground2);
|
||||
$colorPaletteBrassBorderActive: var(--colorPaletteBrassBorderActive);
|
||||
$colorPaletteBrownBackground2: var(--colorPaletteBrownBackground2);
|
||||
$colorPaletteBrownForeground2: var(--colorPaletteBrownForeground2);
|
||||
$colorPaletteBrownBorderActive: var(--colorPaletteBrownBorderActive);
|
||||
$colorPaletteForestBackground2: var(--colorPaletteForestBackground2);
|
||||
$colorPaletteForestForeground2: var(--colorPaletteForestForeground2);
|
||||
$colorPaletteForestBorderActive: var(--colorPaletteForestBorderActive);
|
||||
$colorPaletteSeafoamBackground2: var(--colorPaletteSeafoamBackground2);
|
||||
$colorPaletteSeafoamForeground2: var(--colorPaletteSeafoamForeground2);
|
||||
$colorPaletteSeafoamBorderActive: var(--colorPaletteSeafoamBorderActive);
|
||||
$colorPaletteDarkGreenBackground2: var(--colorPaletteDarkGreenBackground2);
|
||||
$colorPaletteDarkGreenForeground2: var(--colorPaletteDarkGreenForeground2);
|
||||
$colorPaletteDarkGreenBorderActive: var(--colorPaletteDarkGreenBorderActive);
|
||||
$colorPaletteLightTealBackground2: var(--colorPaletteLightTealBackground2);
|
||||
$colorPaletteLightTealForeground2: var(--colorPaletteLightTealForeground2);
|
||||
$colorPaletteLightTealBorderActive: var(--colorPaletteLightTealBorderActive);
|
||||
$colorPaletteTealBackground2: var(--colorPaletteTealBackground2);
|
||||
$colorPaletteTealForeground2: var(--colorPaletteTealForeground2);
|
||||
$colorPaletteTealBorderActive: var(--colorPaletteTealBorderActive);
|
||||
$colorPaletteSteelBackground2: var(--colorPaletteSteelBackground2);
|
||||
$colorPaletteSteelForeground2: var(--colorPaletteSteelForeground2);
|
||||
$colorPaletteSteelBorderActive: var(--colorPaletteSteelBorderActive);
|
||||
$colorPaletteBlueBackground2: var(--colorPaletteBlueBackground2);
|
||||
$colorPaletteBlueForeground2: var(--colorPaletteBlueForeground2);
|
||||
$colorPaletteBlueBorderActive: var(--colorPaletteBlueBorderActive);
|
||||
$colorPaletteRoyalBlueBackground2: var(--colorPaletteRoyalBlueBackground2);
|
||||
$colorPaletteRoyalBlueForeground2: var(--colorPaletteRoyalBlueForeground2);
|
||||
$colorPaletteRoyalBlueBorderActive: var(--colorPaletteRoyalBlueBorderActive);
|
||||
$colorPaletteCornflowerBackground2: var(--colorPaletteCornflowerBackground2);
|
||||
$colorPaletteCornflowerForeground2: var(--colorPaletteCornflowerForeground2);
|
||||
$colorPaletteCornflowerBorderActive: var(--colorPaletteCornflowerBorderActive);
|
||||
$colorPaletteNavyBackground2: var(--colorPaletteNavyBackground2);
|
||||
$colorPaletteNavyForeground2: var(--colorPaletteNavyForeground2);
|
||||
$colorPaletteNavyBorderActive: var(--colorPaletteNavyBorderActive);
|
||||
$colorPaletteLavenderBackground2: var(--colorPaletteLavenderBackground2);
|
||||
$colorPaletteLavenderForeground2: var(--colorPaletteLavenderForeground2);
|
||||
$colorPaletteLavenderBorderActive: var(--colorPaletteLavenderBorderActive);
|
||||
$colorPalettePurpleBackground2: var(--colorPalettePurpleBackground2);
|
||||
$colorPalettePurpleForeground2: var(--colorPalettePurpleForeground2);
|
||||
$colorPalettePurpleBorderActive: var(--colorPalettePurpleBorderActive);
|
||||
$colorPaletteGrapeBackground2: var(--colorPaletteGrapeBackground2);
|
||||
$colorPaletteGrapeForeground2: var(--colorPaletteGrapeForeground2);
|
||||
$colorPaletteGrapeBorderActive: var(--colorPaletteGrapeBorderActive);
|
||||
$colorPaletteLilacBackground2: var(--colorPaletteLilacBackground2);
|
||||
$colorPaletteLilacForeground2: var(--colorPaletteLilacForeground2);
|
||||
$colorPaletteLilacBorderActive: var(--colorPaletteLilacBorderActive);
|
||||
$colorPalettePinkBackground2: var(--colorPalettePinkBackground2);
|
||||
$colorPalettePinkForeground2: var(--colorPalettePinkForeground2);
|
||||
$colorPalettePinkBorderActive: var(--colorPalettePinkBorderActive);
|
||||
$colorPaletteMagentaBackground2: var(--colorPaletteMagentaBackground2);
|
||||
$colorPaletteMagentaForeground2: var(--colorPaletteMagentaForeground2);
|
||||
$colorPaletteMagentaBorderActive: var(--colorPaletteMagentaBorderActive);
|
||||
$colorPalettePlumBackground2: var(--colorPalettePlumBackground2);
|
||||
$colorPalettePlumForeground2: var(--colorPalettePlumForeground2);
|
||||
$colorPalettePlumBorderActive: var(--colorPalettePlumBorderActive);
|
||||
$colorPaletteBeigeBackground2: var(--colorPaletteBeigeBackground2);
|
||||
$colorPaletteBeigeForeground2: var(--colorPaletteBeigeForeground2);
|
||||
$colorPaletteBeigeBorderActive: var(--colorPaletteBeigeBorderActive);
|
||||
$colorPaletteMinkBackground2: var(--colorPaletteMinkBackground2);
|
||||
$colorPaletteMinkForeground2: var(--colorPaletteMinkForeground2);
|
||||
$colorPaletteMinkBorderActive: var(--colorPaletteMinkBorderActive);
|
||||
$colorPalettePlatinumBackground2: var(--colorPalettePlatinumBackground2);
|
||||
$colorPalettePlatinumForeground2: var(--colorPalettePlatinumForeground2);
|
||||
$colorPalettePlatinumBorderActive: var(--colorPalettePlatinumBorderActive);
|
||||
$colorPaletteAnchorBackground2: var(--colorPaletteAnchorBackground2);
|
||||
$colorPaletteAnchorForeground2: var(--colorPaletteAnchorForeground2);
|
||||
$colorPaletteAnchorBorderActive: var(--colorPaletteAnchorBorderActive);
|
||||
$colorStatusSuccessBackground1: var(--colorStatusSuccessBackground1);
|
||||
$colorStatusSuccessBackground2: var(--colorStatusSuccessBackground2);
|
||||
$colorStatusSuccessBackground3: var(--colorStatusSuccessBackground3);
|
||||
$colorStatusSuccessForeground1: var(--colorStatusSuccessForeground1);
|
||||
$colorStatusSuccessForeground2: var(--colorStatusSuccessForeground2);
|
||||
$colorStatusSuccessForeground3: var(--colorStatusSuccessForeground3);
|
||||
$colorStatusSuccessForegroundInverted: var(--colorStatusSuccessForegroundInverted);
|
||||
$colorStatusSuccessBorderActive: var(--colorStatusSuccessBorderActive);
|
||||
$colorStatusSuccessBorder1: var(--colorStatusSuccessBorder1);
|
||||
$colorStatusSuccessBorder2: var(--colorStatusSuccessBorder2);
|
||||
$colorStatusWarningBackground1: var(--colorStatusWarningBackground1);
|
||||
$colorStatusWarningBackground2: var(--colorStatusWarningBackground2);
|
||||
$colorStatusWarningBackground3: var(--colorStatusWarningBackground3);
|
||||
$colorStatusWarningForeground1: var(--colorStatusWarningForeground1);
|
||||
$colorStatusWarningForeground2: var(--colorStatusWarningForeground2);
|
||||
$colorStatusWarningForeground3: var(--colorStatusWarningForeground3);
|
||||
$colorStatusWarningForegroundInverted: var(--colorStatusWarningForegroundInverted);
|
||||
$colorStatusWarningBorderActive: var(--colorStatusWarningBorderActive);
|
||||
$colorStatusWarningBorder1: var(--colorStatusWarningBorder1);
|
||||
$colorStatusWarningBorder2: var(--colorStatusWarningBorder2);
|
||||
$colorStatusDangerBackground1: var(--colorStatusDangerBackground1);
|
||||
$colorStatusDangerBackground2: var(--colorStatusDangerBackground2);
|
||||
$colorStatusDangerBackground3: var(--colorStatusDangerBackground3);
|
||||
$colorStatusDangerForeground1: var(--colorStatusDangerForeground1);
|
||||
$colorStatusDangerForeground2: var(--colorStatusDangerForeground2);
|
||||
$colorStatusDangerForeground3: var(--colorStatusDangerForeground3);
|
||||
$colorStatusDangerForegroundInverted: var(--colorStatusDangerForegroundInverted);
|
||||
$colorStatusDangerBorderActive: var(--colorStatusDangerBorderActive);
|
||||
$colorStatusDangerBorder1: var(--colorStatusDangerBorder1);
|
||||
$colorStatusDangerBorder2: var(--colorStatusDangerBorder2);
|
||||
@@ -0,0 +1,94 @@
|
||||
@use "tokens" as *;
|
||||
|
||||
@mixin caption2($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeBase100, $fontWeightRegular, $lineHeightBase100);
|
||||
}
|
||||
|
||||
@mixin caption2Strong($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeBase100, $fontWeightSemibold, $lineHeightBase100);
|
||||
}
|
||||
|
||||
@mixin caption1($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeBase200, $fontWeightRegular, $lineHeightBase200);
|
||||
}
|
||||
|
||||
@mixin caption1Strong($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeBase200, $fontWeightSemibold, $lineHeightBase200);
|
||||
}
|
||||
|
||||
@mixin caption1Stronger($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeBase200, $fontWeightBold, $lineHeightBase200);
|
||||
}
|
||||
|
||||
@mixin body1($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeBase300, $fontWeightRegular, $lineHeightBase300);
|
||||
}
|
||||
|
||||
@mixin body1Strong($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeBase300, $fontWeightSemibold, $lineHeightBase300);
|
||||
}
|
||||
|
||||
@mixin body1Stronger($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeBase300, $fontWeightBold, $lineHeightBase300);
|
||||
}
|
||||
|
||||
@mixin body2($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeBase400, $fontWeightRegular, $lineHeightBase400);
|
||||
}
|
||||
|
||||
@mixin subtitle2($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeBase400, $fontWeightSemibold, $lineHeightBase400);
|
||||
}
|
||||
|
||||
@mixin subtitle2Stronger($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeBase400, $fontWeightBold, $lineHeightBase400);
|
||||
}
|
||||
|
||||
@mixin subtitle1($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeBase500, $fontWeightSemibold, $lineHeightBase500);
|
||||
}
|
||||
|
||||
@mixin title3($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeBase600, $fontWeightSemibold, $lineHeightBase600);
|
||||
}
|
||||
|
||||
@mixin title2($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeHero700, $fontWeightSemibold, $lineHeightHero700);
|
||||
}
|
||||
|
||||
@mixin title1($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeHero800, $fontWeightSemibold, $lineHeightHero800);
|
||||
}
|
||||
|
||||
@mixin largeTitle($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeHero900, $fontWeightSemibold, $lineHeightHero900);
|
||||
}
|
||||
|
||||
@mixin display($font: $fontFamilyBase)
|
||||
{
|
||||
@include setTypography($font, $fontSizeHero1000, $fontWeightSemibold, $lineHeightHero1000);
|
||||
}
|
||||
|
||||
@mixin setTypography($fontFamily, $fontSize, $fontWeight, $lineHeight)
|
||||
{
|
||||
font-family: $fontFamily;
|
||||
font-size: $fontSize;
|
||||
font-weight: $fontWeight;
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
Reference in New Issue
Block a user