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/card): move tokens to component directory #30650

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

fix(material/card): move tokens to component directory #30650

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
7 changes: 3 additions & 4 deletions src/material/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -23,7 +23,6 @@
system-level-motion, system-level-state, theme, theme-overrides;

// Private/Internal
@forward './core/density/private/all-density' show all-component-densities;
@forward './core/theming/theming' show private-check-duplicate-theme-styles,
private-legacy-get-theme, private-is-theme-object;
@forward './core/style/private' show private-theme-elevation;
@@ -42,9 +41,9 @@
@forward './core/style/elevation' show elevation, overridable-elevation, elevation-transition;

// Theme bundles
@forward './core/theming/all-theme' show all-component-themes, all-component-bases;
@forward './core/color/all-color' show all-component-colors;
@forward './core/typography/all-typography' show all-component-typographies;
@forward './core/theming/all-theme' show
all-component-themes, all-component-bases, all-component-colors,
all-component-typographies, all-component-densities;

// Component themes
@forward './core/core-theme' as core-* show core-color, core-theme, core-typography, core-density,
12 changes: 12 additions & 0 deletions src/material/card/BUILD.bazel
View file
Original file line number Diff line number Diff line change
@@ -33,10 +33,22 @@ sass_library(
],
)

sass_library(
name = "tokens_scss_lib",
srcs = [
"_m2-tokens.scss",
"_m3-tokens.scss",
],
deps = [
"//src/material/core:core_scss_lib",
],
)

sass_binary(
name = "card_scss",
src = "card.scss",
deps = [
":tokens_scss_lib",
"//src/material/core:core_scss_lib",
],
)
151 changes: 53 additions & 98 deletions src/material/card/_card-theme.scss
View file
Original file line number Diff line number Diff line change
@@ -2,92 +2,62 @@
@use '../core/style/sass-utils';
@use '../core/theming/theming';
@use '../core/theming/inspection';
@use '../core/theming/validation';
@use '../core/typography/typography';
@use '../core/tokens/token-utils';
@use '../core/tokens/m2/mat/card' as tokens-mat-card;
@use '../core/tokens/m2/mdc/elevated-card' as tokens-mdc-elevated-card;
@use '../core/tokens/m2/mdc/outlined-card' as tokens-mdc-outlined-card;
@use 'm2-tokens' as m2-tokens;
@use 'm3-tokens' as m3-tokens;

@mixin base($theme) {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
@include token-utils.define-token-values(
m3-tokens.get-unthemable-tokens($theme)
);
} @else {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values-mixed(
tokens-mdc-elevated-card.$prefix,
tokens-mdc-elevated-card.get-unthemable-tokens()
);
@include token-utils.create-token-values-mixed(
tokens-mdc-outlined-card.$prefix,
tokens-mdc-outlined-card.get-unthemable-tokens()
);
@include token-utils.create-token-values-mixed(
tokens-mat-card.$prefix,
tokens-mat-card.get-unthemable-tokens()
@include token-utils.define-token-values-mixed(
m2-tokens.get-unthemable-tokens()
);
}
}
}

@mixin color($theme) {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
@include token-utils.define-token-values(
m3-tokens.get-color-tokens($theme)
);
} @else {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values-mixed(
tokens-mdc-elevated-card.$prefix,
tokens-mdc-elevated-card.get-color-tokens($theme)
);
@include token-utils.create-token-values-mixed(
tokens-mdc-outlined-card.$prefix,
tokens-mdc-outlined-card.get-color-tokens($theme)
);
@include token-utils.create-token-values-mixed(
tokens-mat-card.$prefix,
tokens-mat-card.get-color-tokens($theme)
@include token-utils.define-token-values-mixed(
m2-tokens.get-color-tokens($theme)
);
}
}
}

@mixin typography($theme) {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
@include token-utils.define-token-values(
m3-tokens.get-typography-tokens($theme)
);
} @else {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values-mixed(
tokens-mdc-elevated-card.$prefix,
tokens-mdc-elevated-card.get-typography-tokens($theme)
);
@include token-utils.create-token-values-mixed(
tokens-mdc-outlined-card.$prefix,
tokens-mdc-outlined-card.get-typography-tokens($theme)
);
@include token-utils.create-token-values-mixed(
tokens-mat-card.$prefix,
tokens-mat-card.get-typography-tokens($theme)
@include token-utils.define-token-values-mixed(
m2-tokens.get-typography-tokens($theme)
);
}
}
}

@mixin density($theme) {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
@include token-utils.define-token-values(
m3-tokens.get-density-tokens($theme)
);
} @else {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values-mixed(
tokens-mdc-elevated-card.$prefix,
tokens-mdc-elevated-card.get-density-tokens($theme)
);
@include token-utils.create-token-values-mixed(
tokens-mdc-outlined-card.$prefix,
tokens-mdc-outlined-card.get-density-tokens($theme)
);
@include token-utils.create-token-values-mixed(
tokens-mat-card.$prefix,
tokens-mat-card.get-density-tokens($theme)
@include token-utils.define-token-values-mixed(
m2-tokens.get-density-tokens($theme)
);
}
}
@@ -97,61 +67,46 @@
@function _define-overrides() {
@return (
(
namespace: tokens-mat-card.$prefix,
tokens: tokens-mat-card.get-token-slots(),
),
(
namespace: tokens-mdc-elevated-card.$prefix,
tokens: tokens-mdc-elevated-card.get-token-slots(),
prefix: 'elevated-',
),
(
namespace: tokens-mdc-outlined-card.$prefix,
tokens: tokens-mdc-outlined-card.get-token-slots(),
prefix: 'outlined-',
namespace: (mat),
tokens: m3-tokens.get-system-fallbacks(),
overrideTransforms: $overrideTransforms,
),
);
}

