From 21bc7e28d54905c465189e6f86bf8c41d91a1988 Mon Sep 17 00:00:00 2001
From: Klink <85062+dogmar@users.noreply.github.com>
Date: Thu, 13 Jul 2023 07:59:49 -0700
Subject: [PATCH] fix: Styles not applied for :visited and :active inline links
 (#504)

---
 src/stories/A.stories.tsx  |  6 +++++-
 src/theme/marketingText.ts |  3 +++
 src/theme/text.ts          | 14 ++++++++++----
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/stories/A.stories.tsx b/src/stories/A.stories.tsx
index 83020177..ed9299e1 100644
--- a/src/stories/A.stories.tsx
+++ b/src/stories/A.stories.tsx
@@ -8,7 +8,10 @@ export default {
 function Template(args: any) {
   return (
     <Flex gap="medium">
-      <A {...args} />
+      <A
+        href="#"
+        {...args}
+      />
       <A
         href="https://github.com"
         {...args}
@@ -16,6 +19,7 @@ function Template(args: any) {
         Github
       </A>
       <A
+        href="#"
         inline
         {...args}
       >
diff --git a/src/theme/marketingText.ts b/src/theme/marketingText.ts
index b5189ff9..11f240cb 100644
--- 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
index cbd9e5be..4057cf92 100644
--- 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)',
       },
     },
   },