igniteui-theming 1.4.5 → 1.4.6

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

@@ -0,0 +1,44 @@
+@use '../../../../utils/map' as *;
+@use '../light/pagination' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a base dark pagination schema.
+/// @type {Map}
+/// @prop {Map} background-color [color: ('surface')] - The background color of the paging panel.
+/// @requires $light-pagination
+$base-dark-pagination: (
+    background-color: (
+        color: (
+            'surface',
+        ),
+    ),
+);
+
+/// Generates a dark pagination schema based on a mix of $light-pagination and $base-dark-pagination.
+/// @type {Map}
+/// @requires $light-pagination
+/// @requires $base-dark-pagination
+/// @see $default-palette
+$dark-pagination: extend($light-pagination, $base-dark-pagination);
+
+/// Generates a dark fluent pagination schema based on a mix of $fluent-pagination and $base-dark-pagination.
+/// @type {Map}
+/// @requires $fluent-pagination
+/// @requires $base-dark-pagination
+$dark-fluent-pagination: extend($fluent-pagination, $base-dark-pagination);
+
+/// Generates a dark bootstrap pagination schema based on a mix of $bootstrap-pagination and $base-dark-pagination.
+/// @type {Map}
+/// @requires $bootstrap-pagination
+/// @requires $base-dark-pagination
+$dark-bootstrap-pagination: $bootstrap-pagination;
+
+/// Generates a dark indigo pagination schema.
+/// @type {Map}
+/// @requires $dark-pagination
+$dark-indigo-pagination: extend($indigo-pagination, $base-dark-pagination);

package/sass/themes/schemas/components/dark/_pivot-data-selector.scss

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

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

