igniteui-theming 1.4.5 → 1.4.6

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

@@ -0,0 +1,338 @@
+@use '../../../../utils/map' as *;
+@use '../light/calendar' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark calendar schema.
+/// @type {Map}
+/// @prop {Map} week-number-background [color: ('gray', 100, .3)] - The background color of the week number column.
+/// @prop {Map} date-hover-background [color: ('gray', 100)] - The hover date background color.
+/// @prop {Map} month-hover-background [color: ('gray', 100, .5)] - The month hover text color.
+/// @prop {Map} date-selected-hover-foreground [contrast-color: ('gray', 100)] - The hover text color for the selected date.
+/// @prop {Map} date-selected-focus-foreground [contrast-color: ('gray', 100)] - The focus text color for the selected date.
+$dark-base-calendar: (
+    week-number-background: (
+        color: (
+            'gray',
+            100,
+            0.3,
+        ),
+    ),
+
+    date-hover-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    month-hover-background: (
+        color: (
+            'gray',
+            100,
+            0.5,
+        ),
+    ),
+
+    date-selected-hover-foreground: (
+        contrast-color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    date-selected-focus-foreground: (
+        contrast-color: (
+            'gray',
+            100,
+        ),
+    ),
+);
+
+/// Generates a dark calendar schema.
+/// @type {Map}
+/// @prop {Map} date-disabled-text-color [color: ('gray', 500)] - The text color for disabled dates.
+/// @prop {Map} date-selected-hover-foreground [contrast-color: ('secondary', 500)] - The hover text color for the selected date.
+/// @prop {Map} date-selected-focus-foreground [contrast-color: ('secondary', 500)] - The focus text color for the selected date.
+/// @requires $light-calendar
+/// @requires $dark-base-calendar
+$dark-calendar: extend(
+    $light-calendar,
+    $dark-base-calendar,
+    (
+        date-disabled-text-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        date-selected-hover-foreground: (
+            contrast-color: (
+                'secondary',
+                500,
+            ),
+        ),
+
+        date-selected-focus-foreground: (
+            contrast-color: (
+                'secondary',
+                500,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark fluent calendar schema.
+/// @type {Map}
+/// @requires $fluent-calendar
+$dark-fluent-calendar: extend($fluent-calendar, $dark-base-calendar);
+
+/// Generates a dark bootstrap calendar schema.
+/// @type {Map}
+/// @prop {Map} content-background [color: ('gray', 50)] - The main content background color.
+/// @prop {Color} picker-background-color [color: ('gray', 100, .5)] - The igx calendar picker background color.
+/// @prop {Map} border-color [color: ('gray', 100)] - The calendar border color.
+/// @prop {Map} picker-text-color [contrast-color: ('surface')]- The idle picker month/year color.
+/// @prop {Map} date-selected-text-color [contrast-color: ('secondary', 600)] - The text color for the selected date.
+/// @prop {Map} date-current-text-color [contrast-color: 'surface'] - The text color for the current date.
+/// @prop {Map} date-current-hover-text-color [color: ('surface')] - The hover text color for the current date.
+/// @prop {Map} date-current-focus-text-color [color: ('surface')] - The focus text color for the current date.
+/// @prop {Map} week-number-background [('gray', 300, .2)] - The background color of the week number column.
+/// @prop {Map} date-selected-hover-text-color [contrast-color: ('surface')] - The hover text color for the selected date.
+/// @prop {Map} date-selected-focus-text-color [contrast-color: ('surface')] - The focus text color for the selected date.
+/// @requires $bootstrap-calendar
+/// @requires $dark-base-calendar
+$dark-bootstrap-calendar: extend(
+    $bootstrap-calendar,
+    $dark-base-calendar,
+    (
+        content-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        picker-background-color: (
+            color: (
+                'gray',
+                100,
+                0.5,
+            ),
+        ),
+
+        border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        picker-text-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        date-selected-text-color: (
+            contrast-color: (
+                'secondary',
+                600,
+            ),
+        ),
+
+        date-selected-hover-text-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        date-selected-focus-text-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        date-current-text-color: (
+            contrast-color: 'surface',
+        ),
+
+        date-current-hover-text-color: (
+            contrast-color: 'surface',
+        ),
+
+        date-current-focus-text-color: (
+            contrast-color: 'surface',
+        ),
+
+        week-number-background: (
+            color: (
+                'gray',
+                300,
+                0.2,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo calendar schema.
+/// @type {Map}
+/// @prop {Map} content-text-color [contrast-color: ('surface')] - The main content text color.
+/// @prop {Map} inactive-text-color [color: ('gray', 700)] - The text color for previous and next month dates.
+/// @prop {Map} label-color [color: ('gray', 700)] - The text color for weekday labels.
+/// @prop {Map} weekend-text-color [color: ('gray', 700)] - The text color for weekend days.
+/// @prop {Map} picker-arrow-color [color: ('gray', 800)] - The idle picker arrow color.
+/// @prop {Map} picker-arrow-hover-color [contrast-color: ('surface')] - The picker hover arrow color.
+/// @prop {Map} picker-text-color [color: ('gray', 800)]- The idle picker month/year color.
+/// @prop {Map} picker-text-hover-color [contrast-color: ('surface')]-  The hover picker month/year color.
+/// @prop {Map} month-hover-text-color [color: ('primary', 300)] - The month hover text color.
+/// @prop {Map} year-hover-text-color [color: ('primary', 300)] - The year hover text color.
+/// @prop {Map} year-current-text-color [color: ('primary', 300)] - The text color for the current/selected year.
+/// @prop {Map} month-current-text-color [color: ('primary', 300)]- The text color for the current/selected month.
+/// @prop {Map} month-hover-current-text-color [color: ('primary', 300)]- The text color for the current/selected month on hover.
+/// @prop {Map} date-selected-hover-text-color [contrast-color: ('surface')] - The hover text color for the selected date.
+/// @prop {Map} date-selected-focus-text-color [contrast-color: ('surface')] - The focus text color for the selected date.
+/// @prop {Map} date-current-hover-text-color [color: ('primary', 200)] - The hover text color for the current date.
+/// @prop {Map} date-current-focus-text-color [color: ('gray', 100)] - The focus text color for the current date.
+/// @prop {Map} date-current-hover-bg-color [color: ('gray', 100)] - The hover background color for the current date.
+/// @prop {Map} date-current-focus-bg-color [color: ('gray', 100)] - The focus background color for the current date.
+/// @requires $indigo-calendar
+/// @requires $dark-base-calendar
+$dark-indigo-calendar: extend(
+    $indigo-calendar,
+    $dark-base-calendar,
+    (
+        content-text-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        date-current-hover-bg-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        date-current-focus-bg-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        date-current-hover-text-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        date-current-focus-text-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        inactive-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        date-selected-hover-text-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        date-selected-focus-text-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        label-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        weekend-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        picker-arrow-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        picker-arrow-hover-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        picker-text-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        picker-text-hover-color: (
+            contrast-color: (
+                'surface',
+            ),
+        ),
+
+        month-hover-text-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        year-hover-text-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        month-current-text-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        month-hover-current-text-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        year-current-text-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+    )
+);

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

@@ -0,0 +1,71 @@
+@use '../../../../utils/map' as *;
+@use '../light/card' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark card schema.
+/// @type {Map}
+/// @prop {Map} outline-color [color: ('gray', 400, .38)] - The outline color of an outlined type card.
+/// @requires $light-card
+$dark-card: extend(
+    $light-card,
+    (
+        outline-color: (
+            color: (
+                'gray',
+                400,
+                0.38,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark fluent card schema.
+/// @type {Map}
+/// @requires $fluent-card
+$dark-fluent-card: $fluent-card;
+
+/// Generates a dark bootstrap card schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('gray', 50)]- The card background color.
+/// @prop {Map} outline-color [color: ('gray', 100)] - The outline color of an outlined type card.
+/// @requires $bootstrap-card
+$dark-bootstrap-card: extend(
+    $bootstrap-card,
+    (
+        background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        outline-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark indigo card schema.
+/// @type {Map}
+/// @prop {Map} outline-color [color: ('gray', 200)] - The outline color of an outlined type card.
+/// @requires $indigo-card
+$dark-indigo-card: extend(
+    $indigo-card,
+    (
+        outline-color: (
+            color: (
+                'gray',
+                200,
+                0.54,
+            ),
+        ),
+    )
+);

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

@@ -0,0 +1,127 @@
+@use '../../../../utils/map' as *;
+@use '../light/carousel' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates the base dark carousel schema.
+/// @prop {Map} button-arrow-color [color: ('gray', 400)] - The previous/next buttons idle arrow color.
+/// @prop {Map} button-hover-arrow-color [color: ('gray', 700)] - The previous/next buttons hover arrow color.
+/// @prop {Color} indicator-border-color [color: ('gray', 600)] - The idle indicator border color.
+/// @prop {Color} indicator-active-dot-color [color: ('gray', 600)] - The active indicator dot color.
+/// @prop {Color} indicator-active-border-color [color: ('gray', 600)] - The active indicator border color.
+/// @type {Map}
+$base-dark-carousel: extend(
+    $light-carousel,
+    (
+        button-arrow-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        button-hover-arrow-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        indicator-border-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        indicator-active-dot-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        indicator-active-border-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark carousel schema based on a mix of $light-carousel and $base-dark-carousel
+/// @type {Map}
+/// @requires $light-carousel
+/// @requires $base-dark-carousel
+$dark-carousel: $base-dark-carousel;
+
+/// Generates a dark fluent carousel schema based on a mix of $fluent-carousel and $base-dark-carousel
+/// @type {Map}
+/// @requires $fluent-carousel
+/// @requires $base-dark-carousel
+$dark-fluent-carousel: extend($fluent-carousel, $base-dark-carousel);
+
+/// Generates a dark bootstrap carousel schema based on a mix of $bootstrap-carousel and $base-dark-carousel
+/// @type {Map}
+/// @requires $bootstrap-carousel
+/// @requires $base-dark-carousel
+$dark-bootstrap-carousel: extend($bootstrap-carousel, $base-dark-carousel);
+
+/// Generates a dark indigo carousel schema based on a mix of $indigo-carousel and $base-dark-carousel
+/// @type {Map}
+/// @prop {Map} button-background [color: ('gray', 400)] - The previous/next buttons idle background color.
+/// @prop {Map} button-hover-background [color: ('gray', 200)] - The previous/next buttons hover background color.
+/// @prop {Map} button-arrow-color [color: ('gray', 800)] - The previous/next buttons idle arrow color.
+/// @prop {Map} button-hover-arrow-color [color: ('gray', 900)] - The previous/next buttons hover arrow color.
+/// @prop {Map} indicator-dot-color [color: ('gray', 600, .6)] - The idle indicator dot color.
+/// @prop {Map} indicator-active-dot-color [color: ('gray', 900)] - The active indicator dot color.
+/// @requires $indigo-carousel
+$dark-indigo-carousel: extend(
+    $indigo-carousel,
+    (
+        button-background: (
+            color: (
+                'gray' 400,
+            ),
+        ),
+
+        button-hover-background: (
+            color: (
+                'gray' 200,
+            ),
+        ),
+
+        button-arrow-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        button-hover-arrow-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        indicator-dot-color: (
+            color: (
+                'gray',
+                600,
+                0.6,
+            ),
+        ),
+
+        indicator-active-dot-color: (
+            color: (
+                'gray' 900,
+            ),
+        ),
+    )
+);

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

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

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

@@ -0,0 +1,111 @@
+@use '../../../../utils/map' as *;
+@use '../light/chip' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark chip schema based on a mix of $light-chip and $base-dark-chip.
+/// @type {Map}
+/// @requires $light-chip
+$dark-chip: $light-chip;
+
+/// Generates a dark fluent chip schema based on a mix of $fluent-chip and $base-dark-chip.
+/// @type {Map}
+/// @requires $fluent-chip
+$dark-fluent-chip: $fluent-chip;
+
+/// Generates a dark bootstrap chip schema based on a mix of $bootstrap-chip and $ase-dark-chip.
+/// @type {Map}
+/// @requires $bootstrap-chip
+/// @requires $base-dark-chip
+$dark-bootstrap-chip: $bootstrap-chip;
+
+/// Generates a dark indigo chip schema based on a mix of $indigo-chip and $base-dark-chip.
+/// @type {Map}
+/// @prop {Map} text-color [color: ('gray', 700)] - The chip text color.
+/// @prop {Map} hover-text-color [color: ('gray', 700)] - The chip text hover color.
+/// @prop {Map} focus-text-color [color: ('gray', 700)] The focused chip text color.
+/// @prop {Map} background [color: ('surface')] - The chip 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} ghost-background [color: ('gray', 200)] - The chip ghost background 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 {Color} focus-border-color [color: ('gray', 400)] - The chip focus border color.
+/// @requires $indigo-chip
+/// @requires $base-dark-chip
+$dark-indigo-chip: extend(
+    $indigo-chip,
+    (
+        text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        hover-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        focus-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+
+        background: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        focus-background: (
+            color: (
+                'surface',
+            ),
+        ),
+
+        ghost-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        hover-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        focus-border-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+    )
+);

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

@@ -0,0 +1,28 @@
+@use '../../../../utils/map' as *;
+@use '../light/column-actions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access private
+////
+
+/// Generates a dark column actions schema based on a mix of $light-column-actions.
+/// @type {Map}
+/// @requires $light-column-actions
+$dark-column-actions: $light-column-actions;
+
+/// Generates a dark fluent column actions schema based on a mix of $luent-column-actions.
+/// @type {Map}
+/// @requires $fluent-column-actions
+$dark-fluent-column-actions: $fluent-column-actions;
+
+/// Generates a dark bootstrap column actions schema based on a mix of $bootstrap-column-actions.
+/// @type {Map}
+/// @requires $bootstrap-column-actions
+$dark-bootstrap-column-actions: $bootstrap-column-actions;
+
+/// Generates a dark indigo column actions schema based on a mix of $indigo-column-actions.
+/// @type {Map}
+/// @requires $indigo-column-actions
+$dark-indigo-column-actions: $indigo-column-actions;