igniteui-theming 1.4.5 → 1.4.6

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

@@ -0,0 +1,38 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light pivot data selector schema.
+/// @type {Map}
+$light-pivot-data-selector: (
+    background: (
+        color: 'surface',
+    ),
+
+    header-color: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+);
+
+/// Generates a fluent pivot data selector schema.
+/// @type {Map}
+/// @requires {Map} $light-pivot-data-selector
+$fluent-pivot-data-selector: $light-pivot-data-selector;
+
+/// Generates a bootstrap pivot data selector schema.
+/// @type {Map}
+/// @requires {Map} $light-pivot-data-selector
+$bootstrap-pivot-data-selector: $light-pivot-data-selector;
+
+/// Generates a indigo pivot data selector schema.
+/// @type {Map}
+/// @requires {Map} $light-pivot-data-selector
+$indigo-pivot-data-selector: $light-pivot-data-selector;

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

@@ -0,0 +1,208 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light progress-linear schema.
+/// @type {Map}
+/// @prop {Map} track-color [color: ('gray', 300)] - The main track color.
+/// @prop {Map} fill-color-default [color: ('primary', 500)] - The track default fill color.
+/// @prop {Map} fill-color-danger [color: ('error')] - The track danger fill color.
+/// @prop {Map} fill-color-warning [color: ('warn')] - The track warning fill color.
+/// @prop {Map} fill-color-info [color: ('info')] - The track info fill color.
+/// @prop {Map} fill-color-success [color: ('success')] - The track success fill color.
+/// @prop {Map} stripes-color [color: ('gray', 50, .7)] - The track stripes color.
+/// @prop {Map} text-color [color: ('gray', 700)] - The track value text color.
+/// @prop {Number} track-border-radius [0] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent.
+$light-progress-linear: extend(
+    (
+        track-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        fill-color-default: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        fill-color-danger: (
+            color: (
+                'error',
+            ),
+        ),
+
+        fill-color-warning: (
+            color: (
+                'warn',
+            ),
+        ),
+
+        fill-color-info: (
+            color: (
+                'info',
+            ),
+        ),
+
+        fill-color-success: (
+            color: (
+                'success',
+            ),
+        ),
+
+        stripes-color: (
+            color: (
+                'gray',
+                50,
+                0.7,
+            ),
+        ),
+
+        text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        track-border-radius: rem(0),
+    )
+);
+
+/// Generates a fluent progress-linear schema.
+/// @type {Map}
+/// @prop {Number} track-border-radius [0] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires $light-progress-linear
+$fluent-progress-linear: $light-progress-linear;
+
+/// Generates a bootstrap progress-linear schema.
+/// @type {Map}
+/// @prop {Map} track-color [color: ('gray', 200)] - The main track color.
+/// @prop {Map} stripes-color [color: ('gray', 50, .15)] - The track stripes color.
+/// @prop {Number} track-border-radius [4px] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires $light-progress-linear
+$bootstrap-progress-linear: extend(
+    $light-progress-linear,
+    (
+        track-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        stripes-color: (
+            color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+
+        track-border-radius: rem(4px),
+    )
+);
+
+/// Generates an indigo progress-linear schema.
+/// @type {Map}
+/// @prop {Map} track-color [color: ('gray', 300)] - The main track color.
+/// @prop {Map} stripes-color [color: ('gray', 50, .45)] - The track stripes color.
+/// @prop {Number} track-border-radius [0] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires $light-progress-linear
+$indigo-progress-linear: extend(
+    $light-progress-linear,
+    (
+        track-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        stripes-color: (
+            color: (
+                'gray',
+                50,
+                0.45,
+            ),
+        ),
+    )
+);
+
+/// Generates a light progress-circular schema.
+/// @type {Map}
+/// @prop {Map} base-circle-color [color: ('gray', 300)] - The base circle fill color.
+/// @prop {Map} progress-circle-color [color: ('primary', 500)] - The progress circle fill color.
+/// @prop {Map} text-color [color: ('gray', 700)] - The value text color.
+/// @prop {Number} track-border-radius [0] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent.
+$light-progress-circular: extend(
+    (
+        base-circle-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        progress-circle-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        track-border-radius: rem(0),
+    )
+);
+
+/// Generates a fluent progress-circular schema.
+/// @type {Map}
+/// @requires {Map} $light-progress-circular
+$fluent-progress-circular: $light-progress-circular;
+
+/// Generates a bootstrap progress-circular schema.
+/// @type {Map}
+/// @prop {Map} track-color [color: ('gray', 200)] - The main track color.
+/// @requires {Map} $light-progress-circular
+$bootstrap-progress-circular: extend(
+    $light-progress-circular,
+    (
+        track-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo progress-circular schema.
+/// @type {Map}
+/// @prop {Map} track-color [color: ('gray', 300)] - The main track color.
+/// @requires {Map} $light-progress-circular
+$indigo-progress-circular: extend(
+    $light-progress-circular,
+    (
+        track-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);

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

@@ -0,0 +1,138 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// Generates a fluent query builder schema.
+/// @prop {Color} background [('gray', 50)] - The background color of the filtering row.
+/// @prop {Color} header-background [('gray', 100)] - The background color of the query builder header.
+/// @prop {Color} header-foreground [('gray', 700)] - The foreground color of the query builder header.
+/// @prop {Map} background-and [('primary', 300)] - The background color of advanced filtering "AND" condition.
+/// @prop {Map} background-and--focus [('primary', 700)] - The background color on focus/selected of advanced filtering "AND" condition.
+/// @prop {Map} background-or [('secondary', 300)] - The background color of advanced filtering "OR" condition.
+/// @prop {Map} background-or--focus [('secondary', 700)] - The background color on focus/selected of advanced filtering "OR" condition.
+$light-query-builder: (
+    background: (
+        color: (
+            'gray',
+            50,
+        ),
+    ),
+
+    header-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    header-foreground: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+
+    background-and: (
+        color: (
+            'primary',
+            300,
+        ),
+    ),
+
+    background-and--focus: (
+        color: (
+            'primary',
+            700,
+        ),
+    ),
+
+    background-or: (
+        color: (
+            'secondary',
+            300,
+        ),
+    ),
+
+    background-or--focus: (
+        color: (
+            'secondary',
+            700,
+        ),
+    ),
+);
+
+/// Generates a fluent query builder schema.
+/// @type {Map}
+/// @prop {Map} background [('gray', 50)] - The background color of the filtering row.
+/// @prop {Map} background-or [('error', 500, .5)] - The background color of advanced filtering "OR" condition.
+/// @prop {Map} background-or--focus [('error')] - The background color on focus/selected of advanced filtering "OR" condition.
+/// @requires {Map} $light-query-builder
+$fluent-query-builder: extend(
+    $light-query-builder,
+    (
+        background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        background-or: (
+            color: (
+                'error',
+                500,
+                0.5,
+            ),
+        ),
+
+        background-or--focus: (
+            color: (
+                'error',
+            ),
+        ),
+    )
+);
+
+/// Generates a fluent query builder schema.
+/// @prop {Color} header-background [('gray', 100, .5)] - The background color of the query builder header.
+/// @type {Map}
+/// @requires {Map} $light-query-builder
+$bootstrap-query-builder: extend(
+    $light-query-builder,
+    (
+        header-background: (
+            color: (
+                'gray',
+                100,
+                0.5,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo query builder schema.
+/// @prop {Map} background-or [('warn', 500, .72)] - The background color of advanced filtering "OR" condition.
+/// @prop {Map} background-or--focus [('warn', 500)] - The background color on focus/selected of advanced filtering "OR" condition.
+/// @requires {Map} $light-query-builder
+$indigo-query-builder: extend(
+    $light-query-builder,
+    (
+        background-or: (
+            color: (
+                'warn',
+                500,
+                0.72,
+            ),
+        ),
+
+        background-or--focus: (
+            color: 'warn',
+        ),
+    )
+);

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

@@ -0,0 +1,36 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light ripple schema.
+/// @type {Map}
+/// @prop {Map} color [color: ('gray', 800, .7)] - The color of the ripple.
+$light-ripple: (
+    color: (
+        color: (
+            'gray',
+            800,
+            0.7,
+        ),
+    ),
+);
+
+/// Generates a fluent ripple schema.
+/// @type {Map}
+/// @requires {Map} $light-ripple
+$fluent-ripple: $light-ripple;
+
+/// Generates a bootstrap ripple schema.
+/// @type {Map}
+/// @requires {Map} $light-ripple
+$bootstrap-ripple: $light-ripple;
+
+/// Generates an indigo ripple schema.
+/// @type {Map}
+/// @requires {Map} $light-ripple
+$indigo-ripple: $light-ripple;

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

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

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

@@ -30,7 +30,6 @@
 /// @prop {Map} tick-label-color [color: ('gray', 500)] - The color of the tick label.
 /// @prop {Map} tick-color [color: ('gray', 500)] - The background-color of the tick.
 $light-slider: (
-    variant: 'material',
     track-color: (
         color: (
             'secondary',
@@ -154,7 +153,6 @@ $light-slider: (
 $fluent-slider: extend(
     $light-slider,
     (
-        variant: 'fluent',
         track-color: (
             color: (
                 'gray',
@@ -251,7 +249,6 @@ $fluent-slider: extend(
 $bootstrap-slider: extend(
     $fluent-slider,
     (
-        variant: 'bootstrap',
         base-track-color: (
             color: (
                 'secondary',
@@ -314,7 +311,6 @@ $bootstrap-slider: extend(
 $indigo-slider: extend(
     $light-slider,
     (
-        variant: 'indigo-design',
         track-step-color: white,
         track-hover-color: (
             color: (

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

@@ -0,0 +1,131 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../elevation/snackbar' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light snackbar schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('gray', 900, .9)] - The background color used in the snackbar.
+/// @prop {Map} text-color [contrast-color: ('gray', 900)] - The text color used in the snackbar.
+/// @prop {Map} button-color [color: ('secondary', 500)] - The button color used in the snackbar.
+/// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used in the snackbar.
+/// @prop {Number} border-radius [4px] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $default-elevation-snackbar
+$light-snackbar: extend(
+    $default-elevation-snackbar,
+    (
+        background: (
+            color: (
+                'gray',
+                900,
+                0.9,
+            ),
+        ),
+
+        text-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        button-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+
+        border-radius: rem(4px),
+    )
+);
+
+/// Generates a fluent snackbar schema.
+/// @type {Map}
+/// @prop {Number} border-radius [2px] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent.
+///
+/// @requires $light-snackbar
+$fluent-snackbar: extend(
+    $light-snackbar,
+    (
+        border-radius: rem(2px),
+    )
+);
+
+/// Generates a bootstrap snackbar schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('surface')] - The background color used in the snackbar.
+/// @prop {Map} text-color [contrast-color: ('surface')] - The text color used in the snackbar.
+/// @prop {Map} button-color [color: ('primary', 500)] - The button color used in the snackbar.
+/// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used in the snackbar.
+///
+/// @requires $light-snackbar
+/// @requires {Map} $bootstrap-elevation-snackbar
+$bootstrap-snackbar: extend(
+    $light-snackbar,
+    $bootstrap-elevation-snackbar,
+    (
+        background: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        text-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        button-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo snackbar schema.
+/// @type {Map}
+///
+/// @prop {Map} background [color: ('gray', 700, .9)] - The background color used in the snackbar.
+/// @prop {Map} text-color [contrast-color: ('gray', 700)] - The text color used in the snackbar.
+/// @prop {Map} button-color [contrast-color: ('gray', 700)] - The button color used in the snackbar.
+/// @prop {Number} border-radius [6px] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent.
+///
+///
+/// @requires $light-snackbar
+$indigo-snackbar: extend(
+    $light-snackbar,
+    (
+        background: (
+            color: (
+                'gray',
+                700,
+                0.9,
+            ),
+        ),
+
+        text-color: (
+            contrast-color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        button-color: (
+            contrast-color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        border-radius: rem(6px),
+    )
+);