feat(ARCH-720/components): use design tokens

.changeset/angry-moles-happen.md

@@ -0,0 +1,5 @@
+---
+'@talend/react-faceted-search': major
+---
+
+feat: use design-tokens for colors

.changeset/flat-crabs-visit.md

@@ -0,0 +1,5 @@
+---
+'@talend/react-dataviz': major
+---
+
+feat: colors now use design-tokens

.changeset/shaggy-islands-grow.md

@@ -0,0 +1,5 @@
+---
+'@talend/scripts-config-storybook-lib': minor
+---
+
+feat: add design token update in the toolbar

.changeset/strange-ligers-bathe.md

@@ -0,0 +1,5 @@
+---
+'@talend/react-forms': major
+---
+
+All colors are now based on design-tokens

.changeset/wet-dolls-compare.md

@@ -0,0 +1,43 @@
+---
+'@talend/react-components': major
+---
+
+Style now use design tokens instead of bootstrap sass variables
+
+We have updated the following components:
+
+* ActionBar
+* ActionIconToggle
+* AppLoader
+* Badge
+* CollapsiblePanel
+* Datalist
+* DataViewer
+* DateTimePickers + Legacy
+* Drawer
+* EditableText
+* Enumeration (bug on buttons)
+* FilterBar
+* FormatValue
+* GuidedTour
+* GridLayout aka Dashboard
+* HeaderBar
+* List (Virtualized and Composition)
+* ListView
+* MultiSelect
+* Notification
+* ObjectViewer
+* PieChart
+* Progress
+* RadarChart
+* ResourceList
+* ResourcePicker
+* RichLayout
+* Skeleton
+* Slider
+* Status
+* SubHeaderBar
+* Toggle
+* Tooltip
+* TreeView
+* Typeahead

packages/components/package.json

@@ -36,6 +36,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "@talend/bootstrap-theme": "^7.0.1",
+    "@talend/design-tokens": "^2.7.3",
     "@talend/react-a11y": "^1.1.0",
     "@talend/icons": "^6.58.1",
     "@talend/utils": "^2.5.1",

packages/components/src/ActionBar/ActionBar.module.scss

