igniteui-theming 3.3.0 → 3.4.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "3.3.0",
+  "version": "3.4.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/light/_button.scss

@@ -1556,11 +1556,12 @@ $indigo-flat-button: extend(
 /// @prop {Map} focus-border-color [color: 'gray'] - The focus border color of a outlined button.
 /// @prop {Map} focus-visible-border-color [color: 'gray'] - The focus-visible border color of a outlined button.
 /// @prop {Map} active-border-color [color: 'gray'] - The active border color of a outlined button.
-/// @prop {Color} active-background [transparent] - The active background color of a flat button.
-/// @prop {Color} active-foreground [color: ('gray', 900)] - The active text color of a flat button.
+/// @prop {Color} active-background [transparent] - The active background color of a outlined button.
+/// @prop {Color} active-foreground [color: ('gray', 900)] - The active text color of a outlined button.
 /// @prop {Map} shadow-color [color: ('gray', 300)] - The shadow color of a outlined button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of a outlined button.
-/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for flat button.
+/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the outlined button.
+/// @prop {List} size [(rem(28px), rem(32px), rem(36px))] - The size used for the outlined button.
 /// @requires {Map} $material-outlined-button
 /// @requires {Map} $indigo-base-button
 $indigo-outlined-button: extend(
@@ -1636,6 +1637,13 @@ $indigo-outlined-button: extend(
                 rem(20px),
             ),
         ),
+        size: (
+            sizable: (
+                rem(28px),
+                rem(32px),
+                rem(36px),
+            ),
+        ),
     )
 );
 
@@ -1649,7 +1657,8 @@ $indigo-outlined-button: extend(
 /// @prop {Map} focus-visible-foreground [ color: ('gray', 50)] - The focus-visible text color of a raised button.
 /// @prop {Map} active-background [color: ('gray', 50)] - The active background color of a raised button.
 /// @prop {Map} shadow-color [color: ('primary', 200)] - The shadow color of a raised button.
-/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for flat button.
+/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the raised button.
+/// @prop {List} size [(rem(28px), rem(32px), rem(36px))] - The size used for the raised button.
 /// @requires {Map} $material-raised-button
 /// @requires {Map} $indigo-base-button
 $indigo-raised-button: extend(
@@ -1717,6 +1726,13 @@ $indigo-raised-button: extend(
                 rem(20px),
             ),
         ),
+        size: (
+            sizable: (
+                rem(28px),
+                rem(32px),
+                rem(36px),
+            ),
+        ),
     )
 );
 
@@ -1792,6 +1808,7 @@ $indigo-fab-button: extend(
 /// @prop {Map} focus-visible-border-color [color: ('gray' 300)] - The focus-visible border color of the button.
 /// @prop {Map} active-border-color [color: ('gray' 300)] - The active border color of the button.
 /// @prop {List} size [(rem(28px), rem(32px), rem(36px))] - The size used for the icon button.
+/// @prop {Number} default-size [2] - The default size used for the icon button component.
 /// @requires {Map} $material-icon-button
 /// @requires {Map} $indigo-base-button
 $indigo-icon-button: extend(
@@ -1855,6 +1872,7 @@ $indigo-icon-button: extend(
                 rem(36px),
             ),
         ),
+        default-size: 2,
     )
 );
 

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

@@ -12,28 +12,35 @@
 /// @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} 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-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-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-hover-text-color [color: ('secondary', 500)] - The year hover text color.
 /// @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} 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: ('secondary', 500)]- The text color for the current month on hover.
+/// @prop {Map} month-hover-selected-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} 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-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', 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-selected-background-range [color: ('secondary', 50)] - The background color for the selected range.
+/// @prop {Map} date-selected-background-selected-range-hover [color: ('secondary', 100)] - The background color for the selected range on hover/focus.
+/// @prop {Map} date-selected-color-range [contrast-color: ('secondary', 50)] - The text color for the selected range.
+/// @prop {Map} date-selected-color-selected-range-hover [contrast-color: ('secondary', 100)] - The text color for the selected range on hover/focus.
 /// @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.
@@ -49,7 +56,7 @@
 /// @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 {Map} date-disabled-background [color: ('secondary', 50)] - 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} week-number-color [color: ('gray', 500)] - The text color of the week number column.
