igniteui-theming 1.4.5 → 1.4.6

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

@@ -0,0 +1,72 @@
+@use '../../../../utils/map' as *;
+@use '../light/highlight' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a base dark grid-toolbar schema.
+/// @property {Map} resting-background [color: ('gray', 200)] - The background color used for the highlight in its resting state.
+/// @property {Map} resting-color [contrast-color: ('gray', 200)] - The icon color used for the highlight in its resting state.
+/// @type {Map}
+$dark-base-highlight: (
+    resting-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
+    resting-color: (
+        contrast-color: (
+            'gray',
+            200,
+        ),
+    ),
+);
+
+/// Generates a dark highlight schema.
+/// @type {Map}
+/// @requires $light-highlight
+/// @requires $dark-base-highlight
+$dark-highlight: extend($light-highlight, $dark-base-highlight);
+
+/// Generates a dark fluent highlight schema.
+/// @type {Map}
+/// @requires $fluent-highlight
+/// @requires $dark-base-highlight
+$dark-fluent-highlight: extend($fluent-highlight, $dark-base-highlight);
+
+/// Generates a dark bootstrap highlight schema.
+/// @type {Map}
+/// @property {Map} active-background [color: ('primary', A100)] - The background color used for the highlight in its active state.
+/// @property {Map} active-color [contrast-color: ('primary', A100) - The text color used for the highlight in its active state.
+/// @requires $bootstrap-highlight
+/// @requires $dark-base-highlight
+$dark-bootstrap-highlight: extend(
+    $bootstrap-highlight,
+    $dark-base-highlight,
+    (
+        active-background: (
+            color: (
+                'primary',
+                'A100',
+            ),
+        ),
+
+        active-color: (
+            contrast-color: (
+                'primary',
+                'A100',
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo highlight schema.
+/// @type {Map}
+/// @requires $indigo-highlight
+/// @requires $dark-base-highlight
+$dark-indigo-highlight: extend($indigo-highlight, $dark-base-highlight);

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

@@ -4,41 +4,114 @@
 /// @access public
 ////
 
+@use './action-strip' as *;
 @use './avatar' as *;
+@use './badge' as *;
+@use './banner' as *;
+@use './bottom-nav' as *;
 @use './button' as *;
+@use './button-group' as *;
+@use './calendar' as *;
+@use './card' as *;
+@use './carousel' as *;
+@use './checkbox' as *;
+@use './chip' as *;
+@use './column-actions' as *;
+@use './combo' as *;
+@use './date-range-picker' as *;
+@use './dialog' as *;
+@use './divider' as *;
+@use './dock-manager' as *;
+@use './drop-down' as *;
+@use './expansion-panel' as *;
+@use './grid' as *;
+@use './grid-filtering' as *;
+@use './grid-summary' as *;
+@use './grid-toolbar' as *;
+@use './highlight' as *;
 @use './icon' as *;
-@use './navbar' as *;
 @use './input-group' as *;
-@use './checkbox' as *;
-@use './switch' as *;
+@use './list' as *;
+@use './navbar' as *;
+@use './navdrawer' as *;
+@use './overlay' as *;
+@use './pagination' as *;
+@use './pivot-data-selector' as *;
+@use './progress' as *;
+@use './query-builder' as *;
 @use './radio' as *;
-@use './tabs' as *;
 @use './rating' as *;
+@use './ripple' as *;
+@use './scrollbar' as *;
 @use './select' as *;
 @use './slider' as *;
-@use './drop-down' as *;
-@use './combo' as *;
+@use './snackbar' as *;
+@use './splitter' as *;
+@use './stepper' as *;
+@use './switch' as *;
+@use './tabs' as *;
+@use './time-picker' as *;
+@use './toast' as *;
+@use './tooltip' as *;
 @use './tree' as *;
+@use './watermark' as *;
 
 /// Used to create material component themes.
 /// Use in combination with dark palettes.
 /// @type Map
 $dark-material-schema: (
+    action-strip: $dark-action-strip,
     avatar: $dark-avatar,
+    badge: $dark-badge,
+    banner: $dark-banner,
+    bottom-nav: $dark-bottom-nav,
     button: $dark-button,
+    button-group: $dark-button-group,
+    calendar: $dark-calendar,
+    card: $dark-card,
+    carousel: $dark-carousel,
+    checkbox: $dark-checkbox,
+    chip: $dark-chip,
+    column-actions: $dark-column-actions,
+    combo: $dark-combo,
+    date-range: $dark-date-range-picker,
+    dialog: $dark-dialog,
+    divider: $dark-divider,
+    dockmanager: $dark-dock-manager,
+    drop-down: $dark-drop-down,
+    expansion-panel: $dark-expansion-panel,
+    grid: $dark-grid,
+    grid-filtering: $dark-grid-filtering,
+    grid-summary: $dark-grid-summary,
+    grid-toolbar: $dark-grid-toolbar,
+    highlight: $dark-highlight,
     icon: $dark-icon,
-    navbar: $dark-navbar,
     input-group: $dark-input-group,
-    checkbox: $dark-checkbox,
-    switch: $dark-switch,
+    list: $dark-list,
+    navbar: $dark-navbar,
+    nav-drawer: $dark-navdrawer,
+    overlay: $dark-overlay,
+    paginator: $dark-pagination,
+    pivot-data-selector: $dark-pivot-data-selector,
+    linear-bar: $dark-progress-linear,
+    circular-bar: $dark-progress-circular,
+    query-builder: $dark-query-builder,
     radio: $dark-radio,
-    tabs: $dark-tabs,
     rating: $dark-rating,
+    ripple: $dark-ripple,
+    scrollbar: $dark-scrollbar,
     select: $dark-select,
     slider: $dark-slider,
-    dropdown: $dark-drop-down,
-    combo: $dark-combo,
+    snackbar: $dark-snackbar,
+    splitter: $dark-splitter,
+    stepper: $dark-stepper,
+    switch: $dark-switch,
+    tabs: $dark-tabs,
+    time-picker: $dark-time-picker,
+    toast: $dark-toast,
+    tooltip: $dark-tooltip,
     tree: $dark-tree,
+    watermark: $dark-watermark,
     _meta: (
         theme: 'material',
         variant: 'dark',
@@ -49,21 +122,58 @@ $dark-material-schema: (
 /// Use in combination with dark palettes.
 /// @type Map
 $dark-fluent-schema: (
+    action-strip: $dark-fluent-action-strip,
     avatar: $dark-fluent-avatar,
+    badge: $dark-fluent-badge,
+    banner: $dark-fluent-banner,
+    bottom-nav: $dark-fluent-bottom-nav,
     button: $dark-fluent-button,
+    button-group: $dark-fluent-button-group,
+    calendar: $dark-fluent-calendar,
+    card: $dark-fluent-card,
+    carousel: $dark-fluent-carousel,
+    checkbox: $dark-fluent-checkbox,
+    chip: $dark-fluent-chip,
+    column-actions: $dark-fluent-column-actions,
+    combo: $dark-fluent-combo,
+    date-range: $dark-fluent-date-range-picker,
+    dialog: $dark-fluent-dialog,
+    divider: $dark-fluent-divider,
+    dockmanager: $dark-fluent-dock-manager,
+    drop-down: $dark-fluent-drop-down,
+    expansion-panel: $dark-fluent-expansion-panel,
+    grid: $dark-fluent-grid,
+    grid-filtering: $dark-fluent-grid-filtering,
+    grid-summary: $dark-fluent-grid-summary,
+    grid-toolbar: $dark-fluent-grid-toolbar,
+    highlight: $dark-fluent-highlight,
     icon: $dark-fluent-icon,
-    navbar: $dark-fluent-navbar,
     input-group: $dark-fluent-input-group,
-    checkbox: $dark-fluent-checkbox,
-    switch: $dark-fluent-switch,
+    list: $dark-fluent-list,
+    navbar: $dark-fluent-navbar,
+    nav-drawer: $dark-fluent-navdrawer,
+    overlay: $dark-fluent-overlay,
+    paginator: $dark-fluent-pagination,
+    pivot-data-selector: $dark-fluent-pivot-data-selector,
+    linear-bar: $dark-fluent-progress-linear,
+    circular-bar: $dark-fluent-progress-circular,
+    query-builder: $dark-fluent-query-builder,
     radio: $dark-fluent-radio,
-    tabs: $dark-fluent-tabs,
     rating: $dark-fluent-rating,
+    ripple: $dark-fluent-ripple,
+    scrollbar: $dark-fluent-scrollbar,
     select: $dark-fluent-select,
     slider: $dark-fluent-slider,
-    dropdown: $dark-fluent-drop-down,
-    combo: $dark-fluent-combo,
+    snackbar: $dark-fluent-snackbar,
+    splitter: $dark-fluent-splitter,
+    stepper: $dark-fluent-stepper,
+    switch: $dark-fluent-switch,
+    tabs: $dark-fluent-tabs,
+    time-picker: $dark-fluent-time-picker,
+    toast: $dark-fluent-toast,
+    tooltip: $dark-fluent-tooltip,
     tree: $dark-fluent-tree,
+    watermark: $dark-fluent-watermark,
     _meta: (
         theme: 'fluent',
         variant: 'dark',
@@ -74,21 +184,58 @@ $dark-fluent-schema: (
 /// Use in combination with dark palettes.
 /// @type Map
 $dark-bootstrap-schema: (
+    action-strip: $dark-bootstrap-action-strip,
     avatar: $dark-bootstrap-avatar,
+    badge: $dark-bootstrap-badge,
+    banner: $dark-bootstrap-banner,
+    bottom-nav: $dark-bootstrap-bottom-nav,
     button: $dark-bootstrap-button,
+    button-group: $dark-bootstrap-button-group,
+    calendar: $dark-bootstrap-calendar,
+    card: $dark-bootstrap-card,
+    carousel: $dark-bootstrap-carousel,
+    checkbox: $dark-bootstrap-checkbox,
+    chip: $dark-bootstrap-chip,
+    column-actions: $dark-bootstrap-column-actions,
+    combo: $dark-bootstrap-combo,
+    date-range: $dark-bootstrap-date-range-picker,
+    dialog: $dark-bootstrap-dialog,
+    divider: $dark-bootstrap-divider,
+    dockmanager: $dark-bootstrap-dock-manager,
+    drop-down: $dark-bootstrap-drop-down,
+    expansion-panel: $dark-bootstrap-expansion-panel,
+    grid: $dark-bootstrap-grid,
+    grid-filtering: $dark-bootstrap-grid-filtering,
+    grid-summary: $dark-bootstrap-grid-summary,
+    grid-toolbar: $dark-bootstrap-grid-toolbar,
+    highlight: $dark-bootstrap-highlight,
     icon: $dark-bootstrap-icon,
-    navbar: $dark-bootstrap-navbar,
     input-group: $dark-bootstrap-input-group,
-    checkbox: $dark-bootstrap-checkbox,
-    switch: $dark-bootstrap-switch,
+    list: $dark-bootstrap-list,
+    navbar: $dark-bootstrap-navbar,
+    nav-drawer: $dark-bootstrap-navdrawer,
+    overlay: $dark-bootstrap-overlay,
+    paginator: $dark-bootstrap-pagination,
+    pivot-data-selector: $dark-bootstrap-pivot-data-selector,
+    linear-bar: $dark-bootstrap-progress-linear,
+    circular-bar: $dark-bootstrap-progress-circular,
+    query-builder: $dark-bootstrap-query-builder,
     radio: $dark-bootstrap-radio,
-    tabs: $dark-bootstrap-tabs,
     rating: $dark-bootstrap-rating,
+    ripple: $dark-bootstrap-ripple,
+    scrollbar: $dark-bootstrap-scrollbar,
     select: $dark-bootstrap-select,
     slider: $dark-bootstrap-slider,
-    dropdown: $dark-bootstrap-drop-down,
-    combo: $dark-bootstrap-combo,
+    snackbar: $dark-bootstrap-snackbar,
+    splitter: $dark-bootstrap-splitter,
+    stepper: $dark-bootstrap-stepper,
+    switch: $dark-bootstrap-switch,
+    tabs: $dark-bootstrap-tabs,
+    time-picker: $dark-bootstrap-time-picker,
+    toast: $dark-bootstrap-toast,
+    tooltip: $dark-bootstrap-tooltip,
     tree: $dark-bootstrap-tree,
+    watermark: $dark-bootstrap-watermark,
     _meta: (
         theme: 'bootstrap',
         variant: 'dark',
@@ -99,21 +246,58 @@ $dark-bootstrap-schema: (
 /// Use in combination with dark palettes.
 /// @type Map
 $dark-indigo-schema: (
+    action-strip: $dark-indigo-action-strip,
     avatar: $dark-indigo-avatar,
+    badge: $dark-indigo-badge,
+    banner: $dark-indigo-banner,
+    bottom-nav: $dark-indigo-bottom-nav,
     button: $dark-indigo-button,
+    button-group: $dark-indigo-button-group,
+    calendar: $dark-indigo-calendar,
+    card: $dark-indigo-card,
+    carousel: $dark-indigo-carousel,
+    checkbox: $dark-indigo-checkbox,
+    chip: $dark-indigo-chip,
+    column-actions: $dark-indigo-column-actions,
+    combo: $dark-indigo-combo,
+    date-range: $dark-indigo-date-range-picker,
+    dialog: $dark-indigo-dialog,
+    divider: $dark-indigo-divider,
+    dockmanager: $dark-indigo-dock-manager,
+    drop-down: $dark-indigo-drop-down,
+    expansion-panel: $dark-indigo-expansion-panel,
+    grid: $dark-indigo-grid,
+    grid-filtering: $dark-indigo-grid-filtering,
+    grid-summary: $dark-indigo-grid-summary,
+    grid-toolbar: $dark-indigo-grid-toolbar,
+    highlight: $dark-indigo-highlight,
     icon: $dark-indigo-icon,
-    navbar: $dark-indigo-navbar,
     input-group: $dark-indigo-input-group,
-    checkbox: $dark-indigo-checkbox,
-    switch: $dark-indigo-switch,
+    list: $dark-indigo-list,
+    navbar: $dark-indigo-navbar,
+    nav-drawer: $dark-indigo-navdrawer,
+    overlay: $dark-indigo-overlay,
+    paginator: $dark-indigo-pagination,
+    pivot-data-selector: $dark-indigo-pivot-data-selector,
+    linear-bar: $dark-indigo-progress-linear,
+    circular-bar: $dark-indigo-progress-circular,
+    query-builder: $dark-indigo-query-builder,
     radio: $dark-indigo-radio,
-    tabs: $dark-indigo-tabs,
     rating: $dark-indigo-rating,
+    ripple: $dark-indigo-ripple,
+    scrollbar: $dark-indigo-scrollbar,
     select: $dark-indigo-select,
     slider: $dark-indigo-slider,
-    dropdown: $dark-indigo-drop-down,
-    combo: $dark-indigo-combo,
+    snackbar: $dark-indigo-snackbar,
+    splitter: $dark-indigo-splitter,
+    stepper: $dark-indigo-stepper,
+    switch: $dark-indigo-switch,
+    tabs: $dark-indigo-tabs,
+    time-picker: $dark-indigo-time-picker,
+    toast: $dark-indigo-toast,
+    tooltip: $dark-indigo-tooltip,
     tree: $dark-indigo-tree,
+    watermark: $dark-indigo-watermark,
     _meta: (
         theme: 'indigo-design',
         variant: 'dark',

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

@@ -0,0 +1,116 @@
+@use '../../../../utils/map' as *;
+@use '../light/list' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a base dark list schema.
+/// @type {Map}
+/// @prop {Map} item-background-hover [color: ('gray', 400)] - The list item hover background.
+/// @prop {Map} item-background-active [color: ('gray', 400)] - The active list item background color.
+$base-dark-list: (
+    item-background-hover: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    item-background-active: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+);
+
+/// Generates a base dark list schema based on a mix of $light-list and $base-dark-list.
+/// @type {Map}
+/// @requires $light-list
+/// @requires $base-dark-list
+$dark-list: extend($light-list, $base-dark-list);
+
+/// Generates a base dark fluent list schema based on a mix of $fluent-list and $base-dark-list..
+/// @type {Map}
+/// @requires $fluent-list
+/// @requires $base-dark-list
+$dark-fluent-list: extend($fluent-list, $base-dark-list);
+
+/// Generates a base dark bootstrap list schema based on a mix of $bootstrap-list and $base-dark-list..
+/// @type {Map}
+/// @prop {Map} border-color [color: ('gray', 100)] - The list border color.
+/// @prop {Map} item-background [color: ('gray', 50)] - The list item background color.
+/// @prop {Map} item-background-hover [color: ('gray', 100)] - The list item hover background.
+/// @prop {Map} item-background-active [color: ('gray', 100)] - The active list item background color.
+/// @prop {Map} header-background [color: ('gray', 50)] - The list header background color.
+/// @requires $bootstrap-list
+/// @requires $base-dark-list
+$dark-bootstrap-list: extend(
+    $bootstrap-list,
+    (
+        border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        item-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        item-background-hover: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        item-background-active: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        header-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo list schema
+/// @type {Map}
+/// @prop {Map} header-text-color [contrast-color: 'surface'] - The list header text color.
+/// @prop {Map} item-background-hover [color: ('primary')] - The list item hover background.
+/// @prop {Map} item-background-active [color: ('primary')] - The active list item background color.
+/// @requires $indigo-list
+$dark-indigo-list: extend(
+    $indigo-list,
+    (
+        header-text-color: (
+            contrast-color: 'surface',
+        ),
+
+        item-background-hover: (
+            color: (
+                'primary',
+            ),
+        ),
+
+        item-background-active: (
+            color: (
+                'primary',
+            ),
+        ),
+    )
+);

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

@@ -0,0 +1,142 @@
+@use '../../../../utils/map' as *;
+@use '../light/navdrawer' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a base dark navdrawer schema.
+/// @type {Map}
+/// @prop {Map} item-hover-background [color: ('gray', 100, .5)] - The item's hover background color.
+$dark-base-navdrawer: (
+    item-hover-background: (
+        color: (
+            'gray',
+            100,
+            0.5,
+        ),
+    ),
+);
+
+/// Generates a dark navdrawer schema.
+/// @type {Map}
+/// @requires $light-navdrawer
+$dark-navdrawer: extend($light-navdrawer, $dark-base-navdrawer);
+
+/// Generates a dark fluent navdrawer schema.
+/// @type {Map}
+/// @prop {Map} item-active-text-color [color: ('primary', 200)] - The item's active text color.
+/// @prop {Map} item-active-icon-color [color: ('primary', 100)] - The item's icon active color.
+/// @prop {Map} item-active-background [color: ('primary', 400, .12)] - The item's active background color.
+/// @requires $fluent-navdrawer
+$dark-fluent-navdrawer: extend(
+    $fluent-navdrawer,
+    $dark-base-navdrawer,
+    (
+        item-active-text-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        item-active-icon-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+
+        item-active-background: (
+            color: (
+                'primary',
+                400,
+                0.12,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark bootstrap navdrawer schema.
+/// @type {Map}
+/// @prop {Map} item-hover-background [color: ('gray', 100)] - The item's hover background color.
+/// @requires $bootstrap-navdrawer
+$dark-bootstrap-navdrawer: extend(
+    $bootstrap-navdrawer,
+    $dark-base-navdrawer,
+    (
+        item-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo navdrawer schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('gray', 500)] - The navigation drawer background color.
+/// @prop {Map} item-header-text-color [contrast-color: ('gray', 50)] - The header's idle text color.
+/// @prop {Map} item-text-color [contrast-color: ('gray', 100) - The item's idle text color.
+/// @prop {Map} item-icon-color [contrast-color: ('gray', 100)] - The item's icon color.
+/// @prop {Map} item-active-background [contrast-color: ('gray', 400, .5)] - The item's active background color.
+/// @prop {Map} item-hover-text-color [contrast-color: ('gray', 50)] - The item's hover text color.
+/// @prop {Map} item-hover-icon-color [contrast-color: ('gray', 50)] - The item's hover icon color.
+/// @requires $indigo-navdrawer
+$dark-indigo-navdrawer: extend(
+    $indigo-navdrawer,
+    (
+        background: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        item-header-text-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        item-text-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        item-icon-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        item-hover-text-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        item-hover-icon-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        item-active-background: (
+            color: (
+                'gray',
+                400,
+                0.5,
+            ),
+        ),
+    )
+);

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

@@ -0,0 +1,34 @@
+@use '../../../../utils/map' as *;
+@use '../light/overlay' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark overlay schema.
+/// @type {Map}
+/// @requires $light-overlay
+$dark-overlay: $light-overlay;
+
+/// Generates a dark fluent overlay schema.
+/// @type {Map}
+/// @property {Color} background-color [rgba(0, 0, 0, .4)] - The background color used for modal overlays.
+/// @requires $fluent-overlay
+$dark-fluent-overlay: extend(
+    $fluent-overlay,
+    (
+        background-color: rgb(0 0 0 / 40%),
+    )
+);
+
+/// Generates a dark bootstrap overlay schema.
+/// @type {Map}
+/// @requires $bootstrap-overlay
+$dark-bootstrap-overlay: $bootstrap-overlay;
+
+/// Generates a dark indigo overlay schema.
+/// @type {Map}
+/// @requires $indigo-overlay
+$dark-indigo-overlay: $indigo-overlay;