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
Talend · Aug 30, 2023 · fbce059 · fbce059
1 parent 72b95c8
commit fbce059
Show file tree

Hide file tree

Showing 15 changed files with 36 additions and 25 deletions.
diff --git a/.changeset/fresh-dolls-kneel.md 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
@@ -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
@@ -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/...esign-system/src/components/InlineMessage/variations/InlineMessageInformation.module.scss b/...esign-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
@@ -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
@@ -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
@@ -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
@@ -6,6 +6,7 @@ import DefinitionListColors from './components/DefinitionList/DefinitionListColo
 const colorOrder = [
 	'neutral',
 	'accent',
+	'info',
 	'success',
 	'warning',
 	'danger',

diff --git a/...ybook/.storybook/docs/tokensDocHelpers/components/DefinitionList/DefinitionListColors.tsx b/...ybook/.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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 	}
 }