Talend · jmfrancois · Jul 24, 2023 · Jul 19, 2023 · Jul 19, 2023 · Jul 19, 2023
diff --git a/.changeset/angry-moles-happen.md b/.changeset/angry-moles-happen.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-faceted-search': major
+---
+
+feat: use design-tokens for colors
diff --git a/.changeset/flat-crabs-visit.md b/.changeset/flat-crabs-visit.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-dataviz': major
+---
+
+feat: colors now use design-tokens
diff --git a/.changeset/strange-ligers-bathe.md b/.changeset/strange-ligers-bathe.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-forms': major
+---
+
+All colors are now based on design-tokens
diff --git a/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.scss b/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.scss
@@ -1,5 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
+@use '~@talend/design-tokens/lib/tokens';
 @import '../bar-chart';
 
 $module: colored-bar;
@@ -41,6 +41,6 @@ $module: colored-bar;
 	}
 
 	&__secondary-bar {
-		fill: $alto;
+		fill: tokens.$coral-color-charts-neutral-weak;
 	}
 }
diff --git a/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.cy.tsx b/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.cy.tsx
@@ -24,6 +24,7 @@ context('<HorizontalBarChart />', () => {
 			/>,
 		);
 
+		// eslint-disable-next-line cypress/unsafe-to-chain-command
 		cy.get('.recharts-bar-rectangle')
 			.first()
 			.trigger('mousemove')
@@ -54,6 +55,7 @@ context('<HorizontalBarChart />', () => {
 			/>,
 		);
 
+		// eslint-disable-next-line cypress/unsafe-to-chain-command
 		cy.get('.recharts-bar-rectangle')
 			.first()
 			.trigger('mousemove')

diff --git a/packages/dataviz/src/components/BarChart/TooltipCursor/TooltipCursor.component.module.scss b/packages/dataviz/src/components/BarChart/TooltipCursor/TooltipCursor.component.module.scss
@@ -1,5 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
 .tooltip-cursor {
 	pointer-events: all;
 	cursor: pointer;

diff --git a/...s/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.module.scss b/...s/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.module.scss
@@ -1,5 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
 @import '../bar-chart';
 
 .vertical-bar-chart {

diff --git a/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.cy.tsx b/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.cy.tsx
@@ -17,6 +17,8 @@ context('<HorizontalBarChart />', () => {
 				getTooltipContent={() => <div data-testid="tooltip">tooltip</div>}
 			/>,
 		);
+
+		// eslint-disable-next-line cypress/unsafe-to-chain-command
 		cy.get('.recharts-bar-rectangle')
 			.first()
 			.trigger('mousemove')
@@ -41,6 +43,8 @@ context('<HorizontalBarChart />', () => {
 				getTooltipContent={getTooltipContent}
 			/>,
 		);
+
+		// eslint-disable-next-line cypress/unsafe-to-chain-command
 		cy.get('.recharts-bar-rectangle')
 			.first()
 			.trigger('mousemove')

diff --git a/packages/dataviz/src/components/BarChart/_bar-chart.scss b/packages/dataviz/src/components/BarChart/_bar-chart.scss
@@ -1,12 +1,13 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
-$pattern-bar-primary-color: tint($jaffa, 70%);
-$pattern-bar-secondary-color: shade($jaffa, 30%);
+$pattern-bar-primary-color: tokens.$coral-color-charts-warning-weak;
+$pattern-bar-secondary-color: tokens.$coral-color-charts-warning-strong;
 
-$value-bar-primary-color: tint($lochmara, 70%);
-$value-bar-secondary-color: shade($lochmara, 30%);
+$value-bar-primary-color: tokens.$coral-color-charts-default-weak;
+$value-bar-secondary-color: tokens.$coral-color-charts-default-strong;
 
-$grey-bar-color: $alto;
+$grey-bar-color: tokens.$coral-color-charts-neutral-weak;
 
 @mixin override-recharts-styles() {
 	// We can't use custom classname on axis
@@ -19,11 +20,11 @@ $grey-bar-color: $alto;
 		.recharts-yAxis {
 			text {
 				font-size: 1.2rem;
-				fill: $gray;
+				fill: tokens.$coral-color-neutral-text;
 			}
 
 			line {
-				stroke: $gray;
+				stroke: tokens.$coral-color-neutral-text;
 			}
 		}
 

diff --git a/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.scss b/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.scss
@@ -1,20 +1,20 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
+@use '~@talend/design-tokens/lib/tokens';
 // Imported (almost) as-is from TDP
 
 .box-plot {
 	font: 11px 'Source Sans Pro', sans-serif;
 
 	line,
 	rect {
-		fill: #19426C;
-		stroke: black;
+		fill: tokens.$coral-color-charts-default-strong;
+		stroke: tokens.$coral-color-charts-neutral-strong;
 		stroke-width: 1px;
 	}
 
 	&__whiskerPolyg {
 		fill: none;
-		stroke: black;
+		stroke: tokens.$coral-color-charts-neutral-strong;
 		stroke-width: 2;
 	}
 
@@ -25,24 +25,24 @@
 	&__mean {
 		fill: white;
 		opacity: 0.5;
-		stroke: #19426C;
+		stroke: tokens.$coral-color-charts-default-strong;
 		shape-rendering: geometricPrecision;
 		stroke-width: 0.8;
 	}
 
 	&__max-min-labels {
-		fill: #0675C1;
+		fill: tokens.$coral-color-charts-default;
 	}
 
 	&__low-quantile-labels {
-		fill: #689734;
+		fill: tokens.$coral-color-charts-success-strong;
 	}
 
 	&__up-quantile-labels {
-		fill: #BA4C50;
+		fill: tokens.$coral-color-charts-danger-strong;
 	}
 
 	&__mean-labels {
-		fill: $white;
+		fill: tokens.$coral-color-charts-neutral-weak;
 	}
 }
diff --git a/packages/dataviz/src/components/GeoChart/GeoChart.module.scss b/packages/dataviz/src/components/GeoChart/GeoChart.module.scss
@@ -1,8 +1,9 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 :export {
-	scaleMinColor: tint($regal-blue, 80%); /* stylelint-disable-line property-no-unknown */
-	scaleMaxColor: shade($regal-blue, 30%); /* stylelint-disable-line property-no-unknown */
+	scaleMinColor: tokens.$coral-color-charts-default-weak; /* stylelint-disable-line property-no-unknown */
+	scaleMaxColor: tokens.$coral-color-charts-default-strong; /* stylelint-disable-line property-no-unknown */
 }
 
 .geo-chart {
@@ -14,16 +15,16 @@
 	}
 
 	&__feature {
-		stroke: $white;
+		stroke: tokens.$coral-color-charts-neutral;
 		stroke-width: 1px;
 		vector-effect: non-scaling-stroke;
 
 		&--disabled {
-			fill: $silver;
+			fill: tokens.$coral-color-charts-neutral-weak;
 		}
 
 		&:not(&--disabled):hover {
-			fill: $lochmara !important; /* stylelint-disable-line declaration-no-important */
+			fill: tokens.$coral-color-charts-default !important; /* stylelint-disable-line declaration-no-important */
 			cursor: pointer;
 		}
 	}
@@ -49,20 +50,20 @@
 	}
 
 	&__zoom-icon {
-		color: $black;
+		color: tokens.$coral-color-charts-neutral;
 		width: 100%;
 		height: 100%;
 
 		&:not(:hover) .ti-background {
-			color: $silver;
+			color: tokens.$coral-color-charts-neutral;
 		}
 
 		&:hover {
-			color: $lochmara;
+			color: tokens.$coral-color-charts-neutral-hover;
 		}
 
 		&:active {
-			color: $regal-blue;
+			color: tokens.$coral-color-charts-default;
 		}
 	}
 }
diff --git a/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.scss b/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $module: key-value-tooltip;
 
@@ -17,7 +18,7 @@ $module: key-value-tooltip;
 		margin-top: 0; // override dt margin
 		font-weight: $font-weight-regular;
 		line-height: $line-height-base;
-		color: $white;
+		color: tokens.$coral-color-neutral-background;
 
 		&::after {
 			content: ':';
@@ -26,12 +27,12 @@ $module: key-value-tooltip;
 
 	&__value {
 		margin-left: 5px;
-		color: $scooter;
+		color: tokens.$coral-color-accent-text-weak-active;
 	}
 
 	&--pattern {
 		.#{$module}__value {
-			color: $jaffa;
+			color: tokens.$coral-color-danger-text-weak;
 		}
 	}
 }
diff --git a/packages/dataviz/src/components/LineChart/LineChart.component.tsx b/packages/dataviz/src/components/LineChart/LineChart.component.tsx
@@ -15,6 +15,7 @@ import { LineChartEntry, LineChartOptions, LineOptions, LineStatus } from './Lin
 
 import { CustomTooltip } from './LineChartTooltip.component';
 import { CustomLegend } from './LineChartLegend.component';
+import style from './LineChart.module.scss';
 
 export interface LineChartProps {
 	data: LineChartEntry[];
@@ -129,7 +130,7 @@ function LineChart({
 	return (
 		<>
 			<ResponsiveContainer width={width || '100%'} height={height || '100%'} debounce={1}>
-				<RLineChart data={data} margin={margin || {}}>
+				<RLineChart data={data} margin={margin || {}} className={style.container}>
 					{!!showGridLines && (
 						<CartesianGrid
 							stroke={tokens.coralColorNeutralBackgroundMedium}

diff --git a/packages/dataviz/src/components/LineChart/LineChart.module.scss b/packages/dataviz/src/components/LineChart/LineChart.module.scss
@@ -4,6 +4,16 @@
 
 $module: line-chart;
 
+.container {
+	:global(.recharts-cartesian-axis-line) {
+		stroke: tokens.$coral-color-neutral-text;
+	}
+
+	:global(.recharts-text) {
+		fill: tokens.$coral-color-neutral-text;
+	}
+}
+
 .#{$module} {
 	&-custom-tooltip {
 		list-style: none;

diff --git a/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.scss b/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.scss
@@ -1,8 +1,14 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $module: range-filter;
 
 .#{$module} {
+	:global(.rc-slider-mark-text),
+	:global(.rc-slider-mark-text-active) {
+		color: tokens.$coral-color-neutral-text;
+	}
+
 	&__slider {
 		margin: 20px 0 30px;
 	}

diff --git a/packages/dataviz/src/components/RangeFilter/RangeFilter.component.tsx b/packages/dataviz/src/components/RangeFilter/RangeFilter.component.tsx
@@ -95,7 +95,6 @@ function RangeFilter({
 						id={`${id}-range-filter-min-input`}
 						value={range.min}
 						onChange={(value: number) => {
-							console.log('4444');
 							onAfterChange({
 								// Tricky one: we want the corrected value (i.e. day start) to stay between limits
 								min: Math.min(Math.max(getMinValue(value), limits.min), range.max),

diff --git a/...onents/RangeFilter/handlers/DateTimeRangeHandler/DateTimeInputField.component.module.scss b/...onents/RangeFilter/handlers/DateTimeRangeHandler/DateTimeInputField.component.module.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable declaration-no-important */
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
 
 .date-time-input-field {

diff --git a/packages/dataviz/src/components/Tooltip/Tooltip.component.module.scss b/packages/dataviz/src/components/Tooltip/Tooltip.component.module.scss
@@ -1,15 +1,13 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
-@use '~@talend/design-tokens/lib/_tokens.scss';
+@use '~@talend/design-tokens/lib/tokens';
 
 .dataviz-tooltip {
 	padding: tokens.$coral-spacing-m;
 
-	color: tokens.$coral-color-neutral-text-inverted;
+	color: tokens.$coral-color-assistive-text;
 	font: tokens.$coral-paragraph-m;
 
 	background: tokens.$coral-color-assistive-background;
-	border: tokens.$coral-border-s-solid rgba(0, 0, 0, 0.103);
+	border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
 	border-radius: tokens.$coral-radius-s;
 
 	&__title {

diff --git a/packages/faceted-search/.storybook/preview.js b/packages/faceted-search/.storybook/preview.js
@@ -1,6 +1,6 @@
 import { ThemeProvider } from '@talend/design-system';
 import { namespaces as tuiNamespaces } from '@talend/locales-tui-components/namespaces';
 import { namespaces as facetedNamespaces } from '@talend/locales-tui-faceted-search/namespaces';

 export const i18n = {
 	namespaces: [...tuiNamespaces, ...facetedNamespaces],
@@ -20,7 +20,6 @@
 					height: '100%',
 					width: '100%',
 					overflow: 'auto',
-					backgroundColor: 'rgba(145, 209, 237, 0.1)',
 				}}
 			>
 				<ThemeProvider>

diff --git a/packages/faceted-search/package.json b/packages/faceted-search/package.json
@@ -36,6 +36,7 @@
     "@talend/daikon-tql-client": "^1.3.1",
     "@talend/utils": "^2.5.1",
     "@talend/react-bootstrap": "^1.35.2",
+    "@talend/design-tokens": "2.7.3",
     "classnames": "^2.3.2",
     "date-fns": "^1.30.1",
     "invariant": "^2.2.4",

diff --git a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss
@@ -1,11 +1,12 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 $circle-size-large: 2.2rem !default;
 $circle-size-small: 1.8rem !default;
 
 .tc-badge-operator {
 	align-items: center;
-	background: rgba(255, 255, 255, 0.5);
+	background: tokens.$coral-color-neutral-background;
 	border-radius: 10rem;
 	display: inline-flex;
 	justify-content: center;

diff --git a/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.scss b/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 // stylelint-disable property-no-vendor-prefix
 
@@ -60,7 +61,7 @@
 				font-size: 3.2rem;
 				font-weight: $font-weight-semi-bold;
 				width: 8rem;
-				color: $dove-gray;
+				color: tokens.$coral-color-neutral-text-weak;
 				box-shadow: none;
 				height: 4.7rem;
 				padding: 0;
@@ -85,7 +86,7 @@
 		justify-content: space-between;
 
 		.tc-badge-slider-form-error {
-			color: $brand-danger;
+			color: tokens.$coral-color-danger-text;
 		}
 	}
 }