igniteui-theming 1.4.5 → 1.4.6

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

@@ -0,0 +1,908 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light calendar schema.
+/// @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} header-background [color: ('secondary', 500)] - The header background color.
+/// @prop {Map} header-text-color [contrast-color: ('secondary', 500)] - 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} 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-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} 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-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} 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 {Number} border-radius [4px] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} date-border-radius [20px] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} month-border-radius [20px] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent.
+$light-calendar: (
+    content-background: (
+        color: 'surface',
+    ),
+
+    content-text-color: (
+        contrast-color: 'surface',
+    ),
+
+    border-color: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+
+    header-background: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    header-text-color: (
+        contrast-color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    picker-background-color: (
+        color: 'surface',
+    ),
+
+    picker-arrow-color: (
+        color: (
+            'gray',
+            800,
+        ),
+    ),
+
+    picker-arrow-hover-color: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    picker-text-color: (
+        color: (
+            'gray',
+            800,
+        ),
+    ),
+
+    picker-text-hover-color: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    inactive-text-color: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+
+    label-color: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+
+    weekend-text-color: (
+        contrast-color: 'surface',
+    ),
+
+    year-current-text-color: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    month-current-text-color: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    month-hover-current-text-color: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    year-hover-text-color: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    month-hover-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
+    month-hover-text-color: (
+        contrast-color: (
+            'gray',
+            200,
+        ),
+    ),
+
+    date-selected-background: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    date-selected-hover-background: (
+        color: (
+            'gray',
+            100,
+            0.18,
+        ),
+    ),
+
+    date-selected-focus-background: (
+        color: (
+            'gray',
+            100,
+            0.18,
+        ),
+    ),
+
+    date-selected-current-background: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    date-selected-current-hover-background: (
+        color: (
+            'gray',
+            100,
+            0.18,
+        ),
+    ),
+
+    date-selected-current-focus-background: (
+        color: (
+            'gray',
+            100,
+            0.18,
+        ),
+    ),
+
+    date-selected-text-color: (
+        contrast-color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    date-selected-hover-foreground: (
+        contrast-color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    date-selected-focus-foreground: (
+        contrast-color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    date-current-text-color: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    date-current-hover-foreground: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    date-current-focus-foreground: (
+        color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    date-selected-current-foreground: (
+        contrast-color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    date-selected-current-hover-foreground: (
+        contrast-color: (
+            'secondary',
+            500,
+        ),
+    ),
+
+    date-selected-current-focus-foreground: (
+        contrast-color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    date-current-bg-color: transparent,
+
+    date-current-hover-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
+    date-current-focus-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
+    date-hover-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
+    date-focus-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
+    date-special-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    date-special-text-color: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+
+    date-disabled-text-color: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+
+    date-disabled-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+
+    week-number-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+
+    week-number-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
+    border-radius: rem(4px),
+    date-border-radius: rem(20px),
+    month-border-radius: rem(20px),
+);
+
+/// 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-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.
+/// @prop {Map} date-current-focus-background [color: ('primary', 600)] - The focus background color for the current date.
+/// @prop {Map} date-selected-current-hover-background [color: ('primary', 600)] - The hover background color for the selected/current date.
+/// @prop {Map} date-selected-current-focus-background [color: ('primary', 600)] - The focus background color for the selected/current date.
+/// @prop {Map} date-current-hover-foreground [color: ('primary', 600)] - The hover text color for the current date.
+/// @prop {Map} date-current-focus-foreground [color: ('primary', 600)] - The focus text color for the current date.
+/// @prop {Map} date-selected-current-foreground [contrast-color: ('primary', 600)] - The text color for the selected/current date.
+/// @prop {Number} border-radius [0] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} date-border-radius [0] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} month-border-radius [0] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-calendar
+$fluent-calendar: extend(
+    $light-calendar,
+    (
+        date-current-text-color: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-current-hover-foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+        date-current-focus-foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-current-bg-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        date-current-hover-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        date-current-focus-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-selected-current-foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-selected-current-hover-foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-selected-current-focus-foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-selected-current-hover-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-selected-current-focus-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-selected-background: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+
+        date-selected-text-color: (
+            contrast-color: (
+                'primary',
+                50,
+            ),
+        ),
+
+        date-selected-hover-foreground: (
+            contrast-color: (
+                'primary',
+                50,
+            ),
+        ),
+
+        date-selected-focus-foreground: (
+            contrast-color: (
+                'primary',
+                50,
+            ),
+        ),
+
+        border-radius: rem(0),
+        date-border-radius: rem(0),
+        month-border-radius: rem(0),
+    )
+);
+
+/// Generates a bootstrap calendar schema.
+/// @type {Map}
+/// @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.
+/// @prop {Map} month-hover-current-text-color [color: ('primary', 500)] - The current month hover text color.
+/// @prop {Map} month-hover-background [color: ('gray', 100)] - The month hover text color.
+/// @prop {Map} picker-text-hover-color [color: ('primary', 500)]-  The hover picker month/year color.
+/// @prop {Map} picker-arrow-color [color: ('primary', 500)] - The idle picker arrow color.
+/// @prop {Map} picker-arrow-hover-color [color: ('primary', 800)] - The picker hover arrow color.
+/// @prop {Map} picker-text-color [color: ('gray', 900)]- The idle picker month/year color.
+/// @prop {Map} picker-background-color [color: ('gray', 100)] - The igx calendar picker background color.
+/// @prop {Map} year-current-text-color [color: ('primary', 500)] - The text color for the current/selected year.
+/// @prop {Map} month-current-text-color [color: ('primary', 500)]- The text color for the current/selected month.
+/// @prop {Map} label-color [color: 'info'] - The text color for weekday labels.
+/// @prop {Color} date-current-text-color [color: 'surface'] - The text color for the current date.
+/// @prop {Map} date-hover-background [color: ('primary', 500)] - The hover date background color.
+/// @prop {Map} date-focus-background [color: ('primary', 500)] - The hover date background color.
+/// @prop {Map} date-current-bg-color [color: ('primary', 600)] - The background color for the current date.
+/// @prop {Map} date-selected-background [color: ('primary', 300)] - The background color for the selected date.
+/// @prop {Map} date-selected-hover-foreground [contrast-color: ('gray', 900)] - The hover text color for the selected date.
+/// @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} 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.
+/// @prop {Map} date-current-focus-background [color: ('primary', 600)] - The focus background color for the current date.
+/// @prop {Map} date-selected-current-hover-background [color: ('primary', 700)] - The hover background color for the selected/current date.
+/// @prop {Map} date-selected-current-focus-background [color: ('primary', 700)] - The focus background color for the selected/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 {Number} border-radius [4px] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} date-border-radius [4px] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} month-border-radius [4px] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-calendar
+$bootstrap-calendar: extend(
+    $light-calendar,
+    (
+        picker-background-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        year-hover-text-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        date-special-background: (
+            color: 'warn',
+        ),
+
+        month-hover-text-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        month-hover-current-text-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        month-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        picker-text-hover-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        picker-arrow-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        picker-arrow-hover-color: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
+
+        year-current-text-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        month-current-text-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        label-color: (
+            color: 'info',
+        ),
+
+        date-current-text-color: (
+            color: 'surface',
+        ),
+
+        date-current-hover-foreground: (
+            color: 'surface',
+        ),
+
+        date-current-focus-foreground: (
+            color: 'surface',
+        ),
+
+        date-current-bg-color: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-selected-current-hover-foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-selected-current-focus-foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-selected-current-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-selected-current-hover-background: (
+            color: (
+                'primary',
+                700,
+            ),
+        ),
+
+        date-selected-current-focus-background: (
+            color: (
+                'primary',
+                700,
+            ),
+        ),
+
+        date-current-hover-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-current-focus-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-hover-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        date-focus-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        date-selected-background: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        date-selected-hover-foreground: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        date-selected-focus-foreground: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        date-selected-text-color: (
+            contrast-color: (
+                'primary',
+                900,
+            ),
+        ),
+
+        content-background: (
+            color: 'surface',
+        ),
+
+        content-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        weekend-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        picker-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        inactive-text-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        week-number-background: (
+            color: (
+                'gray',
+                300,
+                0.5,
+            ),
+        ),
+
+        border-radius: rem(4px),
+        date-border-radius: rem(4px),
+        month-border-radius: rem(4px),
+    )
+);
+
+/// Generates an indigo calendar schema.
+/// @type {Map}
+/// @prop {Map} content-text-color [color: ('gray', 900)] - The main content text color.
+/// @prop {Map} date-current-text-color [color: ('primary', 300)] - The text color for the current date.
+/// @prop {Map} date-selected-background [color: ('primary', 500)] - The background color for the selected date.
+/// @prop {Map} date-selected-hover-foreground [contrast-color: ('gray', 900)] - The hover text color for the selected date.
+/// @prop {Map} date-selected-focus-foreground [contrast-color: ('gray', 900)] - The focus text color for the selected date.
+/// @prop {Map} date-selected-text-color [contrast-color: ('primary', 500)] - The text color for the selected date.
+/// @prop {Map} date-disabled-text-color [color: ('gray', 300)] - The text color for disabled dates.
+/// @prop {Map} inactive-text-color [color: ('gray', 600)] - The text color for previous and next month dates.
+/// @prop {Map} label-color [color: ('gray', 600)] - The text color for weekday labels.
+/// @prop {Map} weekend-text-color [color: ('gray', 900)] - The text color for weekend days.
+/// @prop {Color} month-hover-background [transparent] - The month hover text color.
+/// @prop {Map} month-hover-text-color [color: ('primary', 500)] - The month hover text color.
+/// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('primary', 500)] - The hover text color for the selected/current date.
+/// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('primary', 500)] - The focus text color for the selected/current date.
+/// @prop {Map} date-current-hover-foreground [color: ('primary', 600)] - The hover text color for the current date.
+/// @prop {Map} date-current-focus-foreground [color: ('primary', 600)] - The focus text color for the current date.
+/// @prop {Number} border-radius [3px] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} date-border-radius [20px] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} month-border-radius [20px] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-calendar
+$indigo-calendar: extend(
+    $light-calendar,
+    (
+        content-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        date-current-text-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        date-current-hover-foreground: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-current-focus-foreground: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+
+        date-selected-current-hover-foreground: (
+            contrast-color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        date-selected-current-focus-foreground: (
+            contrast-color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        date-selected-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        date-selected-hover-foreground: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        date-selected-focus-foreground: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        date-selected-text-color: (
+            contrast-color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        date-disabled-text-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        inactive-text-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        label-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        weekend-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        month-hover-background: transparent,
+
+        month-hover-text-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        border-radius: rem(3px),
+    )
+);