igniteui-theming 4.1.0-beta.1 → 5.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "4.1.0-beta.1",
+  "version": "5.0.0-beta.1",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

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

@@ -9,41 +9,54 @@
 
 /// Generates a dark calendar schema.
 /// @type {Map}
-
-/// 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
-$dark-calendar: extend($light-calendar);
-
-/// Generates a dark fluent calendar schema.
-/// @type {Map}
-/// @prop {Map} date-disabled-foreground [color: ('gray', 300)] - The foreground of disabled dates.
-/// @requires $fluent-calendar
-$dark-fluent-calendar: extend(
-    $fluent-calendar,
+$dark-calendar: extend(
+    $light-calendar,
     (
-        date-disabled-foreground: (
+        date-disabled-text-color: (
             color: (
                 'gray',
-                300,
+                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);
+
 /// 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-foreground [contrast-color: ('surface')]- The idle picker month/year color.
-/// @prop {Map} date-selected-foreground [contrast-color: ('secondary', 600)] - The text color for the selected date.
-/// @prop {Map} date-current-foreground [contrast-color: 'surface'] - The text color for the current date.
-/// @prop {Map} date-current-hover-foreground [color: ('surface')] - The hover text color for the current date.
-/// @prop {Map} date-current-focus-foreground [color: ('surface')] - The focus text color for the current date.
+/// @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-foreground [contrast-color: ('surface')] - The hover text color for the selected date.
-/// @prop {Map} date-selected-focus-foreground [contrast-color: ('surface')] - The focus text color for the selected date.
+/// @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
 $dark-bootstrap-calendar: extend(
     $bootstrap-calendar,
@@ -70,40 +83,40 @@ $dark-bootstrap-calendar: extend(
             ),
         ),
 
-        picker-foreground: (
+        picker-text-color: (
             contrast-color: (
                 'surface',
             ),
         ),
 
-        date-selected-foreground: (
+        date-selected-text-color: (
             contrast-color: (
                 'secondary',
                 600,
             ),
         ),
 
-        date-selected-hover-foreground: (
+        date-selected-hover-text-color: (
             contrast-color: (
                 'surface',
             ),
         ),
 
-        date-selected-focus-foreground: (
+        date-selected-focus-text-color: (
             contrast-color: (
                 'surface',
             ),
         ),
 
-        date-current-foreground: (
+        date-current-text-color: (
             contrast-color: 'surface',
         ),
 
-        date-current-hover-foreground: (
+        date-current-hover-text-color: (
             contrast-color: 'surface',
         ),
 
-        date-current-focus-foreground: (
+        date-current-focus-text-color: (
             contrast-color: 'surface',
         ),
 
@@ -119,5 +132,155 @@ $dark-bootstrap-calendar: extend(
 
 /// 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
-$dark-indigo-calendar: extend($indigo-calendar);
+$dark-indigo-calendar: extend(
+    $indigo-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,
+            ),
+        ),
+    )
+);