igniteui-theming 1.4.2 → 1.4.3-beta.2

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

@@ -0,0 +1,116 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../elevation/navbar' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light navbar schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('primary', 500)] - The navbar background color.
+/// @prop {Map} text-color [contrast-color: ('primary', 500)] - The navbar text color.
+/// @prop {Map} idle-icon-color [contrast-color: ('primary', 500)] - The navbar idle icon color.
+/// @prop {Map} hover-icon-color [contrast-color: ('primary', 500)] - The navbar hover icon color.
+/// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the navbar.
+/// @requires {Map} $default-elevation-navbar
+$light-navbar: extend(
+    $default-elevation-navbar,
+    (
+        background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        text-color: (
+            contrast-color: (
+                'primary',
+                500,
+            ),
+        ),
+        idle-icon-color: (
+            contrast-color: (
+                'primary',
+                500,
+            ),
+        ),
+        hover-icon-color: (
+            contrast-color: (
+                'primary',
+                500,
+            ),
+        ),
+    )
+);
+
+/// Generates a fluent navbar schema.
+/// @type {Map}
+/// @prop {Map} background [color: 'surface'] - The navbar background color.
+/// @prop {Map} text-color [color: ('gray', 900)] - The navbar text color.
+/// @prop {Map} idle-icon-color [color: ('primary', 500)] - The navbar idle icon color.
+/// @prop {Map} hover-icon-color [color: ('primary', 500)] - The navbar hover icon color.
+/// @requires {Map} $light-navbar
+$fluent-navbar: extend(
+    $light-navbar,
+    (
+        background: (
+            color: 'surface',
+        ),
+        text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        idle-icon-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        hover-icon-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+    )
+);
+
+/// Generates a bootstrap navbar schema.
+/// @type {Map}
+/// @prop {Map} background [color: 'surface'] - The navbar background color.
+/// @prop {Map} text-color [contrast-color: 'surface'] - The navbar text color.
+/// @prop {Map} idle-icon-color [contrast-color: 'surface'] - The navbar idle icon color.
+/// @prop {Map} hover-icon-color [contrast-color: 'surface'] - The navbar hover icon color.
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the navbar.
+/// @requires {Map} $light-navbar
+/// @requires {Map} $bootstrap-elevation-navbar
+$bootstrap-navbar: extend(
+    $light-navbar,
+    $bootstrap-elevation-navbar,
+    (
+        background: (
+            color: 'surface',
+        ),
+        text-color: (
+            contrast-color: 'surface',
+        ),
+        idle-icon-color: (
+            contrast-color: 'surface',
+        ),
+        hover-icon-color: (
+            contrast-color: 'surface',
+        ),
+    )
+);
+
+/// Generates an indigo navbar schema.
+/// @type {Map}
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the navbar.
+/// @requires {Map} $light-navbar
+/// @requires {Map} $indigo-elevation-navbar
+$indigo-navbar: extend($light-navbar, $indigo-elevation-navbar);

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

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

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

