@adamarant/designsystem 0.11.2

package/src/tokens/tokens.json

@@ -0,0 +1,413 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "color": {
+    "light": {
+      "bg": {
+        "$value": "#fafafa",
+        "$type": "color",
+        "$description": "Main background"
+      },
+      "bg-subtle": {
+        "$value": "#ffffff",
+        "$type": "color",
+        "$description": "Subtle background"
+      },
+      "bg-muted": {
+        "$value": "#e4e4e7",
+        "$type": "color",
+        "$description": "Muted background"
+      },
+      "bg-elevated": {
+        "$value": "#f4f4f5",
+        "$type": "color",
+        "$description": "Elevated background"
+      },
+      "surface": {
+        "$value": "#ffffff",
+        "$type": "color",
+        "$description": "Surface color"
+      },
+      "surface-hover": {
+        "$value": "#fafafa",
+        "$type": "color"
+      },
+      "surface-active": {
+        "$value": "#f4f4f5",
+        "$type": "color"
+      },
+      "text": {
+        "$value": "#09090b",
+        "$type": "color",
+        "$description": "Primary text — 19.3:1 contrast on bg"
+      },
+      "text-secondary": {
+        "$value": "#52525b",
+        "$type": "color",
+        "$description": "Secondary text — 7.6:1 contrast on bg"
+      },
+      "text-tertiary": {
+        "$value": "#a1a1aa",
+        "$type": "color",
+        "$description": "Tertiary text — decorative only"
+      },
+      "text-disabled": {
+        "$value": "#d4d4d8",
+        "$type": "color",
+        "$description": "Disabled text — exempt per WCAG 1.4.3"
+      },
+      "inverted": {
+        "$value": "#18181b",
+        "$type": "color"
+      },
+      "on-inverted": {
+        "$value": "#fafafa",
+        "$type": "color"
+      },
+      "border": {
+        "$value": "#e4e4e7",
+        "$type": "color"
+      },
+      "border-hover": {
+        "$value": "#d4d4d8",
+        "$type": "color"
+      },
+      "border-active": {
+        "$value": "#a1a1aa",
+        "$type": "color"
+      },
+      "border-subtle": {
+        "$value": "#f4f4f5",
+        "$type": "color"
+      },
+      "interactive": {
+        "$value": "#3f3f46",
+        "$type": "color"
+      },
+      "interactive-hover": {
+        "$value": "#27272a",
+        "$type": "color"
+      },
+      "overlay": {
+        "$value": "rgba(0, 0, 0, 0.5)",
+        "$type": "color"
+      },
+      "overlay-subtle": {
+        "$value": "rgba(0, 0, 0, 0.02)",
+        "$type": "color"
+      },
+      "overlay-hover": {
+        "$value": "rgba(0, 0, 0, 0.04)",
+        "$type": "color"
+      },
+      "overlay-active": {
+        "$value": "rgba(0, 0, 0, 0.08)",
+        "$type": "color"
+      },
+      "nav-bg": {
+        "$value": "rgba(250, 250, 250, 0.8)",
+        "$type": "color"
+      },
+      "nav-border": {
+        "$value": "rgba(228, 228, 231, 0.6)",
+        "$type": "color"
+      },
+      "selection-bg": {
+        "$value": "#09090b",
+        "$type": "color"
+      },
+      "selection-text": {
+        "$value": "#fafafa",
+        "$type": "color"
+      },
+      "scrollbar-thumb": {
+        "$value": "#d4d4d4",
+        "$type": "color"
+      },
+      "scrollbar-thumb-hover": {
+        "$value": "#a3a3a3",
+        "$type": "color"
+      }
+    },
+    "dark": {
+      "bg": {
+        "$value": "#09090b",
+        "$type": "color"
+      },
+      "bg-subtle": {
+        "$value": "#0f0f11",
+        "$type": "color"
+      },
+      "bg-muted": {
+        "$value": "#18181b",
+        "$type": "color"
+      },
+      "bg-elevated": {
+        "$value": "#1c1c20",
+        "$type": "color"
+      },
+      "surface": {
+        "$value": "#0f0f11",
+        "$type": "color"
+      },
+      "surface-hover": {
+        "$value": "#18181b",
+        "$type": "color"
+      },
+      "surface-active": {
+        "$value": "#27272a",
+        "$type": "color"
+      },
+      "text": {
+        "$value": "#fafafa",
+        "$type": "color"
+      },
+      "text-secondary": {
+        "$value": "#a1a1aa",
+        "$type": "color"
+      },
+      "text-tertiary": {
+        "$value": "#71717a",
+        "$type": "color"
+      },
+      "text-disabled": {
+        "$value": "#3f3f46",
+        "$type": "color"
+      },
+      "inverted": {
+        "$value": "#fafafa",
+        "$type": "color"
+      },
+      "on-inverted": {
+        "$value": "#09090b",
+        "$type": "color"
+      },
+      "border": {
+        "$value": "#27272a",
+        "$type": "color"
+      },
+      "border-hover": {
+        "$value": "#3f3f46",
+        "$type": "color"
+      },
+      "border-active": {
+        "$value": "#52525b",
+        "$type": "color"
+      },
+      "border-subtle": {
+        "$value": "#18181b",
+        "$type": "color"
+      },
+      "interactive": {
+        "$value": "#d4d4d8",
+        "$type": "color"
+      },
+      "interactive-hover": {
+        "$value": "#fafafa",
+        "$type": "color"
+      },
+      "overlay": {
+        "$value": "rgba(0, 0, 0, 0.7)",
+        "$type": "color"
+      },
+      "overlay-subtle": {
+        "$value": "rgba(255, 255, 255, 0.03)",
+        "$type": "color"
+      },
+      "overlay-hover": {
+        "$value": "rgba(255, 255, 255, 0.06)",
+        "$type": "color"
+      },
+      "overlay-active": {
+        "$value": "rgba(255, 255, 255, 0.1)",
+        "$type": "color"
+      },
+      "nav-bg": {
+        "$value": "rgba(9, 9, 11, 0.8)",
+        "$type": "color"
+      },
+      "nav-border": {
+        "$value": "rgba(39, 39, 42, 0.6)",
+        "$type": "color"
+      },
+      "selection-bg": {
+        "$value": "#fafafa",
+        "$type": "color"
+      },
+      "selection-text": {
+        "$value": "#09090b",
+        "$type": "color"
+      },
+      "scrollbar-thumb": {
+        "$value": "#27272a",
+        "$type": "color"
+      },
+      "scrollbar-thumb-hover": {
+        "$value": "#3f3f46",
+        "$type": "color"
+      }
+    },
+    "semantic": {
+      "success": {
+        "default": { "$value": "#16a34a", "$type": "color" },
+        "subtle": { "$value": "rgba(22, 163, 74, 0.1)", "$type": "color" },
+        "border": { "$value": "rgba(22, 163, 74, 0.2)", "$type": "color" },
+        "solid": { "$value": "#16a34a", "$type": "color" }
+      },
+      "warning": {
+        "default": { "$value": "#d97706", "$type": "color" },
+        "subtle": { "$value": "rgba(217, 119, 6, 0.1)", "$type": "color" },
+        "border": { "$value": "rgba(217, 119, 6, 0.2)", "$type": "color" },
+        "solid": { "$value": "#d97706", "$type": "color" }
+      },
+      "error": {
+        "default": { "$value": "#dc2626", "$type": "color" },
+        "subtle": { "$value": "rgba(220, 38, 38, 0.1)", "$type": "color" },
+        "border": { "$value": "rgba(220, 38, 38, 0.2)", "$type": "color" },
+        "solid": { "$value": "#dc2626", "$type": "color" }
+      },
+      "info": {
+        "default": { "$value": "#2563eb", "$type": "color" },
+        "subtle": { "$value": "rgba(37, 99, 235, 0.1)", "$type": "color" },
+        "border": { "$value": "rgba(37, 99, 235, 0.2)", "$type": "color" },
+        "solid": { "$value": "#2563eb", "$type": "color" }
+      }
+    },
+    "accent": {
+      "blue": { "$value": "#2563eb", "$type": "color" },
+      "blue-subtle": { "$value": "rgba(37, 99, 235, 0.1)", "$type": "color" },
+      "blue-border": { "$value": "rgba(37, 99, 235, 0.2)", "$type": "color" },
+      "purple": { "$value": "#7c3aed", "$type": "color" },
+      "purple-subtle": { "$value": "rgba(124, 58, 237, 0.1)", "$type": "color" },
+      "purple-border": { "$value": "rgba(124, 58, 237, 0.2)", "$type": "color" },
+      "green": { "$value": "#16a34a", "$type": "color" },
+      "green-subtle": { "$value": "rgba(22, 163, 74, 0.1)", "$type": "color" },
+      "green-border": { "$value": "rgba(22, 163, 74, 0.2)", "$type": "color" },
+      "orange": { "$value": "#d97706", "$type": "color" },
+      "orange-subtle": { "$value": "rgba(217, 119, 6, 0.1)", "$type": "color" },
+      "orange-border": { "$value": "rgba(217, 119, 6, 0.2)", "$type": "color" }
+    },
+    "shadow": {
+      "light": {
+        "sm": { "$value": "0 1px 2px rgba(0, 0, 0, 0.05)", "$type": "shadow" },
+        "md": { "$value": "0 4px 12px rgba(0, 0, 0, 0.08)", "$type": "shadow" },
+        "lg": { "$value": "0 8px 24px rgba(0, 0, 0, 0.12)", "$type": "shadow" }
+      },
+      "dark": {
+        "sm": { "$value": "0 1px 2px rgba(0, 0, 0, 0.2)", "$type": "shadow" },
+        "md": { "$value": "0 4px 12px rgba(0, 0, 0, 0.3)", "$type": "shadow" },
+        "lg": { "$value": "0 8px 24px rgba(0, 0, 0, 0.4)", "$type": "shadow" }
+      }
+    }
+  },
+  "spacing": {
+    "0": { "$value": "0", "$type": "dimension" },
+    "0-5": { "$value": "0.125rem", "$type": "dimension", "$description": "2px" },
+    "1": { "$value": "0.25rem", "$type": "dimension", "$description": "4px" },
+    "1-5": { "$value": "0.375rem", "$type": "dimension", "$description": "6px" },
+    "2": { "$value": "0.5rem", "$type": "dimension", "$description": "8px" },
+    "2-5": { "$value": "0.625rem", "$type": "dimension", "$description": "10px" },
+    "3": { "$value": "0.75rem", "$type": "dimension", "$description": "12px" },
+    "4": { "$value": "1rem", "$type": "dimension", "$description": "16px" },
+    "5": { "$value": "1.25rem", "$type": "dimension", "$description": "20px" },
+    "6": { "$value": "1.5rem", "$type": "dimension", "$description": "24px" },
+    "8": { "$value": "2rem", "$type": "dimension", "$description": "32px" },
+    "10": { "$value": "2.5rem", "$type": "dimension", "$description": "40px" },
+    "12": { "$value": "3rem", "$type": "dimension", "$description": "48px" },
+    "16": { "$value": "4rem", "$type": "dimension", "$description": "64px" },
+    "20": { "$value": "5rem", "$type": "dimension", "$description": "80px" },
+    "24": { "$value": "6rem", "$type": "dimension", "$description": "96px" },
+    "32": { "$value": "8rem", "$type": "dimension", "$description": "128px" }
+  },
+  "sizing": {
+    "1": { "$value": "1.5rem", "$type": "dimension", "$description": "24px — xs tier" },
+    "2": { "$value": "2rem", "$type": "dimension", "$description": "32px — sm tier" },
+    "3": { "$value": "2.5rem", "$type": "dimension", "$description": "40px — md tier" },
+    "4": { "$value": "3rem", "$type": "dimension", "$description": "48px — lg tier" }
+  },
+  "borderRadius": {
+    "none": { "$value": "0", "$type": "dimension" },
+    "sm": { "$value": "6px", "$type": "dimension" },
+    "md": { "$value": "8px", "$type": "dimension" },
+    "lg": { "$value": "12px", "$type": "dimension" },
+    "xl": { "$value": "16px", "$type": "dimension" },
+    "2xl": { "$value": "20px", "$type": "dimension" },
+    "full": { "$value": "9999px", "$type": "dimension" }
+  },
+  "typography": {
+    "fontFamily": {
+      "display": { "$value": "\"Clash Display\", system-ui, sans-serif", "$type": "fontFamily" },
+      "sans": { "$value": "\"Switzer\", system-ui, -apple-system, sans-serif", "$type": "fontFamily" },
+      "mono": { "$value": "\"Geist Mono\", ui-monospace, \"SF Mono\", monospace", "$type": "fontFamily" }
+    },
+    "fontSize": {
+      "2xs": { "$value": "0.625rem", "$type": "dimension", "$description": "10px" },
+      "xs": { "$value": "0.75rem", "$type": "dimension", "$description": "12px" },
+      "sm": { "$value": "0.875rem", "$type": "dimension", "$description": "14px" },
+      "base": { "$value": "1rem", "$type": "dimension", "$description": "16px" },
+      "lg": { "$value": "1.125rem", "$type": "dimension", "$description": "18px" },
+      "xl": { "$value": "1.25rem", "$type": "dimension", "$description": "20px" },
+      "2xl": { "$value": "1.5rem", "$type": "dimension", "$description": "24px" },
+      "3xl": { "$value": "1.875rem", "$type": "dimension", "$description": "30px" },
+      "4xl": { "$value": "2.25rem", "$type": "dimension", "$description": "36px" },
+      "5xl": { "$value": "3rem", "$type": "dimension", "$description": "48px" },
+      "6xl": { "$value": "3.75rem", "$type": "dimension", "$description": "60px" },
+      "7xl": { "$value": "4.5rem", "$type": "dimension", "$description": "72px" }
+    },
+    "fontWeight": {
+      "light": { "$value": 300, "$type": "fontWeight" },
+      "normal": { "$value": 400, "$type": "fontWeight" },
+      "medium": { "$value": 500, "$type": "fontWeight" },
+      "semibold": { "$value": 600, "$type": "fontWeight" },
+      "bold": { "$value": 700, "$type": "fontWeight" },
+      "display": { "$value": 400, "$type": "fontWeight", "$description": "Clash Display optimal weight" }
+    },
+    "lineHeight": {
+      "none": { "$value": "1", "$type": "number" },
+      "tight": { "$value": "1.1", "$type": "number" },
+      "snug": { "$value": "1.25", "$type": "number" },
+      "normal": { "$value": "1.5", "$type": "number" },
+      "relaxed": { "$value": "1.625", "$type": "number" },
+      "loose": { "$value": "2", "$type": "number" }
+    },
+    "letterSpacing": {
+      "tighter": { "$value": "-0.02em", "$type": "dimension" },
+      "tight": { "$value": "-0.01em", "$type": "dimension" },
+      "normal": { "$value": "0", "$type": "dimension" },
+      "wide": { "$value": "0.05em", "$type": "dimension" },
+      "wider": { "$value": "0.1em", "$type": "dimension" }
+    }
+  },
+  "zIndex": {
+    "base": { "$value": 0, "$type": "number" },
+    "dropdown": { "$value": 50, "$type": "number" },
+    "sticky": { "$value": 60, "$type": "number" },
+    "overlay": { "$value": 80, "$type": "number" },
+    "modal": { "$value": 100, "$type": "number" },
+    "toast": { "$value": 150, "$type": "number" },
+    "tooltip": { "$value": 200, "$type": "number" }
+  },
+  "duration": {
+    "fast": { "$value": "100ms", "$type": "duration" },
+    "normal": { "$value": "200ms", "$type": "duration" },
+    "slow": { "$value": "400ms", "$type": "duration" },
+    "slower": { "$value": "800ms", "$type": "duration" }
+  },
+  "easing": {
+    "default": { "$value": "ease", "$type": "cubicBezier" },
+    "out": { "$value": "cubic-bezier(0, 0, 0.2, 1)", "$type": "cubicBezier" },
+    "out-expo": { "$value": "cubic-bezier(0.16, 1, 0.3, 1)", "$type": "cubicBezier" },
+    "bounce": { "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)", "$type": "cubicBezier" }
+  },
+  "blur": {
+    "sm": { "$value": "4px", "$type": "dimension" },
+    "md": { "$value": "12px", "$type": "dimension" },
+    "lg": { "$value": "20px", "$type": "dimension" }
+  },
+  "opacity": {
+    "disabled": { "$value": 0.5, "$type": "number" }
+  },
+  "focusRing": {
+    "width": { "$value": "2px", "$type": "dimension" },
+    "offset": { "$value": "2px", "$type": "dimension" }
+  }
+}

