igniteui-theming 1.4.2 → 1.4.3-beta.2

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

@@ -0,0 +1,132 @@
+@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,
+            0.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,
+                0.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,
+                0.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,
+                0.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,69 @@
+@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,
+                0.54,
+            ),
+        ),
+        color: (
+            color: (
+                'gray',
+                800,
+                0.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);