fix: light/dark mode merge missing colors

aziontech · Aug 7, 2024 · 11e8e39 · 11e8e39
1 parent b8734a4
commit 11e8e39
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 94 deletions.
diff --git a/src/azion/_variables.scss b/src/azion/_variables.scss
@@ -1,80 +1,70 @@
 // Theme Specific Variables
 
+:root {
+  --surface-a: #ffffff;
+  --surface-b: #f8f9fa;
+  --surface-c: #e9ecef;
+  --surface-d: #dee2e6;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
 
-  $highlightBg: #f4f4f410;
+  --green-50: #f4fcf7;
+  --green-100: #caf1d8;
+  --green-200: #a0e6ba;
+  --green-300: #76db9b;
+  --green-400: #4cd07d;
+  --green-500: #22c55e;
+  --green-600: #1da750;
+  --green-700: #188a42;
+  --green-800: #136c34;
+  --green-900: #0e4f26;
 
-  $pc: #2b2b2b;
-  $pdc: #000;
-  $pderc: #000;
-  $ptc: #f4f4f4;
-  $highlightBg: rgba($pc, 0.06);
-  $overlayContentBg: #ffffff;
+  --red-50: #fff5f5;
+  --red-100: #ffd0ce;
+  --red-200: #ffaca7;
+  --red-300: #ff8780;
+  --red-400: #ff6259;
+  --red-500: #ff3d32;
+  --red-600: #d9342b;
+  --red-700: #b32b23;
+  --red-800: #8c221c;
+  --red-900: #661814;
 
-  :root {
-    --surface-a: #ffffff;
-    --surface-b: #f8f9fa;
-    --surface-c: #e9ecef;
-    --surface-d: #dee2e6;
-    --surface-e: #ffffff;
-    --surface-f: #ffffff;
-
-    --green-50: #f4fcf7;
-    --green-100: #caf1d8;
-    --green-200: #a0e6ba;
-    --green-300: #76db9b;
-    --green-400: #4cd07d;
-    --green-500: #22c55e;
-    --green-600: #1da750;
-    --green-700: #188a42;
-    --green-800: #136c34;
-    --green-900: #0e4f26;
-
-    --red-50: #fff5f5;
-    --red-100: #ffd0ce;
-    --red-200: #ffaca7;
-    --red-300: #ff8780;
-    --red-400: #ff6259;
-    --red-500: #ff3d32;
-    --red-600: #d9342b;
-    --red-700: #b32b23;
-    --red-800: #8c221c;
-    --red-900: #661814;
-
-    --font-family: "Roboto", sans-serif;
-  }
-  // Mandatory Designer Variables
+  --font-family: "Roboto", sans-serif;
+}
+// Mandatory Designer Variables
 
-  $colors: (
-    "blue": #2196f3,
-    "green": #4caf50,
-    "yellow": #fbc02d,
-    "cyan": #00bcd4,
-    "pink": #e91e63,
-    "indigo": #3f51b5,
-    "teal": #009688,
-    "orange": #f57c00,
-    "bluegray": #607d8b,
-    "purple": #9c27b0,
-    "red": #ff4032,
-    "primary": #f4f4f4
-  );
+$colors: (
+  "blue": #2196f3,
+  "green": #4caf50,
+  "yellow": #fbc02d,
+  "cyan": #00bcd4,
+  "pink": #e91e63,
+  "indigo": #3f51b5,
+  "teal": #009688,
+  "orange": #f57c00,
+  "bluegray": #607d8b,
+  "purple": #9c27b0,
+  "red": #ff4032,
+  "primary": #f4f4f4,
+);
 
