refactor: allow null as a fallback value in custom-property mixins

PiperOrigin-RevId: 487307936

packages/mdc-theme/_custom-properties.scss

@@ -227,23 +227,13 @@ $_varname-prefix: 'mdc';
 /// typically a `var()` function.
 ///
 /// If custom properties are disabled, the custom property's fallback value
-/// will be returned instead. If the fallback value is `null`, an error will
-/// be thrown.
+/// will be returned instead.
 ///
 /// @param {Map} $custom-prop - The custom property Map to retrieve a
 ///     declaration value for.
 /// @return {*} The CSS declaration value.
 @function get-declaration-value($custom-prop) {
-  $emit-custom-properties: map.get($_config, emit-custom-properties);
-  $fallback: get-fallback($custom-prop);
-  @if not $emit-custom-properties and not $fallback {
-    @error 'Custom properties are disabled and #{get-varname($custom-prop)} does not have a fallback value.';
-  }
-
-  @if not $emit-custom-properties {
-    @return $fallback;
-  }
-
+  // This will return just the fallback value if `emit-custom-properties` is false.
   @return create-var($custom-prop);
 }
 

packages/mdc-theme/test/custom-properties.test.scss

@@ -0,0 +1,61 @@
+@use 'true' as test;
+
+@use '../custom-properties';
+
+@include test.describe('custom-properties') {
+  @include test.describe('get-declaration-value()') {
+    @include test.describe('when emit-custom-properties is false ') {
+      @include custom-properties.configure($emit-custom-properties: false) {
+        @include test.it('returns null when fallback is null') {
+          $input: (
+            varname: --test-property,
+            fallback: null,
+          );
+
+          @include test.assert-equal(
+            custom-properties.get-declaration-value($input),
+            null
+          );
+        }
+
+        @include test.it('dos not return a custom property') {
+          $input: (
+            varname: --test-property,
+            fallback: 'blue',
+          );
+
+          @include test.assert-equal(
+            custom-properties.get-declaration-value($input),
+            'blue'
+          );
+        }
+      }
+
+      @include test.it('return a custom property') {
+        $input: (
+          varname: --test-property,
+          fallback: 'blue',
+        );
+
+        @include test.assert-equal(
+          custom-properties.get-declaration-value($input),
+          var(--test-property, 'blue')
+        );
+      }
+
+      @include test.it(
+        'returns just the custom property when fallback is null'
+      ) {
+        $input: (
+          varname: --test-property,
+          fallback: null,
+        );
+
+        @include test.assert-equal(
+          custom-properties.get-declaration-value($input),
+          var(--test-property)
+        );
+      }
+    }
+  }
+}