igniteui-theming 4.2.0 → 4.3.0

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

@@ -22,7 +22,7 @@
 /// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the button.
 /// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the button.
 /// @prop {Number} default-size [1] - The default size used for the button component.
-$material-base-button: (
+$light-base-button: (
     shadow-color: transparent,
     border-color: transparent,
     hover-border-color: transparent,
@@ -54,25 +54,143 @@ $material-base-button: (
 
 /// @type {Map}
 /// @prop {Color} background [transparent] - The background color of a flat button.
+/// @prop {Map} focus-foreground [color: ('secondary', 500)] - The focus text color of a flat button.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for flat button.
+/// @requires {Map} $light-base-button
+/// @requires {Map} $flat-elevation-button
+$light-flat-button: extend(
+    $light-base-button,
+    $flat-elevation-button,
+    (
+        selector: '[igxButton="flat"], .igx-button--flat',
+        background: transparent,
+        focus-foreground: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+        border-radius: (
+            border-radius: (
+                rem(4px),
+                rem(0),
+                rem(20px),
+            ),
+        ),
+    )
+);
+
+/// @type {Map}
+/// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled focused border color of an outlined button.
+/// @requires {Map} $light-flat-button
+$light-outlined-button: extend(
+    $light-flat-button,
+    (
+        selector: '[igxButton="outlined"], .igx-button--outlined',
+        disabled-border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);
+
+/// @type {Map}
+/// @prop {Map} background [color: ('secondary', 500)] - The background color of an contained button.
+/// @prop {Map} hover-background [color: ('secondary', 300)] - The hover background of a contained button.
+/// @prop {Map} focus-background [color: ('secondary', 300)] - The focus background color of a contained button.
+/// @prop {Map} focus-visible-background [color: ('secondary', 300)] - The focus-visible background color of a contained button.
+/// @prop {Map} active-background [color: ('secondary', 300)] - The active background color of a contained button.
+/// @prop {Map} active-foreground [contrast-color: ('secondary', 300)] - The active text color of a contained button.
+/// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [4] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} focus-elevation [8] - The elevation level, between 0-24, to be used for the focus state.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for contained button.
+/// @requires {Map} $light-base-button
+/// @requires {Map} $light-contained-elevation
+$light-contained-button: extend(
+    $light-base-button,
+    $light-contained-elevation,
+    (
+        selector: '[igxButton="contained"], .igx-button--contained',
+        background: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+        active-background: (
+            color: (
+                'secondary',
+                300,
+            ),
+        ),
+        border-radius: (
+            border-radius: (
+                rem(4px),
+                rem(0),
+                rem(20px),
+            ),
+        ),
+    )
+);
+
+/// @type {Map}
+/// @prop {Number} resting-elevation [6] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [12] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} focus-elevation [12] - The elevation level, between 0-24, to be used for the focus state.
+/// @prop {List} size [(rem(32px), rem(40px), rem(48px))] - The size used for floating button.
+/// @requires {Map} $light-contained-button
+/// @requires {Map} $light-fab-elevation
+$light-fab-button: extend(
+    $light-contained-button,
+    $light-fab-elevation,
+    (
+        selector: '[igxButton="fab"], .igx-button--fab',
+        size: (
+            sizable: (
+                rem(32px),
+                rem(40px),
+                rem(48px),
+            ),
+        ),
+    )
+);
+
+/// Generates a light button schema.
+/// @type {Map}
+/// @requires {Map} $light-flat-button
+/// @requires {Map} $light-outlined-button
+/// @requires {Map} $light-contained-button
+/// @requires {Map} $light-fab-button
+$light-button: (
+    flat: $light-flat-button,
+    outlined: $light-outlined-button,
+    contained: $light-contained-button,
+    fab: $light-fab-button,
+);
+
+/// @type {Map}
+/// @requires {Map} $light-base-button
+$material-base-button: $light-base-button;
+
+/// @type {Map}
 /// @prop {Map} foreground [color: ('secondary', 500)] - The idle text color of a flat button.
 /// @prop {Map} hover-background [color: ('secondary', 500, .05)] - The hover background color of a flat button.
 /// @prop {Map} hover-foreground [color: ('secondary', 500)] - The hover text color of a flat button.
 /// @prop {Map} focus-background [color: ('secondary', 400, .12)] - The focus background color of a flat button.
-/// @prop {Map} focus-foreground [color: ('secondary', 500)] - The focus text color of a flat button.
 /// @prop {Map} focus-visible-background ['secondary', 400, .12)] - The focus-visible background color of a flat button.
 /// @prop {Map} focus-visible-foreground ['secondary', 500)] - The focus-visible text color of a flat button.
 /// @prop {Map} active-background [color: ('secondary', 400, .12)] - The active background color of a flat button.
 /// @prop {Map} active-foreground [color: ('secondary', 500)] - The active text color of a flat button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color a flat button.
-/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for flat button.
 /// @requires {Map} $material-base-button
-/// @requires {Map} $flat-elevation-button
+/// @requires {Map} $light-flat-button
 $material-flat-button: extend(
     $material-base-button,
-    $flat-elevation-button,
+    $light-flat-button,
     (
-        selector: '[igxButton="flat"], .igx-button--flat',
-        background: transparent,
         foreground: (
             color: (
                 'secondary',
@@ -99,12 +217,6 @@ $material-flat-button: extend(
                 0.12,
             ),
         ),
-        focus-foreground: (
-            color: (
-                'secondary',
-                500,
-            ),
-        ),
         focus-visible-background: (
             color: (
                 'secondary',
@@ -132,13 +244,6 @@ $material-flat-button: extend(
             ),
         ),
         disabled-background: transparent,
-        border-radius: (
-            border-radius: (
-                rem(4px),
-                rem(0),
-                rem(20px),
-            ),
-        ),
     )
 );
 
@@ -148,12 +253,12 @@ $material-flat-button: extend(
 /// @prop {Map} focus-border-color [color: ('secondary', 500)] - The focus border color of an outlined button.
 /// @prop {Map} focus-visible-border-color [color: ('secondary', 500)] - The focus-visible border color of an outlined button.
 /// @prop {Map} active-border-color [color: ('secondary', 500)] - The active border color of an outlined button.
-/// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled focused border color of an outlined button.
-/// @requires {Map} $material-flat-button
+/// @requires {Map} $material-base-button
+/// @requires {Map} $light-outlined-button
 $material-outlined-button: extend(
     $material-flat-button,
+    $light-outlined-button,
     (
-        selector: '[igxButton="outlined"], .igx-button--outlined',
         border-color: (
             color: (
                 'secondary',
@@ -184,43 +289,21 @@ $material-outlined-button: extend(
                 500,
             ),
         ),
-        disabled-border-color: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
+        disabled-background: transparent,
     )
 );
 
 /// @type {Map}
-/// @prop {Map} background [color: ('secondary', 500)] - The background color of an contained button.
 /// @prop {Map} foreground [contrast-color: ('secondary', 500)] - The idle text color of a contained button.
-/// @prop {Map} hover-background [color: ('secondary', 300)] - The hover background of a contained button.
 /// @prop {Map} hover-foreground [contrast-color: ('secondary', 300)] - The hover text color of a contained button.
-/// @prop {Map} focus-background [color: ('secondary', 300)] - The focus background color of a contained button.
 /// @prop {Map} focus-foreground [contrast-color: ('secondary', 300)] - The focus text color of a contained button.
-/// @prop {Map} focus-visible-background [color: ('secondary', 300)] - The focus-visible background color of a contained button.
 /// @prop {Map} focus-visible-foreground [contrast-color: ('secondary', 300)] - The focus-visible text color of a contained button.
-/// @prop {Map} active-background [color: ('secondary', 300)] - The active background color of a contained button.
-/// @prop {Map} active-foreground [contrast-color: ('secondary', 300)] - The active text color of a contained button.
-/// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
-/// @prop {Number} hover-elevation [4] - The elevation level, between 0-24, to be used for the hover state.
-/// @prop {Number} focus-elevation [8] - The elevation level, between 0-24, to be used for the focus state.
-/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for contained button.
+/// @requires {Map} $light-contained-button
 /// @requires {Map} $material-base-button
-/// @requires {Map} $material-contained-elevation
 $material-contained-button: extend(
     $material-base-button,
-    $material-contained-elevation,
+    $light-contained-button,
     (
-        selector: '[igxButton="contained"], .igx-button--contained',
-        background: (
-            color: (
-                'secondary',
-                500,
-            ),
-        ),
         foreground: (
             contrast-color: (
                 'secondary',
@@ -263,39 +346,23 @@ $material-contained-button: extend(
                 300,
             ),
         ),
-        active-background: (
-            color: (
-                'secondary',
-                300,
-            ),
-        ),
         active-foreground: (
             contrast-color: (
                 'secondary',
                 300,
             ),
         ),
-        border-radius: (
-            border-radius: (
-                rem(4px),
-                rem(0),
-                rem(20px),
-            ),
-        ),
     )
 );
 
 /// @type {Map}
-/// @prop {Number} resting-elevation [6] - The elevation level, between 0-24, to be used for the resting state.
-/// @prop {Number} hover-elevation [12] - The elevation level, between 0-24, to be used for the hover state.
-/// @prop {Number} focus-elevation [12] - The elevation level, between 0-24, to be used for the focus state.
 /// @prop {List} border-radius [(rem(28px), rem(12px), rem(28px))] - The border radius used for floating button.
-/// @prop {List} size [(rem(32px), rem(40px), rem(48px))] - The size used for floating button.
-/// @requires {Map} $material-contained-button
-/// @requires {Map} $material-fab-elevation
+/// @requires {Map} $light-fab-button
+/// @requires {Map} $material-base-button
 $material-fab-button: extend(
+    $material-base-button,
     $material-contained-button,
-    $material-fab-elevation,
+    $light-fab-button,
     (
         selector: '[igxButton="fab"], .igx-button--fab',
         border-radius: (
@@ -305,13 +372,6 @@ $material-fab-button: extend(
                 rem(28px),
             ),
         ),
-        size: (
-            sizable: (
-                rem(32px),
-                rem(40px),
-                rem(48px),
-            ),
-        ),
     )
 );
 
@@ -321,7 +381,7 @@ $material-fab-button: extend(
 /// @requires {Map} $material-outlined-button
 /// @requires {Map} $material-contained-button
 /// @requires {Map} $material-fab-button
-$light-button: (
+$material-button: (
     flat: $material-flat-button,
     outlined: $material-outlined-button,
     contained: $material-contained-button,
@@ -329,14 +389,14 @@ $light-button: (
 );
 
 /// @type {Map}
-/// @requires {Map} $material-base-button
+/// @requires {Map} $light-base-button
 /// @requires {Map} $flat-elevation-button
 /// @prop {Map} disabled-background [color: ('gray', 200)] - The disabled background color of the button.
 /// @prop {Map} disabled-foreground [color: ('gray', 400)] - The disabled foreground color of the button.
 /// @prop {List} size [(rem(24px), rem(32px), rem(38px))] - The size used for the button.
 /// @prop {Number} default-size [2] - The default size used for the button component.
 $fluent-base-button: extend(
-    $material-base-button,
+    $light-base-button,
     $flat-elevation-button,
     (
         disabled-background: (
@@ -373,10 +433,10 @@ $fluent-base-button: extend(
 /// @prop {Map} active-foreground [color: ('gray', 900)] - The active text color of a flat button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of a flat button.
 /// @prop {List} border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for flat button.
-/// @requires {Map} $material-flat-button
+/// @requires {Map} $light-flat-button
 /// @requires {Map} $fluent-base-button
 $fluent-flat-button: extend(
-    $material-flat-button,
+    $light-flat-button,
     $fluent-base-button,
     (
         foreground: (
@@ -442,10 +502,10 @@ $fluent-flat-button: extend(
 /// @prop {Map} disabled-background [color: ('gray', 200)] - The disabled background color of an outlined button.
 /// @prop {Map} disabled-foreground [color: ('gray', 400, .5)] - The disabled foreground color of an outlined button.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for outlined button.
-/// @requires {Map} $material-outlined-button
+/// @requires {Map} $light-outlined-button
 /// @requires {Map} $fluent-base-button
 $fluent-outlined-button: extend(
-    $material-outlined-button,
+    $light-outlined-button,
     $fluent-base-button,
     (
         border-color: (
@@ -570,10 +630,10 @@ $fluent-outlined-button: extend(
 /// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for contained button.
-/// @requires {Map} $material-contained-button
+/// @requires {Map} $light-contained-button
 /// @requires {Map} $fluent-base-button
 $fluent-contained-button: extend(
-    $material-contained-button,
+    $light-contained-button,
     $fluent-base-button,
     (
         border-color: (
@@ -751,10 +811,10 @@ $fluent-button: (
 /// @prop {Map} disabled-foreground [color: ('primary', 200)] - The disabled foreground color of the button.
 /// @prop {List} size [(rem(31px), rem(38px), rem(48px))] - The size used for the button.
 /// @prop {Number} default-size [2] - The default size used for the button component.
-/// @requires {Map} $material-base-button
+/// @requires {Map} $light-base-button
 /// @requires {Map} $flat-elevation-button
 $bootstrap-base-button: extend(
-    $material-base-button,
+    $light-base-button,
     $flat-elevation-button,
     (
         disabled-foreground: (
@@ -791,10 +851,10 @@ $bootstrap-base-button: extend(
 /// @prop {Map} active-background [transparent] - The active background color of a flat button.
 /// @prop {Map} active-foreground [color: ('primary', 600)] - The active background color of a flat button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of a flat button.
-/// @requires {Map} $material-flat-button
+/// @requires {Map} $light-flat-button
 /// @requires {Map} $bootstrap-base-button
 $bootstrap-flat-button: extend(
-    $material-flat-button,
+    $light-flat-button,
     $bootstrap-base-button,
     (
         foreground: (
@@ -860,10 +920,10 @@ $bootstrap-flat-button: extend(
 /// @prop {Map} disabled-border-color [color: ('primary', 50), lighten: 35%] - The disabled focused border color of an outlined button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of an outlined button.
 /// @prop {Map} shadow-color [color: ('primary', 200, .5)] - The shadow color of an outlined button.
-/// @requires {Map} $material-outlined-button
+/// @requires {Map} $light-outlined-button
 /// @requires {Map} $bootstrap-base-button
 $bootstrap-outlined-button: extend(
-    $material-outlined-button,
+    $light-outlined-button,
     $bootstrap-base-button,
     (
         foreground: (
@@ -969,10 +1029,10 @@ $bootstrap-outlined-button: extend(
 /// @prop {Map} active-background [color: ('primary', 700)] - The active background color of an contained button.
 /// @prop {Map} active-foreground [contrast-color: ('primary', 700)] - The active text color of an contained button.
 /// @prop {Map} shadow-color [color: ('primary', 200)] - The shadow color of a contained button.
-/// @requires {Map} $material-contained-button
+/// @requires {Map} $light-contained-button
 /// @requires {Map} $bootstrap-base-button
 $bootstrap-contained-button: extend(
-    $material-contained-button,
+    $light-contained-button,
     $bootstrap-base-button,
     (
         background: (
@@ -1055,11 +1115,11 @@ $bootstrap-contained-button: extend(
 /// @prop {Map} active-background [color: ('primary', 700)] - The active background color of a fab button.
 /// @prop {Map} active-foreground [contrast-color: ('primary', 700)] - The active text color of a fab button.
 /// @prop {List} border-radius [(rem(15px), rem(12px), rem(28px))] - The border radius used for outlined button.
-/// @requires {Map} $material-fab-button
+/// @requires {Map} $light-fab-button
 /// @requires {Map} $bootstrap-base-button
 /// @requires {Map} $bootstrap-contained-button
 $bootstrap-fab-button: extend(
-    $material-fab-button,
+    $light-fab-button,
     $bootstrap-base-button,
     $bootstrap-contained-button,
     (
@@ -1142,9 +1202,9 @@ $bootstrap-button: (
 );
 
 /// @type {Map}
-/// @requires {Map} $material-base-button
+/// @requires {Map} $light-base-button
 /// @requires {Map} $flat-elevation-button
-$indigo-base-button: extend($material-base-button, $flat-elevation-button);
+$indigo-base-button: extend($light-base-button, $flat-elevation-button);
 
 /// @type {Map}
 /// @prop {Map} foreground [color: ('gray', 700)] - The idle text color of a flat button.
@@ -1160,10 +1220,10 @@ $indigo-base-button: extend($material-base-button, $flat-elevation-button);
 /// @prop {Map} shadow-color [color: ('gray', 300)] - The shadow color of a flat button.
 /// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for flat button.
 /// @prop {List} size [(rem(28px), rem(32px), rem(36px))] - The size used for the flat button.
-/// @requires {Map} $material-flat-button
+/// @requires {Map} $light-flat-button
 /// @requires {Map} $indigo-base-button
 $indigo-flat-button: extend(
-    $material-flat-button,
+    $light-flat-button,
     $indigo-base-button,
     (
         foreground: (
@@ -1244,10 +1304,10 @@ $indigo-flat-button: extend(
 /// @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 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} $light-outlined-button
 /// @requires {Map} $indigo-base-button
 $indigo-outlined-button: extend(
-    $material-outlined-button,
+    $light-outlined-button,
     $indigo-base-button,
     (
         background: transparent,
@@ -1341,10 +1401,10 @@ $indigo-outlined-button: extend(
 /// @prop {Map} shadow-color [color: ('primary', 200)] - The shadow color of a contained button.
 /// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the contained button.
 /// @prop {List} size [(rem(28px), rem(32px), rem(36px))] - The size used for the contained button.
-/// @requires {Map} $material-contained-button
+/// @requires {Map} $light-contained-button
 /// @requires {Map} $indigo-base-button
 $indigo-contained-button: extend(
-    $material-contained-button,
+    $light-contained-button,
     $indigo-base-button,
     (
         foreground: (
@@ -1425,11 +1485,11 @@ $indigo-contained-button: extend(
 /// @prop {Map} focus-visible-foreground [ color: ('gray', 50)] - The focus-visible text color of a fab button.
 /// @prop {List} border-radius [(rem(36px), rem(42px), rem(48px))] - The border radius used for fab button.
 /// @prop {List} size [(rem(36px), rem(42px), rem(48px))] - The size used for the fab button.
-/// @requires {Map} $material-fab-button
+/// @requires {Map} $light-fab-button
 /// @requires {Map} $indigo-base-button
 /// @requires {Map} $indigo-contained-button
 $indigo-fab-button: extend(
-    $material-fab-button,
+    $light-fab-button,
     $indigo-base-button,
     $indigo-contained-button,
     (

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

@@ -49,12 +49,8 @@
 /// @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', 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.
@@ -70,9 +66,6 @@
 /// @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.
@@ -266,13 +259,6 @@ $light-calendar: (
         ),
     ),
 
-    date-selected-background: (
-        color: (
-            'secondary',
-            500,
-        ),
-    ),
-
     date-selected-hover-background: (
         color: (
             'secondary',
@@ -308,27 +294,6 @@ $light-calendar: (
         ),
     ),
 
-    date-selected-text-color: (
-        contrast-color: (
-            'secondary',
-            600,
-        ),
-    ),
-
-    date-selected-hover-foreground: (
-        contrast-color: (
-            'secondary',
-            600,
-        ),
-    ),
-
-    date-selected-focus-foreground: (
-        contrast-color: (
-            'secondary',
-            600,
-        ),
-    ),
-
     date-selected-color-range: (
         contrast-color: (
             'secondary',
@@ -357,27 +322,6 @@ $light-calendar: (
         ),
     ),
 
-    date-current-text-color: (
-        color: (
-            'gray',
-            800,
-        ),
-    ),
-
-    date-current-hover-foreground: (
-        contrast-color: (
-            'secondary',
-            200,
-        ),
-    ),
-
-    date-current-focus-foreground: (
-        contrast-color: (
-            'secondary',
-            200,
-        ),
-    ),
-
     date-selected-current-foreground: (
         contrast-color: (
             'secondary',
@@ -563,12 +507,77 @@ $light-calendar: (
     ),
 );
 
+/// Generates a material calendar schema.
+/// @type {Map}
+/// @prop {Map} date-selected-background [color: ('secondary', 500)] - The background color for the selected date.
+/// @prop {Map} date-selected-text-color [contrast-color: ('secondary', 600)] - The text color for the selected date.
+/// @prop {Map} date-selected-hover-foreground [contrast-color: ('secondary', 600)] - The hover text color for the selected date.
+/// @prop {Map} date-selected-focus-foreground [contrast-color: ('secondary', 600)] - The focus text color for the selected 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.
+/// @requires {Map} $light-calendar
+$material-calendar: extend(
+    $light-calendar,
+    (
+        date-selected-background: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+
+        date-selected-text-color: (
+            contrast-color: (
+                'secondary',
+                600,
+            ),
+        ),
+
+        date-selected-hover-foreground: (
+            contrast-color: (
+                'secondary',
+                600,
+            ),
+        ),
+
+        date-selected-focus-foreground: (
+            contrast-color: (
+                'secondary',
+                600,
+            ),
+        ),
+
+        date-current-text-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        date-current-hover-foreground: (
+            contrast-color: (
+                'secondary',
+                200,
+            ),
+        ),
+
+        date-current-focus-foreground: (
+            contrast-color: (
+                'secondary',
+                200,
+            ),
+        ),
+    )
+);
+
 /// Generates a fluent calendar schema.
 /// @type {Map}
 /// @prop {Color} date-current-text-color [color: 'surface'] - The text color for the current date.
 /// @prop {Map} date-current-bg-color [color: ('primary', 500)] - The background color for the current date.
 /// @prop {Map} date-selected-background [color: ('primary', 50)] - The background color for the selected date.
 /// @prop {Map} date-selected-text-color [color: ('primary', 100)] - The text color for the selected date.
+/// @prop {Map} date-selected-focus-foreground [contrast-color: ('primary', 50)] - The focus text color for the selected date.
 /// @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', 500)] - The hover background color for the current date.
@@ -715,6 +724,7 @@ $fluent-calendar: extend(
 
 /// Generates a bootstrap calendar schema.
 /// @type {Map}
+/// @prop {Map} content-text-color [color: ('gray', 900)] - The main content text color.
 /// @prop {Map} year-hover-text-color [color: ('primary', 500)] - The year hover text color.
 /// @prop {Map} date-special-background [color: ('warn')] - The background color used for special dates.
 /// @prop {Map} month-hover-text-color [color: ('primary', 500)] - The month hover text color.