Skip to content

Commit

Permalink
feat(color): add color folder for md-sys-color theming APIs
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 559455085
  • Loading branch information
@asyncLiz @copybara-github
asyncLiz authored and copybara-github committed Aug 23, 2023
1 parent a528393 commit cdd9b26
Show file tree
Hide file tree
Showing 4 changed files with 353 additions and 10 deletions.
193 changes: 193 additions & 0 deletions color/_color.scss
View file
Original file line number Diff line number Diff line change
@@ -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};
}
}
}
9 changes: 2 additions & 7 deletions testing/table/internal/_test-table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
@use 'sass:map';
// go/keep-sorted end
// go/keep-sorted start
@use '../../../color/color';
@use '../../../tokens';
// go/keep-sorted end

Expand Down Expand Up @@ -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;
}
}
102 changes: 101 additions & 1 deletion tokens/_md-ref-palette.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
}
Loading

0 comments on commit cdd9b26

Please sign in to comment.