igniteui-theming 4.2.0 → 4.4.0

package/sass/themes/schemas/components/light/_dock-manager.scss

@@ -14,19 +14,17 @@
 /// @prop {Color} background-color [null] - Sets the base dock manager color as well as the pane headers and tabs background colors.
 /// @prop {Color} border-color [color: ('surface')] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors.
 /// @prop {Color} button-text [color: ('gray', 800)] - Sets the button text color.
-/// @prop {Color} context-menu-background-active [null] - Sets the background color for active context menus.
+/// @prop {Color} context-menu-background-active [color: 'primary'] - Sets the background color for active context menus.
 /// @prop {Color} context-menu-background [null] - Sets the background color for context menus.
-/// @prop {Color} context-menu-color-active [contrast-color: 'surface'] - Sets the text color for active context menus.
-/// @prop {Color} context-menu-color [null] - Sets the text color for context menus.
 /// @prop {Color} dock-background [null] - Sets the background color of the dock manager.
 /// @prop {Color} dock-text [null] - Sets the text color of the dock manager.
 /// @prop {Color} drop-shadow-background [color: ('primary', 500, .2)] - Sets the drop-shadow background color.
 /// @prop {Color} floating-pane-border-color [color: 'surface'] - Sets the border color for floating panes.
 /// @prop {Color} flyout-shadow-color [color: ('gray', 900, .8)] - Sets the flyout shadow color.
 /// @prop {Color} joystick-background [null] - Sets the background color of the joystick.
-/// @prop {Color} joystick-background-active [null] - Sets the background color of the joysticks.
+/// @prop {Color} joystick-background-active [color: 'primary'] - Sets the background color of the joysticks.
 /// @prop {Color} joystick-border-color [color: ('gray', 300)] - Sets the border color of the joystick.
-/// @prop {Color} joystick-icon-color [color: ('gray', 600)] - Sets the color for the joystick icons.
+/// @prop {Color} joystick-icon-color [color: 'primary'] - Sets the color for the joystick icons.
 /// @prop {Color} joystick-icon-color-active [contrast-color: 'surface'] - Sets the color of the active joystick icons.
 /// @prop {Color} pane-content-background [color: ('surface')] - Sets the background color of the content panes.
 /// @prop {Color} pane-content-text [null] - Sets the text color of the content panes.
@@ -35,13 +33,12 @@
 /// @prop {Color} pinned-header-background [null] - Sets the background colors of pinned headers.
 /// @prop {Color} pinned-header-text [null] - Sets the text colors of pinned headers.
 /// @prop {Color} splitter-background [color: ('gray', 300)] - Sets the background color for the splitters.
-/// @prop {Color} splitter-handle [null] - Sets the background color for the splitter handles.
+/// @prop {Color} splitter-handle [color: ('gray', 400)] - Sets the background color for the splitter handles.
 /// @prop {Color} tab-background-active [color: ('primary', 100)] - Sets the background color for active tabs.
-/// @prop {Color} tab-background [null] - Sets the background color for tabs.
+/// @prop {Color} tab-background [color: 'surface'] - Sets the background color for tabs.
 /// @prop {Color} tab-border-color [null] - Sets the border color for tabs.
 /// @prop {Color} tab-border-color-active [null] - Sets the border color for active tabs.
-/// @prop {Color} tab-text [null] - Sets the text color for tabs.
-/// @prop {Color} tab-text-active [null] - Sets the text color for active tabs.
+/// @prop {Color} tab-text [color: ('gray', 700)] - Sets the text color for tabs.
 /// @prop {Color} text-color [color: ('gray', 800)] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
 $light-dock-manager: (
     accent-color: null,
@@ -70,15 +67,11 @@ $light-dock-manager: (
         ),
     ),
 
