mirror of
https://github.com/material-components/material-web.git
synced 2026-01-09 07:21:09 +08:00
feat(color): add color folder for md-sys-color theming APIs
PiperOrigin-RevId: 559455085
This commit is contained in:
Elizabeth Mitchell
Copybara-Service
parent
a5283936fe
commit
cdd9b264cb
193
color/_color.scss
Normal file
193
color/_color.scss
Normal file
@ -0,0 +1,193 @@
|
||||
//
|
||||
// Copyright 2023 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:list';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../tokens';
|
||||
// go/keep-sorted end
|
||||
|
||||
/// `color.light-theme()` emits `--md-sys-color-*` custom properties for a light
|
||||
/// theme from the given color palette.
|
||||
///
|
||||
/// @example scss
|
||||
/// @use 'sass:map';
|
||||
/// @use '@material/web/color/color';
|
||||
/// @use '@material/web/tokens';
|
||||
///
|
||||
/// // Tip: if only changing part of the palette, merge the default palette
|
||||
/// // values to inherit other tones (such as neutral and error tones).
|
||||
/// $my-palette: map.merge(
|
||||
/// tokens.md-ref-palette-values(),
|
||||
/// (
|
||||
/// 'primary10': /* ... */,
|
||||
/// 'primary20': /* ... */,
|
||||
/// 'primary30': /* ... */,
|
||||
/// 'primary40': /* ... */,
|
||||
/// 'primary50': /* ... */,
|
||||
/// 'primary60': /* ... */,
|
||||
/// 'primary70': /* ... */,
|
||||
/// 'primary80': /* ... */,
|
||||
/// 'primary90': /* ... */,
|
||||
/// 'primary95': /* ... */,
|
||||
/// 'primary99': /* ... */,
|
||||
/// // Opt: palette values for:
|
||||
/// // - secondary
|
||||
/// // - tertiary
|
||||
/// // - error
|
||||
/// // - neutral
|
||||
/// // - neutral-variant
|
||||
/// ),
|
||||
/// );
|
||||
///
|
||||
/// :root {
|
||||
/// @include color.light-theme($my-palette);
|
||||
/// }
|
||||
///
|
||||
/// /* 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 palette, use the Material Theme Builder Figma plugin.
|
||||
///
|
||||
/// @link https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder
|
||||
///
|
||||
/// @param {Map} $md-ref-palette - A map of Material palette keys and their
|
||||
/// values.
|
||||
/// @output Emits `--md-sys-color-*` custom properties for a light theme with
|
||||
/// the given palette.
|
||||
@mixin light-theme($md-ref-palette: tokens.md-ref-palette-values()) {
|
||||
@each $token, $value in $md-ref-palette {
|
||||
@if list.index(tokens.$md-ref-palette-supported-tokens, $token) == null {
|
||||
@error 'md-ref-palette `#{$token}` is not a supported token.';
|
||||
}
|
||||
}
|
||||
|
||||
@include theme(
|
||||
tokens.md-sys-color-values-light(
|
||||
(
|
||||
'md-ref-palette': $md-ref-palette,
|
||||
),
|
||||
$exclude-custom-properties: true
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/// `color.dark-theme()` emits `--md-sys-color-*` custom properties for a dark
|
||||
/// theme from the given color palette.
|
||||
///
|
||||
/// @example scss
|
||||
/// @use 'sass:map';
|
||||
/// @use '@material/web/color/color';
|
||||
/// @use '@material/web/tokens';
|
||||
///
|
||||
/// // Tip: if only changing part of the palette, merge the default palette
|
||||
/// // values to inherit other tones (such as neutral and error tones).
|
||||
/// $my-palette: map.merge(
|
||||
/// tokens.md-ref-palette-values(),
|
||||
/// (
|
||||
/// 'primary10': /* ... */,
|
||||
/// 'primary20': /* ... */,
|
||||
/// 'primary30': /* ... */,
|
||||
/// 'primary40': /* ... */,
|
||||
/// 'primary50': /* ... */,
|
||||
/// 'primary60': /* ... */,
|
||||
/// 'primary70': /* ... */,
|
||||
/// 'primary80': /* ... */,
|
||||
/// 'primary90': /* ... */,
|
||||
/// 'primary95': /* ... */,
|
||||
/// 'primary99': /* ... */,
|
||||
/// // Opt: palette values for:
|
||||
/// // - secondary
|
||||
/// // - tertiary
|
||||
/// // - error
|
||||
/// // - neutral
|
||||
/// // - neutral-variant
|
||||
/// ),
|
||||
/// );
|
||||
///
|
||||
/// @media (prefers-color-scheme: dark) {
|
||||
/// @include color.dark-theme($my-palette);
|
||||
/// }
|
||||
///
|
||||
/// /* Generated CSS */
|
||||
/// @media (prefers-color-scheme: dark) {
|
||||
/// --md-sys-color-primary: /* ... */;
|
||||
/// --md-sys-color-primary-container: /* ... */;
|
||||
/// --md-sys-color-primary-fixed: /* ... */;
|
||||
/// --md-sys-color-primary-fixed-dim: /* ... */;
|
||||
/// /* ... */
|
||||
/// }
|
||||
///
|
||||
/// To generate a palette, use the Material Theme Builder Figma plugin.
|
||||
///
|
||||
/// @link https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder
|
||||
///
|
||||
/// @param {Map} $md-ref-palette - A map of Material palette keys and their
|
||||
/// values.
|
||||
/// @output Emits `--md-sys-color-*` custom properties for a dark theme with
|
||||
/// the given palette.
|
||||
@mixin dark-theme($md-ref-palette: tokens.md-ref-palette-values()) {
|
||||
@each $token, $value in $md-ref-palette {
|
||||
@if list.index(tokens.$md-ref-palette-supported-tokens, $token) == null {
|
||||
@error 'md-ref-palette `#{$token}` is not a supported token.';
|
||||
}
|
||||
}
|
||||
|
||||
@include theme(
|
||||
tokens.md-sys-color-values-dark(
|
||||
(
|
||||
'md-ref-palette': $md-ref-palette,
|
||||
),
|
||||
$exclude-custom-properties: true
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/// `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};
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -10,6 +10,7 @@
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../../../color/color';
|
||||
@use '../../../tokens';
|
||||
// go/keep-sorted end
|
||||
|
||||
@ -96,12 +97,6 @@ $dark-theme: tokens.md-comp-test-table-values(
|
||||
}
|
||||
|
||||
:host([dark]) {
|
||||
$dark: tokens.md-sys-color-values-dark(
|
||||
$exclude-custom-properties: true,
|
||||
);
|
||||
|
||||
@each $token, $value in $dark {
|
||||
--md-sys-color-#{$token}: #{$value};
|
||||
}
|
||||
@include color.dark-theme;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,8 +5,108 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use './v0_172/md-ref-palette';
|
||||
@use './values';
|
||||
// go/keep-sorted end
|
||||
|
||||
$supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'black',
|
||||
'error0',
|
||||
'error10',
|
||||
'error100',
|
||||
'error20',
|
||||
'error30',
|
||||
'error40',
|
||||
'error50',
|
||||
'error60',
|
||||
'error70',
|
||||
'error80',
|
||||
'error90',
|
||||
'error95',
|
||||
'error99',
|
||||
'neutral-variant0',
|
||||
'neutral-variant10',
|
||||
'neutral-variant100',
|
||||
'neutral-variant20',
|
||||
'neutral-variant30',
|
||||
'neutral-variant40',
|
||||
'neutral-variant50',
|
||||
'neutral-variant60',
|
||||
'neutral-variant70',
|
||||
'neutral-variant80',
|
||||
'neutral-variant90',
|
||||
'neutral-variant95',
|
||||
'neutral-variant99',
|
||||
'neutral0',
|
||||
'neutral10',
|
||||
'neutral100',
|
||||
'neutral12',
|
||||
'neutral17',
|
||||
'neutral20',
|
||||
'neutral22',
|
||||
'neutral24',
|
||||
'neutral30',
|
||||
'neutral4',
|
||||
'neutral40',
|
||||
'neutral50',
|
||||
'neutral6',
|
||||
'neutral60',
|
||||
'neutral70',
|
||||
'neutral80',
|
||||
'neutral87',
|
||||
'neutral90',
|
||||
'neutral92',
|
||||
'neutral94',
|
||||
'neutral95',
|
||||
'neutral96',
|
||||
'neutral98',
|
||||
'neutral99',
|
||||
'primary0',
|
||||
'primary10',
|
||||
'primary100',
|
||||
'primary20',
|
||||
'primary30',
|
||||
'primary40',
|
||||
'primary50',
|
||||
'primary60',
|
||||
'primary70',
|
||||
'primary80',
|
||||
'primary90',
|
||||
'primary95',
|
||||
'primary99',
|
||||
'secondary0',
|
||||
'secondary10',
|
||||
'secondary100',
|
||||
'secondary20',
|
||||
'secondary30',
|
||||
'secondary40',
|
||||
'secondary50',
|
||||
'secondary60',
|
||||
'secondary70',
|
||||
'secondary80',
|
||||
'secondary90',
|
||||
'secondary95',
|
||||
'secondary99',
|
||||
'tertiary0',
|
||||
'tertiary10',
|
||||
'tertiary100',
|
||||
'tertiary20',
|
||||
'tertiary30',
|
||||
'tertiary40',
|
||||
'tertiary50',
|
||||
'tertiary60',
|
||||
'tertiary70',
|
||||
'tertiary80',
|
||||
'tertiary90',
|
||||
'tertiary95',
|
||||
'tertiary99',
|
||||
'white',
|
||||
// go/keep-sorted end
|
||||
);
|
||||
|
||||
@function values($exclude-hardcoded-values: false) {
|
||||
@return md-ref-palette.values($exclude-hardcoded-values);
|
||||
@return values.validate(
|
||||
md-ref-palette.values($exclude-hardcoded-values),
|
||||
$supported-tokens: $supported-tokens
|
||||
);
|
||||
}
|
||||
|
||||
@ -9,8 +9,63 @@
|
||||
// go/keep-sorted start
|
||||
@use './md-ref-palette';
|
||||
@use './v0_172/md-sys-color';
|
||||
@use './values';
|
||||
// go/keep-sorted end
|
||||
|
||||
$supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'background',
|
||||
'error',
|
||||
'error-container',
|
||||
'inverse-on-surface',
|
||||
'inverse-primary',
|
||||
'inverse-surface',
|
||||
'on-background',
|
||||
'on-error',
|
||||
'on-error-container',
|
||||
'on-primary',
|
||||
'on-primary-container',
|
||||
'on-primary-fixed',
|
||||
'on-primary-fixed-variant',
|
||||
'on-secondary',
|
||||
'on-secondary-container',
|
||||
'on-secondary-fixed',
|
||||
'on-secondary-fixed-variant',
|
||||
'on-surface',
|
||||
'on-surface-variant',
|
||||
'on-tertiary',
|
||||
'on-tertiary-container',
|
||||
'on-tertiary-fixed',
|
||||
'on-tertiary-fixed-variant',
|
||||
'outline',
|
||||
'outline-variant',
|
||||
'primary',
|
||||
'primary-container',
|
||||
'primary-fixed',
|
||||
'primary-fixed-dim',
|
||||
'scrim',
|
||||
'secondary',
|
||||
'secondary-container',
|
||||
'secondary-fixed',
|
||||
'secondary-fixed-dim',
|
||||
'shadow',
|
||||
'surface',
|
||||
'surface-bright',
|
||||
'surface-container',
|
||||
'surface-container-high',
|
||||
'surface-container-highest',
|
||||
'surface-container-low',
|
||||
'surface-container-lowest',
|
||||
'surface-dim',
|
||||
'surface-tint',
|
||||
'surface-variant',
|
||||
'tertiary',
|
||||
'tertiary-container',
|
||||
'tertiary-fixed',
|
||||
'tertiary-fixed-dim',
|
||||
// go/keep-sorted end
|
||||
);
|
||||
|
||||
$_default-dark: (
|
||||
'md-ref-palette': md-ref-palette.values(),
|
||||
);
|
||||
@ -29,7 +84,7 @@ $_default-dark: (
|
||||
}
|
||||
}
|
||||
|
||||
@return $tokens;
|
||||
@return values.validate($tokens, $supported-tokens: $supported-tokens);
|
||||
}
|
||||
|
||||
$_default-light: (
|
||||
@ -50,5 +105,5 @@ $_default-light: (
|
||||
}
|
||||
}
|
||||
|
||||
@return $tokens;
|
||||
@return values.validate($tokens, $supported-tokens: $supported-tokens);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user