igniteui-theming 6.0.0 → 6.0.1

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/presets/dark/_material.scss +1 -1
  3. package/sass/color/presets/light/_material.scss +1 -1
  4. package/sass/themes/schemas/components/dark/_calendar.scss +393 -163
  5. package/sass/themes/schemas/components/light/_button.scss +10 -10
  6. package/sass/themes/schemas/components/light/_calendar.scss +504 -397
  7. package/sass/themes/schemas/components/light/_drop-down.scss +4 -4
  8. package/sass/themes/schemas/components/light/_switch.scss +2 -0
package/sass/themes/schemas/components/dark/_calendar.scss CHANGED
@@ -11,15 +11,15 @@
11
11
  /// @prop {Map} navigation-hover-color [color: ('secondary', 200)] - The :hover color of the icon button responsible for month navigation.
12
12
  /// @prop {Map} navigation-focus-color [color: ('secondary', 200)] - The :focus color of the icon button responsible for month navigation.
13
13
  /// @prop {Map} date-special-foreground [color: ('secondary', 200)] - The foreground color of a special date.
14
- /// @prop {Map} date-special-hover-foreground [color: ('secondary', 200)] - The :hover foreground color of a special date.
15
- /// @prop {Map} date-special-focus-foreground [color: ('secondary', 200)] - The :focus foreground color of a special date.
14
+ /// @prop {Map} date-special-hover-foreground [color: ('secondary', 100)] - The :hover foreground color of a special date.
15
+ /// @prop {Map} date-special-focus-foreground [color: ('secondary', 100)] - The :focus foreground color of a special date.
16
16
  /// @prop {Map} date-special-range-foreground [color: ('secondary', 200)] - The foreground color of a special date in a range selection.
17
17
  /// @prop {Map} date-special-border-color [color: ('secondary', 200)] - The outline color around a special date.
18
+ /// @prop {Map} date-special-hover-border-color [color: ('secondary', 100)] - The outline color around a special date.
18
19
  /// @prop {Map} date-special-range-border-color [color: ('secondary', 200)] - The outline color around a special date in a range selection.
19
- /// @prop {Map} date-selected-range-focus-foreground [contrast-color: ('secondary', 900)] - The :focus foreground color of the selected range.
20
- /// @prop {Map} date-selected-range-hover-foreground [contrast-color: ('secondary', 900)] - The :hover foreground color of the selected range.
21
- /// @prop {Map} picker-hover-foreground [color: 'secondary' 200] - The :hover foreground color of the month and year pickers.
22
- /// @prop {Map} picker-focus-foreground [color: 'secondary' 200] - The :focus foreground color of the month and year pickers.
20
+ /// @prop {Map} picker-hover-foreground [color: ('secondary', 200)] - The :hover foreground color of the month and year pickers.
21
+ /// @prop {Map} picker-focus-foreground [color: ('secondary', 200)] - The :focus foreground color of the month and year pickers.
22
+ /// @prop {Map} actions-divider-color [color: ('gray', 100)] - The border color used for the date-picker actions divider.
23
23
  /// @type {Map}
24
24
  /// @requires $material-calendar
