Skip to content

Commit 349e3d7

Browse files
tw15egantw15egan
committed
feat(HCM): a few more tweaks
1 parent 06f8cfe commit 349e3d7

File tree

17 files changed

+121
-144
lines changed

17 files changed

+121
-144
lines changed

‎packages/components/src/components/notification/_inline-notification.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -301,6 +301,7 @@
301301
fill: $icon-primary;
302302
}
303303

304+
// Windows HCM fixes
304305
/* stylelint-disable */
305306
.#{$prefix}--inline-notification {
306307
@include high-contrast-mode('outline');

‎packages/components/src/components/notification/_toast-notification.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,7 @@
221221
color: $text-primary;
222222
}
223223

224+
// Windows HCM fixes
224225
/* stylelint-disable */
225226
.#{$prefix}--toast-notification {
226227
@include high-contrast-mode('outline');

‎packages/components/src/components/number-input/_number-input.scss

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -447,12 +447,20 @@
447447
display: none;
448448
}
449449
}
450+
451+
// Windows HCM fixes
450452
/* stylelint-disable */
453+
.#{$prefix}--number__control-btn:hover,
454+
.#{$prefix}--number__control-btn:focus {
455+
@include high-contrast-mode('focus');
456+
}
457+
451458
.#{$prefix}--number__control-btn {
452459
@include high-contrast-mode('outline');
453-
&:focus {
454-
@include high-contrast-mode('focus');
455-
}
460+
}
461+
462+
.#{$prefix}--number__control-btn svg {
463+
@include high-contrast-mode('icon-fill');
456464
}
457465
/* stylelint-enable */
458466
}

‎packages/components/src/components/overflow-menu/_overflow-menu.scss

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -86,13 +86,6 @@
8686
width: rem(16px);
8787
height: rem(16px);
8888
fill: $icon-primary;
89-
90-
// Windows, Firefox HCM Fix
91-
@media screen and (-ms-high-contrast: active),
92-
screen and (prefers-contrast) {
93-
// `ButtonText` is a CSS2 system color to help improve colors in HCM
94-
fill: ButtonText;
95-
}
9689
}
9790

9891
.#{$prefix}--overflow-menu-options {
@@ -344,19 +337,16 @@
344337
}
345338
}
346339

347-
// Windows HCM fix
340+
// Windows HCM fixes
348341
/* stylelint-disable */
349-
.#{$prefix}--overflow-menu {
350-
&:focus {
351-
@include high-contrast-mode('focus');
352-
}
353-
circle {
354-
@include high-contrast-mode('outline');
355-
}
356-
}
342+
.#{$prefix}--overflow-menu:focus,
357343
.#{$prefix}--overflow-menu-options__btn:focus {
358344
@include high-contrast-mode('focus');
359345
}
346+
347+
.#{$prefix}--overflow-menu svg {
348+
@include high-contrast-mode('icon-fill');
349+
}
360350
/*stylelint-enable */
361351
}
362352

‎packages/components/src/components/pagination/_pagination.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -167,13 +167,6 @@ $css--helpers: true;
167167
transition: outline $duration--fast-02 motion(standard, productive),
168168
background-color $duration--fast-02 motion(standard, productive);
169169
fill: $icon-primary;
170-
171-
// Windows, Firefox HCM Fix
172-
@media screen and (-ms-high-contrast: active),
173-
screen and (prefers-contrast) {
174-
// `ButtonText` is a CSS2 system color to help improve colors in HCM
175-
border: 1px solid transparent;
176-
}
177170
}
178171

179172
.#{$prefix}--pagination__button:focus,
@@ -209,6 +202,13 @@ $css--helpers: true;
209202
margin-right: 1rem;
210203
margin-bottom: 0;
211204
}
205+
206+
// Windows HCM fixes
207+
// stylelint-disable-next-line no-duplicate-selectors
208+
.#{$prefix}--pagination__button,
209+
.#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
210+
@include high-contrast-mode('outline');
211+
}
212212
}
213213

214214
@include exports('pagination') {

‎packages/components/src/components/search/_search.scss

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -121,13 +121,6 @@
121121
transform: translateY(-50%);
122122
pointer-events: none;
123123
fill: $icon-secondary;
124-
125-
// Windows, Firefox HCM Fix
126-
@media screen and (-ms-high-contrast: active),
127-
screen and (prefers-contrast) {
128-
// `ButtonText` is a CSS2 system color to help improve colors in HCM
129-
fill: ButtonText;
130-
}
131124
}
132125

