igniteui-theming 1.4.2 → 1.4.3-beta.1

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

@@ -0,0 +1,83 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../light/drop-down' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a base dark drop-down schema.
+/// @type {Map}
+/// @prop {Map} border-color [color: ('gray', 100)] - The border color used for drop-down component.
+$base-dark-drop-down: (
+    border-color: (
+        color: ('gray', 100),
+    ),
+);
+
+/// Generates a dark drop-down schema.
+/// @type {Map}
+/// @requires $light-drop-down
+/// @requires $base-dark-drop-down
+$dark-drop-down: extend($light-drop-down, $base-dark-drop-down);
+
+/// Generates a dark fluent drop-down schema.
+/// @type {Map}
+/// @prop {Map} selected-item-text-color [contrast-color: 'surface'] - The drop-down selected item text color.
+/// @prop {Map} selected-hover-item-text-color [contrast-color: 'surface'] - The drop-down selected item hover text color.
+/// @prop {Map} selected-focus-item-text-color [contrast-color: 'surface'] - The drop-down selected item focus text color.
+/// @requires $fluent-drop-down
+/// @requires $base-dark-drop-down
+$dark-fluent-drop-down: extend(
+    $fluent-drop-down,
+    $base-dark-drop-down,
+    (
+        selected-item-text-color: (
+            contrast-color: 'surface'
+        ),
+        selected-hover-item-text-color: (
+            contrast-color: 'surface'
+        ),
+        selected-focus-item-text-color: (
+            contrast-color: 'surface'
+        ),
+    )
+);
+
+/// Generates a dark bootstrap drop-down schema.
+/// @type {Map}
+/// @prop {Map} item-text-color [contrast-color: 'surface'] - The drop-down text color.
+/// @prop {Map} hover-item-text-color [contrast-color: 'surface'] - The drop-down hover text color.
+/// @requires $bootstrap-drop-down
+/// @requires $base-dark-drop-down
+$dark-bootstrap-drop-down: extend(
+    $bootstrap-drop-down,
+    $base-dark-drop-down,
+    (
+        item-text-color: (
+            contrast-color: 'surface'
+        ),
+        hover-item-text-color: (
+            contrast-color: 'surface'
+        ),
+    )
+);
+
+/// Generates a dark indigo drop-down schema.
+/// @type {Map}
+/// @prop {Map} header-text-color [contrast-color: 'surface'] - The drop-down header text color.
+/// @requires $indigo-drop-down
+/// @requires $base-dark-drop-down
+$dark-indigo-drop-down: extend(
+    $indigo-drop-down,
+    $base-dark-drop-down,
+    (
+        header-text-color: (
+            contrast-color: 'surface'
+        ),
+    )
+);

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

@@ -0,0 +1,37 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../light/icon' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark icon schema.
+/// @type {Map}
+/// @requires $light-icon
+$dark-icon: $light-icon;
+
+/// Generates a dark fluent icon schema.
+/// @type {Map}
+/// @property {Map} disabled-color [color: ('gray' 500)] - The icon color.
+/// @requires $light-icon
+$dark-fluent-icon: extend(
+    $fluent-icon,
+    (
+        disabled-color: (
+            color: ('gray' 500)
+        )
+    )
+);
+
+/// Generates a dark bootstrap icon schema.
+/// @type {Map}
+/// @requires $light-icon
+$dark-bootstrap-icon: $bootstrap-icon;
+
+/// Generates a dark indigo icon schema.
+/// @type {Map}
+/// @requires $light-icon
+$dark-indigo-icon: $indigo-icon;

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

