igniteui-theming 1.4.5 → 1.4.6

package/sass/themes/schemas/components/dark/_time-picker.scss

@@ -0,0 +1,54 @@
+@use '../../../../utils/map' as *;
+@use '../light/time-picker' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark time-picker schema.
+/// @type {Map}
+/// @requires $light-time-picker
+$dark-time-picker: $light-time-picker;
+
+/// Generates a dark fluent time-picker schema.
+/// @type {Map}
+/// @requires $fluent-time-picker
+$dark-fluent-time-picker: $fluent-time-picker;
+
+/// Generates a dark bootstrap time-picker schema.
+/// @type {Map}
+/// @requires $bootstrap-time-picker
+$dark-bootstrap-time-picker: $bootstrap-time-picker;
+
+/// Generates a dark indigo time-picker schema.
+/// @type {Map}
+/// @prop {Map} text-color [contrast-color: ('surface')] - The text color of an open time picker.
+/// @prop {Map} selected-text-color [color: ('primary', 300)] -  The text color of a selected item in time picker.
+/// @prop {Map} hover-text-color [color: ('primary', 300)] - The hover text color of an open time picker.
+/// @requires $indigo-time-picker
+$dark-indigo-time-picker: extend(
+    $indigo-time-picker,
+    (
+        text-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        hover-text-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        selected-text-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+    )
+);

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

