diff --git a/.changeset/old-bears-admire.md b/.changeset/old-bears-admire.md new file mode 100644 index 0000000000..57a048a743 --- /dev/null +++ b/.changeset/old-bears-admire.md @@ -0,0 +1,13 @@ +--- +'@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) +``` 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)" - } - } - } -} 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/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 { 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.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 { 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 = { /** 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 {