igniteui-theming 4.1.0-beta.1 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/sass/color/_functions.scss +8 -4
  3. package/sass/themes/schemas/components/dark/_button-group.scss +50 -27
  4. package/sass/themes/schemas/components/dark/_calendar.scss +191 -28
  5. package/sass/themes/schemas/components/light/_button-group.scss +86 -14
  6. package/sass/themes/schemas/components/light/_calendar.scss +660 -1843
  7. package/sass/themes/schemas/components/light/_navbar.scss +18 -0
  8. package/sass/themes/schemas/components/light/_navdrawer.scss +12 -1
package/sass/themes/schemas/components/light/_calendar.scss CHANGED
@@ -9,883 +9,499 @@
9
9
 
10
10
  /// Generates a light calendar schema.
11
11
  /// @type {Map}
12
- /// @prop {Map} calendar-foreground [contrast-color: 'surface'] - The foreground color of the calendar views.
13
- /// @prop {Map} calendar-background [color: 'surface'] - The background color of the calendar views..
12
+ /// @prop {Map} content-background [color: 'surface'] - The main content background color.
13
+ /// @prop {Map} content-text-color [contrast-color: 'surface'] - The main content text color.
14
+ /// @prop {Map} border-color [color: ('gray', 300)] - The calendar border color.
14
15
  ///
15
- /// @prop {Map} header-foreground [contrast-color: ('secondary', 600)] - The header foreground color.
16
16
  /// @prop {Map} header-background [color: ('secondary', 500)] - The header background color.
17
+ /// @prop {Map} header-text-color [contrast-color: ('secondary', 600)] - The header text color.
17
18
  ///
18
- /// @prop {Map} picker-foreground [color: 'gray' 800] - The foreground color of the month and year pickers.
19
- /// @prop {Map} picker-background [color: 'surface'] - The background color of the month and year pickers.
19
+ /// @prop {Map} picker-background-color [color: 'surface'] - The igx calendar picker background color.
20
+ /// @prop {Map} picker-arrow-color [color: ('gray', 800)] - The idle picker arrow color.
21
+ /// @prop {Map} picker-arrow-hover-color [color: ('secondary', 500)] - The picker hover arrow color.
22
+ /// @prop {Map} picker-text-color [color: ('gray', 800)]- The idle picker month/year color.
23
+ /// @prop {Map} picker-text-hover-color [color: ('secondary', 500)]- The hover picker month/year color.
20
24
  ///
21
- /// @prop {Map} picker-hover-foreground [color: 'secondary' 500] - The :hover foreground color of the month and year pickers.
22
- /// @prop {Map} picker-focus-foreground [color: 'secondary' 500] - The :focus foreground color of the month and year pickers.
25
+ /// @prop {Map} inactive-text-color [color: ('gray', 400)] - The text color for previous and next month dates.
26
+ /// @prop {Map} label-color [color: ('gray', 800)] - The text color for weekday labels.
27
+ /// @prop {Map} weekend-text-color [contrast-color: 'surface'] - The text color for weekend days.
23
28
  ///
24
- /// @prop {Map} weekday-color [color: ('gray', 800)] - The foreground color of the weekday labels.
25
- /// @prop {Map} weekend-color [contrast-color: 'surface'] - The foreground color of the weekend days.
29
+ /// @prop {Map} month-current-text-color [color: ('gray', 900)]- The text color for the current month.
30
+ /// @prop {Map} month-selected-current-text-color [contrast-color: ('secondary', 600)]- The text color for the current/selected month.
31
+ /// @prop {Map} month-hover-current-text-color [color: ('gray', 900)]- The text color for the current month on hover.
32
+ /// @prop {Map} month-hover-text-color [contrast-color: ('gray', 200)] - The month hover text color.
33
+ /// @prop {Map} month-hover-background [color: ('gray', 200)] - The background color for the selected month on hover in months view.
34
+ /// @prop {Map} month-hover-selected-current-text-color [contrast-color: ('secondary', 600)] - The text color for the current/selected month on hover.
35
+ /// @prop {Map} month-focus-selected-current-text-color [contrast-color: ('secondary', 600)] - The text color for the current/selected month on focus.
36
+ /// @prop {Map} month-focus-text-color [contrast-color: ('secondary', 600)]- The text color for the focused month in months view.
37
+ /// @prop {Map} month-focus-background [color: ('secondary', 500)]- The background color for the focused month in months view.
26
38
  ///
27
- /// @prop {Map} inactive-color [color: ('gray', 400)] - The foreground color of the previous and next month dates.
39
+ /// @prop {Map} year-hover-text-color [contrast-color: ('gray', 200)] - The year hover text color.
40
+ /// @prop {Map} year-current-text-color [color: ('gray', 900)] - The text color for the current year.
41
+ /// @prop {Map} year-selected-current-text-color [contrast-color: ('secondary', 600)] - The text color for the current/selected year.
42
+ /// @prop {Map} year-focus-text-color [contrast-color: ('secondary', 600)]- The text color for the selected year in years view.
43
+ /// @prop {Map} year-focus-background [color: ('secondary', 500)]- The background color for the selected year on focus in years view.
44
+ /// @prop {Map} year-hover-background [color: ('grey', 200)]- The background color for the selected year on hover in years view.
45
+ /// @prop {Map} year-hover-selected-current-text-color [contrast-color: ('secondary', 600)] - The text color for the current/selected year on hover.
46
+ /// @prop {Map} year-focus-selected-current-text-color [contrast-color: ('secondary', 600)] - The text color for the current/selected year on focus.
28
47
  ///
29
- /// @prop {Map} week-number-foreground [color: ('gray', 500)] - The foreground color of the week number column.
48
+ /// @prop {Map} date-hover-background [color: ('secondary', 100)] - The hover date background color.
49
+ /// @prop {Map} date-focus-background [color: ('secondary', 100)] - The focus date background color.
50
+ /// @prop {Map} date-hover-foreground [contrast-color: 'secondary', 100] - The hover date text color.
51
+ /// @prop {Map} date-focus-foreground [contrast-color: 'secondary', 100] - The focused date text color.
52
+ /// @prop {Map} date-selected-background [color: ('secondary', 500)] - The background color for the selected date.
53
+ /// @prop {Map} date-selected-text-color [contrast-color: ('secondary', 600)] - The text color for the selected date.
54
+ /// @prop {Map} date-selected-hover-background [color: ('secondary', 700)] - The hover background color for the selected date.
55
+ /// @prop {Map} date-selected-focus-background [color: ('secondary', 700)] - The focus background color for the selected date.
56
+ /// @prop {Map} date-selected-hover-foreground [contrast-color: ('gray', 600)] - The hover text color for the selected date.
57
+ /// @prop {Map} date-selected-focus-foreground [contrast-color: ('gray', 600)] - The focus text color for the selected date.
58
+ /// @prop {Map} date-selected-color-range [contrast-color: ('secondary', 50)] - The text color for the selected range.
59
+ /// @prop {Map} date-selected-background-range [color: ('secondary', 50)] - The background color for the selected range.
60
+ /// @prop {Map} date-selected-color-range-hover [contrast-color: ('secondary', 100)] - The text color for the selected range on hover/focus.
61
+ /// @prop {Map} date-selected-background-range-hover [color: ('secondary', 100)] - The background color for the selected range on hover.
62
+ /// @prop {Map} date-selected-current-background [color: ('secondary', 500)] - The background color for the selected/current date.
63
+ /// @prop {Map} date-selected-current-foreground [contrast-color: ('secondary', 600)] - The text color for the selected/current date.
64
+ /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('secondary', 600)] - The hover text color for the selected/current date.
65
+ /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('secondary', 600)] - The focus text color for the selected/current date.
66
+ /// @prop {Map} date-selected-current-hover-background [color: ('secondary', 700)] - The hover background color for the selected/current date.
67
+ /// @prop {Map} date-selected-current-focus-background [color: ('secondary', 700)] - The focus background color for the selected/current date.
68
+ /// @prop {Map} current-outline [color: ('gray', 600)] - The outline color for the current date.
69
+ /// @prop {Map} current-outline-hover [color: ('surface', 500)] - The outline color for the current date on hover.
70
+ /// @prop {Map} current-outline-focus [color: ('surface', 500)] - The outline color for the current date on focus.
71
+ /// @prop {Map} current-selected-outline [color: ('surface', 500)] - The outline color for the current selected date.
72
+ /// @prop {Map} date-current-bg-color [color: ('surface', 500)] - The background color for the current date.
73
+ /// @prop {Map} date-current-text-color [color: ('gray', 800)] - The text color for the current date.
74
+ /// @prop {Map} date-current-hover-foreground [contrast-color: ('secondary', 200)] - The hover text color for the current date.
75
+ /// @prop {Map} date-current-focus-foreground [contrast-color: ('secondary', 200)] - The focus text color for the current date.
76
+ /// @prop {Map} date-current-hover-background [color: ('secondary', 100)] - The hover background color for the current date.
77
+ /// @prop {Map} date-current-focus-background [color: ('secondary', 100)] - The focus background color for the current date.
78
+ /// @prop {Map} date-special-background [color: ('gray', 100)] - The background color used for special dates.
79
+ /// @prop {Map} date-special-text-color [color: ('gray', 900)] - The text color used for special dates.
80
+ /// @prop {Map} date-disabled-text-color [color: ('gray', 500)] - The text color for disabled dates.
81
+ /// @prop {Map} date-disabled-background [color: ('secondary', 50)] - The background color for disabled dates.
82
+ /// @prop {Map} week-number-color [color: ('gray', 500)] - The text color of the week number column.
30
83
  /// @prop {Map} week-number-background [color: ('gray', 200)] - The background color of the week number column.
