feat(theme): allow custom property strings in theme.validate-theme()

PiperOrigin-RevId: 440185871

Author: material-web-copybara

packages/mdc-theme/_theme.scss

@@ -331,9 +331,7 @@
   $unsupported-custom-prop-keys: ();
 
   @each $key, $value in $custom-theme {
-    $is-prop: custom-properties.is-custom-prop($value) or
-      custom-properties.is-custom-prop-string($value);
-    @if $is-prop {
+    @if custom-properties.is-custom-prop($value) {
       $unsupported-custom-prop-keys: list.append(
         $unsupported-custom-prop-keys,
         $key,

packages/mdc-theme/test/theme-validate-keys.test.scss

@@ -33,6 +33,15 @@ $origin-theme: (
   )
 );
 
+// Should validate when custom property strings are provided.
+@include theme.validate-theme(
+  $origin-theme,
+  (
+    one: var(--one),
+    two: var(--two, 4px),
+  )
+);
+
 // Should throw error when unsupported key (i.e., foobar) is provided.
 .test {
   @include theme.validate-theme(
@@ -44,13 +53,11 @@ $origin-theme: (
   );
 }
 
-// Should throw error when custom properties are provided
+// Should throw error when custom properties are provided.
 .no-custom-props {
   @include theme.validate-theme(
     $origin-theme,
     (
-      one: var(--one),
-      two: var(--two, 4px),
       three: (
         varname: --three,
         fallback: teal,

packages/mdc-theme/test/theme.scss.test.ts

@@ -114,6 +114,6 @@ gm-fab {
     const filePath = path.join(__dirname, 'theme-validate-keys.test.css');
     const css = fs.readFileSync(filePath, 'utf8').trim();
     expect(css).toContain(
-        'Custom properties are not supported for theme map keys: one, two, three');
+        'Custom properties are not supported for theme map keys: three');
   });
 });