68 lines
1.4 KiB
SCSS
68 lines
1.4 KiB
SCSS
@mixin light {
|
|
color-scheme: light;
|
|
|
|
--clr-primary: #4176FF;
|
|
--clr-primary-o50: #4176FF80;
|
|
--clr-primary-hover: #638FFF;
|
|
--clr-on-primary: #FFFFFF;
|
|
|
|
--clr-secondary: #E1EAF8;
|
|
--clr-secondary-hover: #E8ECF0;
|
|
--clr-on-secondary: #0D0D0D;
|
|
|
|
--clr-layer-100: #EBEEF0;
|
|
--clr-layer-200: #FFFFFF;
|
|
--clr-layer-300: #FFFFFF;
|
|
--clr-layer-300-hover: #EAEAEA;
|
|
|
|
--clr-text-100: #8D8D8D;
|
|
--clr-text-200: #6C7480;
|
|
--clr-text-300: #1D1F20;
|
|
--clr-text-primary: #3865DA;
|
|
|
|
--clr-border-100: #DFDFDF;
|
|
--clr-border-200: #D8D8D8;
|
|
|
|
--clr-shadow-100: #0000001A;
|
|
--clr-shadow-200: #00000026;
|
|
|
|
--clr-ripple: #1D1F2026;
|
|
|
|
--clr-error: #E54B4B;
|
|
}
|
|
|
|
@mixin dark {
|
|
color-scheme: dark;
|
|
|
|
--clr-primary: #3865DA;
|
|
--clr-primary-o50: #3865DA80;
|
|
--clr-primary-hover: #4073F7;
|
|
--clr-primary-disabled: #334570;
|
|
--clr-on-primary: #FFFFFF;
|
|
|
|
--clr-secondary: #3F3F3F;
|
|
--clr-secondary-hover: #4D4D4D;
|
|
--clr-secondary-disabled: #323232;
|
|
--clr-on-secondary: #FFFFFF;
|
|
|
|
--clr-layer-100: #1B1B1B;
|
|
--clr-layer-200: #232323;
|
|
--clr-layer-300: #2F2F2F;
|
|
--clr-layer-300-hover: #3E3E3E;
|
|
|
|
--clr-text-100: #888888;
|
|
--clr-text-200: #C5C5C5;
|
|
--clr-text-300: #F0F0F0;
|
|
--clr-text-primary: #4176FF;
|
|
|
|
--clr-border-100: #3D3D3D;
|
|
--clr-border-200: #545454;
|
|
|
|
--clr-shadow-100: #0000001A;
|
|
--clr-shadow-200: #00000026;
|
|
|
|
--clr-ripple: #F0F0F026;
|
|
|
|
--clr-error: #FF6363;
|
|
}
|