31
- ///
32
- /// @prop {Map} year-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the year in years view.
33
- /// @prop {Map} year-hover-background [color: ('grey', 200)]- The :hover background color of the year in years view.
34
- /// @prop {Map} year-focus-foreground [contrast-color: ('secondary', 600)]- The :focus foreground color of the focused year in years view.
35
- /// @prop {Map} year-focus-background [color: ('secondary', 500)]- The :focus background color of the focused year on in years view.
36
- ///
37
- /// @prop {Map} year-current-foreground [contrast-color: ('surface')] - The foreground color of the current year.
38
- /// @prop {Map} year-current-background [color: ('surface')]- The background color of the current year in years view.
39
- /// @prop {Map} year-current-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the current year in years view.
40
- /// @prop {Map} year-current-hover-background [color: ('gray' 200)] - The :hover background color of the current year in years view.
41
- /// @prop {Map} year-current-focus-foreground [contrast-color: ('secondary', 600)] - The :focus foreground color of the current year in years view.
42
- /// @prop {Map} year-current-focus-background [color: ('secondary' 500)] - The :focus background color of the current year in years view.
43
- ///
44
- /// @prop {Map} year-selected-foreground [contrast-color: ('surface')] - The foreground color of the selected year.
45
- /// @prop {Map} year-selected-background [color: ('surface')]- The background color of the selected year in years view.
46
- /// @prop {Map} year-selected-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the selected year in years view.
47
- /// @prop {Map} year-selected-hover-background [color: ('gray' 200)] - The :hover background color of the selected year in years view.
48
- /// @prop {Map} year-selected-focus-foreground [contrast-color: ('secondary', 600)] - The :focus foreground color of the selected year in years view.
49
- /// @prop {Map} year-selected-focus-background [color: ('secondary' 500)] - The :focus background color of the selected year in years view.
50
- ///
51
- /// @prop {Map} year-selected-current-foreground [contrast-color: ('secondary', 900)] - The foreground color of the current/selected year.
52
- /// @prop {Map} year-selected-current-background [color: ('secondary', 500)] - The foreground color of the current/selected year.
53
- /// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('secondary', 900)] - The :hover foreground color of the current/selected year.
54
- /// @prop {Map} year-selected-current-hover-background [color: ('secondary', 500)] - The :hover background color of the current/selected year.
55
- /// @prop {Map} year-selected-current-focus-foreground [contrast-color: ('secondary', 900)] - The :focus foreground color of the current/selected year.
56
- /// @prop {Map} year-selected-current-focus-background [color: ('secondary', 500)] - The :focus background color of the current/selected year.
57
- ///
58
- /// @prop {Map} month-nav-arrow-color [color: ('gray', 800)] - the color of the icon button responsible for month navigation.
59
- /// @prop {Map} month-nav-arrow-hover-color [color: ('secondary', 500)] - The :hover color of the icon button responsible for month navigation.
60
- /// @prop {Map} month-nav-arrow-focus-color [color: ('secondary', 500)] - The :focus color of the icon button responsible for month navigation.
61
- ///
62
- /// @prop {Map} month-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the month inside the months view.
63
- /// @prop {Map} month-hover-background [color: ('gray', 200)] - The :hover background color of the month inside the months view.
64
- /// @prop {Map} month-focus-foreground [contrast-color: ('secondary', 600)] - The :focus foreground color of the month inside the months view.
65
- /// @prop {Map} month-focus-background [color: ('secondary', 500)] - The :focus background color of the month inside the months view.
66
- ///
67
- /// @prop {Map} month-current-foreground [contrast-color: ('surface')] - The foreground color of the current month in month view.
68
- /// @prop {Map} month-current-background [color: ('surface')] - The background color of the current month in month view.
69
- /// @prop {Map} month-current-hover-foreground [contrast-color: ('gray', 200)]- The :hover foreground color of the current month in month view.
70
- /// @prop {Map} month-current-hover-background [color: ('gray', 200)]- The :hover background color of the current month in month view.
71
- /// @prop {Map} month-current-focus-foreground [contrast-color: ('gray', 200)]- The :focus foreground color of the current month in month view.
72
- /// @prop {Map} month-current-focus-background [color: ('gray', 200)]- The :focus background color of the current month in month view.
73
- ///
74
- /// @prop {Map} month-selected-foreground [contrast-color: ('surface')] - The foreground color of the selected month in month view.
75
- /// @prop {Map} month-selected-background [color: ('surface')] - The background color of the selected month in month view.
76
- /// @prop {Map} month-selected-hover-foreground [contrast-color: ('gray', 200)]- The :hover foreground color of the selected month in month view.
77
- /// @prop {Map} month-selected-hover-background [color: ('gray', 200)]- The :hover background color of the selected month in month view.
78
- /// @prop {Map} month-selected-focus-foreground [contrast-color: ('gray', 200)]- The :focus foreground color of the selected month in month view.
79
- /// @prop {Map} month-selected-focus-background [color: ('gray', 200)]- The :focus background color of the selected month in month view.
80
- ///
81
- /// @prop {Map} month-selected-current-foreground [contrast-color: ('secondary', 900)] - The foreground color of the current/selected month in month view.
82
- /// @prop {Map} month-selected-current-background [color: ('secondary', 500)]- The background color of the current/selected month in month view.
83
- /// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('secondary', 900)] - The :hover foreground color of the current/selected month in month view.
84
- /// @prop {Map} month-selected-current-hover-background [color: ('secondary', 600)] - The :hover background color of the current/selected month in month view.
85
- /// @prop {Map} month-selected-current-focus-foreground [contrast-color: ('secondary', 900)] - The :focus foreground color of the current/selected month in month view.
86
- /// @prop {Map} month-selected-current-focus-background [color: ('secondary', 700)] - The :focus background color of the current/selected month in month view.
87
- ///
88
- /// @prop {Map} date-hover-foreground [contrast-color: 'secondary', 100] - The :hover foreground color of a date.
89
- /// @prop {Map} date-hover-background [color: ('secondary', 100)] - The :hover background color of a date.
90
- /// @prop {Map} date-focus-foreground [contrast-color: 'secondary', 100] - The :focus foreground color of a date.
91
- /// @prop {Map} date-focus-background [color: ('secondary', 100)] - The :focus background color of date.
92
- ///
93
- /// @prop {Map} date-current-foreground [color: ('gray', 800)] - The foreground color of the current date.
94
- /// @prop {Map} date-current-background [color: ('surface', 500)] - The background color of the current date.
95
- /// @prop {Map} date-current-hover-foreground [contrast-color: ('secondary', 200)] - The :hover foreground color of the current date.
96
- /// @prop {Map} date-current-hover-background [color: ('secondary', 100)] - The :hover background color of the current date.
97
- /// @prop {Map} date-current-focus-foreground [contrast-color: ('secondary', 200)] - The :focus foreground color of the current date.
98
- /// @prop {Map} date-current-focus-background [color: ('secondary', 100)] - The :focus background color of the current date.
99
- ///
100
- /// @prop {Map} date-selected-foreground [contrast-color: ('secondary', 900)] - The foreground color of the selected date.
101
- /// @prop {Map} date-selected-background [color: ('secondary', 500)] - The background color of the selected date.
102
- /// @prop {Map} date-selected-hover-foreground [contrast-color: ('secondary', 900)] - The :hover foreground color of the selected date.
103
- /// @prop {Map} date-selected-hover-background [color: ('secondary', 700)] - The :hover background color of the selected date.
104
- /// @prop {Map} date-selected-focus-foreground [contrast-color: ('secondary', 900)] - The :focus foreground color of the selected date.
105
- /// @prop {Map} date-selected-focus-background [color: ('secondary', 700)] - The :focus background color of the selected date.
106
- ///
107
- /// @prop {Map} date-selected-current-foreground [contrast-color: ('secondary', 600)] - The foreground color of the selected current date.
108
- /// @prop {Map} date-selected-current-background [color: ('secondary', 500)] - The background color of the selected current date.
109
- /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('secondary', 600)] - The :hover foreground color of the selected current date.
110
- /// @prop {Map} date-selected-current-hover-background [color: ('secondary', 700)] - The :hover background color of the selected current date.
111
- /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('secondary', 600)] - The :focus foreground color of the selected current date.
112
- /// @prop {Map} date-selected-current-focus-background [color: ('secondary', 700)] - The :focus background color of the selected current date.
113
- ///
114
- /// @prop {Map} date-selected-range-foreground [contrast-color: ('secondary', 50)] - The foreground color of the selected range.
115
- /// @prop {Map} date-selected-range-background [color: ('secondary', 50)] - The background color of the selected range.
116
- /// @prop {Map} date-selected-range-hover-foreground [contrast-color: ('secondary', 100)] - The :hover foreground color of the selected range.
117
- /// @prop {Map} date-selected-range-hover-background [color: ('secondary', 100)] - The :hover background color of the selected range.
118
- /// @prop {Map} date-selected-range-focus-foreground [contrast-color: ('secondary', 100)] - The :focus foreground color of the selected range.
119
- /// @prop {Map} date-selected-range-focus-background [color: ('secondary', 100)] - The :focus background color of the selected range.
120
- ///
121
- /// @prop {Map} date-selected-range-start-foreground [contrast-color: ('secondary', 900)] - The foreground color of the first date in the selected range.
122
- /// @prop {Map} date-selected-range-start-background [color: ('secondary', 500)] - The background color of the first date in the selected range.
123
- /// @prop {Map} date-selected-range-start-hover-foreground [contrast-color: ('secondary', 900)] - The :hover foreground color of the first date in the selected range.
124
- /// @prop {Map} date-selected-range-start-hover-background [color: ('secondary', 700)] - The :hover background color of the first date in the selected range.
125
- /// @prop {Map} date-selected-range-start-focus-foreground [contrast-color: ('secondary', 900)] - The :focus foreground color of the first date in the selected range.
126
- /// @prop {Map} date-selected-range-start-focus-background [color: ('secondary', 700)] - The :focus background color of the first date in the selected range.
127
- ///
128
- /// @prop {Map} date-selected-range-end-foreground [contrast-color: ('secondary', 900)] - The background color of the last date in the selected range.
129
- /// @prop {Map} date-selected-range-end-background [color: ('secondary', 500)] - The background color of the last date in the selected range.
130
- /// @prop {Map} date-selected-range-end-hover-foreground [contrast-color: ('secondary', 900)] - The :hover foreground color of the last date in the selected range.
131
- /// @prop {Map} date-selected-range-end-hover-background [color: ('secondary', 700)] - The :hover background color of the last date in the selected range.
132
- /// @prop {Map} date-selected-range-end-focus-foreground [contrast-color: ('secondary', 900)] - The :focus foreground color of the last date in the selected range.
133
- /// @prop {Map} date-selected-range-end-focus-background [color: ('secondary', 700)] - The :focus background color of the last date in the selected range.
134
- ///
135
- /// @prop {Map} date-selected-current-range-foreground [contrast-color: ('secondary', 50)] - The foreground color of the current date in the selected range.
136
- /// @prop {Map} date-selected-current-range-background [color: ('secondary', 50)] - The background color of the current date in the selected range.
137
- /// @prop {Map} date-selected-current-range-hover-foreground [contrast-color: ('secondary', 100)] - The :hover foreground color of the current date in the selected range.
138
- /// @prop {Map} date-selected-current-range-hover-background [color: ('secondary', 100)] - The :hover background color of the current date in the selected range.
139
- /// @prop {Map} date-selected-current-range-focus-foreground [contrast-color: ('secondary', 100)] - The :focus foreground color of the current date in the selected range.
140
- /// @prop {Map} date-selected-current-range-focus-background [color: ('secondary', 100)] - The :focus background color of the current date in the selected range.
141
- ///
142
- /// @prop {Map} date-special-foreground [color: ('gray', 900)] - The foreground color used of special dates.
143
- /// @prop {Map} date-special-background [color: ('gray', 100)] - The background color used of special dates.
144
- ///
145
- /// @prop {Map} date-current-outline [color: ('gray', 600)] - The outline color of the current date.
146
- /// @prop {Map} date-current-hover-outline [color: ('surface', 500)] - The :hover outline color of the current date on :hover.
147
- /// @prop {Map} date-current-focus-outline [color: ('surface', 500)] - The :focus outline color of the current date on :focus.
148
- /// @prop {Map} date-selected-current-outline [color: ('surface', 500)] - The outline color of the current selected date.
149
- /// @prop {Map} date-selected-current-hover-outline [color: ('surface', 500)] - The :hover outline color of the current selected date.
150
- /// @prop {Map} date-selected-current-focus-outline [color: ('surface', 500)] - The :focus outline color of the current selected date.
151
- ///
152
- /// @prop {Map} current-outline-color [color: ('gray', 600)] - The outline color of the current year/month in year/month views.
153
- /// @prop {Map} current-hover-outline-color [color: ('gray', 600)] - The :hover outline color of the current year/month in year/month views.
154
- /// @prop {Map} current-focus-outline-color [color: ('secondary', 500)] - The :focus outline color of the current year/month in year/month views.
155
- ///
156
- /// @prop {Map} selected-outline-color [color: ('gray', 600)] - The outline color of the selected year/month in year/month views.
157
- /// @prop {Map} selected-hover-outline-color [color: ('gray', 600)] - The :hover outline color of the selected year/month in year/month views.
158
- /// @prop {Map} selected-focus-outline-color [color: ('secondary', 500)] - The :focus outline color of the selected year/month in year/month views.
159
- ///
160
- /// @prop {Map} selected-current-outline-color [color: ('gray', 600)] - The outline color of the selected current year/month in year/month views.
161
- /// @prop {Map} selected-current-hover-outline-color [color: ('gray', 600)] - The :hover outline color of the selected current year/month in year/month views.
162
- /// @prop {Map} selected-current-focus-outline-color [color: ('secondary', 500)] - The :focus outline color of the selected current year/month in year/month views.
163
- ///
164
- /// @prop {Map} calendar-border-color [color: ('gray', 300)] - The calendar border color.
165
- /// @prop {Color} date-border-color [transparent] - The border color around a date.
166
- /// @prop {Color} date-hover-border-color [transparent] - The :hover border color around a date.
167
- /// @prop {Color} date-focus-border-color [transparent] - The :focus border color around a date.
168
- /// @prop {Color} date-selected-border-color [transparent] - The border color of the selected date.
169
- /// @prop {Color} date-selected-hover-border-color [transparent] - The :hover border color of the selected date.
170
- /// @prop {Color} date-selected-focus-border-color [transparent] - The :focus border color of the selected date.
171
- /// @prop {Color} date-range-border-color [transparent] - The border color of range selection.
172
- /// @prop {Color} date-range-preview-border-color [transparent] - The border color of the range selection in preview state(visible before selecting the end of the range).
173
- ///
174
- /// @prop {Map} date-disabled-foreground [color: ('gray', 500)] - The foreground color of disabled dates.
175
- /// @prop {Color} date-disabled-background [transparent] - The background color of disabled dates.
176
- /// @prop {Map} date-disabled-range-foreground [color: ('secondary', 200)] - The foreground color of disabled dates inside range selection.
177
- /// @prop {Color} date-disabled-range-background [transparent] - The background color of disabled dates inside range selection.
178
- ///
179
- /// @prop {List} calendar-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar.
180
- /// @prop {List} date-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the date.
181
- /// @prop {List} date-range-border-radius [(rem(20px), rem(0), rem(20px))] -The border radius used for the date in range selection.
182
- /// @prop {List} month-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the month in month view.
183
- /// @prop {List} week-number-border-radius [(rem(4px), rem(0), rem(8px))] - The border radius used for the week numbers column.
84
+ /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar.
85
+ /// @prop {List} date-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for calendar date.
86
+ /// @prop {List} month-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for calendar month.
184
87
  /// @prop {Number} default-size [2] - The default size used for the calendar component.
