From fbce059c2c998fd14d694cccf7f2f64b4ba8542d Mon Sep 17 00:00:00 2001 From: Gbacc Date: Wed, 30 Aug 2023 15:13:03 +0200 Subject: [PATCH] fix(ARCH-720): Improve usage of info tokens and fix bootstrap button (#4850) * fix(ARCH-720): Improve usage of info tokens and fix bootstrap button * update changeset --- .changeset/fresh-dolls-kneel.md | 9 +++++++++ .../src/CollapsiblePanel/CollapsiblePanel.module.scss | 4 ++-- packages/components/src/Status/Status.module.scss | 4 ++-- .../variations/InlineMessageInformation.module.scss | 6 +++--- .../Message/variations/MessageInformation.module.scss | 2 +- .../src/components/Status/Primitive/Status.module.scss | 4 ++-- .../components/Tag/variations/TagInformation.module.scss | 4 ++-- .../.storybook/docs/tokensDocHelpers/TokensColor.tsx | 1 + .../components/DefinitionList/DefinitionListColors.tsx | 1 + packages/theme/src/theme/_labels.scss | 6 +++--- packages/theme/src/theme/_panels.scss | 6 +++--- packages/theme/src/theme/_tables.scss | 4 ++-- packages/theme/src/theme/_type.scss | 2 +- packages/theme/src/theme/_variables.scss | 2 +- packages/theme/src/theme/alerts.scss | 6 +++--- 15 files changed, 36 insertions(+), 25 deletions(-) create mode 100644 .changeset/fresh-dolls-kneel.md diff --git a/.changeset/fresh-dolls-kneel.md b/.changeset/fresh-dolls-kneel.md new file mode 100644 index 00000000000..4a80bd68a27 --- /dev/null +++ b/.changeset/fresh-dolls-kneel.md @@ -0,0 +1,9 @@ +--- +'@talend/design-system': patch +'@talend/react-components': patch +'@talend/bootstrap-theme': patch +--- + +Improve usage of design tokens for info variants + + diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss index ca6827da181..9d5d3bafbfd 100644 --- a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss +++ b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss @@ -85,11 +85,11 @@ $tc-collapsible-panel-padding-larger: $padding-larger !default; &.info { :global(.panel-heading) { - border-left-color: tokens.$coral-color-accent-text; + border-left-color: tokens.$coral-color-info-text; } :global(.tc-status-label) { - color: tokens.$coral-color-accent-text; + color: tokens.$coral-color-info-text; } } diff --git a/packages/components/src/Status/Status.module.scss b/packages/components/src/Status/Status.module.scss index c63aed468b0..923bd97383a 100644 --- a/packages/components/src/Status/Status.module.scss +++ b/packages/components/src/Status/Status.module.scss @@ -21,7 +21,7 @@ $tc-status-space-btn-icon-label: 5px !default; } &.info { - color: tokens.$coral-color-accent-icon; + color: tokens.$coral-color-info-icon; } &.success { @@ -45,7 +45,7 @@ $tc-status-space-btn-icon-label: 5px !default; font-weight: 600; &.info { - color: tokens.$coral-color-accent-text; + color: tokens.$coral-color-info-text; } &.success { diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.module.scss b/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.module.scss index 1767c6c77e7..7d255e6c298 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.module.scss +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.module.scss @@ -2,11 +2,11 @@ .information { &_withBackground { - background-color: tokens.$coral-color-accent-background; - box-shadow: tokens.$coral-elevation-shadow-accent; + background-color: tokens.$coral-color-info-background; + box-shadow: tokens.$coral-elevation-shadow-info; } &__icon { - color: tokens.$coral-color-accent-icon; + color: tokens.$coral-color-info-icon; } } diff --git a/packages/design-system/src/components/Message/variations/MessageInformation.module.scss b/packages/design-system/src/components/Message/variations/MessageInformation.module.scss index d4da7ebac92..7b57987a95d 100644 --- a/packages/design-system/src/components/Message/variations/MessageInformation.module.scss +++ b/packages/design-system/src/components/Message/variations/MessageInformation.module.scss @@ -1,5 +1,5 @@ @use '~@talend/design-tokens/lib/tokens'; .information_border { - border-left-color: tokens.$coral-color-accent-icon; + border-left-color: tokens.$coral-color-info-icon; } diff --git a/packages/design-system/src/components/Status/Primitive/Status.module.scss b/packages/design-system/src/components/Status/Primitive/Status.module.scss index 156bd28449a..37802ebe77a 100644 --- a/packages/design-system/src/components/Status/Primitive/Status.module.scss +++ b/packages/design-system/src/components/Status/Primitive/Status.module.scss @@ -39,10 +39,10 @@ } &.inProgress { - color: tokens.$coral-color-accent-text; + color: tokens.$coral-color-info-text; .status__icon { - color: tokens.$coral-color-accent-icon; + color: tokens.$coral-color-info-icon; } } diff --git a/packages/design-system/src/components/Tag/variations/TagInformation.module.scss b/packages/design-system/src/components/Tag/variations/TagInformation.module.scss index da1dded40a8..3057d15a389 100644 --- a/packages/design-system/src/components/Tag/variations/TagInformation.module.scss +++ b/packages/design-system/src/components/Tag/variations/TagInformation.module.scss @@ -1,6 +1,6 @@ @use '~@talend/design-tokens/lib/tokens'; .tag { - color: tokens.$coral-color-accent-text-strong; - background: tokens.$coral-color-accent-background; + color: tokens.$coral-color-info-text-strong; + background: tokens.$coral-color-info-background; } diff --git a/packages/storybook/.storybook/docs/tokensDocHelpers/TokensColor.tsx b/packages/storybook/.storybook/docs/tokensDocHelpers/TokensColor.tsx index d3d85675123..bfde989da6f 100644 --- a/packages/storybook/.storybook/docs/tokensDocHelpers/TokensColor.tsx +++ b/packages/storybook/.storybook/docs/tokensDocHelpers/TokensColor.tsx @@ -6,6 +6,7 @@ import DefinitionListColors from './components/DefinitionList/DefinitionListColo const colorOrder = [ 'neutral', 'accent', + 'info', 'success', 'warning', 'danger', diff --git a/packages/storybook/.storybook/docs/tokensDocHelpers/components/DefinitionList/DefinitionListColors.tsx b/packages/storybook/.storybook/docs/tokensDocHelpers/components/DefinitionList/DefinitionListColors.tsx index 68f729adec6..5b28051eeed 100644 --- a/packages/storybook/.storybook/docs/tokensDocHelpers/components/DefinitionList/DefinitionListColors.tsx +++ b/packages/storybook/.storybook/docs/tokensDocHelpers/components/DefinitionList/DefinitionListColors.tsx @@ -7,6 +7,7 @@ const TokensDefinitionList = ({ tokens }: TokensProps) => { const filteredTokens = { neutral: tokens.filter((token: Token) => token.name.includes('ColorNeutral')), accent: tokens.filter((token: Token) => token.name.includes('ColorAccent')), + info: tokens.filter((token: Token) => token.name.includes('ColorInfo')), success: tokens.filter((token: Token) => token.name.includes('ColorSuccess')), danger: tokens.filter((token: Token) => token.name.includes('ColorDanger')), warning: tokens.filter((token: Token) => token.name.includes('ColorWarning')), diff --git a/packages/theme/src/theme/_labels.scss b/packages/theme/src/theme/_labels.scss index 4221e0a184e..e2766caffcf 100644 --- a/packages/theme/src/theme/_labels.scss +++ b/packages/theme/src/theme/_labels.scss @@ -81,13 +81,13 @@ a.label { } .label-info { - color: tokens.$coral-color-accent-text; - background: tokens.$coral-color-accent-background; + color: tokens.$coral-color-info-text; + background: tokens.$coral-color-info-background; &[href] { &:hover, &:focus { - background: tokens.$coral-color-accent-background; + background: tokens.$coral-color-info-background; } } } diff --git a/packages/theme/src/theme/_panels.scss b/packages/theme/src/theme/_panels.scss index 5a64028b193..d2813d4ff62 100644 --- a/packages/theme/src/theme/_panels.scss +++ b/packages/theme/src/theme/_panels.scss @@ -41,11 +41,11 @@ } .panel-info { - border-color: tokens.$coral-color-accent-border; + border-color: tokens.$coral-color-info-border; .panel-heading { - color: tokens.$coral-color-accent-text; - background-color: tokens.$coral-color-accent-background; + color: tokens.$coral-color-info-text; + background-color: tokens.$coral-color-info-background; } } diff --git a/packages/theme/src/theme/_tables.scss b/packages/theme/src/theme/_tables.scss index 1f30968f09c..c7f728db5c9 100644 --- a/packages/theme/src/theme/_tables.scss +++ b/packages/theme/src/theme/_tables.scss @@ -23,7 +23,7 @@ > tr.info { td { color: tokens.$coral-color-neutral-text; - background: tokens.$coral-color-accent-background; + background: tokens.$coral-color-info-background; } } @@ -68,7 +68,7 @@ > tr.info:hover { td { - background: tokens.$coral-color-accent-background-hover; + background: tokens.$coral-color-info-background-hover; } } diff --git a/packages/theme/src/theme/_type.scss b/packages/theme/src/theme/_type.scss index d1e5beb2cea..24701abc218 100644 --- a/packages/theme/src/theme/_type.scss +++ b/packages/theme/src/theme/_type.scss @@ -59,7 +59,7 @@ p, } .text-info { - color: tokens.$coral-color-accent-text; + color: tokens.$coral-color-info-text; } a { diff --git a/packages/theme/src/theme/_variables.scss b/packages/theme/src/theme/_variables.scss index 4974a413a09..0156d4f5877 100644 --- a/packages/theme/src/theme/_variables.scss +++ b/packages/theme/src/theme/_variables.scss @@ -690,7 +690,7 @@ $progress-bar-warning-bg: tokens.$coral-color-warning-background-strong !default //** Danger progress bar color $progress-bar-danger-bg: tokens.$coral-color-danger-background-strong !default; //** Info progress bar color -$progress-bar-info-bg: tokens.$coral-color-accent-background-strong !default; +$progress-bar-info-bg: tokens.$coral-color-info-background-strong !default; //== List group // diff --git a/packages/theme/src/theme/alerts.scss b/packages/theme/src/theme/alerts.scss index 756e861d7cb..02f02c109ff 100644 --- a/packages/theme/src/theme/alerts.scss +++ b/packages/theme/src/theme/alerts.scss @@ -32,10 +32,10 @@ .alert-info { color: tokens.$coral-color-neutral-text; - background-color: tokens.$coral-color-accent-background; - border-color: tokens.$coral-color-accent-border; + background-color: tokens.$coral-color-info-background; + border-color: tokens.$coral-color-info-border; .alert-link { - color: tokens.$coral-color-accent-text; + color: tokens.$coral-color-info-text; } }