fix: adjustments for qlik-light theme (#5076)

* fix: adjustments for qlik-light theme * Add tooltip placement for back arrow
Talend · Dec 19, 2023 · bb106bc · bb106bc
1 parent 0fc2e8e
commit bb106bc
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 16 deletions.
diff --git a/.changeset/cyan-moons-yell.md b/.changeset/cyan-moons-yell.md
@@ -0,0 +1,6 @@
+---
+'@talend/design-tokens': patch
+'@talend/react-components': patch
+---
+
+fix: adjustments for qlik-light theme
diff --git a/packages/components/src/HeaderBar/HeaderBar.module.scss b/packages/components/src/HeaderBar/HeaderBar.module.scss
@@ -46,12 +46,14 @@ $tc-headerbar-logo-full-width: 8.5rem !default;
 
 	:global {
 		.tc-dropdown-button,
-		.btn-link {
-			color: tokens.$coral-color-brand-text !important;
+		.btn-link,
+		.tc-header-bar-action.tc-header-bar-help a,
+		.tc-header-bar-logo.btn-link {
+			color: tokens.$coral-color-brand-text;
 			&:hover,
 			&:focus {
-				color: tokens.$coral-color-brand-text !important;
-				background: tokens.$coral-color-brand-background-weak-hover !important;
+				color: tokens.$coral-color-brand-text;
+				background-color: tokens.$coral-color-brand-background-weak-hover;
 			}
 		}
 	}

diff --git a/packages/containers/src/SubHeaderBar/__snapshots__/SubHeaderBar.test.js.snap b/packages/containers/src/SubHeaderBar/__snapshots__/SubHeaderBar.test.js.snap
@@ -21,6 +21,7 @@ exports[`SubHeaderBar container should render 1`] = `
             data-testid="tc-subheader-backArrow"
             icon="arrow-left"
             id="backArrow"
+            tooltipplacement="right"
           >
             Go back
           </span>

diff --git a/packages/design-tokens/src/qlik-light/_index.scss b/packages/design-tokens/src/qlik-light/_index.scss
@@ -336,10 +336,10 @@
 	--coral-transition-fast: 250ms ease-in-out;
 	--coral-transition-normal: 300ms ease-in-out;
 	--coral-transition-slow: 400ms ease-in;
-	--coral-elevation-layer-flat: 2000;
-	--coral-elevation-layer-standard-front: 2004;
-	--coral-elevation-layer-interactive-front: 2008;
-	--coral-elevation-layer-overlay: 2016;
+	--coral-elevation-layer-flat: 0;
+	--coral-elevation-layer-standard-front: 4;
+	--coral-elevation-layer-interactive-front: 8;
+	--coral-elevation-layer-overlay: 16;
 	--coral-animation-heartbeat: coral-light-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite;
 	color-scheme: light;
 }

diff --git a/packages/design-tokens/src/qlik-light/dictionary.ts b/packages/design-tokens/src/qlik-light/dictionary.ts
@@ -3075,7 +3075,7 @@ Opacity for components that are only temporarily disabled.`,
 		name: 'coralElevationLayerFlat',
 		type: 'elevation',
 		description: `Default content elevation`,
-		value: `2000`,
+		value: `0`,
 		id: '26c8aba1-5d8d-11ec-9f08-61882f73ab2c',
 	},
 	{
@@ -3084,7 +3084,7 @@ Opacity for components that are only temporarily disabled.`,
 		description: `First elevation layer.
 
 Just above the default content (Drawer, Modal, Fixed layout...)`,
-		value: `2004`,
+		value: `4`,
 		id: '2d995c41-5d8d-11ec-9f08-61882f73ab2c',
 	},
 	{
@@ -3093,7 +3093,7 @@ Just above the default content (Drawer, Modal, Fixed layout...)`,
 		description: `Second elevation layer. 
 
 For elements above any layout (Dropdown, Popover).`,
-		value: `2008`,
+		value: `8`,
 		id: '334e63b1-5d8d-11ec-9f08-61882f73ab2c',
 	},
 	{
@@ -3102,7 +3102,7 @@ For elements above any layout (Dropdown, Popover).`,
 		description: `Topmost layer.
 
 For items that stand on top of anything (Alert, Confirm, Tooltip, etc.)`,
-		value: `2016`,
+		value: `16`,
 		id: '3853ca31-5d8d-11ec-9f08-61882f73ab2c',
 	},
 	{

diff --git a/packages/design-tokens/src/qlik-light/index.ts b/packages/design-tokens/src/qlik-light/index.ts
@@ -335,10 +335,10 @@ const tokens = {
 	coralTransitionFast: `var(--coral-transition-fast, 250ms ease-in-out)`,
 	coralTransitionNormal: `var(--coral-transition-normal, 300ms ease-in-out)`,
 	coralTransitionSlow: `var(--coral-transition-slow, 400ms ease-in)`,
-	coralElevationLayerFlat: `var(--coral-elevation-layer-flat, 2000)`,
-	coralElevationLayerStandardFront: `var(--coral-elevation-layer-standard-front, 2004)`,
-	coralElevationLayerInteractiveFront: `var(--coral-elevation-layer-interactive-front, 2008)`,
-	coralElevationLayerOverlay: `var(--coral-elevation-layer-overlay, 2016)`,
+	coralElevationLayerFlat: `var(--coral-elevation-layer-flat, 0)`,
+	coralElevationLayerStandardFront: `var(--coral-elevation-layer-standard-front, 4)`,
+	coralElevationLayerInteractiveFront: `var(--coral-elevation-layer-interactive-front, 8)`,
+	coralElevationLayerOverlay: `var(--coral-elevation-layer-overlay, 16)`,
 	coralAnimationHeartbeat: `var(--coral-animation-heartbeat, coral-light-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite)`,
 };