chore: move sys-color custom properties to override file

PiperOrigin-RevId: 540053394

Author: asyncliz

tokens/_md-sys-color.scss

@@ -3,6 +3,9 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
 // go/keep-sorted start
 @use './md-ref-palette';
 @use './v0_172/md-sys-color';
@@ -13,13 +16,29 @@ $_default-dark: (
 );
 
 @function values-dark($deps: $_default-dark) {
-  @return md-sys-color.values-dark($deps);
+  $tokens: md-sys-color.values-dark($deps);
+
+  // Create --md-sys-color-* custom properties
+  @each $token, $value in $tokens {
+    $var: var(--md-sys-color-#{$token}, #{$value});
+    $tokens: map.set($tokens, $token, $var);
+  }
+
+  @return $tokens;
 }
 
 $_default-light: (
   'md-ref-palette': md-ref-palette.values(),
 );
 
 @function values-light($deps: $_default-light) {
-  @return md-sys-color.values-light($deps);
+  $tokens: md-sys-color.values-light($deps);
+
+  // Create --md-sys-color-* custom properties
+  @each $token, $value in $tokens {
+    $var: var(--md-sys-color-#{$token}, #{$value});
+    $tokens: map.set($tokens, $token, $var);
+  }
+
+  @return $tokens;
 }