From 04a2c8f615fe33bd98f8fb4050b103fad5bd9d83 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 14 Apr 2021 15:44:45 -0700
Subject: [PATCH] fix(tokens): update tokens based on feedback

---
 .../src/components/data-table/_data-table-core.scss        | 7 +++----
 .../src/components/data-table/_data-table-expandable.scss  | 7 +++----
 packages/components/src/components/toggle/_toggle.scss     | 2 +-
 packages/components/src/components/ui-shell/_content.scss  | 3 +--
 packages/components/src/globals/scss/_theme-tokens.scss    | 3 +--
 5 files changed, 9 insertions(+), 13 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
index 719901827ae4..d14ee4baff6d 100644
--- a/packages/components/src/components/data-table/_data-table-core.scss
+++ b/packages/components/src/components/data-table/_data-table-core.scss
@@ -264,10 +264,9 @@
     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;
+    background-color: $layer-accent;
+    border-top: 1px solid $layer-accent;
+    border-bottom: 1px solid $layer-accent;
   }
 
   .#{$prefix}--data-table--zebra
diff --git a/packages/components/src/components/data-table/_data-table-expandable.scss b/packages/components/src/components/data-table/_data-table-expandable.scss
index 01620e0635a0..f87baf0b55c2 100644
--- a/packages/components/src/components/data-table/_data-table-expandable.scss
+++ b/packages/components/src/components/data-table/_data-table-expandable.scss
@@ -271,10 +271,9 @@
 
   .#{$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;
+    background-color: $layer-accent;
+    border-top: 1px solid $layer-accent;
+    border-bottom: 1px solid $layer-accent;
   }
 
   .#{$prefix}--data-table--zebra tr.#{$prefix}--parent-row td,
diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
index 83d8c9ab96dc..8ea818df3ce2 100644
--- a/packages/components/src/components/toggle/_toggle.scss
+++ b/packages/components/src/components/toggle/_toggle.scss
@@ -381,7 +381,7 @@
   .#{$prefix}--toggle-input:active
     + .#{$prefix}--toggle-input__label
     > .#{$prefix}--toggle__switch::before {
-    box-shadow: 0 0 0 1px $background, 0 0 0 3px $focus;
+    box-shadow: 0 0 0 1px $focus-inset, 0 0 0 3px $focus;
 
     // Windows, Firefox HCM Fix
     @media screen and (-ms-high-contrast: active),
diff --git a/packages/components/src/components/ui-shell/_content.scss b/packages/components/src/components/ui-shell/_content.scss
index 4cabc62209fc..cf642d51c2d3 100644
--- a/packages/components/src/components/ui-shell/_content.scss
+++ b/packages/components/src/components/ui-shell/_content.scss
@@ -13,10 +13,9 @@
 /// @access private
 /// @group ui-shell
 @mixin carbon-content {
-  // V11: Need new token
   .#{$prefix}--content {
     padding: 2rem;
-    background: $ui-02;
+    background: $layer;
     will-change: margin-left;
   }
 
diff --git a/packages/components/src/globals/scss/_theme-tokens.scss b/packages/components/src/globals/scss/_theme-tokens.scss
index 5ed58a2d26f3..5dd694253e01 100644
--- a/packages/components/src/globals/scss/_theme-tokens.scss
+++ b/packages/components/src/globals/scss/_theme-tokens.scss
@@ -329,8 +329,7 @@ $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;
+$data-table-zebra-color: $layer-accent !default;
 
 /// @type Color
 /// @access public