Skip to content

Commit 681c226

Browse files
andrewseguinandrewseguin
committed
refactor: fixes found during internal testing
1 parent 27004ee commit 681c226

File tree

13 files changed

+95
-38
lines changed

13 files changed

+95
-38
lines changed

‎src/material/button/_fab-theme.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
/// @param {Map} $theme The theme to generate base styles for.
1313
@mixin base($theme) {
1414
@if inspection.get-theme-version($theme) == 1 {
15+
@include token-utils.create-token-values(
16+
m3-fab.$prefix,
17+
map.get(m3-fab.get-tokens($theme), base));
1518
} @else {
1619
@include sass-utils.current-selector-or-root() {
1720
@include token-utils.create-token-values-mixed(

‎src/material/button/_m3-icon-button.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ $prefix: (mat, icon-button);
1616
$system: m3-utils.get-system($theme);
1717
@if $color-variant {
1818
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
19+
$system: map.set($system, on-surface-variant, map.get($system, $color-variant));
1920
}
2021

2122
$tokens: (

‎src/material/card/_m3-card.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@ $prefix: (mat, card);
2626
subtitle-text-color: map.get($system, on-surface),
2727
),
2828
typography: (
29-
subtitle-text-font: map.get($system, subtitle-large-font),
30-
subtitle-text-line-height: map.get($system, subtitle-large-line-height),
31-
subtitle-text-size: map.get($system, subtitle-large-size),
32-
subtitle-text-tracking: map.get($system, subtitle-large-tracking),
33-
subtitle-text-weight: map.get($system, subtitle-large-weight),
29+
subtitle-text-font: map.get($system, title-medium-font),
30+
subtitle-text-line-height: map.get($system, title-medium-line-height),
31+
subtitle-text-size: map.get($system, title-medium-size),
32+
subtitle-text-tracking: map.get($system, title-medium-tracking),
33+
subtitle-text-weight: map.get($system, title-medium-weight),
3434
title-text-font: map.get($system, title-large-font),
3535
title-text-line-height: map.get($system, title-large-line-height),
3636
title-text-size: map.get($system, title-large-size),

‎src/material/core/_core-theme.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
@use 'option/m2-optgroup';
1717
@use 'option/m3-optgroup';
1818
@use 'selection/pseudo-checkbox/m2-pseudo-checkbox';
19+
@use 'selection/pseudo-checkbox/m3-pseudo-checkbox';
1920
@use 'sass:map';
2021

2122
@mixin base($theme) {
@@ -32,6 +33,9 @@
3233
@include token-utils.create-token-values(
3334
m3-optgroup.$prefix,
3435
map.get(m3-optgroup.get-tokens($theme), base));
36+
@include token-utils.create-token-values(
37+
m3-pseudo-checkbox.$prefix,
38+
map.get(m3-pseudo-checkbox.get-tokens($theme), base));
3539
} @else {
3640
@include ripple-theme.base($theme);
3741
@include option-theme.base($theme);
@@ -58,6 +62,9 @@
5862
@include token-utils.create-token-values(
5963
m3-optgroup.$prefix,
6064
map.get(m3-optgroup.get-tokens($theme), color));
65+
@include token-utils.create-token-values(
66+
m3-pseudo-checkbox.$prefix,
67+
map.get(m3-pseudo-checkbox.get-tokens($theme), color));
6168
} @else {
6269
@include ripple-theme.color($theme);
6370
@include option-theme.color($theme);
@@ -84,6 +91,9 @@
8491
@include token-utils.create-token-values(
8592
m3-optgroup.$prefix,
8693
map.get(m3-optgroup.get-tokens($theme), typography));
94+
@include token-utils.create-token-values(
95+
m3-pseudo-checkbox.$prefix,
96+
map.get(m3-pseudo-checkbox.get-tokens($theme), typography));
8797
} @else {
8898
@include option-theme.typography($theme);
8999
@include optgroup-theme.typography($theme);
@@ -106,6 +116,9 @@
106116
@include token-utils.create-token-values(
107117
m3-optgroup.$prefix,
108118
map.get(m3-optgroup.get-tokens($theme), density));
119+
@include token-utils.create-token-values(
120+
m3-pseudo-checkbox.$prefix,
121+
map.get(m3-pseudo-checkbox.get-tokens($theme), density));
109122
} @else {
110123
@include option-theme.density($theme);
111124
@include optgroup-theme.density($theme);

‎src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
@if inspection.get-theme-version($theme) == 1 {
4545
@include token-utils.create-token-values(
4646
m3-pseudo-checkbox.$prefix,
47-
map.get(m3-pseudo-checkbox.get-tokens($theme, $color-variant), base));
47+
map.get(m3-pseudo-checkbox.get-tokens($theme, $color-variant), color));
4848
} @else {
4949
// Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
5050
// theme from their parent, rather than implementing their own theming, which is why we

‎src/material/core/theming/_color-api-backwards-compatibility.scss

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,21 @@ $_overrides-only: true;
2727
$secondary-when-primary: if($color-variant == primary, secondary, $color-variant);
2828

2929
& {
30-
@include option-theme.color($theme, $secondary-when-primary);
30+
@if ($color-variant != primary) {
31+
@include option-theme.color($theme, $secondary-when-primary);
32+
}
3133
}
3234

3335
& {
34-
@include progress-spinner-theme.color($theme, $color-variant);
36+
@if ($color-variant != primary) {
37+
@include progress-spinner-theme.color($theme, $color-variant);
38+
}
3539
}
3640

3741
& {
38-
@include pseudo-checkbox-theme.color($theme, $color-variant);
42+
@if ($color-variant != primary) {
43+
@include pseudo-checkbox-theme.color($theme, $color-variant);
44+
}
3945
}
4046

4147
& {
@@ -47,59 +53,79 @@ $_overrides-only: true;
4753
}
4854

4955
&.mat-mdc-checkbox {
50-
@include checkbox-theme.color($theme, $color-variant);
56+
@if ($color-variant != primary) {
57+
@include checkbox-theme.color($theme, $color-variant);
58+
}
5159
}
5260

5361
&.mat-mdc-slider {
54-
@include slider-theme.color($theme, $color-variant);
62+
@if ($color-variant != primary) {
63+
@include slider-theme.color($theme, $color-variant);
64+
}
5565
}
5666

5767
&.mat-mdc-tab-group,
5868
&.mat-mdc-tab-nav-bar {
59-
@include tabs-theme.color($theme, $color-variant);
69+
@if ($color-variant != primary) {
70+
@include tabs-theme.color($theme, $color-variant);
71+
}
6072
}
6173

6274
&.mat-mdc-slide-toggle {
6375
@include slide-toggle-theme.color($theme, $color-variant);
6476
}
6577

6678
&.mat-mdc-form-field {
67-
@include select-theme.color($theme, $color-variant);
79+
@if ($color-variant != primary) {
80+
@include select-theme.color($theme, $color-variant);
81+
}
6882
}
6983

7084
&.mat-mdc-radio-button {
71-
@include radio-theme.color($theme, $color-variant);
85+
@if ($color-variant != primary) {
86+
@include radio-theme.color($theme, $color-variant);
87+
}
7288
}
7389

7490
&.mat-mdc-progress-bar {
75-
@include progress-bar-theme.color($theme, $color-variant);
91+
@if ($color-variant != primary) {
92+
@include progress-bar-theme.color($theme, $color-variant);
93+
}
7694
}
7795

7896
&.mat-mdc-form-field {
79-
@include form-field-theme.color($theme, $color-variant);
97+
@if ($color-variant != primary) {
98+
@include form-field-theme.color($theme, $color-variant);
99+
}
80100
}
81101

82102
&.mat-datepicker-content {
83103
@include datepicker-theme.color($theme, $color-variant);
84104
}
85105

86106
&.mat-mdc-button-base {
87-
@include button-theme.color($theme, $color-variant);
107+
@if ($color-variant != primary) {
108+
@include button-theme.color($theme, $color-variant);
109+
}
88110
@include icon-button-theme.color($theme, $color-variant);
89111
}
90112

91113
&.mat-mdc-standard-chip {
92-
@include chips-theme.color($theme, $secondary-when-primary);
114+
@if ($color-variant != primary) {
115+
@include chips-theme.color($theme, $secondary-when-primary);
116+
}
93117
}
94118

95119
.mdc-list-item__start,
96120
.mdc-list-item__end {
97-
@include checkbox-theme.color($theme, $color-variant);
98-
@include radio-theme.color($theme, $color-variant);
121+
@if ($color-variant != primary) {
122+
@include checkbox-theme.color($theme, $color-variant);
123+
@include radio-theme.color($theme, $color-variant);
124+
}
99125
}
100126

101127
// M3 dropped support for warn/error color FABs.
102-
@if $color-variant != error {
128+
@if $color-variant != error and $color-variant != primary {
103129
&.mat-mdc-fab,
104130
&.mat-mdc-mini-fab {
105131
@include fab-theme.color($theme, $color-variant);

‎src/material/core/tokens/_m3-utils.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@
3838

3939
// Opacity may be a system level value less than 1, instead of the intended
4040
// whole percentage, e.g. 38%. Remove this support when possible.
41-
@if (meta.type-of($opacity) == number and $opacity < 1) {
41+
@if (meta.type-of($opacity) == string and string.index($opacity, '--') == 1) {
42+
$opacity: 'calc(var(#{$opacity}) * 100%)';
43+
} @else if (meta.type-of($opacity) == number and $opacity < 1) {
4244
$opacity: '#{$opacity * 100}%';
4345
}
4446

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,6 @@ $prefix: (mat, form-field);
5959
filled-input-text-color: map.get($system, on-surface),
6060
filled-input-text-placeholder-color: map.get($system, on-surface-variant),
6161
filled-label-text-color: map.get($system, on-surface-variant),
62-
filled-label-text-font: map.get($system, body-large-font),
63-
filled-label-text-size: map.get($system, body-large-size),
64-
filled-label-text-tracking: map.get($system, body-large-tracking),
65-
filled-label-text-weight: map.get($system, body-large-weight),
6662
focus-select-arrow-color: map.get($system, primary),
6763
focus-state-layer-opacity: 0,
6864
hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
@@ -87,10 +83,6 @@ $prefix: (mat, form-field);
8783
outlined-input-text-color: map.get($system, on-surface),
8884
outlined-input-text-placeholder-color: map.get($system, on-surface-variant),
8985
outlined-label-text-color: map.get($system, on-surface-variant),
90-
outlined-label-text-font: map.get($system, body-large-font),
91-
outlined-label-text-size: map.get($system, body-large-size),
92-
outlined-label-text-tracking: map.get($system, body-large-tracking),
93-
outlined-label-text-weight: map.get($system, body-large-weight),
9486
outlined-outline-color: map.get($system, outline),
9587
select-disabled-option-text-color:
9688
m3-utils.color-with-opacity(map.get($system, neutral10), 38%),
@@ -109,6 +101,14 @@ $prefix: (mat, form-field);
109101
subscript-text-size: map.get($system, body-small-size),
110102
subscript-text-tracking: map.get($system, body-small-tracking),
111103
subscript-text-weight: map.get($system, body-small-weight),
104+
outlined-label-text-font: map.get($system, body-large-font),
105+
outlined-label-text-size: map.get($system, body-large-size),
106+
outlined-label-text-tracking: map.get($system, body-large-tracking),
107+
outlined-label-text-weight: map.get($system, body-large-weight),
108+
filled-label-text-font: map.get($system, body-large-font),
109+
filled-label-text-size: map.get($system, body-large-size),
110+
filled-label-text-tracking: map.get($system, body-large-tracking),
111+
filled-label-text-weight: map.get($system, body-large-weight),
112112
),
113113
density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
114114
);

‎src/material/paginator/_m3-paginator.scss

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,18 @@ $prefix: (mat, paginator);
1313

1414
@return (
1515
base: (),
16-
color: (),
17-
typography: (
16+
color: (
17+
container-text-color: map.get($system, on-surface),
1818
container-background-color: map.get($system, surface),
19+
disabled-icon-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
20+
enabled-icon-color: map.get($system, on-surface-variant),
21+
),
22+
typography: (
1923
container-text-font: map.get($system, body-small-font),
2024
container-text-line-height: map.get($system, body-small-line-height),
2125
container-text-size: map.get($system, body-small-size),
2226
container-text-tracking: map.get($system, body-small-tracking),
2327
container-text-weight: map.get($system, body-small-weight),
24-
disabled-icon-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
25-
enabled-icon-color: map.get($system, on-surface-variant),
2628
select-trigger-text-size: map.get($system, body-small-size),
2729
),
2830
density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),

‎src/material/progress-spinner/progress-spinner.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,8 @@ $fallbacks: m3-progress-spinner.get-tokens(m3-system.$theme-with-system-vars);
9898
.mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic {
9999
@include token-utils.use-tokens(
100100
m2-progress-spinner.$prefix,
101-
m2-progress-spinner.get-token-slots()
101+
m2-progress-spinner.get-token-slots(),
102+
$fallbacks,
102103
) {
103104
stroke: token-utils.slot(active-indicator-color);
104105
}

‎src/material/radio/_m3-radio.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ $prefix: (mat, radio);
1515
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
1616
}
1717

18-
@return (
18+
$tokens: (
1919
base: (
2020
disabled-unselected-icon-opacity: 0.38,
2121
disabled-selected-icon-opacity: 0.38,
@@ -45,6 +45,14 @@ $prefix: (mat, radio);
4545
),
4646
density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
4747
);
48+
49+
// Temporary removal where color variants previously did not include the
50+
// unselected icon color. Remove this and approve internal screenshot changes.
51+
@if $color-variant {
52+
$tokens: map.remove($tokens, color, unselected-icon-color);
53+
}
54+
55+
@return $tokens;
4856
}
4957

5058
// Tokens that can be configured through Angular Material's density theming API.

‎src/material/sidenav/_m3-sidenav.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ $prefix: (mat, sidenav);
1212
base: (
1313
container-shape: map.get($system, corner-large),
1414
container-elevation-shadow: none,
15-
container-divider-color: transparent,
1615
container-width: 360px,
1716
),
1817
color: (
@@ -21,6 +20,7 @@ $prefix: (mat, sidenav);
2120
content-background-color: map.get($system, background),
2221
content-text-color: map.get($system, on-background),
2322
scrim-color: m3-utils.color-with-opacity(map.get($system, neutral-variant20), 40%),
23+
container-divider-color: transparent,
2424
),
2525
typography: (),
2626
density: (),

‎src/material/sidenav/drawer.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,8 @@ $fallbacks: m3-sidenav.get-tokens(m3-system.$theme-with-system-vars);
232232

233233
@include token-utils.use-tokens(
234234
$token-prefix,
235-
$token-slots
235+
$token-slots,
236+
$fallbacks,
236237
) {
237238
border-right-color: token-utils.slot(container-divider-color);
238239
border-right-width: 1px;

0 commit comments

Comments
 (0)