material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-07-07 10:06:44 +03:00
Code Issues Projects Releases Wiki Activity

chore: token code adjustments

Browse Source 
PiperOrigin-RevId: 563808765
This commit is contained in:
Elizabeth Mitchell 2023-09-08 11:37:26 -07:00 committed by Copybara-Service
parent a0fca90bdf
commit 84947f0928
7 changed files with 98 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
color/_color.scss
View File

@ -10,6 +10,50 @@
@use '../tokens';
// go/keep-sorted end
/// `color.theme()` emits `--md-sys-color-*` custom properties for a given color
/// scheme.
///
/// @example scss
/// @use '@material/web/color/color';
///
/// :root {
/// @include color.theme(
/// 'primary': /* ... */,
/// 'primary-container': /* ... */,
/// 'primary-fixed': /* ... */,
/// 'primary-fixed-dim': /* ... */,
/// /* ... */
/// );
/// }
///
/// /* Generated CSS */
/// :root {
/// --md-sys-color-primary: /* ... */;
/// --md-sys-color-primary-container: /* ... */;
/// --md-sys-color-primary-fixed: /* ... */;
/// --md-sys-color-primary-fixed-dim: /* ... */;
/// /* ... */
/// }
///
/// To generate a color scheme, use the Material Theme Builder Figma plugin.
///
/// @link https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder
///
/// @param {Map} $tokens - A Map with `md-sys-color` token name keys and their
/// corresponding values.
/// @output Emits `--md-sys-color-*` custom properties for a given color scheme.
@mixin theme($tokens) {
@each $token, $value in $tokens {
@if list.index(tokens.$md-sys-color-supported-tokens, $token) == null {
@error 'md-sys-color `#{$token}` is not a supported token.';
}
@if $value {
--md-sys-color-#{$token}: #{$value};
}
}
}
/// `color.light-theme()` emits `--md-sys-color-*` custom properties for a light
/// theme from the given color palette.
///
@ -151,43 +195,3 @@
)
);
}
/// `color.theme()` emits `--md-sys-color-*` custom properties for a given color
/// scheme.
///
/// @example scss
/// @use '@material/web/color/color';
///
/// :root {
/// @include color.theme(
/// 'primary': /* ... */,
/// 'primary-container': /* ... */,
/// 'primary-fixed': /* ... */,
/// 'primary-fixed-dim': /* ... */,
/// /* ... */
/// );
/// }
///
/// /* Generated CSS */
/// :root {
/// --md-sys-color-primary: /* ... */;
/// --md-sys-color-primary-container: /* ... */;
/// --md-sys-color-primary-fixed: /* ... */;
/// --md-sys-color-primary-fixed-dim: /* ... */;
/// /* ... */
/// }
///
/// @param {Map} $tokens - A Map with `md-sys-color` token name keys and their
/// corresponding values.
/// @output Emits `--md-sys-color-*` custom properties for a given color scheme.
@mixin theme($tokens) {
@each $token, $value in $tokens {
@if list.index(tokens.$md-sys-color-supported-tokens, $token) == null {
@error 'md-sys-color `#{$token}` is not a supported token.';
}
@if $value {
--md-sys-color-#{$token}: #{$value};
}
}
}

16
tokens/_md-comp-primary-tab.scss
View File

