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';
|
@use '../tokens';
|
||||||
// go/keep-sorted end
|
// 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
|
/// `color.light-theme()` emits `--md-sys-color-*` custom properties for a light
|
||||||
/// theme from the given color palette.
|
/// 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';
|
@use './values';
|
||||||
// go/keep-sorted end
|
// 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: (
|
$supported-tokens: (
|
||||||
// go/keep-sorted start
|
// go/keep-sorted start
|
||||||
'active-focus-icon-color',
|
'active-focus-icon-color',
|
||||||
@ -77,6 +69,14 @@ $unsupported-tokens: (
|
|||||||
// go/keep-sorted end
|
// 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) {
|
@function values($deps: $_default, $exclude-hardcoded-values: false) {
|
||||||
$tokens: md-comp-primary-navigation-tab.values(
|
$tokens: md-comp-primary-navigation-tab.values(
|
||||||
$deps,
|
$deps,
|
||||||
|
@ -16,14 +16,6 @@
|
|||||||
@use './values';
|
@use './values';
|
||||||
// go/keep-sorted end
|
// 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: (
|
$supported-tokens: (
|
||||||
// go/keep-sorted start
|
// go/keep-sorted start
|
||||||
'active-focus-icon-color',
|
'active-focus-icon-color',
|
||||||
@ -75,6 +67,14 @@ $unsupported-tokens: (
|
|||||||
'focus-state-layer-opacity'
|
'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) {
|
@function values($deps: $_default, $exclude-hardcoded-values: false) {
|
||||||
$tokens: md-comp-secondary-navigation-tab.values(
|
$tokens: md-comp-secondary-navigation-tab.values(
|
||||||
$deps,
|
$deps,
|
||||||
|
@ -60,15 +60,7 @@ $supported-tokens: (
|
|||||||
// go/keep-sorted end
|
// go/keep-sorted end
|
||||||
);
|
);
|
||||||
|
|
||||||
$_default: (
|
$unsupported-tokens: (
|
||||||
'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: (
|
|
||||||
'disabled-handle-opacity',
|
'disabled-handle-opacity',
|
||||||
'label-container-elevation',
|
'label-container-elevation',
|
||||||
'label-text-type',
|
'label-text-type',
|
||||||
@ -85,11 +77,19 @@ $_unsupported-tokens: (
|
|||||||
'focus-state-layer-opacity'
|
'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) {
|
@function values($deps: $_default, $exclude-hardcoded-values: false) {
|
||||||
$tokens: values.validate(
|
$tokens: values.validate(
|
||||||
md-comp-slider.values($deps, $exclude-hardcoded-values),
|
md-comp-slider.values($deps, $exclude-hardcoded-values),
|
||||||
$supported-tokens: $supported-tokens,
|
$supported-tokens: $supported-tokens,
|
||||||
$unsupported-tokens: $_unsupported-tokens,
|
$unsupported-tokens: $unsupported-tokens,
|
||||||
$renamed-tokens: (
|
$renamed-tokens: (
|
||||||
'label-label-text-color': 'label-text-color',
|
'label-label-text-color': 'label-text-color',
|
||||||
'label-label-text-type': 'label-text-type',
|
'label-label-text-type': 'label-text-type',
|
||||||
|
@ -32,8 +32,13 @@ $supported-tokens: (
|
|||||||
@if not $exclude-custom-properties {
|
@if not $exclude-custom-properties {
|
||||||
// Create --md-ref-typeface-* custom properties
|
// Create --md-ref-typeface-* custom properties
|
||||||
@each $token, $value in $tokens {
|
@each $token, $value in $tokens {
|
||||||
$var: var(--md-ref-typeface-#{$token}, #{$value});
|
@if $value != null {
|
||||||
$tokens: map.set($tokens, $token, $var);
|
$tokens: map.set(
|
||||||
|
$tokens,
|
||||||
|
$token,
|
||||||
|
var(--md-ref-typeface-#{$token}, #{$value})
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -79,8 +79,13 @@ $_default-dark: (
|
|||||||
@if not $exclude-custom-properties {
|
@if not $exclude-custom-properties {
|
||||||
// Create --md-sys-color-* custom properties
|
// Create --md-sys-color-* custom properties
|
||||||
@each $token, $value in $tokens {
|
@each $token, $value in $tokens {
|
||||||
$var: var(--md-sys-color-#{$token}, #{$value});
|
@if $value != null {
|
||||||
$tokens: map.set($tokens, $token, $var);
|
$tokens: map.set(
|
||||||
|
$tokens,
|
||||||
|
$token,
|
||||||
|
var(--md-sys-color-#{$token}, #{$value})
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -100,8 +105,13 @@ $_default-light: (
|
|||||||
@if not $exclude-custom-properties {
|
@if not $exclude-custom-properties {
|
||||||
// Create --md-sys-color-* custom properties
|
// Create --md-sys-color-* custom properties
|
||||||
@each $token, $value in $tokens {
|
@each $token, $value in $tokens {
|
||||||
$var: var(--md-sys-color-#{$token}, #{$value});
|
@if $value != null {
|
||||||
$tokens: map.set($tokens, $token, $var);
|
$tokens: map.set(
|
||||||
|
$tokens,
|
||||||
|
$token,
|
||||||
|
var(--md-sys-color-#{$token}, #{$value})
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -131,8 +131,13 @@ $_default: (
|
|||||||
@if not $exclude-custom-properties {
|
@if not $exclude-custom-properties {
|
||||||
// Create --md-sys-typescale-* custom properties
|
// Create --md-sys-typescale-* custom properties
|
||||||
@each $token, $value in $tokens {
|
@each $token, $value in $tokens {
|
||||||
$var: var(--md-sys-typescale-#{$token}, #{$value});
|
@if $value != null {
|
||||||
$tokens: map.set($tokens, $token, $var);
|
$tokens: map.set(
|
||||||
|
$tokens,
|
||||||
|
$token,
|
||||||
|
var(--md-sys-typescale-#{$token}, #{$value})
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user