fix(component-tokens): only emit static values in emit-component-tokens (#7801)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: janhassel

packages/components/src/globals/scss/_component-tokens.scss

@@ -20,7 +20,10 @@ $enable-css-custom-properties: feature-flag-enabled(
 /// @example get-token-value($component-tokens, 'tag-background-red');
 /// @returns {String} Token value
 /// @group component-tokens
-@function get-token-value($tokens, $name) {
+@function get-token-value($tokens, $name, $force-static-values: false) {
+  $emit-as-css-custom-property: $force-static-values == false and
+    feature-flag-enabled('enable-css-custom-properties');
+
   @if map-has-key($tokens, $name) {
     $config: map-get($tokens, $name);
     $fallback: map-get($config, 'fallback');
@@ -33,15 +36,15 @@ $enable-css-custom-properties: feature-flag-enabled(
         $value: map-get($option, 'value');
 
         @return if(
-          feature-flag-enabled('enable-css-custom-properties'),
+          $emit-as-css-custom-property,
           var(--#{$custom-property-prefix}-#{$name}, #{$value}),
           $value
         );
       }
     }
 
     @return if(
-      feature-flag-enabled('enable-css-custom-properties'),
+      $emit-as-css-custom-property,
       var(--#{$custom-property-prefix}-#{$name}, #{$fallback}),
       $fallback
     );
@@ -73,6 +76,6 @@ $enable-css-custom-properties: feature-flag-enabled(
 /// @example @include emit-component-tokens($component-tokens);
 @mixin emit-component-tokens($tokens) {
   @each $key, $options in $tokens {
-    @include custom-property($key, get-token-value($tokens, $key));
+    @include custom-property($key, get-token-value($tokens, $key, true));
   }
 }