-  @import "./variables/general";
-  @import "./variables/form";
-  @import "./variables/button";
-  @import "./variables/panel";
-  @import "./variables/_data";
-  @import "./variables/_overlay";
-  @import "./variables/_message";
-  @import "./variables/_menu";
-  @import "./variables/_media";
-  @import "./variables/_misc";
+@import "./variables/general";
+@import "./variables/form";
+@import "./variables/button";
+@import "./variables/panel";
+@import "./variables/_data";
+@import "./variables/_overlay";
+@import "./variables/_message";
+@import "./variables/_menu";
+@import "./variables/_media";
+@import "./variables/_misc";
 
 :root.azion.azion-dark {
   color-scheme: dark;
 
   --primary-color: #f4f4f4;
-  --primary-dark-color: #hsla(0, 0%, 96%, 0.5);;
+  --primary-dark-color: #hsla(0, 0%, 96%, 0.5);
   --primary-darker-color: #f4f4f4;
   --primary-text-color: #f4f4f4;
   --overlay-content-bg: #171717;
@@ -120,16 +110,20 @@
   --inline-spacing: 0.5rem;
   --border-radius: 6px;
   --focus-ring: 0 0 0 0.2rem #f3642b9f;
+  --tabview-header-active-bg: #f4f4f4;
 
   --maskbg: #1c1c1c80;
   --highlight-text-color: none;
-  --highlight-focus-bg: rgba(var(--primary-color), 0.08);
+  --highlight-focus-bg: var(--surface-hover);
+  --dropdown-hover-bg: var(--surface-hover);
   --disabled-opacity: 0.5;
   --error-color: #f26464;
   --mask-bg: #1c1c1c80;
   --bg-selection: #fab99e;
   --table-bg-color: #1c1c1c;
-  --tab-menu-link: #f4f4f4;
+  --highlight-tabview-nav-link: #1e1e1e;
+  --bg-tabview-nav-link: var(--surface-section);
+  --highlight-tab-menu-link: #1c1c1c;
   --paginator-bg: #1c1c1c;
   --paginator-border: #282828;
   --paginator-element-hover-bg: hsla(0, 0%, 100%, 0.03);
@@ -138,7 +132,7 @@
   --table-header-cell-hover-bg: #ffffff0d;
   --table-header-cell-bg: #1c1c1c;
   --table-header-cell-highlight-bg: #1c1c1c;
-  --table-cell-highlight-hover-bg: rgba(var(--primary-color), 0.16);
+  --table-cell-highlight-hover-bg: rgba(244, 244, 244, 0.16);
   --table-body-row-even-bg: #212121;
   --table-body-row-hover-bg: #353535;
   --table-footer-cell-bg: #1c1c1c;
@@ -150,11 +144,10 @@
   --secondary-button-text-color: #222222;
   --secondary-button-border: #f4f4f4;
   --secondary-button-hover-bg: #e1e1e1;
-  --secondary-button-text-hover-color: #e1e1e1;
+  --secondary-button-text-hover-color: #1e1e1e;
   --secondary-button-hover-border-color: #e1e1e1;
   --secondary-button-active-bg: #d9d9d9;
   --secondary-button-active-border-color: #d9d9d9;
-  --secondary-button-text-hover-color: #1e1e1e;
   --secondary-button-hover-border-color: #e1e1e1;
   --secondary-button-text-active-color: #1e1e1e;
   --secondary-button-active-border-color: #d9d9d9;
@@ -189,7 +182,7 @@
   --action-icon-hover-border-color: 1px solid #3e3e3e;
   --panel-content-bg: #171717;
   --panel-header-hover-border-color: #171717;
-  --panel-header-text-hover-color: rgba(var(--primary-color), 0.04);
+  --panel-header-text-hover-color: rgba(244, 244, 244, 0.04);
   --card-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.02),
     0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12),
     0px 0px 0px 1px #3c3c3c;
@@ -214,9 +207,9 @@
   --error-message--bg: #f2646433;
   --error-message-icon-color: #f26464;
   --steps-item-bg: #00000000;
-  --steps-item-border: 1px solid #3e3e3e;
+  --steps-item-border: #3e3e3e;
   --menu-bg: #1c1c1c;