@@ -84,7 +91,7 @@ $light-calendar: (
     header-text-color: (
         contrast-color: (
             'secondary',
-            500,
+            600,
         ),
     ),
 
@@ -130,7 +137,7 @@ $light-calendar: (
     label-color: (
         color: (
             'gray',
-            400,
+            800,
         ),
     ),
 
@@ -140,22 +147,43 @@ $light-calendar: (
 
     year-current-text-color: (
         color: (
+            'gray',
+            900,
+        ),
+    ),
+
+    year-selected-current-text-color: (
+        contrast-color: (
             'secondary',
-            500,
+            600,
         ),
     ),
 
     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,
         ),
     ),
 
@@ -189,17 +217,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 +238,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,
+            900,
         ),
     ),
 
     date-selected-hover-foreground: (
         contrast-color: (
-            'gray',
-            100,
+            'secondary',
+            900,
         ),
     ),
 
     date-selected-focus-foreground: (
         contrast-color: (
-            'gray',
+            'secondary',
+            900,
+        ),
+    ),
+
+    date-selected-background-range: (
+        color: (
+            'secondary',
+            50,
+        ),
+    ),
+
+    date-selected-background-selected-range-hover: (
+        color: (
+            'secondary',
+            100,
+        ),
+    ),
+
+    date-selected-color-range: (
+        contrast-color: (
+            'secondary',
+            50,
+        ),
+    ),
+
+    date-selected-color-selected-range-hover: (
+        contrast-color: (
+            'secondary',
             100,
         ),
     ),
 
     date-current-text-color: (
         color: (
-            'secondary',
-            500,
+            'gray',
+            800,
         ),
     ),
 
     date-current-hover-foreground: (
         color: (
-            'secondary',
-            500,
+            'gray',
+            800,
         ),
     ),
 
     date-current-focus-foreground: (
         color: (
-            'secondary',
-            500,
+            'gray',
+            800,
         ),
     ),
 
     date-selected-current-foreground: (
         contrast-color: (
             'secondary',
-            500,
+            900,
         ),
     ),
 
     date-selected-current-hover-foreground: (
         contrast-color: (
             'secondary',
-            500,
+            900,
         ),
     ),
 
     date-selected-current-focus-foreground: (
         contrast-color: (
-            'gray',
-            100,
+            'secondary',
+            900,
         ),
     ),
 
-    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 +393,14 @@ $light-calendar: (
     date-disabled-text-color: (
         color: (
             'gray',
-            400,
+            500,
         ),
     ),
 
     date-disabled-background: (
         color: (
-            'gray',
-            100,
+            'secondary',
+            50,
         ),
     ),
 

package/sass/themes/schemas/components/light/_icon-button.scss

@@ -21,6 +21,7 @@
 /// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the material icon button.
 /// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the material icon button.
 /// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the material icon button.
+/// @prop {Number} default-size [2] - The default size used for the icon button.
 $material-base-icon-button: (
     background: transparent,
     border-color: transparent,
@@ -69,6 +70,7 @@ $material-base-icon-button: (
             rem(36px),
         ),
     ),
+    default-size: 2,
 );
 
 /// Generates a material flat icon button schema.
@@ -153,6 +155,7 @@ $light-icon-button: (
 /// @prop {Map} disabled-foreground [color: ('gray', 400)] - The disabled foreground color of the fluent icon button.
 /// @prop {List} border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for the fluent flat icon button.
 /// @prop {List} size [(rem(24px), rem(32px), rem(38px))] - The size used for the fluent icon button.
+/// @prop {Number} default-size [2] - The default size used for the icon button.
 $fluent-base-icon-button: (
     background: transparent,
     foreground: (
@@ -211,6 +214,7 @@ $fluent-base-icon-button: (
             rem(38px),
         ),
     ),
+    default-size: 2,
 );
 
 /// Generates a fluent flat icon button schema.
@@ -339,6 +343,7 @@ $fluent-icon-button: (
 /// @prop {Map} disabled-foreground [color: ('primary', 100)] - The disabled foreground color of the bootstrap icon button.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the bootstrap icon button.
 /// @prop {List} size [(rem(31px), rem(38px), rem(48px))] - The size used for the bootstrap icon button.
+/// @prop {Number} default-size [2] - The default size used for the icon button
 $bootstrap-base-icon-button: (
     background: transparent,
     foreground: (
@@ -374,6 +379,7 @@ $bootstrap-base-icon-button: (
             rem(48px),
         ),
     ),
+    default-size: 2,
 );
 
 /// Generates a bootstrap flat icon button schema.
@@ -533,6 +539,7 @@ $bootstrap-icon-button: (
 /// @prop {Map} disabled-foreground [color: ('gray', 400)] - The disabled foreground color of the indigo icon button.
 /// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the indigo icon button.
 /// @prop {List} size [(rem(28px), rem(32px), rem(36px))] - The size used for the indigo icon button.
+/// @prop {Number} default-size [2] - The default size used for the icon button.
 $indigo-base-icon-button: (
     background: transparent,
     foreground: (
@@ -569,6 +576,7 @@ $indigo-base-icon-button: (
             rem(36px),
         ),
     ),
+    default-size: 2,
 );
 
 /// Generates an indigo flat icon button schema.