@@ -0,0 +1,120 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+@use './avatar' as *;
+@use './button' as *;
+@use './icon' as *;
+@use './navbar' as *;
+@use './input-group' as *;
+@use './checkbox' as *;
+@use './switch' as *;
+@use './radio' as *;
+@use './tabs' as *;
+@use './rating' as *;
+@use './select' as *;
+@use './slider' as *;
+@use './drop-down' as *;
+@use './combo' as *;
+@use './tree' as *;
+
+/// Used to create material component themes.
+/// Use in combination with dark palettes.
+/// @type Map
+$dark-material-schema: (
+    avatar: $dark-avatar,
+    button: $dark-button,
+    icon: $dark-icon,
+    navbar: $dark-navbar,
+    input-group: $dark-input-group,
+    checkbox: $dark-checkbox,
+    switch: $dark-switch,
+    radio: $dark-radio,
+    tabs: $dark-tabs,
+    rating: $dark-rating,
+    select: $dark-select,
+    slider: $dark-slider,
+    dropdown: $dark-drop-down,
+    combo: $dark-combo,
+    tree: $dark-tree,
+    _meta: (
+        theme: 'material',
+        variant: 'dark',
+    ),
+);
+
+/// Used to create fluent component themes.
+/// Use in combination with dark palettes.
+/// @type Map
+$dark-fluent-schema: (
+    avatar: $dark-fluent-avatar,
+    button: $dark-fluent-button,
+    icon: $dark-fluent-icon,
+    navbar: $dark-fluent-navbar,
+    input-group: $dark-fluent-input-group,
+    checkbox: $dark-fluent-checkbox,
+    radio: $dark-fluent-radio,
+    tabs: $dark-fluent-tabs,
+    rating: $dark-fluent-rating,
+    select: $dark-fluent-select,
+    slider: $dark-fluent-slider,
+    dropdown: $dark-fluent-drop-down,
+    combo: $dark-fluent-combo,
+    tree: $dark-fluent-tree,
+    _meta: (
+        theme: 'fluent',
+        variant: 'dark',
+    ),
+);
+
+/// Used to create bootstrap component themes.
+/// Use in combination with dark palettes.
+/// @type Map
+$dark-bootstrap-schema: (
+    avatar: $dark-bootstrap-avatar,
+    button: $dark-bootstrap-button,
+    icon: $dark-bootstrap-icon,
+    navbar: $dark-bootstrap-navbar,
+    input-group: $dark-bootstrap-input-group,
+    checkbox: $dark-bootstrap-checkbox,
+    switch: $dark-bootstrap-switch,
+    radio: $dark-bootstrap-radio,
+    tabs: $dark-bootstrap-tabs,
+    rating: $dark-bootstrap-rating,
+    select: $dark-bootstrap-select,
+    slider: $dark-bootstrap-slider,
+    dropdown: $dark-bootstrap-drop-down,
+    combo: $dark-bootstrap-combo,
+    tree: $dark-bootstrap-tree,
+    _meta: (
+        theme: 'bootstrap',
+        variant: 'dark',
+    ),
+);
+
+/// Used to create indigo component themes.
+/// Use in combination with dark palettes.
+/// @type Map
+$dark-indigo-schema: (
+    avatar: $dark-indigo-avatar,
+    button: $dark-indigo-button,
+    icon: $dark-indigo-icon,
+    navbar: $dark-indigo-navbar,
+    input-group: $dark-indigo-input-group,
+    checkbox: $dark-indigo-checkbox,
+    switch: $dark-indigo-switch,
+    radio: $dark-indigo-radio,
+    tabs: $dark-indigo-tabs,
+    rating: $dark-indigo-rating,
+    select: $dark-indigo-select,
+    slider: $dark-indigo-slider,
+    dropdown: $dark-indigo-drop-down,
+    combo: $dark-indigo-combo,
+    tree: $dark-indigo-tree,
+    _meta: (
+        theme: 'indigo-design',
+        variant: 'dark',
+    ),
+);

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