@@ -1,11 +1,11 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
-$tc-action-bar-background-color: $wild-sand !default;
 $tc-action-bar-margin: $padding-small $padding-large $padding-small 0 !default;
 
 .tc-actionbar-container {
 	padding: 0 $padding-small;
-	background: $tc-action-bar-background-color;
+	background: tokens.$coral-color-neutral-background-medium;
 	width: 100%;
 	display: flex;
 
@@ -61,19 +61,19 @@ $tc-action-bar-margin: $padding-small $padding-large $padding-small 0 !default;
 
 		&:global(.separated)::after {
 			content: '|';
-			color: $silver;
+			color: tokens.$coral-color-neutral-text;
 			margin-left: $padding-large;
 		}
 	}
 
 	:global(.divider) {
-		color: $silver;
+		color: tokens.$coral-color-neutral-text;
 		margin-right: $padding-normal;
 	}
 }
 
 :global(.modal-footer) .tc-actionbar-container {
-	background-color: $wild-sand;
+	background-color: transparent;
 
 	.navbar-left > *,
 	.navbar-center > *,

packages/components/src/ActionList/ActionList.component.js

@@ -88,6 +88,9 @@ function ActionList(props) {
 				theme['tc-action-list'],
 				'tc-action-list',
 				className,
+				{
+					'nav-inverse': props.reverse,
+				},
 			)}
 		>
 			{actions.map((action, index) => (
@@ -135,6 +138,7 @@ if (process.env.NODE_ENV !== 'production') {
 		onSelect: PropTypes.func,
 		selected: actionPropType,
 		className: PropTypes.string,
+		reverse: PropTypes.bool,
 	};
 }
 

packages/components/src/ActionList/ActionList.stories.js

@@ -58,6 +58,19 @@ export const Default = () => (
 	</div>
 );
 
+export const Reverse = () => (
+	<div style={{ display: 'inline-table' }}>
+		<ActionList
+			id="context"
+			actions={actions}
+			onSelect={action('onItemSelect')}
+			onToggleDock={action('onToggleDock')}
+			tooltipPlacement="top"
+			reverse
+		/>
+	</div>
+);
+
 export const WithCustomClassNames = () => (
 	<div>
 		<p>You can add your custom classnames to the container and items</p>

packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss

@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-dropdown-loader-padding: $padding-small !default;
 $tc-dropdown-button-right-padding: 0.8rem;
@@ -54,7 +55,7 @@ $tc-dropdown-button-right-padding: 0.8rem;
 		margin: -$tc-dropdown-loader-padding 0;
 		padding: $tc-dropdown-loader-padding 0;
 		text-align: center;
-		background: $concrete;
+		background: tokens.$coral-color-neutral-background-medium;
 
 		:global(.divider) + & {
 			margin: -($tc-dropdown-loader-padding - 1px) 0;

packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss

@@ -1,10 +1,10 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $tc-icon-toggle-size: 2.4rem !default;
 $tc-icon-toggle-icon-size: $svg-sm-size !default;
-$tc-icon-toggle-border: 1px solid $gray;
+$tc-icon-toggle-border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border !default;
 $tc-icon-toggle-tick-size: 12px !default;
-$tc-icon-toggle-tick-border: 1px solid $white;
 
 @mixin tc-icon-toggle($btn-size: $tc-icon-toggle-size, $icon-size: $tc-icon-toggle-icon-size) {
 	height: $btn-size;
@@ -32,7 +32,7 @@ $tc-icon-toggle-tick-border: 1px solid $white;
 	padding: 0;
 
 	svg {
-		color: $gray;
+		color: tokens.$coral-color-neutral-icon-weak;
 	}
 
 	&,
@@ -43,37 +43,41 @@ $tc-icon-toggle-tick-border: 1px solid $white;
 	&[disabled] {
 		&:hover,
 		&:focus {
-			border-color: $scooter;
+			border-color: tokens.$coral-color-accent-text;
 
 			svg {
-				color: $scooter;
+				color: tokens.$coral-color-accent-text;
 			}
 		}
 	}
 
 	&:hover,
 	&:active {
 		box-shadow: none;
-		border-color: $scooter;
+		border-color: tokens.$coral-color-accent-text;
 		background-color: transparent;
 
 		svg {
-			color: $scooter;
+			color: tokens.$coral-color-accent-text;
 		}
 	}
 
 	&.active {
-		background-color: $brand-primary;
-		border-color: $brand-primary;
+		background-color: tokens.$coral-color-accent-background-strong;
+		border-color: tokens.$coral-color-accent-background;
 
 		svg {
-			color: white;
+			color: tokens.$coral-color-accent-text-weak;
 		}
 
 		&:hover:not([disabled]),
 		&:active {
-			background-color: $scooter;
-			border-color: $scooter;
+			background-color: tokens.$coral-color-accent-background-hover;
+			border-color: tokens.$coral-color-accent-background-hover;
+
+			svg {
+				color: tokens.$coral-color-accent-text;
+			}
 		}
 	}
 
@@ -85,7 +89,7 @@ $tc-icon-toggle-tick-border: 1px solid $white;
 		border-radius: calc(#{$tc-icon-toggle-tick-size} / 2);
 		right: -0.4rem;
 		top: -0.4rem;
-		background: $scooter;
-		border: $tc-icon-toggle-tick-border;
+		background: tokens.$coral-color-accent-text;
+		border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
 	}
 }

packages/components/src/AppLoader/constant.js

@@ -12,6 +12,7 @@ body {
   height: 100vh;
   width: 100vw;
   background: #f6f6f6;
+  background: var(--coral-color-neutral-background-medium, #f6f6f6);
 }
 
 .tc-app-loader-icon {
@@ -40,6 +41,7 @@ body {
   height: 100%;
   opacity: 0;
   border-color: #ababab;
+  border-color: var(--coral-color-neutral-border, #ababab);
   opacity: 1;
   animation: app-loader-spin 5332ms cubic-bezier(.4, 0, .2, 1) infinite both;
 }

packages/components/src/AppSwitcher/AppSwitcher.module.scss

@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .tc-app-switcher {
 	:global(.tc-svg-icon:first-child) {
@@ -19,7 +20,7 @@
 		display: block;
 		width: 1px;
 		height: $font-size-large;
-		background-color: $white;
+		background-color: tokens.$coral-color-neutral-background;
 	}
 
 	&.hasIcon {
@@ -35,7 +36,7 @@
 					height: $navbar-brand-logo-height;
 					width: $navbar-brand-logo-height;
 					background-repeat: no-repeat;
-					background-color: white;
+					background-color: tokens.$coral-color-neutral-background;
 				}
 			}