Skip to content

Commit 05f59b3

Browse files
crisbetocrisbeto
authored
fix: reduce amount of generated high contrast styles (#18332)
Since we know that all of our components have encapsulation turned off, we can pass in the encapsulation parameter to the `cdk-high-contrast` mixin and avoid having to output the styles twice.
1 parent 79330b7 commit 05f59b3

File tree

38 files changed

+72
-72
lines changed

38 files changed

+72
-72
lines changed

‎src/material-experimental/mdc-button/button.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
.mat-mdc-fab,
2323
.mat-mdc-mini-fab,
2424
.mat-mdc-icon-button {
25-
@include cdk-high-contrast {
25+
@include cdk-high-contrast(active, off) {
2626
outline: solid 1px;
2727
}
2828
}

‎src/material-experimental/mdc-card/card.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ $mat-card-default-padding: 16px !default;
1616
// Add styles to the root card to have an outline in high-contrast mode.
1717
// TODO(jelbourn): file bug for MDC supporting high-contrast mode on `.mdc-card`.
1818
.mat-mdc-card {
19-
@include cdk-high-contrast {
19+
@include cdk-high-contrast(active, off) {
2020
outline: solid 1px;
2121
}
2222
}

‎src/material-experimental/mdc-chips/chips.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
transition-duration: 1ms;
2323
}
2424

25-
@include cdk-high-contrast {
25+
@include cdk-high-contrast(active, off) {
2626
outline: solid 1px;
2727

2828
&:focus {
@@ -79,7 +79,7 @@ input.mat-mdc-chip-input {
7979
}
8080

8181
.mdc-chip__checkmark-path {
82-
@include cdk-high-contrast(black-on-white) {
82+
@include cdk-high-contrast(black-on-white, off) {
8383
// SVG colors won't be changed in high contrast mode and since the checkmark is white
8484
// by default, it'll blend in with the background in black-on-white mode. Override the color
8585
// to ensure that it's visible. We need !important, because the theme styles are very specific.

‎src/material-experimental/mdc-menu/menu.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
// The CDK positioning uses flexbox to anchor the element, whereas MDC uses `position: absolute`.
2424
position: static;
2525

26-
@include cdk-high-contrast {
26+
@include cdk-high-contrast(active, off) {
2727
outline: solid 1px;
2828
}
2929
}
@@ -75,7 +75,7 @@
7575
}
7676
}
7777

78-
@include cdk-high-contrast {
78+
@include cdk-high-contrast(active, off) {
7979
&.cdk-program-focused,
8080
&.cdk-keyboard-focused,
8181
&-highlighted {

‎src/material-experimental/mdc-slide-toggle/slide-toggle.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
}
5656

5757

58-
@include cdk-high-contrast {
58+
@include cdk-high-contrast(active, off) {
5959
.mat-mdc-slide-toggle-focused {
6060
.mdc-switch__track {
6161
// Usually 1px would be enough, but MDC reduces the opacity on the

‎src/material-experimental/mdc-slider/slider.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ $mat-slider-horizontal-margin: 8px !default;
2626
width: auto;
2727
min-width: $mat-slider-min-size - (2 * $mat-slider-horizontal-margin);
2828

29-
@include cdk-high-contrast {
29+
@include cdk-high-contrast(active, off) {
3030
// The slider track isn't visible in high contrast mode so we work
3131
// around it by setting an outline and removing the height to make it look solid.
3232
.mdc-slider__track-container {

‎src/material-experimental/popover-edit/_popover-edit.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
display: block;
8282
padding: 16px 24px;
8383

84-
@include cdk-high-contrast {
84+
@include cdk-high-contrast(active, off) {
8585
// Note that normally we use 1px for high contrast outline, however here we use 3,
8686
// because the popover is rendered on top of a table which already has some borders
8787
// and doesn't have a backdrop. The thicker outline makes it easier to differentiate.

‎src/material/autocomplete/autocomplete.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ $mat-autocomplete-panel-border-radius: 4px !default;
3838
margin-top: -1px;
3939
}
4040

41-
@include cdk-high-contrast {
41+
@include cdk-high-contrast(active, off) {
4242
outline: solid 1px;
4343
}
4444
}

‎src/material/badge/_badge-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
9898
color: mat-color($primary, default-contrast);
9999
background: mat-color($primary);
100100

101-
@include cdk-high-contrast {
101+
@include cdk-high-contrast(active, off) {
102102
outline: solid 1px;
103103
border-radius: 0;
104104
}

‎src/material/bottom-sheet/bottom-sheet-container.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ $mat-bottom-sheet-container-horizontal-padding: 16px !default;
1717
max-height: 80vh;
1818
overflow: auto;
1919

20-
@include cdk-high-contrast {
20+
@include cdk-high-contrast(active, off) {
2121
outline: 1px solid;
2222
}
2323
}

‎src/material/button-toggle/button-toggle.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
2020
border-radius: $mat-button-toggle-legacy-border-radius;
2121
-webkit-tap-highlight-color: transparent;
2222

23-
@include cdk-high-contrast {
23+
@include cdk-high-contrast(active, off) {
2424
outline: solid 1px;
2525
}
2626
}
@@ -29,7 +29,7 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
2929
.mat-button-toggle-group-appearance-standard {
3030
border-radius: $mat-button-toggle-standard-border-radius;
3131

32-
@include cdk-high-contrast {
32+
@include cdk-high-contrast(active, off) {
3333
outline: 0;
3434
}
3535
}
@@ -58,7 +58,7 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
5858
opacity: 1;
5959

6060
// In high contrast mode `opacity: 1` will show the overlay as solid so we fall back 0.5.
61-
@include cdk-high-contrast {
61+
@include cdk-high-contrast(active, off) {
6262
opacity: 0.5;
6363
}
6464
}
@@ -78,7 +78,7 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
7878
&.cdk-keyboard-focused:not(.mat-button-toggle-disabled) .mat-button-toggle-focus-overlay {
7979
opacity: 0.12;
8080

81-
@include cdk-high-contrast {
81+
@include cdk-high-contrast(active, off) {
8282
opacity: 0.5;
8383
}
8484
}
@@ -128,14 +128,14 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
128128
// Changing the background color for the selected item won't be visible in high contrast mode.
129129
// We fall back to using the overlay to draw a brighter, semi-transparent tint on top instead.
130130
// It uses a border, because the browser will render it using a brighter color.
131-
@include cdk-high-contrast {
131+
@include cdk-high-contrast(active, off) {
132132
opacity: 0.5;
133133
height: 0;
134134
}
135135
}
136136
}
137137

138-
@include cdk-high-contrast {
138+
@include cdk-high-contrast(active, off) {
139139
.mat-button-toggle-checked {
140140
&.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
141141
border-bottom: solid $mat-button-toggle-standard-height;

‎src/material/button/button.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -121,14 +121,14 @@
121121
transition: none;
122122
}
123123

124-
@include cdk-high-contrast {
124+
@include cdk-high-contrast(active, off) {
125125
// Note that IE will render this in the same way, no
126126
// matter whether the theme is light or dark. This helps
127127
// with the readability of focused buttons.
128128
background-color: #fff;
129129
}
130130

131-
@include cdk-high-contrast(black-on-white) {
131+
@include cdk-high-contrast(black-on-white, off) {
132132
// For the black-on-white high contrast mode, the browser will set this element
133133
// to white, making it blend in with the background, hence why we need to set
134134
// it explicitly to black.
@@ -167,7 +167,7 @@
167167

168168
// Add an outline to make buttons more visible in high contrast mode. Stroked buttons
169169
// don't need a special look in high-contrast mode, because those already have an outline.
170-
@include cdk-high-contrast {
170+
@include cdk-high-contrast(active, off) {
171171
.mat-button, .mat-flat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
172172
outline: solid 1px;
173173
}

‎src/material/card/card.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ $mat-card-header-size: 40px !default;
3737
}
3838
}
3939

40-
@include cdk-high-contrast {
40+
@include cdk-high-contrast(active, off) {
4141
outline: solid 1px;
4242
}
4343
}

‎src/material/checkbox/checkbox.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
253253
transition: none;
254254
}
255255

256-
@include cdk-high-contrast {
256+
@include cdk-high-contrast(active, off) {
257257
// Note that we change the border style of the checkbox frame to dotted because this
258258
// is how IE/Edge similarly treats native checkboxes in high contrast mode.
259259
.mat-checkbox.cdk-keyboard-focused & {
@@ -279,7 +279,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
279279
// `.mat-checkbox` here is redundant, but we need it to increase the specificity so that
280280
// these styles don't get overwritten by the `background-color` from the theme.
281281
.mat-checkbox & {
282-
@include cdk-high-contrast {
282+
@include cdk-high-contrast(active, off) {
283283
// Needs to be removed because it hides the checkbox outline.
284284
background: none;
285285
}
@@ -329,7 +329,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
329329
width: $_mat-checkbox-mark-stroke-size;
330330
}
331331

332-
@include cdk-high-contrast(black-on-white) {
332+
@include cdk-high-contrast(black-on-white, off) {
333333
// In the checkbox theme this `stroke` has !important which ends up overriding the browser's
334334
// automatic color inversion so we need to re-invert it ourselves for black-on-white.
335335
stroke: #000 !important;
@@ -345,7 +345,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
345345
transform: scaleX(0) rotate(0deg);
346346
border-radius: 2px;
347347

348-
@include cdk-high-contrast {
348+
@include cdk-high-contrast(active, off) {
349349
height: 0;
350350
border-top: solid $height;
351351
margin-top: $height;
@@ -409,7 +409,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
409409
.mat-checkbox-disabled {
410410
cursor: default;
411411

412-
@include cdk-high-contrast {
412+
@include cdk-high-contrast(active, off) {
413413
opacity: 0.5;
414414
}
415415
}

‎src/material/chips/chips.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ $mat-chip-remove-size: 18px;
8282
}
8383
}
8484

85-
@include cdk-high-contrast {
85+
@include cdk-high-contrast(active, off) {
8686
outline: solid 1px;
8787

8888
&:focus {

‎src/material/core/option/option.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
}
3030
}
3131

32-
@include cdk-high-contrast {
32+
@include cdk-high-contrast(active, off) {
3333
$high-contrast-border-width: 1px;
3434

3535
// Add a margin to offset the border that we're adding to active option, in order
@@ -69,7 +69,7 @@
6969
pointer-events: none;
7070

7171
// Prevents the ripple from completely covering the option in high contrast mode.
72-
@include cdk-high-contrast {
72+
@include cdk-high-contrast(active, off) {
7373
opacity: 0.5;
7474
}
7575
}

‎src/material/core/ripple/_ripple.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ $mat-ripple-color-opacity: 0.1;
3737
transform: scale(0);
3838

3939
// In high contrast mode the ripple is opaque, causing it to obstruct the content.
40-
@include cdk-high-contrast {
40+
@include cdk-high-contrast(active, off) {
4141
display: none;
4242
}
4343
}

‎src/material/datepicker/calendar-body.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,13 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
6161
// Choosing a value clearly larger than the height ensures we get the correct capsule shape.
6262
border-radius: 999px;
6363

64-
@include cdk-high-contrast {
64+
@include cdk-high-contrast(active, off) {
6565
border: none;
6666
}
6767
}
6868

6969

70-
@include cdk-high-contrast {
70+
@include cdk-high-contrast(active, off) {
7171
.mat-datepicker-popup:not(:empty),
7272
.mat-calendar-body-selected {
7373
outline: solid 1px;

‎src/material/dialog/dialog.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ $mat-dialog-button-margin: 8px !default;
2424
min-height: inherit;
2525
max-height: inherit;
2626

27-
@include cdk-high-contrast {
27+
@include cdk-high-contrast(active, off) {
2828
outline: solid 1px;
2929
}
3030
}

‎src/material/expansion/expansion-panel.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
}
3030
}
3131

32-
@include cdk-high-contrast {
32+
@include cdk-high-contrast(active, off) {
3333
outline: solid 1px;
3434
}
3535

‎src/material/form-field/form-field-fill.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ $mat-form-field-fill-subscript-padding:
2828
padding: $mat-form-field-fill-line-spacing $mat-form-field-fill-side-padding 0
2929
$mat-form-field-fill-side-padding;
3030

31-
@include cdk-high-contrast {
31+
@include cdk-high-contrast(active, off) {
3232
outline: solid 1px;
3333
}
3434
}
@@ -46,7 +46,7 @@ $mat-form-field-fill-subscript-padding:
4646
bottom: 0;
4747
height: $mat-form-field-fill-underline-ripple-height;
4848

49-
@include cdk-high-contrast {
49+
@include cdk-high-contrast(active, off) {
5050
height: 0;
5151
border-top: solid $mat-form-field-fill-underline-ripple-height;
5252
}

‎src/material/form-field/form-field-input.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ select.mat-input-element {
181181
// as the background, however this causes it blend in because we've reset the `background`
182182
// above. We have to add a more specific selector in order to ensure that it gets the
183183
// `color` from our theme instead.
184-
@include cdk-high-contrast {
184+
@include cdk-high-contrast(active, off) {
185185
.mat-focused & {
186186
color: inherit;
187187
}

‎src/material/form-field/form-field-legacy.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ $mat-form-field-legacy-underline-height: 1px !default;
3838
.mat-form-field-underline {
3939
height: $mat-form-field-legacy-underline-height;
4040

41-
@include cdk-high-contrast {
41+
@include cdk-high-contrast(active, off) {
4242
height: 0;
4343
border-top: solid $mat-form-field-legacy-underline-height;
4444
}
@@ -53,7 +53,7 @@ $mat-form-field-legacy-underline-height: 1px !default;
5353
// the desired form-field ripple height. See: angular/components#6351
5454
overflow: hidden;
5555

56-
@include cdk-high-contrast {
56+
@include cdk-high-contrast(active, off) {
5757
height: 0;
5858
border-top: solid $height;
5959
}
@@ -63,7 +63,7 @@ $mat-form-field-legacy-underline-height: 1px !default;
6363
background-position: 0;
6464
background-color: transparent;
6565

66-
@include cdk-high-contrast {
66+
@include cdk-high-contrast(active, off) {
6767
border-top-style: dotted;
6868
border-top-width: 2px;
6969
}

‎src/material/form-field/form-field-standard.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ $mat-form-field-standard-padding-top: 0.75em !default;
2222
.mat-form-field-underline {
2323
height: $mat-form-field-standard-underline-height;
2424

25-
@include cdk-high-contrast {
25+
@include cdk-high-contrast(active, off) {
2626
height: 0;
2727
border-top: solid $mat-form-field-standard-underline-height;
2828
}
@@ -33,7 +33,7 @@ $mat-form-field-standard-padding-top: 0.75em !default;
3333
bottom: 0;
3434
height: $height;
3535

36-
@include cdk-high-contrast {
36+
@include cdk-high-contrast(active, off) {
3737
height: 0;
3838
border-top: $height;
3939
}
@@ -43,7 +43,7 @@ $mat-form-field-standard-padding-top: 0.75em !default;
4343
background-position: 0;
4444
background-color: transparent;
4545

46-
@include cdk-high-contrast {
46+
@include cdk-high-contrast(active, off) {
4747
border-top-style: dotted;
4848
border-top-width: 2px;
4949
}

0 commit comments

Comments
 (0)