Skip to content

Commit 12cf187

Browse files
SisIvanovasimeonoff
SisIvanova
and
simeonoff
authored
fix(fluent-theme): accessibility and contrast issues (#492)
Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
1 parent e505254 commit 12cf187

File tree

11 files changed

+175
-6
lines changed

11 files changed

+175
-6
lines changed

‎sass/themes/schemas/components/dark/_bottom-nav.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,24 @@ $dark-material-bottom-nav: extend(
3636

3737
/// Generates a dark fluent bottom-nav schema.
3838
/// @type {Map}
39+
/// @prop {Map} label-selected-color [color: ('primary', 300)] - The label color used for the selected item.
40+
/// @prop {Map} icon-selected-color [color: ('primary', 300)] - The icon color used for the selected item.
3941
/// @requires $fluent-bottom-nav
4042
$dark-fluent-bottom-nav: extend(
4143
$fluent-bottom-nav,
4244
(
45+
label-selected-color: (
46+
color: (
47+
'primary',
48+
300,
49+
),
50+
),
51+
icon-selected-color: (
52+
color: (
53+
'primary',
54+
300,
55+
),
56+
),
4357
_meta: (
4458
theme: 'fluent',
4559
variant: 'dark',

‎sass/themes/schemas/components/dark/_grid-summary.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,18 @@ $dark-material-grid-summary: extend(
5454

5555
/// Generates a dark fluent grid-summary schema.
5656
/// @type {Map}
57+
/// @prop {Map} label-color [color: ('primary', 300)] - The summaries label color.
5758
/// @requires {Map} $fluent-grid-summary
5859
$dark-fluent-grid-summary: extend(
5960
$fluent-grid-summary,
6061
(
62+
label-color: (
63+
color: (
64+
'primary',
65+
300,
66+
),
67+
),
68+
6169
_meta: (
6270
theme: 'fluent',
6371
variant: 'dark',

‎sass/themes/schemas/components/dark/_grid-toolbar.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,18 @@ $dark-material-grid-toolbar: extend(
2929

3030
/// Generates a dark fluent grid-toolbar schema.
3131
/// @type {Map}
32+
/// @prop {Map} title-text-color [color: ('gray', 600)] - The toolbar title text color.
3233
/// @requires $fluent-grid-toolbar
3334
$dark-fluent-grid-toolbar: extend(
3435
$fluent-grid-toolbar,
3536
(
37+
title-text-color: (
38+
color: (
39+
'gray',
40+
600,
41+
),
42+
),
43+
3644
_meta: (
3745
theme: 'fluent',
3846
variant: 'dark',

‎sass/themes/schemas/components/dark/_grid.scss‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -252,15 +252,17 @@ $dark-material-grid: extend(
252252
);
253253

254254
/// Generates a dark fluent grid schema based on a mix of $fluent-grid and $base-dark-grid.
255+
/// @type {Map}
255256
/// @prop {Map} header-selected-background [color: ('gray', 200)] - The table header background color when selected (ex. column selection).
256257
/// @prop {Map} header-selected-text-color [contrast-color: ('gray', 200)] - The table header text color when selected (ex. column selection).
257258
/// @prop {Map} row-selected-background [color: ('gray', 100)] - The selected row background color.
258259
/// @prop {Map} row-selected-hover-background [color: ('gray', 200)] - The selected row background color on hover.
259260
/// @prop {Map} row-selected-hover-text-color [contrast-color: ('gray', 200)] - The selected row hover text color.
260261
/// @prop {Map} cell-selected-within-background [color: ('gray', 200)] - The background of the selected cell inside a selected row/column.
261262
/// @prop {Map} cell-selected-within-text-color [contrast-color: ('gray', 200)] - The color of the selected cell inside a selected row/column.
263+
/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
262264
/// @prop {Map} group-row-background [color: ('gray', 100, .5)] - The grid group row background color.
263-
///
265+
/// @prop {Map} group-count-text-color [color: ('gray', 600)] - The grid group row cont badge text color.
264266
/// @requires $fluent-grid
265267
/// @requires $base-dark-grid
266268
$dark-fluent-grid: extend(
@@ -324,13 +326,28 @@ $dark-fluent-grid: extend(
324326
),
325327
),
326328

329+
grouparea-color: (
330+
color: (
331+
'gray',
332+
500,
333+
),
334+
),
335+
327336
group-row-background: (
328337
color: (
329338
'gray',
330339
100,
331340
0.5,
332341
),
333342
),
343+
344+
group-count-text-color: (
345+
color: (
346+
'gray',
347+
600,
348+
),
349+
),
350+
334351
_meta: (
335352
theme: 'fluent',
336353
variant: 'dark',

‎sass/themes/schemas/components/dark/_list.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,20 @@ $dark-material-list: extend(
5252

5353
/// Generates a dark fluent list schema.
5454
/// @type {Map}
55+
/// @prop {Map} header-text-color [color: ('secondary', 500)] - The list header text color.
5556
/// @requires $fluent-list
5657
/// @requires $base-dark-list
5758
$dark-fluent-list: extend(
5859
$fluent-list,
5960
$base-dark-list,
6061
(
62+
header-text-color: (
63+
color: (
64+
'secondary',
65+
500,
66+
),
67+
),
68+
6169
_meta: (
6270
theme: 'fluent',
6371
variant: 'dark',

‎sass/themes/schemas/components/dark/_stepper.scss‎

Lines changed: 78 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@
1515
/// @prop {Map} invalid-step-hover-background [color: ('gray', 100, .3)] - The background of the invalid step header on hover.
1616
/// @prop {Map} current-step-hover-background [color: ('gray', 100, .3)] - The background of the current step header on hover.
1717
/// @prop {Map} complete-step-hover-background [color: ('gray', 100, .3)] - The background of the complete step header on hover.
18-
/// @prop {Map} step-focus-background [color: ('gray', 100, .5)] - The background of the step header on hover.
19-
/// @prop {Map} invalid-step-focus-background [color: ('gray', 100, .5)] - The background of the invalid step header on hover.
20-
/// @prop {Map} current-step-focus-background [color: ('gray', 100, .5)] - The background of the current step header on hover.
21-
/// @prop {Map} complete-step-focus-background [color: ('gray', 100, .5)] - The background of the complete step header on hover.
18+
/// @prop {Map} step-focus-background [color: ('gray', 100, .5)] - The background of the step header on focus.
19+
/// @prop {Map} invalid-step-focus-background [color: ('gray', 100, .5)] - The background of the invalid step header on focus.
20+
/// @prop {Map} current-step-focus-background [color: ('gray', 100, .5)] - The background of the current step header on focus.
21+
/// @prop {Map} complete-step-focus-background [color: ('gray', 100, .5)] - The background of the complete step header on focus.
2222
$base-stepper: (
2323
step-hover-background: (
2424
color: (
@@ -178,6 +178,16 @@ $dark-material-stepper: extend(
178178
/// Generates a dark fluent stepper schema
179179
/// @type {Map}
180180
/// @prop {Map} complete-indicator-background [color: ('gray', 100)] - The background color of the completed step indicator.
181+
/// @prop {Map} step-focus-background [color: ('gray', 100, .4)] - The background of the step header on focus.
182+
/// @prop {Map} invalid-step-focus-background [color: ('gray', 100, .4)] - The background of the invalid step header on focus.
183+
/// @prop {Map} current-step-focus-background [color: ('gray', 100, .4)] - The background of the current step header on focus.
184+
/// @prop {Map} complete-step-focus-background [color: ('gray', 100, .4)] - The background of the complete step header on focus.
185+
/// @prop {Map} invalid-title-color [color: ('error', 50)] - The color of the invalid step title.
186+
/// @prop {Map} invalid-title-hover-color [color: ('error', 50)] - The color of the invalid step title on hover.
187+
/// @prop {Map} invalid-title-focus-color [color: ('error', 50)] - The color of the invalid step title on focus.
188+
/// @prop {Map} invalid-subtitle-color [color: ('error', 700)] - The text of the invalid step subtitle.
189+
/// @prop {Map} invalid-subtitle-hover-color [color: ('error', 50)] - The color of the invalid step subtitle on hover.
190+
/// @prop {Map} invalid-subtitle-focus-color [color: ('error', 50)] - The color of the invalid step subtitle on focus.
181191
/// @requires $fluent-stepper
182192
/// @requires $base-stepper
183193
$dark-fluent-stepper: extend(
@@ -190,6 +200,70 @@ $dark-fluent-stepper: extend(
190200
100,
191201
),
192202
),
203+
step-focus-background: (
204+
color: (
205+
'gray',
206+
100,
207+
0.4,
208+
),
209+
),
210+
complete-step-focus-background: (
211+
color: (
212+
'gray',
213+
100,
214+
0.4,
215+
),
216+
),
217+
current-step-focus-background: (
218+
color: (
219+
'gray',
220+
100,
221+
0.4,
222+
),
223+
),
224+
invalid-step-focus-background: (
225+
color: (
226+
'gray',
227+
100,
228+
0.4,
229+
),
230+
),
231+
invalid-title-color: (
232+
color: (
233+
'error',
234+
50,
235+
),
236+
),
237+
invalid-title-hover-color: (
238+
color: (
239+
'error',
240+
50,
241+
),
242+
),
243+
invalid-title-focus-color: (
244+
color: (
245+
'error',
246+
50,
247+
),
248+
),
249+
invalid-subtitle-color: (
250+
color: (
251+
'error',
252+
50,
253+
),
254+
),
255+
invalid-subtitle-hover-color: (
256+
color: (
257+
'error',
258+
50,
259+
),
260+
),
261+
invalid-subtitle-focus-color: (
262+
color: (
263+
'error',
264+
50,
265+
),
266+
),
193267
_meta: (
194268
theme: 'fluent',
195269
variant: 'dark',

‎sass/themes/schemas/components/light/_grid-summary.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ $material-grid-summary: extend(
9292

9393
/// Generates a fluent grid-summary schema.
9494
/// @type {Map}
95+
/// @prop {Map} label-color [color: ('primary', 600)] - The summaries label color.
9596
/// @prop {Map} background-color [color: ('surface')] - The summaries background color.
9697
/// @prop {Map} border-color [color: ('gray', 100)] - The summaries border color.
9798
/// @prop {Map} result-color [contrast-color: ('surface')] - The summaries value/result color.
@@ -100,6 +101,13 @@ $material-grid-summary: extend(
100101
$fluent-grid-summary: extend(
101102
$light-grid-summary,
102103
(
104+
label-color: (
105+
color: (
106+
'primary',
107+
600,
108+
),
109+
),
110+
103111
background-color: (
104112
color: (
105113
'surface',

‎sass/themes/schemas/components/light/_grid-toolbar.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,13 +107,22 @@ $material-grid-toolbar: extend(
107107
/// Generates a fluent grid-toolbar schema.
108108
/// @type {Map}
109109
/// @prop {Map} background-color [color: 'surface'] - The toolbar background color.
110+
/// @prop {Map} title-text-color [color: ('gray', 700)] - The toolbar title text color.
110111
/// @requires {Map} $light-grid-toolbar
111112
$fluent-grid-toolbar: extend(
112113
$light-grid-toolbar,
113114
(
114115
background-color: (
115116
color: 'surface',
116117
),
118+
119+
title-text-color: (
120+
color: (
121+
'gray',
122+
700,
123+
),
124+
),
125+
117126
_meta: (
118127
theme: 'fluent',
119128
variant: 'light',

‎sass/themes/schemas/components/light/_grid.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -740,8 +740,10 @@ $material-grid: extend(
740740
/// @prop {Map} pinned-border-color [color: ('gray', 200)] - The color of the pinned border.
741741
/// @prop {Map} cell-active-border-color [color: ('primary', 100)] - The active(focused) cell border color.
742742
/// @prop {Map} grouparea-background [color: 'surface'] - The grid group area background color.
743+
/// @prop {Map} grouparea-color [color: ('gray', 600)] - The grid group area color.
743744
/// @prop {Map} group-row-background [color: ('gray', 50)] - The grid group row background color.
744745
/// @prop {Map} group-row-selected-background [color: ('gray', 100)] - The drop area background on drop color.
746+
/// @prop {Map} group-count-text-color [color: ('gray', 700)] - The grid group row cont badge text color.
745747
/// @prop {Map} filtering-header-text-color [color: ('gray', 900)] - The text color of the filtered column header.
746748
/// @prop {Map} row-ghost-background [color: 'surface'] - The background color of the dragged row.
747749
/// @prop {number} grid-elevation [0] - The elevation level, between 0-24, to be used for the grid.
@@ -836,6 +838,13 @@ $fluent-grid: extend(
836838
color: 'surface',
837839
),
838840

841+
grouparea-color: (
842+
color: (
843+
'gray',
844+
600,
845+
),
846+
),
847+
839848
group-row-background: (
840849
color: (
841850
'gray',
@@ -850,6 +859,13 @@ $fluent-grid: extend(
850859
),
851860
),
852861

862+
group-count-text-color: (
863+
color: (
864+
'gray',
865+
700,
866+
),
867+
),
868+
853869
filtering-header-text-color: (
854870
color: (
855871
'gray',

‎sass/themes/schemas/components/light/_list.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,7 @@ $material-list: extend(
238238

239239
/// Generates a fluent list schema.
240240
/// @type {Map}
241+
/// @prop {Map} header-text-color [color: ('secondary', 700)] - The list header text color.
241242
/// @prop {Map} border-color [color: ('gray', 200)] - The list border color.
242243
/// @prop {Number} border-width [rem(1px)] - The list border width.
243244
/// @prop {Map} typography [
@@ -250,6 +251,12 @@ $material-list: extend(
250251
$fluent-list: extend(
251252
$light-list,
252253
(
254+
header-text-color: (
255+
color: (
256+
'secondary',
257+
700,
258+
),
259+
),
253260
border-color: (
254261
color: (
255262
'gray',

0 commit comments

Comments
 (0)