refactor(tabs): update schema colors (#346)

* refactor(tabs): update schema colors * refactor(tabs): update schema colors * refactor(tabs): update schema colors * refactor(tabs): update schema colors * refactor(tabs): update schema colors * refactor(tabs): update schema colors * refactor(tabs): update schema colors
IgniteUI · Nov 7, 2024 · ce8eb5e · ce8eb5e
1 parent 09e8d10
commit ce8eb5e
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 32 deletions.
diff --git a/sass/themes/schemas/components/dark/_tabs.scss b/sass/themes/schemas/components/dark/_tabs.scss
@@ -33,32 +33,87 @@ $base-dark-tabs: (
 
 /// Generates a dark material tabs schema.
 /// @type {Map}
+/// @prop {Map} item-hover-background [color: ('gray', 100)] - The background used for the tabs on hover.
+/// @prop {Map} item-active-background [color: ('gray', 100)] - The color used for the active/focused tab background.
 /// @requires $material-tabs
 /// @requires $base-dark-tabs
-$dark-material-tabs: extend($material-tabs, $base-dark-tabs);
+$dark-material-tabs: extend(
+    $material-tabs,
+    (
+        item-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        item-active-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark fluent tabs schema.
+/// @prop {Map} item-disabled-color [color: ('gray', 300)] - The color used for the disabled tabs text.
+/// @prop {Map} item-disabled-icon-color [color: ('gray', 300)] - The color used for the disabled tab icon.
+/// @prop {Map} item-hover-background [color: ('gray', 50)] - The background used for the tabs on hover.
+/// @prop {Map} item-active-background [color: ('gray', 50)] - The color used for the active/focused tab background.
+/// @prop {Map} button-disabled-color [color: ('gray', 200)] - The color used for the disabled button icon/text.
+/// @prop {Map} indicator-color [color: ('primary', 300)] - The color used for the active tab indicator.
 /// @type {Map}
 /// @requires $fluent-tabs
 /// @requires $base-dark-tabs
-$dark-fluent-tabs: extend($fluent-tabs, $base-dark-tabs);
-
-/// Generates a dark bootstrap tabs schema.
-/// @type {Map}
-/// @prop {Map} item-background [color: ('primary', 400)] - The background color used for the tabs header.
-/// @requires $bootstrap-tabs
-$dark-bootstrap-tabs: extend(
-    $bootstrap-tabs,
+$dark-fluent-tabs: extend(
+    $fluent-tabs,
+    $base-dark-tabs,
     (
-        item-hover-color: (
+        item-disabled-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        item-disabled-icon-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        item-hover-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+        item-active-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+        button-disabled-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        indicator-color: (
             color: (
                 'primary',
-                400,
+                300,
             ),
         ),
     )
 );
 
+/// Generates a dark bootstrap tabs schema.
+/// @type {Map}
+/// @requires $bootstrap-tabs
+$dark-bootstrap-tabs: extend($bootstrap-tabs);
+
 /// Generates a dark indigo tabs schema.
 /// @type {Map}
 /// @prop {Map} item-hover-background [contrast-color: ('gray', 50, .1)] - The background used for the tabs on hover.
@@ -74,7 +129,7 @@ $dark-bootstrap-tabs: extend(
 /// @prop {Map} button-color [contrast-color: ('gray', 50, .8)] - The color used for the button icon/text color.
 /// @prop {Map} button-hover-color [contrast-color: ('gray', 50)] - The color used for the button icon/text color on hover.
 /// @prop {Map} button-disabled-color [contrast-color: ('gray', 50, .2)] - The color used for the disabled button icon/text.
-/// @prop {Map} button-hover-background [contrast-color: ('gray', 50, .1)] - The color used for the button background on hover.
+/// @prop {Map} button-hover-background [contrast-color: ('gray', 50, .10)] - The color used for the button background on hover.
 /// @requires $indigo-tabs
 $dark-indigo-tabs: extend(
     $indigo-tabs,

diff --git a/sass/themes/schemas/components/light/_tabs.scss b/sass/themes/schemas/components/light/_tabs.scss
@@ -12,7 +12,7 @@
 /// Generates a base light tabs schema.
 /// @type {Map}
 /// @prop {Map} item-text-color [color: ('gray', 700)] - The color used for the tab text color.
-/// @prop {Color} item-background [color: ('surface')] - The background color used for the tabs header.
+/// @prop {Map} item-background [color: ('surface')] - The background color used for the tabs header.
 /// @prop {Map} item-hover-background [color: ('gray', 200)] - The background used for the tabs on hover.
 /// @prop {Map} item-hover-color [color: ('gray', 900)] - The text color used for the tabs on hover.
 /// @prop {Map} item-icon-color [color: ('gray', 700)] - The color used for the tab icon.
@@ -175,50 +175,64 @@ $material-tabs: extend(
 
 /// Generates a fluent tabs schema.
 /// @type {Map}
-/// @prop {Map} item-text-color [color: ('gray', 900)] - The color used for the tab text color.
-/// @prop {Map} item-disabled-color [color: ('gray', 400)] - The color used for the disabled tabs text.
-/// @prop {Map} item-disabled-icon-color [color: ('gray', 400)] - The color used for the disabled tab icon.
+/// @prop {Map} item-text-color [color: ('gray', 800)] - The color used for the tab text color.
 /// @prop {Map} button-color [color: ('gray', 500)] - The color used for the button icon/text color.
 /// @prop {Map} button-hover-color [color: ('gray', 600)] - The color used for the button icon/text color on hover.
 /// @prop {Map} button-disabled-color [color: ('gray', 400)] - The color used for the disabled button icon/text.
+/// @prop {Map} item-active-color [color: ('gray', 800)] - The color used for the active tabs text.
+/// @prop {Map} item-active-icon-color [color: ('gray', 800)] - The color used for the active tab icon.
+/// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The color used for the tab icon on hover.
+/// @prop {Map} item-icon-color [color: ('gray', 800)] - The color used for the tab icon.
 /// @requires {Map} $light-tabs
 $fluent-tabs: extend(
     $light-tabs,
     (
         item-text-color: (
             color: (
                 'gray',
-                900,
+                800,
             ),
         ),
-        item-disabled-color: (
+        button-color: (
             color: (
                 'gray',
-                400,
+                500,
             ),
         ),
-        item-disabled-icon-color: (
+        button-hover-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        button-disabled-color: (
             color: (
                 'gray',
                 400,
             ),
         ),
-        button-color: (
+        item-active-color: (
             color: (
                 'gray',
-                500,
+                800,
             ),
         ),
-        button-hover-color: (
+        item-active-icon-color: (
             color: (
                 'gray',
-                600,
+                800,
             ),
         ),
-        button-disabled-color: (
+        item-hover-icon-color: (
             color: (
                 'gray',
-                400,
+                900,
+            ),
+        ),
+        item-icon-color: (
+            color: (
+                'gray',
+                800,
             ),
         ),
     )
@@ -234,8 +248,8 @@ $fluent-tabs: extend(
 /// @prop {map} item-active-icon-color [color: ('gray', 800)] - The color used for the active tabs icon.
 /// @prop {Map} item-disabled-color [color: ('primary', 500, .5)] - The color used for the disabled tabs text.
 /// @prop {Map} item-disabled-icon-color [color: ('primary', 500, .5)] - The color used for the disabled tab icon.
-/// @prop {Map} button-color [color: ('gray', 500)] - The color used for the button icon/text color.
-/// @prop {Map} button-hover-color [color: ('gray', 600)] - The color used for the button icon/text color on hover.
+/// @prop {Map} button-color [color: ('primary', 500)] - The color used for the button icon/text color.
+/// @prop {Map} button-hover-color [color: ('primary', 500)] - The color used for the button icon/text color on hover.
 /// @prop {Map} button-disabled-color [color: ('primary', 500, .5)] - The color used for the disabled button icon/text.
 /// @prop {map} item-hover-background [color: ('surface')] - The background used for the tabs on hover.
 /// @prop {map} item-active-background [color: ('surface')] - The color used for the active/focused tab background.
@@ -248,14 +262,14 @@ $bootstrap-tabs: extend(
     (
         button-color: (
             color: (
-                'gray',
+                'primary',
                 500,
             ),
         ),
         button-hover-color: (
             color: (
-                'gray',
-                600,
+                'primary',
+                500,
             ),
         ),
         item-hover-background: (
@@ -429,7 +443,12 @@ $indigo-tabs: extend(
                 0.15,
             ),
         ),
-        button-background: transparent,
+        button-background: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
         button-hover-background: (
             color: (
                 'gray',