25
25
  $dark-material-calendar: extend(
@@ -46,13 +46,13 @@ $dark-material-calendar: extend(
46
46
  date-special-hover-foreground: (
47
47
  color: (
48
48
  'secondary',
49
- 200,
49
+ 100,
50
50
  ),
51
51
  ),
52
52
  date-special-focus-foreground: (
53
53
  color: (
54
54
  'secondary',
55
- 200,
55
+ 100,
56
56
  ),
57
57
  ),
58
58
  date-special-range-foreground: (
@@ -67,29 +67,16 @@ $dark-material-calendar: extend(
67
67
  200,
68
68
  ),
69
69
  ),
70
- date-special-range-border-color: (
70
+ date-special-hover-border-color: (
71
71
  color: (
72
72
  'secondary',
73
- 200,
73
+ 100,
74
74
  ),
75
75
  ),
76
- date-selected-range-background: (
76
+ date-special-range-border-color: (
77
77
  color: (
78
78
  'secondary',
79
- 500,
80
- 0.24,
81
- ),
82
- ),
83
- date-selected-range-hover-foreground: (
84
- contrast-color: (
85
- 'secondary',
86
- 900,
87
- ),
88
- ),
89
- date-selected-range-focus-foreground: (
90
- contrast-color: (
91
- 'secondary',
92
- 900,
79
+ 200,
93
80
  ),
94
81
  ),
95
82
  picker-hover-foreground: (
@@ -104,103 +91,99 @@ $dark-material-calendar: extend(
104
91
  200,
105
92
  ),
106
93
  ),
94
+ actions-divider-color: (
95
+ color: (
96
+ 'gray',
97
+ 100,
98
+ ),
99
+ ),
107
100
  )
108
101
  );
109
102
 
110
103
  /// Generates a dark fluent calendar schema.
111
104
  /// @type {Map}
112
- /// @prop {Map} year-selected-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected year.
113
- /// @prop {Map} year-selected-background [color: ('primary', 900)]- The background color of the selected year in years view.
114
- /// @prop {Map} year-selected-hover-foreground [contrast-color: ('primary', 800)] - The :hover foreground color of the selected year in years view.
115
- /// @prop {Map} year-selected-hover-background [color: ('primary' 800)] - The :hover background color of the selected year in years view.
116
- /// @prop {Map} year-selected-current-foreground [contrast-color: ('primary', 900)] - The foreground color of the current/selected year.
117
- /// @prop {Map} year-selected-current-background [color: ('primary', 900)] - The foreground color of the current/selected year.
118
- /// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('primary', 800)] - The :hover foreground color of the current/selected year.
119
- /// @prop {Map} year-selected-current-hover-background [color: ('primary', 800)] - The :hover background color of the current/selected year.
120
- /// @prop {Map} month-selected-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected month in month view.
121
- /// @prop {Map} month-selected-background [color: ('primary', 900)] - The background color of the selected month in month view.
122
- /// @prop {Map} month-selected-hover-foreground [contrast-color: ('primary', 800)]- The :hover foreground color of the selected month in month view.
123
- /// @prop {Map} month-selected-hover-background [color: ('primary', 800)]- The :hover background color of the selected month in month view.
124
- /// @prop {Map} month-selected-current-foreground [contrast-color: ('primary', 900)] - The foreground color of the current/selected month in month view.
125
- /// @prop {Map} month-selected-current-background [color: ('primary', 900)]- The background color of the current/selected month in month view.
126
- /// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('primary', 800)] - The :hover foreground color of the current/selected month in month view.
127
- /// @prop {Map} month-selected-current-hover-background [color: ('primary', 800)] - The :hover background color of the current/selected month in month view.
105
+ /// @prop {Map} picker-hover-foreground [color: ('primary', 200)] - The :hover foreground color of the month and year pickers.
106
+ /// @prop {Map} picker-focus-foreground [color: ('primary', 200)] - The :focus foreground color of the month and year pickers.
107
+ /// @prop {Map} navigation-hover-color [color: ('primary', 200)] - The :hover color of the buttons responsible for navigation.
108
+ /// @prop {Map} navigation-focus-color [color: ('primary', 200)] - The :focus color of the buttons responsible for navigation.
109
+ /// @prop {Map} year-selected-background [color: ('primary', 800)]- The background color of the selected year in years view.
110
+ /// @prop {Map} year-selected-hover-background [color: ('primary', 600)] - The :hover background color of the selected year in years view.
111
+ /// @prop {Map} year-selected-current-background [color: ('primary', 800)] - The foreground color of the current/selected year.
112
+ /// @prop {Map} year-selected-current-hover-background [color: ('primary', 600)] - The :hover background color of the current/selected year.
113
+ /// @prop {Map} month-selected-background [color: ('primary', 800)] - The background color of the selected month in month view.
114
+ /// @prop {Map} month-selected-hover-background [color: ('primary', 600)]- The :hover background color of the selected month in month view.
115
+ /// @prop {Map} month-selected-current-background [color: ('primary', 800)]- The background color of the current/selected month in month view.
116
+ /// @prop {Map} month-selected-current-hover-background [color: ('primary', 600)] - The :hover background color of the current/selected month in month view.
128
117
  /// @prop {Map} date-current-foreground [contrast-color: ('gray', 900)] - The foreground color of the current date.
129
118
  /// @prop {Map} date-current-background [color: ('primary', 200)] - The background color of the current date.
130
119
  /// @prop {Map} date-current-hover-foreground [contrast-color: ('gray', 900)] - The :hover foreground color of the current date.
131
- /// @prop {Map} date-current-hover-foreground [contrast-color: ('gray', 900)] - The :hover foreground color of the current date.
120
+ /// @prop {Map} date-current-focus-foreground [contrast-color: ('gray', 900)] - The :focus foreground color of the current date.
132
121
  /// @prop {Map} date-selected-current-foreground [contrast-color: ('gray', 900)] - The foreground color of the selected current date.
133
122
  /// @prop {Map} date-selected-current-hover-foreground [contrast-color: ('gray', 900)] - The :hover foreground color of the selected current date.
134
123
  /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('gray', 900)] - The :focus foreground color of the selected current date.
135
124
  /// @prop {Map} date-selected-current-range-foreground [contrast-color: ('gray', 900)] - The foreground color of the current date in the selected range.
136
125
  /// @prop {Map} date-selected-current-range-hover-foreground [contrast-color: ('gray', 900)] - The :hover foreground color of the current date in the selected range.
137
126
  /// @prop {Map} date-selected-current-range-focus-foreground [contrast-color: ('gray', 900)] - The :focus foreground color of the current date in the selected range.
138
- /// @prop {Map} date-hover-foreground [contrast-color: 'gray', 50] - The :hover foreground color of a date.
139
- /// @prop {Map} date-focus-foreground [contrast-color: 'gray', 50] - The :focus foreground color of a date.
140
- /// @prop {Map} date-selected-foreground [contrast-color: ('gray', 50)] - The foreground color of the selected date.
141
- /// @prop {Map} date-selected-hover-foreground [contrast-color: ('gray', 50)] - The :hover foreground color of the selected date.
142
- /// @prop {Map} date-selected-focus-foreground [contrast-color: ('gray', 50)] - The :focus foreground color of the selected date.
143
- /// @prop {Map} date-selected-range-hover-foreground [contrast-color: ('gray', 50)] - The :hover foreground color of the selected range.
144
- /// @prop {Map} date-selected-range-focus-foreground [contrast-color: ('gray', 50)] - The :focus foreground color of the selected range.
145
- /// @prop {Map} date-disabled-foreground [color: ('gray', 300)] - The foreground of disabled dates.
146
127
  /// @prop {Map} date-special-border-color [color: ('primary', 50)] - The outline color around a special date.
128
+ /// @prop {Map} date-special-hover-border-color [color: ('primary', 50)] - The outline color around a special date.
147
129
  /// @prop {Map} date-special-range-border-color [color: ('primary', 50)] - The outline color around a special date in a range selection.
148
130
  /// @prop {Map} header-foreground [contrast-color: ('primary', 200)] - The header foreground color.
149
131
  /// @prop {Map} header-background [color: ('primary', 200)] - The background color of the month and year pickers.
132
+ /// @prop {Мap} actions-divider-color [color: ('gray', 100)] - The border color used for the date-picker actions divider.
150
133
  /// @requires $fluent-calendar
151
134
  $dark-fluent-calendar: extend(
152
135
  $fluent-calendar,
153
136
  (
154
- header-foreground: (
155
- contrast-color: (
137
+ picker-hover-foreground: (
138
+ color: (
156
139
  'primary',
157
140
  200,
158
141
  ),
159
142
  ),
160
- header-background: (
143
+ picker-focus-foreground: (
161
144
  color: (
162
145
  'primary',
163
146
  200,
164
147
  ),
165
148
  ),
166
- year-selected-foreground: (
167
- contrast-color: (
149
+ navigation-hover-color: (
150
+ color: (
168
151
  'primary',
169
- 900,
152
+ 200,
170
153
  ),
171
154
  ),
172
- year-selected-background: (
155
+ navigation-focus-color: (
173
156
  color: (
174
157
  'primary',
175
- 900,
158
+ 200,
176
159
  ),
177
160
  ),
178
- year-selected-hover-foreground: (
161
+ header-foreground: (
179
162
  contrast-color: (
180
163
  'primary',
181
- 800,
164
+ 200,
182
165
  ),
183
166
  ),
184
- year-selected-hover-background: (
167
+ header-background: (
185
168
  color: (
186
169
  'primary',
187
- 800,
170
+ 200,
188
171
  ),
189
172
  ),
190
- year-selected-current-foreground: (
191
- contrast-color: (
173
+ year-selected-background: (
174
+ color: (
192
175
  'primary',
193
- 900,
176
+ 800,
194
177
  ),
195
178
  ),
196
- year-selected-current-background: (
179
+ year-selected-hover-background: (
197
180
  color: (
198
181
  'primary',
199
- 900,
182
+ 600,
200
183
  ),
201
184
  ),
202
- year-selected-current-hover-foreground: (
203
- contrast-color: (
185
+ year-selected-current-background: (
186
+ color: (
204
187
  'primary',
205
188
  800,
206
189
  ),
@@ -208,23 +191,11 @@ $dark-fluent-calendar: extend(
208
191
  year-selected-current-hover-background: (
209
192
  color: (
210
193
  'primary',
211
- 800,
212
- ),
213
- ),
214
- month-selected-foreground: (
215
- contrast-color: (
216
- 'primary',
217
- 900,
194
+ 600,
218
195
  ),
219
196
  ),
220
197
  month-selected-background: (
221
198
  color: (
222
- 'primary',
223
- 900,
224
- ),
225
- ),
226
- month-selected-hover-foreground: (
227
- contrast-color: (
228
199
  'primary',
229
200
  800,
230
201
  ),
@@ -232,23 +203,11 @@ $dark-fluent-calendar: extend(
232
203
  month-selected-hover-background: (
233
204
  color: (
234
205
  'primary',
235
- 800,
236
- ),
237
- ),
238
- month-selected-current-foreground: (
239
- contrast-color: (
240
- 'primary',
241
- 900,
206
+ 600,
242
207
  ),
243
208
  ),
244
209
  month-selected-current-background: (
245
210
  color: (
246
- 'primary',
247
- 900,
248
- ),
249
- ),
250
- month-selected-current-hover-foreground: (
251
- contrast-color: (
252
211
  'primary',
253
212
  800,
254
213
  ),
@@ -256,22 +215,16 @@ $dark-fluent-calendar: extend(
256
215
  month-selected-current-hover-background: (
257
216
  color: (
258
217
  'primary',
259
- 800,
260
- ),
261
- ),
262
- date-hover-foreground: (
263
- contrast-color: (
264
- 'gray',
265
- 50,
218
+ 600,
266
219
  ),
267
220
  ),
268
- date-focus-foreground: (
269
- contrast-color: (
270
- 'gray',
221
+ date-special-border-color: (
222
+ color: (
223
+ 'primary',
271
224
  50,
272
225
  ),
273
226
  ),
274
- date-special-border-color: (
227
+ date-special-hover-border-color: (
275
228
  color: (
276
229
  'primary',
277
230
  50,
@@ -343,40 +296,10 @@ $dark-fluent-calendar: extend(
343
296
  900,
344
297
  ),
345
298
  ),
346
- date-selected-foreground: (
347
- contrast-color: (
348
- 'gray',
349
- 50,
350
- ),
351
- ),
352
- date-selected-hover-foreground: (
353
- contrast-color: (
354
- 'gray',
355
- 50,
356
- ),
357
- ),
358
- date-selected-focus-foreground: (
359
- contrast-color: (
360
- 'gray',
361
- 50,
362
- ),
363
- ),
364
- date-selected-range-hover-foreground: (
365
- contrast-color: (
366
- 'gray',
367
- 50,
368
- ),
369
- ),
370
- date-selected-range-focus-foreground: (
371
- contrast-color: (
372
- 'gray',
373
- 50,
374
- ),
375
- ),
376
- date-disabled-foreground: (
299
+ actions-divider-color: (
377
300
  color: (
378
301
  'gray',
379
- 300,
302
+ 100,
380
303
  ),
381
304
  ),
382
305
  )
@@ -384,13 +307,22 @@ $dark-fluent-calendar: extend(
384
307
 
385
308
  /// Generates a dark bootstrap calendar schema.
386
309
  /// @type {Map}
387
- /// @prop {Map} date-hover-background [color: 'gray', 100] - The :hover background color of a date.
388
- /// @prop {Map} date-focus-background [color: 'gray', 100] - The :focus background color of a date.
389
- /// @prop {Map} picker-hover-foreground [color: ('secondary', 200)]- The :hover foreground color of the month and year pickers.
390
- /// @prop {Map} picker-focus-foreground [color: ('secondary', 200)]- The :focus foreground color of the month and year pickers.
310
+ /// @prop {Map} year-hover-background [color: ('gray', 100)] - The :hover background color of the year in years view.
311
+ /// @prop {Map} year-current-hover-background [color: ('gray', 100)] - The :hover background color of the current year in years view.
312
+ /// @prop {Map} month-hover-background [color: ('gray', 100)] - The :hover background color of the month in months view.
313
+ /// @prop {Map} month-current-hover-background [color: ('gray', 100)] - The :hover background color of the current month in months view.
314
+ /// @prop {Map} date-special-hover-background [color: ('gray', 100)] - The background color of a special date.
315
+ /// @prop {Map} date-special-focus-background [color: ('gray', 100)] - The background color of a special date.
316
+ /// @prop {Map} date-special-range-hover-background [color: ('gray', 100)] - The :hover background color of a special date in range selection.
317
+ /// @prop {Map} date-special-range-focus-background [color: ('gray', 100)] - The :focus background color of a special date in range selection.
318
+ /// @prop {Map} date-hover-background [color: ('gray', 100)] - The :hover background color of a date.
319
+ /// @prop {Map} date-focus-background [color: ('gray', 100)] - The :focus background color of a date.
320
+ /// @prop {Map} picker-hover-foreground [color: ('secondary', 200)] - The :hover foreground color of the month and year pickers.
321
+ /// @prop {Map} picker-focus-foreground [color: ('secondary', 200)] - The :focus foreground color of the month and year pickers.
391
322
  /// @prop {Map} navigation-hover-color [color: ('secondary', 200)] - The :hover color of the buttons responsible for navigation.
392
323
  /// @prop {Map} navigation-focus-color [color: ('secondary', 200)] - The :focus color of the buttons responsible for navigation.
393
324
  /// @prop {Map} date-special-border-color [color: ('primary', 200)] - The outline color around a special date.
325
+ /// @prop {Map} date-special-hover-border-color [color: ('primary', 200)] - The outline color around a special date.
394
326
  /// @prop {Map} date-special-range-border-color [color: ('primary', 200)] - The outline color around a special date in a range selection.
395
327
  /// @prop {Map} date-current-hover-background [color: ('gray', 100)] - The :hover background color of the current date.
396
328
  /// @prop {Map} date-current-focus-background [color: ('gray', 100)] - The :focus background color of the current date.
@@ -402,6 +334,60 @@ $dark-fluent-calendar: extend(
402
334
  $dark-bootstrap-calendar: extend(
403
335
  $bootstrap-calendar,
404
336
  (
337
+ date-hover-foreground: (
338
+ color: (
339
+ 'gray',
340
+ 900,
341
+ ),
342
+ ),
343
+ year-hover-background: (
344
+ color: (
345
+ 'gray',
346
+ 100,
347
+ ),
348
+ ),
349
+ year-current-hover-background: (
350
+ color: (
351
+ 'gray',
352
+ 100,
353
+ ),
354
+ ),
355
+ month-hover-background: (
356
+ color: (
357
+ 'gray',
358
+ 100,
359
+ ),
360
+ ),
361
+ month-current-hover-background: (
362
+ color: (
363
+ 'gray',
364
+ 100,
365
+ ),
366
+ ),
367
+ date-special-hover-background: (
368
+ color: (
369
+ 'gray',
370
+ 100,
371
+ ),
372
+ ),
373
+ date-special-focus-background: (
374
+ color: (
375
+ 'gray',
376
+ 100,
377
+ ),
378
+ ),
379
+ date-special-range-hover-background: (
380
+ color: (
381
+ 'gray',
382
+ 100,
383
+ ),
384
+ ),
385
+ date-special-range-focus-background: (
386
+ color: (
387
+ 'gray',
388
+ 100,
389
+ ),
390
+ ),
405
391
  date-hover-background: (
406
392
  color: (
407
393
  'gray',
@@ -444,6 +430,12 @@ $dark-bootstrap-calendar: extend(
444
430
  200,
445
431
  ),
446
432
  ),
433
+ date-special-hover-border-color: (
434
+ color: (
435
+ 'primary',
436
+ 200,
437
+ ),
438
+ ),
447
439
  date-special-range-border-color: (
448
440
  color: (
449
441
  'primary',
@@ -491,29 +483,101 @@ $dark-bootstrap-calendar: extend(
491
483
 
492
484
  /// Generates a dark indigo calendar schema.
493
485
  /// @type {Map}
494
- /// @prop {Map} header-background [(color: 'gray', 50)] - The header background color.
495
- /// @prop {Map} content-background [(color: 'gray', 50)] - The background color of the days, months and years views.
496
- /// @prop {Map} picker-background [(color: 'gray', 50)] - The background color of the month and year pickers.
486
+ /// @prop {Map} content-foreground [color: ('gray', 900)] - The foreground color of the days, months and years views.
487
+ /// @prop {Map} date-current-focus-foreground [contrast-color: ('gray', 50)] - The :focus foreground color of the current date.
488
+ /// @prop {Map} month-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the month inside the months view.
489
+ /// @prop {Map} month-current-hover-background [contrast-color: ('gray', 900, .1)] - The :hover background color of the current month in month view.
490
+ /// @prop {Map} year-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the year in years view.
491
+ /// @prop {Map} date-selected-current-range-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the current date in the selected range.
492
+ /// @prop {Map} header-background [color: ('gray', 50)] - The header background color.
493
+ /// @prop {Map} content-background [color: ('gray', 50)] - The background color of the days, months and years views.
494
+ /// @prop {Map} picker-background [color: ('gray', 50)] - The background color of the month and year pickers.
497
495
  /// @prop {Map} border-color [color: ('gray', 100)] - The calendar border color.
498
- /// @prop {Map} date-hover-background [color: ('gray', 900, .1)] - The :hover background color of a date.
499
- /// @prop {Map} date-focus-background [color: ('gray', 900, .1)] - The :focus background color of date.
496
+ /// @prop {Map} date-hover-foreground [contrast-color: ('gray', 50)] - The :hover foreground color of a date.
497
+ /// @prop {Map} date-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of a date.
498
+ /// @prop {Map} date-focus-foreground [contrast-color: ('gray', 50)] - The :focus foreground color of a date.
499
+ /// @prop {Map} date-focus-background [contrast-color: ('gray', 50, .1)] - The :focus background color of date.
500
500
  /// @prop {Map} date-current-foreground [color: ('gray', 900)] - The foreground color of the current date.
501
- /// @prop {Map} date-disabled-foreground [color: ('gray', 500)] - The foreground color of disabled dates.
501
+ /// @prop {Map} date-disabled-foreground [color: ('gray', 500, .5)] - The foreground color of disabled dates.
502
+ /// @prop {Map} date-disabled-range-foreground [color: ('gray', 900, .38)] - The foreground color of disabled dates.
502
503
  /// @prop {Map} date-current-border-color [color: ('primary', 400)] - The border color of the current date.
503
504
  /// @prop {Map} date-current-hover-border-color [color: ('primary', 300)] - The :hover border color of the current date.
504
505
  /// @prop {Map} date-current-focus-border-color [color: ('primary', 300)] - The :focus border color of the current date.
505
- /// @prop {Map} date-special-foreground [color: ('primary', 600)] - The foreground color of a special date.
506
- /// @prop {Map} date-special-background [color: ('primary', 50)] - The background color of a special date.
506
+ /// @prop {Map} date-special-range-foreground [color: ('primary', 50)] - The foreground color of a special date in rage selection.
507
+ /// @prop {Map} date-special-range-background [color: ('primary', 600, .4)] - The background color of a special date in range selection.
508
+ /// @prop {Map} date-special-foreground [color: ('primary', 50)] - The foreground color of a special date.
509
+ /// @prop {Map} date-special-background [color: ('primary', 600, .4)] - The background color of a special date.
507
510
  /// @prop {Map} date-special-hover-foreground [contrast-color: ('primary', 600)] - The foreground color of a special date.
508
- /// @prop {Map} date-special-hover-background [color: ('primary', 600)] - The background color of a special date.
511
+ /// @prop {Map} date-special-hover-background [color: ('primary', 400, .7)] - The background color of a special date.
509
512
  /// @prop {Map} date-special-focus-foreground [contrast-color: ('primary', 600)] - The foreground color of a special date.
510
- /// @prop {Map} date-special-focus-background [color: ('primary', 600)] - The background color of a special date.
513
+ /// @prop {Map} date-special-focus-background [color: ('primary', 400, .7)] - The background color of a special date.
514
+ /// @prop {Map} date-special-range-hover-background [color: ('primary', 600, .4)] - The :hover background color of a special date in range selection.
515
+ /// @prop {Map} date-special-range-focus-background [color: ('primary', 600, .4)] - The :focus background color of a special date in range selection.
511
516
  /// @prop {Map} navigation-hover-color [color: ('primary', 300)] - The :hover color of the icon button responsible for month navigation.
512
517
  /// @prop {Map} navigation-focus-color [color: ('primary', 300)] - The :focus color of the icon button responsible for month navigation.
518
+ /// @prop {Мап} actions-divider-color [color: ('gray', 100)] - The border color used for the date-picker actions divider.
519
+ /// @prop {Map} picker-hover-foreground [color: ('primary', 300)] - The :hover foreground color of the month and year pickers.
520
+ /// @prop {Map} picker-focus-foreground [color: ('primary', 300)] - The :focus foreground color of the month and year pickers.
521
+ /// @prop {Map} week-number-foreground [color: ('gray', 500)] - The foreground color of the week number column.
522
+ /// @prop {Map} week-number-background [contrast-color: ('gray', 50, .05)] - The background color of the week number column.
523
+ /// @prop {Map} date-selected-range-background [color: ('primary', 400, .2)] - The background color of the selected range.
524
+ /// @prop {Map} year-current-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the current year in years view.
525
+ /// @prop {Map} current-outline-hover-color [color: ('primary', 300)] - The :hover outline color of the current year/month in year/month views.
526
+ /// @prop {Map} current-outline-focus-color [color: ('primary', 300)] - The :focus outline color of the current year/month in year/month views.
527
+ /// @prop {Map} current-outline-color [color: ('primary', 400)] - The outline color of the current year/month in year/month views.
528
+ /// @prop {Map} selected-current-outline-color [contrast-color: ('gray', 50, .6)] - The outline color of the selected current year/month in year/month views.
529
+ /// @prop {Map} selected-current-outline-hover-color [contrast-color: ('gray', 50, .6)] - The :hover outline color of the selected current year/month in year/month views.
530
+ /// @prop {Map} selected-current-outline-focus-color [contrast-color: ('gray', 50, .6)] - The :focus outline color of the selected current year/month in year/month views.
531
+ /// @prop {Map} date-current-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the current date.
532
+ /// @prop {Map} date-selected-range-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the selected range.
533
+ /// @prop {Map} date-selected-range-focus-background [contrast-color: ('gray', 50, .1)] - The :focus background color of the selected range.
534
+ /// @prop {Map} date-selected-range-hover-foreground [contrast-color: ('gray', 50)] - The :hover foreground color of the selected range.
535
+ /// @prop {Map} date-selected-range-focus-foreground [contrast-color: ('gray', 50)] - The :focus foreground color of the selected range.
536
+ /// @prop {Map} date-selected-range-foreground [color: ('gray', 900)] - The foreground color of the selected range.
513
537
  /// @requires $indigo-calendar
514
538
  $dark-indigo-calendar: extend(
515
539
  $indigo-calendar,
516
540
  (
541
+ content-foreground: (
542
+ color: (
543
+ 'gray',
544
+ 900,
545
+ ),
546
+ ),
547
+ date-current-hover-background: (
548
+ contrast-color: (
549
+ 'gray',
550
+ 50,
551
+ 0.1,
552
+ ),
553
+ ),
554
+ date-current-focus-foreground: (
555
+ contrast-color: (
556
+ 'gray',
557
+ 50,
558
+ ),
559
+ ),
560
+ month-hover-background: (
561
+ contrast-color: (
562
+ 'gray',
563
+ 50,
564
+ 0.1,
565
+ ),
566
+ ),
567
+ year-hover-background: (
568
+ contrast-color: (
569
+ 'gray',
570
+ 50,
571
+ 0.1,
572
+ ),
573
+ ),
574
+ date-selected-current-range-hover-background: (
575
+ contrast-color: (
576
+ 'gray',
577
+ 50,
578
+ 0.1,
579
+ ),
580
+ ),
517
581
  header-background: (
518
582
  color: (
519
583
  'gray',
@@ -538,17 +602,29 @@ $dark-indigo-calendar: extend(
538
602
  100,
539
603
  ),
540
604
  ),
605
+ date-hover-foreground: (
606
+ contrast-color: (
607
+ 'gray',
608
+ 50,
609
+ ),
610
+ ),
541
611
  date-hover-background: (
542
- color: (
612
+ contrast-color: (
543
613
  'gray',
544
- 900,
614
+ 50,
545
615
  0.1,
546
616
  ),
547
617
  ),
618
+ date-focus-foreground: (
619
+ contrast-color: (
620
+ 'gray',
621
+ 50,
622
+ ),
623
+ ),
548
624
  date-focus-background: (
549
- color: (
625
+ contrast-color: (
550
626
  'gray',
551
- 900,
627
+ 50,
552
628
  0.1,
553
629
  ),
554
630
  ),
@@ -558,12 +634,6 @@ $dark-indigo-calendar: extend(
558
634
  900,
559
635
  ),
560
636
  ),
561
- date-disabled-foreground: (
562
- color: (
563
- 'gray',
564
- 500,
565
- ),
566
- ),
567
637
  date-current-border-color: (
568
638
  color: (
569
639
  'primary',
@@ -592,6 +662,7 @@ $dark-indigo-calendar: extend(
592
662
  color: (
593
663
  'primary',
594
664
  600,
665
+ 0.4,
595
666
  ),
596
667
  ),
597
668
  date-special-hover-foreground: (
@@ -603,7 +674,8 @@ $dark-indigo-calendar: extend(
603
674
  date-special-hover-background: (
604
675
  color: (
605
676
  'primary',
606
- 600,
677
+ 400,
678
+ 0.7,
607
679
  ),
608
680
  ),
609
681
  date-special-focus-foreground: (
@@ -613,9 +685,37 @@ $dark-indigo-calendar: extend(
613
685
  ),
614
686
  ),
615
687
  date-special-focus-background: (
688
+ color: (
689
+ 'primary',
690
+ 400,
691
+ 0.7,
692
+ ),
693
+ ),
694
+ date-special-range-foreground: (
695
+ color: (
696
+ 'primary',
697
+ 50,
698
+ ),
699
+ ),
700
+ date-special-range-background: (
701
+ color: (
702
+ 'primary',
703
+ 600,
704
+ 0.4,
705
+ ),
706
+ ),
707
+ date-special-range-hover-background: (
708
+ color: (
709
+ 'primary',
710
+ 600,
711
+ 0.4,
712
+ ),
713
+ ),
714
+ date-special-range-focus-background: (
616
715
  color: (
617
716
  'primary',
618
717
  600,
718
+ 0.4,
619
719
  ),
620
720
  ),
621
721
  navigation-hover-color: (
@@ -630,5 +730,135 @@ $dark-indigo-calendar: extend(
630
730
  300,
631
731
  ),
632
732
  ),
733
+ actions-divider-color: (
734
+ color: (
735
+ 'gray',
736
+ 100,
737
+ ),
738
+ ),
739
+ picker-hover-foreground: (
740
+ color: (
741
+ 'primary',
742
+ 300,
743
+ ),
744
+ ),
745
+ picker-focus-foreground: (
746
+ color: (
747
+ 'primary',
748
+ 300,
749
+ ),
750
+ ),
751
+ week-number-foreground: (
752
+ color: (
753
+ 'gray',
754
+ 500,
755
+ ),
756
+ ),
757
+ week-number-background: (
758
+ contrast-color: (
759
+ 'gray',
760
+ 50,
761
+ 0.05,
762
+ ),
763
+ ),
764
+ date-selected-range-background: (
765
+ color: (
766
+ 'primary',
767
+ 400,
768
+ 0.2,
769
+ ),
770
+ ),
771
+ current-outline-color: (
772
+ color: (
773
+ 'primary',
774
+ 400,
775
+ ),
776
+ ),
777
+ selected-current-outline-color: (
778
+ contrast-color: (
779
+ 'gray',
780
+ 50,
781
+ 0.6,
782
+ ),
783
+ ),
784
+ year-current-hover-background: (
785
+ contrast-color: (
786
+ 'gray',
787
+ 50,
788
+ 0.1,
789
+ ),
790
+ ),
791
+ current-outline-hover-color: (
792
+ color: (
793
+ 'primary',
794
+ 300,
795
+ ),
796
+ ),
797
+ current-outline-focus-color: (
798
+ color: (
799
+ 'primary',
800
+ 300,
801
+ ),
802
+ ),
803
+ selected-current-outline-hover-color: (
804
+ contrast-color: (
805
+ 'gray',
806
+ 50,
807
+ 0.6,
808
+ ),
809
+ ),
810
+ selected-current-outline-focus-color: (
811
+ contrast-color: (
812
+ 'gray',
813
+ 50,
814
+ 0.6,
815
+ ),
816
+ ),
817
+ date-disabled-foreground: (
818
+ color: (
819
+ 'gray',
820
+ 500,
821
+ 0.5,
822
+ ),
823
+ ),
824
+ date-disabled-range-foreground: (
825
+ color: (
826
+ 'gray',
827
+ 900,
828
+ 0.38,
829
+ ),
830
+ ),
831
+ date-selected-range-hover-foreground: (
832
+ contrast-color: (
833
+ 'gray',
834
+ 50,
835
+ ),
836
+ ),
837
+ date-selected-range-focus-foreground: (
838
+ contrast-color: (
839
+ 'gray',
840
+ 50,
841
+ ),
842
+ ),
843
+ date-selected-range-hover-background: (
844
+ contrast-color: (
845
+ 'gray',
846
+ 50,
847
+ 0.1,
848
+ ),
849
+ ),
850
+ date-selected-range-focus-background: (
851
+ contrast-color: (
852
+ 'gray',
853
+ 50,
854
+ 0.1,
855
+ ),
856
+ ),
857
+ date-selected-range-foreground: (
858
+ color: (
859
+ 'gray',
860
+ 900,
861
+ ),
862
+ ),
633
863
  )
634
864
  );