@ -16,14 +16,6 @@
@use './values';
// go/keep-sorted end
$_default: (
'md-sys-color': md-sys-color.values-light(),
'md-sys-elevation': md-sys-elevation.values(),
'md-sys-shape': md-sys-shape.values(),
'md-sys-state': md-sys-state.values(),
'md-sys-typescale': md-sys-typescale.values(),
);
$supported-tokens: (
// go/keep-sorted start
'active-focus-icon-color',
@ -77,6 +69,14 @@ $unsupported-tokens: (
// go/keep-sorted end
);
$_default: (
'md-sys-color': md-sys-color.values-light(),
'md-sys-elevation': md-sys-elevation.values(),
'md-sys-shape': md-sys-shape.values(),
'md-sys-state': md-sys-state.values(),
'md-sys-typescale': md-sys-typescale.values(),
);
@function values($deps: $_default, $exclude-hardcoded-values: false) {
$tokens: md-comp-primary-navigation-tab.values(
$deps,

16
tokens/_md-comp-secondary-tab.scss
View File

@ -16,14 +16,6 @@
@use './values';
// go/keep-sorted end
$_default: (
'md-sys-color': md-sys-color.values-light(),
'md-sys-elevation': md-sys-elevation.values(),
'md-sys-shape': md-sys-shape.values(),
'md-sys-state': md-sys-state.values(),
'md-sys-typescale': md-sys-typescale.values(),
);
$supported-tokens: (
// go/keep-sorted start
'active-focus-icon-color',
@ -75,6 +67,14 @@ $unsupported-tokens: (
'focus-state-layer-opacity'
);
$_default: (
'md-sys-color': md-sys-color.values-light(),
'md-sys-elevation': md-sys-elevation.values(),
'md-sys-shape': md-sys-shape.values(),
'md-sys-state': md-sys-state.values(),
'md-sys-typescale': md-sys-typescale.values(),
);
@function values($deps: $_default, $exclude-hardcoded-values: false) {
$tokens: md-comp-secondary-navigation-tab.values(
$deps,

20
tokens/_md-comp-slider.scss
View File

@ -60,15 +60,7 @@ $supported-tokens: (
// go/keep-sorted end
);
$_default: (
'md-sys-color': md-sys-color.values-light(),
'md-sys-elevation': md-sys-elevation.values(),
'md-sys-shape': md-sys-shape.values(),
'md-sys-state': md-sys-state.values(),
'md-sys-typescale': md-sys-typescale.values(),
);
$_unsupported-tokens: (
$unsupported-tokens: (
'disabled-handle-opacity',
'label-container-elevation',
'label-text-type',
@ -85,11 +77,19 @@ $_unsupported-tokens: (
'focus-state-layer-opacity'
);
$_default: (
'md-sys-color': md-sys-color.values-light(),
'md-sys-elevation': md-sys-elevation.values(),
'md-sys-shape': md-sys-shape.values(),
'md-sys-state': md-sys-state.values(),
'md-sys-typescale': md-sys-typescale.values(),
);
@function values($deps: $_default, $exclude-hardcoded-values: false) {
$tokens: values.validate(
md-comp-slider.values($deps, $exclude-hardcoded-values),
$supported-tokens: $supported-tokens,
$unsupported-tokens: $_unsupported-tokens,
$unsupported-tokens: $unsupported-tokens,
$renamed-tokens: (
'label-label-text-color': 'label-text-color',
'label-label-text-type': 'label-text-type',

9
tokens/_md-ref-typeface.scss
View File

@ -32,8 +32,13 @@ $supported-tokens: (
@if not $exclude-custom-properties {
// Create --md-ref-typeface-* custom properties
@each $token, $value in $tokens {
$var: var(--md-ref-typeface-#{$token}, #{$value});
$tokens: map.set($tokens, $token, $var);
@if $value != null {
$tokens: map.set(
$tokens,
$token,
var(--md-ref-typeface-#{$token}, #{$value})
);
}
}
}

18
tokens/_md-sys-color.scss
View File

@ -79,8 +79,13 @@ $_default-dark: (
@if not $exclude-custom-properties {
// Create --md-sys-color-* custom properties
@each $token, $value in $tokens {
$var: var(--md-sys-color-#{$token}, #{$value});
$tokens: map.set($tokens, $token, $var);
@if $value != null {
$tokens: map.set(
$tokens,
$token,
var(--md-sys-color-#{$token}, #{$value})
);
}
}
}
@ -100,8 +105,13 @@ $_default-light: (
@if not $exclude-custom-properties {
// Create --md-sys-color-* custom properties
@each $token, $value in $tokens {
$var: var(--md-sys-color-#{$token}, #{$value});
$tokens: map.set($tokens, $token, $var);
@if $value != null {
$tokens: map.set(
$tokens,
$token,
var(--md-sys-color-#{$token}, #{$value})
);
}
}
}

9
tokens/_md-sys-typescale.scss
View File

@ -131,8 +131,13 @@ $_default: (
@if not $exclude-custom-properties {
// Create --md-sys-typescale-* custom properties
@each $token, $value in $tokens {
$var: var(--md-sys-typescale-#{$token}, #{$value});
$tokens: map.set($tokens, $token, $var);
@if $value != null {
$tokens: map.set(
$tokens,
$token,
var(--md-sys-typescale-#{$token}, #{$value})
);
}
}
}