From a5283936fedd8da92af994fa0d721e07bc2686c4 Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Tue, 22 Aug 2023 17:21:32 -0700 Subject: [PATCH] revert: feat(color): add color folder for md-sys-color theming APIs PiperOrigin-RevId: 559268365 --- color/_color.scss | 193 ------------------------ testing/table/internal/_test-table.scss | 9 +- tokens/_md-ref-palette.scss | 102 +------------ tokens/_md-sys-color.scss | 59 +------- 4 files changed, 10 insertions(+), 353 deletions(-) delete mode 100644 color/_color.scss diff --git a/color/_color.scss b/color/_color.scss deleted file mode 100644 index 1bd5ff52c9..0000000000 --- a/color/_color.scss +++ /dev/null @@ -1,193 +0,0 @@ -// -// 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}; - } - } -} diff --git a/testing/table/internal/_test-table.scss b/testing/table/internal/_test-table.scss index 0c2b5e2e05..4a2343a8b1 100644 --- a/testing/table/internal/_test-table.scss +++ b/testing/table/internal/_test-table.scss @@ -10,7 +10,6 @@ @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start -@use '../../../color/color'; @use '../../../tokens'; // go/keep-sorted end @@ -97,6 +96,12 @@ $dark-theme: tokens.md-comp-test-table-values( } :host([dark]) { - @include color.dark-theme; + $dark: tokens.md-sys-color-values-dark( + $exclude-custom-properties: true, + ); + + @each $token, $value in $dark { + --md-sys-color-#{$token}: #{$value}; + } } } diff --git a/tokens/_md-ref-palette.scss b/tokens/_md-ref-palette.scss index 4d3609ec43..9a9beb54bf 100644 --- a/tokens/_md-ref-palette.scss +++ b/tokens/_md-ref-palette.scss @@ -5,108 +5,8 @@ // 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 values.validate( - md-ref-palette.values($exclude-hardcoded-values), - $supported-tokens: $supported-tokens - ); + @return md-ref-palette.values($exclude-hardcoded-values); } diff --git a/tokens/_md-sys-color.scss b/tokens/_md-sys-color.scss index 6c38fa6e81..20f40cf01b 100644 --- a/tokens/_md-sys-color.scss +++ b/tokens/_md-sys-color.scss @@ -9,63 +9,8 @@ // 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(), ); @@ -84,7 +29,7 @@ $_default-dark: ( } } - @return values.validate($tokens, $supported-tokens: $supported-tokens); + @return $tokens; } $_default-light: ( @@ -105,5 +50,5 @@ $_default-light: ( } } - @return values.validate($tokens, $supported-tokens: $supported-tokens); + @return $tokens; }