igniteui-theming 10.0.0-beta.2 → 10.0.0-beta.4

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 (9) hide show
  1. package/package.json +1 -1
  2. package/sass/themes/schemas/components/dark/_calendar.scss +28 -85
  3. package/sass/themes/schemas/components/dark/_divider.scss +15 -19
  4. package/sass/themes/schemas/components/dark/_progress.scss +13 -1
  5. package/sass/themes/schemas/components/dark/_stepper.scss +159 -9
  6. package/sass/themes/schemas/components/light/_calendar.scss +178 -536
  7. package/sass/themes/schemas/components/light/_chip.scss +3 -3
  8. package/sass/themes/schemas/components/light/_progress.scss +2 -2
  9. package/sass/themes/schemas/components/light/_stepper.scss +42 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "10.0.0-beta.2",
3
+ "version": "10.0.0-beta.4",
4
4
  "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/sass/themes/schemas/components/dark/_calendar.scss CHANGED
@@ -106,14 +106,11 @@ $dark-material-calendar: extend(
106
106
  /// @prop {Map} picker-focus-foreground [color: ('primary', 200)] - The :focus foreground color of the month and year pickers.
107
107
  /// @prop {Map} navigation-hover-color [color: ('primary', 200)] - The :hover color of the buttons responsible for navigation.
108
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.
109
+ /// @prop {Map} ym-selected-current-hover-background [color: ('primary', 600)] - The :hover background color of the current/selected month/year.
110
+ /// @prop {Map} ym-selected-background [color: ('primary', 800)] - The background color of the selected month/year.
111
+ /// @prop {Map} ym-selected-hover-background [color: ('primary', 600)]- The :hover background color of the selected month/year.
112
+ /// @prop {Map} ym-selected-current-background [color: ('primary', 800)]- The background color of the current/selected month/year.
113
+ /// @prop {Map} ym-selected-current-hover-background [color: ('primary', 600)] - The :hover background color of the current/selected month/year.
117
114
  /// @prop {Map} date-current-foreground [contrast-color: ('gray', 900)] - The foreground color of the current date.
118
115
  /// @prop {Map} date-current-background [color: ('primary', 200)] - The background color of the current date.
119
116
  /// @prop {Map} date-current-hover-foreground [contrast-color: ('gray', 900)] - The :hover foreground color of the current date.
@@ -170,54 +167,30 @@ $dark-fluent-calendar: extend(
170
167
  200,
171
168
  ),
172
169
  ),
