diff --git a/src/material/core/tokens/m2/BUILD.bazel b/src/material/core/tokens/m2/BUILD.bazel index 945d36b686e2..63455be98ea9 100644 --- a/src/material/core/tokens/m2/BUILD.bazel +++ b/src/material/core/tokens/m2/BUILD.bazel @@ -7,6 +7,7 @@ sass_library( srcs = [ "_index.scss", "_md-sys-color.scss", + "_md-sys-color-internal.scss", "_md-sys-elevation.scss", "_md-sys-motion.scss", "_md-sys-shape.scss", diff --git a/src/material/core/tokens/m2/_md-sys-color-internal.scss b/src/material/core/tokens/m2/_md-sys-color-internal.scss new file mode 100644 index 000000000000..110beea741ba --- /dev/null +++ b/src/material/core/tokens/m2/_md-sys-color-internal.scss @@ -0,0 +1,11 @@ +// Dark system color values that are google3-internal and diverge from the +// external Material Design spec. +@function values-dark($palettes) { + @return (); +} + +// Light system color values that are google3-internal and diverge from the +// external Material Design spec. +@function values-light($palettes) { + @return (); +} diff --git a/src/material/core/tokens/m2/_md-sys-color.scss b/src/material/core/tokens/m2/_md-sys-color.scss index c6b6f61505ec..fb1321cb2451 100644 --- a/src/material/core/tokens/m2/_md-sys-color.scss +++ b/src/material/core/tokens/m2/_md-sys-color.scss @@ -1,8 +1,9 @@ @use 'sass:map'; @use '../../m2/palette'; +@use './md-sys-color-internal'; @function md-sys-color-values-dark($palettes) { - @return ( + $values: ( primary: map.get($palettes, primary, default), on-primary: map.get($palettes, primary, default-contrast), inverse-primary: map.get($palettes, primary, 600), @@ -55,10 +56,14 @@ tertiary-fixed: map.get($palettes, accent, default), tertiary-fixed-dim: map.get($palettes, accent, default), ); + + $values: map.merge($values, md-sys-color-internal.values-dark($palettes)); + + @return $values; } @function md-sys-color-values-light($palettes) { - @return ( + $values: ( primary: map.get($palettes, primary, default), on-primary: map.get($palettes, primary, default-contrast), inverse-primary: map.get($palettes, primary, 300), @@ -111,4 +116,8 @@ tertiary-fixed: map.get($palettes, accent, default), tertiary-fixed-dim: map.get($palettes, accent, default), ); + + $values: map.merge($values, md-sys-color-internal.values-light($palettes)); + + @return $values; } diff --git a/src/material/core/tokens/m3/BUILD.bazel b/src/material/core/tokens/m3/BUILD.bazel index 31e685cc1945..df8965ff357a 100644 --- a/src/material/core/tokens/m3/BUILD.bazel +++ b/src/material/core/tokens/m3/BUILD.bazel @@ -7,11 +7,13 @@ sass_library( srcs = [ "_index.scss", "_md-sys-color.scss", + "_md-sys-color-internal.scss", "_md-sys-elevation.scss", "_md-sys-motion.scss", "_md-sys-shape.scss", "_md-sys-state.scss", "_md-sys-typescale.scss", + "_md-sys-typescale-internal.scss", "_theme.scss", ], ) diff --git a/src/material/core/tokens/m3/_md-sys-color-internal.scss b/src/material/core/tokens/m3/_md-sys-color-internal.scss new file mode 100644 index 000000000000..e21b8fde76e0 --- /dev/null +++ b/src/material/core/tokens/m3/_md-sys-color-internal.scss @@ -0,0 +1,11 @@ +// Dark system color values that are internal-only and diverge from the +// external Material Design spec. +@function values-dark($palettes) { + @return (); +} + +// Light system color values that are internal-only and diverge from the +// external Material Design spec. +@function values-light($palettes) { + @return (); +} diff --git a/src/material/core/tokens/m3/_md-sys-color.scss b/src/material/core/tokens/m3/_md-sys-color.scss index 55f59cd2803f..b97fe7eae9d4 100644 --- a/src/material/core/tokens/m3/_md-sys-color.scss +++ b/src/material/core/tokens/m3/_md-sys-color.scss @@ -1,7 +1,5 @@ @use 'sass:map'; - -// Indicates whether alternative tokens should be used -$_alternate-tokens: false; +@use './md-sys-color-internal'; @function md-sys-color-values-dark($palettes: ()) { $values: ( @@ -53,22 +51,10 @@ $_alternate-tokens: false; tertiary: map.get($palettes, tertiary, 80), tertiary-container: map.get($palettes, tertiary, 30), tertiary-fixed: map.get($palettes, tertiary, 90), - tertiary-fixed-dim: map.get($palettes, tertiary, 80) + tertiary-fixed-dim: map.get($palettes, tertiary, 80), ); - @if ($_alternate-tokens) { - $values: map.merge($values, ( - on-surface-variant: map.get($palettes, neutral-variant, 80), - surface-bright: #37393b, - surface-container: #1e1f20, - surface-container-high: #282a2c, - surface-container-highest: #333537, - surface-container-low: #1b1b1b, - surface-container-lowest: #0e0e0e, - surface-dim: #131313, - surface-tint: #d1e1ff, - )); - } + $values: map.merge($values, md-sys-color-internal.values-dark($palettes)); @return $values; } @@ -123,22 +109,10 @@ $_alternate-tokens: false; tertiary: map.get($palettes, tertiary, 40), tertiary-container: map.get($palettes, tertiary, 90), tertiary-fixed: map.get($palettes, tertiary, 90), - tertiary-fixed-dim: map.get($palettes, tertiary, 80) + tertiary-fixed-dim: map.get($palettes, tertiary, 80), ); - @if ($_alternate-tokens) { - $values: map.merge($values, ( - background: map.get($palettes, neutral, 100), - surface: map.get($palettes, neutral, 100), - surface-bright: map.get($palettes, neutral, 100), - surface-container: #f0f4f9, - surface-container-high: #e9eef6, - surface-container-highest: #dde3ea, - surface-container-low: #f8fafd, - surface-dim: #d3dbe5, - surface-tint: #6991d6, - )); - } + $values: map.merge($values, md-sys-color-internal.values-light($palettes)); @return $values; } diff --git a/src/material/core/tokens/m3/_md-sys-typescale-internal.scss b/src/material/core/tokens/m3/_md-sys-typescale-internal.scss new file mode 100644 index 000000000000..436ff4eaa831 --- /dev/null +++ b/src/material/core/tokens/m3/_md-sys-typescale-internal.scss @@ -0,0 +1,5 @@ +// System typescale values that are internal-only and diverge from the +// external Material Design spec. +@function values($typography) { + @return (); +} diff --git a/src/material/core/tokens/m3/_md-sys-typescale.scss b/src/material/core/tokens/m3/_md-sys-typescale.scss index 1d70b8505f82..4af98c144013 100644 --- a/src/material/core/tokens/m3/_md-sys-typescale.scss +++ b/src/material/core/tokens/m3/_md-sys-typescale.scss @@ -4,9 +4,7 @@ // @use 'sass:map'; - -// Indicates whether alternative tokens should be used -$_alternate-tokens: false; +@use './md-sys-typescale-internal'; @function md-sys-typescale-values($typography: ()) { $plain: map.get($typography, plain); @@ -110,19 +108,7 @@ $_alternate-tokens: false; title-small-weight: $medium ); - @if ($_alternate-tokens) { - $values: map.merge($values, ( - body-large-tracking: 0, - body-medium-tracking: 0, - body-small-tracking: 0.006rem, - display-large-tracking: 0, - label-large-tracking: 0, - label-medium-tracking: 0.006rem, - label-small-tracking: 0.006rem, - title-medium-tracking: 0, - title-small-tracking: 0, - )); - } + $values: map.merge($values, md-sys-typescale-internal.values($typography)); @return $values; }