@lutra-ui-system/react 0.1.0 → 0.1.2

package/dist/components/link/link.d.ts

@@ -3,8 +3,8 @@ import type { AnchorHTMLAttributes } from 'react';
  * How the link is drawn. Maps to the `type` axis of the Figma component set, renamed here because
  * `type` is already a native `<a>` attribute and shadowing it would remove something real.
  *
- * `'inline'` is for links inside prose and stays underlined. `'standalone'` is for links that sit on
- * their own, where position and spacing already separate them from surrounding text.
+ * `'inline'` is for links inside prose. `'standalone'` is for links that sit on their own and need a
+ * larger target without changing semantics.
  *
  * **Styling only.** Neither value changes the element, and neither exists to make a link behave like
  * a button.

package/dist/styles.css

@@ -69,6 +69,7 @@
   --lutra-color-focus-ring: #3f7cff;
   --lutra-color-icon-default: var(--lutra-color-text-primary);
   --lutra-color-link-text: var(--lutra-color-brand-primary);
+  --lutra-color-link-text-visited: #5b21b6;
   --lutra-color-text-disabled: #9ca3af;
   --lutra-color-text-inverse: #ffffff;
   --lutra-color-text-muted: #6b7280;
@@ -128,7 +129,7 @@
   --lutra-component-link-text-default: var(--lutra-color-link-text);
   --lutra-component-link-text-focus: var(--lutra-color-link-text);
   --lutra-component-link-text-hover: var(--lutra-color-link-text);
-  --lutra-component-link-text-visited: var(--lutra-color-text-secondary);
+  --lutra-component-link-text-visited: var(--lutra-color-link-text-visited);
   --lutra-component-menu-border: var(--lutra-component-input-border-default);
   --lutra-component-menu-divider: var(--lutra-component-input-border-default);
   --lutra-component-menu-item-danger: var(--lutra-component-field-error-text);
@@ -268,6 +269,7 @@
   --lutra-color-feedback-danger-text: #ff8fab;
   --lutra-color-icon-default: var(--lutra-color-text-primary);
   --lutra-color-link-text: #7aa2ff;
+  --lutra-color-link-text-visited: #c4b5fd;
   --lutra-color-text-disabled: #6b7280;
   --lutra-color-text-inverse: #111827;
   --lutra-color-text-muted: #9ca3af;
@@ -317,7 +319,7 @@
   --lutra-component-link-text-default: var(--lutra-color-link-text);
   --lutra-component-link-text-focus: var(--lutra-color-link-text);
   --lutra-component-link-text-hover: var(--lutra-color-link-text);
-  --lutra-component-link-text-visited: var(--lutra-color-text-secondary);
+  --lutra-component-link-text-visited: var(--lutra-color-link-text-visited);
   --lutra-component-menu-border: var(--lutra-component-input-border-default);
   --lutra-component-menu-divider: var(--lutra-component-input-border-default);
   --lutra-component-menu-item-danger: var(--lutra-component-field-error-text);
@@ -390,6 +392,7 @@
   --lutra-color-feedback-danger-text: #c73f3f;
   --lutra-color-icon-default: var(--lutra-color-text-primary);
   --lutra-color-link-text: var(--lutra-color-brand-primary);
+  --lutra-color-link-text-visited: #5b21b6;
   --lutra-color-text-disabled: #9ca3af;
   --lutra-color-text-inverse: #ffffff;
   --lutra-color-text-muted: #6b7280;
@@ -439,7 +442,7 @@
   --lutra-component-link-text-default: var(--lutra-color-link-text);
   --lutra-component-link-text-focus: var(--lutra-color-link-text);
   --lutra-component-link-text-hover: var(--lutra-color-link-text);
-  --lutra-component-link-text-visited: var(--lutra-color-text-secondary);
+  --lutra-component-link-text-visited: var(--lutra-color-link-text-visited);
   --lutra-component-menu-border: var(--lutra-component-input-border-default);
   --lutra-component-menu-divider: var(--lutra-component-input-border-default);
   --lutra-component-menu-item-danger: var(--lutra-component-field-error-text);
@@ -876,8 +879,8 @@
  * and visited are selected from the platform — `:hover`, `:focus-visible`, `:active`, `:visited` —
  * never from a prop.
  *
- * Colour is never the only thing separating an inline link from the prose around it: inline links
- * keep their underline at rest, which is what the annotation asks for.
+ * Colour is never the only thing separating a link from surrounding text: both variants keep their
+ * underline at rest, and the variant axis changes layout rather than basic link recognition.
  */
 
 .lutra-link {
@@ -908,27 +911,37 @@
   overflow-wrap: break-word;
 }
 
-/* Inline links live in prose and keep their underline at rest — colour alone is not enough to find
- * a link inside a paragraph. */
+/* Both link variants keep their underline at rest so unvisited and visited links remain recognisable
+ * without depending on colour alone. */
 
 .lutra-link[data-variant='inline'] {
   text-decoration-line: underline;
 }
 
-/* Standalone links sit on their own, where position and spacing already separate them, so the
- * underline is reserved for hover. The minimum target is met without changing the drawn text: an
- * inline-flex box with a minimum block size grows the hit area, not the type. */
+/* Standalone links keep the same persistent underline affordance as inline links. The variant exists
+ * for layout and target size: an inline-flex box with a minimum block size grows the hit area, not
+ * the type. */
 
 .lutra-link[data-variant='standalone'] {
   display: inline-flex;
   align-items: center;
   min-block-size: var(--lutra-link-standalone-min-target);
-  text-decoration-line: none;
+  text-decoration-line: underline;
 }
 
 .lutra-link:hover {
   color: var(--lutra-link-text-hover);
   text-decoration-line: underline;
+  text-decoration-thickness: max(2px, 0.12em);
+}
+
+/* Active keeps the persistent underline and strengthens it again so a press stays legible as a link
+ * rather than dropping back toward plain text. */
+
+.lutra-link:active {
+  color: var(--lutra-link-text-hover);
+  text-decoration-line: underline;
+  text-decoration-thickness: max(3px, 0.16em);
 }
 
 /* `:visited` is deliberately after `:hover` for the colour, and the browser restricts what may be
@@ -943,6 +956,10 @@
   color: var(--lutra-link-text-hover);
 }
 
+.lutra-link:visited:active {
+  color: var(--lutra-link-text-hover);
+}
+
 .lutra-link:focus-visible {
   color: var(--lutra-link-text-focus);
   outline: var(--lutra-link-focus-ring-width) solid var(--lutra-link-focus-ring-color);

package/dist/tokens.json

@@ -138,6 +138,12 @@
       "dark": "#7aa2ff",
       "themed": true
     },
+    "--lutra-color-link-text-visited": {
+      "figmaName": "color/link/text/visited",
+      "light": "#5b21b6",
+      "dark": "#c4b5fd",
+      "themed": true
+    },
     "--lutra-color-text-disabled": {
       "figmaName": "color/text/disabled",
       "light": "#9ca3af",
@@ -441,7 +447,7 @@
     },
     "--lutra-component-link-text-visited": {
       "figmaName": "component/link/text/visited",
-      "value": "var(--lutra-color-text-secondary)",
+      "value": "var(--lutra-color-link-text-visited)",
       "themed": false
     },
     "--lutra-component-menu-border": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lutra-ui-system/react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Accessible React components and design tokens for Lutra UI",
   "license": "MIT",
   "repository": {