173
- year-selected-background: (
174
- color: (
175
- 'primary',
176
- 800,
177
- ),
178
- ),
179
- year-selected-hover-background: (
170
+ ym-selected-current-hover-background: (
180
171
  color: (
181
172
  'primary',
182
173
  600,
183
174
  ),
184
175
  ),
185
- year-selected-current-background: (
176
+ ym-selected-background: (
186
177
  color: (
187
178
  'primary',
188
179
  800,
189
180
  ),
190
181
  ),
191
- year-selected-current-hover-background: (
182
+ ym-selected-hover-background: (
192
183
  color: (
193
184
  'primary',
194
185
  600,
195
186
  ),
196
187
  ),
197
- month-selected-background: (
188
+ ym-selected-current-background: (
198
189
  color: (
199
190
  'primary',
200
191
  800,
201
192
  ),
202
193
  ),
203
- month-selected-hover-background: (
204
- color: (
205
- 'primary',
206
- 600,
207
- ),
208
- ),
209
- month-selected-current-background: (
210
- color: (
211
- 'primary',
212
- 800,
213
- ),
214
- ),
215
- month-selected-current-hover-background: (
216
- color: (
217
- 'primary',
218
- 600,
219
- ),
220
- ),
221
194
  date-special-border-color: (
222
195
  color: (
223
196
  'primary',
@@ -307,10 +280,8 @@ $dark-fluent-calendar: extend(
307
280
 
308
281
  /// Generates a dark bootstrap calendar schema.
309
282
  /// @type {Map}
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.
283
+ /// @prop {Map} ym-hover-background [color: ('gray', 100)] - The :hover background color of the month/year.
284
+ /// @prop {Map} ym-current-hover-background [color: ('gray', 100)] - The :hover background color of the current month/year.
314
285
  /// @prop {Map} date-special-hover-background [color: ('gray', 100)] - The background color of a special date.
315
286
  /// @prop {Map} date-special-focus-background [color: ('gray', 100)] - The background color of a special date.
316
287
  /// @prop {Map} date-special-range-hover-background [color: ('gray', 100)] - The :hover background color of a special date in range selection.
@@ -340,25 +311,13 @@ $dark-bootstrap-calendar: extend(
340
311
  900,
341
312
  ),
342
313
  ),
343
- year-hover-background: (
344
- color: (
345
- 'gray',
346
- 100,
347
- ),
348
- ),
349
- year-current-hover-background: (
314
+ ym-hover-background: (
350
315
  color: (
351
316
  'gray',
352
317
  100,
353
318
  ),
354
319
  ),
355
- month-hover-background: (
356
- color: (
357
- 'gray',
358
- 100,
359
- ),
360
- ),
361
- month-current-hover-background: (
320
+ ym-current-hover-background: (
362
321
  color: (
363
322
  'gray',
364
323
  100,
@@ -485,9 +444,8 @@ $dark-bootstrap-calendar: extend(
485
444
  /// @type {Map}
486
445
  /// @prop {Map} content-foreground [color: ('gray', 900)] - The foreground color of the days, months and years views.
487
446
  /// @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.
447
+ /// @prop {Map} ym-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the month/year.
448
+ /// @prop {Map} ym-current-hover-background [contrast-color: ('gray', 900, .1)] - The :hover background color of the current month/year.
491
449
  /// @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
450
  /// @prop {Map} header-background [color: ('gray', 50)] - The header background color.
493
451
  /// @prop {Map} content-background [color: ('gray', 50)] - The background color of the days, months and years views.
@@ -521,13 +479,12 @@ $dark-bootstrap-calendar: extend(
521
479
  /// @prop {Map} week-number-foreground [color: ('gray', 500)] - The foreground color of the week number column.
522
480
  /// @prop {Map} week-number-background [contrast-color: ('gray', 50, .05)] - The background color of the week number column.
523
481
  /// @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.
482
+ /// @prop {Map} ym-current-outline-hover-color [color: ('primary', 300)] - The :hover outline color of the current month/year.
483
+ /// @prop {Map} ym-current-outline-focus-color [color: ('primary', 300)] - The :focus outline color of the current month/year.
484
+ /// @prop {Map} ym-current-outline-color [color: ('primary', 400)] - The outline color of the current month/year.
485
+ /// @prop {Map} ym-selected-current-outline-color [contrast-color: ('gray', 50, .6)] - The outline color of the selected current month/year.
486
+ /// @prop {Map} ym-selected-current-outline-hover-color [contrast-color: ('gray', 50, .6)] - The :hover outline color of the selected current month/year.
487
+ /// @prop {Map} ym-selected-current-outline-focus-color [contrast-color: ('gray', 50, .6)] - The :focus outline color of the selected current month/year.
531
488
  /// @prop {Map} date-current-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the current date.
532
489
  /// @prop {Map} date-selected-range-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the selected range.
533
490
  /// @prop {Map} date-selected-range-focus-background [contrast-color: ('gray', 50, .1)] - The :focus background color of the selected range.
@@ -557,14 +514,7 @@ $dark-indigo-calendar: extend(
557
514
  50,
558
515
  ),
559
516
  ),
560
- month-hover-background: (
561
- contrast-color: (
562
- 'gray',
563
- 50,
564
- 0.1,
565
- ),
566
- ),
567
- year-hover-background: (
517
+ ym-hover-background: (
568
518
  contrast-color: (
569
519
  'gray',
570
520
  50,
@@ -768,46 +718,39 @@ $dark-indigo-calendar: extend(
768
718
  0.2,
769
719
  ),
770
720
  ),
771
- current-outline-color: (
721
+ ym-current-outline-color: (
772
722
  color: (
773
723
  'primary',
774
724
  400,
775
725
  ),
776
726
  ),
777
- selected-current-outline-color: (
727
+ ym-selected-current-outline-color: (
778
728
  contrast-color: (
779
729
  'gray',
780
730
  50,
781
731
  0.6,
782
732
  ),
783
733
  ),
784
- year-current-hover-background: (
785
- contrast-color: (
786
- 'gray',
787
- 50,
788
- 0.1,
789
- ),
790
- ),
791
- current-outline-hover-color: (
734
+ ym-current-outline-hover-color: (
792
735
  color: (
793
736
  'primary',
794
737
  300,
795
738
  ),
796
739
  ),
797
- current-outline-focus-color: (
740
+ ym-current-outline-focus-color: (
798
741
  color: (
799
742
  'primary',
800
743
  300,
801
744
  ),
802
745
  ),
803
- selected-current-outline-hover-color: (
746
+ ym-selected-current-outline-hover-color: (
804
747
  contrast-color: (
805
748
  'gray',
806
749
  50,
807
750
  0.6,
808
751
  ),
809
752
  ),
810
- selected-current-outline-focus-color: (
753
+ ym-selected-current-outline-focus-color: (
811
754
  contrast-color: (
812
755
  'gray',
813
756
  50,
package/sass/themes/schemas/components/dark/_divider.scss CHANGED
@@ -7,37 +7,33 @@
7
7
  /// @access public
8
8
  ////
9
9
 
10
- /// Generates a base dark divider schema.
11
- /// @type {Map}
12
- /// @property {Map} color [color: ('gray', 100)] - The color used for the divider.
13
- $base-dark-divider: (
14
- color: (
15
- color: (
16
- 'gray',
17
- 100,
18
- ),
19
- ),
20
- );
21
-
22
10
  /// Generates a dark material divider schema.
23
11
  /// @type {Map}
24
12
  /// @requires $material-divider
25
- /// @requires $base-dark-divider
26
- $dark-material-divider: extend($material-divider, $base-dark-divider);
13
+ $dark-material-divider: $material-divider;
27
14
 
28
15
  /// Generates a dark fluent divider schema.
29
16
  /// @type {Map}
30
17
  /// @requires $fluent-divider
31
- $dark-fluent-divider: extend($fluent-divider, $base-dark-divider);
18
+ $dark-fluent-divider: $fluent-divider;
32
19
 
33
20
  /// Generates a dark bootstrap divider schema.
34
21
  /// @type {Map}
35
22
  /// @requires $bootstrap-divider
36
- /// @requires $base-dark-divider
37
- $dark-bootstrap-divider: extend($bootstrap-divider, $base-dark-divider);
23
+ $dark-bootstrap-divider: $bootstrap-divider;
38
24
 
39
25
  /// Generates a dark indigo divider schema.
40
26
  /// @type {Map}
27
+ /// @prop {Map} color [color: ('gray', 100)] - The color used for the divider.
41
28
  /// @requires $indigo-divider
42
- /// @requires $base-dark-divider
43
- $dark-indigo-divider: extend($indigo-divider, $base-dark-divider);
29
+ $dark-indigo-divider: extend(
30
+ $indigo-divider,
31
+ (
32
+ color: (
33
+ color: (
34
+ 'gray',
35
+ 100,
36
+ ),
37
+ ),
38
+ )
39
+ );
package/sass/themes/schemas/components/dark/_progress.scss CHANGED
@@ -42,8 +42,20 @@ $dark-fluent-progress-linear: extend($fluent-progress-linear, $dark-base-progres
42
42
 
43
43
  /// Generates a dark bootstrap progress-linear schema.
44
44
  /// @type {Map}
45
+ /// @prop {Map} stripes-color [color: ('gray', 900, .2)] - The track stripes color.
45
46
  /// @requires $bootstrap-progress-linear
46
- $dark-bootstrap-progress-linear: $bootstrap-progress-linear;
47
+ $dark-bootstrap-progress-linear: extend(
48
+ $bootstrap-progress-linear,
49
+ (
50
+ stripes-color: (
51
+ color: (
52
+ 'gray',
53
+ 900,
54
+ 0.2,
55
+ ),
56
+ ),
57
+ )
58
+ );
47
59
 
48
60
  /// Generates a dark indigo progress-linear schema.
49
61
  /// @type {Map}
package/sass/themes/schemas/components/dark/_stepper.scss CHANGED
@@ -151,8 +151,8 @@ $dark-bootstrap-stepper: extend(
151
151
  /// Generates a dark indigo stepper schema.
152
152
  /// @type {Map}
153
153
  /// @prop {Map} content-foreground [contrast-color: ('gray', 50, .8)] - The foreground of the step content.
154
- /// @prop {Map} indicator-color [color: ('gray', 50)] - The text color of the incomplete step indicator.
155
- /// @prop {Map} indicator-background [contrast-color: ('gray', 50, .8)] - The background color of the incomplete step indicator.
154
+ /// @prop {Map} indicator-color [contrast-color: ('gray', 50, .8)] - The text color of the incomplete step indicator.
155
+ /// @prop {Map} indicator-background [contrast-color: ('gray', 50, .15)] - The background color of the incomplete step indicator.
156
156
  /// @prop {Map} title-color [contrast-color: ('gray', 50)] - The text color of the step title.
157
157
  /// @prop {Map} title-hover-color [contrast-color: ('gray', 50)] - The text color of the step title on hover.
158
158
  /// @prop {Map} title-focus-color [contrast-color: ('gray', 50)] - The text color of the step title on focus.
@@ -167,14 +167,34 @@ $dark-bootstrap-stepper: extend(
167
167
  /// @prop {Map} complete-step-focus-background [contrast-color: ('gray', 50, .1)] - The background of the complete step header on focus.
168
168
  /// @prop {Map} invalid-step-hover-background [contrast-color: ('gray', 50, .1)] - The background of the invalid step header on hover.
169
169
  /// @prop {Map} invalid-step-focus-background [contrast-color: ('gray', 50, .1)] - The background of the invalid step header on focus.
170
- /// @prop {Map} complete-indicator-background [contrast-color: ('gray', 50, .15)] - The background color of the completed step indicator.
171
- /// @prop {Map} complete-indicator-color [contrast-color: ('gray', 50, .8)] - The color of the completed step indicator.
170
+ /// @prop {Map} complete-indicator-background [contrast-color: ('gray', 50, .8)] - The background color of the completed step indicator.
171
+ /// @prop {Map} complete-indicator-color [contrast: ('gray', 50)] - The color of the completed step indicator.
172
172
  /// @prop {Map} disabled-indicator-color [contrast-color: ('gray', 50, .2)] - The color of the disabled step indicator, title, and subtitle.
173
173
  /// @prop {Map} disabled-indicator-background [contrast-color: ('gray', 50, .1)] - The background color of the disabled step indicator.
174
174
  /// @prop {Map} disabled-title-color [contrast-color: ('gray', 50, .2)] - The title color of the disabled step.
175
175
  /// @prop {Map} disabled-subtitle-color [contrast-color: ('gray', 50, .2)] - The subtitle color of the disabled step.
176
176
  /// @prop {Map} step-separator-color [contrast-color: ('gray', 50, .3)] - The separator border-color of between the steps.
177
177
  /// @prop {Map} complete-step-separator-color [contrast-color: ('gray', 50, .3)] - The separator border-color between the completed steps.
178
+ /// @prop {Map} invalid-title-color [contrast-color: ('gray', 50)] - The color of the invalid step title.
179
+ /// @prop {Map} invalid-title-hover-color [contrast-color: ('gray', 50)] - The color of the invalid step title on hover.
180
+ /// @prop {Map} invalid-title-focus-color [contrast-color: ('gray', 50)] - The color of the invalid step title on focus.
181
+ /// @prop {Map} invalid-subtitle-color [contrast-color: ('gray', 50, .8)] - The text of the invalid step subtitle.
182
+ /// @prop {Map} invalid-subtitle-hover-color [contrast-color: ('gray', 50, .8)] - The color of the invalid step subtitle on hover.
183
+ /// @prop {Map} invalid-subtitle-focus-color [contrast-color: ('gray', 50, .8)] - The color of the invalid step subtitle on focus.
184
+ /// @prop {Map} current-indicator-color [contrast-color: ('gray', 50)] - The color of the current step indicator.
185
+ /// @prop {Map} complete-title-color [contrast-color: ('gray', 50)] - The color of the complete step title.
186
+ /// @prop {Map} complete-title-hover-color [contrast-color: ('gray', 50)] - The color of the complete step title on hover.
187
+ /// @prop {Map} complete-title-focus-color [contrast-color: ('gray', 50)] - The color of the complete step title on focus.
188
+ /// @prop {Map} complete-subtitle-color [contrast-color: ('gray', 50, .8)] - The color of the complete step subtitle.
189
+ /// @prop {Map} complete-subtitle-hover-color [contrast-color: ('gray', 50, .8)] - The color of the complete step subtitle on hover.
190
+ /// @prop {Map} complete-subtitle-focus-color [contrast-color: ('gray', 50, .8)] - The color of the complete step subtitle on focus.
191
+ /// @prop {Map} current-title-color [contrast-color: ('gray', 50)] - The color of the current step title.
192
+ /// @prop {Map} current-title-hover-color [contrast-color: ('gray', 50)] - The color of the current step title on hover.
193
+ /// @prop {Map} current-title-focus-color [contrast-color: ('gray', 50)] - The color of the current step title on focus.
194
+ /// @prop {Map} current-subtitle-color [contrast-color: ('gray', 50, .8)] - The color of the current step subtitle.
195
+ /// @prop {Map} current-subtitle-hover-color [contrast-color: ('gray', 50, .8)] - The color of the current step subtitle on hover.
196
+ /// @prop {Map} current-subtitle-focus-color [contrast-color: ('gray', 50, .8)] - The color of the current step subtitle on focus.
197
+ /// @prop {Map} invalid-indicator-color [contrast-color: ('gray', 50)] - The color of the invalid step indicator.
178
198
  /// @requires $indigo-stepper
179
199
  /// @requires $base-stepper
180
200
  $dark-indigo-stepper: extend(
@@ -189,16 +209,17 @@ $dark-indigo-stepper: extend(
189
209
  ),
190
210
  ),
191
211
  indicator-color: (
192
- color: (
212
+ contrast-color: (
193
213
  'gray',
194
214
  50,
215
+ 0.8,
195
216
  ),
196
217
  ),
197
218
  indicator-background: (
198
219
  contrast-color: (
199
220
  'gray',
200
221
  50,
201
- 0.8,
222
+ 0.15,
202
223
  ),
203
224
  ),
204
225
  title-color: (
@@ -300,14 +321,13 @@ $dark-indigo-stepper: extend(
300
321
  contrast-color: (
301
322
  'gray',
302
323
  50,
303
- 0.15,
324
+ 0.8,
304
325
  ),
305
326
  ),
306
327
  complete-indicator-color: (
307
- contrast-color: (
328
+ color: (
308
329
  'gray',
309
330
  50,
310
- 0.8,
311
331
  ),
312
332
  ),
313
333
  disabled-indicator-color: (
@@ -352,5 +372,135 @@ $dark-indigo-stepper: extend(
352
372
  0.3,
353
373
  ),
354
374
  ),
375
+ invalid-title-color: (
376
+ contrast-color: (
377
+ 'gray',
378
+ 50,
379
+ ),
380
+ ),
381
+ invalid-title-hover-color: (
382
+ contrast-color: (
383
+ 'gray',
384
+ 50,
385
+ ),
386
+ ),
387
+ invalid-title-focus-color: (
388
+ contrast-color: (
389
+ 'gray',
390
+ 50,
391
+ ),
392
+ ),
393
+ invalid-subtitle-color: (
394
+ contrast-color: (
395
+ 'gray',
396
+ 50,
397
+ 0.8,
398
+ ),
399
+ ),
400
+ invalid-subtitle-hover-color: (
401
+ contrast-color: (
402
+ 'gray',
403
+ 50,
404
+ 0.8,
405
+ ),
406
+ ),
407
+ invalid-subtitle-focus-color: (
408
+ contrast-color: (
409
+ 'gray',
410
+ 50,
411
+ 0.8,
412
+ ),
413
+ ),
414
+ current-indicator-color: (
415
+ contrast-color: (
416
+ 'gray',
417
+ 50,
418
+ ),
419
+ ),
420
+ complete-title-color: (
421
+ contrast-color: (
422
+ 'gray',
423
+ 50,
424
+ ),
425
+ ),
426
+ complete-title-hover-color: (
427
+ contrast-color: (
428
+ 'gray',
429
+ 50,
430
+ ),
431
+ ),
432
+ complete-title-focus-color: (
433
+ contrast-color: (
434
+ 'gray',
435
+ 50,
436
+ ),
437
+ ),
438
+ complete-subtitle-color: (
439
+ contrast-color: (
440
+ 'gray',
441
+ 50,
442
+ 0.8,
443
+ ),
444
+ ),
445
+ complete-subtitle-hover-color: (
446
+ contrast-color: (
447
+ 'gray',
448
+ 50,
449
+ 0.8,
450
+ ),
451
+ ),
452
+ complete-subtitle-focus-color: (
453
+ contrast-color: (
454
+ 'gray',
455
+ 50,
456
+ 0.8,
457
+ ),
458
+ ),
459
+
460
+ current-title-color: (
461
+ contrast-color: (
462
+ 'gray',
463
+ 50,
464
+ ),
465
+ ),
466
+ current-title-hover-color: (
467
+ contrast-color: (
468
+ 'gray',
469
+ 50,
470
+ ),
471
+ ),
472
+ current-title-focus-color: (
473
+ contrast-color: (
474
+ 'gray',
475
+ 50,
476
+ ),
477
+ ),
478
+ current-subtitle-color: (
479
+ contrast-color: (
480
+ 'gray',
481
+ 50,
482
+ 0.8,
483
+ ),
484
+ ),
485
+ current-subtitle-hover-color: (
486
+ contrast-color: (
487
+ 'gray',
488
+ 50,
489
+ 0.8,
490
+ ),
491
+ ),
492
+ current-subtitle-focus-color: (
493
+ contrast-color: (
494
+ 'gray',
495
+ 50,
496
+ 0.8,
497
+ ),
498
+ ),
499
+ invalid-indicator-color: (
500
+ contrast-color: (
501
+ 'gray',
502
+ 50,
503
+ ),
504
+ ),
355
505
  )
356
506
  );