fix: Styles not applied for :visited and :active inline links (#504)

pluralsh · Jul 13, 2023 · 21bc7e2 · 21bc7e2
1 parent eb59cbd
commit 21bc7e2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/src/stories/A.stories.tsx b/src/stories/A.stories.tsx
@@ -8,14 +8,18 @@ export default {
 function Template(args: any) {
   return (
     <Flex gap="medium">
-      <A {...args} />
+      <A
+        href="#"
+        {...args}
+      />
       <A
         href="https://github.com"
         {...args}
       >
         Github
       </A>
       <A
+        href="#"
         inline
         {...args}
       >

diff --git a/src/theme/marketingText.ts b/src/theme/marketingText.ts
@@ -102,6 +102,9 @@ const marketingTextPartials = {
     },
     '&:visited, &:active': {
       color: semanticColorCssVars['action-link-inline-visited'],
+      '&:hover': {
+        color: semanticColorCssVars['action-link-inline-visited-hover'],
+      },
     },
   },
   navLink: {

diff --git a/src/theme/text.ts b/src/theme/text.ts
@@ -156,17 +156,23 @@ const textPartials = {
     textOverflow: 'ellipsis',
   },
   inlineLink: {
+    // Intermediate variables needed to avoid mangling by Honorable
+    // Must declare all intermediate color variables at style root due to
+    // security restritions on setting properties for :visited pseudo-class
     '--inline-link-c': semanticColorCssVars['action-link-inline'],
+    '--inline-link-c-h': semanticColorCssVars['action-link-inline-hover'],
+    '--inline-link-c-v': semanticColorCssVars['action-link-inline-visited'],
+    '--inline-link-c-v-h':
+      semanticColorCssVars['action-link-inline-visited-hover'],
     color: `var(--inline-link-c)`,
     textDecoration: 'underline',
     '&:hover': {
-      '--inline-link-c': semanticColorCssVars['action-link-inline-hover'],
+      color: 'var(--inline-link-c-h)',
     },
     '&:visited, &:active': {
-      '--inline-link-c': semanticColorCssVars['action-link-inline-visited'],
+      color: 'var(--inline-link-c-v)',
       '&:hover': {
-        '--inline-link-c':
-          semanticColorCssVars['action-link-inline-visited-hover'],
+        color: 'var(--inline-link-c-v-h)',
       },
     },
   },