/// Map of override keys that should be transformed to their corresponding token name
$overrideTransforms: (
elevated-container-shape: elevated-card-container-shape,
outlined-container-shape: outlined-card-container-shape,
outlined-outline-width: outlined-card-outline-width,
elevated-container-color: elevated-card-container-color,
elevated-container-elevation: elevated-card-container-elevation,
outlined-container-color: outlined-card-container-color,
outlined-outline-color: outlined-card-outline-color,
outlined-container-elevation: outlined-card-container-elevation
);

@mixin overrides($tokens: ()) {
@include token-utils.batch-create-token-values($tokens, _define-overrides()...);
$override-tokens: ();
@each $key, $value in $tokens {
$token: map.get($overrideTransforms, $key) or $key;
$override-tokens: map.set($override-tokens, $token, $value);
}

@include token-utils.batch-create-token-values($override-tokens, _define-overrides()...);
}

@mixin theme($theme) {
@include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($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);
}
@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) {
@include validation.selector-defined(
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
);
@if ($tokens != ()) {
@include token-utils.create-token-values(
tokens-mdc-elevated-card.$prefix,
map.get($tokens, tokens-mdc-elevated-card.$prefix)
);
@include token-utils.create-token-values(
tokens-mdc-outlined-card.$prefix,
map.get($tokens, tokens-mdc-outlined-card.$prefix)
);
@include token-utils.create-token-values(
tokens-mat-card.$prefix,
map.get($tokens, tokens-mat-card.$prefix)
);
}
}
47 changes: 47 additions & 0 deletions src/material/card/_m2-tokens.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
@use '../core/theming/inspection';
@use '../core/style/elevation';

// Tokens that can't be configured through Angular Material's current theming API,
// but may be in a future version of the theming API.
@function get-unthemable-tokens() {
@return (
elevated-card-container-shape: 4px,
outlined-card-container-shape: 4px,
outlined-card-outline-width: 1px,
);
}

// Tokens that can be configured through Angular Material's color theming API.
@function get-color-tokens($theme) {
@return (
card-subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
elevated-card-container-color: inspection.get-theme-color($theme, background, card),
elevated-card-container-elevation: elevation.get-box-shadow(1),
outlined-card-container-color: inspection.get-theme-color($theme, background, card),
outlined-card-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
outlined-card-container-elevation: elevation.get-box-shadow(0),
);
}

// Tokens that can be configured through Angular Material's typography theming API.
@function get-typography-tokens($theme) {
@return (
card-title-text-font: inspection.get-theme-typography($theme, headline-6, font-family),
card-title-text-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
card-title-text-size: inspection.get-theme-typography($theme, headline-6, font-size),
card-title-text-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
card-title-text-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
card-subtitle-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
card-subtitle-text-line-height:
inspection.get-theme-typography($theme, subtitle-2, line-height),
card-subtitle-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
card-subtitle-text-tracking:
inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
card-subtitle-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
);
}

// Tokens that can be configured through Angular Material's density theming API.
@function get-density-tokens($theme) {
@return ();
}
63 changes: 63 additions & 0 deletions src/material/card/_m3-tokens.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
@use 'sass:map';
@use '../core/style/sass-utils';
@use '../core/tokens/token-definition';
@use '../core/tokens/m3-system';
@use '../core/style/elevation';

// Tokens that can't be configured through Angular Material's current theming API,
// but may be in a future version of the theming API.
@function get-unthemable-tokens($theme) {
$systems: map.get($theme, _mat-theming-internals-do-not-access, system);
@return (
elevated-card-container-shape: map.get($systems, md-sys-shape, corner-medium),
outlined-card-container-shape: map.get($systems, md-sys-shape, corner-medium),
outlined-card-outline-width: 1px,
);
}

// Tokens that can be configured through Angular Material's color theming API.
@function get-color-tokens($theme) {
$systems: map.get($theme, _mat-theming-internals-do-not-access, system);
$tokens: (
card-subtitle-text-color: map.get($systems, md-sys-color, on-surface),
elevated-card-container-color: map.get($systems, md-sys-color, surface-container-low),
elevated-card-container-elevation: map.get($systems, md-sys-elevation, level1),
outlined-card-container-color: map.get($systems, md-sys-color, surface),
outlined-card-outline-color: map.get($systems, md-sys-color, outline-variant),
outlined-card-container-elevation: map.get($systems, md-sys-elevation, level0),
);

$elevation: map.get($tokens, elevated-card-container-elevation);

@if ($elevation != null) {
$tokens: map.set(
$tokens, elevated-card-container-elevation, elevation.get-box-shadow($elevation));
}

@return $tokens;
}

// Tokens that can be configured through Angular Material's typography theming API.
@function get-typography-tokens($theme) {
$systems: map.get($theme, _mat-theming-internals-do-not-access, system);
@return sass-utils.merge-all(
token-definition.generate-typography-tokens($systems, card-title-text, title-large),
token-definition.generate-typography-tokens($systems, card-subtitle-text, title-medium),
);
}

// Tokens that can be configured through Angular Material's density theming API.
@function get-density-tokens($theme) {
@return ();
}

// Combines the tokens generated by the above functions into a single map with M3 system fallbacks.
// This is used to create token slots.
@function get-system-fallbacks() {
@return sass-utils.deep-merge-all(
get-unthemable-tokens(m3-system.$system-var-theme),
get-color-tokens(m3-system.$system-var-theme),
get-typography-tokens(m3-system.$system-var-theme),
get-density-tokens(m3-system.$system-var-theme)
);
}
Loading