From 38046125e501fdb62862f8c70912d669c77fb7f9 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Fri, 23 Apr 2021 06:06:47 -0700 Subject: [PATCH] feat(tokens): update color tokens pt3 (#8376) * feat(Tag): update color tokens * feat(Textarea): update color tokens * feat(TextInput): update color tokens * feat(Tile): update color tokens * feat(TimePicker): update color tokens * feat(Toggle): start token update * feat(Toggle): finish token update * feat(Tooltip): update color tokens * feat(Treeview): update color tokens * feat(UIShell): update a few color tokens * feat(globals): update global scssto new color tokens * fix(tokens): update tokens based on feedback Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../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 | 34 +++++++----- .../components/src/components/tile/_tile.scss | 55 ++++++++++++------- .../components/time-picker/_time-picker.scss | 5 +- .../src/components/toggle/_toggle.scss | 52 ++++++++++-------- .../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, 198 insertions(+), 181 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 d74464727f56..287095b71842 100644 --- a/packages/components/src/components/data-table/_data-table-core.scss +++ b/packages/components/src/components/data-table/_data-table-core.scss @@ -275,9 +275,9 @@ tbody tr:not(.#{$prefix}--parent-row):nth-child(even) td { - 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 b05c3e570679..7df59bbc097d 100644 --- a/packages/components/src/components/data-table/_data-table-expandable.scss +++ b/packages/components/src/components/data-table/_data-table-expandable.scss @@ -273,9 +273,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 { - 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/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss index bdbe468fda8e..00462c1e7d12 100644 --- a/packages/components/src/components/tag/_tag.scss +++ b/packages/components/src/components/tag/_tag.scss @@ -127,13 +127,17 @@ } .#{$prefix}--tag--high-contrast { - @include tag-theme($inverse-02, $inverse-01, $inverse-hover-ui); + @include tag-theme( + $background-inverse, + $text-inverse, + $background-inverse-hover + ); } .#{$prefix}--tag--disabled, .#{$prefix}--tag--filter.#{$prefix}--tag--disabled, .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled { - @include tag-theme($disabled-01, $disabled-02); + @include tag-theme($layer-disabled, $text-disabled); &:hover { cursor: not-allowed; @@ -227,7 +231,7 @@ } .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus { - box-shadow: inset 0 0 0 1px $inverse-focus-ui; + box-shadow: inset 0 0 0 1px $focus-inverse; } .#{$prefix}--tag--filter.#{$prefix}--tag--disabled @@ -236,7 +240,7 @@ } .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg { - fill: $disabled-02; + fill: $icon-disabled; } // small tags @@ -258,7 +262,10 @@ // Skeleton state .#{$prefix}--tag.#{$prefix}--skeleton { @include skeleton; - @include tag-theme($bg-color: $skeleton-01, $text-color: $text-01); + @include tag-theme( + $bg-color: $skeleton-background, + $text-color: $text-primary + ); width: rem(60px); overflow: hidden; diff --git a/packages/components/src/components/text-area/_text-area.scss b/packages/components/src/components/text-area/_text-area.scss index 0831292b7c92..23220e55f978 100644 --- a/packages/components/src/components/text-area/_text-area.scss +++ b/packages/components/src/components/text-area/_text-area.scss @@ -30,10 +30,10 @@ height: 100%; min-height: rem(40px); padding: rem(11px) $carbon--spacing-05; - color: $text-01; - background-color: $field-01; + color: $text-primary; + background-color: $field; border: none; - border-bottom: 1px solid $ui-04; + border-bottom: 1px solid $border-strong; transition: background-color $duration--fast-01 motion(standard, productive), outline $duration--fast-01 motion(standard, productive); resize: vertical; @@ -49,6 +49,7 @@ @include type-style('body-long-01'); } + // V11: Possibly deprecate .#{$prefix}--text-area--light { background-color: $field-02; } @@ -67,24 +68,25 @@ position: absolute; top: $carbon--spacing-04; right: $carbon--spacing-05; - fill: $support-01; + fill: $support-error; } //----------------------------- // Disabled //----------------------------- .#{$prefix}--text-area:disabled { - color: $disabled-02; - background-color: $disabled-01; + color: $text-disabled; + background-color: $field-disabled; border-bottom: 1px solid transparent; outline: none; cursor: not-allowed; } .#{$prefix}--text-area:disabled::placeholder { - color: $disabled-02; + color: $text-disabled; } + // 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 a13132e7b89d..d3c99bdaeecb 100644 --- a/packages/components/src/components/text-input/_text-input.scss +++ b/packages/components/src/components/text-input/_text-input.scss @@ -28,10 +28,10 @@ width: 100%; height: rem(40px); padding: 0 $carbon--spacing-05; - color: $text-01; - background-color: $field-01; + color: $text-primary; + background-color: $field; border: none; - border-bottom: 1px solid $ui-04; + border-bottom: 1px solid $border-strong; transition: background-color $duration--fast-01 motion(standard, productive), outline $duration--fast-01 motion(standard, productive); @@ -63,6 +63,7 @@ @include placeholder-colors; } + // V11: Possibly deprecate .#{$prefix}--text-input--light { background-color: $field-02; } @@ -82,11 +83,11 @@ top: 50%; right: $carbon--spacing-05; transform: translateY(-50%); - fill: $support-01; + fill: $support-error; } .#{$prefix}--text-input__invalid-icon--warning { - fill: $support-03; + fill: $support-warning; path:first-of-type { opacity: 1; @@ -121,7 +122,7 @@ svg { transition: fill $duration--fast-01 motion(standard, productive); - fill: $icon-02; + fill: $icon-secondary; // Windows, Firefox HCM Fix @media screen and (-ms-high-contrast: active), @@ -136,10 +137,11 @@ @include focus-outline('outline'); } - .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover, + .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover + svg, .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus svg { - fill: $icon-01; + fill: $icon-primary; } .#{$prefix}--text-input--invalid, @@ -177,10 +179,10 @@ + .#{$prefix}--text-input--password__visibility__toggle svg { cursor: not-allowed; - fill: $disabled-02; + fill: $icon-disabled; &:hover { - fill: $disabled-02; + fill: $icon-disabled; } } @@ -190,20 +192,21 @@ .#{$prefix}--text-input:disabled { @include focus-outline('reset'); - color: $disabled-02; - background-color: $disabled-01; + color: $text-disabled; + background-color: $field-disabled; border-bottom: 1px solid transparent; // Needed to fix disabled text in Safari #6673 -webkit-text-fill-color: currentColor; cursor: not-allowed; } + // V11: Possibly deprecate .#{$prefix}--text-input--light:disabled { background-color: $field-02; } .#{$prefix}--text-input:disabled::placeholder { - color: $disabled-02; + color: $text-disabled; opacity: 1; } @@ -234,7 +237,7 @@ //----------------------------- .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper { position: relative; - background: $field-01; + background: $field; transition: background-color $duration--fast-01 motion(standard, productive), outline $duration--fast-01 motion(standard, productive); } @@ -274,7 +277,7 @@ + .#{$prefix}--text-input__divider { display: block; margin: 0 1rem; - border-color: $ui-03; + border-color: $border-subtle; border-style: solid; border-bottom: none; } @@ -283,6 +286,7 @@ 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 d5161ce60e2e..e6b0b31028af 100644 --- a/packages/components/src/components/tile/_tile.scss +++ b/packages/components/src/components/tile/_tile.scss @@ -24,7 +24,7 @@ min-width: 8rem; min-height: 4rem; padding: $carbon--spacing-05; - background-color: $ui-01; + background-color: $layer; outline: 2px solid transparent; outline-offset: -2px; @@ -33,6 +33,7 @@ } } + // V11: Possibly deprecate .#{$prefix}--tile--light { background-color: $ui-02; } @@ -44,7 +45,7 @@ transition: $duration--moderate-01 motion(standard, productive); &:hover { - background: $hover-ui; + background: $layer-hover; } } @@ -71,7 +72,7 @@ @include reset; @include type-style('body-short-01'); - color: $text-01; + color: $text-primary; text-decoration: none; } @@ -79,19 +80,16 @@ .#{$prefix}--tile--clickable:active, .#{$prefix}--tile--clickable:visited, .#{$prefix}--tile--clickable:visited:hover { - color: $text-01; + color: $text-primary; text-decoration: none; } // Disabled ClickableTile - .#{$prefix}--tile--clickable.#{$prefix}--link--disabled { - color: $disabled-02; - } - + .#{$prefix}--tile--clickable.#{$prefix}--link--disabled, .#{$prefix}--tile--clickable:hover.#{$prefix}--link--disabled { display: block; - color: $disabled-02; - background-color: $disabled-01; + color: $text-disabled; + background-color: $layer-disabled; } .#{$prefix}--tile--selectable { @@ -115,7 +113,7 @@ svg { border-radius: 50%; - fill: $icon-02; + fill: $icon-secondary; } &:focus { @@ -135,7 +133,7 @@ margin-left: $carbon--spacing-03; transform-origin: center; transition: $duration--fast-02 motion(standard, productive); - fill: $ui-05; + fill: $icon-primary; // Windows, Firefox HCM Fix @media screen and (-ms-high-contrast: active), @@ -202,7 +200,7 @@ } .#{$prefix}--tile--is-selected { - border: 1px solid $ui-05; + border: 1px solid $layer-selected-inverse; } .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark { @@ -210,7 +208,7 @@ } .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark svg { - fill: $ui-05; + fill: $icon-primary; // Windows, Firefox HCM Fix @media screen and (-ms-high-contrast: active), @@ -222,18 +220,18 @@ // Fix double border .#{$prefix}--tile-input--checked + .#{$prefix}--tile--is-selected { - border-top: 1px solid $ui-01; + border-top: 1px solid $layer; } .#{$prefix}--tile:not(.#{$prefix}--tile--is-selected) + .#{$prefix}--tile-input--checked + .#{$prefix}--tile--is-selected { - border-top: 1px solid $ui-05; + border-top: 1px solid $layer-selected-inverse; } .#{$prefix}--tile-input--checked:first-of-type + .#{$prefix}--tile--is-selected { - border-top: 1px solid $ui-05; + border-top: 1px solid $layer-selected-inverse; } .#{$prefix}--tile-content { @@ -250,23 +248,38 @@ } .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable { - color: $disabled-02; - background-color: $ui-01; + color: $text-disabled; + background-color: $layer; 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 { - outline-color: $disabled-02; + border-color: $button-disabled; + } + + // Disabled style overrides necessary for double border fix (L223) + .#{$prefix}--tile-input--checked + + .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected { + border-top: 1px solid $layer; + } + + .#{$prefix}--tile-input--checked:first-of-type + + .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected, + .#{$prefix}--tile:not(.#{$prefix}--tile--is-selected) + + .#{$prefix}--tile-input--checked + + .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected { + border-top: 1px solid $button-disabled; } .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark svg { - fill: $disabled-02; + fill: $icon-disabled; } } diff --git a/packages/components/src/components/time-picker/_time-picker.scss b/packages/components/src/components/time-picker/_time-picker.scss index 7209de360c34..c4e8537ffe4d 100644 --- a/packages/components/src/components/time-picker/_time-picker.scss +++ b/packages/components/src/components/time-picker/_time-picker.scss @@ -61,16 +61,17 @@ } } + // V11: Possibly deprecate .#{$prefix}--time-picker--light .#{$prefix}--select-input { background-color: $field-02; &:hover { - background-color: $hover-ui; + background-color: $field-hover; } &:disabled, &:hover:disabled { - color: $disabled-02; + color: $text-disabled; background-color: transparent; border-bottom: 1px solid transparent; cursor: not-allowed; diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss index b38e0c04b5c2..8ea818df3ce2 100644 --- a/packages/components/src/components/toggle/_toggle.scss +++ b/packages/components/src/components/toggle/_toggle.scss @@ -37,6 +37,10 @@ cursor: pointer; } + // V11: It looks like this block no longer applies to any element. + // May need to check with Vue/Angular implementations, + // but I do not see any `toggle__appearance` in the rendered HTML. + // There seem to be quite a few references throughout this file. .#{$prefix}--toggle__appearance { position: relative; width: carbon--rem(48px); @@ -50,7 +54,7 @@ box-sizing: border-box; width: carbon--rem(48px); height: carbon--rem(24px); - background-color: $ui-04; + background-color: $toggle-off; 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; @@ -70,7 +74,7 @@ box-sizing: border-box; width: carbon--rem(18px); height: carbon--rem(18px); - background-color: $icon-03; + background-color: $icon-on-color; border-radius: 50%; cursor: pointer; transition: transform $duration--fast-01 motion(exit, productive); @@ -87,7 +91,7 @@ height: carbon--rem(5px); transform: scale(0.2); transition: $duration--fast-01 motion(exit, productive); - fill: $icon-03; + fill: $icon-on-color; } .#{$prefix}--toggle__text--left, @@ -125,11 +129,11 @@ + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance { &::before { - background-color: $support-02; + background-color: $support-success; } &::after { - background-color: $icon-03; + background-color: $icon-on-color; transform: translateX(carbon--rem(24px)); } } @@ -148,7 +152,7 @@ .#{$prefix}--toggle:active + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance::before { - box-shadow: 0 0 0 1px $ui-02, 0 0 0 3px $focus; + box-shadow: 0 0 0 1px $layer-accent, 0 0 0 3px $focus; } //---------------------------------------------- @@ -162,11 +166,11 @@ + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance { &::before { - background-color: $disabled-01; + background-color: $layer-disabled; } &::after { - background-color: $disabled-02; + background-color: $button-disabled; } &::before, @@ -182,7 +186,7 @@ .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--right { - color: $disabled; + color: $text-disabled; } .#{$prefix}--toggle:disabled:active @@ -194,7 +198,7 @@ .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__check { - fill: $disabled-02; + fill: $icon-disabled; } //---------------------------------------------- @@ -227,7 +231,7 @@ + .#{$prefix}--toggle__label .#{$prefix}--toggle__check { transform: scale(1) translateX(carbon--rem(16px)); - fill: $support-02; + fill: $support-success; } .#{$prefix}--toggle--small @@ -264,7 +268,7 @@ display: flex; flex-direction: column; align-items: flex-start; - color: $text-02; + color: $text-secondary; cursor: pointer; } @@ -284,7 +288,7 @@ box-sizing: border-box; width: carbon--rem(48px); height: carbon--rem(24px); - background-color: $ui-04; + background-color: $toggle-off; 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; @@ -310,7 +314,7 @@ box-sizing: border-box; width: carbon--rem(18px); height: carbon--rem(18px); - background-color: $icon-03; + background-color: $icon-on-color; border-radius: 50%; transition: transform $duration--fast-01 motion(exit, productive); content: ''; @@ -359,11 +363,11 @@ + .#{$prefix}--toggle-input__label > .#{$prefix}--toggle__switch { &::before { - background-color: $support-02; + background-color: $support-success; } &::after { - background-color: $icon-03; + background-color: $icon-on-color; transform: translateX(carbon--rem(24px)); } } @@ -377,7 +381,7 @@ .#{$prefix}--toggle-input:active + .#{$prefix}--toggle-input__label > .#{$prefix}--toggle__switch::before { - box-shadow: 0 0 0 1px $ui-02, 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), @@ -391,7 +395,7 @@ // Disabled // --------------------------------------------- .#{$prefix}--toggle-input:disabled + .#{$prefix}--toggle-input__label { - color: $disabled; + color: $text-disabled; cursor: not-allowed; } @@ -401,11 +405,11 @@ cursor: not-allowed; &::before { - background-color: $disabled-01; + background-color: $layer-disabled; } &::after { - background-color: $disabled-02; + background-color: $icon-disabled; } &::before, @@ -426,14 +430,14 @@ .#{$prefix}--toggle-input:disabled + .#{$prefix}--toggle-input__label > .#{$prefix}--toggle__switch::before { - background-color: $disabled-02; + background-color: $button-disabled; } .#{$prefix}--data-table .#{$prefix}--toggle-input:disabled + .#{$prefix}--toggle-input__label > .#{$prefix}--toggle__switch::after { - background-color: $disabled-03; + background-color: $icon-on-color-disabled; } //---------------------------------------------- @@ -469,14 +473,14 @@ .#{$prefix}--toggle__check { transform: scale(1) translateX(carbon--rem(16px)); - fill: $support-02; + fill: $support-success; } } .#{$prefix}--toggle-input--small:disabled:checked + .#{$prefix}--toggle-input__label .#{$prefix}--toggle__check { - fill: $disabled-01; + fill: $layer-disabled; } //---------------------------------------------- diff --git a/packages/components/src/components/toolbar/_toolbar.scss b/packages/components/src/components/toolbar/_toolbar.scss index 7760b16dc8a9..3c67e5b015a1 100644 --- a/packages/components/src/components/toolbar/_toolbar.scss +++ b/packages/components/src/components/toolbar/_toolbar.scss @@ -22,6 +22,7 @@ $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 09f38cf8df55..7e4596a4b39a 100644 --- a/packages/components/src/components/tooltip/_tooltip.scss +++ b/packages/components/src/components/tooltip/_tooltip.scss @@ -48,7 +48,7 @@ margin: 0 auto; margin-top: 1px; margin-left: 50%; - border-color: transparent transparent $inverse-02 transparent; + border-color: transparent transparent $background-inverse transparent; border-style: solid; border-width: 0 rem(4px) rem(5px) rem(4px); content: ''; @@ -62,10 +62,10 @@ height: rem(24px); margin-left: 50%; padding: 0 1rem; - color: $inverse-01; + color: $text-inverse; font-weight: 400; white-space: nowrap; - background-color: $inverse-02; + background-color: $background-inverse; border-radius: rem(2px); transform: translateX(-50%); content: attr(aria-label); @@ -135,6 +135,7 @@ /// @access private /// @deprecated /// @group tooltip +// V11: possibly remove in V11 @mixin tooltip--definition--legacy { .#{$prefix}--tooltip--definition { @include reset; @@ -146,8 +147,8 @@ position: relative; display: inline-flex; - color: $text-01; - border-bottom: 1px dotted $interactive-01; + color: $text-primary; + border-bottom: 1px dotted $highlight; &:hover { cursor: pointer; @@ -179,7 +180,7 @@ width: rem(208px); margin-top: $carbon--spacing-04; padding: $carbon--spacing-03 $carbon--spacing-05; - background: $inverse-02; + background: $background-inverse; border-radius: rem(2px); cursor: pointer; pointer-events: none; @@ -187,7 +188,7 @@ p { @include type-style('body-short-01'); - color: $inverse-01; + color: $text-inverse; } .#{$prefix}--tooltip__caret { @@ -197,7 +198,7 @@ width: 0.6rem; height: 0.6rem; margin-left: $carbon--spacing-05; - background: $inverse-02; + background: $background-inverse; } } @@ -250,6 +251,7 @@ /// @access private /// @deprecated /// @group tooltip +// V11: possibly remove in V11 @mixin tooltip--icon--legacy { // Icon CSS only tooltip .#{$prefix}--tooltip--icon { @@ -264,7 +266,7 @@ &:hover, &:focus { svg { - fill: $icon-02; + fill: $icon-secondary; } } @@ -325,7 +327,7 @@ display: inline-flex; align-items: center; - color: $text-02; + color: $text-secondary; &:focus { @include focus-outline('border'); @@ -333,7 +335,7 @@ } .#{$prefix}--tooltip__trigger svg { - fill: $icon-02; + fill: $icon-secondary; // Windows, Firefox HCM Fix @media screen and (-ms-high-contrast: active), @@ -354,7 +356,7 @@ &:focus { @include focus-outline('border'); - fill: $hover-primary; + fill: $button-primary-hover; } } @@ -378,9 +380,9 @@ max-width: rem(288px); margin-top: $carbon--spacing-02; padding: $carbon--spacing-05; - color: $inverse-01; + color: $text-inverse; word-wrap: break-word; - background: $inverse-02; + background: $background-inverse; border-radius: rem(2px); // Windows, Firefox HCM Fix @@ -391,9 +393,11 @@ } // @todo this can be deprecated in v11 since focus should always be on the content container not the tooltip + // V11: remove in V11 &:focus { outline: 0; - box-shadow: inset 0 0 0 1px $inverse-02, inset 0 0 0 2px $ui-background; + box-shadow: inset 0 0 0 1px $background-inverse, + inset 0 0 0 2px $background; } &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-start, @@ -457,27 +461,27 @@ } .#{$prefix}--btn:focus { - border-color: $inverse-focus-ui; - outline-color: $inverse-02; + border-color: $focus-inverse; + outline-color: $background-inverse; } .#{$prefix}--link { - color: $inverse-link; + color: $link-inverse; font-size: rem(14px); &:focus { - outline: 1px solid $inverse-focus-ui; + outline: 1px solid $focus-inverse; outline-offset: 2px; } &:active, &:active:visited, &:active:visited:hover { - color: $inverse-01; + color: $text-inverse; } &:visited { - color: $inverse-link; + color: $link-inverse; } } @@ -497,7 +501,7 @@ height: 0; margin: 0 auto; border-right: $caret-size solid transparent; - border-bottom: $caret-size solid $inverse-02; + border-bottom: $caret-size solid $background-inverse; border-left: $caret-size solid transparent; content: ''; } @@ -567,13 +571,13 @@ .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition { @include type-style('label-01'); - border-bottom: rem(1px) dotted $text-02; + border-bottom: rem(1px) dotted $icon-secondary; 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-04; + border-bottom-color: $interactive; } .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition.#{$prefix}--tooltip--top { @@ -621,7 +625,7 @@ &:hover, &:focus { svg { - fill: $icon-02; + fill: $icon-secondary; // Windows, Firefox HCM Fix @media screen and (-ms-high-contrast: active), diff --git a/packages/components/src/components/treeview/_treeview.scss b/packages/components/src/components/treeview/_treeview.scss index 69711eaf2be0..d0586a454364 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; - color: $text-02; - background-color: $ui-01; + color: $text-secondary; + background-color: $layer; &:focus { outline: none; @@ -44,8 +44,8 @@ .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details { - color: $disabled-02; - background-color: $disabled-01; + color: $text-disabled; + background-color: $layer-disabled; } .#{$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: $disabled-02; + fill: $icon-disabled; } .#{$prefix}--tree-node--disabled, @@ -72,19 +72,19 @@ min-height: rem(32px); &:hover { - color: $text-01; - background-color: $hover-ui; + color: $text-primary; + background-color: $layer-hover; } } .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details { - color: $text-01; + color: $text-primary; } .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-parent-node__toggle-icon, .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon { - fill: $icon-01; + fill: $icon-primary; } .#{$prefix}--tree-leaf-node { @@ -122,7 +122,7 @@ .#{$prefix}--tree-parent-node__toggle-icon { transform: rotate(-90deg); transition: all $duration--fast-02 motion(standard, productive); - fill: $icon-02; + fill: $icon-secondary; } .#{$prefix}--tree-parent-node__toggle-icon--expanded { @@ -133,15 +133,15 @@ min-width: 1rem; min-height: 1rem; margin-right: $spacing-03; - fill: $icon-02; + fill: $icon-secondary; } .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label { - color: $text-01; - background-color: $selected-ui; + color: $text-primary; + background-color: $layer-selected; &:hover { - background-color: $hover-selected-ui; + background-color: $layer-selected-hover; } } @@ -151,7 +151,7 @@ .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label .#{$prefix}--tree-node__icon { - fill: $icon-01; + fill: $icon-primary; } .#{$prefix}--tree-node--active > .#{$prefix}--tree-node__label { @@ -163,7 +163,7 @@ left: 0; width: rem(4px); height: 100%; - background-color: $interactive-04; + background-color: $interactive; content: ''; } } diff --git a/packages/components/src/components/ui-shell/_content.scss b/packages/components/src/components/ui-shell/_content.scss index de7899770bc7..cf642d51c2d3 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: $ui-02; + background: $layer; 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 529a8d3a2703..779e2ca95462 100644 --- a/packages/components/src/components/ui-shell/_header.scss +++ b/packages/components/src/components/ui-shell/_header.scss @@ -245,7 +245,7 @@ bottom: -2px; left: 0; width: 100%; - border-bottom: 3px solid $inverse-support-04; + border-bottom: 3px solid $support-info-inverse; content: ''; } diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss index 72d728868c15..2322fccdd619 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-01; + background-color: $overlay; 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 b2bca683be6b..050e04206a63 100644 --- 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 index f861f415b8f6..3063cc8b24eb 100644 --- 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 index 9ae1932a0d5b..f37990904bdb 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-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 index dd659006d162..5dd694253e01 100644 --- 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,12 @@ $data-table-row-height: 2rem !default; /// @type Color /// @access public /// @group data-table -$data-table-zebra-color: $ui-02 !default; +$data-table-zebra-color: $layer-accent !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 +349,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 +409,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,22 +440,22 @@ $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 @@ -463,7 +463,7 @@ $tab-underline-disabled: 2px solid $disabled-01 !default; /// @access public /// @group skeleton /// TODO: Remove this in next major release -$skeleton: $skeleton-01 !default; +$skeleton: $skeleton-background !default; // Light UI @@ -501,4 +501,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 index 873b4af2a077..bdc55fe08369 100644 --- 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 index 74623c0c1814..84559ab92e1a 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/SkeletonPlaceholder', + title: 'Components/Skeleton', decorators: [withKnobs], parameters: { @@ -35,7 +35,7 @@ export default { }, }; -export const Default = () => ( +export const _SkeletonPlaceholder = () => (