Skip to content

fix(material/core): add missing system variables #29624

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

Merged
merged 1 commit into from
Aug 23, 2024
Merged

fix(material/core): add missing system variables #29624

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
113 changes: 93 additions & 20 deletions src/material/core/tokens/_m3-system.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
@use '../style/elevation';
@use '../style/sass-utils';
@use './m3-tokens';
@use '../theming/definition';
@use './m3/definitions';
@use 'sass:map';
@use 'sass:meta';
@use 'sass:list';
@use './m3-tokens';

// Prefix used for component token fallback variables, e.g.
// `color: var(--mdc-text-button-label-text-color, var(--mat-app-primary));`
Expand All @@ -11,16 +14,74 @@ $_system-fallback-prefix: mat-app;
// Default system level prefix to use when directly calling the `system-level-*` mixins
$_system-level-prefix: sys;

// Emits CSS variables for Material's system level values. Uses the
// namespace prefix in $_system-fallback-prefix.
// e.g. --mat-app-surface: #E5E5E5
@mixin theme($theme, $overrides: ()) {
@include system-level-colors($theme, $overrides, $_system-fallback-prefix);
@include system-level-typography($theme, $overrides, $_system-fallback-prefix);
@include system-level-elevation($theme, $overrides, $_system-fallback-prefix);
@include system-level-shape($theme, $overrides, $_system-fallback-prefix);
@include system-level-motion($theme, $overrides, $_system-fallback-prefix);
@include system-level-state($theme, $overrides, $_system-fallback-prefix);
/// Emits necessary CSS variables for Material's system level values for the values defined in the
/// config map. The config map can have values color, typography, and/or density.
///
/// If the config map's color value is an Angular Material color palette, it will be used as the
/// primary and tertiary colors with a light theme type. Otherwise if the color value is a map,
/// it must have a `primary` value containing an Angular Material color palette, and optionally
/// a different `tertiary` palette (defaults to primary palette) and `theme-type` that is either
/// `light` or `dark` (defaults to light). Color variable definitions will not be emitted if there
/// are no color values in the config.
///
/// If the config map's typography value is a font family string, it will be used as the
/// plain and brand font family with default bold, medium, and regular weights of 700, 500, and 400,
/// respectfully. Otherwise if the typography value is a map, it must have a `plain-family` font
/// family value, and optionally a different `brand-family` font family (defaults to the plain
/// value) and weights for `bold-weight` (default: 700), `bold-weight` (default: 500), and
/// `bold-weight` (default: 400). Typography variable definitions will not be emitted if there are
/// no typography values in the config.
///
/// If the config map's density value is a number, it will be used as the density scale. Otherwise
/// if the density value is a map, it must have a `scale` value. Density variable definitions will
/// not be emitted if there are no density values in the config.
///
/// The application variables emitted use the namespace prefix "--mat-app".
/// e.g. --mat-app-surface: #E5E5E5
///
/// @param {Map} $config The color configuration with optional keys color, typography, or density.
@mixin theme($config, $overrides: ()) {
$color: map.get($config, color);
$color-config: null;
@if ($color) {
$color-config: if(meta.type-of($color) == 'map',
definition.define-colors($color),
definition.define-colors((primary: $color)));
@include system-level-colors($color-config, $overrides, $_system-fallback-prefix);
@include system-level-elevation($color-config, $overrides, $_system-fallback-prefix);
}

$typography: map.get($config, typography);
$typography-config: null;
@if ($typography) {
$typography-config: if(meta.type-of($typography) == 'map',
definition.define-typography($typography),
definition.define-typography((plain-family: $typography)));
@include system-level-typography($typography-config, $overrides, $_system-fallback-prefix);
}

$density: map.get($config, density);
$density-config: null;
@if ($density) {
$density-config: if(meta.type-of($density) == 'map',
definition.define-density($density),
definition.define-density((scale: $density)));
$scale: map.get($density-config, _mat-theming-internals-do-not-access, density-scale);
@if ($scale != 0) {
$all-tokens: m3-tokens.generate-density-tokens($scale);
@each $component-tokens in $all-tokens {
$namespace: list.nth($component-tokens, 1);
@each $tokens in list.nth($component-tokens, 2) {
--#{list.nth($namespace, 1)}-#{list.nth($namespace, 2)}-#{
list.nth($tokens, 1)}: #{list.nth($tokens, 2)};
}
}
}
}

@include system-level-shape($overrides: $overrides, $prefix: $_system-fallback-prefix);
@include system-level-motion($overrides:$overrides, $prefix: $_system-fallback-prefix);
@include system-level-state($overrides: $overrides, $prefix: $_system-fallback-prefix);
}

