igniteui-theming 1.4.5 → 1.4.6

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

@@ -0,0 +1,538 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../elevation/chip' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light chip schema.
+/// @type {Map}
+/// @prop {Number} border-radius [16px] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Map} text-color [contrast-color: ('gray', 300)] - The chip text color.
+/// @prop {Map} background [color: ('gray', 300)] - The chip background color.
+/// @prop {Color} border-color [transparent] - The chip border color.
+/// @prop {Map} ghost-background [color: ('gray', 400))] - The chip ghost background color.
+/// @prop {Map} hover-text-color [contrast-color: ('gray', 400)] - The chip text hover color.
+/// @prop {Map} hover-background [color: ('gray', 400)] - The chip hover background color.
+/// @prop {Color} hover-border-color [transparent] - The chip hover border color.
+/// @prop {Map} selected-text-color [color: ('gray', 700)] - The selected chip text color.
+/// @prop {Map} selected-background [color: ('gray', 300)] - The selected chip background color.
+/// @prop {Color} selected-border-color [transparent] The selected chip border color.
+/// @prop {Map} focus-background [color: ('gray', 500)] The focused chip background color.
+/// @prop {Map} focus-text-color [contrast-color: ('gray', 500)] The focused chip text color.
+/// @prop {Color} focus-border-color [transparent] - The chip focus border color.
+/// @prop {Map} hover-selected-text-color [contrast-color: ('gray', 400)] - The selected chip hover text color.
+/// @prop {Map} hover-selected-background [color: ('gray', 400)] - The selected chip hover background color.
+/// @prop {Color} hover-selected-border-color [transparent] - The selected chip hover border color.
+/// @prop {Map} focus-selected-text-color [contrast-color: ('gray', 500)] - The selected chip text focus color.
+/// @prop {Map} focus-selected-background [color: ('gray', 500)] - The selected chip focus background color.
+/// @prop {Color} focus-selected-border-color [transparent] - The selected chip focus border color.
+/// @prop {Number} ghost-elevation [8] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
+/// @prop {color} remove-icon-color ["'currentColor'"] - The remove icon color for the chip.
+/// @prop {Color} remove-icon-color-focus ["'currentColor'"] - The remove icon color on focus for the chip.
+/// @prop {Map} $disabled-text-color [color: ('gray', 500)] - The disabled chip text color.
+/// @prop {Map} $disabled-background [color: ('gray', 200)] - The disabled chip background color.
+/// @prop {Map} $disabled-border-color [color: ('gray', 200)] - The disabled chip border color.
+/// @prop {Map} $default-elevation-chip
+$light-chip: extend(
+    $default-elevation-chip,
+    (
+        remove-icon-color: "'currentColor'",
+
+        focus-outline-color: transparent,
+
+        focus-selected-outline-color: transparent,
+
+        remove-icon-color-focus: "'currentColor'",
+
+        text-color: (
+            contrast-color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        background: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        border-color: transparent,
+
+        ghost-background: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        hover-text-color: (
+            contrast-color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        hover-background: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        hover-border-color: transparent,
+
+        focus-text-color: (
+            contrast-color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        focus-background: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        focus-border-color: transparent,
+
+        selected-text-color: (
+            contrast-color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        selected-background: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        selected-border-color: transparent,
+
+        hover-selected-text-color: (
+            contrast-color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        hover-selected-background: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        hover-selected-border-color: transparent,
+
+        focus-selected-text-color: (
+            contrast-color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        focus-selected-background: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        focus-selected-border-color: transparent,
+
+        border-radius: rem(16px),
+        disabled-text-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        disabled-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        disabled-border-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+    )
+);
+
+/// Generates a fluent chip schema.
+/// @type {Map}
+/// @prop {Map} text-color [color: ('gray', 700)] - The chip text color.
+/// @prop {Map} background [color: ('gray', 200)] - The chip background color.
+/// @prop {Map} ghost-background [color: ('primary', 500)] - The chip ghost background color.
+/// @prop {Map} hover-background [color: ('gray', 200)] - The chip hover background color.
+/// @prop {Map} hover-text-color [contrast-color: ('gray', 200)] - The chip text hover color.
+/// @prop {Map} selected-text-color [contrast-color: ('primary', 700))] - The selected chip text color.
+/// @prop {Map} selected-background [color: ('primary', 500)] - The selected chip background color.
+/// @prop {Map} focus-background [color: ('primary', 600)] The focused chip background color.
+/// @prop {Map} focus-text-color [contrast-color: ('primary', 700)] The focused chip text color.
+/// @prop {Map} hover-selected-text-color [contrast-color: ('primary', 700)] - The selected chip hover text color.
+/// @prop {Map} hover-selected-background [color: ('primary', 600)] - The selected chip hover background color.
+/// @prop {Map} focus-selected-text-color [contrast-color: ('primary', 700)] - The selected chip text focus color.
+/// @prop {Map} focus-selected-background [color: ('primary', 500)] - The selected chip focus background color.
+/// @prop {Number} ghost-elevation [2] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
+/// @prop {Number} border-radius [16px] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-chip
+/// @requires {Map} $fluent-elevation-chip
+$fluent-chip: extend(
+    $light-chip,
+    $fluent-elevation-chip,
+    (
+        background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        ghost-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        hover-text-color: (
+            contrast-color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        selected-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        focus-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        focus-text-color: (
+            contrast-color: (
+                'primary',
+                700,
+            ),
+        ),
+
+        selected-text-color: (
+            contrast-color: (
+                'primary',
+                700,
+            ),
+        ),
+
+        hover-selected-text-color: (
+            contrast-color: (
+                'primary',
+                700,
+            ),
+        ),
+
+        hover-selected-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        focus-selected-text-color: (
+            contrast-color: (
+                'primary',
+                700,
+            ),
+        ),
+
+        focus-selected-background: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
+    )
+);
+
+/// Generates a bootstrap chip schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('gray', 200)] - The chip background color.
+/// @prop {Map} text-color [contrast-color: ('gray', 200)] - The chip text color.
+/// @prop {Map} selected-background [color: ('gray', 200)] - The selected chip background color.
+/// @prop {Map} focus-text-color [contrast-color: ('gray', 400)] The focused chip text color.
+/// @prop {Map} focus-background [color: ('gray', 400)] The focused chip background color.
+/// @prop {Map} hover-selected-background [color: ('gray', 400)] - The selected chip hover background color.
+/// @prop {Map} focus-selected-background [color: ('gray', 400)] - The selected chip focus background color.
+/// @prop {Map} focus-selected-text-color [contrast-color: ('gray', 400)] - The selected chip text focus color.
+/// @prop {Number} ghost-elevation [0] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
+/// @prop {Number} border-radius [4px] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Map} focus-outline-color [color: ('gray', 200)] - The chip focus outline color.
+/// @prop {Map} focus-selected-outline-color [color: ('primary', 200)] - The selected chip focus outline color.
+/// @requires {Map} $light-chip
+/// @requires {Map} $bootstrap-elevation-chip
+$bootstrap-chip: extend(
+    $light-chip,
+    $bootstrap-elevation-chip,
+    (
+        background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        text-color: (
+            contrast-color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        focus-text-color: (
+            contrast-color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        focus-background: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        focus-outline-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        focus-selected-outline-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        selected-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        focus-selected-background: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        hover-selected-background: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        focus-selected-text-color: (
+            contrast-color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        border-radius: rem(4px),
+    )
+);
+
+/// Generates an indigo chip schema.
+/// @type {Map}
+/// @prop {Number} ghost-elevation [1] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
+/// @prop {Number} border-radius [16px] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Map} text-color [color: ('gray', 700)] - The chip text color.
+/// @prop {Map} background [color: ('surface')] - The chip background color.
+/// @prop {Map} ghost-background [color: ('surface')] - The chip ghost background color.
+/// @prop {Map} hover-background [color: ('gray', 200)] - The chip hover background color.
+/// @prop {Map} focus-background [color: ('surface')] The focused chip background color.
+/// @prop {Map} selected-text-color [contrast-color: ('primary', 500)] - The selected chip text color.
+/// @prop {Map} selected-background [color: ('primary', 500)] - The selected chip background color.
+/// @prop {Map} hover-selected-text-color [contrast-color: ('primary', 400)] - The selected chip hover text color.
+/// @prop {Map} hover-selected-background [color: ('primary', 400)] - The selected chip hover background color.
+/// @prop {Map} focus-selected-text-color [contrast-color: ('primary', 400)] - The selected chip text focus color.
+/// @prop {Map} focus-selected-background [color: ('primary', 400)] - The selected chip focus background color.
+/// @prop {Map} focus-outline-color [color: ('gray', 300)] - The chip focus outline color.
+/// @prop {Map} focus-selected-outline-color [color: ('primary', 200)] - The selected chip focus outline color.
+/// @prop {Map} border-color [color: ('gray', 400)] - The chip border color.
+/// @prop {Map} hover-border-color [color: ('gray', 400)] - The chip hover border color.
+/// @prop {Map} focus-border-color [color: ('gray', 400)] - The chip focus border color.
+/// @prop {Map} $disabled-background [color: ('surface')] - The disabled chip background color.
+/// @prop {Map} $disabled-border-color [ color: ('gray', 200)] - The disabled chip border color.
+/// @requires {Map} $light-chip
+/// @requires {Map} $indigo-elevation-chip
+$indigo-chip: extend(
+    $light-chip,
+    $indigo-elevation-chip,
+    (
+        focus-outline-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        focus-selected-outline-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        background: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        ghost-background: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        focus-background: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        hover-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        focus-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        selected-text-color: (
+            contrast-color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        selected-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        hover-selected-text-color: (
+            contrast-color: (
+                'primary',
+                400,
+            ),
+        ),
+
+        hover-selected-background: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+
+        focus-selected-text-color: (
+            contrast-color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        focus-selected-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        disabled-background: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        disabled-border-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+    )
+);

package/sass/themes/schemas/components/light/_column-actions.scss

@@ -0,0 +1,42 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access private
+////
+
+/// Generates a light column actions schema.
+/// @type {Map}
+/// @prop {Map} title-color [color: ('primary', 500)]- The text color used for the title of the list.
+/// @prop {Map} background-color [color: ('surface')] - The background color of the panel.
+$light-column-actions: (
+    background-color: (
+        color: (
+            'surface',
+        ),
+    ),
+
+    title-color: (
+        color: (
+            'primary',
+            500,
+        ),
+    ),
+);
+
+/// Generates a fluent column actions schema.
+/// @type {Map}
+/// @requires {map} $light-column-actions
+$fluent-column-actions: $light-column-actions;
+
+/// Generates a bootstrap column actions schema.
+/// @type {Map}
+/// @requires {map} $light-column-actions
+$bootstrap-column-actions: $light-column-actions;
+
+/// Generates an indigo column actions schema.
+/// @type {Map}
+/// @requires {map} $light-column-actions
+$indigo-column-actions: $light-column-actions;

package/sass/themes/schemas/components/light/_date-range-picker.scss

@@ -0,0 +1,35 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light date-range-picker schema.
+/// @type {Map}
+/// @prop {Map} label-color [color: ('gray', 500)] - The Color for date range separator label.
+$light-date-range-picker: (
+    label-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+);
+
+/// Generates a fluent date-range-picker schema.
+/// @type {Map}
+/// @requires {Map} $light-date-range-picker
+$fluent-date-range-picker: $light-date-range-picker;
+
+/// Generates a bootstrap date-range-picker schema.
+/// @type {Map}
+/// @requires {Map} $light-date-range-picker
+$bootstrap-date-range-picker: $light-date-range-picker;
+
+/// Generates an indigo date-range-picker schema.
+/// @type {Map}
+/// @requires {Map} $light-date-range-picker
+$indigo-date-range-picker: $light-date-range-picker;