Skip to content

Commit e505254

Browse files
SisIvanovasimeonoff
SisIvanova
and
simeonoff
authored
refactor(bootstrap-theme): accessibility and contrast issues (#496)
* refactor(bootstrap-theme): accessibility and contrast issues * refactor(bootstrap): stepper and tree colors --------- Co-authored-by: Simeon Simeonoff <[email protected]>
1 parent 6aae52b commit e505254

File tree

13 files changed

+204
-18
lines changed

13 files changed

+204
-18
lines changed

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,26 @@ $dark-fluent-bottom-nav: extend(
4949

5050
/// Generates a dark bootstrap bottom-nav schema.
5151
/// @type {Map}
52+
/// @prop {Map} label-selected-color [color: ('primary', 300)] - The label color used for the selected item.
53+
/// @prop {Map} icon-selected-color [color: ('primary', 300)] - The icon color used for the selected item.
5254
/// @requires $bootstrap-bottom-nav
5355
$dark-bootstrap-bottom-nav: extend(
5456
$bootstrap-bottom-nav,
5557
(
58+
label-selected-color: (
59+
color: (
60+
'primary',
61+
300,
62+
),
63+
),
64+
65+
icon-selected-color: (
66+
color: (
67+
'primary',
68+
300,
69+
),
70+
),
71+
5672
_meta: (
5773
theme: 'bootstrap',
5874
variant: 'dark',

‎sass/themes/schemas/components/dark/_expansion-panel.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ $dark-fluent-expansion-panel: extend(
5353
/// Generates a dark bootstrap expansion panel schema based on a mix of $bootstrap-expansion-panel and $base-dark-expansion-panel.
5454
/// @type {Map}
5555
/// @prop {Map} header-background [color: ('gray', 50)] - The panel header background color.
56+
/// @prop {Map} header-description-color [color: ('gray', 600)] - The panel header description text color.
5657
/// @prop {Map} body-background [color: ('gray', 50)] - The panel body background color.
5758
/// @requires $bootstrap-expansion-panel
5859
/// @requires $base-dark-expansion-panel
@@ -67,6 +68,13 @@ $dark-bootstrap-expansion-panel: extend(
6768
),
6869
),
6970

71+
header-description-color: (
72+
color: (
73+
'gray',
74+
600,
75+
),
76+
),
77+
7078
body-background: (
7179
color: (
7280
'gray',

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,20 @@ $dark-fluent-grid-summary: extend(
6767

6868
/// Generates a dark bootstrap grid-summary schema.
6969
/// @type {Map}
70+
/// @prop {Map} label-color [color: ('primary', 200)] - The summaries label color.
7071
/// @prop {Map} background-color [color: ('gray', 100)] - The summaries background color.
7172
/// @prop {Map} result-color [contrast-color: ('gray', 100)] - The summaries value/result color.
7273
/// @requires {Map} $bootstrap-grid-summary
7374
$dark-bootstrap-grid-summary: extend(
7475
$bootstrap-grid-summary,
7576
(
77+
label-color: (
78+
color: (
79+
'primary',
80+
200,
81+
),
82+
),
83+
7684
background-color: (
7785
color: (
7886
'gray',

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

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

4343
/// Generates a dark bootstrap grid-toolbar schema.
4444
/// @type {Map}
45+
/// @prop {Map} title-text-color [color: ('gray', 600)] - The toolbar title text color.
4546
/// @requires $bootstrap-grid-toolbar
4647
$dark-bootstrap-grid-toolbar: extend(
4748
$bootstrap-grid-toolbar,
4849
(
50+
title-text-color: (
51+
color: (
52+
'gray',
53+
600,
54+
),
55+
),
56+
4957
_meta: (
5058
theme: 'bootstrap',
5159
variant: 'dark',

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,9 @@ $dark-fluent-grid: extend(
340340

341341
/// Generates a dark bootstrap grid schema based on a mix of $bootstrap-grid and $base-dark-grid.
342342
/// @type {Map}
343+
/// @prop {Map} group-count-text-color [color: ('gray', 600)] - The grid group row cont badge text color.
344+
/// @prop {Map} group-label-icon [color: ('primary', 300)] - The grid group row icon color.
345+
/// @prop {Map} group-label-column-name-text [color: ('primary', 300)] - The grid group row column name text color.
343346
/// @prop {Map} group-row-background [color: 'surface'] - The grid group row background color.
344347
/// @prop {Map} group-row-selected-background [color: 'surface'] - The drop area background on drop color.
345348
/// @prop {Map} header-background [color: ('gray', 50)] - The table header background color.
@@ -354,6 +357,27 @@ $dark-bootstrap-grid: extend(
354357
$bootstrap-grid,
355358
$base-dark-grid,
356359
(
360+
group-count-text-color: (
361+
color: (
362+
'gray',
363+
600,
364+
),
365+
),
366+
367+
group-label-icon: (
368+
color: (
369+
'primary',
370+
300,
371+
),
372+
),
373+
374+
group-label-column-name-text: (
375+
color: (
376+
'primary',
377+
300,
378+
),
379+
),
380+
357381
group-row-background: (
358382
color: 'surface',
359383
),

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ $dark-fluent-list: extend(
7373
/// @prop {Map} item-background-active [color: ('gray', 100)] - The active list item background color.
7474
/// @prop {Map} item-background-selected [color: ('gray', 100)] - The selected list item background color.
7575
/// @prop {Map} header-background [color: ('gray', 50)] - The list header background color.
76+
/// @prop {Map} header-text-color [color: ('secondary', 400)] - The list header text color.
7677
/// @requires $bootstrap-list
7778
$dark-bootstrap-list: extend(
7879
$bootstrap-list,
@@ -118,6 +119,13 @@ $dark-bootstrap-list: extend(
118119
50,
119120
),
120121
),
122+
123+
header-text-color: (
124+
color: (
125+
'secondary',
126+
400,
127+
),
128+
),
121129
_meta: (
122130
theme: 'bootstrap',
123131
variant: 'dark',

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

Lines changed: 48 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -199,9 +199,14 @@ $dark-fluent-stepper: extend(
199199

200200
/// Generates a dark bootstrap stepper schema.
201201
/// @type {Map}
202-
/// @prop {Map} indicator-outline [color: (color: ('gray', 200)] - The outline color of the incomplete step indicator.
203-
/// @prop {Map} disabled-indicator-outline [color: ('gray', 300)] - The outline color of the disabled step indicator.
204202
/// @prop {Map} step-separator-color [color: ('gray', 100)] - The separator border-color of between the steps.
203+
/// @prop {Map} invalid-title-color [color: ('error', 400)] - The color of the invalid step title.
204+
/// @prop {Map} invalid-title-hover-color [color: ('error', 400)] - The color of the invalid step title on hover.
205+
/// @prop {Map} invalid-title-focus-color [color: ('error', 300)] - The color of the invalid step title on focus.
206+
/// @prop {Map} invalid-subtitle-color [color: ('error', 400)] - The text of the invalid step subtitle.
207+
/// @prop {Map} invalid-subtitle-hover-color [color: ('error', 400)] - The color of the invalid step subtitle on hover.
208+
/// @prop {Map} invalid-subtitle-focus-color [color: ('error', 300)] - The color of the invalid step subtitle on focus.
209+
/// @prop {Map} invalid-indicator-color [contrast-color: ('gray', 900)] - The color of the invalid step indicator.
205210
/// @requires $bootstrap-stepper
206211
/// @requires $base-stepper
207212
$dark-bootstrap-stepper: extend(
@@ -215,19 +220,55 @@ $dark-bootstrap-stepper: extend(
215220
),
216221
),
217222

218-
indicator-outline: (
223+
invalid-title-color: (
219224
color: (
220-
'gray',
221-
200,
225+
'error',
226+
400,
222227
),
223228
),
224229

225-
disabled-indicator-outline: (
230+
invalid-title-hover-color: (
226231
color: (
227-
'gray',
232+
'error',
233+
400,
234+
),
235+
),
236+
237+
invalid-title-focus-color: (
238+
color: (
239+
'error',
240+
300,
241+
),
242+
),
243+
244+
invalid-subtitle-color: (
245+
color: (
246+
'error',
247+
400,
248+
),
249+
),
250+
251+
invalid-subtitle-hover-color: (
252+
color: (
253+
'error',
254+
400,
255+
),
256+
),
257+
258+
invalid-subtitle-focus-color: (
259+
color: (
260+
'error',
228261
300,
229262
),
230263
),
264+
265+
invalid-indicator-color: (
266+
contrast-color: (
267+
'gray',
268+
900,
269+
),
270+
),
271+
231272
_meta: (
232273
theme: 'bootstrap',
233274
variant: 'dark',

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ $dark-fluent-tree: extend(
106106
/// Generates a dark bootstrap tree schema.
107107
/// @type {Map}
108108
/// @prop {Map} hover-color [color: ('gray', 500, .3)] - The background color used for the tree node on hover.
109+
/// @prop {Map} foreground-active [contrast-color: ('surface')] - The color used for the content in active state of the tree node.
109110
/// @requires $bootstrap-tree
110111
/// @requires $base-dark-tree
111112
$dark-bootstrap-tree: extend(
@@ -119,6 +120,11 @@ $dark-bootstrap-tree: extend(
119120
0.3,
120121
),
121122
),
123+
foreground-active: (
124+
contrast-color: (
125+
'surface',
126+
),
127+
),
122128
_meta: (
123129
theme: 'bootstrap',
124130
variant: 'dark',

‎sass/themes/schemas/components/light/_expansion-panel.scss‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,6 @@ $fluent-expansion-panel: extend(
177177
/// Generates a bootstrap expansion panel schema.
178178
/// @type {Map}
179179
/// @prop {Map} header-title-color [color: ('gray', 800)] - The panel header title text color.
180-
/// @prop {Map} header-description-color [color: ('gray', 600)] - The panel header description text color.
181180
/// @requires {Map} $light-expansion-panel
182181
$bootstrap-expansion-panel: extend(
183182
$light-expansion-panel,
@@ -189,13 +188,6 @@ $bootstrap-expansion-panel: extend(
189188
),
190189
),
191190

192-
header-description-color: (
193-
color: (
194-
'gray',
195-
600,
196-
),
197-
),
198-
199191
_meta: (
200192
theme: 'bootstrap',
201193
variant: 'light',

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,10 +135,18 @@ $fluent-grid-summary: extend(
135135

136136
/// Generates a bootstrap grid-summary schema.
137137
/// @type {Map}
138+
/// @prop {Map} label-color [color: ('primary', 700)] - The summaries label color.
138139
/// @requires {Map} $light-grid-summary
139140
$bootstrap-grid-summary: extend(
140141
$light-grid-summary,
141142
(
143+
label-color: (
144+
color: (
145+
'primary',
146+
700,
147+
),
148+
),
149+
142150
_meta: (
143151
theme: 'bootstrap',
144152
variant: 'light',

0 commit comments

Comments
 (0)