@mixin system-level-colors($theme, $overrides: (), $prefix: null) {
Expand Down Expand Up @@ -50,6 +111,13 @@ $_system-level-prefix: sys;
definitions.md-sys-color-values-dark($ref),
definitions.md-sys-color-values-light($ref));

// Manually insert a subset of palette values that are used directly by components
// instead of system variables.
$sys-colors: map.set($sys-colors,
'neutral-variant20', map.get($ref, md-ref-palette, neutral-variant20));
$sys-colors: map.set($sys-colors,
'neutral10', map.get($ref, md-ref-palette, neutral10));

& {
@each $name, $value in $sys-colors {
--#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
Expand Down Expand Up @@ -84,35 +152,32 @@ $_system-level-prefix: sys;
$shadow-color: map.get(
$theme, _mat-theming-internals-do-not-access, color-tokens, (mdc, theme), shadow);

@for $level from 0 through 24 {
$value: elevation.get-box-shadow($level, $shadow-color);
--#{$prefix}-elevation-shadow-level-#{$level}: #{$value};
}

@each $name, $value in definitions.md-sys-elevation-values() {
$level: map.get($overrides, $name) or $value;
$value: elevation.get-box-shadow($level, $shadow-color);
--#{$prefix}-#{$name}: #{$value};
& {
--#{$prefix}-#{$name}: #{$value};
}
}
}

@mixin system-level-shape($theme, $overrides: (), $prefix: $_system-level-prefix) {
@mixin system-level-shape($theme: (), $overrides: (), $prefix: $_system-level-prefix) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we adding a default here? I'd be a bit concerned about apps depending doing @include mat.system-level-shape().

Copy link
Contributor Author

@andrewseguin andrewseguin Aug 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like requiring a theme config makes it seem like it does something here, but its ignored in the mixin since our themes dont actually allow this to be configured.

That said, Im not strongly opinionated about making this optional - we can leave it the way it is

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I see, the theme only has an effect in the color and typography mixins. In that case it's fine by me.

& {
@each $name, $value in definitions.md-sys-shape-values() {
--#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
}
}
}

@mixin system-level-state($theme, $overrides: (), $prefix: $_system-level-prefix) {
@mixin system-level-state($theme: (), $overrides: (), $prefix: $_system-level-prefix) {
& {
@each $name, $value in definitions.md-sys-state-values() {
--#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
}
}
}

@mixin system-level-motion($theme, $overrides: (), $prefix: $_system-level-prefix) {
@mixin system-level-motion($theme: (), $overrides: (), $prefix: $_system-level-prefix) {
& {
@each $name, $value in definitions.md-sys-motion-values() {
--#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
Expand Down Expand Up @@ -146,6 +211,14 @@ $_system-level-prefix: sys;
_create-system-app-vars-map(definitions.md-sys-state-values()),
'md-sys-shape':
_create-system-app-vars-map(definitions.md-sys-shape-values()),
// Add a subset of palette-specific colors used by components instead of system values
'md-ref-palette':
_create-system-app-vars-map(
(
neutral10: '', // Form field native select option text color
neutral-variant20: '', // Sidenav scrim (container background shadow when opened),
)
),
);

@return sass-utils.deep-merge-all(
Expand Down
1 change: 0 additions & 1 deletion src/material/core/tokens/m3/mat/_sidenav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ $prefix: (mat, sidenav);
container-text-color: map.get($systems, md-sys-color, on-surface-variant),
content-background-color: map.get($systems, md-sys-color, background),
content-text-color: map.get($systems, md-sys-color, on-background),
// TODO: This should be `md-sys-color` `scrim` but causes changes in clients.
scrim-color: sass-utils.safe-color-change(
map.get($systems, md-ref-palette, neutral-variant20), $alpha: 0.4),
);
Expand Down
Loading