igniteui-theming 8.1.0-beta.1 → 9.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "8.1.0-beta.1",
+  "version": "9.0.0-beta.1",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/schemas/components/dark/_stepper.scss

@@ -82,7 +82,6 @@ $base-stepper: (
             900,
         ),
     ),
-
     invalid-indicator-color: (
         color: (
             'gray',
@@ -151,33 +150,206 @@ $dark-bootstrap-stepper: extend(
 
 /// Generates a dark indigo stepper schema.
 /// @type {Map}
-/// @prop {Map} indicator-color [color: ('gray', 900)] - The text color of the incomplete step indicator.
-/// @prop {Map} indicator-outline [color: ('gray', 600)] - The outline color of the incomplete step indicator.
-/// @prop {Map} disabled-indicator-outline [color: ('gray', 300)] - The outline color of the disabled step indicator.
+/// @prop {Map} content-foreground [contrast-color: ('gray', 50, .8)] - The foreground of the step content.
+/// @prop {Map} indicator-color [color: ('gray', 50)] - The text color of the incomplete step indicator.
+/// @prop {Map} indicator-background [contrast-color: ('gray', 50, .8)] - The background color of the incomplete step indicator.
+/// @prop {Map} title-color [contrast-color: ('gray', 50)] - The text color of the step title.
+/// @prop {Map} title-hover-color [contrast-color: ('gray', 50)] - The text color of the step title on hover.
+/// @prop {Map} title-focus-color [contrast-color: ('gray', 50)] - The text color of the step title on focus.
+/// @prop {Map} subtitle-color [contrast-color: ('gray', 50, .8)] - The text color of the step subtitle.
+/// @prop {Map} subtitle-hover-color [contrast-color: ('gray', 50, .8)] - The text color of the step subtitle on hover.
+/// @prop {Map} subtitle-focus-color [contrast-color: ('gray', 50, .8)] - The text color of the step subtitle on focus.
+/// @prop {Map} step-hover-background [contrast-color: ('gray', 50, .15)] - The background of the step header on hover.
+/// @prop {Map} step-focus-background [contrast-color: ('gray', 50, .15)] - The background of the step header on hover.
+/// @prop {Map} current-step-hover-background [contrast-color: ('gray', 50, .15)] - The background of the current step header on hover.
+/// @prop {Map} current-step-focus-background [contrast-color: ('gray', 50, .15)] - The background of the current step header on focus.
+/// @prop {Map} complete-step-hover-background [contrast-color: ('gray', 50, .15)] - The background of the complete step header on hover.
+/// @prop {Map} complete-step-focus-background [contrast-color: ('gray', 50, .15)] - The background of the complete step header on focus.
+/// @prop {Map} invalid-step-hover-background [contrast-color: ('gray', 50, .15)] - The background of the invalid step header on hover.
+/// @prop {Map} invalid-step-focus-background [contrast-color: ('gray', 50, .15)] - The background of the invalid step header on focus.
+/// @prop {Map} complete-indicator-background [contrast-color: ('gray', 50, .15)] - The background color of the completed step indicator.
+/// @prop {Map} complete-indicator-color [contrast-color: ('gray', 50, .8)] - The color of the completed step indicator.
+/// @prop {Map} disabled-indicator-color [contrast-color: ('gray', 50, .2)] - The color of the disabled step indicator, title, and subtitle.
+/// @prop {Map} disabled-indicator-background [contrast-color: ('gray', 50, .1)] - The background color of the disabled step indicator.
+/// @prop {Map} disabled-title-color [contrast-color: ('gray', 50, .2)] - The title color of the disabled step.
+/// @prop {Map} disabled-subtitle-color [contrast-color: ('gray', 50, .2)] - The subtitle color of the disabled step.
+/// @prop {Map} step-separator-color [contrast-color: ('gray', 50, .3)] - The separator border-color of between the steps.
+/// @prop {Map} complete-step-separator-color [contrast-color: ('gray', 50, .3)] - The separator border-color between the completed steps.
 /// @requires $indigo-stepper
 /// @requires $base-stepper
 $dark-indigo-stepper: extend(
     $indigo-stepper,
     $base-stepper,
     (
+        content-foreground: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
         indicator-color: (
             color: (
                 'gray',
-                900,
+                50,
             ),
         ),
-
-        indicator-outline: (
-            color: (
+        indicator-background: (
+            contrast-color: (
                 'gray',
-                600,
+                50,
+                0.8,
             ),
         ),
-
-        disabled-indicator-outline: (
-            color: (
+        title-color: (
+            contrast-color: (
                 'gray',
-                300,
+                50,
+            ),
+        ),
+        title-hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        title-focus-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        subtitle-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        subtitle-hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        subtitle-focus-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        step-hover-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        step-focus-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        current-step-hover-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        current-step-focus-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        complete-step-hover-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        complete-step-focus-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        invalid-step-hover-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        invalid-step-focus-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        complete-indicator-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        complete-indicator-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        disabled-indicator-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        disabled-indicator-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.1,
+            ),
+        ),
+        disabled-title-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        disabled-subtitle-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        step-separator-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.3,
+            ),
+        ),
+        complete-step-separator-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.3,
             ),
         ),
     )

package/sass/themes/schemas/components/dark/_toast.scss

@@ -1,5 +1,6 @@
 @use '../../../../utils/map' as *;
 @use '../light/toast' as *;
+@use '../elevation/toast' as *;
 
 ////
 /// @package theming
@@ -72,6 +73,26 @@ $dark-bootstrap-toast: extend(
 
 /// Generates a dark indigo toast schema.
 /// @type {Map}
+/// @prop {Map} background [color: ('gray', 300)] - The background color used for the toast.
+/// @prop {Map} text-color [contrast-color: ('gray', 50)] - The text-color used for the toast.
 /// @requires $indigo-toast
-/// @requires $dark-base-toast
-$dark-indigo-toast: extend($indigo-toast, $dark-base-toast);
+/// @requires $dark-indigo-elevation-toast
+$dark-indigo-toast: extend(
+    $indigo-toast,
+    $dark-indigo-elevation-toast,
+    (
+        background: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        text-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+    )
+);

package/sass/themes/schemas/components/dark/_tooltip.scss

@@ -1,5 +1,6 @@
 @use '../../../../utils/map' as *;
 @use '../light/tooltip' as *;
+@use '../elevation/tooltip' as *;
 
 ////
 /// @package theming
@@ -24,20 +25,26 @@ $dark-bootstrap-tooltip: $bootstrap-tooltip;
 
 /// Generates a dark indigo tooltip schema.
 /// @type {Map}
-/// @prop {Map} background [contrast-color: ('surface')] - The background color of the tooltip.
-/// @prop {Map} text-color [text-color: (color: 'surface')] - The text color of the tooltip.
-/// @requires $indigo-tooltip
+/// @prop {Map} background [color: ('gray', 300)] - The background color of the tooltip.
+/// @prop {Map} text-color [contrast-color: ('gray', 50)] - The text color of the tooltip.
+/// @prop {Number} elevation [9] - The elevation level, between 0-24, to be used for the tooltip.
+/// @requires {Map} $indigo-tooltip
+/// @requires {Map} $dark-indigo-elevation-tooltip
 $dark-indigo-tooltip: extend(
     $indigo-tooltip,
+    $dark-indigo-elevation-tooltip,
     (
         background: (
-            contrast-color: (
-                'surface',
+            color: (
+                'gray',
+                300,
             ),
         ),
-
         text-color: (
-            color: 'surface',
+            contrast-color: (
+                'gray',
+                50,
+            ),
         ),
     )
 );

package/sass/themes/schemas/components/elevation/_toast.scss

@@ -5,13 +5,25 @@
 ////
 
 /// @type Map
-/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the toast.
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the default toast.
 $default-elevation-toast: (
     elevation: 0,
 );
 
 /// @type Map
-/// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used for the toast.
+/// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used for the bootstrap toast.
 $bootstrap-elevation-toast: (
     elevation: 10,
 );
+
+/// @type Map
+/// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used for the indigo toast.
+$indigo-elevation-toast: (
+    elevation: 10,
+);
+
+/// @type Map
+/// @prop {Number} elevation [11] - The elevation level, between 0-24, to be used for the dark indigo toast.
+$dark-indigo-elevation-toast: (
+    elevation: 11,
+);

package/sass/themes/schemas/components/elevation/_tooltip.scss

@@ -0,0 +1,23 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// @type Map
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the tooltip.
+$default-elevation-tooltip: (
+    elevation: 0,
+);
+
+/// @type Map
+/// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the tooltip.
+$indigo-elevation-tooltip: (
+    elevation: 8,
+);
+
+/// @type Map
+/// @prop {Number} elevation [9] - The elevation level, between 0-24, to be used for the tooltip.
+$dark-indigo-elevation-tooltip: (
+    elevation: 9,
+);

package/sass/themes/schemas/components/light/_stepper.scss

@@ -23,7 +23,7 @@
 /// @prop {Map} indicator-outline [color: ('gray', 400)] - The outline color of the incomplete step indicator.
 /// @prop {Color} invalid-step-background [transparent] - The background of the invalid step header.
 /// @prop {Map} invalid-step-hover-background [color: ('gray', 200)] - The background of the invalid step header on hover.
-/// @prop {Map} invalid-step-focus-background [color: 'gray', 100)] - The background of the invalid step header on focus.
+/// @prop {Map} invalid-step-focus-background [color: ('gray', 100)] - The background of the invalid step header on focus.
 /// @prop {Map} invalid-title-color [color: ('error')] - The color of the invalid step title.
 /// @prop {Map} invalid-title-hover-color [color: ('error')] - The color of the invalid step title on hover.
 /// @prop {Map} invalid-title-focus-color [color: ('error')] - The color of the invalid step title on focus.
@@ -35,7 +35,7 @@
 /// @prop {Map} invalid-indicator-outline [color: ('error')] - The outline color of the invalid step indicator.
 /// @prop {Color} current-step-background [transparent] - The background of the current step header.
 /// @prop {Map} current-step-hover-background [color: ('gray', 200)] - The background of the current step header on hover.
-/// @prop {Map} current-step-focus-background [color: 'gray', 100)] - The background of the current step header on focus.
+/// @prop {Map} current-step-focus-background [color: ('gray', 100)] - The background of the current step header on focus.
 /// @prop {Map} current-title-color [color: ('gray', 900)] - The color of the current step title.
 /// @prop {Map} current-title-hover-color [color: ('gray', 900)] - The color of the current step title on hover.
 /// @prop {Map} current-title-focus-color [color: ('gray', 900)] - The color of the current step title on focus.
@@ -47,7 +47,7 @@
 /// @prop {Map} current-indicator-outline [color: ('primary', 500)] - The outline color of the current step indicator.
 /// @prop {Color} complete-step-background [transparent] - The background of the complete step header.
 /// @prop {Map} complete-step-hover-background [color: ('gray', 200)] - The background of the complete step header on hover.
-/// @prop {Map} complete-step-focus-background [color: 'gray', 100)] - The background of the complete step header on focus.
+/// @prop {Map} complete-step-focus-background [color: ('gray', 100)] - The background of the complete step header on focus.
 /// @prop {Map} complete-title-color [color: ('gray', 900)] - The color of the complete step title.
 /// @prop {Map} complete-title-hover-color [color: ('gray', 900)] - The color of the complete step title on hover.
 /// @prop {Map} complete-title-focus-color [color: ('gray', 900)] - The color of the complete step title on focus.
@@ -65,8 +65,16 @@
 /// @prop {String} complete-step-separator-style ['solid'] - The separator border-style between the completed steps.
 /// @prop {List} border-radius-indicator [(rem(100px), rem(0), rem(100px))] - The indicator border radius.
 /// @prop {List} border-radius-step-header [(rem(0), rem(0), rem(100px))] - The header border radius.
+/// @prop {Map} content-foreground [color: ('gray', 900)] - The foreground of the step content.
 $light-stepper: (
     // Step incomplete
+    content-foreground:
+        (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
     step-background: transparent,
     step-hover-background: (
         color: (
@@ -629,34 +637,169 @@ $bootstrap-stepper: extend(
 
 /// Generates an indigo stepper schema.
 /// @type {Map}
-/// @prop {Map} complete-indicator-color [color: ('primary', 500)] - The color of the completed step indicator.
-/// @prop {Map} complete-indicator-background [color: ('primary', 100)] - The background color of the completed step indicator.
-/// @prop {Map} complete-indicator-outline [color: ('primary', 100)] - The outline color of the completed step indicator.
-/// @prop {String} step-separator-style ['solid'] - The separator border-style of between the steps.
+/// @prop {Map} complete-indicator-background [color: ('gray', 600)] - The background color of the completed step indicator.
+/// @prop {Color} complete-indicator-outline [transparent] - The outline color of the completed step indicator.
+/// @prop {Map} complete-indicator-color [contrast-color: ('gray', 900)] - The color of the completed step indicator.
+/// @prop {Map} step-separator-color [color: ('gray', 900, .3)] - The separator border-color of between the steps.
+/// @prop {Map} complete-step-separator-color [color: ('gray', 900, .3)] - The separator border-color between the completed steps.
+/// @prop {Map} indicator-background [color: ('gray', 900, .15)] - The background color of the incomplete step indicator.
+/// @prop {Color} indicator-outline [transparent] - The outline color of the incomplete step indicator.
+/// @prop {Map} indicator-color [color: ('gray', 800)] - The text color of the incomplete step indicator.
+/// @prop {Map} step-hover-background [color: ('gray', 900, .15)] - The background of the step header on hover.
+/// @prop {Map} step-focus-background [color: ('gray', 900,. 15)] - The background of the step header on focus.
+/// @prop {Map} current-step-hover-background [color: ('gray', 900, .15)] - The background of the current step header on hover.
+/// @prop {Map} current-step-focus-background [color: ('gray', 900, .15)] - The background of the current step header on focus.
+/// @prop {Map} complete-step-hover-background [color: ('gray', 900, .15)] - The background of the complete step header on hover.
+/// @prop {Map} complete-step-focus-background [color: ('gray', 900, .15)] - The background of the complete step header on focus.
+/// @prop {Map} invalid-step-hover-background [color: ('gray', 900, .15)] - The background of the invalid step header on hover.
+/// @prop {Map} invalid-step-focus-background [color: ('gray', 900, .15)] - The background of the invalid step header on focus.
+/// @prop {Map} disabled-title-color [color: ('gray', 900, .2)] - The title color of the disabled step.
+/// @prop {Map} disabled-subtitle-color [color: ('gray', 900, .2)] - The subtitle color of the disabled step.
+/// @prop {Map} disabled-indicator-color [color: ('gray', 900, .2)] - The color of the disabled step indicator, title, and subtitle.
+/// @prop {Map} disabled-indicator-background [color: ('gray', 900, .05)] - The background color of the disabled step indicator.
+/// @prop {Color} disabled-indicator-outline [transparent] - The outline color of the disabled step indicator.
+/// @prop {()} border-radius-step-header [rem(4px)] - The header border radius.
+/// @prop {Color} current-indicator-outline [transparent] - The outline color of the current step indicator.
+/// @prop {Map} content-foreground [color: ('gray', 700)] - The foreground of the step content.
+/// @prop {Color} invalid-indicator-outline [transparent] - The outline color of the invalid step indicator.
 /// @requires $light-stepper
 $indigo-stepper: extend(
     $light-stepper,
     (
-        // Complete
-        complete-indicator-background:
-            (
-                color: (
-                    'primary',
-                    100,
-                ),
+        content-foreground: (
+            color: (
+                'gray',
+                700,
             ),
-        complete-indicator-outline: (
+        ),
+        complete-indicator-background: (
             color: (
-                'primary',
-                100,
+                'gray',
+                600,
             ),
         ),
+        complete-indicator-outline: transparent,
         complete-indicator-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+        step-separator-color: (
             color: (
-                'primary',
-                500,
+                'gray',
+                900,
+                0.3,
+            ),
+        ),
+        complete-step-separator-color: (
+            color: (
+                'gray',
+                900,
+                0.3,
+            ),
+        ),
+        indicator-background: (
+            color: (
+                'gray',
+                900,
+                0.15,
+            ),
+        ),
+        indicator-outline: transparent,
+        indicator-color: (
+            color: (
+                'gray',
+                800,
             ),
         ),
-        step-separator-style: 'solid'
+        step-hover-background: (
+            color: (
+                'gray',
+                900,
+                0.15,
+            ),
+        ),
+        step-focus-background: (
+            color: (
+                'gray',
+                900,
+                0.15,
+            ),
+        ),
+        current-step-hover-background: (
+            color: (
+                'gray',
+                900,
+                0.15,
+            ),
+        ),
+        current-step-focus-background: (
+            color: (
+                'gray',
+                900,
+                0.15,
+            ),
+        ),
+        complete-step-hover-background: (
+            color: (
+                'gray',
+                900,
+                0.15,
+            ),
+        ),
+        complete-step-focus-background: (
+            color: (
+                'gray',
+                900,
+                0.15,
+            ),
+        ),
+        invalid-step-hover-background: (
+            color: (
+                'gray',
+                900,
+                0.15,
+            ),
+        ),
+        invalid-step-focus-background: (
+            color: (
+                'gray',
+                900,
+                0.15,
+            ),
+        ),
+        disabled-title-color: (
+            color: (
+                'gray',
+                900,
+                0.2,
+            ),
+        ),
+        disabled-subtitle-color: (
+            color: (
+                'gray',
+                900,
+                0.2,
+            ),
+        ),
+        disabled-indicator-color: (
+            color: (
+                'gray',
+                900,
+                0.2,
+            ),
+        ),
+        disabled-indicator-background: (
+            color: (
+                'gray',
+                900,
+                0.05,
+            ),
+        ),
+        disabled-indicator-outline: transparent,
+        border-radius-step-header: rem(4px),
+        current-indicator-outline: transparent,
+        invalid-indicator-outline: transparent,
     )
 );

package/sass/themes/schemas/components/light/_toast.scss

@@ -117,14 +117,34 @@ $bootstrap-toast: extend(
 
 /// Generates an indigo toast schema.
 /// @type {Map}
-/// @prop {List} border-radius [(rem(24px), rem(0), rem(26px))] - The border radius used for toast.
-/// @requires {Map} $light-toast
+/// @prop {Map} background [color: ('gray', 200)] - The background color used for the toast.
+/// @prop {Color} border-color [transparent] - The border color used for the toast.
+/// @prop {Map} text-color [color: ('gray', 700)] - The text-color used for the toast.
+/// @prop {List} border-radius [(rem(6px), rem(0), rem(26px))] - The border radius used for toast.
+/// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used for the toast.
+/// @requires {Map} $indigo-elevation-toast
 $indigo-toast: extend(
-    $light-toast,
+    $indigo-elevation-toast,
     (
+        background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        border-color: transparent,
+
+        text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
         border-radius: (
             border-radius: (
-                rem(24px),
+                rem(6px),
                 rem(0),
                 rem(26px),
             ),

package/sass/themes/schemas/components/light/_tooltip.scss

@@ -1,5 +1,6 @@
 @use '../../../../utils/map' as *;
 @use '../../../../typography/functions' as *;
+@use '../elevation/tooltip' as *;
 
 ////
 /// @package theming
@@ -9,32 +10,37 @@
 
 /// Generates a base light tooltip schema.
 /// @type {Map}
-/// @prop {Map} background [color: ('gray', 700, .9),] - The background color of the tooltip.
+/// @prop {Map} background [color: ('gray', 700, .9)] - The background color of the tooltip.
 /// @prop {Map} text-color [contrast-color: ('gray', 700)] - The text color of the tooltip.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for tooltip.
-$light-tooltip: (
-    background: (
-        color: (
-            'gray',
-            700,
-            0.9,
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the tooltip.
+/// @requires {Map} $default-elevation-tooltip
+$light-tooltip: extend(
+    $default-elevation-tooltip,
+    (
+        background: (
+            color: (
+                'gray',
+                700,
+                0.9,
+            ),
         ),
-    ),
 
-    text-color: (
-        contrast-color: (
-            'gray',
-            700,
+        text-color: (
+            contrast-color: (
+                'gray',
+                700,
+            ),
         ),
-    ),
 
-    border-radius: (
         border-radius: (
-            rem(4px),
-            rem(0),
-            rem(16px),
+            border-radius: (
+                rem(4px),
+                rem(0),
+                rem(16px),
+            ),
         ),
-    ),
+    )
 );
 
 /// Generates a light material tooltip schema.
@@ -102,14 +108,25 @@ $bootstrap-tooltip: extend(
 
 /// Generates an indigo tooltip schema.
 /// @type {Map}
-/// @prop {List} border-radius [(rem(3px), rem(0), rem(16px))] - The border radius used for tooltip.
+/// @prop {Map} background [color: ('gray', 600)] - The background color of the tooltip.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for tooltip.
+/// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the tooltip.
 /// @requires {Map} $light-tooltip
+/// @requires {Map} $indigo-elevation-tooltip
 $indigo-tooltip: extend(
     $light-tooltip,
+    $indigo-elevation-tooltip,
     (
+        background: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
         border-radius: (
             border-radius: (
-                rem(3px),
+                rem(4px),
                 rem(0),
                 rem(16px),
             ),