feat(styles): emit component tokens in zones (#11227)

* docs(storybook): update sass-loader * feat(styles): emit component tokens in zones Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Apr 18, 2022 · 4c57c52 · 4c57c52
1 parent dde2947
commit 4c57c52
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
@@ -147,16 +147,14 @@ module.exports = {
         {
           loader: 'sass-loader',
           options: {
-            additionalData(content) {
-              return content;
-            },
+            implementation: require('sass'),
             sassOptions: {
-              implementation: require('sass'),
               includePaths: [
                 path.resolve(__dirname, '..', 'node_modules'),
                 path.resolve(__dirname, '..', '..', '..', 'node_modules'),
               ],
             },
+            warnRuleAsWarning: true,
             sourceMap: true,
           },
         },

diff --git a/packages/styles/scss/_zone.scss b/packages/styles/scss/_zone.scss
@@ -12,7 +12,11 @@
 @use './theme';
 // Inline themes depend on layer styles to property reset the layer level
 @use './layer';
+@use './utilities/component-tokens';
 @use './utilities/custom-property';
+@use './components/button/tokens' as button;
+@use './components/notification/tokens' as notification;
+@use './components/tag/tokens' as tag;
 
 /// Specify a Map of zones where the key will be used as part of the selector
 /// and the value will be a map used to emit CSS Custom Properties for all color
@@ -24,12 +28,40 @@ $zones: (
   g100: themes.$g100,
 ) !default;
 
+$-components: (
+  button.$button-tokens,
+  notification.$notification-tokens,
+  tag.$tag-tokens
+);
+
 @each $name, $theme in $zones {
   .#{config.$prefix}--#{'' + $name} {
     @each $key, $value in $theme {
       @if type-of($value) == color {
         @include custom-property.declaration($key, $value);
       }
     }
+
+    @each $group in $-components {
+      @each $key, $value in $group {
+        @if meta.type-of($value) == map {
+          $fallback: map.get($value, fallback);
+          $theme-values: map.get($value, values);
+
+          @each $theme-value in $theme-values {
+            $theme: map.get($theme-value, theme);
+            $value: map.get($theme-value, value);
+            @if theme.matches($theme, theme.$theme) and
+              meta.type-of($value) ==
+              color
+            {
+              @include custom-property.declaration($key, $value);
+            }
+          }
+        } @else if meta.type-of($value) == color {
+          @include custom-property.declaration($key, $value);
+        }
+      }
+    }
   }
 }