Skip to content

Commit 82844b3

Browse files
authored
feat(material/theming): Open up new APIs to access theme values (#27865)
This PR opens up the following Sass APIs used to access theme values: - `get-theme-version`: Gets the version of the theme object - `get-theme-type`: Gets the type of theme (light or dark) - `get-theme-color`: Gets a color from the theme - `get-theme-typography`: Gets a typography value from the theme - `get-theme-density`: Gets the density scale from the theme - `theme-has`: Checks if the theme has information for the given theming system
1 parent dbd31de commit 82844b3

File tree

4 files changed

+82
-83
lines changed

4 files changed

+82
-83
lines changed

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@use '@angular/material' as mat;
22

33
@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);
4+
$non-resizable-hover-divider: mat.get-theme-color($theme, foreground, divider);
5+
$resizable-hover-divider: mat.get-theme-color($theme, primary, 600);
6+
$resizable-active-divider: mat.get-theme-color($theme, primary, 600);
77

88
// TODO: these styles don't really belong in the `color` part of the theme.
99
// We should figure out a better place for them.
@@ -136,13 +136,13 @@
136136

137137
@mixin theme($theme) {
138138
@include mat.private-check-duplicate-theme-styles($theme, 'mat-column-resize') {
139-
@if mat.private-theme-has($theme, color) {
139+
@if mat.theme-has($theme, color) {
140140
@include color($theme);
141141
}
142-
@if mat.private-theme-has($theme, density) {
142+
@if mat.theme-has($theme, density) {
143143
@include density($theme);
144144
}
145-
@if mat.private-theme-has($theme, typography) {
145+
@if mat.theme-has($theme, typography) {
146146
@include typography($theme);
147147
}
148148
}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
}
77

88
@mixin color($theme) {
9-
$background-color: mat.private-get-theme-color($theme, background, 'card');
9+
$background-color: mat.get-theme-color($theme, background, 'card');
1010

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

4444
&::after {
45-
background-color: mat.private-get-theme-color($theme, primary);
45+
background-color: mat.get-theme-color($theme, primary);
4646
bottom: 0;
4747
content: '';
4848
height: 2px;
@@ -78,7 +78,7 @@
7878
.mat-edit-pane {
7979
@include mat.private-theme-elevation(2, $theme);
8080
background: $background-color;
81-
color: mat.private-get-theme-color($theme, foreground, text);
81+
color: mat.get-theme-color($theme, foreground, text);
8282
display: block;
8383
padding: 16px 24px;
8484

@@ -144,8 +144,8 @@
144144

145145
@mixin typography($theme) {
146146
[mat-edit-title] {
147-
font: mat.private-get-theme-typography($theme, headline-6, font);
148-
letter-spacing: mat.private-get-theme-typography($theme, headline-6, letter-spacing);
147+
font: mat.get-theme-typography($theme, headline-6, font);
148+
letter-spacing: mat.get-theme-typography($theme, headline-6, letter-spacing);
149149
}
150150
}
151151

@@ -154,13 +154,13 @@
154154

155155
@mixin theme($theme) {
156156
@include mat.private-check-duplicate-theme-styles($theme, 'mat-popover-edit') {
157-
@if mat.private-theme-has($theme, color) {
157+
@if mat.theme-has($theme, color) {
158158
@include color($theme);
159159
}
160-
@if mat.private-theme-has($theme, density) {
160+
@if mat.theme-has($theme, density) {
161161
@include density($theme);
162162
}
163-
@if mat.private-theme-has($theme, typography) {
163+
@if mat.theme-has($theme, typography) {
164164
@include typography($theme);
165165
}
166166
}

src/material/_index.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,6 @@ list-density, list-base;
142142
$private-mdc-base-styles-query, $private-mdc-base-styles-without-animation-query,
143143
$private-mdc-theme-styles-query, $private-mdc-typography-styles-query;
144144

145-
// New theming APIs, currently in development:
146-
@forward './core/theming/inspection' as private-* show private-get-theme-version,
147-
private-get-theme-type, private-get-theme-color, private-get-theme-typography,
148-
private-get-theme-density, private-theme-has;
145+
// New theming APIs:
146+
@forward './core/theming/inspection' show get-theme-version, get-theme-type, get-theme-color,
147+
get-theme-typography, get-theme-density, theme-has;

0 commit comments

Comments
 (0)