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