package/src/tokens/typography.css

@@ -0,0 +1,90 @@
+/* ==========================================================================
+   Design Tokens: Typography
+   Clash Display headings, Switzer body.
+   Editorial feel, generous sizing, tight tracking on display.
+   ========================================================================== */
+
+:root {
+  /* --- Font Families ---
+       Convention over configuration. If the consumer loads its typefaces via
+       `next/font/local` (or the `geist` package) using the conventional
+       variable names --font-display / --font-sans / --font-geist-mono, the DS
+       picks them up with zero extra wiring.
+
+       Why these are declared BOTH at :root and on body:
+       next/font injects --font-* on the <body> element (via className), not on
+       :root. If var(--font-*, fallback) were only resolved at :root, the
+       fallback literal would always win (the Next variable is not in scope
+       there). The body-level declaration below re-evaluates the token where
+       --font-* is actually set, so Next's internal font name resolves.
+
+       Root-level keeps the literal fallbacks so the DS still works in
+       environments without next/font (Storybook, plain HTML, etc.) — there
+       the quoted "Clash Display" / "Switzer" / "Geist Mono" need to be
+       loadable (e.g. locally installed or loaded via @font-face elsewhere).
+
+       Want a different typeface? Override --ds-font-display / --ds-font-sans
+       at consumer body scope and you are done (digiko used Manrope this way). */
+  --ds-font-display: "Clash Display", system-ui, sans-serif;
+  --ds-font-sans: "Switzer", system-ui, -apple-system, sans-serif;
+  --ds-font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
+
+  /* --- Display Font Weight (Clash Display looks best at 400) --- */
+  --ds-font-display-weight: 400;
+
+  /* --- Font Sizes --- */
+  --ds-text-2xs: 0.625rem;    /* 10px */
+  --ds-text-xs: 0.75rem;      /* 12px */
+  --ds-text-sm: 0.875rem;     /* 14px */
+  --ds-text-base: 1rem;       /* 16px */
+  --ds-text-lg: 1.125rem;     /* 18px */
+  --ds-text-xl: 1.25rem;      /* 20px */
+  --ds-text-2xl: 1.5rem;      /* 24px */
+  --ds-text-3xl: 1.875rem;    /* 30px */
+  --ds-text-4xl: 2.25rem;     /* 36px */
+  --ds-text-5xl: 3rem;        /* 48px */
+  --ds-text-6xl: 3.75rem;     /* 60px */
+  --ds-text-7xl: 4.5rem;      /* 72px */
+
+  /* --- Editorial long-form fluid sizes ---
+       Promoted from esys/blog.css on 12 Apr 2026 after the blog incident.
+       These target magazine-style article reading, between the functional
+       UI scale (ds-text-*) and the display scale (ds-hero-title). Used by
+       .ds-editorial-title and .ds-editorial-lede in components/prose.css. */
+  --ds-text-editorial-title: clamp(2.5rem, 4vw + 1.5rem, 4.5rem);  /* 40 → 72px */
+  --ds-text-editorial-lede: clamp(1.125rem, 0.5vw + 1rem, 1.375rem); /* 18 → 22px */
+  --ds-text-editorial-body: 1.125rem; /* 18px — editorial reading standard (was 17px pre-Apr 2026) */
+
+  /* --- Font Weights --- */
+  --ds-weight-extralight: 200;
+  --ds-weight-light: 300;
+  --ds-weight-normal: 400;
+  --ds-weight-medium: 500;
+  --ds-weight-semibold: 600;
+  --ds-weight-bold: 700;
+
+  /* --- Line Heights --- */
+  --ds-leading-none: 1;
+  --ds-leading-tight: 1.1;
+  --ds-leading-snug: 1.25;
+  --ds-leading-normal: 1.5;
+  --ds-leading-relaxed: 1.625;
+  --ds-leading-loose: 2;
+
+  /* --- Letter Spacing --- */
+  --ds-tracking-tighter: -0.02em;
+  --ds-tracking-tight: -0.01em;
+  --ds-tracking-normal: 0;
+  --ds-tracking-wide: 0.05em;
+  --ds-tracking-wider: 0.1em;
+}
+
+/* Body-scope re-declaration of the font tokens so they resolve against the
+   --font-* variables that next/font injects on <body> (see :root comment
+   above). Without this, the var(--font-*, fallback) would always hit the
+   fallback because --font-* is not in scope at :root. */
+body {
+  --ds-font-display: var(--font-display, "Clash Display"), system-ui, sans-serif;
+  --ds-font-sans: var(--font-sans, "Switzer"), system-ui, -apple-system, sans-serif;
+  --ds-font-mono: var(--font-geist-mono, "Geist Mono"), ui-monospace, "SF Mono", monospace;
+}

