feat(globals): update global scssto new color tokens

carbon-design-system · Apr 14, 2021 · 8c06edd · 8c06edd
1 parent eb6fd75
commit 8c06edd
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 57 deletions.
diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
@@ -264,6 +264,7 @@
     tbody
     tr:not(.#{$prefix}--parent-row):nth-child(even)
     td {
+    // V11: Question for design: This currently maps to $ui-02
     background-color: $data-table-zebra-color;
     border-top: 1px solid $data-table-zebra-color;
     border-bottom: 1px solid $data-table-zebra-color;

diff --git a/packages/components/src/components/data-table/_data-table-expandable.scss b/packages/components/src/components/data-table/_data-table-expandable.scss
@@ -271,6 +271,7 @@
 
   .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 1) td,
   .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 2) td {
+    // V11: Question for design: This currently maps to $ui-02
     background-color: $data-table-zebra-color;
     border-top: 1px solid $data-table-zebra-color;
     border-bottom: 1px solid $data-table-zebra-color;

diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
@@ -395,7 +395,7 @@
   // Disabled
   // ---------------------------------------------
   .#{$prefix}--toggle-input:disabled + .#{$prefix}--toggle-input__label {
-    color: $disabled;
+    color: $text-disabled;
     cursor: not-allowed;
   }
 

diff --git a/packages/components/src/globals/scss/_css--body.scss b/packages/components/src/globals/scss/_css--body.scss
@@ -18,9 +18,9 @@
     @include reset;
     @include type-style('body-short-01');
 
-    color: $text-01;
+    color: $text-primary;
     line-height: 1;
-    background-color: $ui-background;
+    background-color: $background;
   }
 }
 

diff --git a/packages/components/src/globals/scss/_css--helpers.scss b/packages/components/src/globals/scss/_css--helpers.scss
@@ -32,9 +32,9 @@
     @include reset;
     @include type-style('body-short-01');
 
-    color: $text-01;
+    color: $text-primary;
     line-height: 1;
-    background-color: $ui-background;
+    background-color: $background;
   }
 }
 

diff --git a/packages/components/src/globals/scss/_helper-mixins.scss b/packages/components/src/globals/scss/_helper-mixins.scss
@@ -46,7 +46,7 @@
 /// @example @include placeholder-colors;
 /// @group global-helpers
 @mixin placeholder-colors {
-  color: $text-05;
+  color: $text-placeholder;
   opacity: 1;
 }
 
