diff options
Diffstat (limited to 'src/env/assets/styles/_sila.scss')
-rw-r--r-- | src/env/assets/styles/_sila.scss | 164 |
1 files changed, 140 insertions, 24 deletions
diff --git a/src/env/assets/styles/_sila.scss b/src/env/assets/styles/_sila.scss index 477a4ce4..6af537c2 100644 --- a/src/env/assets/styles/_sila.scss +++ b/src/env/assets/styles/_sila.scss @@ -60,37 +60,153 @@ $success: $green; $warning: $yellow; $dark-hover: #3c506a; +$login-page-description-color: rgba(12, 28, 41, 0.6); + +$border-radius: 8px; +$loading-color: #c11d1d; +$navbar-color: $dark; +$header-height: 56px; +$navigation-width: 280px; -$red-hover: #fc2a2a; -$red-active: #df2323; -$red-disabled: #e17171; -$red-click: #c71414; -$red-shadow: #e1171780; -$red-light-background: #e117170d; - -$gray-2: rgb(251, 251, 252); -$gray-5: rgba(26, 62, 91, 0.05); -$gray-5-hover: rgba(20, 39, 53, 0.1); -$gray-10: rgba(26, 62, 91, 0.1); -$gray-20: rgba(26, 62, 92, 0.2); -$gray-30: rgba(26, 62, 91, 0.3); -$gray-light: rgb(232 235 238); -$red-40: rgba(225, 23, 23, 0.4); +// Light theme +$red-hover: #fc2a2a; /* Red Brand Primary Hover */ +$red-active: #df2323; /* Red Brand Primary Active */ +$red-disabled: rgb(225, 113, 113); /* Red Brand Primary Disabled */ +$red-click: #c71414; /* Red Brand Primary Click */ +$red-5: rgba(225, 23, 23, 0.05); /* Faint Brand Primary/5% */ +$red-40: rgba(225, 23, 23, 0.4); /* Faint Brand Primary/40% */ +$red-50: rgba(225, 23, 23, 0.5); /* Faint Brand Primary/50% */ + +$gray-2: rgb(251, 251, 252); /* Faint Secondary Primary/2% */ +$gray-5-hover: rgba(20, 39, 53, 0.1); /* Faint Secondary Primary Hover/5% */ +$gray-5: rgba(26, 62, 91, 0.05); /* Faint Secondary Primary/5% */ +$gray-10: rgba(26, 62, 91, 0.1); /* Faint Secondary Primary/10% */ +$gray-20: rgba(26, 62, 91, 0.2); /* Faint Secondary Primary/20% */ +$gray-30: rgba(26, 62, 91, 0.3); /* Faint Secondary Primary/30% */ +$gray-light: rgb(232, 235, 238); +$gray-passwordfield: rgb(243 245 247); + +$blue-10: rgb(235 240 253); +$green-10: rgb(236 248 235); +$yellow-10: rgb(254 249 233); + +$surface-primary: #ffffff; $surface-secondary: #f3f4f5; -$on-surface-secondary: #040a0f99; -$on-surface-tretiatry: #040a0f4d; -$text-primary: rgb(12, 28, 41); +$on-surface-primary: #040a0f; +$on-surface-secondary: rgba(4, 10, 15, 0.6); +$on-surface-tretiatry: rgba(4, 10, 15, 0.3); + +$text-primary: rgba(12, 28, 41, 0.9); $text-secondary: rgba(12, 28, 41, 0.8); $text-tretiatry: rgba(12, 28, 41, 0.6); $text-quaternary: rgba(12, 28, 41, 0.3); -$login-page-description-color: rgba(12, 28, 41, 0.6); +// Dark theme +$red-5-dark: rgba(225, 23, 23, 0.1); /* Faint Brand Primary/5% */ +$red-40-dark: rgba(225, 23, 23, 0.5); /* Faint Brand Primary/40% */ +$red-50-dark: rgba(225, 23, 23, 0.6); /* Faint Brand Primary/50% */ -$border-radius: 8px; +$gray-5-hover-dark: rgba(26, 62, 91, 0.7); +$gray-5-dark: rgba(26, 62, 91, 0.2); /* Faint Secondary Primary/5% */ +$gray-10-dark: rgba(26, 62, 91, 0.3); /* Faint Secondary Primary/10% */ +$gray-20-dark: rgba(26, 62, 91, 0.4); /* Faint Secondary Primary/20% */ +$gray-30-dark: rgba(26, 62, 91, 0.5); /* Faint Secondary Primary/30% */ +$gray-passwordfield-dark: rgb(19 32 43); -$loading-color: #c11d1d; -$navbar-color: $dark; -$header-height: 56px; -$navigation-width: 280px; +$blue-10-dark: rgba(45, 96, 229, 0.1); +$green-10-dark: rgba(52, 178, 51, 0.1); +$yellow-10-dark: rgba(245, 189, 31, 0.1); + +$surface-primary-dark: #12191f; +$surface-secondary-dark: #0c1c29; + +$on-surface-primary-dark: #f5f5f5; +$on-surface-secondary-dark: rgba(245, 245, 245, 0.6); +$on-surface-tretiatry-dark: rgba(245, 245, 245, 0.3); + +$text-primary-dark: #e6e6e6; +$text-secondary-dark: rgba(255, 255, 255, 0.9); +$text-tretiatry-dark: rgba(255, 255, 255, 0.6); +$text-quaternary-dark: rgba(255, 255, 255, 0.3); + +$themes: ( + light: ( + surface-primary: $surface-primary, + surface-secondary: $surface-secondary, + on-surface-primary: $on-surface-primary, + on-surface-secondary: $on-surface-secondary, + on-surface-tretiatry-dark: $on-surface-tretiatry, + text-primary: $text-primary, + text-secondary: $text-secondary, + text-tretiatry: $text-tretiatry, + text-quaternary: $text-quaternary, + back-light: $gray-100, + nav-hover: #dde0e5, + nav-focus: #f4f4f4, + gray-5-hover: $gray-5-hover, + gray-5: $gray-5, + gray-10: $gray-10, + gray-20: $gray-20, + gray-30: $gray-30, + gray-passwordfield: $gray-passwordfield, + red-5: $red-5, + red-40: $red-40, + red-50: $red-50, + blue-10: $blue-10, + green-10: $green-10, + yellow-10: $yellow-10, + custom-switch-back: $white, + ), + dark: ( + surface-primary: $surface-primary-dark, + surface-secondary: $surface-secondary-dark, + on-surface-primary: $on-surface-primary-dark, + on-surface-secondary: $on-surface-secondary-dark, + on-surface-tretiatry-dark: $on-surface-tretiatry-dark, + text-primary: $text-primary-dark, + text-secondary: $text-secondary-dark, + text-tretiatry: $text-tretiatry-dark, + text-quaternary: $text-quaternary-dark, + back-light: $gray-30-dark, + nav-hover: $gray-30-dark, + nav-focus: $gray-30-dark, + gray-5-hover: $gray-5-hover-dark, + gray-5: $gray-5-dark, + gray-10: $gray-10-dark, + gray-20: $gray-20-dark, + gray-30: $gray-30-dark, + gray-passwordfield: $gray-passwordfield-dark, + red-5: $red-5-dark, + red-40: $red-40-dark, + red-50: $red-50-dark, + blue-10: $blue-10-dark, + green-10: $green-10-dark, + yellow-10: $yellow-10-dark, + custom-switch-back: $text-primary-dark, + ), +); + +@mixin themify($themes) { + @each $theme, $map in $themes { + .#{$theme}-theme & { + $theme-map: () !global; + @each $key, $submap in $map { + $value: map-get(map-get($themes, $theme), "#{$key}"); + $theme-map: map-merge( + $theme-map, + ( + $key: $value, + ) + ) !global; + } + @content; + $theme-map: null !global; + } + } +} + +@function themed($key) { + @return map-get($theme-map, $key); +} |