From 3bee3adbc4aa4de37ef84c2505bd6ae2b09f4298 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikola=20Stamatovi=C4=87?= Date: Wed, 29 Jan 2025 16:17:49 +0000 Subject: [PATCH 1/9] we can't animate the text-decoration-thickness, we can animate a border, but since this is 1px transition, transitioning it is practically useless --- packages/react/src/InlineLink/InlineLink.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/InlineLink/InlineLink.module.css b/packages/react/src/InlineLink/InlineLink.module.css index 4cad5ef086..ecab4a8a74 100644 --- a/packages/react/src/InlineLink/InlineLink.module.css +++ b/packages/react/src/InlineLink/InlineLink.module.css @@ -4,7 +4,6 @@ text-decoration-color: var(--brand-InlineLink-color-rest); text-decoration-thickness: var(--brand-borderWidth-thin); text-underline-position: under; - transition: var(--brand-InlineLink-transition-timing) text-decoration; } .InlineLink:hover { From 6c6654dc6c642235a50ddc42b1ffc749c8b18fa4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikola=20Stamatovi=C4=87?= Date: Mon, 3 Feb 2025 13:42:51 +0000 Subject: [PATCH 2/9] remove InlineLink animation duration token --- .../tokens/functional/components/inline-link/base.json | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 packages/design-tokens/src/tokens/functional/components/inline-link/base.json diff --git a/packages/design-tokens/src/tokens/functional/components/inline-link/base.json b/packages/design-tokens/src/tokens/functional/components/inline-link/base.json deleted file mode 100644 index 0ff7965f53..0000000000 --- a/packages/design-tokens/src/tokens/functional/components/inline-link/base.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "InlineLink": { - "transition": { - "timing": { - "value": "var(--brand-animation-duration-fast)" - } - } - } -} From 557a4667437d8be7c94a88cf99b1e071db369e5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikola=20Stamatovi=C4=87?= Date: Mon, 3 Feb 2025 13:47:17 +0000 Subject: [PATCH 3/9] Remove the InlineLink animation from accordion and timeline modules --- packages/react/src/Accordion/Accordion.module.css | 1 - packages/react/src/Timeline/Timeline.module.css | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/react/src/Accordion/Accordion.module.css b/packages/react/src/Accordion/Accordion.module.css index d7803c2a83..df649fdd14 100644 --- a/packages/react/src/Accordion/Accordion.module.css +++ b/packages/react/src/Accordion/Accordion.module.css @@ -255,7 +255,6 @@ details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summ text-decoration-color: var(--brand-InlineLink-color-rest); text-decoration-thickness: var(--brand-borderWidth-thin); text-underline-position: under; - transition: var(--brand-InlineLink-transition-timing) text-decoration; } .Accordion__content a:hover { diff --git a/packages/react/src/Timeline/Timeline.module.css b/packages/react/src/Timeline/Timeline.module.css index de104ee9b3..9ce4d77dfb 100644 --- a/packages/react/src/Timeline/Timeline.module.css +++ b/packages/react/src/Timeline/Timeline.module.css @@ -62,7 +62,6 @@ text-decoration-color: var(--brand-InlineLink-color-rest); text-decoration-thickness: var(--brand-borderWidth-thin); text-underline-position: under; - transition: var(--brand-InlineLink-transition-timing) text-decoration; } .Timeline__item a:hover { From 0d4c2029f353f5caf2559c6b1825ba01b7f0b41a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikola=20Stamatovi=C4=87?= Date: Mon, 3 Feb 2025 13:53:26 +0000 Subject: [PATCH 4/9] this didn't work, some of these tokens didn't exist - so I'm aligning it with the rest --- packages/react/src/Prose/Prose.module.css | 28 ++++++----------------- 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/packages/react/src/Prose/Prose.module.css b/packages/react/src/Prose/Prose.module.css index 8316dd8448..47e74c0701 100644 --- a/packages/react/src/Prose/Prose.module.css +++ b/packages/react/src/Prose/Prose.module.css @@ -184,33 +184,19 @@ .Prose a { color: var(--brand-InlineLink-color-rest); - text-decoration: none; position: relative; + text-decoration: underline; + text-decoration-color: var(--brand-InlineLink-color-rest); + text-decoration-thickness: var(--brand-borderWidth-thin); + text-underline-position: under; } .Prose a:hover { - text-decoration: none; + text-decoration-thickness: var(--brand-borderWidth-thick); } -.Prose a::after { - content: ''; - border-bottom: var(--brand-borderWidth-thin) solid var(--brand-InlineLink-color-rest); - height: 0; - transition: var(--brand-InlineLink-transition-timing) transform; - transform: scaleY(var(--brand-InlineLink-transition-scale-start)); - transform-origin: 50% 100%; - width: 100%; - position: absolute; - bottom: 0; - left: 0; -} - -.Prose a:hover::after { - transform: scaleY(var(--brand-InlineLink-transition-scale-end)); -} - -.Prose a:active::after { - border-color: var(--brand-InlineLink-color-pressed); +.Prose a:active { + color: var(--brand-InlineLink-color-pressed); } .Prose code { From 75990f772cf9b83b9db299ee971036f51f2e8241 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikola=20Stamatovi=C4=87?= Date: Mon, 3 Feb 2025 13:54:34 +0000 Subject: [PATCH 5/9] text decoration always inherits the text color, it doesn't need to be declared --- packages/react/src/Accordion/Accordion.module.css | 1 - packages/react/src/InlineLink/InlineLink.module.css | 1 - packages/react/src/Prose/Prose.module.css | 1 - packages/react/src/Timeline/Timeline.module.css | 1 - 4 files changed, 4 deletions(-) diff --git a/packages/react/src/Accordion/Accordion.module.css b/packages/react/src/Accordion/Accordion.module.css index df649fdd14..22bed3686b 100644 --- a/packages/react/src/Accordion/Accordion.module.css +++ b/packages/react/src/Accordion/Accordion.module.css @@ -252,7 +252,6 @@ details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summ color: var(--brand-InlineLink-color-rest); position: relative; text-decoration: underline; - text-decoration-color: var(--brand-InlineLink-color-rest); text-decoration-thickness: var(--brand-borderWidth-thin); text-underline-position: under; } diff --git a/packages/react/src/InlineLink/InlineLink.module.css b/packages/react/src/InlineLink/InlineLink.module.css index ecab4a8a74..24b617b63b 100644 --- a/packages/react/src/InlineLink/InlineLink.module.css +++ b/packages/react/src/InlineLink/InlineLink.module.css @@ -1,7 +1,6 @@ .InlineLink { position: relative; text-decoration: underline; - text-decoration-color: var(--brand-InlineLink-color-rest); text-decoration-thickness: var(--brand-borderWidth-thin); text-underline-position: under; } diff --git a/packages/react/src/Prose/Prose.module.css b/packages/react/src/Prose/Prose.module.css index 47e74c0701..8a37e06761 100644 --- a/packages/react/src/Prose/Prose.module.css +++ b/packages/react/src/Prose/Prose.module.css @@ -186,7 +186,6 @@ color: var(--brand-InlineLink-color-rest); position: relative; text-decoration: underline; - text-decoration-color: var(--brand-InlineLink-color-rest); text-decoration-thickness: var(--brand-borderWidth-thin); text-underline-position: under; } diff --git a/packages/react/src/Timeline/Timeline.module.css b/packages/react/src/Timeline/Timeline.module.css index 9ce4d77dfb..f742f49214 100644 --- a/packages/react/src/Timeline/Timeline.module.css +++ b/packages/react/src/Timeline/Timeline.module.css @@ -59,7 +59,6 @@ color: var(--brand-InlineLink-color-rest); position: relative; text-decoration: underline; - text-decoration-color: var(--brand-InlineLink-color-rest); text-decoration-thickness: var(--brand-borderWidth-thin); text-underline-position: under; } From 71ebeb28d4902028b4527cf893f8e394c48a5b2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikola=20Stamatovi=C4=87?= Date: Mon, 3 Feb 2025 14:56:41 +0100 Subject: [PATCH 6/9] Create old-bears-admire.md --- .changeset/old-bears-admire.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/old-bears-admire.md diff --git a/.changeset/old-bears-admire.md b/.changeset/old-bears-admire.md new file mode 100644 index 0000000000..347b9a97d8 --- /dev/null +++ b/.changeset/old-bears-admire.md @@ -0,0 +1,6 @@ +--- +"@primer/brand-primitives": patch +"@primer/react-brand": patch +--- + +Remove the hover text-decoration transition in `InlineLink`, `Accordion`, `Timeline` and align `Prose` with the updated `InlineLink` styles From 0695721ec8787334b4246a2682ea5ff7f6faf5ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikola=20Stamatovi=C4=87?= Date: Mon, 3 Feb 2025 14:05:28 +0000 Subject: [PATCH 7/9] since I removed base.json I also needed to remove the imports --- packages/react/src/InlineLink/InlineLink.tsx | 1 - packages/react/src/Prose/Prose.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/react/src/InlineLink/InlineLink.tsx b/packages/react/src/InlineLink/InlineLink.tsx index b5728fa43c..4d46bfdeb0 100644 --- a/packages/react/src/InlineLink/InlineLink.tsx +++ b/packages/react/src/InlineLink/InlineLink.tsx @@ -6,7 +6,6 @@ import type {BaseProps} from '../component-helpers' * Design tokens */ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css' -import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-link/base.css' /** * Main stylesheet (as a CSS Module) diff --git a/packages/react/src/Prose/Prose.tsx b/packages/react/src/Prose/Prose.tsx index 1a046115d5..2af906935c 100644 --- a/packages/react/src/Prose/Prose.tsx +++ b/packages/react/src/Prose/Prose.tsx @@ -4,7 +4,6 @@ import type {BaseProps} from '../component-helpers' import styles from './Prose.module.css' import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/prose/base.css' import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/prose/colors-with-modes.css' -import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-link/base.css' export type ProseProps = { /** From 9b78f0edcaebb5713cc56327fb3e58be3e9ca9f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikola=20Stamatovi=C4=87?= Date: Mon, 3 Feb 2025 14:56:08 +0000 Subject: [PATCH 8/9] Revert "text decoration always inherits the text color, it doesn't need to be declared" This reverts commit 75990f772cf9b83b9db299ee971036f51f2e8241. --- packages/react/src/Accordion/Accordion.module.css | 1 + packages/react/src/InlineLink/InlineLink.module.css | 1 + packages/react/src/Prose/Prose.module.css | 1 + packages/react/src/Timeline/Timeline.module.css | 1 + 4 files changed, 4 insertions(+) diff --git a/packages/react/src/Accordion/Accordion.module.css b/packages/react/src/Accordion/Accordion.module.css index 22bed3686b..df649fdd14 100644 --- a/packages/react/src/Accordion/Accordion.module.css +++ b/packages/react/src/Accordion/Accordion.module.css @@ -252,6 +252,7 @@ details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summ color: var(--brand-InlineLink-color-rest); position: relative; text-decoration: underline; + text-decoration-color: var(--brand-InlineLink-color-rest); text-decoration-thickness: var(--brand-borderWidth-thin); text-underline-position: under; } diff --git a/packages/react/src/InlineLink/InlineLink.module.css b/packages/react/src/InlineLink/InlineLink.module.css index 24b617b63b..ecab4a8a74 100644 --- a/packages/react/src/InlineLink/InlineLink.module.css +++ b/packages/react/src/InlineLink/InlineLink.module.css @@ -1,6 +1,7 @@ .InlineLink { position: relative; text-decoration: underline; + text-decoration-color: var(--brand-InlineLink-color-rest); text-decoration-thickness: var(--brand-borderWidth-thin); text-underline-position: under; } diff --git a/packages/react/src/Prose/Prose.module.css b/packages/react/src/Prose/Prose.module.css index 8a37e06761..47e74c0701 100644 --- a/packages/react/src/Prose/Prose.module.css +++ b/packages/react/src/Prose/Prose.module.css @@ -186,6 +186,7 @@ color: var(--brand-InlineLink-color-rest); position: relative; text-decoration: underline; + text-decoration-color: var(--brand-InlineLink-color-rest); text-decoration-thickness: var(--brand-borderWidth-thin); text-underline-position: under; } diff --git a/packages/react/src/Timeline/Timeline.module.css b/packages/react/src/Timeline/Timeline.module.css index f742f49214..9ce4d77dfb 100644 --- a/packages/react/src/Timeline/Timeline.module.css +++ b/packages/react/src/Timeline/Timeline.module.css @@ -59,6 +59,7 @@ color: var(--brand-InlineLink-color-rest); position: relative; text-decoration: underline; + text-decoration-color: var(--brand-InlineLink-color-rest); text-decoration-thickness: var(--brand-borderWidth-thin); text-underline-position: under; } From fa028d211ec3b613962e0ad756cef89464149acf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikola=20Stamatovi=C4=87?= Date: Mon, 3 Feb 2025 15:16:18 +0000 Subject: [PATCH 9/9] add migration path --- .changeset/old-bears-admire.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/.changeset/old-bears-admire.md b/.changeset/old-bears-admire.md index 347b9a97d8..57a048a743 100644 --- a/.changeset/old-bears-admire.md +++ b/.changeset/old-bears-admire.md @@ -1,6 +1,13 @@ --- -"@primer/brand-primitives": patch -"@primer/react-brand": patch +'@primer/brand-primitives': patch +'@primer/react-brand': patch --- Remove the hover text-decoration transition in `InlineLink`, `Accordion`, `Timeline` and align `Prose` with the updated `InlineLink` styles + +In case you were using `var(--brand-InlineLink-transition-timing)` variable please migrate to `var(--brand-animation-duration-fast)` + +```diff +- var(--brand-InlineLink-transition-timing) ++ var(--brand-animation-duration-fast) +```