igniteui-theming 4.0.0 → 4.1.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "4.0.0",
+  "version": "4.1.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

@@ -12,57 +12,39 @@
 
 /// 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-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,
     (
-        date-disabled-text-color: (
+        date-disabled-foreground: (
             color: (
                 'gray',
-                500,
-            ),
-        ),
-
-        date-selected-hover-foreground: (
-            contrast-color: (
-                'secondary',
-                500,
-            ),
-        ),
-
-        date-selected-focus-foreground: (
-            contrast-color: (
-                'secondary',
-                500,
+                300,
             ),
         ),
     )
 );
 
-/// 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-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} 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} 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.
+/// @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.
 /// @requires $bootstrap-calendar
-/// @requires $dark-base-calendar
 $dark-bootstrap-calendar: extend(
     $bootstrap-calendar,
     (
@@ -88,40 +70,40 @@ $dark-bootstrap-calendar: extend(
             ),
         ),
 
-        picker-text-color: (
+        picker-foreground: (
             contrast-color: (
                 'surface',
             ),
         ),
 
-        date-selected-text-color: (
+        date-selected-foreground: (
             contrast-color: (
                 'secondary',
                 600,
             ),
         ),
 
-        date-selected-hover-text-color: (
+        date-selected-hover-foreground: (
             contrast-color: (
                 'surface',
             ),
         ),
 
-        date-selected-focus-text-color: (
+        date-selected-focus-foreground: (
             contrast-color: (
                 'surface',
             ),
         ),
 
-        date-current-text-color: (
+        date-current-foreground: (
             contrast-color: 'surface',
         ),
 
-        date-current-hover-text-color: (
+        date-current-hover-foreground: (
             contrast-color: 'surface',
         ),
 
-        date-current-focus-text-color: (
+        date-current-focus-foreground: (
             contrast-color: 'surface',
         ),
 
@@ -137,156 +119,5 @@ $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
-/// @requires $dark-base-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,
-            ),
-        ),
-    )
-);
+$dark-indigo-calendar: extend($indigo-calendar);

package/sass/themes/schemas/components/dark/_drop-down.scss

@@ -33,6 +33,8 @@ $dark-drop-down: extend($light-drop-down, $base-dark-drop-down);
 /// @prop {Map} selected-item-text-color [contrast-color: 'surface'] - The drop-down selected item text color.
 /// @prop {Map} selected-hover-item-text-color [contrast-color: 'surface'] - The drop-down selected item hover text color.
 /// @prop {Map} selected-focus-item-text-color [contrast-color: 'surface'] - The drop-down selected item focus text color.
+/// @prop {Map} border-color [color: ('gray', 400)] - The border color used for the drop-down items on focus state.
+/// @prop {Map} disabled-item-text-color [color: ('gray', 200)] - The drop-down disabled item text color.
 /// @requires $fluent-drop-down
 /// @requires $base-dark-drop-down
 $dark-fluent-drop-down: extend(
@@ -48,6 +50,18 @@ $dark-fluent-drop-down: extend(
         selected-focus-item-text-color: (
             contrast-color: 'surface',
         ),
+        border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        disabled-item-text-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
     )
 );
 
@@ -55,6 +69,7 @@ $dark-fluent-drop-down: extend(
 /// @type {Map}
 /// @prop {Map} item-text-color [contrast-color: 'surface'] - The drop-down text color.
 /// @prop {Map} hover-item-text-color [contrast-color: 'surface'] - The drop-down hover text color.
+/// @prop {Map} disabled-item-text-color [color: ('gray', 200)] - The drop-down disabled item text color.
 /// @requires $bootstrap-drop-down
 /// @requires $base-dark-drop-down
 $dark-bootstrap-drop-down: extend(
@@ -67,6 +82,12 @@ $dark-bootstrap-drop-down: extend(
         hover-item-text-color: (
             contrast-color: 'surface',
         ),
+        disabled-item-text-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
     )
 );