-  --menu-border: 1px solid #3e3e3e;
+  --menu-border: #3e3e3e;
   --submenu-header-font-weight: 500;
   --overlay-menu-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
     0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
@@ -232,13 +225,13 @@
   --text-color-link: #3265cb;
   --text-color-link-hover: #2851a4;
 
-  --primary-color: #2b2b2b;
+  --primary-color: #f4f4f4;
   --primary-dark-color: #000;
   --primary-darker-color: #000;
   --primary-text-color: #f4f4f4;
 
   --overlay-content-bg: #ffffff;
-  --highlight-bg: rgba(var(--primary-color), 0.06);
+  --highlight-bg: rgba(244 244 244 0.08);
 
   --primary-color-text: #f4f4f4;
   --primary-text-color: #f4f4f4;
@@ -276,13 +269,17 @@
 
   --maskbg: #1e1e1e32;
   --highlight-text-color: none;
-  --highlight-focus-bg: rgba(var(--primary-color), 0.08);
+  --highlight-focus-bg: var(--surface-hover);
+  --highlight-tabview-nav-link: #f4f4f4;
+  --dropdown-hover-bg: var(--surface-hover);
+  --bg-tabview-nav-link: var(--surface-hover);
+  --tabview-header-active-bg: #1e1e1e;
   --disabled-opacity: 0.4;
   --mask-bg: #1e1e1e32;
   --error-color: #ef4040;
   --bg-selection: #f7966e;
   --table-bg-color: #e7e7e7;
-  --tab-menu-link: #1c1c1c;
+  --highlight-tab-menu-link: #f4f4f4;
   --paginator-bg: #ffffff;
   --paginator-border: none;
   --paginator-element-hover-bg: #e9ecef;
@@ -300,7 +297,7 @@
   --plain-button-active-bg-color: #1e1e1e33;
   --secondary-button-bg: #1e1e1e;
   --secondary-button-text-color: #f4f4f4;
-  --secondary-button-text-hover-bg: #404040;
+  --secondary-button-hover-bg: #404040;
   --secondary-button-text-hover-color: #f4f4f4;
   --secondary-button-hover-border-color: #323232;
   --secondary-button-active-bg: #303030;
@@ -359,9 +356,9 @@
   --error-message--bg: #ef40401f;
   --error-message-icon-color: #ef4040;
   --steps-item-bg: #ffffff00;
-  --steps-item-border: 1px solid #e7e7e7;
+  --steps-item-border: #e7e7e7;
   --menu-bg: #ffffff;
-  --menu-border: 1px solid #e7e7e7;
+  --menu-border: #e7e7e7;
   --submenu-header-font-weight: 400;
   --overlay-menu-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04),
     0px 0px 0px 1px #e7e7e7;

diff --git a/src/azion/extended-components/_tabmenu.scss b/src/azion/extended-components/_tabmenu.scss
@@ -12,7 +12,7 @@
       }
       &.p-highlight {
         .p-menuitem-link {
-          color: var(--tab-menu-link) !important;
+          color: var(--highlight-tab-menu-link) !important;
           font-weight: 500 !important;
         }
       }

diff --git a/src/azion/extended-components/_tabview.scss b/src/azion/extended-components/_tabview.scss
@@ -13,7 +13,7 @@
       }
       &.p-highlight {
         .p-tabview-nav-link {
-          color: #1e1e1e !important;
+          color: var(--highlight-tabview-nav-link) !important;
           font-weight: 700 !important;
         }
       }

diff --git a/src/azion/theme-base/components/panel/_tabview.scss b/src/azion/theme-base/components/panel/_tabview.scss
@@ -35,14 +35,14 @@
 
             &.p-highlight {
                 .p-tabview-nav-link {
-                    background: $tabviewHeaderActiveBg;
-                    border-color: $tabviewHeaderActiveBorderColor;
+                  background: $tabviewHeaderActiveBg;
+                  border-color: $tabviewHeaderActiveBorderColor;
                     color: $tabviewHeaderTextActiveColor;
                 }
             }
         }
     }
