SILABMC-263: Dark Theme

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);
+}