igniteui-theming 3.3.2 → 4.0.0-beta.1

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

@@ -11,47 +11,74 @@
 /// @type {Map}
 /// @prop {Map} content-background [color: 'surface'] - The main content background color.
 /// @prop {Map} content-text-color [contrast-color: 'surface'] - The main content text color.
+/// @prop {Map} border-color [color: ('gray', 300)] - The calendar border color.
+///
 /// @prop {Map} header-background [color: ('secondary', 500)] - The header background color.
-/// @prop {Map} header-text-color [contrast-color: ('secondary', 500)] - The header text color.
+/// @prop {Map} header-text-color [contrast-color: ('secondary', 600)] - The header text color.
+///
+/// @prop {Map} picker-background-color [color: 'surface'] - The igx calendar picker background color.
 /// @prop {Map} picker-arrow-color [color: ('gray', 800)] - The idle picker arrow color.
 /// @prop {Map} picker-arrow-hover-color [color: ('secondary', 500)] - 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 [color: ('secondary', 500)]-  The hover picker month/year color.
+///
 /// @prop {Map} inactive-text-color [color: ('gray', 400)] - The text color for previous and next month dates.
-/// @prop {Map} label-color [color: ('gray', 400)] - The text color for weekday labels.
+/// @prop {Map} label-color [color: ('gray', 800)] - The text color for weekday labels.
 /// @prop {Map} weekend-text-color [contrast-color: 'surface'] - The text color for weekend days.
-/// @prop {Map} year-current-text-color [color: ('secondary', 500)] - The text color for the current/selected year.
-/// @prop {Map} year-hover-text-color [color: ('secondary', 500)] - The year hover text color.
+///
+/// @prop {Map} month-current-text-color [color: ('gray', 900)]- The text color for the current month.
+/// @prop {Map} month-selected-current-text-color [contrast-color: ('secondary', 600)]- The text color for the current/selected month.
+/// @prop {Map} month-hover-current-text-color [color: ('gray', 900)]- The text color for the current month on hover.
 /// @prop {Map} month-hover-text-color [contrast-color: ('gray', 200)] - The month hover text color.
-/// @prop {Map} month-hover-background [color: ('gray', 200)] - The month hover text color.
-/// @prop {Map} month-current-text-color [color: ('secondary', 500)]- The text color for the current/selected month.
-/// @prop {Map} month-hover-current-text-color [color: ('secondary', 500)]- The text color for the current/selected month on hover.
-/// @prop {Map} date-hover-background [color: ('gray', 200)] - The hover date background color.
-/// @prop {Map} date-focus-background [color: ('gray', 200)] - The focus date background color.
+/// @prop {Map} month-hover-background [color: ('gray', 200)] - The background color for the selected month on hover in months view.
+/// @prop {Map} month-hover-selected-current-text-color [contrast-color: ('secondary', 600)] - The text color for the current/selected month on hover.
+/// @prop {Map} month-focus-selected-current-text-color [contrast-color: ('secondary', 600)] - The text color for the current/selected month on focus.
+/// @prop {Map} month-focus-text-color [contrast-color: ('secondary', 600)]- The text color for the focused month in months view.
+/// @prop {Map} month-focus-background [color: ('secondary', 500)]- The background color for the focused month in months view.
+///
+/// @prop {Map} year-hover-text-color [contrast-color: ('gray', 200)] - The year hover text color.
+/// @prop {Map} year-current-text-color [color: ('gray', 900)] - The text color for the current year.
+/// @prop {Map} year-selected-current-text-color [contrast-color: ('secondary', 600)] - The text color for the current/selected year.
+/// @prop {Map} year-focus-text-color [contrast-color: ('secondary', 600)]- The text color for the selected year in years view.
+/// @prop {Map} year-focus-background [color: ('secondary', 500)]- The background color for the selected year on focus in years view.
+/// @prop {Map} year-hover-background [color: ('grey', 200)]- The background color for the selected year on hover in years view.
+/// @prop {Map} year-hover-selected-current-text-color [contrast-color: ('secondary', 600)] - The text color for the current/selected year on hover.
+/// @prop {Map} year-focus-selected-current-text-color [contrast-color: ('secondary', 600)] - The text color for the current/selected year on focus.
+///
+/// @prop {Map} date-hover-background [color: ('secondary', 100)] - The hover date background color.
+/// @prop {Map} date-focus-background [color: ('secondary', 100)] - The focus date background color.
+/// @prop {Map} date-hover-foreground [contrast-color: 'secondary', 100] - The hover date text color.
+/// @prop {Map} date-focus-foreground [contrast-color: 'secondary', 100] - The focused date text color.
 /// @prop {Map} date-selected-background [color: ('secondary', 500)] - The background color for the selected date.