-    
+
     .p-tabview-nav-btn.p-link {
         background: $tabviewHeaderActiveBg;
         color: $tabviewHeaderTextActiveColor;

diff --git a/src/azion/variables/_button.scss b/src/azion/variables/_button.scss
@@ -95,7 +95,7 @@ $secondaryButtonBorder: 1px solid var(--secondary-button-bg);
 
 /// Background of a secondary button in hover state
 /// @group button
-$secondaryButtonHoverBg: var(--secondary-button-text-hover-bg);
+$secondaryButtonHoverBg: var(--secondary-button-hover-bg);
 
 /// Text color of a secondary button in hover state
 /// @group button

diff --git a/src/azion/variables/_form.scss b/src/azion/variables/_form.scss
@@ -92,15 +92,15 @@ $inputListItemTextColor: $textColor;
 
 /// Hover state background for an individual itrem of an input list
 /// @group form
-$inputListItemHoverBg: rgba(var(--primary-color), 0.06);
+$inputListItemHoverBg: var(--dropdown-hover-bg);
 
 /// Hover state text color for an individual itrem of an input list
 /// @group form
 $inputListItemTextHoverColor: $textColor;
 
 /// Focus state background for an individual itrem of an input list
 /// @group form
-$inputListItemFocusBg: rgba(var(--primary-color), 0.06);
+$inputListItemFocusBg: var(--highlight-focus-bg);
 
 /// Focus state text color for an individual itrem of an input list
 /// @group form
@@ -412,7 +412,7 @@ $calendarCellDateBorder: 1px solid transparent;
 
 /// Background of a calendar date cell in hover state
 /// @group form
-$calendarCellDateHoverBg: rgba(var(--primary-color), 0.06);
+$calendarCellDateHoverBg: var(--surface-hover);
 
 /// Background of a calendar date cell indicating today
 /// @group form

diff --git a/src/azion/variables/_menu.scss b/src/azion/variables/_menu.scss
@@ -76,7 +76,7 @@ $menuitemIconHoverColor: $textColor;
 
 /// Background of a menuitem in hover state
 /// @group menu
-$menuitemHoverBg: rgba(var(--primary-color), 0.06);
+$menuitemHoverBg: var(--surface-hover);
 
 /// Text color of a menuitem in focus state
 /// @group menu
@@ -88,7 +88,7 @@ $menuitemIconFocusColor: $textColor;
 
 /// Background of a menuitem in focus state
 /// @group menu
-$menuitemFocusBg: rgba(var(--primary-color), 0.06);
+$menuitemFocusBg: var(--surface-hover);
 
 /// Text color of a menuitem in active state
 /// @group menu
@@ -100,11 +100,11 @@ $menuitemIconActiveColor: $textSecondaryColor;
 
 /// Background of a menuitem in active state
 /// @group menu
-$menuitemActiveBg: rgba(var(--primary-color), 0.08);
+$menuitemActiveBg: var(--surface-hover);
 
 /// Background of a menuitem in active and focus states
 /// @group menu
-$menuitemActiveFocusBg: rgba(var(--primary-color), 0.06);
+$menuitemActiveFocusBg: var(--surface-hover);
 
 /// Font size of an icon indicating the item has a submenu
 /// @group menu

diff --git a/src/azion/variables/_panel.scss b/src/azion/variables/_panel.scss
@@ -216,7 +216,7 @@ $tabviewHeaderTextHoverColor: $textColor;
 
 /// Background of a tabview header in selected state
 /// @group panel
-$tabviewHeaderActiveBg: var(--primary-color);
+$tabviewHeaderActiveBg: var(--tabview-header-active-bg);
 
 /// Border of a tabview header in selected state
 /// @group panel