185
88
  $light-calendar: (
186
- calendar-foreground: (
187
- contrast-color: 'surface',
188
- ),
189
- calendar-background: (
89
+ content-background: (
190
90
  color: 'surface',
191
91
  ),
192
- calendar-border-color: (
92
+
93
+ content-text-color: (
94
+ contrast-color: 'surface',
95
+ ),
96
+
97
+ border-color: (
193
98
  color: (
194
99
  'gray',
195
100
  300,
196
101
  ),
197
102
  ),
198
- header-foreground: (
199
- contrast-color: (
200
- 'secondary',
201
- 600,
202
- ),
203
- ),
103
+
204
104
  header-background: (
205
105
  color: (
206
106
  'secondary',
207
107
  500,
208
108
  ),
209
109
  ),
210
- picker-foreground: (
110
+
111
+ header-text-color: (
112
+ contrast-color: (
113
+ 'secondary',
114
+ 600,
115
+ ),
116
+ ),
117
+
118
+ picker-background-color: (
119
+ color: 'surface',
120
+ ),
121
+
122
+ picker-text-color: (
211
123
  color: (
212
124
  'gray',
213
125
  800,
214
126
  ),
215
127
  ),
216
- picker-background: (
217
- color: 'surface',
218
- ),
219
- picker-hover-foreground: (
128
+
129
+ picker-text-hover-color: (
220
130
  color: (
221
131
  'secondary',
222
132
  500,
223
133
  ),
224
134
  ),
225
- picker-focus-foreground: (
135
+
136
+ picker-arrow-color: (
137
+ color: (
138
+ 'gray',
139
+ 800,
140
+ ),
141
+ ),
142
+
143
+ picker-arrow-hover-color: (
226
144
  color: (
227
145
  'secondary',
228
146
  500,
229
147
  ),
230
148
  ),
231
- year-hover-foreground: (
232
- contrast-color: (
149
+
150
+ year-current-text-color: (
151
+ color: (
233
152
  'gray',
234
- 200,
153
+ 900,
235
154
  ),
236
155
  ),
237
- year-hover-background: (
238
- color: (
239
- 'gray',
240
- 200,
156
+
157
+ year-selected-current-text-color: (
158
+ contrast-color: (
159
+ 'secondary',
160
+ 600,
241
161
  ),
242
162
  ),
243
- year-focus-foreground: (
163
+
164
+ year-focus-text-color: (
244
165
  contrast-color: (
245
166
  'secondary',
246
167
  600,
247
168
  ),
248
169
  ),
170
+
249
171
  year-focus-background: (
250
172
  color: (
251
173
  'secondary',
252
174
  500,
253
175
  ),
254
176
  ),
255
- year-current-foreground: (
256
- contrast-color: (
257
- 'surface',
177
+
178
+ year-hover-background: (
179
+ color: (
180
+ 'gray',
181
+ 200,
258
182
  ),
259
183
  ),
260
- year-current-background: (
261
- color: 'surface',
262
- ),
263
- year-current-hover-foreground: (
184
+
185
+ year-hover-text-color: (
264
186
  contrast-color: (
265
187
  'gray',
266
188
  200,
267
189
  ),
268
190
  ),
269
- year-current-hover-background: (
191
+
192
+ month-current-text-color: (
270
193
  color: (
271
194
  'gray',
272
- 200,
195
+ 900,
273
196
  ),
274
197
  ),
275
- year-current-focus-foreground: (
198
+
199
+ month-selected-current-text-color: (
276
200
  contrast-color: (
277
201
  'secondary',
278
202
  600,
279
203
  ),
280
204
  ),
281
- year-current-focus-background: (
205
+
206
+ month-hover-current-text-color: (
282
207
  color: (
283
- 'secondary',
284
- 500,
285
- ),
286
- ),
287
- year-selected-foreground: (
288
- contrast-color: (
289
- 'surface',
290
- ),
291
- ),
292
- year-selected-background: (
293
- color: 'surface',
294
- ),
295
- year-selected-hover-foreground: (
296
- contrast-color: (
297
208
  'gray',
298
- 200,
209
+ 900,
299
210
  ),
300
211
  ),
301
- year-selected-hover-background: (
302
- color: (
303
- 'gray',
304
- 200,
212
+
213
+ month-hover-selected-current-text-color: (
214
+ contrast-color: (
215
+ 'secondary',
216
+ 600,
305
217
  ),
306
218
  ),
307
- year-selected-focus-foreground: (
219
+
220
+ year-hover-selected-current-text-color: (
308
221
  contrast-color: (
309
222
  'secondary',
310
223
  600,
311
224
  ),
312
225
  ),
313
- year-selected-focus-background: (
314
- color: (
226
+
227
+ year-focus-selected-current-text-color: (
228
+ contrast-color: (
315
229
  'secondary',
316
- 500,
230
+ 600,
317
231
  ),
318
232
  ),
319
- year-selected-current-foreground: (
233
+
234
+ month-focus-selected-current-text-color: (
320
235
  contrast-color: (
321
236
  'secondary',
322
- 900,
237
+ 600,
323
238
  ),
324
239
  ),
325
- year-selected-current-background: (
240
+
241
+ month-hover-background: (
326
242
  color: (
327
- 'secondary',
328
- 500,
243
+ 'gray',
244
+ 200,
329
245
  ),
330
246
  ),
331
- year-selected-current-hover-foreground: (
247
+
248
+ month-hover-text-color: (
332
249
  contrast-color: (
333
- 'secondary',
334
- 500,
250
+ 'gray',
251
+ 200,
335
252
  ),
336
253
  ),
337
- year-selected-current-focus-background: (
254
+
255
+ month-focus-text-color: (
338
256
  contrast-color: (
339
257
  'secondary',
340
- 500,
258
+ 900,
341
259
  ),
342
260
  ),
343
- year-selected-current-focus-foreground: (
344
- contrast-color: (
261
+
262
+ month-focus-background: (
263
+ color: (
345
264
  'secondary',
346
- 900,
265
+ 500,
347
266
  ),
348
267
  ),
349
- year-selected-current-hover-background: (
268
+
269
+ date-selected-background: (
350
270
  color: (
351
271
  'secondary',
352
272
  500,
353
273
  ),
354
274
  ),
355
- month-nav-arrow-color: (
275
+
276
+ date-selected-hover-background: (
356
277
  color: (
357
- 'gray',
358
- 800,
278
+ 'secondary',
279
+ 700,
359
280
  ),
360
281
  ),
361
- month-nav-arrow-hover-color: (
282
+
283
+ date-selected-focus-background: (
362
284
  color: (
363
285
  'secondary',
364
- 500,
286
+ 700,
365
287
  ),
366
288
  ),
367
- month-nav-arrow-focus-color: (
289
+
290
+ date-selected-current-background: (
368
291
  color: (
369
292
  'secondary',
370
293
  500,
371
294
  ),
372
295
  ),
373
- month-hover-foreground: (
374
- contrast-color: (
375
- 'gray',
376
- 200,
296
+
297
+ date-selected-current-hover-background: (
298
+ color: (
299
+ 'secondary',
300
+ 700,
377
301
  ),
378
302
  ),
379
- month-hover-background: (
303
+
304
+ date-selected-current-focus-background: (
380
305
  color: (
381
- 'gray',
382
- 200,
306
+ 'secondary',
307
+ 700,
383
308
  ),
384
309
  ),
385
- month-focus-foreground: (
310
+
311
+ date-selected-text-color: (
386
312
  contrast-color: (
387
313
  'secondary',
388
314
  600,
389
315
  ),
390
316
  ),
391
- month-focus-background: (
392
- color: (
317
+
318
+ date-selected-hover-foreground: (
319
+ contrast-color: (
393
320
  'secondary',
394
- 500,
321
+ 600,
395
322
  ),
396
323
  ),
397
- month-current-foreground: (
324
+
325
+ date-selected-focus-foreground: (
398
326
  contrast-color: (
399
- 'gray',
400
- 200,
327
+ 'secondary',
328
+ 600,
401
329
  ),
402
330
  ),
403
- month-current-background: (
404
- color: 'surface',
405
- ),
406
- month-current-hover-foreground: (
331
+
332
+ date-selected-color-range: (
407
333
  contrast-color: (
408
- 'gray',
409
- 200,
334
+ 'secondary',
335
+ 50,
410
336
  ),
411
337
  ),
412
- month-current-hover-background: (
338
+
339
+ date-selected-background-range: (
413
340
  color: (
414
- 'gray',
415
- 200,
341
+ 'secondary',
342
+ 50,
416
343
  ),
417
344
  ),
418
- month-current-focus-foreground: (
345
+
346
+ date-selected-color-range-hover: (
419
347
  contrast-color: (
420
348
  'secondary',
421
- 600,
349
+ 100,
422
350
  ),
423
351
  ),
424
- month-current-focus-background: (
352
+
353
+ date-selected-background-range-hover: (
425
354
  color: (
426
355
  'secondary',
427
- 500,
356
+ 100,
428
357
  ),
429
358
  ),
430
- month-selected-foreground: (
431
- contrast-color: (
359
+
360
+ date-current-text-color: (
361
+ color: (
432
362
  'gray',
433
- 200,
363
+ 800,
434
364
  ),
435
365
  ),
436
- month-selected-background: (
437
- color: 'surface',
438
- ),
439
- month-selected-hover-foreground: (
366
+
367
+ date-current-hover-foreground: (
440
368
  contrast-color: (
441
- 'gray',
369
+ 'secondary',
442
370
  200,
443
371
  ),
444
372
  ),
445
- month-selected-hover-background: (
446
- color: (
447
- 'gray',
373
+
374
+ date-current-focus-foreground: (
375
+ contrast-color: (
376
+ 'secondary',
448
377
  200,
449
378
  ),
450
379
  ),
451
- month-selected-focus-foreground: (
380
+
381
+ date-selected-current-foreground: (
452
382
  contrast-color: (
453
383
  'secondary',
454
384
  600,
455
385
  ),
456
386
  ),
457
- month-selected-focus-background: (
458
- color: (
387
+
388
+ date-selected-current-hover-foreground: (
389
+ contrast-color: (
459
390
  'secondary',
460
- 500,
391
+ 600,
461
392
  ),
462
393
  ),
463
- month-selected-current-foreground: (
394
+
395
+ date-selected-current-focus-foreground: (
464
396
  contrast-color: (
465
397
  'secondary',
466
- 900,
398
+ 600,
467
399
  ),
468
400
  ),
469
- month-selected-current-background: (
401
+
402
+ date-current-bg-color: (
470
403
  color: (
471
- 'secondary',
404
+ 'surface',
472
405
  500,
473
406
  ),
474
407
  ),
475
- month-selected-current-hover-foreground: (
476
- contrast-color: (
408
+
409
+ date-current-hover-background: (
410
+ color: (
477
411
  'secondary',
478
- 900,
412
+ 100,
479
413
  ),
480
414
  ),
481
- month-selected-current-hover-background: (
415
+
416
+ date-current-focus-background: (
482
417
  color: (
483
418
  'secondary',
484
- 600,
419
+ 100,
485
420
  ),
486
421
  ),
487
- month-selected-current-focus-foreground: (
488
- contrast-color: (
422
+
423
+ date-hover-background: (
424
+ color: (
489
425
  'secondary',
490
- 900,
426
+ 100,
491
427
  ),
492
428
  ),
493
- month-selected-current-focus-background: (
429
+
430
+ date-focus-background: (
494
431
  color: (
495
432
  'secondary',
496
- 700,
433
+ 100,
497
434
  ),
498
435
  ),
499
- current-outline-color: (
436
+
437
+ date-special-background: (
500
438
  color: (
501
439
  'gray',
502
- 600,
440
+ 100,
503
441
  ),
504
442
  ),
505
- current-outline-hover-color: (
443
+
444
+ date-special-text-color: (
506
445
  color: (
507
446
  'gray',
508
- 600,
447
+ 900,
509
448
  ),
510
449
  ),
511
- current-outline-focus-color: (
512
- color: (
513
- 'secondary',
514
- 500,
515
- ),
516
- ),
517
- selected-outline-color: (
518
- color: (
519
- 'gray',
520
- 600,
521
- ),
522
- ),
523
- selected-hover-outline-color: (
524
- color: (
525
- 'gray',
526
- 600,
527
- ),
528
- ),
529
- selected-focus-outline-color: (
530
- color: (
531
- 'secondary',
532
- 500,
533
- ),
534
- ),
535
- selected-current-outline-color: (
536
- color: (
537
- 'gray',
538
- 600,
539
- ),
540
- ),
541
- selected-current-outline-hover-color: (
450
+
451
+ date-disabled-text-color: (
542
452
  color: (
543
453
  'gray',
544
- 600,
545
- ),
546
- ),
547
- selected-current-outline-focus-color: (
548
- color: (
549
- 'secondary',
550
- 500,
551
- ),
552
- ),
553
- date-hover-foreground: (
554
- contrast-color: (
555
- 'secondary',
556
- 100,
557
- ),
558
- ),
559
- date-hover-background: (
560
- color: (
561
- 'secondary',
562
- 100,
563
- ),
564
- ),
565
- date-focus-foreground: (
566
- contrast-color: (
567
- 'secondary',
568
- 100,
569
- ),
570
- ),
571
- date-focus-background: (
572
- color: (
573
- 'secondary',
574
- 100,
575
- ),
576
- ),
577
- date-selected-foreground: (
578
- contrast-color: (
579
- 'secondary',
580
- 900,
581
- ),
582
- ),
583
- date-selected-background: (
584
- color: (
585
- 'secondary',
586
454
  500,
587
455
  ),
588
456
  ),
589
- date-selected-hover-foreground: (
590
- contrast-color: (
591
- 'secondary',
592
- 900,
593
- ),
594
- ),
595
- date-selected-hover-background: (
596
- color: (
597
- 'secondary',
598
- 700,
599
- ),
600
- ),
601
- date-selected-focus-foreground: (
602
- contrast-color: (
603
- 'secondary',
604
- 900,
605
- ),
606
- ),
607
- date-selected-focus-background: (
608
- color: (
609
- 'secondary',
610
- 700,
611
- ),
612
- ),
613
- date-selected-range-foreground: (
614
- contrast-color: (
615
- 'secondary',
616
- 50,
617
- ),
618
- ),
619
- date-selected-range-background: (
457
+
458
+ date-disabled-background: (
620
459
  color: (
621
460
  'secondary',
622
461
  50,
623
462
  ),
624
463
  ),
625
- date-selected-range-hover-foreground: (
626
- contrast-color: (
627
- 'secondary',
628
- 100,
629
- ),
630
- ),
631
- date-selected-range-hover-background: (
632
- color: (
633
- 'secondary',
634
- 100,
635
- ),
636
- ),
637
- date-selected-range-focus-foreground: (
638
- contrast-color: (
639
- 'secondary',
640
- 100,
641
- ),
642
- ),
643
- date-selected-range-focus-background: (
644
- color: (
645
- 'secondary',
646
- 100,
647
- ),
648
- ),
649
- date-selected-range-start-foreground: (
650
- contrast-color: (
651
- 'secondary',
652
- 900,
653
- ),
654
- ),
655
- date-selected-range-start-background: (
656
- color: (
657
- 'secondary',
658
- 500,
659
- ),
660
- ),
661
- date-selected-range-start-hover-foreground: (
662
- contrast-color: (
663
- 'secondary',
664
- 900,
665
- ),
666
- ),
667
- date-selected-range-start-hover-background: (
668
- color: (
669
- 'secondary',
670
- 700,
671
- ),
672
- ),
673
- date-selected-range-start-focus-foreground: (
674
- contrast-color: (
675
- 'secondary',
676
- 900,
677
- ),
678
- ),
679
- date-selected-range-start-focus-background: (
680
- color: (
681
- 'secondary',
682
- 700,
683
- ),
684
- ),
685
- date-selected-range-end-foreground: (
686
- contrast-color: (
687
- 'secondary',
688
- 900,
689
- ),
690
- ),
691
- date-selected-range-end-background: (
692
- color: (
693
- 'secondary',
694
- 500,
695
- ),
696
- ),
697
- date-selected-range-end-hover-foreground: (
698
- contrast-color: (
699
- 'secondary',
700
- 900,
701
- ),
702
- ),
703
- date-selected-range-end-hover-background: (
704
- color: (
705
- 'secondary',
706
- 700,
707
- ),
708
- ),
709
- date-selected-range-end-focus-foreground: (
710
- contrast-color: (
711
- 'secondary',
712
- 900,
713
- ),
714
- ),
715
- date-selected-range-end-focus-background: (
716
- color: (
717
- 'secondary',
718
- 700,
719
- ),
720
- ),
721
- date-selected-current-foreground: (
722
- contrast-color: (
723
- 'secondary',
724
- 600,
725
- ),
726
- ),
727
- date-selected-current-background: (
464
+
465
+ week-number-color: (
728
466
  color: (
729
- 'secondary',
467
+ 'gray',
730
468
  500,
731
469
  ),
732
470
  ),
733
- date-selected-current-hover-foreground: (
734
- contrast-color: (
735
- 'secondary',
736
- 600,
737
- ),
738
- ),
739
- date-selected-current-hover-background: (
740
- color: (
741
- 'secondary',
742
- 700,
743
- ),
744
- ),
745
- date-selected-current-focus-foreground: (
746
- contrast-color: (
747
- 'secondary',
748
- 600,
749
- ),
750
- ),
751
- date-selected-current-focus-background: (
752
- color: (
753
- 'secondary',
754
- 700,
755
- ),
756
- ),
757
- date-selected-current-range-foreground: (
758
- contrast-color: (
759
- 'secondary',
760
- 50,
761
- ),
762
- ),
763
- date-selected-current-range-background: (
764
- color: (
765
- 'secondary',
766
- 50,
767
- ),
768
- ),
769
- date-selected-current-range-hover-foreground: (
770
- contrast-color: (
771
- 'secondary',
772
- 100,
773
- ),
774
- ),
775
- date-selected-current-range-hover-background: (
471
+
472
+ week-number-background: (
776
473
  color: (
777
- 'secondary',
778
- 100,
779
- ),
780
- ),
781
- date-selected-current-range-focus-foreground: (
782
- contrast-color: (
783
- 'secondary',
784
- 100,
474
+ 'gray',
475
+ 200,
785
476
  ),
786
477
  ),
787
- date-selected-current-range-focus-background: (
478
+
479
+ inactive-text-color: (
788
480
  color: (
789
- 'secondary',
790
- 100,
481
+ 'gray',
482
+ 400,
791
483
  ),
792
484
  ),
793
- date-current-foreground: (
485
+
486
+ label-color: (
794
487
  color: (
795
488
  'gray',
796
489
  800,
797
490
  ),
798
491
  ),
799
- date-current-background: (
800
- color: (
801
- 'surface',
802
- 500,
803
- ),
492
+
493
+ weekend-text-color: (
494
+ contrast-color: 'surface',
804
495
  ),
805
- date-current-hover-foreground: (
806
- contrast-color: (
807
- 'secondary',
808
- 200,
809
- ),
810
- ),
811
- date-current-hover-background: (
812
- color: (
813
- 'secondary',
814
- 100,
815
- ),
816
- ),
817
- date-current-focus-foreground: (
818
- contrast-color: (
819
- 'secondary',
820
- 200,
821
- ),
822
- ),
823
- date-current-focus-background: (
824
- color: (
825
- 'secondary',
826
- 100,
827
- ),
828
- ),
829
- date-special-background: (
830
- color: (
831
- 'gray',
832
- 100,
833
- ),
834
- ),
835
- date-special-foreground: (
836
- color: (
837
- 'gray',
838
- 900,
839
- ),
840
- ),
841
- date-disabled-foreground: (
842
- color: (
843
- 'gray',
844
- 500,
845
- ),
846
- ),
847
- date-disabled-background: transparent,
848
- date-disabled-range-foreground: (
849
- color: (
850
- 'secondary',
851
- 200,
852
- ),
853
- ),
854
- date-disabled-range-background: transparent,
855
- week-number-foreground: (
856
- color: (
857
- 'gray',
858
- 500,
859
- ),
860
- ),
861
- week-number-background: (
862
- color: (
863
- 'gray',
864
- 200,
865
- ),
866
- ),
867
- inactive-color: (
868
- color: (
869
- 'gray',
870
- 500,
871
- ),
872
- ),
873
- weekday-color: (
874
- color: (
875
- 'gray',
876
- 800,
877
- ),
878
- ),
879
- weekend-color: (
880
- contrast-color: 'surface',
881
- ),
882
- calendar-border-radius: (
883
- border-radius: (
884
- rem(4px),
885
- rem(0),
886
- rem(20px),
496
+
497
+ border-radius: (
498
+ border-radius: (
499
+ rem(4px),
500
+ rem(0),
501
+ rem(20px),
887
502
  ),
888
503
  ),
504
+
889
505
  date-border-radius: (
890
506
  border-radius: (
891
507
  rem(20px),
@@ -893,1436 +509,637 @@ $light-calendar: (
893
509
  rem(20px),
894
510
  ),
895
511
  ),
896
- date-range-border-radius: (
897
- border-radius: (
898
- rem(20px),
899
- rem(0),
900
- rem(20px),
901
- ),
902
- ),
903
- month-border-radius: (
904
- border-radius: (
905
- rem(20px),
906
- rem(0),
907
- rem(20px),
908
- ),
909
- ),
910
- week-number-border-radius: (
911
- border-radius: (
912
- rem(4px),
913
- rem(0),
914
- rem(8px),
915
- ),
916
- ),
917
- default-size: 2,
918
- date-current-outline: (
919
- color: (
920
- 'gray',
921
- 600,
922
- ),
923
- ),
924
- date-current-hover-outline: (
925
- color: (
926
- 'surface',
927
- 500,
928
- ),
929
- ),
930
- date-current-focus-outline: (
931
- color: (
932
- 'surface',
933
- 500,
934
- ),
935
- ),
936
- date-selected-current-outline: (
937
- color: (
938
- 'surface',
939
- 500,
940
- ),
941
- ),
942
- date-selected-current-hover-outline: (
943
- color: (
944
- 'surface',
945
- 500,
946
- ),
947
- ),
948
- date-selected-current-focus-outline: (
949
- color: (
950
- 'surface',
951
- 500,
952
- ),
953
- ),
954
- date-border-color: transparent,
955
- date-hover-border-color: transparent,
956
- date-focus-border-color: transparent,
957
- date-selected-border-color: transparent,
958
- date-selected-hover-border-color: transparent,
959
- date-selected-focus-border-color: transparent,
960
- date-range-border-color: transparent,
961
- date-range-preview-border-color: transparent,
962
- );
963
512
 
964
- /// Generates a fluent calendar schema.
965
- /// @type {Map}
966
- ///
967
- /// @prop {Map} year-focus-foreground [contrast-color: ('primary', 50)]- The foreground color of the selected year in years view.
968
- /// @prop {Map} year-focus-background [color: ('primary', 50)]- The background color of the selected year on :focus in years view.
969
- ///
970
- /// @prop {Map} year-current-foreground [contrast-color: ('gray', 200)] - The foreground color of the current year.
971
- /// @prop {Map} year-current-background [color: 'gray', 200) ]- The background color of the current year in years view.
972
- /// @prop {Map} year-current-hover-foreground [contrast-color: ('gray', 300)] - The :hover foreground color of the current year in years view.
973
- /// @prop {Map} year-current-hover-background [color: ('gray' 300)] - The :hover background color of the current year in years view.
974
- /// @prop {Map} year-current-focus-foreground [contrast-color: ('primary', 50)] - The :focus foreground color of the current year in years view.
975
- /// @prop {Map} year-current-focus-background [color: ('primary' 50)] - The :focus background color of the current year in years view.
976
- ///
977
- /// @prop {Map} year-selected-foreground [contrast-color: ('primary', 50)] - The foreground color of the selected year.
978
- /// @prop {Map} year-selected-background [color: ('primary', 50)] - The background color of the selected year.
979
- /// @prop {Map} year-selected-hover-foreground [contrast-color: ('primary', 100)] - The foreground color of the selected year on :hover.
980
- /// @prop {Map} year-selected-hover-background [color: ('primary', 100)] - The background color of the selected year on :hover.
981
- /// @prop {Map} year-selected-focus-foreground [contrast-color: ('primary', 100)] - The foreground color of the selected year on :focus.
982
- /// @prop {Map} year-selected-focus-background [color: ('primary', 100)] - The background color of the selected year on :focus.
983
- ///
984
- /// @prop {Map} year-selected-current-foreground [contrast-color: ('primary', 50)] - The foreground color of the current/selected year.
985
- /// @prop {Map} year-selected-current-background [color: ('primary', 50)] - The background color of the current/selected year.
986
- /// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('primary', 100)] - The foreground color of the current/selected year on :hover.
987
- /// @prop {Map} year-selected-current-hover-background [color: ('primary', 100)] - The background color of the current/selected year on :hover.
988
- /// @prop {Map} year-selected-current-focus-foreground [contrast-color: ('primary', 100)] - The foreground color of the current/selected year on :focus.
989
- /// @prop {Map} year-selected-current-focus-background [color: ('primary', 100)] - The background color of the current/selected year on :focus.
990
- ///
991
- /// @prop {Map} month-focus-foreground [contrast-color: ('primary', 50)] - The :focus foreground color of the :focused month in months view.
992
- /// @prop {Map} month-focus-background [color: ('primary', 50)] - The :focus background color of the :focused month in months view.
993
- ///
994
- /// @prop {Map} month-selected-foreground [contrast-color: ('surface')] - The foreground color of the selected month in month view.
995
- /// @prop {Map} month-selected-background [color: ('surface')] - The background color of the selected month in month view.
996
- /// @prop {Map} month-selected-hover-foreground [contrast-color: ('gray', 200)]- The :hover foreground color of the selected month in month view.
997
- /// @prop {Map} month-selected-hover-background [color: ('gray', 200)]- The :hover background color of the selected month in month view.
998
- /// @prop {Map} month-selected-focus-foreground [contrast-color: ('gray', 200)]- The :focus foreground color of the selected month in month view.
999
- /// @prop {Map} month-selected-focus-background [color: ('gray', 200)]- The :focus background color of the selected month in month view.
1000
- ///
1001
- /// @prop {Map} month-selected-current-foreground [contrast-color: ('primary', 50)] - The foreground color of the current/selected month in month view.
1002
- /// @prop {Map} month-selected-current-background [color: ('primary', 50)]- The background color of the current/selected month in month view.
1003
- /// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('primary', 100)] - The :hover foreground color of the current/selected month in month view.
1004
- /// @prop {Map} month-selected-current-hover-background [color: ('primary', 100] - The :hover background color of the current/selected month in month view.
1005
- /// @prop {Map} month-selected-current-focus-foreground [contrast-color: ('primary', 100)] - The :focus foreground color of the current/selected month in month view.
1006
- /// @prop {Map} month-selected-current-focus-background [color: ('primary', 100)] - The :focus background color of the current/selected month in month view.
1007
- ///
1008
- /// @prop {Map} inactive-color [color: ('gray', 500)] - The foreground color of the previous and next month dates.
1009
- ///
1010
- /// @prop {Map} date-hover-foreground [contrast-color: 'gray', 300] - The :hover foreground color of a date.
1011
- /// @prop {Map} date-hover-background [color: ('gray', 300)] - The :hover background color of adate.
1012
- /// @prop {Map} date-focus-foreground [contrast-color: 'gray', 300] - The :focus foreground color of a date.
1013
- /// @prop {Map} date-focus-background [color: ('gray', 300)] - The :focus background color of a date.
1014
- ///
1015
- /// @prop {Color} date-current-outline [transparent] - The outline color of the current date.
1016
- /// @prop {Color} date-current-hover-outline [transparent] - The :hover outline color of the current date.
1017
- /// @prop {Color} date-current-focus-outline [transparent] - The :focus outline color of the current date.
1018
- /// @prop {Color} date-selected-hover-outline [transparent] - The :hover outline color of the selected date.
1019
- /// @prop {Color} date-selected-focus-outline [transparent] - The :focus outline color of the selected date.
1020
- /// @prop {Color} date-selected-current-outline [transparent] - The outline color of the current selected date.
1021
- /// @prop {Color} date-selected-current-hover-outline [transparent] - The :hover outline color of the current selected date.
1022
- /// @prop {Color} date-selected-current-focus-outline [transparent] - The :focus outline color of the current selected date.
1023
- /// @prop {Map} picker-foreground [color: ('gray', 900)]- The foreground color of the month and year pickers.
1024
- /// @prop {Map} header-background [color: ('primary', 500)] - The background color of the month and year pickers.
1025
- /// @prop {Map} header-foreground [contrast-color: ('primary', 600)] - The header foreground color.
1026
- /// @prop {Map} date-selected-background [color: ('gray', 200)] - The background color of the selected date.
1027
- /// @prop {Map} date-selected-foreground [contrast-color: ('gray', 200)] - The foreground color of the selected date.
1028
- /// @prop {Map} date-selected-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the selected date.
1029
- /// @prop {Map} date-selected-hover-background [color: ('gray', 200)] - The :hover background color of the selected date.
1030
- /// @prop {Map} date-selected-focus-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the selected date.
1031
- /// @prop {Map} date-selected-focus-background [color: ('gray', 200)] - The :hover background color of the selected date.
1032
- /// @prop {Map} date-current-foreground [color: 'surface'] - The foreground color of the current date.
1033
- /// @prop {Map} date-current-background [color: ('primary', 500)] - The background color of the current date.
1034
- /// @prop {Map} date-current-hover-foreground [color: ('primary', 600)] - The :hover foreground color of the current date.
1035
- /// @prop {Map} date-current-hover-background [color: ('gray', 300)] - The :hover background color of the current date.
1036
- /// @prop {Map} date-current-focus-foreground [color: ('primary', 600)] - The :focus foreground color of the current date.
1037
- /// @prop {Map} date-current-focus-background [color: ('gray', 300)] - The :focus background color of the current date.
1038
- /// @prop {Map} date-selected-current-foreground [contrast-color: ('primary', 600)] - The foreground color of the selected current date.
1039
- /// @prop {Map} date-selected-current-background [color: ('gray', 200)] - The background color of the selected current date.
1040
- /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('primary', 600)] - The :hover foreground color of the selected current date.
1041
- /// @prop {Map} date-selected-current-hover-background [color: ('gray', 300)] - The :hover background color of the selected current date.
1042
- /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('primary', 600)] - The :focus foreground color of the selected current date.
1043
- /// @prop {Map} date-selected-current-focus-background [color: ('gray', 300)] - The :focus background color of the selected current date.
1044
- /// @prop {Map} date-selected-current-range-foreground [contrast-color: ('primary', 600)] - The foreground color of the current date in the selected range.
1045
- /// @prop {Map} date-selected-current-range-background [color: ('gray', 200)] - The background color of the current date in the selected range.
1046
- /// @prop {Map} date-selected-current-range-hover-foreground [contrast-color: ('primary', 600)] - The :hover foreground color of the current date in the selected range.
1047
- /// @prop {Map} date-selected-current-range-hover-background [color: ('gray', 300)] - The :hover background color of the current date in the selected range.
1048
- /// @prop {Map} date-selected-current-range-focus-foreground [contrast-color: ('primary', 600)] - The :focus foreground color of the current date in the selected range.
1049
- /// @prop {Map} date-selected-current-range-focus-background [color: ('gray', 300)] - The :focus background color of the current date in the selected range.
1050
- /// @prop {Map} date-hover-border-color [color: ('gray', 700)] - The :hover border color around a date.
1051
- /// @prop {Map} date-focus-border-color [color: ('gray', 700)] - The :focus border color around a date.
1052
- /// @prop {Map} date-selected-border-color [color: ('gray', 700)] - The border color of the selected date.
1053
- /// @prop {Map} date-selected-hover-border-color [color: ('gray', 700)] - The :hover border color of the selected date.
1054
- /// @prop {Map} date-selected-focus-border-color [color: ('gray', 700)] - The :focus border color of the selected date.
1055
- /// @prop {Color} current-outline-color [transparent] - The outline color of the current year/month in year/month views.
1056
- /// @prop {Color} current-hover-outline-color [transparent] - The :hover outline color of the current year/month in year/month views.
1057
- /// @prop {Color} current-focus-outline-color [transparent] - The :focus outline color of the current year/month in year/month views.
1058
- /// @prop {Color} selected-outline-color [transparent] - The outline color of the selected year/month in year/month views.
1059
- /// @prop {Color} selected-hover-outline-color [transparent] - The :hover outline color of the selected year/month in year/month views.
1060
- /// @prop {Color} selected-focus-outline-color [transparent] - The :focus outline color of the selected year/month in year/month views.
1061
- /// @prop {Color} selected-current-outline-color [transparent] - The outline color of the selected current year/month in year/month views.
1062
- /// @prop {Color} selected-current-hover-outline-color [transparent] - The :hover outline color of the selected current year/month in year/month views.
1063
- /// @prop {Color} selected-current-focus-outline-color [transparent] - The :focus outline color of the selected current year/month in year/month views.
1064
- /// @prop {Map} date-selected-range-foreground [contrast-color: ('gray', 200)] - The foreground color of the selected range.
1065
- /// @prop {Map} date-selected-range-background [color: ('gray', 200)] - The background color of the selected range.
1066
- /// @prop {Map} date-selected-range-start-foreground [contrast-color: ('gray', 200)] - The foreground color of the first date in the selected range.
1067
- /// @prop {Map} date-selected-range-start-background [color: ('gray', 200)] - The background color of the first date in the selected range.
1068
- /// @prop {Map} date-selected-range-start-hover-foreground [contrast-color: ('gray', 300)] - The :hover foreground color of the first date in the selected range.
1069
- /// @prop {Map} date-selected-range-start-hover-background [color: ('gray', 300)] - The :hover background color of the first date in the selected range.
1070
- /// @prop {Map} date-selected-range-start-focus-foreground [contrast-color: ('gray', 300)] - The :focus foreground color of the first date in the selected range.
1071
- /// @prop {Map} date-selected-range-start-focus-background [color: ('gray', 300)] - The :focus background color of the first date in the selected range.
1072
- /// @prop {Map} date-selected-range-end-foreground [contrast-color: ('gray', 200)] - The background color of the last date in the selected range.
1073
- /// @prop {Map} date-selected-range-end-background [color: ('gray', 200)] - The background color of the last date in the selected range.
1074
- /// @prop {Map} date-selected-range-end-hover-foreground [contrast-color: ('gray', 300)] - The :hover foreground color of the last date in the selected range.
1075
- /// @prop {Map} date-selected-range-end-hover-background [color: ('gray', 300)] - The :hover background color of the last date in the selected range.
1076
- /// @prop {Map} date-selected-range-end-focus-foreground [contrast-color: ('gray', 300)] - The :focus foreground color of the last date in the selected range.
1077
- /// @prop {Map} date-selected-range-end-focus-background [color: ('gray', 300)] - The :focus background color of the last date in the selected range.
1078
- /// @prop {Map} date-range-border-color [color: ('gray', 700)] - The border color of the selected date.
1079
- /// @prop {Map} date-range-preview-border-color [color: ('gray', 700)] - The border color of the selected date.
1080
- /// @prop {Map} date-selected-range-hover-background [color: ('gray', 300)] - The :hover background color of the selected range.
1081
- /// @prop {Map} date-selected-range-focus-background [color: ('gray', 300)] - The :focus background color of the selected range.
1082
- /// @prop {Color} date-disabled-background [transparent] - The background color of disabled dates.
1083
- /// @prop {List} calendar-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for calendar.
1084
- /// @prop {List} date-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for the date outline
1085
- /// @prop {List} date-range-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for the date outline in range selection.
1086
- /// @prop {List} month-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for calendar month.
1087
- /// @prop {List} week-number-border-radius [(rem(0), rem(0), rem(8px))] - The border radius used for the week numbers column.
1088
- /// @requires {Map} $light-calendar
1089
- $fluent-calendar: extend(
1090
- $light-calendar,
1091
- (
1092
- year-focus-foreground: (
1093
- contrast-color: (
1094
- 'primary',
1095
- 50,
1096
- ),
1097
- ),
1098
- year-focus-background: (
1099
- color: (
1100
- 'primary',
1101
- 50,
1102
- ),
1103
- ),
1104
- year-current-foreground: (
1105
- contrast-color: (
1106
- 'gray',
1107
- 200,
1108
- ),
1109
- ),
1110
- year-current-background: (
1111
- color: (
1112
- 'gray',
1113
- 200,
1114
- ),
1115
- ),
1116
- year-current-hover-foreground: (
1117
- contrast-color: (
1118
- 'gray',
1119
- 300,
1120
- ),
1121
- ),
1122
- year-current-hover-background: (
1123
- color: (
1124
- 'gray',
1125
- 300,
1126
- ),
1127
- ),
1128
- year-current-focus-foreground: (
1129
- contrast-color: (
1130
- 'primary',
1131
- 50,
1132
- ),
1133
- ),
1134
- year-current-focus-background: (
1135
- color: (
1136
- 'primary',
1137
- 50,
1138
- ),
1139
- ),
1140
- year-selected-foreground: (
1141
- contrast-color: (
1142
- 'primary',
1143
- 50,
1144
- ),
1145
- ),
1146
- year-selected-background: (
1147
- color: (
1148
- 'primary',
1149
- 50,
1150
- ),
1151
- ),
1152
- year-selected-hover-foreground: (
1153
- contrast-color: (
1154
- 'primary',
1155
- 100,
1156
- ),
1157
- ),
1158
- year-selected-hover-background: (
1159
- color: (
1160
- 'primary',
1161
- 100,
1162
- ),
1163
- ),
1164
- year-selected-focus-foreground: (
1165
- contrast-color: (
1166
- 'primary',
1167
- 100,
1168
- ),
1169
- ),
1170
- year-selected-focus-background: (
1171
- contrast-color: (
1172
- 'primary',
1173
- 100,
1174
- ),
1175
- ),
1176
- year-selected-current-foreground: (
1177
- contrast-color: (
1178
- 'primary',
1179
- 50,
1180
- ),
1181
- ),
1182
- year-selected-current-background: (
1183
- color: (
1184
- 'primary',
1185
- 50,
1186
- ),
1187
- ),
1188
- year-selected-current-hover-foreground: (
1189
- contrast-color: (
1190
- 'primary',
1191
- 100,
1192
- ),
1193
- ),
1194
- year-selected-current-hover-background: (
1195
- color: (
1196
- 'primary',
1197
- 100,
1198
- ),
1199
- ),
1200
- year-selected-current-focus-foreground: (
1201
- contrast-color: (
1202
- 'primary',
1203
- 100,
1204
- ),
1205
- ),
1206
- year-selected-current-focus-background: (
1207
- contrast-color: (
1208
- 'primary',
1209
- 100,
1210
- ),
1211
- ),
1212
- month-focus-foreground: (
1213
- contrast-color: (
1214
- 'primary',
1215
- 50,
1216
- ),
1217
- ),
1218
- month-focus-background: (
1219
- color: (
1220
- 'primary',
1221
- 50,
1222
- ),
1223
- ),
1224
- month-current-foreground: (
1225
- contrast-color: (
1226
- 'gray',
1227
- 200,
1228
- ),
1229
- ),
1230
- month-current-background: (
1231
- color: (
1232
- 'gray',
1233
- 200,
1234
- ),
1235
- ),
1236
- month-current-hover-foreground: (
1237
- contrast-color: (
1238
- 'gray',
1239
- 300,
1240
- ),
1241
- ),
1242
- month-current-hover-background: (
1243
- color: (
1244
- 'gray',
1245
- 300,
1246
- ),
1247
- ),
1248
- month-current-focus-foreground: (
1249
- contrast-color: (
1250
- 'primary',
1251
- 50,
1252
- ),
1253
- ),
1254
- month-current-focus-background: (
1255
- color: (
1256
- 'primary',
1257
- 50,
1258
- ),
1259
- ),
1260
- month-selected-foreground: (
1261
- contrast-color: (
1262
- 'primary',
1263
- 50,
1264
- ),
1265
- ),
1266
- month-selected-background: (
1267
- color: (
1268
- 'primary',
1269
- 50,
1270
- ),
1271
- ),
1272
- month-selected-hover-foreground: (
1273
- contrast-color: (
1274
- 'primary',
1275
- 100,
1276
- ),
1277
- ),
1278
- month-selected-hover-background: (
1279
- color: (
1280
- 'primary',
1281
- 100,
1282
- ),
1283
- ),
1284
- month-selected-focus-foreground: (
1285
- contrast-color: (
1286
- 'primary',
1287
- 100,
1288
- ),
1289
- ),
1290
- month-selected-focus-background: (
1291
- contrast-color: (
1292
- 'primary',
1293
- 100,
1294
- ),
1295
- ),
1296
- month-selected-current-foreground: (
1297
- contrast-color: (
1298
- 'primary',
1299
- 50,
1300
- ),
1301
- ),
1302
- month-selected-current-background: (
1303
- color: (
1304
- 'primary',
1305
- 50,
1306
- ),
1307
- ),
1308
- month-selected-current-hover-foreground: (
1309
- contrast-color: (
1310
- 'primary',
1311
- 100,
1312
- ),
1313
- ),
1314
- month-selected-current-hover-background: (
1315
- color: (
1316
- 'primary',
1317
- 100,
1318
- ),
1319
- ),
1320
- month-selected-current-focus-foreground: (
1321
- contrast-color: (
1322
- 'primary',
1323
- 100,
1324
- ),
1325
- ),
1326
- month-selected-current-focus-background: (
1327
- contrast-color: (
1328
- 'primary',
1329
- 100,
1330
- ),
1331
- ),
1332
- date-selected-current-foreground: (
1333
- contrast-color: (
1334
- 'primary',
1335
- 600,
1336
- ),
1337
- ),
1338
- date-selected-current-background: (
1339
- color: (
1340
- 'gray',
1341
- 200,
1342
- ),
1343
- ),
1344
- date-selected-current-hover-foreground: (
1345
- contrast-color: (
1346
- 'primary',
1347
- 600,
1348
- ),
1349
- ),
1350
- date-selected-current-hover-background: (
1351
- color: (
1352
- 'gray',
1353
- 300,
1354
- ),
1355
- ),
1356
- date-selected-current-focus-foreground: (
1357
- contrast-color: (
1358
- 'primary',
1359
- 600,
1360
- ),
1361
- ),
1362
- date-selected-current-focus-background: (
1363
- color: (
1364
- 'gray',
1365
- 300,
1366
- ),
1367
- ),
1368
- date-selected-current-range-foreground: (
1369
- contrast-color: (
1370
- 'primary',
1371
- 600,
1372
- ),
1373
- ),
1374
- date-selected-current-range-background: (
1375
- color: (
1376
- 'gray',
1377
- 200,
1378
- ),
1379
- ),
1380
- date-selected-current-range-hover-foreground: (
1381
- contrast-color: (
1382
- 'primary',
1383
- 600,
1384
- ),
1385
- ),
1386
- date-selected-current-range-hover-background: (
1387
- color: (
1388
- 'gray',
1389
- 300,
1390
- ),
1391
- ),
1392
- date-selected-current-range-focus-foreground: (
1393
- contrast-color: (
1394
- 'primary',
1395
- 600,
1396
- ),
1397
- ),
1398
- date-selected-current-range-focus-background: (
1399
- color: (
1400
- 'gray',
1401
- 300,
1402
- ),
1403
- ),
1404
- date-selected-range-foreground: (
1405
- contrast-color: (
1406
- 'gray',
1407
- 200,
1408
- ),
1409
- ),
1410
- date-selected-range-background: (
1411
- color: (
1412
- 'gray',
1413
- 200,
1414
- ),
1415
- ),
1416
- date-selected-range-hover-background: (
1417
- color: (
1418
- 'gray',
1419
- 300,
1420
- ),
1421
- ),
1422
- date-selected-range-focus-background: (
1423
- color: (
1424
- 'gray',
1425
- 300,
1426
- ),
1427
- ),
1428
- date-selected-range-start-foreground: (
1429
- contrast-color: (
1430
- 'gray',
1431
- 200,
1432
- ),
1433
- ),
1434
- date-selected-range-start-background: (
1435
- color: (
1436
- 'gray',
1437
- 200,
1438
- ),
1439
- ),
1440
- date-selected-range-start-hover-foreground: (
1441
- contrast-color: (
1442
- 'gray',
1443
- 300,
1444
- ),
1445
- ),
1446
- date-selected-range-start-hover-background: (
1447
- color: (
1448
- 'gray',
1449
- 300,
1450
- ),
1451
- ),
1452
- date-selected-range-start-focus-foreground: (
1453
- contrast-color: (
1454
- 'gray',
1455
- 300,
1456
- ),
1457
- ),
1458
- date-selected-range-start-focus-background: (
1459
- color: (
1460
- 'gray',
1461
- 300,
1462
- ),
1463
- ),
1464
- date-selected-range-end-foreground: (
1465
- contrast-color: (
1466
- 'gray',
1467
- 200,
1468
- ),
1469
- ),
1470
- date-selected-range-end-background: (
1471
- color: (
1472
- 'gray',
1473
- 200,
1474
- ),
1475
- ),
1476
- date-selected-range-end-hover-foreground: (
1477
- contrast-color: (
1478
- 'gray',
1479
- 300,
1480
- ),
1481
- ),
1482
- date-selected-range-end-hover-background: (
1483
- color: (
1484
- 'gray',
1485
- 300,
1486
- ),
1487
- ),
1488
- date-selected-range-end-focus-foreground: (
1489
- contrast-color: (
1490
- 'gray',
1491
- 300,
1492
- ),
1493
- ),
1494
- date-selected-range-end-focus-background: (
1495
- color: (
1496
- 'gray',
1497
- 300,
1498
- ),
1499
- ),
1500
- date-current-outline: transparent,
1501
- date-current-hover-outline: transparent,
1502
- date-current-focus-outline: transparent,
1503
- date-selected-current-outline: transparent,
1504
- date-selected-current-hover-outline: transparent,
1505
- date-selected-current-focus-outline: transparent,
1506
- date-hover-background: (
1507
- color: (
1508
- 'gray',
1509
- 300,
1510
- ),
1511
- ),
1512
- date-hover-foreground: (
1513
- contrast-color: (
1514
- 'gray',
1515
- 300,
1516
- ),
1517
- ),
1518
- date-focus-background: (
1519
- color: (
1520
- 'gray',
1521
- 300,
1522
- ),
1523
- ),
1524
- date-focus-foreground: (
1525
- contrast-color: (
1526
- 'gray',
1527
- 300,
1528
- ),
1529
- ),
1530
- picker-foreground: (
1531
- color: (
1532
- 'gray',
1533
- 900,
1534
- ),
1535
- ),
1536
- header-background: (
1537
- color: (
1538
- 'primary',
1539
- 500,
1540
- ),
1541
- ),
1542
- header-foreground: (
1543
- contrast-color: (
1544
- 'primary',
1545
- 600,
1546
- ),
1547
- ),
1548
- date-current-foreground: (
1549
- contrast-color: (
1550
- 'primary',
1551
- 600,
1552
- ),
1553
- ),
1554
- date-current-hover-foreground: (
1555
- contrast-color: (
1556
- 'primary',
1557
- 600,
1558
- ),
1559
- ),
1560
- date-current-focus-foreground: (
1561
- contrast-color: (
1562
- 'primary',
1563
- 600,
1564
- ),
1565
- ),
1566
- date-current-background: (
1567
- color: (
1568
- 'primary',
1569
- 500,
1570
- ),
1571
- ),
1572
- date-current-hover-background: (
1573
- color: (
1574
- 'gray',
1575
- 300,
1576
- ),
1577
- ),
1578
- date-current-focus-background: (
1579
- color: (
1580
- 'gray',
1581
- 300,
1582
- ),
1583
- ),
1584
- date-selected-background: (
1585
- color: (
1586
- 'gray',
1587
- 200,
1588
- ),
1589
- ),
1590
- date-selected-foreground: (
1591
- contrast-color: (
1592
- 'gray',
1593
- 200,
1594
- ),
1595
- ),
1596
- date-selected-hover-foreground: (
1597
- contrast-color: (
1598
- 'gray',
1599
- 300,
1600
- ),
1601
- ),
1602
- date-selected-hover-background: (
1603
- color: (
1604
- 'gray',
1605
- 300,
1606
- ),
1607
- ),
1608
- date-selected-focus-foreground: (
1609
- contrast-color: (
1610
- 'gray',
1611
- 300,
1612
- ),
1613
- ),
1614
- date-selected-focus-background: (
1615
- color: (
1616
- 'gray',
1617
- 300,
1618
- ),
1619
- ),
1620
- current-outline-color: transparent,
1621
- current-outline-hover-color: transparent,
1622
- current-outline-focus-color: transparent,
1623
- selected-outline-color: transparent,
1624
- selected-hover-outline-color: transparent,
1625
- selected-focus-outline-color: transparent,
1626
- selected-current-outline-color: transparent,
1627
- selected-current-outline-hover-color: transparent,
1628
- selected-current-outline-focus-color: transparent,
1629
- calendar-border-radius: (
1630
- border-radius: (
1631
- rem(0),
1632
- rem(0),
1633
- rem(25px),
1634
- ),
1635
- ),
1636
- date-border-radius: (
1637
- border-radius: (
1638
- rem(0),
1639
- rem(0),
1640
- rem(25px),
1641
- ),
1642
- ),
1643
- date-range-border-radius: (
1644
- border-radius: (
1645
- rem(0),
1646
- rem(0),
1647
- rem(25px),
1648
- ),
1649
- ),
1650
- month-border-radius: (
1651
- border-radius: (
1652
- rem(0),
1653
- rem(0),
1654
- rem(25px),
1655
- ),
1656
- ),
1657
- week-number-border-radius: (
1658
- border-radius: (
1659
- rem(0),
1660
- rem(0),
1661
- rem(8px),
1662
- ),
1663
- ),
1664
- date-hover-border-color: (
1665
- color: (
1666
- 'gray',
1667
- 700,
1668
- ),
513
+ month-border-radius: (
514
+ border-radius: (
515
+ rem(20px),
516
+ rem(0),
517
+ rem(20px),
1669
518
  ),
1670
- date-focus-border-color: (
1671
- color: (
1672
- 'gray',
1673
- 700,
1674
- ),
519
+ ),
520
+
521
+ default-size: 2,
522
+
523
+ current-outline: (
524
+ color: (
525
+ 'gray',
526
+ 600,
1675
527
  ),
1676
- date-range-border-color: (
1677
- color: (
1678
- 'gray',
1679
- 700,
1680
- ),
528
+ ),
529
+
530
+ current-outline-hover: (
531
+ color: (
532
+ 'surface',
533
+ 500,
1681
534
  ),
1682
- date-range-preview-border-color: (
1683
- color: (
1684
- 'gray',
1685
- 700,
1686
- ),
535
+ ),
536
+
537
+ current-outline-focus: (
538
+ color: (
539
+ 'surface',
540
+ 500,
1687
541
  ),
1688
- date-selected-border-color: (
1689
- color: (
1690
- 'gray',
1691
- 700,
1692
- ),
542
+ ),
543
+
544
+ current-selected-outline: (
545
+ color: (
546
+ 'surface',
547
+ 500,
1693
548
  ),
1694
- date-selected-hover-border-color: (
1695
- color: (
1696
- 'gray',
1697
- 700,
1698
- ),
549
+ ),
550
+
551
+ date-hover-foreground: (
552
+ contrast-color: (
553
+ 'secondary',
554
+ 100,
1699
555
  ),
1700
- date-selected-focus-border-color: (
1701
- color: (
1702
- 'gray',
1703
- 700,
1704
- ),
556
+ ),
557
+
558
+ date-focus-foreground: (
559
+ contrast-color: (
560
+ 'secondary',
561
+ 100,
1705
562
  ),
1706
- date-disabled-background: transparent,
1707
- )
563
+ ),
1708
564
  );
1709
565
 
1710
- /// Generates a bootstrap calendar schema.
566
+ /// Generates a fluent calendar schema.
1711
567
  /// @type {Map}
1712
- /// @prop {Map} header-background [color: ('secondary', 50, .2)] - The header background color.
1713
- /// @prop {Map} header-foreground [contrast-color: ('gray', 50)] - The header foreground color.
1714
- /// @prop {Map} month-nav-arrow-color [color: ('primary', 500)] - The color of the icon button responsible for month navigation.
1715
- /// @prop {Map} month-nav-arrow-hover-color [color: ('primary', 800)] - The :hover color of the icon button responsible for month navigation.
1716
- /// @prop {Map} month-nav-arrow-focus-color [color: ('primary', 800)] - The :focus color of the icon button responsible for month navigation.
1717
- /// @prop {Map} picker-foreground [color: ('gray', 900)]- The foreground color of the month and year pickers.
1718
- /// @prop {Map} picker-hover-foreground [color: ('secondary', 500)]- The :hover foreground color of the month and year pickers.
1719
- /// @prop {Map} picker-focus-foreground [color: ('secondary', 500)]- The :focus foreground color of the month and year pickers.
1720
- /// @prop {Map} picker-background [color: ('secondary', 50, .2)] - The calendar picker background color.
1721
- /// @prop {Map} year-hover-foreground [contrast-color: ('gray', 50)] - The :hover foreground color of the year in years view.
1722
- /// @prop {Map} year-hover-background [color: ('gray', 200)] - The :hover background color of the year in years view.
1723
- /// @prop {Map} year-focus-foreground [contrast-color: ('primary', 600)]- The :focus foreground color of the selected year in years view.
1724
- /// @prop {Map} year-focus-background [color: ('primary', 500)]- The :focus background color of the selected year on :focus in years view.
1725
- /// @prop {Map} year-current-background [color: 'gray', 200) ]- The background color of the current year in years view.
1726
- /// @prop {Map} year-current-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the current year in years view.
1727
- /// @prop {Map} year-current-hover-background [color: ('gray' 200)] - The :hover background color of the current year in years view.
1728
- /// @prop {Map} year-current-focus-foreground [contrast-color: ('primary', 500)] - The :focus foreground color of the current year in years view.
1729
- /// @prop {Map} year-current-focus-background [color: ('primary' 500)] - The :focus background color of the current year in years view.
1730
- /// @prop {Map} month-current-foreground [contrast-color: ('gray', 50)] - The foreground color of the current selected month.
1731
- /// @prop {Map} month-current-background [color: ('gray', 200)] - The background color of the current selected month.
1732
- /// @prop {Map} month-hover-foreground [contrast-color: ('gray', 50)] - The :hover foreground color of the month in months view.
1733
- /// @prop {Map} month-hover-background [color: ('gray', 200)] - The :hover background color of the month in months view.
1734
- /// @prop {Map} month-focus-foreground [contrast-color: ('primary', 900)] - The :focus foreground color of the month in months view.
1735
- /// @prop {Map} month-focus-background [color: ('primary', 500)] - The :focus background color of the month in months view.
1736
- /// @prop {Map} month-current-hover-foreground [contrast-color: ('gray', 200)] - The :hover foreground color of the current month in months view.
1737
- /// @prop {Map} month-current-hover-background [color: ('gray', 200)] - The :hover background color of the current month in months view.
1738
- /// @prop {Map} month-current-focus-foreground [contrast-color: ('primary', 600)] - The :focus foreground color of the current month in months view.
1739
- /// @prop {Map} month-current-focus-background [color: ('primary', 500)] - The :focus background color of the current month in months view.
1740
- /// @prop {Map} date-special-foreground [contrast-color: ('primary', 600)] - The foreground color used for special dates.
1741
- /// @prop {Map} date-special-background [color: ('primary', 300)] - The background color used for special dates.
1742
- /// @prop {Map} date-current-foreground [color: ('gray', 800)] - The foreground of the current date.
1743
- /// @prop {Map} date-current-background [color: ('gray', 200)] - The background color of the current date.
1744
- /// @prop {Map} date-current-hover-foreground [color: ('gray', 800)] - The :hover foreground color of the current date.
1745
- /// @prop {Map} date-current-hover-background [color: ('gray', 200)] - The :hover background color of the current date.
1746
- /// @prop {Map} date-current-focus-foreground [color: ('gray', 800)] - The :focus foreground color of the current date.
1747
- /// @prop {Map} date-current-focus-background [color: ('gray', 200)] - The :focus background color of the current date.
1748
- /// @prop {Map} date-selected-background [color: ('primary', 500)] - The background color of the selected date.
1749
- /// @prop {Map} date-selected-hover-background [color: ('primary', 500)] - The :hover background color of the selected date.
1750
- /// @prop {Map} date-selected-focus-background [color: ('primary', 500)] - The :focus background color of the selected date.
1751
- /// @prop {Map} date-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected date.
1752
- /// @prop {Map} date-selected-focus-foreground [contrast-color: ('primary', 900)] - The :focus foreground color of the selected date.
1753
- /// @prop {Map} date-selected-foreground [color: 'surface'] - The foreground color of the selected date.
1754
- /// @prop {Map} date-selected-current-foreground [color: ('gray', 800)] - The foreground color of the selected current date.
1755
- /// @prop {Map} date-selected-current-background [color: ('primary', 500)] - The background color of the selected current date.
1756
- /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('gray', 800)] - The :hover foreground color of the selected current date.
1757
- /// @prop {Map} date-selected-current-hover-background [color: ('primary', 500)] - The :hover background color of the selected current date.
1758
- /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('gray', 800)] - The :focus foreground color of the selected current date.
1759
- /// @prop {Map} date-selected-current-focus-background [color: ('primary', 500)] - The :focus background color of the selected current date.
1760
- /// @prop {Map} date-selected-current-range-foreground [contrast-color: ('gray', 800)] - The foreground color of the current date in the selected range.
1761
- /// @prop {Map} date-selected-current-range-background [color: ('primary', 500)] - The background color of the current date in the selected range.
1762
- /// @prop {Map} date-selected-current-range-hover-foreground [contrast-color: ('gray', 800)] - The :hover foreground color of the current date in the selected range.
1763
- /// @prop {Map} date-selected-current-range-hover-background [color: ('primary', 500)] - The :hover background color of the current date in the selected range.
1764
- /// @prop {Map} date-selected-current-range-focus-foreground [contrast-color: ('gray', 800)] - The :focus foreground color of the current date in the selected range.
1765
- /// @prop {Map} date-selected-current-range-focus-background [color: ('primary', 500)] - The :focus background color of the current date in the selected range.
1766
- /// @prop {Map} date-selected-range-start-foreground [contrast-color: ('primary', 600)] - The foreground color of the first date in the selected range.
1767
- /// @prop {Map} date-selected-range-start-background [color: ('primary', 500)] - The background color of the first date in the selected range.
1768
- /// @prop {Map} date-selected-range-start-hover-foreground [contrast-color: ('primary', 500)] - The :hover foreground color of the first date in the selected range.
1769
- /// @prop {Map} date-selected-range-start-hover-background [color: ('primary', 500)] - The :hover background color of the first date in the selected range.
1770
- /// @prop {Map} date-selected-range-start-focus-foreground [contrast-color: ('primary', 600)] - The :focus foreground color of the first date in the selected range.
1771
- /// @prop {Map} date-selected-range-start-focus-background [color: ('primary', 600)] - The :focus background color of the first date in the selected range.
1772
- /// @prop {Map} date-selected-range-end-foreground [contrast-color: ('primary', 600)] - The background color of the last date in the selected range.
1773
- /// @prop {Map} date-selected-range-end-background [color: ('primary', 600)] - The background color of the last date in the selected range.
1774
- /// @prop {Map} date-selected-range-end-hover-foreground [contrast-color: ('primary', 600)] - The :hover foreground color of the last date in the selected range.
1775
- /// @prop {Map} date-selected-range-end-hover-background [color: ('primary', 600)] - The :hover background color of the last date in the selected range.
1776
- /// @prop {Map} date-selected-range-end-focus-foreground [contrast-color: ('primary', 600)] - The :focus foreground color of the last date in the selected range.
1777
- /// @prop {Map} date-selected-range-end-focus-background [color: ('primary', 600)] - The :focus background color of the last date in the selected range.
1778
- /// @prop {Map} date-selected-range-foreground [contrast-color: ('primary', 600)] - The foreground color of the selected range.
1779
- /// @prop {Map} date-selected-range-hover-foreground [contrast-color: ('primary', 600)] - The :hover foreground color of the selected range.
1780
- /// @prop {Map} date-selected-range-focus-foreground [contrast-color: ('primary', 600)] - The :focus foreground color of the selected range.
1781
- /// @prop {Map} date-selected-range-background [color: ('primary', 200)] - The background color of the selected range.
1782
- /// @prop {Map} date-selected-range-hover-background [color: ('primary', 500)] - The :hover background color of the selected range.
1783
- /// @prop {Map} date-selected-range-focus-background [color: ('primary', 500)] - The :focus background color of the selected range.
1784
- /// @prop {Color} date-current-outline [transparent] - The outline color of the current date.
1785
- /// @prop {Color} date-current-hover-outline [transparent] - The :hover outline color of the current date.
1786
- /// @prop {Color} date-current-focus-outline [transparent] - The :focus outline color of the current date.
1787
- /// @prop {Color} date-selected-current-outline [transparent] - The outline color of the current selected date.
1788
- /// @prop {Color} date-selected-current-hover-outline [transparent] - The :hover outline color of the current selected date.
1789
- /// @prop {Color} date-selected-current-focus-outline [transparent] - The :focus color of the current selected date.
1790
- /// @prop {Color} current-outline-color [transparent] - The outline color of the current year/month in year/month views.
1791
- /// @prop {Color} current-hover-outline-color [transparent] - The :hover outline color of the current year/month in year/month views.
1792
- /// @prop {Color} current-focus-outline-color [transparent] - The :focus outline color of the current year/month in year/month views.
1793
- /// @prop {Color} selected-outline-color [transparent] - The outline color of the selected year/month in year/month views.
1794
- /// @prop {Color} selected-hover-outline-color [transparent] - The :hover outline color of the selected year/month in year/month views.
1795
- /// @prop {Color} selected-focus-outline-color [transparent] - The :focus outline color of the selected year/month in year/month views.
1796
- /// @prop {Color} selected-current-outline-color [transparent] - The outline color of the selected current year/month in year/month views.
1797
- /// @prop {Color} selected-current-hover-outline-color [transparent] - The :hover outline color of the selected current year/month in year/month views.
1798
- /// @prop {Color} selected-current-focus-outline-color [transparent] - The :focus outline color of the selected current year/month in year/month views.
1799
- /// @prop {Map} calendar-border-color [color: ('gray', 200)] - The calendar border color.
1800
- /// @prop {Map} weekday-color [color: 'info'] - The foreground color for weekday labels.
1801
- /// @prop {Color} week-number-background [transparent] - The background color of the week number column.
1802
- /// @prop {List} date-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the date outline.
1803
- /// @prop {List} date-range-border-radius [(rem(0), rem(0), rem(0))] - The border radius used for the date outline in range selection.
1804
- /// @prop {List} calendar-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the calendar.
1805
- /// @prop {List} month-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the calendar month.
1806
- /// @prop {List} week-number-border-radius [(rem(0), rem(0), rem(8px))] - The border radius used for the week numbers column.
568
+ /// @prop {Color} date-current-text-color [color: 'surface'] - The text color for the current date.
569
+ /// @prop {Map} date-current-bg-color [color: ('primary', 500)] - The background color for the current date.
570
+ /// @prop {Map} date-selected-background [color: ('primary', 50)] - The background color for the selected date.
571
+ /// @prop {Map} date-selected-text-color [color: ('primary', 100)] - The text color for the selected date.
572
+ /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('primary', 600)] - The hover text color for the selected/current date.
573
+ /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('primary', 600)] - The focus text color for the selected/current date.
574
+ /// @prop {Map} date-current-hover-background [color: ('primary', 500)] - The hover background color for the current date.
575
+ /// @prop {Map} date-current-focus-background [color: ('primary', 600)] - The focus background color for the current date.
576
+ /// @prop {Map} date-selected-current-hover-background [color: ('primary', 600)] - The hover background color for the selected/current date.
577
+ /// @prop {Map} date-selected-current-focus-background [color: ('primary', 600)] - The focus background color for the selected/current date.
578
+ /// @prop {Map} date-current-hover-foreground [color: ('primary', 600)] - The hover text color for the current date.
579
+ /// @prop {Map} date-current-focus-foreground [color: ('primary', 600)] - The focus text color for the current date.
580
+ /// @prop {Map} date-selected-current-foreground [contrast-color: ('primary', 600)] - The text color for the selected/current date.
581
+ /// @prop {List} border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for calendar.
582
+ /// @prop {List} date-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for calendar date.
583
+ /// @prop {List} month-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for calendar month.
1807
584
  /// @requires {Map} $light-calendar
1808
- $bootstrap-calendar: extend(
585
+ $fluent-calendar: extend(
1809
586
  $light-calendar,
1810
587
  (
1811
- calendar-border-color: (
1812
- color: (
1813
- 'gray',
1814
- 300,
1815
- ),
1816
- ),
1817
- header-background: (
1818
- color: (
1819
- 'secondary',
1820
- 50,
1821
- 0.2,
1822
- ),
1823
- ),
1824
- header-foreground: (
1825
- contrast-color: (
1826
- 'gray',
1827
- 50,
1828
- ),
1829
- ),
1830
- picker-foreground: (
1831
- color: (
1832
- 'gray',
1833
- 900,
1834
- ),
1835
- ),
1836
- picker-background: (
1837
- color: (
1838
- 'secondary',
1839
- 50,
1840
- 0.2,
1841
- ),
1842
- ),
1843
- month-nav-arrow-color: (
1844
- color: (
1845
- 'primary',
1846
- 500,
1847
- ),
1848
- ),
1849
- month-nav-arrow-hover-color: (
1850
- color: (
1851
- 'primary',
1852
- 800,
1853
- ),
1854
- ),
1855
- month-nav-arrow-focus-color: (
1856
- color: (
1857
- 'primary',
1858
- 800,
1859
- ),
1860
- ),
1861
- year-hover-foreground: (
588
+ date-current-text-color: (
1862
589
  contrast-color: (
1863
- 'gray',
1864
- 50,
1865
- ),
1866
- ),
1867
- year-focus-background: (
1868
- color: (
1869
590
  'primary',
1870
- 500,
591
+ 600,
1871
592
  ),
1872
593
  ),
1873
- year-focus-foreground: (
594
+
595
+ date-current-hover-foreground: (
1874
596
  contrast-color: (
1875
597
  'primary',
1876
598
  600,
1877
599
  ),
1878
600
  ),
1879
- year-current-background: (
1880
- color: (
1881
- 'gray',
1882
- 200,
1883
- ),
1884
- ),
1885
- year-current-hover-foreground: (
1886
- contrast-color: (
1887
- 'gray',
1888
- 200,
1889
- ),
1890
- ),
1891
- year-current-hover-background: (
1892
- color: (
1893
- 'gray',
1894
- 200,
1895
- ),
1896
- ),
1897
- year-current-focus-foreground: (
601
+ date-current-focus-foreground: (
1898
602
  contrast-color: (
1899
603
  'primary',
1900
604
  600,
1901
605
  ),
1902
606
  ),
1903
- year-current-focus-background: (
607
+
608
+ date-current-bg-color: (
1904
609
  color: (
1905
610
  'primary',
1906
611
  500,
1907
612
  ),
1908
613
  ),
1909
- month-hover-foreground: (
1910
- contrast-color: (
1911
- 'gray',
1912
- 50,
1913
- ),
1914
- ),
1915
- month-hover-background: (
1916
- color: (
1917
- 'gray',
1918
- 200,
1919
- ),
1920
- ),
1921
- month-focus-foreground: (
1922
- contrast-color: (
1923
- 'primary',
1924
- 900,
1925
- ),
1926
- ),
1927
- month-focus-background: (
614
+
615
+ date-current-hover-background: (
1928
616
  color: (
1929
617
  'primary',
1930
618
  500,
1931
619
  ),
1932
620
  ),
1933
- month-current-foreground: (
1934
- contrast-color: (
1935
- 'gray',
1936
- 50,
1937
- ),
1938
- ),
1939
- month-current-background: (
1940
- color: (
1941
- 'gray',
1942
- 200,
1943
- ),
1944
- ),
1945
- month-current-hover-foreground: (
1946
- contrast-color: (
1947
- 'gray',
1948
- 200,
1949
- ),
1950
- ),
1951
- month-current-hover-background: (
621
+
622
+ date-current-focus-background: (
1952
623
  color: (
1953
- 'gray',
1954
- 200,
1955
- ),
1956
- ),
1957
- month-current-focus-foreground: (
1958
- contrast-color: (
1959
624
  'primary',
1960
625
  600,
1961
626
  ),
1962
627
  ),
1963
- month-current-focus-background: (
1964
- color: (
628
+
629
+ date-selected-current-foreground: (
630
+ contrast-color: (
1965
631
  'primary',
1966
- 500,
632
+ 600,
1967
633
  ),
1968
634
  ),
1969
- date-special-background: (
1970
- color: (
635
+
636
+ date-selected-current-hover-foreground: (
637
+ contrast-color: (
1971
638
  'primary',
1972
- 300,
639
+ 600,
1973
640
  ),
1974
641
  ),
1975
- date-special-foreground: (
642
+
643
+ date-selected-current-focus-foreground: (
1976
644
  contrast-color: (
1977
645
  'primary',
1978
646
  600,
1979
647
  ),
1980
648
  ),
1981
- date-selected-background: (
649
+
650
+ date-selected-current-hover-background: (
1982
651
  color: (
1983
652
  'primary',
1984
- 500,
653
+ 600,
1985
654
  ),
1986
655
  ),
1987
- date-selected-hover-background: (
656
+
657
+ date-selected-current-focus-background: (
1988
658
  color: (
1989
659
  'primary',
1990
- 500,
660
+ 600,
1991
661
  ),
1992
662
  ),
1993
- date-selected-focus-background: (
663
+
664
+ date-selected-background: (
1994
665
  color: (
1995
666
  'primary',
1996
- 500,
667
+ 50,
1997
668
  ),
1998
669
  ),
1999
- date-selected-foreground: (
670
+
671
+ date-selected-text-color: (
2000
672
  contrast-color: (
2001
673
  'primary',
2002
- 900,
674
+ 50,
2003
675
  ),
2004
676
  ),
677
+
2005
678
  date-selected-hover-foreground: (
2006
679
  contrast-color: (
2007
680
  'primary',
2008
- 900,
681
+ 50,
2009
682
  ),
2010
683
  ),
684
+
2011
685
  date-selected-focus-foreground: (
2012
686
  contrast-color: (
2013
687
  'primary',
2014
- 900,
688
+ 50,
689
+ ),
690
+ ),
691
+
692
+ border-radius: (
693
+ border-radius: (
694
+ rem(0),
695
+ rem(0),
696
+ rem(20px),
697
+ ),
698
+ ),
699
+ date-border-radius: (
700
+ border-radius: (
701
+ rem(0),
702
+ rem(0),
703
+ rem(20px),
704
+ ),
705
+ ),
706
+ month-border-radius: (
707
+ border-radius: (
708
+ rem(0),
709
+ rem(0),
710
+ rem(20px),
2015
711
  ),
2016
712
  ),
2017
- date-current-background: (
713
+ )
714
+ );
715
+
716
+ /// Generates a bootstrap calendar schema.
717
+ /// @type {Map}
718
+ /// @prop {Map} year-hover-text-color [color: ('primary', 500)] - The year hover text color.
719
+ /// @prop {Map} date-special-background [color: ('warn')] - The background color used for special dates.
720
+ /// @prop {Map} month-hover-text-color [color: ('primary', 500)] - The month hover text color.
721
+ /// @prop {Map} month-hover-current-text-color [color: ('primary', 500)] - The current month hover text color.
722
+ /// @prop {Map} month-hover-background [color: ('gray', 100)] - The month hover text color.
723
+ /// @prop {Map} picker-text-hover-color [color: ('primary', 500)]- The hover picker month/year color.
724
+ /// @prop {Map} picker-arrow-color [color: ('primary', 500)] - The idle picker arrow color.
725
+ /// @prop {Map} picker-arrow-hover-color [color: ('primary', 800)] - The picker hover arrow color.
726
+ /// @prop {Map} picker-text-color [color: ('gray', 900)]- The idle picker month/year color.
727
+ /// @prop {Map} picker-background-color [color: ('gray', 100)] - The igx calendar picker background color.
728
+ /// @prop {Map} year-current-text-color [color: ('primary', 500)] - The text color for the current/selected year.
729
+ /// @prop {Map} month-current-text-color [color: ('primary', 500)]- The text color for the current/selected month.
730
+ /// @prop {Map} label-color [color: 'info'] - The text color for weekday labels.
731
+ /// @prop {Color} date-current-text-color [color: 'surface'] - The text color for the current date.
732
+ /// @prop {Map} date-hover-background [color: ('primary', 500)] - The hover date background color.
733
+ /// @prop {Map} date-focus-background [color: ('primary', 500)] - The hover date background color.
734
+ /// @prop {Map} date-current-bg-color [color: ('primary', 600)] - The background color for the current date.
735
+ /// @prop {Map} date-selected-background [color: ('primary', 300)] - The background color for the selected date.
736
+ /// @prop {Map} date-selected-hover-foreground [contrast-color: ('gray', 900)] - The hover text color for the selected date.
737
+ /// @prop {Map} date-selected-focus-foreground [contrast-color: ('gray', 900)] - The focus text color for the selected date.
738
+ /// @prop {Color} date-selected-text-color [color: 'surface'] - The text color for the selected date.
739
+ /// @prop {Color} content-background [color: 'surface'] - The main content background color.
740
+ /// @prop {Map} week-number-background [('gray', 200)] - The background color of the week number column.
741
+ /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('primary', 600)] - The hover text color for the selected/current date.
742
+ /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('primary', 600)] - The focus text color for the selected/current date.
743
+ /// @prop {Map} date-current-hover-background [color: ('primary', 600)] - The hover background color for the current date.
744
+ /// @prop {Map} date-current-focus-background [color: ('primary', 600)] - The focus background color for the current date.
745
+ /// @prop {Map} date-selected-current-hover-background [color: ('primary', 700)] - The hover background color for the selected/current date.
746
+ /// @prop {Map} date-selected-current-focus-background [color: ('primary', 700)] - The focus background color for the selected/current date.
747
+ /// @prop {Map} date-current-hover-foreground [color: ('surface')] - The hover text color for the current date.
748
+ /// @prop {Map} date-current-focus-foreground [color: ('surface')] - The focus text color for the current date.
749
+ /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar.
750
+ /// @prop {List} date-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar date.
751
+ /// @prop {List} month-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar month.
752
+ /// @requires {Map} $light-calendar
753
+ $bootstrap-calendar: extend(
754
+ $light-calendar,
755
+ (
756
+ picker-background-color: (
2018
757
  color: (
2019
758
  'gray',
2020
- 200,
759
+ 100,
2021
760
  ),
2022
761
  ),
2023
- date-current-foreground: (
762
+
763
+ year-hover-text-color: (
2024
764
  color: (
2025
- 'gray',
2026
- 800,
765
+ 'primary',
766
+ 500,
2027
767
  ),
2028
768
  ),
2029
- date-current-hover-foreground: (
769
+
770
+ date-special-background: (
771
+ color: 'warn',
772
+ ),
773
+
774
+ month-hover-text-color: (
2030
775
  color: (
2031
- 'gray',
2032
- 800,
776
+ 'primary',
777
+ 500,
2033
778
  ),
2034
779
  ),
2035
- date-current-focus-foreground: (
780
+
781
+ month-hover-current-text-color: (
2036
782
  color: (
2037
- 'gray',
2038
- 800,
783
+ 'primary',
784
+ 500,
2039
785
  ),
2040
786
  ),
2041
- date-current-hover-background: (
787
+
788
+ month-hover-background: (
2042
789
  color: (
2043
790
  'gray',
2044
- 200,
791
+ 100,
2045
792
  ),
2046
793
  ),
2047
- date-current-focus-background: (
794
+
795
+ picker-text-hover-color: (
2048
796
  color: (
2049
- 'gray',
2050
- 200,
797
+ 'primary',
798
+ 500,
2051
799
  ),
2052
800
  ),
2053
- date-selected-current-background: (
801
+
802
+ picker-arrow-color: (
2054
803
  color: (
2055
804
  'primary',
2056
805
  500,
2057
806
  ),
2058
807
  ),
2059
- date-selected-current-foreground: (
808
+
809
+ picker-arrow-hover-color: (
2060
810
  color: (
2061
- 'gray',
811
+ 'primary',
2062
812
  800,
2063
813
  ),
2064
814
  ),
2065
- date-selected-current-hover-background: (
815
+
816
+ year-current-text-color: (
2066
817
  color: (
2067
818
  'primary',
2068
819
  500,
2069
820
  ),
2070
821
  ),
2071
- date-selected-current-focus-background: (
822
+
823
+ month-current-text-color: (
2072
824
  color: (
2073
825
  'primary',
2074
826
  500,
2075
827
  ),
2076
828
  ),
2077
- date-selected-current-hover-foreground: (
2078
- color: (
2079
- 'gray',
2080
- 800,
2081
- ),
829
+
830
+ label-color: (
831
+ color: 'info',
2082
832
  ),
2083
- date-selected-current-focus-foreground: (
833
+
834
+ date-current-text-color: (
835
+ color: 'surface',
836
+ ),
837
+
838
+ date-current-hover-foreground: (
839
+ color: 'surface',
840
+ ),
841
+
842
+ date-current-focus-foreground: (
843
+ color: 'surface',
844
+ ),
845
+
846
+ date-current-bg-color: (
2084
847
  color: (
2085
- 'gray',
2086
- 800,
848
+ 'primary',
849
+ 600,
2087
850
  ),
2088
851
  ),
2089
- date-selected-range-start-foreground: (
852
+
853
+ date-selected-current-hover-foreground: (
2090
854
  contrast-color: (
2091
855
  'primary',
2092
856
  600,
2093
857
  ),
2094
858
  ),
2095
- date-selected-range-start-background: (
2096
- color: (
859
+
860
+ date-selected-current-focus-foreground: (
861
+ contrast-color: (
2097
862
  'primary',
2098
- 500,
863
+ 600,
2099
864
  ),
2100
865
  ),
2101
- date-selected-range-start-hover-foreground: (
2102
- contrast-color: (
866
+
867
+ date-selected-current-background: (
868
+ color: (
2103
869
  'primary',
2104
870
  600,
2105
871
  ),
2106
872
  ),
2107
- date-selected-range-start-hover-background: (
873
+
874
+ date-selected-current-hover-background: (
2108
875
  color: (
2109
876
  'primary',
2110
- 600,
877
+ 700,
2111
878
  ),
2112
879
  ),
2113
- date-selected-range-start-focus-foreground: (
2114
- contrast-color: (
880
+
881
+ date-selected-current-focus-background: (
882
+ color: (
2115
883
  'primary',
2116
- 600,
884
+ 700,
2117
885
  ),
2118
886
  ),
2119
- date-selected-range-start-focus-background: (
887
+
888
+ date-current-hover-background: (
2120
889
  color: (
2121
890
  'primary',
2122
891
  600,
2123
892
  ),
2124
893
  ),
2125
- date-selected-range-end-foreground: (
2126
- contrast-color: (
894
+
895
+ date-current-focus-background: (
896
+ color: (
2127
897
  'primary',
2128
898
  600,
2129
899
  ),
2130
900
  ),
2131
- date-selected-range-end-background: (
901
+
902
+ date-hover-background: (
2132
903
  color: (
2133
904
  'primary',
2134
905
  500,
2135
906
  ),
2136
907
  ),
2137
- date-selected-range-end-hover-foreground: (
2138
- contrast-color: (
908
+
909
+ date-focus-background: (
910
+ color: (
2139
911
  'primary',
2140
- 600,
912
+ 500,
2141
913
  ),
2142
914
  ),
2143
- date-selected-range-end-hover-background: (
915
+
916
+ date-selected-background: (
2144
917
  color: (
2145
918
  'primary',
2146
- 600,
919
+ 300,
2147
920
  ),
2148
921
  ),
2149
- date-selected-range-end-focus-foreground: (
922
+
923
+ date-selected-hover-foreground: (
2150
924
  contrast-color: (
2151
- 'primary',
2152
- 600,
925
+ 'gray',
926
+ 900,
2153
927
  ),
2154
928
  ),
2155
- date-selected-range-end-focus-background: (
2156
- color: (
929
+
930
+ date-selected-focus-foreground: (
931
+ contrast-color: (
932
+ 'gray',
933
+ 900,
934
+ ),
935
+ ),
936
+
937
+ date-selected-text-color: (
938
+ contrast-color: (
2157
939
  'primary',
2158
- 600,
940
+ 900,
2159
941
  ),
2160
942
  ),
2161
- date-selected-current-range-foreground: (
943
+
944
+ content-background: (
945
+ color: 'surface',
946
+ ),
947
+
948
+ content-text-color: (
2162
949
  color: (
2163
950
  'gray',
2164
- 800,
951
+ 900,
2165
952
  ),
2166
953
  ),
2167
- date-selected-current-range-background: (
954
+
955
+ weekend-text-color: (
2168
956
  color: (
2169
- 'primary',
2170
- 200,
957
+ 'gray',
958
+ 900,
2171
959
  ),
2172
960
  ),
2173
- date-selected-current-range-hover-foreground: (
961
+
962
+ picker-text-color: (
2174
963
  color: (
2175
964
  'gray',
2176
- 800,
965
+ 900,
2177
966
  ),
2178
967
  ),
2179
- date-selected-current-range-hover-background: (
968
+
969
+ inactive-text-color: (
2180
970
  color: (
2181
- 'primary',
971
+ 'gray',
2182
972
  500,
2183
973
  ),
2184
974
  ),
2185
- date-selected-current-range-focus-foreground: (
975
+
976
+ week-number-background: (
2186
977
  color: (
2187
978
  'gray',
2188
- 800,
979
+ 200,
980
+ ),
981
+ ),
982
+
983
+ border-radius: (
984
+ border-radius: (
985
+ rem(4px),
986
+ rem(0),
987
+ rem(20px),
988
+ ),
989
+ ),
990
+ date-border-radius: (
991
+ border-radius: (
992
+ rem(4px),
993
+ rem(0),
994
+ rem(20px),
995
+ ),
996
+ ),
997
+ month-border-radius: (
998
+ border-radius: (
999
+ rem(4px),
1000
+ rem(0),
1001
+ rem(20px),
2189
1002
  ),
2190
1003
  ),
2191
- date-selected-current-range-focus-background: (
1004
+ )
1005
+ );
1006
+
1007
+ /// Generates an indigo calendar schema.
1008
+ /// @type {Map}
1009
+ /// @prop {Map} content-text-color [color: ('gray', 900)] - The main content text color.
1010
+ /// @prop {Map} date-current-text-color [color: ('primary', 300)] - The text color for the current date.
1011
+ /// @prop {Map} date-selected-background [color: ('primary', 500)] - The background color for the selected date.
1012
+ /// @prop {Map} date-selected-hover-foreground [contrast-color: ('gray', 900)] - The hover text color for the selected date.
1013
+ /// @prop {Map} date-selected-focus-foreground [contrast-color: ('gray', 900)] - The focus text color for the selected date.
1014
+ /// @prop {Map} date-selected-text-color [contrast-color: ('primary', 500)] - The text color for the selected date.
1015
+ /// @prop {Map} date-disabled-text-color [color: ('gray', 300)] - The text color for disabled dates.
1016
+ /// @prop {Map} inactive-text-color [color: ('gray', 600)] - The text color for previous and next month dates.
1017
+ /// @prop {Map} label-color [color: ('gray', 600)] - The text color for weekday labels.
1018
+ /// @prop {Map} weekend-text-color [color: ('gray', 900)] - The text color for weekend days.
1019
+ /// @prop {Color} month-hover-background [transparent] - The month hover text color.
1020
+ /// @prop {Map} month-hover-text-color [color: ('primary', 500)] - The month hover text color.
1021
+ /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('primary', 500)] - The hover text color for the selected/current date.
1022
+ /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('primary', 500)] - The focus text color for the selected/current date.
1023
+ /// @prop {Map} date-current-hover-foreground [color: ('primary', 600)] - The hover text color for the current date.
1024
+ /// @prop {Map} date-current-focus-foreground [color: ('primary', 600)] - The focus text color for the current date.
1025
+ /// @prop {List} border-radius [(rem(3px), rem(0), rem(20px))] - The border radius used for calendar.
1026
+ /// @requires {Map} $light-calendar
1027
+ $indigo-calendar: extend(
1028
+ $light-calendar,
1029
+ (
1030
+ content-text-color: (
2192
1031
  color: (
2193
- 'primary',
2194
- 500,
1032
+ 'gray',
1033
+ 900,
2195
1034
  ),
2196
1035
  ),
2197
- date-selected-range-foreground: (
2198
- contrast-color: (
1036
+
1037
+ date-current-text-color: (
1038
+ color: (
2199
1039
  'primary',
2200
- 600,
1040
+ 300,
2201
1041
  ),
2202
1042
  ),
2203
- date-selected-range-background: (
1043
+
1044
+ date-current-hover-foreground: (
2204
1045
  color: (
2205
1046
  'primary',
2206
- 200,
1047
+ 600,
2207
1048
  ),
2208
1049
  ),
2209
- date-selected-range-hover-foreground: (
2210
- contrast-color: (
1050
+
1051
+ date-current-focus-foreground: (
1052
+ color: (
2211
1053
  'primary',
2212
1054
  600,
2213
1055
  ),
2214
1056
  ),
2215
- date-selected-range-hover-background: (
2216
- color: (
1057
+
1058
+ date-selected-current-hover-foreground: (
1059
+ contrast-color: (
2217
1060
  'primary',
2218
1061
  500,
2219
1062
  ),
2220
1063
  ),
2221
- date-selected-range-focus-foreground: (
1064
+
1065
+ date-selected-current-focus-foreground: (
2222
1066
  contrast-color: (
2223
1067
  'primary',
2224
- 600,
1068
+ 500,
2225
1069
  ),
2226
1070
  ),
2227
- date-selected-range-focus-background: (
1071
+
1072
+ date-selected-background: (
2228
1073
  color: (
2229
1074
  'primary',
2230
1075
  500,
2231
1076
  ),
2232
1077
  ),
2233
- date-current-outline: transparent,
2234
- date-current-hover-outline: transparent,
2235
- date-current-focus-outline: transparent,
2236
- date-selected-current-outline: transparent,
2237
- date-selected-current-hover-outline: transparent,
2238
- date-selected-current-focus-outline: transparent,
2239
- current-outline-color: transparent,
2240
- current-outline-hover-color: transparent,
2241
- current-outline-focus-color: transparent,
2242
- selected-outline-color: transparent,
2243
- selected-hover-outline-color: transparent,
2244
- selected-focus-outline-color: transparent,
2245
- selected-current-outline-color: transparent,
2246
- selected-current-outline-hover-color: transparent,
2247
- selected-current-outline-focus-color: transparent,
2248
- weekday-color: (
2249
- color: (
2250
- 'info',
2251
- 300,
1078
+
1079
+ date-selected-hover-foreground: (
1080
+ contrast-color: (
1081
+ 'gray',
1082
+ 900,
2252
1083
  ),
2253
1084
  ),
2254
- weekend-color: (
2255
- color: (
1085
+
1086
+ date-selected-focus-foreground: (
1087
+ contrast-color: (
2256
1088
  'gray',
2257
1089
  900,
2258
1090
  ),
2259
1091
  ),
2260
- inactive-color: (
2261
- color: (
2262
- 'gray',
1092
+
1093
+ date-selected-text-color: (
1094
+ contrast-color: (
1095
+ 'primary',
2263
1096
  500,
2264
1097
  ),
2265
1098
  ),
2266
- week-number-background: transparent,
2267
- month-border-radius: (
2268
- border-radius: (
2269
- rem(4px),
2270
- rem(0),
2271
- rem(20px),
1099
+
1100
+ date-disabled-text-color: (
1101
+ color: (
1102
+ 'gray',
1103
+ 300,
2272
1104
  ),
2273
1105
  ),
2274
- calendar-border-radius: (
2275
- border-radius: (
2276
- rem(4px),
2277
- rem(0),
2278
- rem(20px),
1106
+
1107
+ inactive-text-color: (
1108
+ color: (
1109
+ 'gray',
1110
+ 600,
2279
1111
  ),
2280
1112
  ),
2281
- date-border-radius: (
2282
- border-radius: (
2283
- rem(4px),
2284
- rem(0),
2285
- rem(20px),
1113
+
1114
+ label-color: (
1115
+ color: (
1116
+ 'gray',
1117
+ 600,
2286
1118
  ),
2287
1119
  ),
2288
- date-range-border-radius: (
2289
- border-radius: (
2290
- rem(0),
2291
- rem(0),
2292
- rem(0),
1120
+
1121
+ weekend-text-color: (
1122
+ color: (
1123
+ 'gray',
1124
+ 900,
2293
1125
  ),
2294
1126
  ),
2295
- week-number-border-radius: (
2296
- border-radius: (
2297
- rem(0),
2298
- rem(0),
2299
- rem(8px),
1127
+
1128
+ month-hover-background: transparent,
1129
+
1130
+ month-hover-text-color: (
1131
+ color: (
1132
+ 'primary',
1133
+ 500,
2300
1134
  ),
2301
1135
  ),
2302
- )
2303
- );
2304
1136
 
2305
- /// Generates an indigo calendar schema.
2306
- /// @type {Map}
2307
- /// @prop {List} calendar-border-radius [(rem(3px), rem(0), rem(20px))] - The border radius used for calendar.
2308
- /// @prop {List} week-number-border-radius [(rem(4px), rem(0), rem(8px))] - The border radius used for the week numbers column.
2309
- /// @requires {Map} $light-calendar
2310
- $indigo-calendar: extend(
2311
- $light-calendar,
2312
- (
2313
- calendar-border-radius: (
1137
+ border-radius: (
2314
1138
  border-radius: (
2315
1139
  rem(3px),
2316
1140
  rem(0),
2317
1141
  rem(20px),
2318
1142
  ),
2319
1143
  ),
2320
- week-number-border-radius: (
2321
- border-radius: (
2322
- rem(4px),
2323
- rem(0),
2324
- rem(8px),
2325
- ),
2326
- ),
2327
1144
  )
2328
1145
  );