@@ -96,7 +96,7 @@
   }
 
   @if ($type == 'invalid') {
-    outline: 2px solid $support-01;
+    outline: 2px solid $support-error;
     outline-offset: -2px;
 
     @media screen and (prefers-contrast) {
@@ -170,7 +170,7 @@
 @mixin skeleton {
   position: relative;
   padding: 0;
-  background: $skeleton-01;
+  background: $skeleton-background;
   border: none;
   box-shadow: none;
   pointer-events: none;
@@ -187,7 +187,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    background: $skeleton-02;
+    background: $skeleton-element;
     animation: 3000ms ease-in-out skeleton infinite;
     content: '';
     will-change: transform-origin, transform, opacity;

diff --git a/packages/components/src/globals/scss/_theme-tokens.scss b/packages/components/src/globals/scss/_theme-tokens.scss
@@ -123,13 +123,13 @@ $input-label-weight: 400 !default;
 /// @type Color
 /// @access public
 /// @group global-themes
-$disabled: $disabled-02 !default;
+$disabled: $text-disabled !default;
 
 /// @type Color
 /// @access public
 /// @group global-themes
 /// @deprecated
-$disabled-background-color: $disabled-01 !default;
+$disabled-background-color: $layer-disabled !default;
 
 /// @type Color
 /// @access public
@@ -160,7 +160,7 @@ $link-inverse-color: #6ea6ff !default;
 /// @type Color
 /// @access public
 /// @group tooltip
-$tooltip-background-color: $inverse-02 !default;
+$tooltip-background-color: $background-inverse !default;
 
 // Button
 
@@ -284,13 +284,13 @@ $checkbox-border-width: 2px !default;
 /// @access public
 /// @group code-snippet
 /// @deprecated
-$snippet-background-color: $field-01 !default;
+$snippet-background-color: $field !default;
 
 /// @type Color
 /// @access public
 /// @group code-snippet
 /// TODO: Define for experimental
-$snippet-border-color: $ui-03 !default;
+$snippet-border-color: $border-subtle !default;
 
 // Content Switcher
 
@@ -302,12 +302,12 @@ $content-switcher-border-radius: 0 !default;
 /// @type Number
 /// @access public
 /// @group content-switcher
-$content-switcher-option-border: 1px solid $brand-01 !default;
+$content-switcher-option-border: 1px solid $border-interactive !default;
 
 /// @type Color
 /// @access public
 /// @group content-switcher
-$content-switcher-divider: $ui-03 !default;
+$content-switcher-divider: $border-subtle !default;
 
 // Data Table
 
@@ -319,7 +319,7 @@ $data-table-heading-transform: uppercase !default;
 /// @type Value
 /// @access public
 /// @group data-table
-$data-table-heading-border-bottom: 1px solid $brand-01 !default;
+$data-table-heading-border-bottom: 1px solid $border-interactive !default;
 
 /// @type Number
 /// @access public
@@ -329,12 +329,13 @@ $data-table-row-height: 2rem !default;
 /// @type Color
 /// @access public
 /// @group data-table
+// V11: We need a token for zebra styles
 $data-table-zebra-color: $ui-02 !default;
 
 /// @type Color
 /// @access public
 /// @group data-table
-$data-table-column-hover: $hover-selected-ui !default;
+$data-table-column-hover: $layer-selected-hover !default;
 
 // Date Picker
 
@@ -349,13 +350,13 @@ $date-picker-in-range-background-color: $ibm-color__blue-20 !default;
 /// @type Color
 /// @access public
 /// @group modal
-$modal-border-top: $brand-01 4px solid !default;
+$modal-border-top: 4px solid $border-interactive !default;
 
 /// @type Color
 /// @access public
 /// @group modal
 /// @deprecated
-$modal-footer-background-color: $ui-03 !default;
+$modal-footer-background-color: $layer-accent !default;
 
 // Notification
 
@@ -409,12 +410,12 @@ $progress-indicator-line-offset: 0.625rem !default;
 /// @type Color
 /// @access public
 /// @group copy-button
-$copy-active: $active-ui !default;
+$copy-active: $layer-active !default;
 
 /// @type Color
 /// @access public
 /// @group copy-button
-$copy-btn-feedback: $inverse-02 !default;
+$copy-btn-feedback: $background-inverse !default;
 
 // Radio Button
 
@@ -440,30 +441,30 @@ $structured-list-text-transform: none !default;
 /// @type Value
 /// @access public
 /// @group tabs
-$tab-underline-color: 2px solid $ui-03 !default;
+$tab-underline-color: 2px solid $border-subtle !default;
 
 /// @type Value
 /// @access public
 /// @group tabs
-$tab-underline-color-hover: 2px solid $ui-04 !default;
+$tab-underline-color-hover: 2px solid $border-strong !default;
 
 /// @type Color
 /// @access public
 /// @group tabs
-$tab-text-disabled: $disabled-02 !default;
+$tab-text-disabled: $text-disabled !default;
 
 /// @type Value
 /// @access public
 /// @group tabs
-$tab-underline-disabled: 2px solid $disabled-01 !default;
+$tab-underline-disabled: 2px solid $border-disabled !default;
 
 // Skeleton Loading
 
 /// @type Color
 /// @access public
 /// @group skeleton
 /// TODO: Remove this in next major release
-$skeleton: $skeleton-01 !default;
+$skeleton: $skeleton-background !default;
 
 // Light UI
 
@@ -501,4 +502,5 @@ $skeleton: $skeleton-01 !default;
 /// @type Color
 /// @access public
 /// @group light-ui
+// V11: No longer needed
 $hover-ui-light: get-light-value('ui-01');
diff --git a/packages/components/src/globals/scss/_tooltip.scss b/packages/components/src/globals/scss/_tooltip.scss
@@ -41,10 +41,10 @@
     rem(8px) rem(16px),
     rem(3px) rem(16px)
   );
-  color: $inverse-01;
+  color: $text-inverse;
   font-weight: 400;
   text-align: left;
-  background-color: $inverse-02;
+  background-color: $background-inverse;
   border-radius: rem(2px);
   transform: translateX(-50%);
   @include type-style('body-short-01');
@@ -284,25 +284,25 @@
   &::before {
     @if ($position == 'top') {
       top: -$caret-spacing;
-      border-color: $inverse-02 transparent transparent transparent;
+      border-color: $background-inverse transparent transparent transparent;
       border-width: rem(5px) rem(4px) 0 rem(4px);
       transform: translate(-50%, -100%);
     }
     @if ($position == 'right') {
       right: -$caret-spacing;
-      border-color: transparent $inverse-02 transparent transparent;
+      border-color: transparent $background-inverse transparent transparent;
       border-width: rem(4px) rem(5px) rem(4px) 0;
       transform: translate(100%, -50%);
     }
     @if ($position == 'bottom') {
       bottom: -$caret-spacing;
-      border-color: transparent transparent $inverse-02 transparent;
+      border-color: transparent transparent $background-inverse transparent;
       border-width: 0 rem(4px) rem(5px) rem(4px);
       transform: translate(-50%, 100%);
     }
     @if ($position == 'left') {
       left: -$caret-spacing;
-      border-color: transparent transparent transparent $inverse-02;
+      border-color: transparent transparent transparent $background-inverse;
       border-width: rem(4px) 0 rem(4px) rem(5px);
       transform: translate(-100%, -50%);
     }

diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js
@@ -24,7 +24,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'Components/Skeleton/SkeletonPlaceholder',
+  title: 'Components/Skeleton',
   decorators: [withKnobs],
 
   parameters: {
@@ -35,7 +35,7 @@ export default {
   },
 };
 
-export const Default = () => (
+export const _SkeletonPlaceholder = () => (
   <div style={{ height: '250px', width: '250px' }}>
     <style
       dangerouslySetInnerHTML={{
@@ -60,15 +60,3 @@ export const Default = () => (
     <SkeletonPlaceholder {...props()} />
   </div>
 );
-
-Default.parameters = {
-  info: {
-    text: `
-    Skeleton states are used as a progressive loading state while the user waits for content to load.
-
-    By taking a height and/or width property, this component can be used when you know the exact dimensions of the incoming content, such as an image.
-
-    However, for performance reasons, it's recommended to create a class in your stylesheet to set the dimensions.
-  `,
-  },
-};
diff --git a/packages/react/src/components/SkeletonText/SkeletonText-story.js b/packages/react/src/components/SkeletonText/SkeletonText-story.js
@@ -30,7 +30,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'Components/Skeleton/SkeletonText',
+  title: 'Components/Skeleton',
   decorators: [withKnobs],
 
   parameters: {
@@ -41,16 +41,8 @@ export default {
   },
 };
 
-export const Default = () => (
+export const _SkeletonText = () => (
   <div style={{ width: '300px' }}>
     <SkeletonText {...props()} />
   </div>
 );
-
-Default.parameters = {
-  info: {
-    text: `
-        Skeleton states are used as a progressive loading state while the user waits for content to load.
-      `,
-  },
-};