feat(Tokens): restrict new tokens behind feature flag (#8350)

* feat(Tokens): restrict new tokens behind feature flag

* chore(Tokens): properly format remaining tokens

* fix(FeatureFlag): enable custom properties by default

* chore(docs): add scenarios to storybook styles for testing

* fix(FeatureFlag): fix if statement so tests pass

* chore(example): remove example code

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

Author: tw15egan

packages/components/src/globals/scss/_feature-flags.scss

@@ -38,6 +38,21 @@ $default-feature-flags: (
 
 $feature-flags: map-merge($default-feature-flags, $feature-flags);
 
+@if feature-flag-enabled('enable-2021-release') == true {
+  @if variable-exists(css--disable-css-custom-properties) ==
+    false or
+    $css--disable-css-custom-properties ==
+    false
+  {
+    $feature-flags: map-merge(
+      $feature-flags,
+      (
+        enable-css-custom-properties: true,
+      )
+    );
+  }
+}
+
 @if map-get($feature-flags, grid) != true {
   // We supported a flag for experimental grid in the past that we want to keep
   // supporting till our next major release. These two @if statements will assign

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

@@ -15,6 +15,99 @@
 // to make sure that they're in sync if one has diverged from the other.
 @include carbon--theme();
 
+@if not feature-flag-enabled('enable-2021-release') {
+  $background: $ui-background;
+  $layer: $ui-01;
+  $layer-alt: $ui-03;
+  $field: $field-01;
+  $background-inverse: $inverse-02;
+  $background-brand: $interactive-01;
+  $interactive: $interactive-04;
+
+  $border-subtle: $ui-03;
+  $border-strong: $ui-04;
+  $border-inverse: $ui-05;
+  $border-interactive: $interactive-04;
+
+  $text-primary: $text-01;
+  $text-secondary: $text-02;
+  $text-placeholder: $text-03;
+  $text-helper: $text-05;
+  $text-on-color: $text-04;
+  $text-inverse: $inverse-01;
+
+  $link-primary: $link-01;
+  $link-secondary: $link-02;
+  $link-visited: $visited-link;
+  $link-inverse: $inverse-link;
+
+  $icon-primary: $icon-01;
+  $icon-secondary: $icon-02;
+  $icon-on-color: $icon-03;
+  $icon-inverse: $inverse-01;
+
+  $support-error: $support-01;
+  $support-success: $support-02;
+  $support-warning: $support-03;
+  $support-info: $support-04;
+  $support-error-inverse: $inverse-support-01;
+  $support-success-inverse: $inverse-support-02;
+  $support-warning-inverse: $inverse-support-03;
+  $support-info-inverse: $inverse-support-04;
+
+  $overlay: $overlay-01;
+  $toggle-off: $ui-04;
+
+  $button-primary: $interactive-01;
+  $button-secondary: $interactive-02;
+  $button-tertiary: $interactive-03;
+  $button-danger-primary: $danger-01;
+  $button-danger-secondary: $danger-02;
+
+  $background-active: $active-ui;
+  $layer-active: $active-ui;
+
+  $button-danger-active: $active-danger;
+  $button-primary-active: $active-primary;
+  $button-secondary-active: $active-secondary;
+  $button-tertiary-active: $active-tertiary;
+
+  $focus-inset: $inverse-01;
+  $focuse-inverse: $inverse-focus-ui;
+
+  $background-hover: $hover-ui;
+  $layer-hover: $hover-ui;
+  $field-hover: $hover-ui;
+  $background-inverse-hover: $inverse-hover-ui;
+  $link-primary-hover: $hover-primary-text;
+  $button-danger-hover: $hover-danger;
+  $button-primary-hover: $hover-primary;
+  $button-secondary-hover: $hover-secondary;
+  $button-tertiary-hover: $hover-tertiary;
+
+  $background-selected: $selected-ui;
+  $background-selected-hover: $hover-selected-ui;
+  $layer-selected: $selected-ui;
+  $layer-selected-hover: $hover-selected-ui;
+  $layer-selected-inverse: $ui-05;
+  $border-subtle-selected: $active-ui;
+
+  $layer-disabled: $disabled-01;
+  $field-disabled: $disabled-01;
+  $border-disabled: $disabled-01;
+
+  $text-disabled: $disabled-02;
+  $button-disabled: $disabled-02;
+  $icon-disabled: $disabled-02;
+
+  $text-on-color-disabled: $disabled-03;
+  $icon-on-color-disabled: $disabled-03;
+  $layer-selected-disabled: $disabled-03;
+
+  $skeleton-background: $skeleton-01;
+  $skeleton-element: $skeleton-02;
+}
+
 /// Theme variables
 
 /// @type Value

packages/components/src/globals/scss/styles.scss

@@ -61,6 +61,13 @@ $css--use-experimental-grid: false !default;
 /// @deprecated (For v10) v10 always uses `@carbon/grid`
 $css--use-experimental-grid-fallback: false !default;
 
+/// If `enable-2021-release` is set to `true`, it automatically enables the custom properties flag.
+/// If so, we need a way to disable custom properties, but use the new tokens.
+/// @access public
+/// @type Bool
+/// @group feature-flags
+$css--disable-css-custom-properties: false !default;
+
 @import 'feature-flags';
 @import 'vars';
 @import 'colors';