Skip to content

Commit ccff68c

Browse files
mmalerbammalerba
authored
refactor(multiple): convert components to theme inspection API (#27728)
1 parent 80128d6 commit ccff68c

17 files changed

+429
-451
lines changed

‎.stylelintrc.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,9 @@
150150
"**/_button-theme.scss",
151151
"**/_card-theme.scss",
152152
"**/_checkbox-theme.scss",
153+
"**/_column-resize-theme.scss",
153154
"**/_core-theme.scss",
155+
"**/_datepicker-theme.scss",
154156
"**/_fab-theme.scss",
155157
"**/_form-field-theme.scss",
156158
"**/_icon-button-theme.scss",
@@ -159,12 +161,16 @@
159161
"**/_optgroup-theme.scss",
160162
"**/_option-theme.scss",
161163
"**/_paginator-theme.scss",
164+
"**/_popover-edit-theme.scss",
162165
"**/_progress-bar-theme.scss",
163166
"**/_pseudo-checkbox-theme.scss",
164167
"**/_radio-theme.scss",
165168
"**/_ripple-theme.scss",
166169
"**/_slide-toggle-theme.scss",
167-
"**/_slider-theme.scss"
170+
"**/_slider-theme.scss",
171+
"**/_sort-theme.scss",
172+
"**/_stepper-theme.scss",
173+
"**/_tree-theme.scss"
168174
],
169175
"rules": {
170176
"material/theme-mixin-api": false

‎src/material-experimental/column-resize/_column-resize-theme.scss

+13-23
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1-
@use 'sass:map';
21
@use '@angular/material' as mat;
32

4-
@mixin color($config-or-theme) {
5-
$config: mat.get-color-config($config-or-theme);
6-
$primary: map.get($config, primary);
7-
$foreground: map.get($config, foreground);
8-
9-
$non-resizable-hover-divider: mat.get-color-from-palette($foreground, divider);
10-
$resizable-hover-divider: mat.get-color-from-palette($primary, 600);
11-
$resizable-active-divider: mat.get-color-from-palette($primary, 600);
3+
@mixin color($theme) {
4+
$non-resizable-hover-divider: mat.private-get-theme-color($theme, foreground, divider);
5+
$resizable-hover-divider: mat.private-get-theme-color($theme, primary, 600);
6+
$resizable-active-divider: mat.private-get-theme-color($theme, primary, 600);
127

138
// TODO: these styles don't really belong in the `color` part of the theme.
149
// We should figure out a better place for them.
@@ -135,25 +130,20 @@
135130
}
136131
}
137132

138-
@mixin typography($config-or-theme) {}
133+
@mixin typography($theme) {}
139134

140-
@mixin density($config-or-theme) {}
135+
@mixin density($theme) {}
141136

142-
@mixin theme($theme-or-color-config) {
143-
$theme: mat.private-legacy-get-theme($theme-or-color-config);
137+
@mixin theme($theme) {
144138
@include mat.private-check-duplicate-theme-styles($theme, 'mat-column-resize') {
145-
$color: mat.get-color-config($theme);
146-
$density: mat.get-density-config($theme);
147-
$typography: mat.get-typography-config($theme);
148-
149-
@if $color != null {
150-
@include color($color);
139+
@if mat.private-theme-has($theme, color) {
140+
@include color($theme);
151141
}
152-
@if $density != null {
153-
@include density($density);
142+
@if mat.private-theme-has($theme, density) {
143+
@include density($theme);
154144
}
155-
@if $typography != null {
156-
@include typography($typography);
145+
@if mat.private-theme-has($theme, typography) {
146+
@include typography($theme);
157147
}
158148
}
159149
}

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

+16-27
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
1-
@use 'sass:map';
21
@use '@angular/cdk';
32
@use '@angular/material' as mat;
43

54
@function _hover-content-background($direction, $background-color) {
65
@return linear-gradient($direction, rgba($background-color, 0), $background-color 8px);
76
}
87

9-
@mixin color($config-or-theme) {
10-
$config: mat.get-color-config($config-or-theme);
11-
$background: map.get($config, background);
12-
$foreground: map.get($config, foreground);
13-
$primary: map.get($config, primary);
14-
$background-color: mat.get-color-from-palette($background, 'card');
8+
@mixin color($theme) {
9+
$background-color: mat.private-get-theme-color($theme, background, 'card');
1510

1611
// TODO: these structural styles don't belong in the `color` part of a theme.
1712
// We should figure out a better place for them.
@@ -47,7 +42,7 @@
4742
position: relative;
4843

4944
&::after {
50-
background-color: mat.get-color-from-palette($primary);
45+
background-color: mat.private-get-theme-color($theme, primary);
5146
bottom: 0;
5247
content: '';
5348
height: 2px;
@@ -81,9 +76,9 @@
8176
}
8277

8378
.mat-edit-pane {
84-
@include mat.private-theme-elevation(2, $config);
79+
@include mat.private-theme-elevation(2, $theme);
8580
background: $background-color;
86-
color: mat.get-color-from-palette($foreground, text);
81+
color: mat.private-get-theme-color($theme, foreground, text);
8782
display: block;
8883
padding: 16px 24px;
8984

@@ -147,32 +142,26 @@
147142
}
148143
}
149144

150-
@mixin typography($config-or-theme) {
151-
$config: mat.private-typography-to-2018-config(
152-
mat.get-typography-config($config-or-theme));
145+
@mixin typography($theme) {
153146
[mat-edit-title] {
154-
@include mat.typography-level($config, headline-6);
147+
font: mat.private-get-theme-typography($theme, headline-6, font);
148+
letter-spacing: mat.private-get-theme-typography($theme, headline-6, letter-spacing);
155149
}
156150
}
157151

158152

159-
@mixin density($config-or-theme) {}
153+
@mixin density($theme) {}
160154

161-
@mixin theme($theme-or-color-config) {
162-
$theme: mat.private-legacy-get-theme($theme-or-color-config);
155+
@mixin theme($theme) {
163156
@include mat.private-check-duplicate-theme-styles($theme, 'mat-popover-edit') {
164-
$color: mat.get-color-config($theme);
165-
$density: mat.get-density-config($theme);
166-
$typography: mat.get-typography-config($theme);
167-
168-
@if $color != null {
169-
@include color($color);
157+
@if mat.private-theme-has($theme, color) {
158+
@include color($theme);
170159
}
171-
@if $density != null {
172-
@include density($density);
160+
@if mat.private-theme-has($theme, density) {
161+
@include density($theme);
173162
}
174-
@if $typography != null {
175-
@include typography($typography);
163+
@if mat.private-theme-has($theme, typography) {
164+
@include typography($theme);
176165
}
177166
}
178167
}

‎src/material/core/color/_all-color.scss

+7-15
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,17 @@
11
@use '../theming/all-theme';
2-
@use '../theming/theming';
2+
@use '../theming/inspection';
33

44
// Includes all of the color styles.
5-
@mixin all-component-colors($config-or-theme) {
6-
// In case a theme object has been passed instead of a configuration for
7-
// the color system, extract the color config from the theme object.
8-
$config: if(theming.private-is-theme-object($config-or-theme),
9-
theming.get-color-config($config-or-theme), $config-or-theme);
10-
11-
@if $config == null {
5+
@mixin all-component-colors($theme) {
6+
@if not inspection.theme-has($theme, color) {
127
@error 'No color configuration specified.';
138
}
149

15-
@include all-theme.all-component-themes((
16-
color: $config,
17-
typography: null,
18-
density: null,
19-
));
10+
@include all-theme.all-component-themes(
11+
inspection.theme-remove($theme, base, typography, density));
2012
}
2113

2214
// @deprecated Use `all-component-colors`.
23-
@mixin angular-material-color($config-or-theme) {
24-
@include all-component-colors($config-or-theme);
15+
@mixin angular-material-color($theme) {
16+
@include all-component-colors($theme);
2517
}

‎src/material/core/density/private/_all-density.scss

+34-39
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use '../../theming/theming';
1+
@use '../../theming/inspection';
22
@use '../../../button/button-theme';
33
@use '../../../button/icon-button-theme';
44
@use '../../../button/fab-theme';
@@ -30,13 +30,8 @@
3030
@use '../../../table/table-theme';
3131

3232
// Includes all of the density styles.
33-
@mixin all-component-densities($config-or-theme) {
34-
// In case a theme object has been passed instead of a configuration for
35-
// the density system, extract the density config from the theme object.
36-
$config: if(theming.private-is-theme-object($config-or-theme),
37-
theming.get-density-config($config-or-theme), $config-or-theme);
38-
39-
@if $config == null {
33+
@mixin all-component-densities($theme) {
34+
@if not inspection.theme-has($theme, density) {
4035
@error 'No density configuration specified.';
4136
}
4237

@@ -45,39 +40,39 @@
4540
// not possible as it would introduce a circular dependency for density because the `mat-core`
4641
// mixin that is transitively loaded by the `all-theme` file, imports `all-density` which
4742
// would then load `all-theme` again. This ultimately results a circular dependency.
48-
@include form-field-theme.density($config);
49-
@include card-theme.density($config);
50-
@include progress-bar-theme.density($config);
51-
@include progress-spinner-theme.density($config);
52-
@include tooltip-theme.density($config);
53-
@include input-theme.density($config);
54-
@include core-theme.density($config);
55-
@include select-theme.density($config);
56-
@include checkbox-theme.density($config);
57-
@include autocomplete-theme.density($config);
58-
@include dialog-theme.density($config);
59-
@include chips-theme.density($config);
60-
@include slide-toggle-theme.density($config);
61-
@include radio-theme.density($config);
62-
@include slider-theme.density($config);
63-
@include menu-theme.density($config);
64-
@include list-theme.density($config);
65-
@include paginator-theme.density($config);
66-
@include tabs-theme.density($config);
67-
@include snack-bar-theme.density($config);
68-
@include button-theme.density($config);
69-
@include icon-button-theme.density($config);
70-
@include fab-theme.density($config);
71-
@include table-theme.density($config);
72-
@include expansion-theme.density($config);
73-
@include stepper-theme.density($config);
74-
@include toolbar-theme.density($config);
75-
@include tree-theme.density($config);
76-
@include button-toggle-theme.density($config);
43+
@include form-field-theme.density($theme);
44+
@include card-theme.density($theme);
45+
@include progress-bar-theme.density($theme);
46+
@include progress-spinner-theme.density($theme);
47+
@include tooltip-theme.density($theme);
48+
@include input-theme.density($theme);
49+
@include core-theme.density($theme);
50+
@include select-theme.density($theme);
51+
@include checkbox-theme.density($theme);
52+
@include autocomplete-theme.density($theme);
53+
@include dialog-theme.density($theme);
54+
@include chips-theme.density($theme);
55+
@include slide-toggle-theme.density($theme);
56+
@include radio-theme.density($theme);
57+
@include slider-theme.density($theme);
58+
@include menu-theme.density($theme);
59+
@include list-theme.density($theme);
60+
@include paginator-theme.density($theme);
61+
@include tabs-theme.density($theme);
62+
@include snack-bar-theme.density($theme);
63+
@include button-theme.density($theme);
64+
@include icon-button-theme.density($theme);
65+
@include fab-theme.density($theme);
66+
@include table-theme.density($theme);
67+
@include expansion-theme.density($theme);
68+
@include stepper-theme.density($theme);
69+
@include toolbar-theme.density($theme);
70+
@include tree-theme.density($theme);
71+
@include button-toggle-theme.density($theme);
7772
}
7873

7974

8075
// @deprecated Use `all-component-densities`.
81-
@mixin angular-material-density($config-or-theme) {
82-
@include all-component-densities($config-or-theme);
76+
@mixin angular-material-density($theme) {
77+
@include all-component-densities($theme);
8378
}

‎src/material/core/focus-indicators/_private.scss

+22-26
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@use '@angular/cdk';
44
@use '../style/layout-common';
55
@use '../theming/theming';
6+
@use '../theming/inspection';
67

78
// Private sass variables that will be used as reference throughout component stylesheets.
89
$default-border-width: 3px;
@@ -113,65 +114,60 @@ $default-border-radius: 4px;
113114
@include customize-focus-indicators($config, 'mat-mdc');
114115
}
115116

116-
@mixin strong-focus-indicators-color($config-or-theme-or-color) {
117-
@if meta.type-of($config-or-theme-or-color) == 'color' {
117+
@mixin strong-focus-indicators-color($theme-or-color) {
118+
@if meta.type-of($theme-or-color) == 'color' {
118119
@include customize-focus-indicators((
119-
border-color: $config-or-theme-or-color
120+
border-color: $theme-or-color
120121
), 'mat');
121122
}
122123
@else {
123-
$config: theming.get-color-config($config-or-theme-or-color);
124-
$border-color: theming.get-color-from-palette(map.get($config, primary));
124+
$border-color: inspection.get-theme-color($theme-or-color, primary);
125125
@include customize-focus-indicators((
126126
border-color: $border-color
127127
), 'mat');
128128
}
129129
}
130130

131-
@mixin strong-focus-indicators-theme($theme-or-color-config-or-color) {
132-
@if meta.type-of($theme-or-color-config-or-color) == 'color' {
131+
@mixin strong-focus-indicators-theme($theme-or-color) {
132+
@if meta.type-of($theme-or-color) == 'color' {
133133
@include customize-focus-indicators((
134-
border-color: $theme-or-color-config-or-color
134+
border-color: $theme-or-color
135135
), 'mat');
136136
}
137137
@else {
138-
$theme: theming.private-legacy-get-theme($theme-or-color-config-or-color);
139-
@include theming.private-check-duplicate-theme-styles($theme, 'mat-focus-indicators') {
140-
$color: theming.get-color-config($theme);
141-
@if $color != null {
142-
@include strong-focus-indicators-color($color);
138+
@include theming.private-check-duplicate-theme-styles($theme-or-color, 'mat-focus-indicators') {
139+
@if inspection.theme-has($theme-or-color, color) {
140+
@include strong-focus-indicators-color($theme-or-color);
143141
}
144142
}
145143
}
146144
}
147145

148-
@mixin mdc-strong-focus-indicators-color($config-or-theme-or-color) {
149-
@if meta.type-of($config-or-theme-or-color) == 'color' {
146+
@mixin mdc-strong-focus-indicators-color($theme-or-color) {
147+
@if meta.type-of($theme-or-color) == 'color' {
150148
@include customize-focus-indicators((
151-
border-color: $config-or-theme-or-color
149+
border-color: $theme-or-color
152150
), 'mat-mdc');
153151
}
154152
@else {
155-
$config: theming.get-color-config($config-or-theme-or-color);
156-
$border-color: theming.get-color-from-palette(map.get($config, primary));
153+
$border-color: inspection.get-theme-color($theme-or-color, primary);
157154
@include customize-focus-indicators((
158155
border-color: $border-color
159156
), 'mat-mdc');
160157
}
161158
}
162159

163-
@mixin mdc-strong-focus-indicators-theme($theme-or-color-config-or-color) {
164-
@if meta.type-of($theme-or-color-config-or-color) == 'color' {
160+
@mixin mdc-strong-focus-indicators-theme($theme-or-color) {
161+
@if meta.type-of($theme-or-color) == 'color' {
165162
@include customize-focus-indicators((
166-
border-color: $theme-or-color-config-or-color
163+
border-color: $theme-or-color
167164
), 'mat-mdc');
168165
}
169166
@else {
170-
$theme: theming.private-legacy-get-theme($theme-or-color-config-or-color);
171-
@include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-focus-indicators') {
172-
$color: theming.get-color-config($theme);
173-
@if $color != null {
174-
@include mdc-strong-focus-indicators-color($color);
167+
@include theming.private-check-duplicate-theme-styles(
168+
$theme-or-color, 'mat-mdc-focus-indicators') {
169+
@if inspection.theme-has($theme-or-color, color) {
170+
@include mdc-strong-focus-indicators-color($theme-or-color);
175171
}
176172
}
177173
}

0 commit comments

Comments
 (0)