-    context-menu-background-active: null,
-
-    context-menu-background: null,
-
-    context-menu-color-active: (
-        contrast-color: 'surface',
+    context-menu-background-active: (
+        color: 'primary',
     ),
 
-    context-menu-color: null,
+    context-menu-background: null,
 
     dock-background: (
         color: (
@@ -109,7 +102,9 @@ $light-dock-manager: (
         ),
     ),
 
-    joystick-background-active: null,
+    joystick-background-active: (
+        color: 'primary',
+    ),
 
     joystick-background: null,
 
@@ -121,10 +116,7 @@ $light-dock-manager: (
     ),
 
     joystick-icon-color: (
-        color: (
-            'gray',
-            600,
-        ),
+        color: 'primary',
     ),
 
     joystick-icon-color-active: (
@@ -164,7 +156,12 @@ $light-dock-manager: (
         ),
     ),
 
-    splitter-handle: null,
+    splitter-handle: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
 
     tab-background-active: (
         color: (
@@ -172,11 +169,19 @@ $light-dock-manager: (
         ),
     ),
 
-    tab-background: null,
+    tab-background: (
+        color: 'surface',
+    ),
+
     tab-border-color-active: null,
     tab-border-color: null,
-    tab-text-active: null,
-    tab-text: null,
+
+    tab-text: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
 
     text-color: (
         color: (
@@ -186,6 +191,44 @@ $light-dock-manager: (
     ),
 );
 
+/// Generates a material dock-manager schema.
+/// @type {Map}
+/// @prop {Color} context-menu-background-active [null] - Sets the background color for active context menus.
+/// @prop {Color} context-menu-color-active [contrast-color: 'surface'] - Sets the text color for active context menus.
+/// @prop {Color} context-menu-color [null] - Sets the text color for context menus.
+/// @prop {Color} joystick-background-active [null] - Sets the background color of the joysticks.
+/// @prop {Color} joystick-icon-color [color: ('gray', 600)] - Sets the color for the joystick icons.
+/// @prop {Color} splitter-handle [null] - Sets the background color for the splitter handles.
+/// @prop {Color} tab-background [null] - Sets the background color for tabs.
+/// @prop {Color} tab-text [null] - Sets the text color for tabs.
+/// @prop {Color} tab-text-active [null] - Sets the text color for active tabs.
+/// @requires {Map} $light-dock-manager
+$material-dock-manager: extend(
+    $light-dock-manager,
+    (
+        context-menu-background-active: null,
+
+        context-menu-color-active: (
+            contrast-color: 'surface',
+        ),
+
+        context-menu-color: null,
+        joystick-background-active: null,
+
+        joystick-icon-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        splitter-handle: null,
+        tab-background: null,
+        tab-text: null,
+        tab-text-active: null,
+    )
+);
+
 /// Generates a fluent dock-manager schema.
 /// @type {Map}
 /// @prop {Color} context-menu-background-active [color: ('gray', 200)] - Sets the background color for active context menus.
@@ -198,12 +241,9 @@ $light-dock-manager: (
 /// @prop {Color} joystick-icon-color-active [color: ('gray', 800)] - Sets the color of the active joystick icons.
 /// @prop {Color} pane-header-background [color: ('gray', 100)] - Sets the background color for pane headers.
 /// @prop {Color} splitter-background [color: ('gray', 100) - Sets the background color for the splitters.
-/// @prop {Color} splitter-handle [color: ('gray', 400)] - Sets the background color for the splitter handles.
-/// @prop {Color} tab-background [color: 'surface'] - Sets the background color for tabs.
 /// @prop {Color} tab-border-color [color: 'surface'] - Sets the border color for tabs.
 /// @prop {Color} tab-border-color-active [color: 'surface'] - Sets the border color for active tabs.
 /// @prop {Color} tab-text-active [color: 'primary'] - Sets the text color for active tabs.
-/// @prop {Color} tab-text [color: ('gray', 700)] - Sets the text color for tabs.
 /// @requires {Map} $light-dock-manager
 $fluent-dock-manager: extend(
     $light-dock-manager,
@@ -278,17 +318,6 @@ $fluent-dock-manager: extend(
             ),
         ),
 
-        splitter-handle: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-
-        tab-background: (
-            color: 'surface',
-        ),
-
         tab-border-color-active: (
             color: 'surface',
         ),
@@ -300,13 +329,6 @@ $fluent-dock-manager: extend(
         tab-text-active: (
             color: 'primary',
         ),
-
-        tab-text: (
-            color: (
-                'gray',
-                700,
-            ),
-        ),
     )
 );
 
@@ -314,18 +336,13 @@ $fluent-dock-manager: extend(
 /// @type {Map}
 /// @prop {Color} button-text [color: 'primary'] - Sets the button text color.
 /// @prop {Color} context-menu-background [color: 'surface'] - Sets the background color for context menus.
-/// @prop {Color} context-menu-background-active [color: 'primary'] - Sets the background color for active context menus.
 /// @prop {Color} context-menu-color-active [color: 'surface'] - Sets the text color for active context menus.
 /// @prop {Color} context-menu-color [color: 'primary'] - Sets the text color for context menus.
 /// @prop {Color} dock-background [color: ('gray', 100)] - Sets the background color of the dock manager.
 /// @prop {Color} floating-pane-border-color [color: ('gray', 300)] - Sets the border color for floating panes.
-/// @prop {Color} joystick-background-active [color: 'primary'] - Sets the background color of the joysticks.
-/// @prop {Color} joystick-icon-color [color: 'primary'] - Sets the color for the joystick icons.
 /// @prop {Color} pane-header-background [color: ('gray', 100)] - Sets the background color for pane headers.
 /// @prop {Color} pinned-header-background [color: ('gray', 100)] - Sets the background colors of pinned headers.
 /// @prop {Color} splitter-background [color: ('gray', 200)] - Sets the background color for the splitters.
-/// @prop {Color} splitter-handle [color: ('gray', 400)] - Sets the background color for the splitter handles.
-/// @prop {Color} tab-background [color: 'surface'] - Sets the background color for tabs.
 /// @prop {Color} tab-border-color-active [color: ('gray', 300)] - Sets the border color for active tabs.
 /// @prop {Color} tab-border-color [color: 'surface'] - Sets the border color for tabs.
 /// @prop {Color} tab-text-active [color: ('gray', 800)] - Sets the text color for active tabs.
@@ -342,10 +359,6 @@ $bootstrap-dock-manager: extend(
             color: 'surface',
         ),
 
-        context-menu-background-active: (
-            color: 'primary',
-        ),
-
         context-menu-color-active: (
             color: 'surface',
         ),
@@ -368,14 +381,6 @@ $bootstrap-dock-manager: extend(
             ),
         ),
 
-        joystick-background-active: (
-            color: 'primary',
-        ),
-
-        joystick-icon-color: (
-            color: 'primary',
-        ),
-
         pane-header-background: (
             color: (
                 'gray',
@@ -397,17 +402,6 @@ $bootstrap-dock-manager: extend(
             ),
         ),
 
-        splitter-handle: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-
-        tab-background: (
-            color: 'surface',
-        ),
-
         tab-border-color-active: (
             color: (
                 'gray',
@@ -436,19 +430,15 @@ $bootstrap-dock-manager: extend(
 /// @type Map
 /// @prop {Color} background-color [color: ('gray', 100)] - Sets the base dock manager color as well as the pane headers and tabs background colors.
 /// @prop {Color} button-text [color: 'primary'] - Sets the button text color.
-/// @prop {Color} context-menu-background-active [color: 'primary'] - Sets the background color for active context menus.
 /// @prop {Color} context-menu-color-active [contrast-color: 'primary'] - Sets the text color for active context menus.
 /// @prop {Color} context-menu-color [color: ('gray', 700)] - Sets the text color for context menus.
 /// @prop {Color} joystick-background [color: ('primary', 50)] - Sets the background color of the joysticks.
-/// @prop {Color} joystick-background-active [color: 'primary'] - Sets the background color of the joysticks.
 /// @prop {Color} joystick-border-color [color: ('primary', 50)] - Sets the border color of the joystick.
-/// @prop {Color} joystick-icon-color [color: 'primary'] - Sets the color for the joystick icons.
 /// @prop {Color} joystick-icon-color-active [contrast-color: 'primary'] - Sets the color of the active joystick icons.
 /// @prop {Color} pinned-header-background [color: ('gray', 100)] - Sets the background colors of pinned headers.
 /// @prop {Color} splitter-handle [color: 'surface'] - Sets the background color for the splitter handles.
 /// @prop {Color} tab-background [color: ('gray', 100)] - Sets the background color for tabs.
 /// @prop {Color} tab-text-active [color: ('gray', 900)] - Sets the text color for active tabs.
-/// @prop {Color} tab-text [color: ('gray', 700)] - Sets the text color for tabs.
 /// @prop {Color} text-color [color: ('gray', 900)] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
 /// @requires {Map} $light-dock-manager
 $indigo-dock-manager: extend(
@@ -465,10 +455,6 @@ $indigo-dock-manager: extend(
             color: 'primary',
         ),
 
-        context-menu-background-active: (
-            color: 'primary',
-        ),
-
         context-menu-color-active: (
             contrast-color: 'primary',
         ),
@@ -487,10 +473,6 @@ $indigo-dock-manager: extend(
             ),
         ),
 
-        joystick-background-active: (
-            color: 'primary',
-        ),
-
         joystick-border-color: (
             color: (
                 'primary',
@@ -498,10 +480,6 @@ $indigo-dock-manager: extend(
             ),
         ),
 
-        joystick-icon-color: (
-            color: 'primary',
-        ),
-
         joystick-icon-color-active: (
             contrast-color: 'primary',
         ),
@@ -531,13 +509,6 @@ $indigo-dock-manager: extend(
             ),
         ),
 
-        tab-text: (
-            color: (
-                'gray',
-                700,
-            ),
-        ),
-
         text-color: (
             color: (
                 'gray',

package/sass/themes/schemas/components/light/_drop-down.scss

@@ -16,15 +16,8 @@
 /// @prop {Map} header-text-color [color: ('secondary', 500)] - The drop-down header text color.
 /// @prop {Map} item-text-color [color: ('gray', 800)] - The drop-down text color.
 /// @prop {Map} hover-item-text-color [color: ('gray', 800)] - The drop-down hover text color.
-/// @prop {Map} hover-item-background [color: ('gray', 100, .8)] - The drop-down hover item background color.
-/// @prop {Map} focused-item-background [color: ('gray', 100, .8)] - The drop-down focused item background color.
 /// @prop {Map} focused-item-text-color [color: ('gray', 800)] - The drop-down focused item text color.
-/// @prop {Map} selected-item-background [color: ('secondary', 100)] - The drop-down selected item background color.
-/// @prop {Map} selected-item-text-color [contrast-color: ('secondary', 100)] - The drop-down selected item text color.
-/// @prop {Map} selected-hover-item-background [color: ('secondary', 200)] - The drop-down selected item hover background color.
-/// @prop {Map} selected-hover-item-text-color [contrast-color: ('secondary', 200)] - The drop-down selected item hover text color.
-/// @prop {Map} selected-focus-item-background [color: ('secondary', 200)] - The drop-down selected item focus background color.
-/// @prop {Map} selected-focus-item-text-color [contrast-color: ('secondary', 200)] - The drop-down selected item focus text color.
+/// @prop {Map} selected-item-background [color: ('primary', 500)] - The drop-down selected item background color.
 /// @prop {Color} disabled-item-background [transparent] - The drop-down disabled item background color.
 /// @prop {Map} disabled-item-text-color [color: ('gray', 400)] - The drop-down disabled item text color.
 /// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the drop-down shadow.
@@ -59,24 +52,85 @@ $light-drop-down: extend(
                 800,
             ),
         ),
-        hover-item-background: (
+        focused-item-text-color: (
             color: (
                 'gray',
-                100,
-                0.8,
+                800,
             ),
         ),
-        focused-item-background: (
+        selected-item-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        disabled-item-background: transparent,
+        disabled-item-text-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        border-width: 0,
+        border-radius: (
+            border-radius: (
+                rem(4px),
+                rem(0),
+                rem(20px),
+            ),
+        ),
+        item-border-radius: (
+            border-radius: (
+                rem(0),
+                rem(0),
+                rem(20px),
+            ),
+        ),
+        size: (
+            sizable: (
+                rem(28px),
+                rem(32px),
+                rem(40px),
+            ),
+        ),
+        default-size: 2,
+    )
+);
+
+/// Generates a material drop-down schema.
+/// @type {Map}
+/// @prop {Map} hover-item-background [color: ('gray', 100, .8)] - The drop-down hover item background color.
+/// @prop {Map} focused-item-background [color: ('gray', 100, .8)] - The drop-down focused item background color.
+/// @prop {Map} selected-item-background [color: ('secondary', 100)] - The drop-down selected item background color.
+/// @prop {Map} selected-item-text-color [contrast-color: ('secondary', 100)] - The drop-down selected item text color.
+/// @prop {Map} selected-hover-item-background [color: ('secondary', 200)] - The drop-down selected item hover background color.
+/// @prop {Map} selected-hover-item-text-color [contrast-color: ('secondary', 200)] - The drop-down selected item hover text color.
+/// @prop {Map} selected-focus-item-background [color: ('secondary', 200)] - The drop-down selected item focus background color.
+/// @prop {Map} selected-focus-item-text-color [contrast-color: ('secondary', 200)] - The drop-down selected item focus text color.
+/// @requires {Map} $light-drop-down
+/// @requires {Map} $default-elevation-drop-down
+$material-drop-down: extend(
+    $light-drop-down,
+    $default-elevation-drop-down,
+    (
+        hover-item-background: (
             color: (
                 'gray',
                 100,
                 0.8,
             ),
         ),
-        focused-item-text-color: (
+        focused-item-background: (
             color: (
                 'gray',
-                800,
+                100,
+                0.8,
             ),
         ),
         selected-item-background: (
@@ -115,54 +169,11 @@ $light-drop-down: extend(
                 200,
             ),
         ),
-        disabled-item-background: (
-            color: (
-                'gray',
-                50,
-                0,
-            ),
-        ),
-        disabled-item-text-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-        border-color: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-        border-width: 0,
-        border-radius: (
-            border-radius: (
-                rem(4px),
-                rem(0),
-                rem(20px),
-            ),
-        ),
-        item-border-radius: (
-            border-radius: (
-                rem(0),
-                rem(0),
-                rem(20px),
-            ),
-        ),
-        size: (
-            sizable: (
-                rem(28px),
-                rem(32px),
-                rem(40px),
-            ),
-        ),
-        default-size: 2,
     )
 );
 
 /// Generates a fluent drop-down schema.
 /// @type {Map}
-/// @prop {Map} hover-item-text-color [color: ('gray', 800)] - The drop-down hover text color.
 /// @prop {Map} hover-item-background [color: ('gray', 100)] - The drop-down hover item background color.
 /// @prop {Map} focused-item-background [color: 'surface'] - The drop-down focused item background color.
 /// @prop {Map} focused-item-text-color [color: ('gray', 800)] - The drop-down focused item text color.
@@ -182,12 +193,6 @@ $fluent-drop-down: extend(
     $light-drop-down,
     $fluent-elevation-drop-down,
     (
-        hover-item-text-color: (
-            color: (
-                'gray',
-                800,
-            ),
-        ),
         hover-item-background: (
             color: (
                 'gray',
@@ -199,12 +204,6 @@ $fluent-drop-down: extend(
                 'surface',
             ),
         ),
-        focused-item-text-color: (
-            color: (
-                'gray',
-                800,
-            ),
-        ),
         selected-item-background: (
             color: (
                 'gray',
@@ -268,7 +267,6 @@ $fluent-drop-down: extend(
 /// @prop {Map} header-text-color [color: ('gray', 700)] - The drop-down header text color.
 /// @prop {Map} hover-item-background [color: ('gray', 200)] - The drop-down hover item background color.
 /// @prop {Map} focused-item-background [color: ('gray', 200)] - The drop-down focused item background color.
-/// @prop {Map} selected-item-background [color: ('primary', 500)] - The drop-down selected item background color.
 /// @prop {Map} selected-item-text-color [contrast-color('primary', 600)] - The drop-down selected item text color.
 /// @prop {Map} selected-hover-item-background [color: ('primary', 600)] - The drop-down selected item hover background color.
 /// @prop {Map} selected-hover-item-text-color [contrast-color('primary', 600)] - The drop-down selected item hover text color.
@@ -300,12 +298,6 @@ $bootstrap-drop-down: extend(
                 200,
             ),
         ),
-        selected-item-background: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         selected-item-text-color: (
             contrast-color: (
                 'primary',
@@ -337,12 +329,6 @@ $bootstrap-drop-down: extend(
             ),
         ),
         border-width: 1px,
-        disabled-item-text-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
     )
 );
 
@@ -352,7 +338,6 @@ $bootstrap-drop-down: extend(
 /// @prop {Map} item-text-color [color: ('gray', 700)] - The drop-down text color.
 /// @prop {Map} hover-item-background [color: ('primary', 500, .15)] - The drop-down hover item background color.
 /// @prop {Map} focused-item-background [color: ('primary', 500, .15)] - The drop-down focused item background color.
-/// @prop {Map} selected-item-background [color: ('primary', 500)] - The drop-down selected item background color.
 /// @prop {Map} selected-item-text-color [contrast-color: ('primary', 500)] - The drop-down selected item text color.
 /// @prop {Map} selected-hover-item-background [color: ('primary', 400)] - The drop-down selected item hover background color.
 /// @prop {Map} selected-hover-item-text-color [contrast-color: ('primary', 400)] - The drop-down selected item hover text color.
@@ -393,12 +378,6 @@ $indigo-drop-down: extend(
                 0.15,
             ),
         ),
-        selected-item-background: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         selected-item-text-color: (
             contrast-color: (
                 'primary',

package/sass/themes/schemas/components/light/_expansion-panel.scss

@@ -82,6 +82,11 @@ $light-expansion-panel: (
     ),
 );
 
+/// Generates a material expansion panel schema.
+/// @type {Map}
+/// @requires {Map} $light-expansion-panel
+$material-expansion-panel: $light-expansion-panel;
+
 /// Generates a fluent expansion panel schema.
 /// @type {Map}
 /// @prop {Map} body-color [color: ('gray', 700)] - The panel body text color.

package/sass/themes/schemas/components/light/_grid-filtering.scss

@@ -81,18 +81,15 @@ $light-grid-filtering: (
     ),
 );
 
+/// Generates a material grid-filtering schema.
+/// @type {Map}
+/// @requires {Map} $light-grid-filtering
+$material-grid-filtering: $light-grid-filtering;
+
 /// Generates a fluent grid-filtering schema.
 /// @type {Map}
-/// @prop {Map} menu-background [color: 'surface'] - The idle menu background color.
 /// @requires {Map} $light-grid-filtering
-$fluent-grid-filtering: extend(
-    $light-grid-filtering,
-    (
-        menu-background: (
-            color: 'surface',
-        ),
-    )
-);
+$fluent-grid-filtering: $light-grid-filtering;
 
 /// Generates a bootstrap grid-filtering schema.
 /// @type {Map}

package/sass/themes/schemas/components/light/_grid-summary.scss

@@ -61,6 +61,11 @@ $light-grid-summary: (
     ),
 );
 
+/// Generates a material grid-summary schema.
+/// @type {Map}
+/// @requires {Map} $light-grid-summary
+$material-grid-summary: $light-grid-summary;
+
 /// Generates a fluent grid-summary schema.
 /// @type {Map}
 /// @prop {Map} background-color [color: ('surface')] - The summaries background color is inherited from the grid footer.

package/sass/themes/schemas/components/light/_grid-toolbar.scss

@@ -83,6 +83,11 @@ $light-grid-toolbar: (
     ),
 );
 
+/// Generates a material grid-toolbar schema.
+/// @type {Map}
+/// @requires {Map} $light-grid-toolbar
+$material-grid-toolbar: $light-grid-toolbar;
+
 /// Generates a fluent grid-toolbar schema.
 /// @type {Map}
 /// @prop {Map} background-color [color: 'surface'] - The toolbar background color.