fix(material/core): move internal tokens (#31907)

Author: andrewseguin

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",

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 ();
+}

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;
 }

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",
     ],
 )

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 ();
+}

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;
 }

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 ();
+}

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;
 }