diff --git a/.changeset/cyan-moons-yell.md b/.changeset/cyan-moons-yell.md new file mode 100644 index 00000000000..50016bcce4d --- /dev/null +++ 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 index dfac922b3e2..c0bb3c302ad 100644 --- 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 index 6377eda1996..f7f6467f146 100644 --- 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 diff --git a/packages/design-tokens/src/qlik-light/_index.scss b/packages/design-tokens/src/qlik-light/_index.scss index a56d5581306..c0ccf631e89 100644 --- 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 index bc780f3942e..842a7569ee0 100644 --- 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 index 8bf787f1252..7df3c95a41a 100644 --- 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)`, };