@@ -0,0 +1,67 @@
+@use '../../../../utils/map' as *;
+@use '../light/toast' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark base toast schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('gray', 500, .9)] - The background color used for the toast.
+/// @prop {Map} text-color [contrast-color: ('gray', 500)] - The text-color used for the toast.
+$dark-base-toast: (
+    background: (
+        color: (
+            'gray',
+            500,
+            0.9,
+        ),
+    ),
+
+    text-color: (
+        contrast-color: (
+            'gray',
+            500,
+        ),
+    ),
+);
+
+/// Generates a dark toast schema.
+/// @type {Map}
+/// @requires $light-toast
+$dark-toast: extend($light-toast, $dark-base-toast);
+
+/// Generates a dark fluent toast schema.
+/// @type {Map}
+/// @requires $fluent-toast
+$dark-fluent-toast: extend($fluent-toast, $dark-base-toast);
+
+/// Generates a dark bootstrap toast schema.
+/// @type {Map}
+/// @prop {Map} background [contrast-color: ('surface')] - The background color used for the toast.
+/// @prop {Map} text-color [contrast-color: ('gray', 600)] - The text-color used for the toast.
+/// @requires $bootstrap-toast
+$dark-bootstrap-toast: extend(
+    $bootstrap-toast,
+    (
+        background: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        text-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo toast schema.
+/// @type {Map}
+/// @requires $indigo-toast
+$dark-indigo-toast: extend($indigo-toast, $dark-base-toast);

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

@@ -0,0 +1,44 @@
+@use '../../../../utils/map' as *;
+@use '../light/tooltip' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark tooltip schema.
+/// @type {Map}
+/// @requires $light-tooltip
+$dark-tooltip: $light-tooltip;
+
+/// Generates a dark fluent tooltip schema.
+/// @type {Map}
+/// @requires $fluent-tooltip
+$dark-fluent-tooltip: $fluent-tooltip;
+
+/// Generates a dark bootstrap tooltip schema.
+/// @type {Map}
+/// @requires $bootstrap-tooltip
+$dark-bootstrap-tooltip: $bootstrap-tooltip;
+
+/// Generates a dark indigo tooltip schema.
+/// @type {Map}
+///
+/// @prop {Map} background [contrast-color: ('surface')] - The background color of the tooltip.
+/// @prop {Map} text-color [text-color: (color: 'surface')] - The text color of the tooltip.
+/// @requires $indigo-tooltip
+$dark-indigo-tooltip: extend(
+    $indigo-tooltip,
+    (
+        background: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        text-color: (
+            color: 'surface',
+        ),
+    )
+);

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

@@ -0,0 +1,48 @@
+@use '../../../../utils/map' as *;
+@use '../light/watermark' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark watermark schema.
+/// @type {Map}
+/// @requires $light-watermark
+$dark-watermark: extend(
+    $light-watermark,
+    (
+        image-opacity: 15%,
+    )
+);
+
+/// Generates a dark fluent watermark schema.
+/// @type {Map}
+/// @requires $fluent-watermark
+$dark-fluent-watermark: extend(
+    $fluent-watermark,
+    (
+        image-opacity: 15%,
+    )
+);
+
+/// Generates a dark bootstrap watermark schema.
+/// @type {Map}
+/// @requires $bootstrap-watermark
+$dark-bootstrap-watermark: extend(
+    $bootstrap-watermark,
+    (
+        image-opacity: 15%,
+    )
+);
+
+/// Generates a dark indigo watermark schema.
+/// @type {Map}
+/// @requires $bootstrap-watermark
+$dark-indigo-watermark: extend(
+    $indigo-watermark,
+    (
+        image-opacity: 15%,
+    )
+);

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

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

package/sass/themes/schemas/components/elevation/_bottom-nav.scss

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

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

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

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

@@ -0,0 +1,37 @@
+////
+/// @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 [8] - The elevation level, between 0-24, to be used for the hover state.
+$default-elevation-card: (
+    resting-elevation: 2,
+    hover-elevation: 8,
+);
+
+/// @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.
+$flat-card: (
+    resting-elevation: 0,
+    hover-elevation: 0,
+);
+
+/// @type Map
+/// @requires {Map} $flat-card
+$fluent-elevation-card: $flat-card;
+
+/// @type Map
+/// @requires {Map} $flat-card
+$bootstrap-elevation-card: $flat-card;
+
+/// @type Map
+/// @prop {Number} resting-elevation [4] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [6] - The elevation level, between 0-24, to be used for the hover state.
+$indigo-elevation-card: (
+    resting-elevation: 4,
+    hover-elevation: 6,
+);

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

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

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

@@ -0,0 +1,29 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// @type Map
+/// @prop {Number} ghost-elevation [8] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
+$default-elevation-chip: (
+    ghost-elevation: 8,
+);
+
+/// @type Map
+/// @prop {Number} ghost-elevation [2] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
+$fluent-elevation-chip: (
+    ghost-elevation: 2,
+);
+
+/// @type Map
+/// @prop {Number} ghost-elevation [0] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
+$bootstrap-elevation-chip: (
+    ghost-elevation: 0,
+);
+
+/// @type Map
+/// @prop {Number} ghost-elevation [0] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
+$indigo-elevation-chip: (
+    ghost-elevation: 1,
+);

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

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

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

@@ -0,0 +1,21 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// @type Map
+/// @prop {number} grid-elevation [2] - The elevation level, between 0-24, to be used for the grid.
+/// @prop {number} drag-elevation [5] - The elevation level, between 0-24, to be used for movable elements (ex. column header).
+$default-elevation-grid: (
+    grid-elevation: 2,
+    drag-elevation: 5,
+);
+
+/// @type Map
+/// @prop {number} grid-elevation [0] - The elevation level, between 0-24, to be used for the grid.
+/// @prop {number} drag-elevation [1] - The elevation level, between 0-24, to be used for movable elements (ex. column header).
+$fluent-elevation-grid: (
+    grid-elevation: 0,
+    drag-elevation: 1,
+);

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

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

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

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

package/sass/themes/schemas/components/elevation/_time-picker.scss

@@ -0,0 +1,13 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// @type Map
+/// @prop {Number} modal-elevation [24] - The elevation level, between 0-24, to be used for the time picker in modal mode.
+/// @prop {Number} dropdown-elevation [8] - The elevation level, between 0-24, to be used for the time picker in dropdown mode.
+$default-elevation-time-picker: (
+    modal-elevation: 24,
+    dropdown-elevation: 8,
+);

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

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

package/sass/themes/schemas/components/light/_action-strip.scss

@@ -0,0 +1,89 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light action-strip schema.
+/// @type {Map}
+/// @prop {Color} icon-color ["'currentColor'"] - The color used for the actions icons.
+/// @prop {Map} background [color: ('gray', 100, .38)] - The color used for the action strip component content background.
+/// @prop {Map} actions-background [color: ('gray', 200)] - The color used for actions background.
+/// @prop {Map} delete-action [color: ('error')] - The color used for the delete icon in action strip component.
+/// @prop {Number} actions-border-radius [24px] - The border radius used for action strip actions container. Can be a fraction between 0 and 1, pixels, or percent.
+$light-action-strip: extend(
+    (
+        actions-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        background: (
+            color: (
+                'gray',
+                100,
+                0.38,
+            ),
+        ),
+
+        icon-color: "'currentColor'",
+
+        delete-action: (
+            color: (
+                'error',
+            ),
+        ),
+
+        actions-border-radius: rem(24px),
+    )
+);
+
+/// Generates a fluent action strip schema.
+/// @type {Map}
+/// @prop {Number} actions-border-radius [24px] - The border radius used for action strip actions container. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-action-strip
+$fluent-action-strip: extend(
+    $light-action-strip,
+    (
+        actions-border-radius: rem(0),
+    )
+);
+
+/// Generates a bootstrap action strip schema.
+/// @type {Map}
+/// @prop {Number} actions-border-radius [4px] - The border radius used for action strip actions container. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-action-strip
+$bootstrap-action-strip: extend(
+    $light-action-strip,
+    (
+        actions-border-radius: rem(4px),
+    )
+);
+
+/// Generates an indigo action strip schema.
+/// @type {Map}
+/// @prop {Map} icon-color [contrast-color: 'primary'] - The color used for the actions icons.
+/// @prop {Map} actions-background [color: ('primary')] - The color used for actions background.
+/// @prop {Number} actions-border-radius [3px] - The border radius used for action strip actions container. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-action-strip
+$indigo-action-strip: extend(
+    $light-action-strip,
+    (
+        actions-background: (
+            color: (
+                'primary',
+            ),
+        ),
+
+        icon-color: (
+            contrast-color: 'primary',
+        ),
+
+        actions-border-radius: rem(3px),
+    )
+);

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

@@ -34,7 +34,7 @@ $light-avatar: (
 /// Generates a fluent avatar schema.
 /// @type {Map}
 /// @requires {Map} $light-avatar
-$fluent-avatar: extend($light-avatar);
+$fluent-avatar: $light-avatar;
 
 /// Generates a bootstrap avatar schema.
 /// @type {Map}

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

@@ -0,0 +1,82 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../elevation/badge' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light badge schema.
+/// @type {Map}
+/// @prop {Map} icon-color [contrast-color: ('primary', 500)] - The icon color used.
+/// @prop {Map} text-color [contrast-color: ('primary', 500)] - The text color used.
+/// @prop {Map} border-color [color: ('gray', 50)] - The border color used.
+/// @prop {Map} background-color [color: ('primary', 500)] - The background color used.
+/// @prop {Number} border-width [0] - The border width of the badge component.
+/// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the badge shadow.
+/// @prop {Number} border-radius [0] - The border radius used for badge. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $default-elevation-badge
+$light-badge: extend(
+    $default-elevation-badge,
+    (
+        icon-color: (
+            contrast-color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        text-color: (
+            contrast-color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        border-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        background-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        border-width: 0,
+
+        border-radius: 0,
+    )
+);
+
+/// Generates a fluent badge schema.
+/// @type {Map}
+/// @requires {Map} $light-badge
+$fluent-badge: $light-badge;
+
+/// Generates a bootstrap badge schema.
+/// @type {Map}
+/// @prop {Number} border-width [1px] - The border width of the badge component.
+/// @prop {Number} border-radius [4px] - The border radius used for badge. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-badge
+/// @requires {Map} $bootstrap-elevation-badge
+$bootstrap-badge: extend(
+    $light-badge,
+    $bootstrap-elevation-badge,
+    (
+        border-width: 1px,
+
+        border-radius: rem(4px),
+    )
+);
+
+/// Generates an indigo badge schema.
+/// @type {Map}
+/// @requires {Map} $light-badge
+$indigo-badge: $light-badge;