feat(styles): add component token support for Sass Migration effort (#…

…8971)

* chore: check-in work

* feat(themes): add support for component tokens in theme

* feat(styles): export tokens from notification

* chore(styles): remove unused files

* chore(styles): remove unused config option

* chore(styles): switch prefix back to bx

packages/styles/scss/components/notification/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'tokens';

packages/styles/scss/components/notification/_tokens.scss

@@ -0,0 +1,126 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:color';
+@use '../../colors';
+@use '../../theme' as *;
+@use '../../themes';
+@use '../../utilities/component-tokens';
+
+// prettier-ignore
+$-tokens: (
+  'notification-background-error': (
+    fallback: colors.$red-10,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$red-10,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$red-10,
+      ),
+      (
+        theme: themes.$g90,
+        value: $layer,
+      ),
+      (
+        theme: themes.$g100,
+        value: $layer,
+      ),
+    ),
+  ),
+  'notification-background-success': (
+    fallback: colors.$green-10,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$green-10,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$green-10,
+      ),
+      (
+        theme: themes.$g90,
+        value: $layer,
+      ),
+      (
+        theme: themes.$g100,
+        value: $layer,
+      ),
+    ),
+  ),
+  'notification-background-info': (
+    fallback: colors.$blue-10,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$blue-10,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$blue-10,
+      ),
+      (
+        theme: themes.$g90,
+        value: $layer,
+      ),
+      (
+        theme: themes.$g100,
+        value: $layer,
+      ),
+    ),
+  ),
+  'notification-background-warning': (
+    fallback: mix(colors.$yellow-30, colors.$white-0, 15%),
+    values: (
+      (
+        theme: themes.$white,
+        value: mix(colors.$yellow-30, colors.$white-0, 15%),
+      ),
+      (
+        theme: themes.$g10,
+        value: mix(colors.$yellow-30, colors.$white-0, 15%),
+      ),
+      (
+        theme: themes.$g90,
+        value: $layer,
+      ),
+      (
+        theme: themes.$g100,
+        value: $layer,
+      ),
+    ),
+  ),
+  'notification-action-hover': (
+    fallback: colors.$white-0,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$white-0,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$white-0,
+      ),
+      (
+        theme: themes.$g90,
+        value: $layer-hover,
+      ),
+      (
+        theme: themes.$g100,
+        value: $layer-hover,
+      ),
+    ),
+  ),
+);
+
+$white: component-tokens.get-tokens($-tokens, themes.$white);
+$g10: component-tokens.get-tokens($-tokens, themes.$g10);
+$g90: component-tokens.get-tokens($-tokens, themes.$g90);
+$g100: component-tokens.get-tokens($-tokens, themes.$g100);

packages/styles/scss/utilities/_component-tokens.scss

@@ -0,0 +1,27 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+
+/// Extract the component tokens from a given theme
+/// @param {SassMap} $tokens
+/// @param {SassMap} $theme
+/// @returns {SassMap}
+@function get-tokens($tokens, $theme) {
+  $result: ();
+
+  @each $key, $descriptor in $tokens {
+    $theme-values: map.get($descriptor, values);
+    @each $theme-value in $theme-values {
+      @if map.get($theme-value, theme) == $theme {
+        $result: map.set($result, $key, map.get($theme-value, value));
+      }
+    }
+  }
+
+  @return $result;
+}

packages/themes/scss/modules/_theme.scss

@@ -14,14 +14,20 @@ $-custom-property-prefix: 'cds';
 
 /// @access public
 /// @group @carbon/themes
-@mixin theme($active-theme: $theme) {
+@mixin theme($active-theme: $theme, $component-tokens...) {
   $parent-theme: $theme;
   $theme: $active-theme !global;
 
   @each $token, $value in $theme {
     @include -custom-property($token, $value);
   }
 
+  @each $group in $component-tokens {
+    @each $token, $value in $group {
+      @include -custom-property($token, $value);
+    }
+  }
+
   @content;
 
   $theme: $parent-theme !global;