133126
.#{$prefix}--search-close {
@@ -173,12 +166,6 @@
173166

174167
.#{$prefix}--search-close svg {
175168
fill: inherit;
176-
177-
// Firefox HCM Fix
178-
@media screen and (prefers-contrast) {
179-
// `ButtonText` is a CSS2 system color to help improve colors in HCM
180-
fill: ButtonText;
181-
}
182169
}
183170

184171
.#{$prefix}--search-close,
@@ -365,6 +352,12 @@
365352
.#{$prefix}--search-magnifier-icon {
366353
fill: $icon-secondary;
367354
}
355+
356+
// Windows HCM Fixes
357+
.#{$prefix}--search-close svg,
358+
.#{$prefix}--search-magnifier-icon {
359+
@include high-contrast-mode('icon-fill');
360+
}
368361
}
369362

370363
@include exports('search') {

‎packages/components/src/components/select/_select.scss

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -178,18 +178,6 @@
178178
color: $text-primary;
179179
}
180180

181-
// Override some Firefox user-agent styles
182-
@-moz-document url-prefix() {
183-
.#{$prefix}--select-option {
184-
color: $text-primary;
185-
background-color: $layer;
186-
}
187-
188-
.#{$prefix}--select-optgroup {
189-
color: $text-primary;
190-
}
191-
}
192-
193181
.#{$prefix}--select--inline {
194182
display: flex;
195183
flex-direction: row;
@@ -263,6 +251,12 @@
263251
.#{$prefix}--select.#{$prefix}--skeleton .#{$prefix}--select-input {
264252
display: none;
265253
}
254+
255+
// Windows HCM Fix
256+
// stylelint-disable-next-line no-duplicate-selectors
257+
.#{$prefix}--select__arrow {
258+
@include high-contrast-mode('icon-fill');
259+
}
266260
}
267261

268262
@include exports('select') {

‎packages/components/src/components/slider/_slider.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,7 @@
209209
pointer-events: none;
210210
}
211211

212+
// Windows HCM fixes
212213
/* stylelint-disable */
213214
.#{$prefix}--slider__thumb {
214215
@include high-contrast-mode('outline');

‎packages/components/src/components/structured-list/_structured-list.scss

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -152,13 +152,6 @@
152152
+ .#{$prefix}--structured-list-td
153153
.#{$prefix}--structured-list-svg {
154154
fill: $icon-primary;
155-
156-
// Windows, Firefox HCM Fix
157-
@media screen and (-ms-high-contrast: active),
158-
screen and (prefers-contrast) {
159-
// `ButtonText` is a CSS2 system color to help improve colors in HCM
160-
fill: ButtonText;
161-
}
162155
}
163156

164157
// Skeleton State
@@ -196,6 +189,7 @@
196189
}
197190
}
198191

192+
// Windows HCM Fix
199193
.#{$prefix}--structured-list-input:checked
200194
+ .#{$prefix}--structured-list-td
201195
.#{$prefix}--structured-list-svg {

‎packages/components/src/components/tabs/_tabs.scss

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -846,12 +846,20 @@
846846
.#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger svg {
847847
@include hidden;
848848
}
849+
}
849850

850-
.#{$prefix}--tabs--scrollable__nav-item
851-
.#{$prefix}--tabs__nav-item--selected
852-
.#{$prefix}--tabs--scrollable__nav-item--selected {
853-
@include high-contrast-mode('focus');
854-
}
851+
// Windows HCM Fixes
852+
.#{$prefix}--tabs--scrollable__nav-item
853+
.#{$prefix}--tabs__nav-item--selected
854+
.#{$prefix}--tabs--scrollable__nav-item--selected {
855+
@include high-contrast-mode('focus');
856+
}
857+
858+
// stylelint-disable-next-line no-duplicate-selectors
859+
.#{$prefix}--tabs--scrollable
860+
.#{$prefix}--tabs--scrollable__nav-item--disabled
861+
.#{$prefix}--tabs--scrollable__nav-link {
862+
@include high-contrast-mode('disabled');
855863
}
856864
}
857865

‎packages/components/src/components/tag/_tag.scss

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -221,13 +221,6 @@
221221
border-radius: 50%;
222222
outline: none;
223223
box-shadow: inset 0 0 0 1px $focus;
224-
225-
// Windows, Firefox HCM Fix
226-
@media screen and (-ms-high-contrast: active),
227-
screen and (prefers-contrast) {
228-
// `ButtonText` is a CSS2 system color to help improve colors in HCM
229-
outline: 1px solid ButtonText;
230-
}
231224
}
232225