@@ -0,0 +1,129 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// @prop {Map} label-color [color: ('gray', 700)] - sets the color for the label.
+/// @prop {Number} symbol-size [rem(36px)] - the size of the symbols.
+/// @prop {Map} symbol-empty-color [color: ('gray', 900)] - sets the idle color for the symbol when it is a plane text.
+/// @prop {Map} symbol-full-color [color: ('primary')] - sets the color in selected state for the symbol when it is a plane text.
+/// @prop {Color} symbol-empty-filter [grayscale(100%) opacity(50%)] - the filter(s) used for the empty symbol.
+/// @prop {Color} symbol-full-filter [grayscale(50%)] - the filter(s) used for the filled symbol.
+/// @prop {Map} disabled-label-color [color: ('gray', 400)] - sets the color for the label in disabled state.
+/// @prop {Map} disabled-empty-symbols-color [color: ('gray', 400)] - sets the idle color for the symbol in disabled state when it is a plane text.
+/// @prop {Map} disabled-full-symbols-color [color: ('gray', 600)] - sets the color for the symbol in selected/disabled state when it is a plane text.
+/// Generates a light rating schema.
+/// @type {Map}
+$light-rating: (
+    label-color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+    symbol-size: null,
+    symbol-empty-color: (
+        color: (
+            'gray',
+            600,
+        ),
+    ),
+    symbol-full-color: (
+        color: (
+            'warn',
+        ),
+    ),
+    symbol-empty-filter: (
+        grayscale(1),
+    ),
+    symbol-full-filter: (
+        grayscale(0),
+    ),
+    disabled-label-color: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+    disabled-empty-symbol-color: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+    disabled-full-symbol-color: (
+        color: (
+            'warn',
+            500,
+            0.38,
+        ),
+    ),
+);
+
+/// Generates a fluent rating schema.
+/// @type {Map}
+/// @prop {Map} label-color [color: ('gray', 900)] - sets the color for the label.
+/// @prop {Map} disabled-idle-symbols-color [color: ('gray', 200)] - sets the idle color for the symbol in disabled state when it is a plane text.
+/// @prop {Map} disabled-selected-symbols-color [color: ('gray', 500)] - sets the color for the symbol in selected/disabled state when it is a plane text.
+/// @requires {Map} $light-rating
+$fluent-rating: extend(
+    $light-rating,
+    (
+        label-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        disabled-empty-symbols-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        disabled-full-symbols-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+    )
+);
+
+/// Generates a bootstrap rating schema.
+/// @type {Map}
+/// @prop {Map} label-color [color: ('gray', 900)] - sets the color for the label.
+/// @requires {Map} $light-rating
+$bootstrap-rating: extend(
+    $light-rating,
+    (
+        label-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo rating schema.
+/// @type {Map}
+/// @prop {Map} label-color [color: ('gray', 900)] - sets the color for the label.
+/// @requires {Map} $light-rating
+$indigo-rating: extend(
+    $light-rating,
+    (
+        label-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);

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

@@ -0,0 +1,176 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a light select schema.
+/// @type {Map}
+/// @prop {Map} toggle-button-background [color: ('gray', 300)] - The select toggle button background color.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 400, .3)] - The select toggle button background color when the select is focused.
+/// @prop {Map} toggle-button-foreground [color: ('gray', 700)] - The select toggle button foreground color.
+/// @prop {Map} toggle-button-foreground-focus [color: ('gray', 700)] - The select toggle button foreground color when the select is focused.
+/// @prop {Map} toggle-button-foreground-filled [color: ('gray', 900)] - The select toggle button foreground color when the select is focused.
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 300] - The select toggle button background color when the select is disabled.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 500)] - The select toggle button foreground color when the select is disabled.
+$light-select: (
+    toggle-button-background: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+    toggle-button-background-focus: (
+        color: (
+            'gray',
+            400,
+            0.3,
+        ),
+    ),
+    toggle-button-foreground: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+    toggle-button-foreground-focus: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+    toggle-button-foreground-filled: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+    toggle-button-background-disabled: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+    toggle-button-foreground-disabled: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+);
+
+/// Generates a fluent select schema.
+/// @type {Map}
+/// @prop {Map} toggle-button-background [color: ('gray', 100)] - The select toggle button background color.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 100)] - The select toggle button background color when the select is focused.
+/// @prop {Map} toggle-button-foreground-filled [color: ('gray', 700)] - The select toggle button foreground color when the select is focused.
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 100] - The select toggle button background color when the select is disabled.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The select toggle button foreground color when the select is disabled.
+/// @requires {Map} $light-select
+$fluent-select: extend(
+    $light-select,
+    (
+        toggle-button-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        toggle-button-background-focus: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        toggle-button-foreground-filled: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        toggle-button-background-disabled: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        toggle-button-foreground-disabled: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+    )
+);
+
+/// Generates a bootstrap select schema.
+/// @type {Map}
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 300] - The select toggle button background color when the select is disabled.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The select toggle button foreground color when the select is disabled.
+/// @prop {Map} toggle-button-foreground [color: ('gray', 800)] - The select toggle button foreground color.
+/// @prop {Map} toggle-button-foreground-focus [color: ('gray', 800)] - The select toggle button foreground color when the select is focused.
+/// @prop {Map} toggle-button-foreground-filled [color: ('gray', 800)] - The select toggle button foreground color when the select is focused.
+/// @requires {Map} $light-select
+$bootstrap-select: extend(
+    $light-select,
+    (
+        toggle-button-background-disabled: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        toggle-button-foreground-disabled: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        toggle-button-foreground: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        toggle-button-foreground--focus: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        toggle-button-foreground-filled: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo select schema.
+/// @type {Map}
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 100] - The select toggle button background color when the select is disabled.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 300)] - The select toggle button foreground color when the select is disabled.
+/// @requires {Map} $light-select
+$indigo-select: extend(
+    $light-select,
+    (
+        toggle-button-background-disabled: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        toggle-button-foreground-disabled: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);