Add hover colour for visited inline links

Amsterdam · Jan 16, 2025 · 3de8699 · 3de8699
1 parent 2dffc45
commit 3de8699
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 3 deletions.
diff --git a/packages/css/src/components/link/link.scss b/packages/css/src/components/link/link.scss
@@ -47,6 +47,10 @@
 
   &:visited {
     color: var(--ams-link-inline-visited-color);
+
+    &:hover {
+      color: var(--ams-link-inline-visited-hover-color);
+    }
   }
 }
 

diff --git a/proprietary/tokens/src/brand/ams/brand.color.tokens.json b/proprietary/tokens/src/brand/ams/brand.color.tokens.json
@@ -58,6 +58,9 @@
         "purple": {
           "60": {
             "value": "#A00078"
+          },
+          "80": {
+            "value": "#7C005D"
           }
         },
         "red": {

diff --git a/proprietary/tokens/src/brand/ams/color.tokens.json b/proprietary/tokens/src/brand/ams/color.tokens.json
@@ -47,7 +47,8 @@
           "default": { "value": "{ams.brand.color.neutral.0}" }
         },
         "visited": {
-          "default": { "value": "{ams.brand.color.purple.60}" }
+          "default": { "value": "{ams.brand.color.purple.60}" },
+          "hover": { "value": "{ams.brand.color.purple.80}" }
         }
       },
       "logo": {

diff --git a/proprietary/tokens/src/common/ams/link-appearance.tokens.json b/proprietary/tokens/src/common/ams/link-appearance.tokens.json
@@ -8,7 +8,10 @@
         "color": { "value": "{ams.color.interactive.hover}" }
       },
       "visited": {
-        "color": { "value": "{ams.color.interactive.visited.default}" }
+        "color": { "value": "{ams.color.interactive.visited.default}" },
+        "hover": {
+          "color": { "value": "{ams.color.interactive.visited.hover}" }
+        }
       },
       "regular": {
         "text-decoration-line": { "value": "underline" },

diff --git a/proprietary/tokens/src/components/ams/link.tokens.json b/proprietary/tokens/src/components/ams/link.tokens.json
@@ -22,7 +22,10 @@
           "text-underline-offset": { "value": "{ams.link-appearance.regular.hover.text-underline-offset}" }
         },
         "visited": {
-          "color": { "value": "{ams.link-appearance.visited.color}" }
+          "color": { "value": "{ams.link-appearance.visited.color}" },
+          "hover": {
+            "color": { "value": "{ams.link-appearance.visited.hover.color}" }
+          }
         }
       },
       "standalone": {

diff --git a/storybook/src/components/Link/Link.docs.mdx b/storybook/src/components/Link/Link.docs.mdx
@@ -52,3 +52,9 @@ Although they only address headings and paragraphs, the same principle applies t
 #### Inverse colour
 
 <Canvas of={LinkStories.InverseColour} />
+
+#### Visited links
+
+Visited inline links are purple.
+
+<Canvas of={LinkStories.Visited} />
diff --git a/storybook/src/components/Link/Link.stories.tsx b/storybook/src/components/Link/Link.stories.tsx
@@ -62,3 +62,18 @@ export const InverseColour: Story = {
     inverseColor: true,
   },
 }
+
+export const Visited: Story = {
+  args: {
+    children: 'Amsterdam Design System',
+    href: 'https://designsystem.amsterdam',
+    variant: 'inline',
+  },
+  decorators: [
+    (Story) => (
+      <Paragraph>
+        Welkom terug bij het <Story /> handboek.
+      </Paragraph>
+    ),
+  ],
+}
diff --git a/storybook/src/foundation/design-tokens/colour.docs.mdx b/storybook/src/foundation/design-tokens/colour.docs.mdx
@@ -55,6 +55,7 @@ Next to these, six neutral colours are available, including white and black.
 | `ams.color.interactive.inverse`        | neutral-100 | <div className="ams-docs-token-example--color ams-docs-token-example--color-border" style={{ backgroundColor: 'var(--ams-color-interactive-inverse-default)' }} /> |
 | `ams.color.interactive.inverse.hover`  | neutral-100 | <div className="ams-docs-token-example--color ams-docs-token-example--color-border" style={{ backgroundColor: 'var(--ams-color-interactive-inverse-default)' }} /> |
 | `ams.color.interactive.visited`        | purple-60   | <div className="ams-docs-token-example--color" style={{ backgroundColor: 'var(--ams-color-interactive-visited-default)' }} />                                      |
+| `ams.color.interactive.visited.hover`  | purple-80   | <div className="ams-docs-token-example--color" style={{ backgroundColor: 'var(--ams-color-interactive-visited-hover)' }} />                                        |
 | `ams.color.logo`                       | red-60      | <div className="ams-docs-token-example--color" style={{ backgroundColor: 'var(--ams-color-logo-default)' }} />                                                     |
 | `ams.color.separator`                  | neutral-20  | <div className="ams-docs-token-example--color" style={{ backgroundColor: 'var(--ams-color-separator-default)' }} />                                                |
 | `ams.color.supplemental.azure`         | azure-60    | <div className="ams-docs-token-example--color" style={{ backgroundColor: 'var(--ams-color-supplemental-azure-default)' }} />                                       |