Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(material-experimental/theming): set up core theme and app tokens #28431

Merged
merged 1 commit into from
Jan 17, 2024
Merged

fix(material-experimental/theming): set up core theme and app tokens #28431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 3 additions & 11 deletions src/dev-app/theme-m3.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ html {
@include mat.card-theme($light-theme);
@include mat.checkbox-theme($light-theme);
@include mat.chips-theme($light-theme);
@include mat.core-theme($light-theme);
@include mat.datepicker-theme($light-theme);
@include mat.dialog-theme($light-theme);
@include mat.divider-theme($light-theme);
Expand All @@ -108,14 +109,10 @@ html {
@include mat.input-theme($light-theme);
@include mat.list-theme($light-theme);
@include mat.menu-theme($light-theme);
@include mat.optgroup-theme($light-theme);
@include mat.option-theme($light-theme);
@include mat.paginator-theme($light-theme);
@include mat.pseudo-checkbox-theme($light-theme);
@include mat.progress-bar-theme($light-theme);
@include mat.progress-spinner-theme($light-theme);
@include mat.radio-theme($light-theme);
@include mat.ripple-theme($light-theme);
@include mat.select-theme($light-theme);
@include mat.sidenav-theme($light-theme);
@include mat.slide-toggle-theme($light-theme);
Expand Down Expand Up @@ -146,6 +143,7 @@ html {
@include mat.card-color($dark-theme);
@include mat.checkbox-color($dark-theme);
@include mat.chips-color($dark-theme);
@include mat.core-color($dark-theme);
@include mat.datepicker-color($dark-theme);
@include mat.dialog-color($dark-theme);
@include mat.divider-color($dark-theme);
Expand All @@ -158,14 +156,10 @@ html {
@include mat.input-color($dark-theme);
@include mat.list-color($dark-theme);
@include mat.menu-color($dark-theme);
@include mat.optgroup-color($dark-theme);
@include mat.option-color($dark-theme);
@include mat.paginator-color($dark-theme);
@include mat.pseudo-checkbox-color($dark-theme);
@include mat.progress-bar-color($dark-theme);
@include mat.progress-spinner-color($dark-theme);
@include mat.radio-color($dark-theme);
@include mat.ripple-color($dark-theme);
@include mat.select-color($dark-theme);
@include mat.sidenav-color($dark-theme);
@include mat.slide-toggle-color($dark-theme);
Expand Down Expand Up @@ -195,6 +189,7 @@ html {
@include mat.card-density($scale-theme);
@include mat.checkbox-density($scale-theme);
@include mat.chips-density($scale-theme);
@include mat.core-density($scale-theme);
@include mat.datepicker-density($scale-theme);
@include mat.dialog-density($scale-theme);
@include mat.divider-density($scale-theme);
Expand All @@ -207,10 +202,7 @@ html {
@include mat.input-density($scale-theme);
@include mat.list-density($scale-theme);
@include mat.menu-density($scale-theme);
@include mat.optgroup-density($scale-theme);
@include mat.option-density($scale-theme);
@include mat.paginator-density($scale-theme);
@include mat.pseudo-checkbox-density($scale-theme);
@include mat.progress-bar-density($scale-theme);
@include mat.progress-spinner-density($scale-theme);
@include mat.radio-density($scale-theme);
Expand Down
11 changes: 11 additions & 0 deletions src/material-experimental/theming/_custom-tokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,17 @@
);
}

/// Generates custom tokens for the app.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
/// @return {Map} A set of custom tokens for the app
@function app($systems, $exclude-hardcoded) {
@return (
background-color: map.get($systems, md-sys-color, background),
text-color: map.get($systems, md-sys-color, on-background),
);
}

/// Generates custom tokens for the mat-badge.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
Expand Down
5 changes: 5 additions & 0 deletions src/material-experimental/theming/_m3-tokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -670,6 +670,11 @@

// Choose values for our made up tokens based on MDC system tokens or sensible hardcoded
// values.
_namespace-tokens(
(mat, app),
custom-tokens.app($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, tab-indicator),
custom-tokens.tab-indicator($systems, $exclude-hardcoded),
Expand Down
123 changes: 85 additions & 38 deletions src/material/core/_core-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,37 +10,51 @@
@use './typography/typography';
@use './tokens/token-utils';
@use './tokens/m2/mat/app' as tokens-mat-app;
@use './tokens/m2/mat/ripple' as tokens-mat-ripple;
@use './tokens/m2/mat/option' as tokens-mat-option;
@use './tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
@use './tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;

@mixin base($theme) {
@include ripple-theme.base($theme);
@include option-theme.base($theme);
@include optgroup-theme.base($theme);
@include pseudo-checkbox-theme.base($theme);
// TODO(mmalerba): Move additional core base tokens here
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
}
@else {
@include ripple-theme.base($theme);
@include option-theme.base($theme);
@include optgroup-theme.base($theme);
@include pseudo-checkbox-theme.base($theme);
}
}

@mixin color($theme) {
@include ripple-theme.color($theme);
@include option-theme.color($theme);
@include optgroup-theme.color($theme);
@include pseudo-checkbox-theme.color($theme);
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values(tokens-mat-app.$prefix,
tokens-mat-app.get-color-tokens($theme));
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
}
@else {
@include ripple-theme.color($theme);
@include option-theme.color($theme);
@include optgroup-theme.color($theme);
@include pseudo-checkbox-theme.color($theme);
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values(tokens-mat-app.$prefix,
tokens-mat-app.get-color-tokens($theme));
}

// Provides external CSS classes for each elevation value. Each CSS class is formatted as
// `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
// elevated.
@for $zValue from 0 through 24 {
$selector: elevation.$prefix + $zValue;
// We need the `mat-mdc-elevation-specific`, because some MDC mixins
// come with elevation baked in and we don't have a way of removing it.
.#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
@include private.private-theme-elevation($zValue, $theme);
// Provides external CSS classes for each elevation value. Each CSS class is formatted as
// `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
// elevated.
@for $zValue from 0 through 24 {
$selector: elevation.$prefix + $zValue;
// We need the `mat-mdc-elevation-specific`, because some MDC mixins
// come with elevation baked in and we don't have a way of removing it.
.#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
@include private.private-theme-elevation($zValue, $theme);
}
}
}

// TODO(crisbeto): move this into the base.
// Marker that is used to determine whether the user has added a theme to their page.
@at-root {
.mat-theme-loaded-marker {
Expand All @@ -50,34 +64,67 @@
}

@mixin typography($theme) {
@include option-theme.typography($theme);
@include optgroup-theme.typography($theme);
@include pseudo-checkbox-theme.typography($theme);
@include ripple-theme.typography($theme);
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
}
@else {
@include option-theme.typography($theme);
@include optgroup-theme.typography($theme);
@include pseudo-checkbox-theme.typography($theme);
@include ripple-theme.typography($theme);
}
}

@mixin density($theme) {
@include option-theme.density($theme);
@include optgroup-theme.density($theme);
@include pseudo-checkbox-theme.density($theme);
@include ripple-theme.density($theme);
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
}
@else {
@include option-theme.density($theme);
@include optgroup-theme.density($theme);
@include pseudo-checkbox-theme.density($theme);
@include ripple-theme.density($theme);
}
}

// Mixin that renders all of the core styles that depend on the theme.
@mixin theme($theme) {
@mixin theme($theme, $options...) {
// Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
// there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then
// the imported themes (such as `mat-ripple-theme`) should not report again.
@include theming.private-check-duplicate-theme-styles($theme, 'mat-core') {
@include base($theme);
@if inspection.theme-has($theme, color) {
@include color($theme);
}
@if inspection.theme-has($theme, density) {
@include density($theme);
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
}
@if inspection.theme-has($theme, typography) {
@include typography($theme);
@else {
@include base($theme);
@if inspection.theme-has($theme, color) {
@include color($theme);
}
@if inspection.theme-has($theme, density) {
@include density($theme);
}
@if inspection.theme-has($theme, typography) {
@include typography($theme);
}
}
}
}

@mixin _theme-from-tokens($tokens, $options...) {
$mat-app-tokens: token-utils.get-tokens-for($tokens, tokens-mat-app.$prefix, $options...);
$mat-ripple-tokens: token-utils.get-tokens-for($tokens, tokens-mat-ripple.$prefix, $options...);
$mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...);
$mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens,
tokens-mat-full-pseudo-checkbox.$prefix, $options...);
$mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens,
tokens-mat-minimal-pseudo-checkbox.$prefix, $options...);

@include token-utils.create-token-values(tokens-mat-app.$prefix, $mat-app-tokens);
@include token-utils.create-token-values(tokens-mat-ripple.$prefix, $mat-ripple-tokens);
@include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens);
@include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix,
$mat-full-pseudo-checkbox-tokens);
@include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix,
$mat-minimal-pseudo-checkbox-tokens);
}
2 changes: 2 additions & 0 deletions src/material/core/tokens/m2/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@use 'sass:map';
@use 'sass:meta';
@use '../../style/sass-utils';
@use './mat/app' as tokens-mat-app;
@use './mat/autocomplete' as tokens-mat-autocomplete;
@use './mat/badge' as tokens-mat-badge;
@use './mat/text-button' as tokens-mat-text-button;
Expand Down Expand Up @@ -107,6 +108,7 @@
/// )
@function m2-tokens-from-theme($theme) {
@return sass-utils.deep-merge-all(
_get-tokens-for-module($theme, tokens-mat-app),
_get-tokens-for-module($theme, tokens-mat-autocomplete),
_get-tokens-for-module($theme, tokens-mat-badge),
_get-tokens-for-module($theme, tokens-mat-bottom-sheet),
Expand Down
Loading