igniteui-theming 1.4.2 → 1.4.3-beta.1

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

@@ -0,0 +1,150 @@
+@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,54 @@
+@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, .5)
+    ),
+    item-active-background: (
+        color: ('gray', 100, .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);

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

@@ -0,0 +1,95 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../light/tree' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a base dark tree schema.
+/// @type {Map}
+/// @prop {Map} background-active [color: ('gray', 100)] - The background color used for the active tree node.
+/// @prop {Map} foreground-active [color: ('gray', 900)] - The color used for the content in active state of the tree node.
+$base-dark-tree: (
+    background-active: (
+        color: ('gray', 100),
+    ),
+    foreground-active: (
+        color: ('gray', 900),
+    ),
+    hover-color: (
+        color: ('gray', 50, .1)
+    ),
+);
+
+/// Generates a dark tree schema.
+/// @type {Map}
+/// @requires $light-tree
+/// @requires $base-dark-tree
+$dark-tree: extend($light-tree, $base-dark-tree);
+
+/// Generates a dark fluent tree schema.
+/// @type {Map}
+/// @prop {Map} background-active [color: ('gray', 100)] - The background color used for the active tree node.
+/// @prop {Map} background-selected [color: ('gray', 100)] - The background color used for the selected tree node.
+/// @prop {Map} foreground-selected [color: ('gray', 900)] - The color used for the content of the selected tree node.
+/// @prop {Map} background-active-selected [color: ('gray', 200)] - The background color used for the active selected tree node.
+/// @prop {Map} foreground-active-selected [color: ('gray', 900)] - The color used for the content of the active selected tree node.
+/// @requires $fluent-tree
+/// @requires $base-dark-tree
+$dark-fluent-tree: extend(
+    $fluent-tree,
+    $base-dark-tree,
+    (
+        background-active: (
+            color: ('gray', 100)
+        ),
+        background-selected: (
+            color: ('gray', 100)
+        ),
+        foreground-selected: (
+            color: ('gray', 900)
+        ),
+        background-active-selected: (
+            color: ('gray', 200)
+        ),
+        foreground-active-selected: (
+            color: ('gray', 900)
+        ),
+        hover-color: (
+            color: ('gray', 200, .5)
+        ),
+    )
+);
+
+/// Generates a dark bootstrap tree schema.
+/// @type {Map}
+/// @requires $bootstrap-tree
+/// @requires $base-dark-tree
+$dark-bootstrap-tree: extend(
+    $bootstrap-tree,
+    $base-dark-tree,
+    (
+        hover-color: (
+            color: ('gray', 500, .3)
+        )
+    )
+);
+
+/// Generates a dark indigo tree schema.
+/// @type {Map}
+/// @requires $indigo-tree
+/// @requires $base-dark-tree
+$dark-indigo-tree: extend(
+    $indigo-tree,
+    $base-dark-tree,
+    (
+        hover-color: (
+            color: ('primary', 200, .5)
+        )
+    )
+);

package/sass/themes/schemas/components/elevation/_button.scss

@@ -0,0 +1,63 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// @type Map
+/// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
+/// @prop {Number} active-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
+$flat-elevation-button: (
+    resting-elevation: 0,
+    hover-elevation: 0,
+    focus-elevation: 0,
+    active-elevation: 0,
+);
+
+/// @type Map
+/// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [4] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} focus-elevation [8] - The elevation level, between 0-24, to be used for the focus state.
+/// @prop {Number} active-elevation [8] - The elevation level, between 0-24, to be used for the focus state.
+$material-raised-elevation: (
+    resting-elevation: 2,
+    hover-elevation: 4,
+    focus-elevation: 8,
+    active-elevation: 8,
+);
+
+/// @type Map
+/// @prop {Number} resting-elevation [6] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [12] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} focus-elevation [12] - The elevation level, between 0-24, to be used for the focus state.
+/// @prop {Number} active-elevation [12] - The elevation level, between 0-24, to be used for the focus state.
+$material-fab-elevation: (
+    resting-elevation: 6,
+    hover-elevation: 12,
+    focus-elevation: 12,
+    active-elevation: 12,
+);
+
+/// @type Map
+/// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
+/// @prop {Number} active-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
+$material-ib-elevation: (
+    resting-elevation: 0,
+    hover-elevation: 0,
+    focus-elevation: 0,
+    active-elevation: 0,
+);
+
+/// @type Map
+/// @see $flat-elevation-button
+/// @requires $flat-elevation-button
+$bootstrap-elevation-button: $flat-elevation-button;
+
+/// @type Map
+/// @see $flat-elevation-button
+/// @requires $flat-elevation-button
+$indigo-elevation-button: $flat-elevation-button;

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

@@ -0,0 +1,29 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// @type Map
+/// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the drop-down shadow.
+$default-elevation-drop-down: (
+    elevation: 8
+);
+
+/// @type Map
+/// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the drop-down shadow.
+$fluent-elevation-drop-down: (
+    elevation: 4
+);
+
+/// @type Map
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the drop-down shadow.
+$bootstrap-elevation-drop-down: (
+    elevation: 0
+);
+
+/// @type Map
+/// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the drop-down shadow.
+$indigo-elevation-drop-down: (
+    elevation: 3
+);

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

@@ -0,0 +1,37 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// @type Map
+/// @prop {Number} search-resting-elevation [1] - The elevation level, between 0-24, to be used for the resting state of the search input.
+/// @prop {Number} search-hover-elevation [2] - The elevation level, between 0-24, to be used for the hover state of the search input.
+/// @prop {Number} search-disabled-elevation [0] - The elevation level, between 0-24, to be used for the disabled state of the search input.
+$default-elevation-input-group: (
+    search-resting-elevation: 1,
+    search-hover-elevation: 2,
+    search-disabled-elevation: 0,
+);
+
+/// @type Map
+/// @prop {Number} search-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state of the search input.
+/// @prop {Number} search-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state of the search input.
+/// @prop {Number} search-disabled-elevation [0] - The elevation level, between 0-24, to be used for the disabled state of the search input.
+$fluent-elevation-input-group: (
+    search-resting-elevation: 0,
+    search-hover-elevation: 0,
+    search-disabled-elevation: 0,
+);
+
+/// @type Map
+/// @prop {Number} search-resting-elevation [1] - The elevation level, between 0-24, to be used for the resting state of the search input.
+/// @prop {Number} search-hover-elevation [1] - The elevation level, between 0-24, to be used for the hover state of the search input.
+/// @prop {Number} search-disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state of the search input.
+$indigo-elevation-input-group: (
+    search-resting-elevation: 1,
+    search-hover-elevation: 1,
+    search-disabled-elevation: 1,
+);

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

@@ -0,0 +1,23 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// @type Map
+/// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the navbar.
+$default-elevation-navbar: (
+    elevation: 4
+);
+
+/// @type Map
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the navbar.
+$bootstrap-elevation-navbar: (
+    elevation: 0
+);
+
+/// @type Map
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the navbar.
+$indigo-elevation-navbar: (
+    elevation: 0
+);

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

@@ -0,0 +1,15 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// @type Map
+/// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [3] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state.
+$default-elevation-switch: (
+    resting-elevation: 2,
+    hover-elevation: 3,
+    disabled-elevation: 1
+);

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

@@ -0,0 +1,55 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light avatar schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('gray', 400, .54)]- The background color of the avatar.
+/// @prop {Map} color [color: ('gray', 800, .96)] - The text/icon color of the avatar.
+/// @prop {Number} border-radius [0] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} size - The size of the avatar.
+$light-avatar: extend(
+    (
+        background: (
+            color: ('gray', 400, .54)
+        ),
+        color: (
+            color: ('gray', 800, .96)
+        ),
+        border-radius: rem(0)
+    )
+);
+
+/// Generates a fluent avatar schema.
+/// @type {Map}
+/// @requires {Map} $light-avatar
+$fluent-avatar: extend($light-avatar);
+
+/// Generates a bootstrap avatar schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('gray', 400)]- The background color of the avatar.
+/// @prop {Map} color [contrast-color: ('gray', 400)] - The text/icon color of the avatar.
+/// @prop {Number} border-radius [4px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-avatar
+$bootstrap-avatar: extend(
+    $light-avatar,
+    (
+        background: (
+            color: ('gray', 400)
+        ),
+        color: (
+            contrast-color: ('gray', 400)
+        ),
+        border-radius: rem(4px)
+    )
+);
+
+/// Generates an indigo avatar schema.
+/// @type {Map}
+/// @requires {Map} $light-avatar
+$indigo-avatar: extend($light-avatar);