mirror of
https://github.com/material-components/material-web.git
synced 2024-10-05 17:48:16 +03:00
chore: token code adjustments
PiperOrigin-RevId: 563808765
This commit is contained in:
parent
a0fca90bdf
commit
84947f0928
@ -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,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,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,
|
||||
|
@ -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',
|
||||
|
@ -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})
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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})
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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})
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user