mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
120 lines
5.1 KiB
SCSS
120 lines
5.1 KiB
SCSS
@use "sass:color";
|
|
|
|
// Dark
|
|
$color-dark-primary: rgb(145 206 244);
|
|
$color-dark-surface-tint: rgb(145 206 244);
|
|
$color-dark-on-primary: rgb(0 52 74);
|
|
$color-dark-primary-container: rgb(0 76 106);
|
|
$color-dark-on-primary-container: rgb(197 231 255);
|
|
$color-dark-secondary: rgb(182 201 216);
|
|
$color-dark-on-secondary: rgb(32 51 62);
|
|
$color-dark-secondary-container: rgb(55 73 85);
|
|
$color-dark-on-secondary-container: rgb(210 229 244);
|
|
$color-dark-tertiary: rgb(203 193 233);
|
|
$color-dark-on-tertiary: rgb(51 44 76);
|
|
$color-dark-tertiary-container: rgb(73 66 99);
|
|
$color-dark-on-tertiary-container: rgb(231 222 255);
|
|
$color-dark-error: rgb(255 180 171);
|
|
$color-dark-on-error: rgb(105 0 5);
|
|
$color-dark-error-container: rgb(147 0 10);
|
|
$color-dark-on-error-container: rgb(255 218 214);
|
|
$color-dark-background: rgb(15 20 23);
|
|
$color-dark-on-background: rgb(223 227 231);
|
|
$color-dark-surface: rgb(15 20 23);
|
|
$color-dark-on-surface: rgb(223 227 231);
|
|
$color-dark-surface-variant: rgb(65 72 77);
|
|
$color-dark-on-surface-variant: rgb(193 199 206);
|
|
$color-dark-outline: rgb(139 146 151);
|
|
$color-dark-outline-variant: rgb(65 72 77);
|
|
$color-dark-shadow: rgb(0 0 0);
|
|
$color-dark-scrim: rgb(0 0 0);
|
|
$color-dark-inverse-surface: rgb(223 227 231);
|
|
$color-dark-inverse-on-surface: rgb(44 49 52);
|
|
$color-dark-inverse-primary: rgb(31 101 134);
|
|
$color-dark-primary-fixed: rgb(197 231 255);
|
|
$color-dark-on-primary-fixed: rgb(0 30 45);
|
|
$color-dark-primary-fixed-dim: rgb(145 206 244);
|
|
$color-dark-on-primary-fixed-variant: rgb(0 76 106);
|
|
$color-dark-secondary-fixed: rgb(210 229 244);
|
|
$color-dark-on-secondary-fixed: rgb(10 30 40);
|
|
$color-dark-secondary-fixed-dim: rgb(182 201 216);
|
|
$color-dark-on-secondary-fixed-variant: rgb(55 73 85);
|
|
$color-dark-tertiary-fixed: rgb(231 222 255);
|
|
$color-dark-on-tertiary-fixed: rgb(29 23 53);
|
|
$color-dark-tertiary-fixed-dim: rgb(203 193 233);
|
|
$color-dark-on-tertiary-fixed-variant: rgb(73 66 99);
|
|
$color-dark-surface-dim: rgb(15 20 23);
|
|
$color-dark-surface-bright: rgb(53 58 61);
|
|
$color-dark-surface-container-lowest: rgb(10 15 18);
|
|
$color-dark-surface-container-low: rgb(24 28 31);
|
|
$color-dark-surface-container: rgb(28 32 36);
|
|
$color-dark-surface-container-high: rgb(38 43 46);
|
|
$color-dark-surface-container-highest: rgb(49 53 57);
|
|
$color-dark-surface-primary-container-lightened: color.adjust($color-dark-primary-container, $lightness: 5%);
|
|
$color-dark-surface-container-lightened: color.adjust($color-dark-surface-container, $lightness: 5%);
|
|
|
|
// custom colors
|
|
$color-1: rgb(82, 109, 246);
|
|
$color-2: rgb(65, 11, 113);
|
|
$color-4: rgb(95, 26, 198);
|
|
$color-3: rgb(49, 71, 179);
|
|
// Light
|
|
$color-light-primary: rgb(31 101 134);
|
|
$color-light-surface-tint: rgb(31 101 134);
|
|
$color-light-on-primary: rgb(255 255 255);
|
|
$color-light-primary-container: rgb(197 231 255);
|
|
$color-light-on-primary-container: rgb(0 76 106);
|
|
$color-light-secondary: rgb(78 97 109);
|
|
$color-light-on-secondary: rgb(255 255 255);
|
|
$color-light-secondary-container: rgb(210 229 244);
|
|
$color-light-on-secondary-container: rgb(55 73 85);
|
|
$color-light-tertiary: rgb(97 89 124);
|
|
$color-light-on-tertiary: rgb(255 255 255);
|
|
$color-light-tertiary-container: rgb(231 222 255);
|
|
$color-light-on-tertiary-container: rgb(73 66 99);
|
|
$color-light-error: rgb(186 26 26);
|
|
$color-light-on-error: rgb(255 255 255);
|
|
$color-light-error-container: rgb(255 218 214);
|
|
$color-light-on-error-container: rgb(147 0 10);
|
|
$color-light-background: rgb(246 250 254);
|
|
$color-light-on-background: rgb(24 28 31);
|
|
$color-light-surface: rgb(246 250 254);
|
|
$color-light-on-surface: rgb(24 28 31);
|
|
$color-light-surface-variant: rgb(221 227 234);
|
|
$color-light-on-surface-variant: rgb(65 72 77);
|
|
$color-light-outline: rgb(113 120 126);
|
|
$color-light-outline-variant: rgb(193 199 206);
|
|
$color-light-shadow: rgb(0 0 0);
|
|
$color-light-scrim: rgb(0 0 0);
|
|
$color-light-inverse-surface: rgb(44 49 52);
|
|
$color-light-inverse-on-surface: rgb(237 241 246);
|
|
$color-light-inverse-primary: rgb(145 206 244);
|
|
$color-light-primary-fixed: rgb(197 231 255);
|
|
$color-light-on-primary-fixed: rgb(0 30 45);
|
|
$color-light-primary-fixed-dim: rgb(145 206 244);
|
|
$color-light-on-primary-fixed-variant: rgb(0 76 106);
|
|
$color-light-secondary-fixed: rgb(210 229 244);
|
|
$color-light-on-secondary-fixed: rgb(10 30 40);
|
|
$color-light-secondary-fixed-dim: rgb(182 201 216);
|
|
$color-light-on-secondary-fixed-variant: rgb(55 73 85);
|
|
$color-light-tertiary-fixed: rgb(231 222 255);
|
|
$color-light-on-tertiary-fixed: rgb(29 23 53);
|
|
$color-light-tertiary-fixed-dim: rgb(203 193 233);
|
|
$color-light-on-tertiary-fixed-variant: rgb(73 66 99);
|
|
$color-light-surface-dim: rgb(215 218 223);
|
|
$color-light-surface-bright: rgb(246 250 254);
|
|
$color-light-surface-container-lowest: rgb(255 255 255);
|
|
$color-light-surface-container-low: rgb(240 244 248);
|
|
$color-light-surface-container: rgb(235 238 243);
|
|
$color-light-surface-container-high: rgb(229 232 237);
|
|
$color-light-surface-container-highest: rgb(223 227 231);
|
|
|
|
@mixin hoverStateLayer($background: $color-surface, $overlayColor: $color-dark-on-primary) {
|
|
&:hover {
|
|
background-color: color.mix($overlayColor, $background, 8%);
|
|
}
|
|
|
|
&:active {
|
|
background-color: color.mix($overlayColor, $background, 18%);
|
|
}
|
|
} |