@@ -0,0 +1,107 @@
+@use '../../../../utils/map' as *;
+@use '../light/progress' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark base progress-linear schema.
+/// @type {Map}
+/// @prop {Map} track-color [color: ('gray', 100)] - The main track color.
+/// @prop {Map} stripes-color [color: ('gray', 900, .7)] - The track stripes color.
+$dark-base-progress-linear: (
+    track-color: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    stripes-color: (
+        color: (
+            'gray',
+            900,
+            0.7,
+        ),
+    ),
+);
+
+/// Generates a dark progress-linear schema.
+/// @type {Map}
+/// @requires $light-progress-linear
+/// @requires $dark-base-progress-linear
+/// @see $default-palette
+$dark-progress-linear: extend($light-progress-linear, $dark-base-progress-linear);
+
+/// Generates a dark fluent progress-linear schema.
+/// @type {Map}
+/// @requires $fluent-progress-linear
+/// @requires $dark-base-progress-linear
+/// @see $default-palette
+$dark-fluent-progress-linear: extend($fluent-progress-linear, $dark-base-progress-linear);
+
+/// Generates a dark bootstrap progress-linear schema.
+/// @type {Map}
+/// @requires $bootstrap-progress-linear
+/// @see $default-palette
+$dark-bootstrap-progress-linear: $bootstrap-progress-linear;
+
+/// Generates a dark indigo progress-linear schema.
+/// @type {Map}
+/// @prop {Map} track-color [color: ('gray', 100)] - The main track color.
+/// @prop {Color} stripes-color [rgba(#222, .35)] - The track stripes color.
+/// @requires $indigo-progress-linear
+/// @see $default-palette
+$dark-indigo-progress-linear: extend(
+    $indigo-progress-linear,
+    (
+        track-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        stripes-color: (
+            color: (
+                'gray',
+                50,
+                0.35,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark progress-circular schema.
+/// @type {Map}
+/// @prop {Map} track-color [color: ('gray', 100)] - The main track color.
+$dark-base-progress-circular: (
+    base-circle-color: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+);
+
+/// Generates a dark progress-circular schema.
+/// @type {Map}
+/// @requires $light-progress-circular
+$dark-progress-circular: extend($light-progress-circular, $dark-base-progress-circular);
+
+/// Generates a dark fluent progress-circular schema.
+/// @type {Map}
+/// @requires $fluent-progress-circular
+$dark-fluent-progress-circular: extend($fluent-progress-circular, $dark-base-progress-circular);
+
+/// Generates a dark bootstrap progress-circular schema.
+/// @type {Map}
+/// @requires $bootstrap-progress-circular
+$dark-bootstrap-progress-circular: extend($bootstrap-progress-circular, $dark-base-progress-circular);
+
+/// Generates a dark indigo progress-circular schema.
+/// @type {Map}
+/// @requires $indigo-progress-circular
+$dark-indigo-progress-circular: extend($indigo-progress-circular, $dark-base-progress-circular);

package/sass/themes/schemas/components/dark/_query-builder.scss

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

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

@@ -11,12 +11,7 @@
 /// Generates a dark radio schema.
 /// @type {Map}
 /// @requires $light-radio
-$dark-radio: extend(
-    $light-radio,
-    (
-        type: 'dark',
-    )
-);
+$dark-radio: $light-radio;
 
 /// Generates a dark fluent radio schema.
 /// @type {Map}

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

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

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

@@ -0,0 +1,69 @@
+@use '../../../../utils/map' as *;
+@use '../light/scrollbar' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark scrollbar schema.
+/// @type {Map}
+/// @prop {String | Number} size [16px] - The size of the track.
+/// @requires $light-scrollbar
+$dark-scrollbar: $light-scrollbar;
+
+/// Generates a dark fluent scrollbar schema.
+/// @type {Map}
+/// @requires $fluent-scrollbar
+$dark-fluent-scrollbar: $fluent-scrollbar;
+
+/// Generates a dark bootstrap scrollbar schema.
+/// @type {Map}
+/// @prop {Map} thumb-background [color: ('gray', 200, .5)] - The background color used for the thumb.
+/// @prop {Color} track-background [color: ('gray', 100, .5)] - The background color used for the track.
+/// @requires $light-scrollbar
+$dark-bootstrap-scrollbar: extend(
+    $bootstrap-scrollbar,
+    (
+        thumb-background: (
+            color: (
+                'gray',
+                200,
+                0.5,
+            ),
+        ),
+
+        track-background: (
+            color: (
+                'gray',
+                100,
+                0.5,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo scrollbar schema.
+/// @type {Map}
+/// @prop {Map} thumb-background [color: ('gray', 100)] - The background color used for the thumb.
+/// @prop {Color} track-background [color: ('gray', 50)] - The background color used for the track.
+/// @requires $indigo-scrollbar
+$dark-indigo-scrollbar: extend(
+    $indigo-scrollbar,
+    (
+        thumb-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        track-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+    )
+);

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

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

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

@@ -0,0 +1,68 @@
+@use '../../../../utils/map' as *;
+@use '../light/splitter' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark splitter schema.
+/// @type {Map}
+/// @prop {Map} bar-color [color: ('gray', 50)] - The background color of the bar.
+/// @prop {Map} handle-color [color: ('gray', 800)] - The color for the bar drag handle.
+/// @prop {Map} expander-color [color: ('gray', 800)] - The color for the arrow expander's.
+/// @requires $light-splitter
+$dark-splitter: extend(
+    $light-splitter,
+    (
+        bar-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        handle-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        expander-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark fluent splitter schema.
+/// @type {Map}
+/// @requires $fluent-splitter
+$dark-fluent-splitter: $fluent-splitter;
+
+/// Generates a dark bootstrap splitter schema.
+/// @type {Map}
+/// @requires $bootstrap-splitter
+$dark-bootstrap-splitter: $bootstrap-splitter;
+
+/// Generates a dark indigo splitter schema.
+/// @type {Map}
+/// @prop {Map} handle-color [color: 'surface'] - The color for the bar drag handle.
+/// @prop {Map} expander-color [color: 'surface'] - The color for the bar drag handle.
+/// @requires $indigo-splitter
+$dark-indigo-splitter: extend(
+    $indigo-splitter,
+    (
+        handle-color: (
+            color: 'surface',
+        ),
+
+        expander-color: (
+            color: 'surface',
+        ),
+    )
+);

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

@@ -0,0 +1,186 @@
+@use '../../../../utils/map' as *;
+@use '../light/stepper' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a base dark stepper schema.
+/// @prop {Map} current-indicator-color [color: ('gray', 900)] - The color of the current step indicator.
+/// @prop {Map} invalid-indicator-color [color: ('gray', 900)] - The color of the invalid step indicator.
+/// @prop {Map} step-hover-background [color: ('gray', 100, .3)] - The background of the step header on hover.
+/// @prop {Map} invalid-step-hover-background [color: ('gray', 100, .3)] - The background of the invalid step header on hover.
+/// @prop {Map} current-step-hover-background [color: ('gray', 100, .3)] - The background of the current step header on hover.
+/// @prop {Map} complete-step-hover-background [color: ('gray', 100, .3)] - The background of the complete step header on hover.
+/// @prop {Map} step-focus-background [color: ('gray', 100, .5)] - The background of the step header on hover.
+/// @prop {Map} invalid-step-focus-background [color: ('gray', 100, .5)] - The background of the invalid step header on hover.
+/// @prop {Map} current-step-focus-background [color: ('gray', 100, .5)] - The background of the current step header on hover.
+/// @prop {Map} complete-step-focus-background [color: ('gray', 100, .5)] - The background of the complete step header on hover.
+/// @type {Map}
+$base-stepper: (
+    step-hover-background: (
+        color: (
+            'gray',
+            100,
+            0.3,
+        ),
+    ),
+    complete-step-hover-background: (
+        color: (
+            'gray',
+            100,
+            0.3,
+        ),
+    ),
+    current-step-hover-background: (
+        color: (
+            'gray',
+            100,
+            0.3,
+        ),
+    ),
+    invalid-step-hover-background: (
+        color: (
+            'gray',
+            100,
+            0.3,
+        ),
+    ),
+    step-focus-background: (
+        color: (
+            'gray',
+            100,
+            0.5,
+        ),
+    ),
+    complete-step-focus-background: (
+        color: (
+            'gray',
+            100,
+            0.5,
+        ),
+    ),
+    current-step-focus-background: (
+        color: (
+            'gray',
+            100,
+            0.5,
+        ),
+    ),
+    invalid-step-focus-background: (
+        color: (
+            'gray',
+            100,
+            0.5,
+        ),
+    ),
+    current-indicator-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+
+    invalid-indicator-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+);
+
+/// Generates a dark stepper schema.
+/// @type {Map}
+/// @requires $light-stepper
+/// @requires $base-stepper
+$dark-stepper: extend($light-stepper, $base-stepper);
+
+/// Generates a dark fluent stepper schema
+/// @type {Map}
+/// @prop {Map} complete-indicator-background [color: ('gray', 100)] - The background color of the completed step indicator.
+/// @requires $fluent-stepper
+/// @requires $base-stepper
+/// @see $default-palette
+$dark-fluent-stepper: extend(
+    $fluent-stepper,
+    $base-stepper,
+    (
+        complete-indicator-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark bootstrap stepper schema.
+/// @type {Map}
+/// @prop {Map} indicator-outline [color: (color: ('gray', 200)] - The outline color of the incomplete step indicator.
+/// @prop {Map} disabled-indicator-outline [color: ('gray', 300)] - The outline color of the disabled step indicator.
+/// @prop {Map} step-separator-color [color: ('gray', 100)] - The separator border-color of between the steps.
+/// @requires $bootstrap-stepper
+/// @requires $base-stepper
+$dark-bootstrap-stepper: extend(
+    $bootstrap-stepper,
+    $base-stepper,
+    (
+        step-separator-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        indicator-outline: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        disabled-indicator-outline: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo stepper schema.
+/// @type {Map}
+/// @prop {Map} indicator-color [color: ('gray', 900)] - The text color of the incomplete step indicator.
+/// @prop {Map} indicator-outline [color: ('gray', 600)] - The outline color of the incomplete step indicator.
+/// @prop {Map} disabled-indicator-outline [color: ('gray', 300)] - The outline color of the disabled step indicator.
+/// @requires $indigo-stepper
+/// @requires $base-stepper
+/// @see $default-palette
+$dark-indigo-stepper: extend(
+    $indigo-stepper,
+    $base-stepper,
+    (
+        indicator-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        indicator-outline: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        disabled-indicator-outline: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);

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

@@ -14,7 +14,6 @@
 /// @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',