From ff0c56874acea66b8b45d47833e2ab45dab63ef2 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 1 Jul 2021 16:58:10 -0500 Subject: [PATCH] Revert "feat(tokens): update color tokens pt3 (#8376)" (#9067) This reverts commit 38046125e501fdb62862f8c70912d669c77fb7f9. Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: TJ Egan --- .../data-table/_data-table-core.scss | 6 +- .../data-table/_data-table-expandable.scss | 6 +- .../components/src/components/tag/_tag.scss | 17 ++--- .../src/components/text-area/_text-area.scss | 16 +++-- .../components/text-input/_text-input.scss | 24 ++++--- .../components/src/components/tile/_tile.scss | 62 +++++++++++-------- .../components/time-picker/_time-picker.scss | 5 +- .../src/components/toggle/_toggle.scss | 44 ++++++------- .../src/components/toolbar/_toolbar.scss | 1 - .../src/components/tooltip/_tooltip.scss | 54 ++++++++-------- .../src/components/treeview/_treeview.scss | 32 +++++----- .../src/components/ui-shell/_content.scss | 2 +- .../src/components/ui-shell/_header.scss | 2 +- .../src/components/ui-shell/_side-nav.scss | 2 +- .../src/globals/scss/_css--body.scss | 4 +- .../src/globals/scss/_css--helpers.scss | 4 +- .../src/globals/scss/_helper-mixins.scss | 8 +-- .../src/globals/scss/_theme-tokens.scss | 39 ++++++------ .../components/src/globals/scss/_tooltip.scss | 12 ++-- .../SkeletonPlaceholder-story.js | 16 ++++- .../SkeletonText/SkeletonText-story.js | 12 +++- 21 files changed, 191 insertions(+), 177 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 5d6525c75585..b88c6507a9b6 100644 --- a/packages/components/src/components/data-table/_data-table-core.scss +++ b/packages/components/src/components/data-table/_data-table-core.scss @@ -281,9 +281,9 @@ tbody tr:not(.#{$prefix}--parent-row):nth-child(even) td { - border-top: 1px solid $layer-accent; - border-bottom: 1px solid $layer-accent; - background-color: $layer-accent; + border-top: 1px solid $data-table-zebra-color; + border-bottom: 1px solid $data-table-zebra-color; + background-color: $data-table-zebra-color; } .#{$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 20e6e8fed81b..8bc43fdb32fe 100644 --- a/packages/components/src/components/data-table/_data-table-expandable.scss +++ b/packages/components/src/components/data-table/_data-table-expandable.scss @@ -271,9 +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 { - border-top: 1px solid $layer-accent; - border-bottom: 1px solid $layer-accent; - background-color: $layer-accent; + border-top: 1px solid $data-table-zebra-color; + border-bottom: 1px solid $data-table-zebra-color; + background-color: $data-table-zebra-color; } .#{$prefix}--data-table--zebra tr.#{$prefix}--parent-row td, diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss index 7906779f233b..aebc18cc0c7e 100644 --- a/packages/components/src/components/tag/_tag.scss +++ b/packages/components/src/components/tag/_tag.scss @@ -127,17 +127,13 @@ } .#{$prefix}--tag--high-contrast { - @include tag-theme( - $background-inverse, - $text-inverse, - $background-inverse-hover - ); + @include tag-theme($inverse-02, $inverse-01, $inverse-hover-ui); } .#{$prefix}--tag--disabled, .#{$prefix}--tag--filter.#{$prefix}--tag--disabled, .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled { - @include tag-theme($layer-disabled, $text-disabled); + @include tag-theme($disabled-01, $disabled-02); &:hover { cursor: not-allowed; @@ -224,7 +220,7 @@ } .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus { - box-shadow: inset 0 0 0 1px $focus-inverse; + box-shadow: inset 0 0 0 1px $inverse-focus-ui; } .#{$prefix}--tag--filter.#{$prefix}--tag--disabled @@ -233,7 +229,7 @@ } .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg { - fill: $icon-disabled; + fill: $disabled-02; } // small tags @@ -255,10 +251,7 @@ // Skeleton state .#{$prefix}--tag.#{$prefix}--skeleton { @include skeleton; - @include tag-theme( - $bg-color: $skeleton-background, - $text-color: $text-primary - ); + @include tag-theme($bg-color: $skeleton-01, $text-color: $text-01); overflow: hidden; width: rem(60px); diff --git a/packages/components/src/components/text-area/_text-area.scss b/packages/components/src/components/text-area/_text-area.scss index 814b0a1f8b04..aa35058b5330 100644 --- a/packages/components/src/components/text-area/_text-area.scss +++ b/packages/components/src/components/text-area/_text-area.scss @@ -31,9 +31,9 @@ min-height: rem(40px); padding: rem(11px) $carbon--spacing-05; border: none; - border-bottom: 1px solid $border-strong; - background-color: $field; - color: $text-primary; + border-bottom: 1px solid $ui-04; + background-color: $field-01; + color: $text-01; resize: vertical; transition: background-color $duration--fast-01 motion(standard, productive), outline $duration--fast-01 motion(standard, productive); @@ -49,7 +49,6 @@ @include type-style('body-long-01'); } - // V11: Possibly deprecate .#{$prefix}--text-area--light { background-color: $field-02; } @@ -68,7 +67,7 @@ position: absolute; top: $carbon--spacing-04; right: $carbon--spacing-05; - fill: $support-error; + fill: $support-01; } //----------------------------- @@ -76,17 +75,16 @@ //----------------------------- .#{$prefix}--text-area:disabled { border-bottom: 1px solid transparent; - background-color: $field-disabled; - color: $text-disabled; + background-color: $disabled-01; + color: $disabled-02; cursor: not-allowed; outline: none; } .#{$prefix}--text-area:disabled::placeholder { - color: $text-disabled; + color: $disabled-02; } - // V11: Possibly deprecate .#{$prefix}--text-area.#{$prefix}--text-area--light:disabled { background-color: $field-02; } diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss index b406d686f470..7489ee168bc5 100644 --- a/packages/components/src/components/text-input/_text-input.scss +++ b/packages/components/src/components/text-input/_text-input.scss @@ -29,9 +29,9 @@ height: rem(40px); padding: 0 $carbon--spacing-05; border: none; - border-bottom: 1px solid $border-strong; - background-color: $field; - color: $text-primary; + border-bottom: 1px solid $ui-04; + background-color: $field-01; + color: $text-01; transition: background-color $duration--fast-01 motion(standard, productive), outline $duration--fast-01 motion(standard, productive); @@ -71,7 +71,6 @@ @include placeholder-colors; } - // V11: Possibly deprecate .#{$prefix}--text-input--light { background-color: $field-02; } @@ -95,11 +94,11 @@ } .#{$prefix}--text-input__invalid-icon { - fill: $support-error; + fill: $support-01; } .#{$prefix}--text-input__invalid-icon--warning { - fill: $support-warning; + fill: $support-03; } .#{$prefix}--text-input__invalid-icon--warning path:first-of-type { @@ -196,10 +195,10 @@ .#{$prefix}--text-input:disabled + .#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger svg { cursor: not-allowed; - fill: $icon-disabled; + fill: $disabled-02; &:hover { - fill: $icon-disabled; + fill: $disabled-02; } } @@ -211,19 +210,19 @@ border-bottom: 1px solid transparent; background-color: $field-disabled; + color: $text-disabled; cursor: not-allowed; // Needed to fix disabled text in Safari #6673 -webkit-text-fill-color: currentColor; } - // V11: Possibly deprecate .#{$prefix}--text-input--light:disabled { background-color: $field-02; } .#{$prefix}--text-input:disabled::placeholder { - color: $text-disabled; + color: $disabled-02; opacity: 1; } @@ -254,7 +253,7 @@ //----------------------------- .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper { position: relative; - background: $field; + background: $field-01; transition: background-color $duration--fast-01 motion(standard, productive), outline $duration--fast-01 motion(standard, productive); } @@ -294,7 +293,7 @@ + .#{$prefix}--text-input__divider { display: block; border-style: solid; - border-color: $border-subtle; + border-color: $ui-03; border-bottom: none; margin: 0 1rem; } @@ -303,7 +302,6 @@ top: rem(80px); } - // V11: Possibly deprecate .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--light { background: $field-02; } diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss index e6dd496763e5..ad5e8287d2cc 100644 --- a/packages/components/src/components/tile/_tile.scss +++ b/packages/components/src/components/tile/_tile.scss @@ -28,7 +28,7 @@ min-width: 8rem; min-height: 4rem; padding: $carbon--spacing-05; - background-color: $layer; + background-color: $ui-01; outline: 2px solid transparent; outline-offset: -2px; @@ -37,7 +37,6 @@ } } - // V11: Possibly deprecate .#{$prefix}--tile--light { background-color: $ui-02; } @@ -49,7 +48,7 @@ transition: $duration--moderate-01 motion(standard, productive); &:hover { - background: $layer-hover; + background: $hover-ui; } } .#{$prefix}--tile--expandable .#{$prefix}--link { @@ -79,7 +78,7 @@ @include reset; @include type-style('body-short-01'); - color: $text-primary; + color: $text-01; text-decoration: none; } @@ -87,16 +86,19 @@ .#{$prefix}--tile--clickable:active, .#{$prefix}--tile--clickable:visited, .#{$prefix}--tile--clickable:visited:hover { - color: $text-primary; + color: $text-01; text-decoration: none; } // Disabled ClickableTile - .#{$prefix}--tile--clickable.#{$prefix}--link--disabled, + .#{$prefix}--tile--clickable.#{$prefix}--link--disabled { + color: $disabled-02; + } + .#{$prefix}--tile--clickable:hover.#{$prefix}--link--disabled { display: block; - background-color: $layer-disabled; - color: $text-disabled; + background-color: $disabled-01; + color: $disabled-02; } .#{$prefix}--tile--selectable { @@ -120,7 +122,7 @@ svg { border-radius: 50%; - fill: $icon-secondary; + fill: $icon-02; } &:focus { @@ -142,7 +144,7 @@ svg { margin-left: $carbon--spacing-03; - fill: $icon-primary; + fill: $ui-05; transform-origin: center; transition: $duration--fast-02 motion(standard, productive); @@ -211,7 +213,7 @@ } .#{$prefix}--tile--is-selected { - border: 1px solid $layer-selected-inverse; + border: 1px solid $ui-05; } .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark { @@ -219,7 +221,7 @@ } .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark svg { - fill: $icon-primary; + fill: $ui-05; // Windows, Firefox HCM Fix @media screen and (-ms-high-contrast: active), @@ -229,6 +231,22 @@ } } + // Fix double border + .#{$prefix}--tile-input--checked + .#{$prefix}--tile--is-selected { + border-top: 1px solid $ui-01; + } + + .#{$prefix}--tile:not(.#{$prefix}--tile--is-selected) + + .#{$prefix}--tile-input--checked + + .#{$prefix}--tile--is-selected { + border-top: 1px solid $ui-05; + } + + .#{$prefix}--tile-input--checked:first-of-type + + .#{$prefix}--tile--is-selected { + border-top: 1px solid $ui-05; + } + .#{$prefix}--tile-content { width: 100%; height: 100%; @@ -243,29 +261,23 @@ } .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable { - background-color: $layer; - color: $text-disabled; + background-color: $ui-01; + color: $disabled-02; cursor: not-allowed; } - // V11: Possibly deprecate .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable.#{$prefix}--tile--light { background-color: $ui-02; } .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected { - border-color: $button-disabled; - } - - .#{$prefix}--tile--disabled .#{$prefix}--tile__checkmark svg { - fill: $icon-disabled; + outline-color: $disabled-02; } - // Windows HCM fix - .#{$prefix}--tile__chevron svg, - .#{$prefix}--tile__checkmark svg, - .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark svg { - @include high-contrast-mode('icon-fill'); + .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected + .#{$prefix}--tile__checkmark + svg { + fill: $disabled-02; } } diff --git a/packages/components/src/components/time-picker/_time-picker.scss b/packages/components/src/components/time-picker/_time-picker.scss index 77777aed2848..09377d37b2ef 100644 --- a/packages/components/src/components/time-picker/_time-picker.scss +++ b/packages/components/src/components/time-picker/_time-picker.scss @@ -61,19 +61,18 @@ } } - // V11: Possibly deprecate .#{$prefix}--time-picker--light .#{$prefix}--select-input { background-color: $field-02; &:hover { - background-color: $field-hover; + background-color: $hover-ui; } &:disabled, &:hover:disabled { border-bottom: 1px solid transparent; background-color: transparent; - color: $text-disabled; + color: $disabled-02; cursor: not-allowed; } } diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss index 6ab1e5d386db..ba3e39543dd7 100644 --- a/packages/components/src/components/toggle/_toggle.scss +++ b/packages/components/src/components/toggle/_toggle.scss @@ -188,7 +188,7 @@ width: carbon--rem(48px); height: carbon--rem(24px); box-sizing: border-box; - background-color: $toggle-off; + background-color: $ui-04; border-radius: carbon--rem(15px); // Corresponds to the double-border for focused state (`0 0 0 1px $ui-02, 0 0 0 3px $focus`) box-shadow: 0 0 0 1px transparent, 0 0 0 3px transparent; @@ -208,7 +208,7 @@ width: carbon--rem(18px); height: carbon--rem(18px); box-sizing: border-box; - background-color: $icon-on-color; + background-color: $icon-03; border-radius: 50%; content: ''; cursor: pointer; @@ -223,7 +223,7 @@ left: carbon--rem(6px); width: carbon--rem(6px); height: carbon--rem(5px); - fill: $icon-on-color; + fill: $icon-03; transform: scale(0.2); transition: $duration--fast-01 motion(exit, productive); } @@ -263,11 +263,11 @@ + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance { &::before { - background-color: $support-success; + background-color: $support-02; } &::after { - background-color: $icon-on-color; + background-color: $icon-03; transform: translateX(carbon--rem(24px)); } } @@ -286,7 +286,7 @@ .#{$prefix}--toggle:active + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance::before { - box-shadow: 0 0 0 1px $layer-accent, 0 0 0 3px $focus; + box-shadow: 0 0 0 1px $ui-03, 0 0 0 3px $focus; } //---------------------------------------------- @@ -300,11 +300,11 @@ + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance { &::before { - background-color: $layer-disabled; + background-color: $disabled-01; } &::after { - background-color: $button-disabled; + background-color: $disabled-02; } &::before, @@ -320,7 +320,7 @@ .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--right { - color: $text-disabled; + color: $disabled; } .#{$prefix}--toggle:disabled:active @@ -332,7 +332,7 @@ .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__check { - fill: $icon-disabled; + fill: $disabled-02; } //---------------------------------------------- @@ -364,7 +364,7 @@ .#{$prefix}--toggle--small:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__check { - fill: $support-success; + fill: $support-02; transform: scale(1) translateX(carbon--rem(16px)); } @@ -402,7 +402,7 @@ display: flex; flex-direction: column; align-items: flex-start; - color: $text-secondary; + color: $text-02; cursor: pointer; } @@ -422,7 +422,7 @@ width: carbon--rem(48px); height: carbon--rem(24px); box-sizing: border-box; - background-color: $toggle-off; + background-color: $ui-04; border-radius: carbon--rem(15px); // Corresponds to the double-border for focused state (`0 0 0 1px $ui-02, 0 0 0 3px $focus`) box-shadow: 0 0 0 1px transparent, 0 0 0 3px transparent; @@ -441,7 +441,7 @@ width: carbon--rem(18px); height: carbon--rem(18px); box-sizing: border-box; - background-color: $icon-on-color; + background-color: $icon-03; border-radius: 50%; content: ''; transition: transform $duration--fast-01 motion(exit, productive); @@ -483,11 +483,11 @@ + .#{$prefix}--toggle-input__label > .#{$prefix}--toggle__switch { &::before { - background-color: $support-success; + background-color: $support-02; } &::after { - background-color: $icon-on-color; + background-color: $icon-03; transform: translateX(carbon--rem(24px)); } } @@ -501,14 +501,14 @@ .#{$prefix}--toggle-input:active + .#{$prefix}--toggle-input__label > .#{$prefix}--toggle__switch::before { - box-shadow: 0 0 0 1px $focus-inset, 0 0 0 3px $focus; + box-shadow: 0 0 0 1px $ui-02, 0 0 0 3px $focus; } //---------------------------------------------- // Disabled // --------------------------------------------- .#{$prefix}--toggle-input:disabled + .#{$prefix}--toggle-input__label { - color: $text-disabled; + color: $disabled; cursor: not-allowed; } @@ -518,11 +518,11 @@ cursor: not-allowed; &::before { - background-color: $button-disabled; + background-color: $disabled-01; } &::after { - background-color: $icon-on-color-disabled; + background-color: $disabled-02; } &::before, @@ -571,7 +571,7 @@ } .#{$prefix}--toggle__check { - fill: $support-success; + fill: $support-02; transform: scale(1) translateX(carbon--rem(16px)); } } @@ -579,7 +579,7 @@ .#{$prefix}--toggle-input--small:disabled:checked + .#{$prefix}--toggle-input__label .#{$prefix}--toggle__check { - fill: $layer-disabled; + fill: $disabled-01; } //---------------------------------------------- diff --git a/packages/components/src/components/toolbar/_toolbar.scss b/packages/components/src/components/toolbar/_toolbar.scss index cd40790643d4..a595c158c33c 100644 --- a/packages/components/src/components/toolbar/_toolbar.scss +++ b/packages/components/src/components/toolbar/_toolbar.scss @@ -22,7 +22,6 @@ $css--helpers: true; /// Toolbar styles /// @access private /// @group toolbar -// V11: Remove this component @mixin toolbar { .#{$prefix}--toolbar { display: flex; diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss index b495c97ec0df..1bebe14091e5 100644 --- a/packages/components/src/components/tooltip/_tooltip.scss +++ b/packages/components/src/components/tooltip/_tooltip.scss @@ -47,7 +47,7 @@ height: 0; border-width: 0 rem(4px) rem(5px) rem(4px); border-style: solid; - border-color: transparent transparent $background-inverse transparent; + border-color: transparent transparent $inverse-02 transparent; margin: 0 auto; margin-top: 1px; margin-left: 50%; @@ -62,9 +62,9 @@ height: rem(24px); padding: 0 1rem; margin-left: 50%; - background-color: $background-inverse; + background-color: $inverse-02; border-radius: rem(2px); - color: $text-inverse; + color: $inverse-01; content: attr(aria-label); font-weight: 400; pointer-events: none; @@ -135,7 +135,6 @@ /// @access private /// @deprecated /// @group tooltip -// V11: possibly remove in V11 @mixin tooltip--definition--legacy { .#{$prefix}--tooltip--definition { @include reset; @@ -147,8 +146,8 @@ position: relative; display: inline-flex; - border-bottom: 1px dotted $highlight; - color: $text-primary; + border-bottom: 1px dotted $interactive-01; + color: $text-01; &:hover { + .#{$prefix}--tooltip--definition__top, @@ -178,14 +177,14 @@ width: rem(208px); padding: $carbon--spacing-03 $carbon--spacing-05; margin-top: $carbon--spacing-04; - background: $background-inverse; + background: $inverse-02; border-radius: rem(2px); pointer-events: none; p { @include type-style('body-short-01'); - color: $text-inverse; + color: $inverse-01; } .#{$prefix}--tooltip__caret { @@ -195,7 +194,7 @@ width: 0.6rem; height: 0.6rem; margin-left: $carbon--spacing-05; - background: $background-inverse; + background: $inverse-02; } } @@ -248,7 +247,6 @@ /// @access private /// @deprecated /// @group tooltip -// V11: possibly remove in V11 @mixin tooltip--icon--legacy { // Icon CSS only tooltip .#{$prefix}--tooltip--icon { @@ -263,7 +261,7 @@ &:hover, &:focus { svg { - fill: $icon-secondary; + fill: $icon-02; } } @@ -324,7 +322,7 @@ display: inline-flex; align-items: center; - color: $text-secondary; + color: $text-02; &:focus { @include focus-outline('border'); @@ -332,7 +330,7 @@ } .#{$prefix}--tooltip__trigger svg { - fill: $icon-secondary; + fill: $icon-02; } .#{$prefix}--tooltip__trigger:not(.#{$prefix}--btn--icon-only) { @@ -345,7 +343,7 @@ &:focus { @include focus-outline('border'); - fill: $button-primary-hover; + fill: $hover-primary; } } @@ -374,16 +372,14 @@ max-width: rem(288px); padding: $carbon--spacing-05; margin-top: $carbon--spacing-02; - background: $background-inverse; + background: $inverse-02; border-radius: rem(2px); - color: $text-inverse; + color: $inverse-01; word-wrap: break-word; // @todo this can be deprecated in v11 since focus should always be on the content container not the tooltip - // V11: remove in V11 &:focus { - box-shadow: inset 0 0 0 1px $background-inverse, - inset 0 0 0 2px $background; + box-shadow: inset 0 0 0 1px $inverse-02, inset 0 0 0 2px $ui-background; outline: 0; } @@ -448,27 +444,27 @@ } .#{$prefix}--btn:focus { - border-color: $focus-inverse; - outline-color: $background-inverse; + border-color: $inverse-focus-ui; + outline-color: $inverse-02; } .#{$prefix}--link { - color: $link-inverse; + color: $inverse-link; font-size: rem(14px); &:focus { - outline: 1px solid $focus-inverse; + outline: 1px solid $inverse-focus-ui; outline-offset: 2px; } &:active, &:active:visited, &:active:visited:hover { - color: $text-inverse; + color: $inverse-01; } &:visited { - color: $link-inverse; + color: $inverse-link; } } @@ -487,7 +483,7 @@ width: 0; height: 0; border-right: $caret-size solid transparent; - border-bottom: $caret-size solid $background-inverse; + border-bottom: $caret-size solid $inverse-02; border-left: $caret-size solid transparent; margin: 0 auto; content: ''; @@ -569,13 +565,13 @@ .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition { @include type-style('label-01'); - border-bottom: rem(1px) dotted $icon-secondary; + border-bottom: rem(1px) dotted $text-02; transition: border-color $duration--fast-02; } .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition:hover, .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition:focus { - border-bottom-color: $interactive; + border-bottom-color: $interactive-04; } .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition.#{$prefix}--tooltip--top { @@ -623,7 +619,7 @@ &:hover, &:focus { svg { - fill: $icon-secondary; + fill: $icon-02; } } } diff --git a/packages/components/src/components/treeview/_treeview.scss b/packages/components/src/components/treeview/_treeview.scss index f0bbbfb85077..85a95748941c 100644 --- a/packages/components/src/components/treeview/_treeview.scss +++ b/packages/components/src/components/treeview/_treeview.scss @@ -23,8 +23,8 @@ .#{$prefix}--tree-node { padding-left: $spacing-05; - background-color: $layer; - color: $text-secondary; + background-color: $ui-01; + color: $text-02; &:focus { outline: none; @@ -44,8 +44,8 @@ .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details { - background-color: $layer-disabled; - color: $text-disabled; + background-color: $disabled-01; + color: $disabled-02; } .#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon, @@ -56,7 +56,7 @@ .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon { - fill: $icon-disabled; + fill: $disabled-02; } .#{$prefix}--tree-node--disabled, @@ -72,19 +72,19 @@ align-items: center; &:hover { - background-color: $layer-hover; - color: $text-primary; + background-color: $hover-ui; + color: $text-01; } } .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details { - color: $text-primary; + color: $text-01; } .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-parent-node__toggle-icon, .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon { - fill: $icon-primary; + fill: $icon-01; } .#{$prefix}--tree-leaf-node { @@ -120,7 +120,7 @@ } .#{$prefix}--tree-parent-node__toggle-icon { - fill: $icon-secondary; + fill: $icon-02; transform: rotate(-90deg); transition: all $duration--fast-02 motion(standard, productive); } @@ -133,15 +133,15 @@ min-width: 1rem; min-height: 1rem; margin-right: $spacing-03; - fill: $icon-secondary; + fill: $icon-02; } .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label { - background-color: $layer-selected; - color: $text-primary; + background-color: $selected-ui; + color: $text-01; &:hover { - background-color: $layer-selected-hover; + background-color: $hover-selected-ui; } } @@ -151,7 +151,7 @@ .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label .#{$prefix}--tree-node__icon { - fill: $icon-primary; + fill: $icon-01; } .#{$prefix}--tree-node--active > .#{$prefix}--tree-node__label { @@ -163,7 +163,7 @@ left: 0; width: rem(4px); height: 100%; - background-color: $interactive; + background-color: $interactive-04; content: ''; } } diff --git a/packages/components/src/components/ui-shell/_content.scss b/packages/components/src/components/ui-shell/_content.scss index cf642d51c2d3..de7899770bc7 100644 --- a/packages/components/src/components/ui-shell/_content.scss +++ b/packages/components/src/components/ui-shell/_content.scss @@ -15,7 +15,7 @@ @mixin carbon-content { .#{$prefix}--content { padding: 2rem; - background: $layer; + background: $ui-02; will-change: margin-left; } diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss index 56e32f2bbd7e..c222da4e8de7 100644 --- a/packages/components/src/components/ui-shell/_header.scss +++ b/packages/components/src/components/ui-shell/_header.scss @@ -227,7 +227,7 @@ bottom: -2px; left: 0; width: 100%; - border-bottom: 3px solid $support-info-inverse; + border-bottom: 3px solid $inverse-support-04; content: ''; } diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss index ebec1888a69f..22dee6e95ffa 100644 --- a/packages/components/src/components/ui-shell/_side-nav.scss +++ b/packages/components/src/components/ui-shell/_side-nav.scss @@ -131,7 +131,7 @@ @include carbon--breakpoint-down('lg') { width: 100vw; height: 100vh; - background-color: $overlay; + background-color: $overlay-01; opacity: 1; transition: opacity $transition--expansion $carbon--standard-easing, background-color $transition--expansion $carbon--standard-easing; diff --git a/packages/components/src/globals/scss/_css--body.scss b/packages/components/src/globals/scss/_css--body.scss index 98b8d275c90e..ca093f6c26bd 100644 --- a/packages/components/src/globals/scss/_css--body.scss +++ b/packages/components/src/globals/scss/_css--body.scss @@ -18,8 +18,8 @@ @include reset; @include type-style('body-short-01'); - background-color: $background; - color: $text-primary; + background-color: $ui-background; + color: $text-01; line-height: 1; } } diff --git a/packages/components/src/globals/scss/_css--helpers.scss b/packages/components/src/globals/scss/_css--helpers.scss index c63c0f765fa3..777a96ee86bd 100644 --- a/packages/components/src/globals/scss/_css--helpers.scss +++ b/packages/components/src/globals/scss/_css--helpers.scss @@ -32,8 +32,8 @@ @include reset; @include type-style('body-short-01'); - background-color: $background; - color: $text-primary; + background-color: $ui-background; + color: $text-01; line-height: 1; } } diff --git a/packages/components/src/globals/scss/_helper-mixins.scss b/packages/components/src/globals/scss/_helper-mixins.scss index 672aab655190..0e6a09d1239f 100644 --- 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-placeholder; + color: $text-05; opacity: 1; } @@ -96,7 +96,7 @@ } @if ($type == 'invalid') { - outline: 2px solid $support-error; + outline: 2px solid $support-01; outline-offset: -2px; @media screen and (prefers-contrast) { @@ -171,7 +171,7 @@ position: relative; padding: 0; border: none; - background: $skeleton-background; + background: $skeleton-01; box-shadow: none; pointer-events: none; @@ -188,7 +188,7 @@ width: 100%; height: 100%; animation: 3000ms ease-in-out skeleton infinite; - background: $skeleton-element; + background: $skeleton-02; 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 index a1635c50c087..3a205c63c6f2 100644 --- a/packages/components/src/globals/scss/_theme-tokens.scss +++ b/packages/components/src/globals/scss/_theme-tokens.scss @@ -30,13 +30,13 @@ $input-label-weight: 400 !default; /// @type Color /// @access public /// @group global-themes -$disabled: $text-disabled !default; +$disabled: $disabled-02 !default; /// @type Color /// @access public /// @group global-themes /// @deprecated -$disabled-background-color: $layer-disabled !default; +$disabled-background-color: $disabled-01 !default; /// @type Color /// @access public @@ -67,7 +67,7 @@ $link-inverse-color: #6ea6ff !default; /// @type Color /// @access public /// @group tooltip -$tooltip-background-color: $background-inverse !default; +$tooltip-background-color: $inverse-02 !default; // Button @@ -191,13 +191,13 @@ $checkbox-border-width: 2px !default; /// @access public /// @group code-snippet /// @deprecated -$snippet-background-color: $field !default; +$snippet-background-color: $field-01 !default; /// @type Color /// @access public /// @group code-snippet /// TODO: Define for experimental -$snippet-border-color: $border-subtle !default; +$snippet-border-color: $ui-03 !default; // Content Switcher @@ -209,12 +209,12 @@ $content-switcher-border-radius: 0 !default; /// @type Number /// @access public /// @group content-switcher -$content-switcher-option-border: 1px solid $border-interactive !default; +$content-switcher-option-border: 1px solid $brand-01 !default; /// @type Color /// @access public /// @group content-switcher -$content-switcher-divider: $border-subtle !default; +$content-switcher-divider: $ui-03 !default; // Data Table @@ -226,7 +226,7 @@ $data-table-heading-transform: uppercase !default; /// @type Value /// @access public /// @group data-table -$data-table-heading-border-bottom: 1px solid $border-interactive !default; +$data-table-heading-border-bottom: 1px solid $brand-01 !default; /// @type Number /// @access public @@ -236,12 +236,12 @@ $data-table-row-height: 2rem !default; /// @type Color /// @access public /// @group data-table -$data-table-zebra-color: $layer-accent !default; +$data-table-zebra-color: $ui-02 !default; /// @type Color /// @access public /// @group data-table -$data-table-column-hover: $layer-selected-hover !default; +$data-table-column-hover: $hover-selected-ui !default; // Date Picker @@ -256,13 +256,13 @@ $date-picker-in-range-background-color: $ibm-color__blue-20 !default; /// @type Color /// @access public /// @group modal -$modal-border-top: 4px solid $border-interactive !default; +$modal-border-top: $brand-01 4px solid !default; /// @type Color /// @access public /// @group modal /// @deprecated -$modal-footer-background-color: $layer-accent !default; +$modal-footer-background-color: $ui-03 !default; // Notification @@ -316,12 +316,12 @@ $progress-indicator-line-offset: 0.625rem !default; /// @type Color /// @access public /// @group copy-button -$copy-active: $layer-active !default; +$copy-active: $active-ui !default; /// @type Color /// @access public /// @group copy-button -$copy-btn-feedback: $background-inverse !default; +$copy-btn-feedback: $inverse-02 !default; // Radio Button @@ -347,22 +347,22 @@ $structured-list-text-transform: none !default; /// @type Value /// @access public /// @group tabs -$tab-underline-color: 2px solid $border-subtle !default; +$tab-underline-color: 2px solid $ui-03 !default; /// @type Value /// @access public /// @group tabs -$tab-underline-color-hover: 2px solid $border-strong !default; +$tab-underline-color-hover: 2px solid $ui-04 !default; /// @type Color /// @access public /// @group tabs -$tab-text-disabled: $text-disabled !default; +$tab-text-disabled: $disabled-02 !default; /// @type Value /// @access public /// @group tabs -$tab-underline-disabled: 2px solid $border-disabled !default; +$tab-underline-disabled: 2px solid $disabled-01 !default; // Skeleton Loading @@ -370,7 +370,7 @@ $tab-underline-disabled: 2px solid $border-disabled !default; /// @access public /// @group skeleton /// TODO: Remove this in next major release -$skeleton: $skeleton-background !default; +$skeleton: $skeleton-01 !default; // Light UI @@ -408,5 +408,4 @@ $skeleton: $skeleton-background !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 index 45558fc1a312..6f49c2fce029 100644 --- a/packages/components/src/globals/scss/_tooltip.scss +++ b/packages/components/src/globals/scss/_tooltip.scss @@ -41,9 +41,9 @@ rem(8px) rem(16px), rem(3px) rem(16px) ); - background-color: $background-inverse; + background-color: $inverse-02; border-radius: rem(2px); - color: $text-inverse; + color: $inverse-01; font-weight: 400; text-align: left; transform: translateX(-50%); @@ -289,25 +289,25 @@ @if ($position == 'top') { top: -$caret-spacing; border-width: rem(5px) rem(4px) 0 rem(4px); - border-color: $background-inverse transparent transparent transparent; + border-color: $inverse-02 transparent transparent transparent; transform: translate(-50%, -100%); } @if ($position == 'right') { right: -$caret-spacing; border-width: rem(4px) rem(5px) rem(4px) 0; - border-color: transparent $background-inverse transparent transparent; + border-color: transparent $inverse-02 transparent transparent; transform: translate(100%, -50%); } @if ($position == 'bottom') { bottom: -$caret-spacing; border-width: 0 rem(4px) rem(5px) rem(4px); - border-color: transparent transparent $background-inverse transparent; + border-color: transparent transparent $inverse-02 transparent; transform: translate(-50%, 100%); } @if ($position == 'left') { left: -$caret-spacing; border-width: rem(4px) 0 rem(4px) rem(5px); - border-color: transparent transparent transparent $background-inverse; + border-color: transparent transparent transparent $inverse-02; transform: translate(-100%, -50%); } } diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js index 84559ab92e1a..74623c0c1814 100644 --- 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', + title: 'Components/Skeleton/SkeletonPlaceholder', decorators: [withKnobs], parameters: { @@ -35,7 +35,7 @@ export default { }, }; -export const _SkeletonPlaceholder = () => ( +export const Default = () => (