refactor(navbar): update indigo and material colors (#333)

IgniteUI · Sep 13, 2024 · 646130d · 646130d
1 parent a7842df
commit 646130d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 26 deletions.
diff --git a/sass/themes/schemas/components/dark/_navbar.scss b/sass/themes/schemas/components/dark/_navbar.scss
@@ -12,8 +12,6 @@
 /// @prop {Map} background [color: ('primary', 800)] - The navbar background color.
 /// @prop {Color} border-color [transparent] - The navbar border color.
 /// @prop {Map} text-color [contrast-color: ('primary', 800)] - The navbar text color.
-/// @prop {Map} idle-icon-color [contrast-color: ('primary', 800)] - The navbar idle icon color.
-/// @prop {Map} hover-icon-color [contrast-color: ('primary', 800)] - The navbar hover icon color.
 /// @requires $material-navbar
 $dark-material-navbar: extend(
     $material-navbar,
@@ -30,18 +28,6 @@ $dark-material-navbar: extend(
                 800,
             ),
         ),
-        idle-icon-color: (
-            contrast-color: (
-                'primary',
-                800,
-            ),
-        ),
-        hover-icon-color: (
-            contrast-color: (
-                'primary',
-                800,
-            ),
-        ),
     )
 );
 
@@ -57,11 +43,33 @@ $dark-bootstrap-navbar: $bootstrap-navbar;
 
 /// Generates a dark indigo navbar schema.
 /// @type {Map}
+/// @prop {Map} text-color [contrast-color: ('gray', 100)] - The navbar text color.
+/// @prop {Map} idle-icon-color [contrast-color: ('gray', 100, 0.8)] - The navbar idle icon color.
+/// @prop {Map} hover-icon-color [contrast-color: ('gray', 100)] - The navbar hover icon color.
 /// @prop {Color} border-color [color: ('primary', 200)] - The navbar border color.
 /// @requires $indigo-navbar
 $dark-indigo-navbar: extend(
     $indigo-navbar,
     (
+        text-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+        idle-icon-color: (
+            contrast-color: (
+                'gray',
+                100,
+                0.8,
+            ),
+        ),
+        hover-icon-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
         border-color: (
             color: (
                 'primary',

diff --git a/sass/themes/schemas/components/light/_navbar.scss b/sass/themes/schemas/components/light/_navbar.scss
@@ -13,8 +13,8 @@
 /// @prop {Map} background [color: ('primary', 400)] - The navbar background color.
 /// @prop {Color} border-color [transparent] - The navbar border color.
 /// @prop {Map} text-color [contrast-color: ('primary', 400)] - The navbar text color.
-/// @prop {Map} idle-icon-color [contrast-color: ('primary', 400)] - The navbar idle icon color.
-/// @prop {Map} hover-icon-color [contrast-color: ('primary', 400)] - The navbar hover icon color.
+/// @prop {Map} idle-icon-color [color: ('gray', 900)] - The navbar idle icon color.
+/// @prop {Map} hover-icon-color [color: ('gray', 900)] - The navbar hover icon color.
 /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the navbar.
 /// @requires {Map} $default-elevation-navbar
 $light-navbar: extend(
@@ -33,15 +33,15 @@ $light-navbar: extend(
             ),
         ),
         idle-icon-color: (
-            contrast-color: (
-                'primary',
-                400,
+            color: (
+                'gray',
+                900,
             ),
         ),
         hover-icon-color: (
-            contrast-color: (
-                'primary',
-                400,
+            color: (
+                'gray',
+                900,
             ),
         ),
         border-color: transparent,
@@ -126,8 +126,8 @@ $bootstrap-navbar: extend(
 /// @type {Map}
 /// @prop {Map} background [color: ('surface', 500)] - The navbar background color.
 /// @prop {Map} text-color [color: ('gray', 800)] - The navbar text color.
-/// @prop {Map} idle-icon-color [color: ('gray', 800)] - The navbar idle icon color.
-/// @prop {Map} hover-icon-color [color: ('gray', 800)] - The navbar hover icon color.
+/// @prop {Map} idle-icon-color [color: ('gray', 600)] - The navbar idle icon color.
+/// @prop {Map} hover-icon-color [color: ('gray', 700)] - The navbar hover icon color.
 /// @prop {Color} border-color [color: ('primary', 500)] - The navbar border color.
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the navbar.
 /// @requires {Map} $light-navbar
@@ -149,13 +149,13 @@ $indigo-navbar: extend(
         idle-icon-color: (
             color: (
                 'gray',
-                800,
+                600,
             ),
         ),
         hover-icon-color: (
             color: (
                 'gray',
-                800,
+                700,
             ),
         ),
         border-color: (