igniteui-theming 1.4.5 → 1.4.6

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

@@ -42,8 +42,6 @@
 $light-switch: extend(
     $default-elevation-switch,
     (
-        variant: 'material',
-        type: 'light',
         border-color: transparent,
         border-hover-color: transparent,
         border-disabled-color: transparent,
@@ -175,7 +173,6 @@ $light-switch: extend(
 $fluent-switch: extend(
     $light-switch,
     (
-        variant: 'fluent',
         focus-outline-color: (
             color: (
                 'gray',
@@ -300,7 +297,6 @@ $fluent-switch: extend(
 $bootstrap-switch: extend(
     $fluent-switch,
     (
-        variant: 'bootstrap',
         focus-outline-color: (
             color: (
                 'primary',
@@ -401,7 +397,6 @@ $bootstrap-switch: extend(
 $indigo-switch: extend(
     $light-switch,
     (
-        variant: 'indigo-design',
         focus-outline-color: (
             color: (
                 'gray',

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

@@ -0,0 +1,210 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../elevation/time-picker' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light time-picker schema.
+/// @type {Map}
+/// @prop {Map} text-color [color: ('gray', 500)] - The text color of an open time picker.
+/// @prop {Map} hover-text-color [color: ('secondary', 500)] - The hover text color of an open time picker.
+/// @prop {Map} selected-text-color [color: ('secondary', 500)] -  The text color of a selected item in time picker.
+/// @prop {Map} active-item-background [color: ('gray', 100)] - The background color for current item in focused column inside the time picker.
+/// @prop {Map} disabled-text-color [color: ('gray', 400)] - The text color for disabled values.
+/// @prop {Color} disabled-item-background [transparent] - The background color for disabled values .
+/// @prop {Map} header-background [color: ('secondary', 500)] - The header background color of a time picker.
+/// @prop {Map} header-hour-text-color [contrast-color: ('secondary', 500)] - The header hour text color of a time picker.
+/// @prop {Map} header-time-period-color [contrast-color: ('secondary', 500, .8)] - The header AM/PM text color of a time picker.
+/// @prop {Map} background-color [color: 'surface'] - The time-picker panel background color.
+/// @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.
+/// @prop {Number} border-radius [4px] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} active-item-border-radius [15px] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $default-elevation-time-picker
+/// @see $default-palette
+$light-time-picker: extend(
+    $default-elevation-time-picker,
+    (
+        text-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        hover-text-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+
+        selected-text-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+
+        active-item-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        disabled-text-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        disabled-item-background: transparent,
+
+        header-background: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+
+        header-hour-text-color: (
+            contrast-color: (
+                'secondary',
+                500,
+            ),
+        ),
+
+        header-time-period-color: (
+            contrast-color: (
+                'secondary',
+                500,
+            ),
+        ),
+
+        background-color: (
+            color: 'surface',
+        ),
+
+        border-radius: rem(4px),
+        active-item-border-radius: rem(15px),
+    )
+);
+
+/// Generates a fluent time-picker schema.
+/// @type {Map}
+/// @prop {Number} border-radius [2px] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} active-item-border-radius [2px] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
+///
+/// @requires $light-time-picker
+$fluent-time-picker: extend(
+    $light-time-picker,
+    (
+        border-radius: rem(2px),
+        active-item-border-radius: rem(2px),
+    )
+);
+
+/// Generates a bootstrap time-picker schema.
+/// @type {Map}
+/// @prop {Map} selected-text-color [color: ('primary', 500)] -  The text color of a selected item in time picker.
+/// @prop {Map} hover-text-color [color: ('primary', 600)] - The hover text color of an open time picker.
+/// @prop {Map} header-background [color: ('primary', 500)] - The header background color of a time picker.
+/// @prop {Number} border-radius [4px] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} active-item-border-radius [4px] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
+///
+/// @requires $light-time-picker
+$bootstrap-time-picker: extend(
+    $light-time-picker,
+    (
+        selected-text-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        hover-text-color: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        header-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        active-item-border-radius: rem(4px),
+    )
+);
+
+/// Generates an indigo time-picker schema.
+/// @type {Map}
+/// @prop {Map} text-color [color: ('gray', 700)] - The text color of an open time picker.
+/// @prop {Map} selected-text-color [color: ('primary', 500)] -  The text color of a selected item in time picker.
+/// @prop {Map} hover-text-color [color: ('primary', 500)] - The hover text color of an open time picker.
+/// @prop {Map} header-background [color: ('primary', 500)] - The header background color of a time picker.
+/// @prop {Map} header-hour-text-color [contrast-color: ('primary', 500)] - The header hour text color of a time picker.
+/// @prop {Map} header-time-period-color [contrast-color: ('primary', 500)] - The header AM/PM text color of a time picker.
+/// @prop {Number} border-radius [3px] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} active-item-border-radius [20px] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
+///
+/// @requires $light-time-picker
+$indigo-time-picker: extend(
+    $light-time-picker,
+    (
+        text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        hover-text-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        selected-text-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        header-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        header-hour-text-color: (
+            contrast-color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        header-time-period-color: (
+            contrast-color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        border-radius: rem(3px),
+        active-item-border-radius: rem(20px),
+    )
+);

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

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

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

@@ -0,0 +1,96 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light tooltip schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('gray', 700, .9),] - The background color of the tooltip.
+/// @prop {Map} text-color [contrast-color: ('gray', 700)] - The text color of the tooltip.
+/// @prop {Number} border-radius [4px] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent.
+$light-tooltip: (
+    background: (
+        color: (
+            'gray',
+            700,
+            0.9,
+        ),
+    ),
+
+    text-color: (
+        contrast-color: (
+            'gray',
+            700,
+        ),
+    ),
+
+    border-radius: rem(4px),
+);
+
+/// Generates a light fluent tooltip schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('gray', 900, .8)] - The background color of the tooltip.
+/// @prop {Map} text-color [contrast-color: ('gray', 900)] - The text color of the tooltip.
+/// @prop {Number} border-radius [2px] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-tooltip
+$fluent-tooltip: extend(
+    $light-tooltip,
+    (
+        background: (
+            color: (
+                'gray',
+                900,
+                0.8,
+            ),
+        ),
+
+        text-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        border-radius: rem(2px),
+    )
+);
+
+/// Generates a bootstrap tooltip schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('gray', 900, .8)] - The background color of the tooltip.
+/// @prop {Map} text-color [contrast-color: ('gray', 900)] - The text color of the tooltip.
+/// @prop {Number} border-radius [4px] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires $light-tooltip
+$bootstrap-tooltip: extend(
+    $light-tooltip,
+    (
+        background: (
+            color: (
+                'gray',
+                900,
+                0.8,
+            ),
+        ),
+        text-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo tooltip schema.
+/// @type {Map}
+/// @prop {Number} border-radius [3px] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-tooltip
+$indigo-tooltip: extend(
+    $light-tooltip,
+    (
+        border-radius: rem(3px),
+    )
+);

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

@@ -0,0 +1,77 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light watermark schema.
+/// @type {Map}
+/// @prop {Color} base-color [null] - The base color for all elements of the watermark.
+/// @prop {Color} image-color [null] - The color used for the stamp image.
+/// @prop {Number} image-opacity [null] - The opacity of the stamp image.
+/// @prop {Map} link-background [color: ('primary')] - The background color used for the link.
+/// @prop {Map} color [contrast-color: ('primary', 800)] - The color used for the link text.
+/// @prop {Map} border-color [color: ('primary')] - The border color used for the link.
+/// @prop {Number} border-radius [0] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent.
+$light-watermark: extend(
+    (
+        base-color: (
+            color: (
+                'primary',
+            ),
+        ),
+
+        color: (
+            contrast-color: (
+                'primary',
+                800,
+            ),
+        ),
+
+        border-radius: rem(0),
+    )
+);
+
+/// Generates a light fluent watermark schema.
+/// @type {Map}
+/// @prop {Number} border-radius [2px] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-watermark
+$fluent-watermark: extend(
+    $light-watermark,
+    (
+        border-radius: rem(2px),
+    )
+);
+
+/// Generates a bootstrap watermark schema.
+/// @type {Map}
+/// @prop {Number} border-radius [4px] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-watermark
+$bootstrap-watermark: extend(
+    $light-watermark,
+    (
+        border-radius: rem(4px),
+    )
+);
+
+/// Generates an indigo watermark schema.
+/// @type {Map}
+/// @prop {Map} border-color [color: ('primary', 300)] - The border color for the link.
+/// @prop {Number} border-radius [16px] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-watermark
+$indigo-watermark: extend(
+    $light-watermark,
+    (
+        border-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        border-radius: rem(16px),
+    )
+);