igniteui-theming 1.4.5 → 1.4.6

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

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

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

@@ -0,0 +1,61 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../elevation/bottom-nav' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light bottom navigation scheme.
+/// @type {Map}
+/// @prop {Color} background [color: ('gray', 50))] - The background color used for the toast.
+/// @prop {Map} idle-item-color [color: ('gray', 700)] - The text-color used for the idle color.
+/// @prop {Map} active-item-color [color: ('primary', 500)] - The text-color used for the active color.
+/// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the bottom nav.
+/// @requires {Map} $default-elevation-bottom-nav
+$light-bottom-nav: extend(
+    $default-elevation-bottom-nav,
+    (
+        background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        idle-item-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        active-item-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+    )
+);
+
+/// Generates a fluent bottom navigation schema.
+/// @type {Map}
+/// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the bottom nav.
+/// @requires {Map} $light-bottom-nav
+/// @requires {Map} $fluent-elevation-bottom-nav
+$fluent-bottom-nav: extend($light-bottom-nav, $fluent-elevation-bottom-nav);
+
+/// Generates a bootstrap bottom navigation schema.
+/// @type {Map}
+/// @requires {Map} $light-bottom-nav
+$bootstrap-bottom-nav: $light-bottom-nav;
+
+/// Generates an indigo bottom navigation schema.
+/// @type {Map}
+/// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the bottom nav.
+/// @requires {Map} $light-bottom-nav
+/// @requires {Map} $indigo-elevation-bottom-nav
+$indigo-bottom-nav: extend($light-bottom-nav, $indigo-elevation-bottom-nav);

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

