igniteui-theming 1.4.2 → 1.4.3-beta.2

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

@@ -0,0 +1,144 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../light/radio' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark radio schema.
+/// @type {Map}
+/// @requires $light-radio
+$dark-radio: extend(
+    $light-radio,
+    (
+        type: 'dark',
+    )
+);
+
+/// Generates a dark fluent radio schema.
+/// @type {Map}
+/// @prop {Map} hover-color [color: ('gray', 400)] - The border and dot colors on hover.
+/// @prop {Map} fill-color [color: ('primary', 300)] - The checked border and dot colors.
+/// @prop {Map} fill-hover-border-color [color: ('primary', 100)] - The text color used for the label text.
+/// @prop {Map} fill-color-hover [color: ('primary', 100)] - The checked border and dot colors on hover.
+/// @prop {Map} error-color-hover [color: ('error', 200)] - The border and dot color in invalid state on hover.
+/// @prop {Map} disabled-color [color: ('gray', 100)] - The disabled border and dot colors.
+/// @prop {Map} disabled-label-color [color: ('gray', 300)] - The disabled label color.
+/// @requires $fluent-radio
+$dark-fluent-radio: extend(
+    $fluent-radio,
+    (
+        hover-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        fill-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        fill-hover-border-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+        fill-color-hover: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+        error-color-hover: (
+            color: (
+                'error',
+                200,
+            ),
+        ),
+        disabled-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        disabled-label-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark bootstrap radio schema.
+/// @type {Map}
+/// @prop {Map} fill-hover-border-color [color: ('gray', 900)] - The text color used for the label text.
+/// @prop {Map} fill-color-hover [color: ('gray', 900)] - The checked border and dot colors on hover.
+/// @requires $bootstrap-radio
+$dark-bootstrap-radio: extend(
+    $bootstrap-radio,
+    (
+        fill-hover-border-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        fill-color-hover: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo radio schema.
+/// @type {Map}
+/// @prop {Map} fill-hover-border-color [color: ('gray', 900)] - The text color used for the label text.
+/// @prop {Map} empty-color [color: ('gray', 700)] - The unchecked border color.
+/// @prop {Map} fill-color [color: ('gray', 900)] - The checked border and dot colors.
+/// @prop {Map} fill-color-hover [color: ('gray', 900)] - The checked border and dot colors on hover.
+/// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and dot colors.
+/// @requires $indigo-radio
+$dark-indigo-radio: extend(
+    $indigo-radio,
+    (
+        fill-hover-border-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        fill-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        fill-color-hover: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        empty-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        disabled-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+    )
+);

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

@@ -0,0 +1,29 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../light/rating' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark rating schema.
+/// @type {Map}
+/// @requires $light-rating
+$dark-rating: $light-rating;
+
+/// Generates a dark fluent rating schema.
+/// @type {Map}
+/// @requires $fluent-rating
+$dark-fluent-rating: $fluent-rating;
+
+/// Generates a dark bootstrap rating schema.
+/// @type {Map}
+/// @requires $bootstrap-rating
+$dark-bootstrap-rating: $bootstrap-rating;
+
+/// Generates a dark indigo rating schema.
+/// @type {Map}
+/// @requires $indigo-rating
+$dark-indigo-rating: $indigo-rating;

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

@@ -0,0 +1,56 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../light/select' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a dark select schema.
+/// @type {Map}
+/// @requires $light-select
+$dark-select: $light-select;
+
+/// Generates a dark fluent select schema.
+/// @type {Map}
+/// @requires $fluent-select
+$dark-fluent-select: $fluent-select;
+
+/// Generates a dark bootstrap select schema.
+/// @type {Map}
+/// @requires $bootstrap-select
+$dark-bootstrap-select: extend($bootstrap-select);
+
+/// Generates a dark indigo select schema.
+/// @type {Map}
+/// @prop {Map} toggle-button-foreground [color: ('gray', 600)] - The select toggle button foreground color.
+/// @prop {Map} toggle-button-foreground-focus [color: ('gray', 600)] - The select toggle button foreground color when the select is focused.
+/// @prop {Map} toggle-button-foreground-filled [color: ('gray', 600)] - The select toggle button foreground color when the select is focused.
+/// @requires $indigo-select
+$dark-indigo-select: extend(
+    $indigo-select,
+    (
+        toggle-button-foreground: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        toggle-button-foreground-focus: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        toggle-button-foreground-filled: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+    )
+);

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

@@ -0,0 +1,136 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../light/slider' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a dark slider schema.
+/// @type {Map}
+/// @requires $light-slider
+$dark-slider: $light-slider;
+
+/// Generates a dark fluent slider schema.
+/// @type {Map}
+/// @prop {Map} base-track-color [color: ('gray', 300)] - The base background color of the track.
+/// @prop {Map} base-track-hover-color [color: ('gray', 300)] - The base background color of the track on hover.
+/// @prop {Map} track-color [color: ('gray', 600)] - The color of the track.
+/// @prop {Map} track-hover-color [color: ('primary', 300)] - The color of the track on hover.
+/// @prop {Map} thumb-border-color [color: ('gray', 400)] - The thumb border color.
+/// @prop {Map} thumb-focus-color [color: ('primary', 100)] - The focus outline color of the thumb.
+/// @prop {Map} thumb-disabled-border-color [color: ('gray', 200)] - The thumb border color when it's disabled.
+/// @prop {Map} disabled-base-track-color [color: ('gray', 100)] - The base background color of the track when is disabled.
+/// @prop {Map} disabled-fill-track-color [color: ('gray', 300)] - The background color of the fill track when is disabled.
+/// @requires $fluent-slider
+$dark-fluent-slider: extend(
+    $fluent-slider,
+    (
+        base-track-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        base-track-hover-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        track-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        track-hover-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        thumb-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        thumb-focus-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+        thumb-disabled-border-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        disabled-base-track-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        disabled-fill-track-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark bootstrap slider schema.
+/// @type {Map}
+/// @prop {Map} base-track-color [color: ('secondary', 500, .48)] - The base background color of the track.
+/// @prop {Map} base-track-hover-color [color: ('secondary', 500, .48)] - The base background color of the track on hover.
+/// @requires $bootstrap-slider
+$dark-bootstrap-slider: extend(
+    $bootstrap-slider,
+    (
+        base-track-color: (
+            color: (
+                'secondary',
+                500,
+                0.48,
+            ),
+        ),
+        base-track-hover-color: (
+            color: (
+                'secondary',
+                500,
+                0.48,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo slider schema.
+/// @type {Map}
+/// @prop {Map} base-track-color [color: ('gray', 200)] - The base background color of the track.
+/// @prop {Map} base-track-hover-color [color: ('gray', 400)] - The base background color of the track on hover.
+/// @requires $indigo-slider
+$dark-indigo-slider: extend(
+    $indigo-slider,
+    (
+        base-track-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        base-track-hover-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+    )
+);

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

@@ -0,0 +1,216 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../light/switch' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a base dark switch schema.
+/// @type {Map}
+/// @prop {Color} thumb-disabled-color [color: ('gray', 200)] - The color of the thumb when the switch is disabled.
+$base-dark-switch: (
+    type: 'dark',
+    thumb-disabled-color: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+);
+
+/// Generates a dark switch schema based on a mix of $light-switch and $base-dark-switch.
+/// @type {Map}
+/// @requires $light-switch
+/// @requires $base-dark-switch
+$dark-switch: extend($light-switch, $base-dark-switch);
+
+/// Generates a dark fluent switch schema based on a mix of $fluent-switch and $base-dark-switch.
+/// @type {Map}
+/// @prop {Map} border-color [color: ('gray', 500)] - The border color of the switch.
+/// @prop {Map} border-on-color [color('primary', 300)] - The border color of the on-switch.
+/// @prop {Map} border-on-hover-color [color('primary',100)] - The border color of the on-switch.
+/// @prop {Map} border-disabled-color [color: ('gray', 200)] - The border color of the disabled switch.
+/// @prop {Map} track-on-color [color: ('primary', 300)] - The color of the track when the switch is on.
+/// @prop {Map} track-on-disabled-color [color: ('gray', 200)] - The color of the track when the switch is on and disabled.
+/// @prop {Map} track-on-hover-color [color: ('primary', 100)] - The color of the track when the switch is on and hovered.
+/// @prop {Map} thumb-off-color [color: ('gray', 500)] - The color of the thumb when the switch is off.
+/// @prop {Map} thumb-disabled-color [color: ('gray', 200)] - The color of the thumb when the switch is disabled.
+/// @prop {Map} error-color [color: ('gray', 500)] - The border and thumb color in invalid state.
+///
+/// @requires $fluent-switch
+/// @requires $base-dark-switch
+$dark-fluent-switch: extend(
+    $fluent-switch,
+    $base-dark-switch,
+    (
+        border-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        thumb-off-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        border-on-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        border-on-hover-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+        track-on-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        track-on-hover-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+        border-disabled-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        thumb-disabled-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        track-on-disabled-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        error-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark bootstrap switch schema based on a mix of $bootstrap-switch and $base-dark-switch.
+/// @type {Map}
+/// @prop {Color} thumb-on-color [color: ('gray', 900)] - The color of the thumb when the switch is on.
+/// @prop {Color} thumb-on-disabled-color [color: ('gray', 900)] - The color of the thumb when the switch is on and disabled.
+/// @requires $bootstrap-switch
+/// @requires $base-dark-switch
+$dark-bootstrap-switch: extend(
+    $bootstrap-switch,
+    $base-dark-switch,
+    (
+        thumb-on-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        thumb-on-disabled-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo switch schema.
+/// @type {Map}
+/// @prop {Color} thumb-on-color [color: 'surface'] - The color of the thumb when the switch is on.
+/// @prop {Map} track-on-color [color: ('gray', 900)] - The color of the track when the switch is on.
+/// @prop {Map} thumb-off-color [color: ('gray', 700)] - The color of the thumb when the switch is off.
+/// @prop {Color} track-off-color [transparent] - The color of the track when the switch is off.
+///
+/// @prop {Map} border-color [color: ('gray', 700)] - The border color of the switch.
+/// @prop {Map} border-hover-color [color: ('gray', 700)] - The border color of the switch on hover.
+/// @prop {Map} border-disabled-color [color: ('gray', 400)] - The border color of the disabled switch.
+/// @prop {Map} border-on-color [color: ('gray', 900)] - The border color of the on-switch.
+/// @prop {Map} border-on-hover-color [color: ('gray', 900)] - The border color of the  on-switch.
+/// @prop {Map} label-disabled-color [color: ('gray', 400)] - The color of the switch label when the switch is disabled
+/// @prop {Map} error-color [color: ('gray', 700)] - The border and thumb color in invalid state.
+/// @requires $indigo-switch
+$dark-indigo-switch: extend(
+    $indigo-switch,
+    (
+        border-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        border-hover-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        border-disabled-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        border-on-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        border-on-hover-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        thumb-on-color: (
+            color: 'surface',
+        ),
+        thumb-off-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        track-on-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        track-off-color: transparent,
+        label-disabled-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        error-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+    )
+);

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

@@ -0,0 +1,65 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../light/tabs' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a base dark tabs schema.
+/// @type {Map}
+/// @prop {Map} item-hover-background [color: ('gray', 100, .5)] - The background used for the tabs on hover.
+/// @prop {Map} item-active-background [color: ('gray', 100, .5)] - The color used for the active/focused tab background.
+$base-dark-tabs: (
+    item-hover-background: (
+        color: (
+            'gray',
+            100,
+            0.5,
+        ),
+    ),
+    item-active-background: (
+        color: (
+            'gray',
+            100,
+            0.5,
+        ),
+    ),
+);
+
+/// Generates a dark tabs schema based on a mix of $light-tabs and $base-dark-tabs.
+/// @type {Map}
+/// @requires $light-tabs
+/// @requires $base-dark-tabs
+$dark-tabs: extend($light-tabs, $base-dark-tabs);
+
+/// Generates a dark fluent tabs schema based on a mix of $fluent-tabs and $base-dark-tabs.
+/// @type {Map}
+/// @requires $fluent-tabs
+/// @requires $base-dark-tabs
+$dark-fluent-tabs: extend($fluent-tabs, $base-dark-tabs);
+
+/// Generates a dark bootstrap tabs schema based on a mix of $bootstrap-tabs and $base-dark-tabs.
+/// @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,
+    (
+        item-hover-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo tabs schema.
+/// @type {Map}
+/// @requires $indigo-tabs
+$dark-indigo-tabs: extend($indigo-tabs);