@@ -0,0 +1,120 @@
+@use '../../../../utils/map' as *;
+@use '../light/input-group' as *;
+
+/* stylelint-disable max-line-length */
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a base dark input-group schema.
+/// @type {Map}
+$base-dark-input-group: $light-input-group;
+
+/// Generates a dark input-group schema based on a mix of $light-input-group and $base-dark-input-group..
+/// @type {Map}
+/// @prop {Map} box-background-focus [color: ('gray', 100)] - The background color of an input group of type box on focus.
+/// @requires $base-dark-input-group
+$dark-input-group: extend(
+    $base-dark-input-group,
+    (
+        box-background-focus: (
+            color: ('gray', 100)
+        ),
+        hover-bottom-line-color: (
+            color: ('gray', 800)
+        ),
+    )
+);
+
+/// Generates a dark fluent input-group schema based on a mix of $fluent-input-group and $base-dark-input-group.
+/// @type {Map}
+/// @prop {Map} input-prefix-background [color: ('gray', 100)] - The background color of an input prefix of type line, box and border.
+/// @prop {Map} input-suffix-background [color: ('gray', 100)] - The background color of an input sufix of type line, box and border.
+/// @prop {Map} box-background [color: ('gray', 100)] - The background color of an input group of type box.
+/// @prop {Map} border-color [color: ('gray', 500)] - The border color for input groups of type border and fluent.
+/// @prop {Map} hover-border-color [color: ('gray', 700)] - The hover input border for input groups of type border and fluent.
+/// @prop {Map} focused-border-color [color: ('gray', 500)] - The focused input border color for input groups of type border and fluent.
+/// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled border color for input groups of type border and fluent.
+/// @requires $fluent-input-group
+/// @requires $base-dark-input-group
+$dark-fluent-input-group: extend(
+    $base-dark-input-group,
+    $fluent-input-group,
+    (
+        input-prefix-background: (
+            color: ('gray', 100)
+        ),
+        input-suffix-background: (
+            color: ('gray', 100)
+        ),
+        box-background: (
+            color: ('gray', 100),
+        ),
+        border-color: (
+            color: ('gray', 500)
+        ),
+        hover-border-color: (
+            color: ('gray', 700)
+        ),
+        focused-border-color: (
+            color: ('gray', 500)
+        ),
+        disabled-border-color: (
+            color: ('gray', 100)
+        ),
+    )
+);
+
+/// Generates a dark bootstrap input-group schema based on a mix of $bootstrap-input-group and $base-dark-input-group.
+/// @type {Map}
+/// @requires $bootstrap-input-group
+/// @requires $base-dark-input-group
+$dark-bootstrap-input-group: extend(
+    $base-dark-input-group,
+    $bootstrap-input-group,
+);
+
+/// Generates an dark indigo input-group schema
+/// @type {Map}
+/// @prop {Map} success-secondary-color [color: ('success', 500, .7)] - The success color used in the valid state.
+/// @prop {Map} warning-secondary-color [color: ('warn', 500, .7)] - The warning color used in the warning state.
+/// @prop {Map} error-secondary-color [color: ('error', 500, .7)] - The error color used in the error state.
+/// @prop {Map} $idle-secondary-color [contrast-color: ('surface')] - The label color in the idle state.
+/// @prop {Map} $filled-secondary-color [color: ('gray', 900)] - The label color in the filled state.
+/// @prop {Map} $focused-secondary-color [color: ('gray', 900)] - The label color in the focused state.
+/// @prop {Map} placeholder-color [color: ('gray', 400)] - The placeholder color of an input group.
+/// @prop {Map} disabled-placeholder-color [color: ('gray', 400)] - The disabled placeholder color of an input group.
+/// @requires $indigo-input-group
+$dark-indigo-input-group: extend(
+    $indigo-input-group,
+    (
+        search-background: transparent,
+        success-secondary-color: (
+            color: ('success', 500, .7)
+        ),
+        warning-secondary-color: (
+            color: ('warn', 500, .7)
+        ),
+        error-secondary-color: (
+            color: ('error', 500, .7),
+        ),
+        idle-secondary-color: (
+            contrast-color: ('surface')
+        ),
+        filled-secondary-color: (
+            color: ('gray', 900)
+        ),
+        focused-secondary-color: (
+            color: ('gray', 900)
+        ),
+        placeholder-color: (
+            color: ('gray', 400)
+        ),
+        disabled-placeholder-color: (
+            color: ('gray', 400)
+        ),
+    )
+);

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

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

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

@@ -0,0 +1,102 @@
+@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,47 @@
+@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,95 @@
+@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, .48),
+        ),
+        base-track-hover-color: (
+            color: ('secondary', 500, .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)
+        ),
+    )
+);