igniteui-theming 1.4.5 → 1.4.6-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.4.5",
+  "version": "1.4.6-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/_action-strip.scss

@@ -0,0 +1,50 @@
+@use '../../../../utils/map' as *;
+@use '../light/action-strip' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark action-strip schema.
+/// @type {Map}
+/// @requires $light-action-strip
+$dark-action-strip: $light-action-strip;
+
+/// Generates a dark fluent action strip schema.
+/// @type {Map}
+/// @prop {Map} actions-background [color: ('gray', 600)] - The color used for actions background.
+/// @requires $fluent-action-strip
+$dark-fluent-action-strip: extend(
+    $fluent-action-strip,
+    (
+        actions-background: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark bootstrap action strip schema.
+/// @type {Map}
+/// @prop {Map} actions-background [color: ('gray', 100)] - The color used for actions background.
+/// @requires $bootstrap-action-strip
+$dark-bootstrap-action-strip: extend(
+    $bootstrap-action-strip,
+    (
+        actions-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo action strip schema.
+/// @type {Map}
+/// @requires $indigo-action-strip
+$dark-indigo-action-strip: $indigo-action-strip;

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

@@ -0,0 +1,39 @@
+@use '../../../../utils/map' as *;
+@use '../light/badge' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark badge schema.
+/// @type {Map}
+/// @requires $light-badge
+$dark-badge: $light-badge;
+
+/// Generates a dark fluent badge schema.
+/// @type {Map}
+/// @requires $fluent-badge
+$dark-fluent-badge: $fluent-badge;
+
+/// Generates a dark bootstrap badge schema.
+/// @type {Map}
+/// @prop {Map} border-color [contrast-color: ('gray', 50)] - The border color used.
+/// @requires $bootstrap-badge
+$dark-bootstrap-badge: extend(
+    $bootstrap-badge,
+    (
+        border-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo badge schema.
+/// @type {Map}
+/// @requires $indigo-badge
+$dark-indigo-badge: $indigo-badge;

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

@@ -0,0 +1,54 @@
+@use '../../../../utils/map' as *;
+@use '../light/banner' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark banner schema.
+/// @type {Map}
+/// @requires $light-banner
+$dark-banner: $light-banner;
+
+/// Generates a dark fluent banner schema.
+/// @type {Map}
+/// @requires $fluent-banner
+$dark-fluent-banner: $fluent-banner;
+
+/// Generates a dark bootstrap banner schema.
+/// @type {Map}
+/// @prop {Map} banner-background [color: ('surface')] - The background color used banner background.
+/// @prop {Map} banner-message-color [color: ('gray', 600)] - The color used for banner label.
+/// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used banner illustration.
+/// @requires $bootstrap-banner
+$dark-bootstrap-banner: extend(
+    $bootstrap-banner,
+    (
+        banner-background: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        banner-message-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        banner-illustration-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo banner schema.
+/// @type {Map}
+/// @requires $indigo-banner
+$dark-indigo-banner: $indigo-banner;

package/sass/themes/schemas/components/dark/_bottom-nav.scss

@@ -0,0 +1,61 @@
+@use '../../../../utils/map' as *;
+@use '../light/bottom-nav' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates the base dark bottom-nav schema.
+/// @type {Map}
+$base-dark-bottom-nav: $light-bottom-nav;
+
+/// Generates a dark bottom-nav schema based on a mix of $light-bottom-nav and $base-dark-bottom-nav
+/// @type {Map}
+/// @requires $light-bottom-nav
+/// @requires $base-dark-bottom-nav
+$dark-bottom-nav: extend($light-bottom-nav, $base-dark-bottom-nav);
+
+/// Generates a dark fluent bottom-nav schema based on a mix of $fluent-bottom-nav and $base-dark-bottom-nav
+/// @type {Map}
+/// @requires $fluent-bottom-nav
+/// @requires $base-dark-bottom-nav
+$dark-fluent-bottom-nav: extend($fluent-bottom-nav, $base-dark-bottom-nav);
+
+/// Generates a dark bootstrap bottom-nav schema based on a mix of $bootstrap-bottom-nav and $base-dark-bottom-nav
+/// @type {Map}
+/// @requires $bootstrap-bottom-nav
+/// @requires $base-dark-bottom-nav
+$dark-bootstrap-bottom-nav: extend($bootstrap-bottom-nav, $base-dark-bottom-nav);
+
+/// Generates a dark indigo bottom-nav schema based on a mix of $indigo-bottom-nav and $base-dark-bottom-nav
+/// @type {Map}
+/// @prop {Map} background [color: 'surface'] - The background color used for the bottom-nav.
+/// @prop {Color} active-item-color [color: ('gray', 700)] - The text-color used for the active color.
+/// @prop {Map} idle-item-color [color: ('gray', 400)] - The text-color used for the idle color.
+/// @requires $indigo-bottom-nav
+/// @requires $base-dark-bottom-nav
+$dark-indigo-bottom-nav: extend(
+    $indigo-bottom-nav,
+    $base-dark-bottom-nav,
+    (
+        background: (
+            color: 'surface',
+        ),
+
+        active-item-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        idle-item-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+    )
+);

package/sass/themes/schemas/components/dark/_button-group.scss

@@ -0,0 +1,190 @@
+@use '../../../../utils/map' as *;
+@use '../light/button-group' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates the base dark button-group schema.
+/// @type {Map}
+/// @prop {Map} item-disabled-border [color: ('gray', 100)] - The border color for a disabled item in the button group.
+/// @prop {Map} item-border-color [color: ('gray', 100)] - The border color between button group items.
+/// @prop {Map} item-hover-background [color: ('gray', 100), .8] - The hover background color for button group items.
+/// @prop {Map} item-selected-background [color: ('gray', 200)] - The background color for a selected item in the button group.
+/// @prop {Map} item-selected-hover-background [color: ('gray', 300, .8)] - The background color for a selected item in hover or focus state in the button group.
+/// @prop {Map} item-selected-border-color [color: ('gray', 300)] - The border color for button group selected items.
+$base-dark-button-group: (
+    item-hover-background: (
+        color: (
+            'gray',
+            100,
+            0.8,
+        ),
+    ),
+
+    item-selected-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
+    item-selected-hover-background: (
+        color: (
+            'gray',
+            300,
+            0.8,
+        ),
+    ),
+
+    item-selected-border-color: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+
+    item-border-color: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    item-disabled-border: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+);
+
+/// Generates a dark button-group schema based on a mix of $light-button-group and $base-dark-button-group
+/// @type {Map}
+/// @requires $light-button-group
+/// @requires $base-dark-button-group
+$dark-button-group: extend($light-button-group, $base-dark-button-group);
+
+/// Generates a dark fluent button-group schema based on a mix of $fluent-button-group and $base-dark-button-group
+/// @type {Map}
+/// @prop {Map} item-border-color [color: ('gray', 100)] - The border color for button group items.
+/// @prop {Map} item-selected-border-color [color: ('gray', 100)] - The border color for button group selected items.
+/// @prop {Map} item-disabled-border: [color: ('gray', 100)] - The border color for button group disabled items.
+/// @prop {Map} item-text-color [color: ('gray', 900)] - The text color for button group items.
+/// @prop {Map} item-hover-text-color [color: ('primary', 200)] - The text color for button group items on hover.
+/// @prop {Color} item-hover-background [color: ('gray', 50)] - The background color for button group items on hover.
+/// @prop {Map} item-selected-background [color: ('gray', 100, .5)] - The background color for button group selected items.
+/// @prop {Map} item-selected-hover-background [color: ('gray', 100, .5)] - The background color for button group selected items on hover.
+/// @prop {Map} item-selected-text-color [color: ('primary', 200)] - The text color for button group selected items.
+/// @prop {Color} disabled-background-color [color: ('gray', 50)] - The background color for button group disabled items.
+/// @requires $fluent-button-group
+/// @requires $base-dark-button-group
+$dark-fluent-button-group: extend(
+    $fluent-button-group,
+    $base-dark-button-group,
+    (
+        item-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        item-selected-text-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        item-hover-text-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        item-hover-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        item-selected-background: (
+            color: (
+                'gray',
+                100,
+                0.5,
+            ),
+        ),
+
+        item-selected-hover-background: (
+            color: (
+                'gray',
+                100,
+                0.5,
+            ),
+        ),
+
+        item-border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        item-selected-border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        item-disabled-border: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        disabled-background-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark bootstrap button-group schema based on a mix of $bootstrap-button-group
+/// @type {Map}
+/// @requires $bootstrap-button-group
+$dark-bootstrap-button-group: $bootstrap-button-group;
+
+/// Generates a dark indigo button-group schema
+/// @type {Map}
+/// @prop {Map} item-background [color: ('surface')] - The background color for button group items.
+/// @prop {Color} item-text-color [contrast-color: 'surface']- The text color for button group items.
+/// @prop {Color} item-hover-text-color [contrast-color: 'surface'] - The hover text color for button group items.
+/// @requires $indigo-button-group
+$dark-indigo-button-group: extend(
+    $indigo-button-group,
+    (
+        item-background: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        item-text-color: (
+            contrast-color: 'surface',
+        ),
+
+        item-hover-text-color: (
+            contrast-color: 'surface',
+        ),
+    )
+);