233226
.#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus {
@@ -277,6 +270,22 @@
277270
}
278271
}
279272
}
273+
274+
// Windows HCM Fixes
275+
/* stylelint-disable */
276+
.#{$prefix}--tag {
277+
@include high-contrast-mode('outline');
278+
}
279+
280+
.#{$prefix}--tag__close-icon svg,
281+
.#{$prefix}--tag__custom-icon svg {
282+
@include high-contrast-mode('icon-fill');
283+
}
284+
285+
.#{$prefix}--tag__close-icon:focus {
286+
@include high-contrast-mode('focus');
287+
}
288+
/* stylelint-enable */
280289
}
281290

282291
@include exports('tags') {

‎packages/components/src/components/text-input/_text-input.scss

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -123,13 +123,6 @@
123123
svg {
124124
transition: fill $duration--fast-01 motion(standard, productive);
125125
fill: $icon-secondary;
126-
127-
// Windows, Firefox HCM Fix
128-
@media screen and (-ms-high-contrast: active),
129-
screen and (prefers-contrast) {
130-
// `ButtonText` is a CSS2 system color to help improve colors in HCM
131-
fill: ButtonText;
132-
}
133126
}
134127
}
135128

@@ -357,6 +350,15 @@
357350
flex: 8;
358351
flex-direction: column;
359352
}
353+
354+
// Windows HCM Fix
355+
.#{$prefix}--text-input--password__visibility,
356+
// TODO: remove selector above
357+
.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger svg,
358+
.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover
359+
svg {
360+
@include high-contrast-mode('icon-fill');
361+
}
360362
}
361363

362364
@include exports('text-input') {

‎packages/components/src/components/tile/_tile.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,13 @@
281281
svg {
282282
fill: $icon-disabled;
283283
}
284+
285+
// Windows HCM Fix
286+
.#{$prefix}--tile__chevron svg,
287+
.#{$prefix}--tile__checkmark svg,
288+
.#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark svg {
289+
@include high-contrast-mode('icon-fill');
290+
}
284291
}
285292

286293
@include exports('tile') {

‎packages/components/src/components/toggle/_toggle.scss

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -296,8 +296,6 @@
296296
background-color $duration--fast-01 motion(exit, productive);
297297
content: '';
298298
will-change: box-shadow;
299-
300-
@include high-contrast-mode('outline');
301299
}
302300

303301
// Toggle circle
@@ -313,8 +311,6 @@
313311
border-radius: 50%;
314312
transition: transform $duration--fast-01 motion(exit, productive);
315313
content: '';
316-
317-
@include high-contrast-mode('outline');
318314
}
319315

320316
.#{$prefix}--toggle-input__label & {
@@ -371,15 +367,7 @@
371367
.#{$prefix}--toggle-input:active
372368
+ .#{$prefix}--toggle-input__label
373369
> .#{$prefix}--toggle__switch::before {
374-
@include high-contrast-mode('focus');
375-
376370
box-shadow: 0 0 0 1px $focus-inset, 0 0 0 3px $focus;
377-
// Windows, Firefox HCM Fix
378-
@media screen and (-ms-high-contrast: active),
379-
screen and (prefers-contrast) {
380-
// `ButtonText` is a CSS2 system color to help improve colors in HCM
381-
outline: 1px solid ButtonText;
382-
}
383371
}
384372

385373
//----------------------------------------------
@@ -486,6 +474,22 @@
486474
margin-bottom: $carbon--spacing-03;
487475
}
488476
}
477+
478+
// Windows HCM fixes
479+
.#{$prefix}--toggle__switch::after,
480+
.#{$prefix}--toggle__switch::before {
481+
@include high-contrast-mode('outline');
482+
}
483+
484+
// stylelint-disable-next-line no-duplicate-selectors
485+
.#{$prefix}--toggle-input:focus
486+
+ .#{$prefix}--toggle-input__label
487+
> .#{$prefix}--toggle__switch::before,
488+
.#{$prefix}--toggle-input:active
489+
+ .#{$prefix}--toggle-input__label
490+
> .#{$prefix}--toggle__switch::before {
491+
@include high-contrast-mode('focus');
492+
}
489493
}
490494

491495
@include exports('toggle') {

0 commit comments

Comments
 (0)