-/// @prop {Map} date-selected-text-color [contrast-color: ('secondary', 500)] - The text color for the selected date.
-/// @prop {Map} date-selected-hover-background [color: ('gray', 100, .18)] - The hover background color for the selected date.
-/// @prop {Map} date-selected-focus-background [color: ('gray', 100, .18)] - The focus background color for the selected date.
-/// @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.
-/// @prop {Map} date-current-bg-color [color: (transparent)] - The background color for the current date.
-/// @prop {Map} date-current-text-color [color: ('secondary', 500)] - The text color for the current date.
-/// @prop {Map} date-current-hover-foreground [color: ('secondary', 500)] - The hover text color for the current date.
-/// @prop {Map} date-current-focus-foreground [color: ('secondary', 500)] - The focus text color for the current date.
-/// @prop {Map} date-current-hover-background [color: ('gray', 200)] - The hover background color for the current date.
-/// @prop {Map} date-current-focus-background [color: ('gray', 200)] - The focus background color for the current date.
-/// @prop {Map} date-selected-current-background [color: ('gray', 100, .18)] - The background color for the selected/current date.
-/// @prop {Map} date-selected-current-foreground [contrast-color: ('secondary', 500)] - The text color for the selected/current date.
-/// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('secondary', 500)] - The hover text color for the selected/current date.
-/// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('gray', 100)] - The focus text color for the selected/current date.
-/// @prop {Map} date-selected-current-hover-background [color: ('gray', 100, .18)] - The hover background color for the selected/current date.
-/// @prop {Map} date-selected-current-focus-background [color: ('gray', 100, .18)] - The focus background color for the selected/current date.
+/// @prop {Map} date-selected-text-color [contrast-color: ('secondary', 600)] - The text color for the selected date.
+/// @prop {Map} date-selected-hover-background [color: ('secondary', 700)] - The hover background color for the selected date.
+/// @prop {Map} date-selected-focus-background [color: ('secondary', 700)] - The focus background color for the selected date.
+/// @prop {Map} date-selected-hover-foreground [contrast-color: ('gray', 600)] - The hover text color for the selected date.
+/// @prop {Map} date-selected-focus-foreground [contrast-color: ('gray', 600)] - The focus text color for the selected date.
+/// @prop {Map} date-selected-color-range [contrast-color: ('secondary', 50)] - The text color for the selected range.
+/// @prop {Map} date-selected-background-range [color: ('secondary', 50)] - The background color for the selected range.
+/// @prop {Map} date-selected-color-range-hover [contrast-color: ('secondary', 100)] - The text color for the selected range on hover/focus.
+/// @prop {Map} date-selected-background-range-hover [color: ('secondary', 100)] - The background color for the selected range on hover.
+/// @prop {Map} date-selected-current-background [color: ('secondary', 500)] - The background color for the selected/current date.
+/// @prop {Map} date-selected-current-foreground [contrast-color: ('secondary', 600)] - The text color for the selected/current date.
+/// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('secondary', 600)] - The hover text color for the selected/current date.
+/// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('secondary', 600)] - The focus text color for the selected/current date.
+/// @prop {Map} date-selected-current-hover-background [color: ('secondary', 700)] - The hover background color for the selected/current date.
+/// @prop {Map} date-selected-current-focus-background [color: ('secondary', 700)] - The focus background color for the selected/current date.
+/// @prop {Map} current-outline [color: ('gray', 600)] - The outline color for the current date.
+/// @prop {Map} current-outline-hover [color: ('surface', 500)] - The outline color for the current date on hover.
+/// @prop {Map} current-outline-focus [color: ('surface', 500)] - The outline color for the current date on focus.
+/// @prop {Map} current-selected-outline [color: ('surface', 500)] - The outline color for the current selected date.
+/// @prop {Map} date-current-bg-color [color: ('surface', 500)] - The background color for the current date.
+/// @prop {Map} date-current-text-color [color: ('gray', 800)] - The text color for the current date.
+/// @prop {Map} date-current-hover-foreground [contrast-color: ('secondary', 200)] - The hover text color for the current date.
+/// @prop {Map} date-current-focus-foreground [contrast-color: ('secondary', 200)] - The focus text color for the current date.
+/// @prop {Map} date-current-hover-background [color: ('secondary', 100)] - The hover background color for the current date.
+/// @prop {Map} date-current-focus-background [color: ('secondary', 100)] - The focus background color for the current date.
 /// @prop {Map} date-special-background [color: ('gray', 100)] - The background color used for special dates.
 /// @prop {Map} date-special-text-color [color: ('gray', 900)] - The text color used for special dates.