package/src/utilities/a11y.css

@@ -0,0 +1,102 @@
+/* ==========================================================================
+   Utilities: Accessibility
+   Screen-reader helpers, skip links, focus utilities, and motion control.
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Screen Reader Only — visually hidden, available to assistive technology
+   --------------------------------------------------------------------------- */
+
+.ds-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Not Screen Reader Only — reset ds-sr-only when needed (e.g., responsive)
+   --------------------------------------------------------------------------- */
+
+.ds-not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+/* ---------------------------------------------------------------------------
+   Focus Visible Only — invisible by default, shown on keyboard focus
+   --------------------------------------------------------------------------- */
+
+.ds-focus-visible-only {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ds-focus-visible-only:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ---------------------------------------------------------------------------
+   Skip Link — skip to main content, visible only on focus
+   --------------------------------------------------------------------------- */
+
+.ds-skip-link {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.ds-skip-link:focus-visible {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--ds-z-tooltip, 200);
+  width: auto;
+  height: auto;
+  padding: var(--ds-space-3) var(--ds-space-5);
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+  background-color: var(--ds-color-inverted);
+  color: var(--ds-color-on-inverted);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  border-radius: 0 0 var(--ds-radius-lg) 0;
+  box-shadow: var(--ds-shadow-lg);
+  text-decoration: none;
+  outline: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Reduce Motion — force reduced motion on a specific element
+   --------------------------------------------------------------------------- */
+
+.ds-reduce-motion,
+.ds-reduce-motion *,
+.ds-reduce-motion *::before,
+.ds-reduce-motion *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+  scroll-behavior: auto !important;
+}

package/src/utilities/index.css

@@ -0,0 +1,7 @@
+@import './layout.css';
+@import './spacing.css';
+@import './sizing.css';
+@import './text.css';
+@import './interactive.css';
+@import './states.css';
+@import './a11y.css';