From e742b73282b1a39e617f9da03d59919df2ae8cbd Mon Sep 17 00:00:00 2001 From: Gbacc Date: Tue, 3 Dec 2024 11:48:59 +0100 Subject: [PATCH] fix(TMC-4293): fix DS Link token to be info (#5461) --- .changeset/large-baboons-poke.md | 5 +++++ .../src/components/Link/Link.module.scss | 14 +++++++------- 2 files changed, 12 insertions(+), 7 deletions(-) create mode 100644 .changeset/large-baboons-poke.md diff --git a/.changeset/large-baboons-poke.md b/.changeset/large-baboons-poke.md new file mode 100644 index 00000000000..086a93739e6 --- /dev/null +++ b/.changeset/large-baboons-poke.md @@ -0,0 +1,5 @@ +--- +'@talend/design-system': patch +--- + +TMC-4293 - Design System link should not be accent/grey while using qlik-light theme diff --git a/packages/design-system/src/components/Link/Link.module.scss b/packages/design-system/src/components/Link/Link.module.scss index fe720de8513..f9e959be0e8 100644 --- a/packages/design-system/src/components/Link/Link.module.scss +++ b/packages/design-system/src/components/Link/Link.module.scss @@ -5,7 +5,7 @@ $icon-alignment-offset-s: -0.0625rem; .link { font: tokens.$coral-paragraph-m-bold; - color: tokens.$coral-color-accent-text; + color: tokens.$coral-color-info-text; background: none; border: none; border-bottom-color: currentColor; @@ -26,18 +26,18 @@ $icon-alignment-offset-s: -0.0625rem; } &:hover { - color: tokens.$coral-color-accent-text-hover; + color: tokens.$coral-color-info-text-hover; .link__text { - border-bottom-color: tokens.$coral-color-accent-border-hover; + border-bottom-color: tokens.$coral-color-info-border-hover; } } &:active { - color: tokens.$coral-color-accent-text-active; + color: tokens.$coral-color-info-text-active; .link__text { - border-bottom-color: tokens.$coral-color-accent-border-active; + border-bottom-color: tokens.$coral-color-info-border-active; } } @@ -54,11 +54,11 @@ $icon-alignment-offset-s: -0.0625rem; color: tokens.$coral-color-neutral-text; &:hover { - color: tokens.$coral-color-accent-text-hover; + color: tokens.$coral-color-info-text-hover; } &:active { - color: tokens.$coral-color-accent-text-active; + color: tokens.$coral-color-info-text-active; } } }