-/// @prop {Map} date-disabled-text-color [color: ('gray', 400)] - The text color for disabled dates.
-/// @prop {Map} date-disabled-background [color: ('gray', 100)] - The background color for disabled dates.
-/// @prop {Color} picker-background-color [color: 'surface'] - The igx calendar picker background color.
-/// @prop {Map} border-color [color: ('gray', 300)] - The calendar border color.
+/// @prop {Map} date-disabled-text-color [color: ('gray', 500)] - The text color for disabled dates.
+/// @prop {Map} date-disabled-background [color: ('secondary', 50)] - The background color for disabled dates.
 /// @prop {Map} week-number-color [color: ('gray', 500)] - The text color of the week number column.
 /// @prop {Map} week-number-background [color: ('gray', 200)] - The background color of the week number column.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar.
@@ -84,7 +111,7 @@ $light-calendar: (
     header-text-color: (
         contrast-color: (
             'secondary',
-            500,
+            600,
         ),
     ),
 
@@ -92,77 +119,122 @@ $light-calendar: (
         color: 'surface',
     ),
 
-    picker-arrow-color: (
+    picker-text-color: (
         color: (
             'gray',
             800,
         ),
     ),
 
-    picker-arrow-hover-color: (
+    picker-text-hover-color: (
         color: (
             'secondary',
             500,
         ),
     ),
 
-    picker-text-color: (
+    picker-arrow-color: (
         color: (
             'gray',
             800,
         ),
     ),
 
-    picker-text-hover-color: (
+    picker-arrow-hover-color: (
         color: (
             'secondary',
             500,
         ),
     ),
 
-    inactive-text-color: (
+    year-current-text-color: (
         color: (
             'gray',
-            400,
+            900,
         ),
     ),
 
-    label-color: (
-        color: (
-            'gray',
-            400,
+    year-selected-current-text-color: (
+        contrast-color: (
+            'secondary',
+            600,
         ),
     ),
 
-    weekend-text-color: (
-        contrast-color: 'surface',
+    year-focus-text-color: (
+        contrast-color: (
+            'secondary',
+            600,
+        ),
     ),
 
-    year-current-text-color: (
+    year-focus-background: (
         color: (
             'secondary',
             500,
         ),
     ),
 
+    year-hover-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
+    year-hover-text-color: (
+        contrast-color: (
+            'gray',
+            200,
+        ),
+    ),
+
     month-current-text-color: (
         color: (
+            'gray',
+            900,
+        ),
+    ),
+
+    month-selected-current-text-color: (
+        contrast-color: (
             'secondary',
-            500,
+            600,
         ),
     ),
 
     month-hover-current-text-color: (
         color: (
+            'gray',
+            900,
+        ),
+    ),
+
+    month-hover-selected-current-text-color: (
+        contrast-color: (
             'secondary',
-            500,
+            600,
         ),
     ),
 
-    year-hover-text-color: (
-        color: (
+    year-hover-selected-current-text-color: (
+        contrast-color: (
             'secondary',
-            500,
+            600,
+        ),
+    ),
+
+    year-focus-selected-current-text-color: (
+        contrast-color: (
+            'secondary',
+            600,
+        ),
+    ),
+
+    month-focus-selected-current-text-color: (
+        contrast-color: (
+            'secondary',
+            600,
         ),
     ),
 
@@ -180,6 +252,20 @@ $light-calendar: (
         ),
     ),
 
+    month-focus-text-color: (
+        contrast-color: (
+            'secondary',
+            900,
+        ),
+    ),
+
+    month-focus-background: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
     date-selected-background: (
         color: (
             'secondary',
@@ -189,17 +275,15 @@ $light-calendar: (
 
     date-selected-hover-background: (
         color: (
-            'gray',
-            100,
-            0.18,
+            'secondary',
+            700,
         ),
     ),
 
     date-selected-focus-background: (
         color: (
-            'gray',
-            100,
-            0.18,
+            'secondary',
+            700,
         ),
     ),
 
@@ -212,110 +296,141 @@ $light-calendar: (
 
     date-selected-current-hover-background: (
         color: (
-            'gray',
-            100,
-            0.18,
+            'secondary',
+            700,
         ),
     ),
 
     date-selected-current-focus-background: (
         color: (
-            'gray',
-            100,
-            0.18,
+            'secondary',
+            700,
         ),
     ),
 
     date-selected-text-color: (
         contrast-color: (
             'secondary',
-            500,
+            600,
         ),
     ),
 
     date-selected-hover-foreground: (
         contrast-color: (
-            'gray',
-            100,
+            'secondary',
+            600,
         ),
     ),
 
     date-selected-focus-foreground: (
         contrast-color: (
-            'gray',
+            'secondary',
+            600,
+        ),
+    ),
+
+    date-selected-color-range: (
+        contrast-color: (
+            'secondary',
+            50,
+        ),
+    ),
+
+    date-selected-background-range: (
+        color: (
+            'secondary',
+            50,
+        ),
+    ),
+
+    date-selected-color-range-hover: (
+        contrast-color: (
+            'secondary',
             100,
         ),
     ),
 
-    date-current-text-color: (
+    date-selected-background-range-hover: (
         color: (
             'secondary',
-            500,
+            100,
         ),
     ),
 
-    date-current-hover-foreground: (
+    date-current-text-color: (
         color: (
+            'gray',
+            800,
+        ),
+    ),
+
+    date-current-hover-foreground: (
+        contrast-color: (
             'secondary',
-            500,
+            200,
         ),
     ),
 
     date-current-focus-foreground: (
-        color: (
+        contrast-color: (
             'secondary',
-            500,
+            200,
         ),
     ),
 
     date-selected-current-foreground: (
         contrast-color: (
             'secondary',
-            500,
+            600,
         ),
     ),
 
     date-selected-current-hover-foreground: (
         contrast-color: (
             'secondary',
-            500,
+            600,
         ),
     ),
 
     date-selected-current-focus-foreground: (
         contrast-color: (
-            'gray',
-            100,
+            'secondary',
+            600,
         ),
     ),
 
-    date-current-bg-color: transparent,
+    date-current-bg-color: (
+        color: (
+            'surface',
+            500,
+        ),
+    ),
 
     date-current-hover-background: (
         color: (
-            'gray',
-            200,
+            'secondary',
+            100,
         ),
     ),
 
     date-current-focus-background: (
         color: (
-            'gray',
-            200,
+            'secondary',
+            100,
         ),
     ),
 
     date-hover-background: (
         color: (
-            'gray',
-            200,
+            'secondary',
+            100,
         ),
     ),
 
     date-focus-background: (
         color: (
-            'gray',
-            200,
+            'secondary',
+            100,
         ),
     ),
 
@@ -336,14 +451,14 @@ $light-calendar: (
     date-disabled-text-color: (
         color: (
             'gray',
-            400,
+            500,
         ),
     ),
 
     date-disabled-background: (
         color: (
-            'gray',
-            100,
+            'secondary',
+            50,
         ),
     ),
 
@@ -361,6 +476,24 @@ $light-calendar: (
         ),
     ),
 
+    inactive-text-color: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+
+    label-color: (
+        color: (
+            'gray',
+            800,
+        ),
+    ),
+
+    weekend-text-color: (
+        contrast-color: 'surface',
+    ),
+
     border-radius: (
         border-radius: (
             rem(4px),
@@ -368,6 +501,7 @@ $light-calendar: (
             rem(20px),
         ),
     ),
+
     date-border-radius: (
         border-radius: (
             rem(20px),
@@ -375,6 +509,7 @@ $light-calendar: (
             rem(20px),
         ),
     ),
+
     month-border-radius: (
         border-radius: (
             rem(20px),
@@ -382,7 +517,50 @@ $light-calendar: (
             rem(20px),
         ),
     ),
+
     default-size: 2,
+
+    current-outline: (
+        color: (
+            'gray',
+            600,
+        ),
+    ),
+
+    current-outline-hover: (
+        color: (
+            'surface',
+            500,
+        ),
+    ),
+
+    current-outline-focus: (
+        color: (
+            'surface',
+            500,
+        ),
+    ),
+
+    current-selected-outline: (
+        color: (
+            'surface',
+            500,
+        ),
+    ),
+
+    date-hover-foreground: (
+        contrast-color: (
+            'secondary',
+            100,
+        ),
+    ),
+
+    date-focus-foreground: (
+        contrast-color: (
+            'secondary',
+            100,
+        ),
+    ),
 );
 
 /// Generates a fluent calendar schema.
@@ -559,7 +737,7 @@ $fluent-calendar: extend(
 /// @prop {Map} date-selected-focus-foreground [contrast-color: ('gray', 900)] - The focus text color for the selected date.
 /// @prop {Color} date-selected-text-color [color: 'surface'] - The text color for the selected date.
 /// @prop {Color} content-background [color: 'surface'] - The main content background color.
-/// @prop {Map} week-number-background [('gray', 300, .5)] - The background color of the week number column.
+/// @prop {Map} week-number-background [('gray', 200)] - The background color of the week number column.
 /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('primary', 600)] - The hover text color for the selected/current date.
 /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('primary', 600)] - The focus text color for the selected/current date.
 /// @prop {Map} date-current-hover-background [color: ('primary', 600)] - The hover background color for the current date.
@@ -798,8 +976,7 @@ $bootstrap-calendar: extend(
         week-number-background: (
             color: (
                 'gray',
-                300,
-                0.5,
+                200,
             ),
         ),