Skip to content

Commit

Permalink
feat(material/theming): Open up new APIs to access theme values
Browse files Browse the repository at this point in the history
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
  • Loading branch information
mmalerba committed Sep 28, 2023
1 parent 06559a0 commit ae25b46
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 83 deletions.
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@use '@angular/material' as mat;

@mixin color($theme) {
$non-resizable-hover-divider: mat.private-get-theme-color($theme, foreground, divider);
$resizable-hover-divider: mat.private-get-theme-color($theme, primary, 600);
$resizable-active-divider: mat.private-get-theme-color($theme, primary, 600);
$non-resizable-hover-divider: mat.get-theme-color($theme, foreground, divider);
$resizable-hover-divider: mat.get-theme-color($theme, primary, 600);
$resizable-active-divider: mat.get-theme-color($theme, primary, 600);

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

@mixin theme($theme) {
@include mat.private-check-duplicate-theme-styles($theme, 'mat-column-resize') {
@if mat.private-theme-has($theme, color) {
@if mat.theme-has($theme, color) {
@include color($theme);
}
@if mat.private-theme-has($theme, density) {
@if mat.theme-has($theme, density) {
@include density($theme);
}
@if mat.private-theme-has($theme, typography) {
@if mat.theme-has($theme, typography) {
@include typography($theme);
}
}
Expand Down
16 changes: 8 additions & 8 deletions src/material-experimental/popover-edit/_popover-edit-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
}

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

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

&::after {
background-color: mat.private-get-theme-color($theme, primary);
background-color: mat.get-theme-color($theme, primary);
bottom: 0;
content: '';
height: 2px;
Expand Down Expand Up @@ -78,7 +78,7 @@
.mat-edit-pane {
@include mat.private-theme-elevation(2, $theme);
background: $background-color;
color: mat.private-get-theme-color($theme, foreground, text);
color: mat.get-theme-color($theme, foreground, text);
display: block;
padding: 16px 24px;

Expand Down Expand Up @@ -144,8 +144,8 @@

@mixin typography($theme) {
[mat-edit-title] {
font: mat.private-get-theme-typography($theme, headline-6, font);
letter-spacing: mat.private-get-theme-typography($theme, headline-6, letter-spacing);
font: mat.get-theme-typography($theme, headline-6, font);
letter-spacing: mat.get-theme-typography($theme, headline-6, letter-spacing);
}
}

Expand All @@ -154,13 +154,13 @@

@mixin theme($theme) {
@include mat.private-check-duplicate-theme-styles($theme, 'mat-popover-edit') {
@if mat.private-theme-has($theme, color) {
@if mat.theme-has($theme, color) {
@include color($theme);
}
@if mat.private-theme-has($theme, density) {
@if mat.theme-has($theme, density) {
@include density($theme);
}
@if mat.private-theme-has($theme, typography) {
@if mat.theme-has($theme, typography) {
@include typography($theme);
}
}
Expand Down
7 changes: 3 additions & 4 deletions src/material/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,6 @@ list-density, list-base;
$private-mdc-base-styles-query, $private-mdc-base-styles-without-animation-query,
$private-mdc-theme-styles-query, $private-mdc-typography-styles-query;

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

0 comments on commit ae25b46

Please sign in to comment.