@@ -0,0 +1,426 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../elevation/button-group' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light button group schema.
+/// @type {Map}
+/// @prop {Map} item-text-color [color: ('gray', 700)]- The text color for button group items.
+/// @prop {Map} item-background [color: ('gray', 50)] - The background color for button group items .
+/// @prop {Map} item-border-color [color: ('gray', 400)] - The border color between button group items.
+/// @prop {Map} item-hover-text-color [color: ('gray', 800)] - The hover text color for button group items.
+/// @prop {Map} item-hover-background [color: ('gray', 300)] - The hover background color for button group items.
+/// @prop {Map} disabled-text-color [color: ('gray', 400)]- The text/icon color for a disabled item in the button group.
+/// @prop {Map} disabled-background-color [color: ('gray', 50)] - The background color for a disabled item in the button group.
+/// @prop {Map} item-disabled-border [color: ('gray', 400)] - The border color for a disabled item in the button group.
+/// @prop {Map} item-selected-text-color [color: ('gray', 800)]- The text color for a selected item in the button group.
+/// @prop {Map} item-selected-background [color: ('gray', 400)] - The background color for a selected item in the button group.
+/// @prop {Map} item-selected-border-color [color: ('gray', 500)] - The border color for a selected item from the button group.
+/// @prop {Map} item-selected-hover-background [color: ('gray', 500, .8)] - The background color for a selected item in hover or focus state in the button group.
+/// @prop {Map} idle-shadow-color [transparent] - The outline color of button group items.
+/// @prop {Number} elevation [2] - The elevation level, between 0-24, to be used for the button group shadow.
+/// @prop {Number} border-radius [4px] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $default-elevation-button-group
+$light-button-group: extend(
+    $default-elevation-button-group,
+    (
+        idle-shadow-color: transparent,
+
+        item-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        item-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        item-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        item-hover-text-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        item-hover-background: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        item-selected-text-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        item-selected-background: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        item-selected-hover-background: (
+            color: (
+                'gray',
+                500,
+                0.8,
+            ),
+        ),
+
+        item-selected-border-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        disabled-text-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        disabled-background-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        item-disabled-border: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        border-radius: rem(4px),
+    )
+);
+
+/// Generates a fluent button group schema.
+/// @type {Map}
+/// @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 hover text color for button group items.
+/// @prop {Map} item-hover-background [color: ('gray', 50)] - 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', 200)] - The background color for a selected item in hover or focus state in the button group.
+/// @prop {Map} item-selected-text-color [color: ('primary', 200)]- The text color for a selected item in the button group.
+/// @prop {Color} disabled-background-color [color: ('gray', 50)] - The background color for a disabled item in the button group.
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
+/// @prop {Number} border-radius [2px] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-button-group
+/// @requires {Map} $fluent-elevation-button-group
+$fluent-button-group: extend(
+    $light-button-group,
+    $fluent-elevation-button-group,
+    (
+        item-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        item-hover-text-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        item-hover-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        item-selected-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        item-selected-hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        item-selected-text-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        disabled-background-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        border-radius: rem(2px),
+    )
+);
+
+/// Generates a bootstrap button group schema.
+/// @type {Map}
+/// @prop {Map} item-background [color: ('primary', 500)] - The background color for button group items.
+/// @prop {Map} item-text-color [contrast-color: ('primary', 600)]- The text color for button group items.
+/// @prop {Map} item-border-color [color: ('primary', 500)] - The border color between button group items.
+/// @prop {Map} item-hover-background [color: ('primary', 600)] - The hover background color for button group items.
+/// @prop {Map} item-hover-text-color [contrast-color: ('primary', 600)] - The hover text color for button group items.
+/// @prop {Map} item-selected-background [color: ('primary', 700)] - The background color for a selected item in the button group.
+/// @prop {Map} item-selected-text-color [contrast-color: ('primary', 700)]- The text color for a selected item in the button group.
+/// @prop {Map} item-selected-border-color [color: ('primary', 700)] - The border color for a selected item from the button group.
+/// @prop {Map} item-selected-hover-background [color: ('primary', 800)] - The background color for a selected item in hover or focus state in the button group.
+/// @prop {Map} disabled-background-color [color: ('primary', 100)] - The background color for a disabled item in the button group.
+/// @prop {Map} disabled-text-color [color: ('primary', 200)]- The text/icon color for a disabled item in the button group.
+/// @prop {Map} item-disabled-border [color: ('primary', 100)] - The border color for a disabled item in the button group.
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
+/// @prop {Number} border-radius [4px] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-button-group
+/// @requires {Map} $bootstrap-elevation-button-group
+$bootstrap-button-group: extend(
+    $light-button-group,
+    $bootstrap-elevation-button-group,
+    (
+        item-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        item-text-color: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        item-border-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        item-hover-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        item-hover-text-color: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        item-selected-background: (
+            color: (
+                'primary',
+                700,
+            ),
+        ),
+
+        item-selected-text-color: (
+            contrast-color: (
+                'primary',
+                700,
+            ),
+        ),
+
+        item-selected-border-color: (
+            color: (
+                'primary',
+                700,
+            ),
+        ),
+
+        item-selected-hover-background: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
+
+        disabled-background-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+
+        disabled-text-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        item-disabled-border: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo light button-group schema.
+/// @type {Map}
+/// @prop {Map} item-background [color: ('gray', 50)] - The background color for button group items.
+/// @prop {Map} item-text-color [contrast-color: ('gray', 50)]- The text color for button group items.
+/// @prop {Map} idle-shadow-color [color: ('primary', 200)] - The outline color of button group items.
+/// @prop {Map} selected-shadow-color [color: ('primary', 200)] - The outline color of selected button group items.
+/// @prop {Map} item-border-color [color: ('primary', 300)] - The border color between button group items.
+/// @prop {Map} item-hover-background [color: ('gray', 100, .87)] - The hover background color for button group items.
+/// @prop {Map} item-hover-text-color [contrast-color: ('gray', 100)] - The hover text color for button group items.
+/// @prop {Map} item-selected-background [color: ('primary', 500)] - The background color for a selected item in the button group.
+/// @prop {Map} item-selected-text-color [contrast-color: ('primary', 500)]- The text color for a selected item in the button group.
+/// @prop {Map} item-selected-border-color [color: ('primary', 400)] - The border color for a selected item from the button group.
+/// @prop {Map} item-selected-hover-background [color: ('primary', 400)] - The background color for a selected item in hover or focus state in the button group.
+/// @prop {Map} disabled-background-color [color: ('gray', 100)] - The background color for a disabled item in the button group.
+/// @prop {Map} disabled-text-color [color: ('gray', 400)]- The text/icon color for a disabled item in the button group.
+/// @prop {Map} item-disabled-border [color: ('gray', 300)] - The border color for a disabled item in the button group.
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
+/// @prop {Number} border-radius [8px] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-button-group
+/// @requires {Map} $indigo-elevation-button-group
+$indigo-button-group: extend(
+    $light-button-group,
+    $indigo-elevation-button-group,
+    (
+        item-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        idle-shadow-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        selected-shadow-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        item-text-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        item-border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        item-hover-background: (
+            color: (
+                'gray',
+                100,
+                0.87,
+            ),
+        ),
+
+        item-hover-text-color: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        item-selected-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        item-selected-text-color: (
+            contrast-color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        item-selected-border-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+
+        item-selected-hover-background: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+
+        disabled-background-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        disabled-text-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        item-disabled-border: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        border-radius: rem(8px),
+    )
+);