@amsterdamdatalabs/enact-design-system 0.1.1

package/dist/lib/cx.d.ts

@@ -0,0 +1,2 @@
+/** Join truthy class names. Keeps component JSX free of inline conditionals. */
+export declare function cx(...parts: Array<string | false | null | undefined>): string;

package/dist/tokens.css

@@ -0,0 +1,449 @@
+/* ==== tokens/fonts.css ==== */
+/* Amsterdam Data Labs — webfonts.
+   NOTE: No brand font binaries were provided. These are Google Fonts
+   substitutions chosen to match the geometric, technical wordmark:
+   - Space Grotesk  → display / headings (geometric grotesque, techy)
+   - Manrope        → body / UI text (clean, slightly geometric humanist)
+   - IBM Plex Mono  → code, data, numerals in tables
+   Replace with licensed brand fonts when available. */
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
+
+/* ==== tokens/colors.css ==== */
+/* Amsterdam Data Labs — color tokens.
+   Primitives (--adl-*) come from the ADL W3C DTCG token source.
+   Product code should consume the SEMANTIC tokens (bottom of file). */
+
+:root {
+  /* ── Primitive ramps ───────────────────────────────────────── */
+
+  /* Teal — primary brand. Anchor 500 = #18949a */
+  --adl-teal-50: #e6f4f5;
+  --adl-teal-100: #c0e3e5;
+  --adl-teal-200: #95d0d3;
+  --adl-teal-300: #66bcc0;
+  --adl-teal-400: #3aa9ae;
+  --adl-teal-500: #18949a;
+  --adl-teal-600: #147f84;
+  --adl-teal-700: #10696d;
+  --adl-teal-800: #0c5256;
+  --adl-teal-900: #073b3e;
+
+  /* Mint — secondary brand / success. Anchor 400 = #5acfb0 */
+  --adl-mint-50: #e9f9f4;
+  --adl-mint-100: #cdf1e6;
+  --adl-mint-200: #a6e6d2;
+  --adl-mint-300: #7eddc1;
+  --adl-mint-400: #5acfb0;
+  --adl-mint-500: #3bb898;
+  --adl-mint-600: #2e9a7f;
+  --adl-mint-700: #237b66;
+  --adl-mint-800: #195d4d;
+  --adl-mint-900: #103f34;
+
+  /* Navy — cool ink / dark neutral. Anchors 600/700/900 */
+  --adl-navy-50: #eef2f6;
+  --adl-navy-100: #d2dde7;
+  --adl-navy-200: #a8bccf;
+  --adl-navy-300: #7795b1;
+  --adl-navy-400: #4a6a8a;
+  --adl-navy-500: #2c4763;
+  --adl-navy-600: #1f3a5f;
+  --adl-navy-700: #1a2332;
+  --adl-navy-800: #0f2a44;
+  --adl-navy-900: #0a2840;
+  --adl-navy-950: #061726;
+
+  /* Blue — sky / bright blue. Anchors 200/400/500 */
+  --adl-blue-50: #eaf3fc;
+  --adl-blue-100: #cfe6f9;
+  --adl-blue-200: #c5ddf2;
+  --adl-blue-300: #8ec6ee;
+  --adl-blue-400: #5dade2;
+  --adl-blue-500: #4fa0e3;
+  --adl-blue-600: #3a82c4;
+  --adl-blue-700: #2e679e;
+  --adl-blue-800: #234e78;
+  --adl-blue-900: #183753;
+
+  /* Indigo — periwinkle. Anchors 500/600 */
+  --adl-indigo-50: #eef1fb;
+  --adl-indigo-100: #d6ddf5;
+  --adl-indigo-200: #b3c0ec;
+  --adl-indigo-300: #8fa3e2;
+  --adl-indigo-400: #7389db;
+  --adl-indigo-500: #5b7bd5;
+  --adl-indigo-600: #5b6bc0;
+  --adl-indigo-700: #48569c;
+  --adl-indigo-800: #384278;
+  --adl-indigo-900: #282f55;
+
+  /* Violet — accent. Anchor 500 = #6c5ce7 */
+  --adl-violet-50: #efedfc;
+  --adl-violet-100: #d8d2f8;
+  --adl-violet-200: #bab0f2;
+  --adl-violet-300: #9b8eec;
+  --adl-violet-400: #8170e9;
+  --adl-violet-500: #6c5ce7;
+  --adl-violet-600: #5847c4;
+  --adl-violet-700: #46389c;
+  --adl-violet-800: #352b76;
+  --adl-violet-900: #251e52;
+
+  /* Cyan — highlight. Anchor 400 = #4dd0e1 */
+  --adl-cyan-50: #e7fafc;
+  --adl-cyan-100: #c4f1f6;
+  --adl-cyan-200: #97e5ee;
+  --adl-cyan-300: #6cdae6;
+  --adl-cyan-400: #4dd0e1;
+  --adl-cyan-500: #2bb6c8;
+  --adl-cyan-600: #2194a3;
+  --adl-cyan-700: #19737f;
+  --adl-cyan-800: #12545d;
+  --adl-cyan-900: #0b373d;
+
+  /* Maroon — deep accent (estimated anchor 600) */
+  --adl-maroon-50: #f7eaea;
+  --adl-maroon-100: #ecc9c9;
+  --adl-maroon-200: #dc9d9d;
+  --adl-maroon-300: #c96f6f;
+  --adl-maroon-400: #a84444;
+  --adl-maroon-500: #842b2b;
+  --adl-maroon-600: #6b2020;
+  --adl-maroon-700: #561a1a;
+  --adl-maroon-800: #411414;
+  --adl-maroon-900: #2d0e0e;
+
+  /* Red — error / danger. Anchors 300 (dark) / 500 (light) */
+  --adl-red-50: #fcebe9;
+  --adl-red-100: #f6cac5;
+  --adl-red-200: #eea49b;
+  --adl-red-300: #e57373;
+  --adl-red-400: #d4564a;
+  --adl-red-500: #c0392b;
+  --adl-red-600: #a32d21;
+  --adl-red-700: #82241a;
+  --adl-red-800: #611b14;
+  --adl-red-900: #41120d;
+
+  /* Pink — soft tint. Anchor 200 = #f5c2c7 */
+  --adl-pink-50: #fdf0f1;
+  --adl-pink-100: #fad9dc;
+  --adl-pink-200: #f5c2c7;
+  --adl-pink-300: #eda1a8;
+  --adl-pink-400: #e07c85;
+  --adl-pink-500: #cf5762;
+
+  /* Amber — warning (added default; no native ADL warning hue) */
+  --adl-amber-50: #fdf6e8;
+  --adl-amber-100: #f9e6bf;
+  --adl-amber-200: #f2cf86;
+  --adl-amber-300: #e9b652;
+  --adl-amber-400: #e0a23b;
+  --adl-amber-500: #c8842a;
+  --adl-amber-600: #a4691f;
+  --adl-amber-700: #7e4f18;
+
+  /* Neutral — cool grays. Anchors 0/50/200 */
+  --adl-neutral-0: #ffffff;
+  --adl-neutral-50: #f7fbff;
+  --adl-neutral-100: #eef4fa;
+  --adl-neutral-200: #dde7f0;
+  --adl-neutral-300: #c2d2e0;
+  --adl-neutral-400: #9fb2c4;
+  --adl-neutral-500: #7388a0;
+  --adl-neutral-600: #51647a;
+  --adl-neutral-700: #374759;
+  --adl-neutral-800: #1f2c3a;
+  --adl-neutral-900: #0e1822;
+}
+
+/* ── Semantic tokens — LIGHT (default) ─────────────────────────
+   Consume these in product code; never the raw ramps. */
+:root {
+  --bg-canvas: var(--adl-neutral-0);
+  --bg-subtle: var(--adl-neutral-50);
+  --bg-muted: var(--adl-neutral-200);
+  --bg-inverse: var(--adl-navy-900);
+
+  --surface-default: var(--adl-neutral-0);
+  --surface-raised: var(--adl-neutral-50);
+  --surface-sunken: var(--adl-neutral-100);
+
+  --text-primary: var(--adl-navy-900);
+  --text-secondary: var(--adl-navy-600);
+  --text-muted: var(--adl-neutral-500);
+  --text-inverse: var(--adl-neutral-0);
+  --text-link: var(--adl-teal-600);
+  --text-on-brand: var(--adl-neutral-0);
+
+  --border-subtle: var(--adl-neutral-200);
+  --border-default: var(--adl-neutral-300);
+  --border-strong: var(--adl-neutral-400);
+  --border-focus: var(--adl-teal-500);
+
+  --brand-primary: var(--adl-teal-500);
+  --brand-primary-hover: var(--adl-teal-600);
+  --brand-primary-active: var(--adl-teal-700);
+  --brand-primary-subtle: var(--adl-teal-50);
+  --brand-secondary: var(--adl-mint-400);
+  --brand-secondary-hover: var(--adl-mint-500);
+  --brand-accent: var(--adl-indigo-500);
+  --brand-accent-alt: var(--adl-violet-500);
+
+  --feedback-info: var(--adl-blue-500);
+  --feedback-info-subtle: var(--adl-blue-50);
+  --feedback-success: var(--adl-mint-600);
+  --feedback-success-subtle: var(--adl-mint-50);
+  --feedback-warning: var(--adl-amber-400);
+  --feedback-warning-subtle: var(--adl-amber-50);
+  --feedback-danger: var(--adl-red-500);
+  --feedback-danger-subtle: var(--adl-red-50);
+
+  /* Foreground for tinted-subtle surfaces (badges, alerts, pills).
+     Dark, saturated text that reads on the light *-subtle backgrounds.
+     Overridden in dark mode to light tints — see [data-theme="dark"]. */
+  --tint-brand-fg: var(--adl-teal-700);
+  --tint-info-fg: var(--adl-blue-700);
+  --tint-success-fg: var(--adl-mint-700);
+  --tint-warning-fg: var(--adl-amber-700);
+  --tint-danger-fg: var(--adl-red-700);
+
+  /* Data-viz categorical order */
+  --chart-1: var(--adl-teal-500);
+  --chart-2: var(--adl-indigo-500);
+  --chart-3: var(--adl-cyan-400);
+  --chart-4: var(--adl-violet-500);
+  --chart-5: var(--adl-blue-500);
+  --chart-6: var(--adl-mint-400);
+}
+
+/* ── Semantic tokens — DARK ───────────────────────────────────
+   Apply data-theme="dark" on <html> or any subtree root. */
+[data-theme="dark"] {
+  --bg-canvas: var(--adl-navy-950);
+  --bg-subtle: var(--adl-navy-900);
+  --bg-muted: var(--adl-navy-800);
+  --bg-inverse: var(--adl-neutral-50);
+
+  --surface-default: var(--adl-navy-900);
+  --surface-raised: var(--adl-navy-800);
+  --surface-sunken: var(--adl-navy-950);
+
+  --text-primary: var(--adl-neutral-50);
+  --text-secondary: var(--adl-blue-200);
+  --text-muted: var(--adl-navy-300);
+  --text-inverse: var(--adl-navy-900);
+  --text-link: var(--adl-blue-400);
+  --text-on-brand: var(--adl-navy-900);
+
+  --border-subtle: var(--adl-navy-800);
+  --border-default: var(--adl-navy-700);
+  --border-strong: var(--adl-navy-600);
+  --border-focus: var(--adl-mint-400);
+
+  --brand-primary: var(--adl-mint-400);
+  --brand-primary-hover: var(--adl-mint-300);
+  --brand-primary-active: var(--adl-mint-200);
+  --brand-primary-subtle: var(--adl-teal-900);
+  --brand-secondary: var(--adl-blue-500);
+  --brand-secondary-hover: var(--adl-blue-400);
+  --brand-accent: var(--adl-indigo-600);
+  --brand-accent-alt: var(--adl-cyan-400);
+
+  --feedback-info: var(--adl-blue-400);
+  --feedback-info-subtle: var(--adl-navy-800);
+  --feedback-success: var(--adl-mint-400);
+  --feedback-success-subtle: var(--adl-teal-900);
+  --feedback-warning: var(--adl-amber-300);
+  --feedback-warning-subtle: var(--adl-amber-700);
+  --feedback-danger: var(--adl-red-300);
+  --feedback-danger-subtle: var(--adl-red-900);
+
+  /* Tinted-surface text flips to light tints so it reads on the dark
+     *-subtle backgrounds (fixes warning text vanishing on amber). */
+  --tint-brand-fg: var(--adl-teal-200);
+  --tint-info-fg: var(--adl-blue-200);
+  --tint-success-fg: var(--adl-mint-200);
+  --tint-warning-fg: var(--adl-amber-200);
+  --tint-danger-fg: var(--adl-red-200);
+
+  --chart-1: var(--adl-cyan-400);
+  --chart-2: var(--adl-indigo-400);
+  --chart-3: var(--adl-mint-400);
+  --chart-4: var(--adl-violet-400);
+  --chart-5: var(--adl-blue-400);
+  --chart-6: var(--adl-teal-300);
+}
+
+/* ==== tokens/typography.css ==== */
+/* Amsterdam Data Labs — typography tokens. */
+:root {
+  /* Families (Google Fonts substitutes — see fonts.css) */
+  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
+  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
+
+  /* Size scale (rem; 16px base) */
+  --text-xs: 0.75rem; /* 12 — captions, table meta */
+  --text-sm: 0.875rem; /* 14 — UI default, labels */
+  --text-md: 1rem; /* 16 — body */
+  --text-lg: 1.125rem; /* 18 — lede */
+  --text-xl: 1.25rem; /* 20 — card titles */
+  --text-2xl: 1.5rem; /* 24 — section heads */
+  --text-3xl: 1.875rem; /* 30 — page titles */
+  --text-4xl: 2.375rem; /* 38 — hero sub */
+  --text-5xl: 3rem; /* 48 — hero */
+  --text-6xl: 3.75rem; /* 60 — display */
+
+  /* Weights */
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --weight-extrabold: 800; /* Manrope only — stat numerals */
+
+  /* Line heights */
+  --leading-tight: 1.1; /* display */
+  --leading-snug: 1.25; /* headings */
+  --leading-normal: 1.5; /* UI */
+  --leading-relaxed: 1.65; /* long-form body */
+
+  /* Tracking */
+  --tracking-tight: -0.02em; /* display ≥ 30px */
+  --tracking-normal: 0;
+  --tracking-wide: 0.08em; /* uppercase labels / eyebrows */
+}
+
+/* ==== tokens/spacing.css ==== */
+/* Amsterdam Data Labs — spacing, breakpoints, z-index. 4px base grid. */
+:root {
+  --space-0: 0;
+  --space-px: 1px;
+  --space-0-5: 2px;
+  --space-1: 4px;
+  --space-1-5: 6px;
+  --space-2: 8px;
+  --space-2-5: 10px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-14: 56px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+  --space-32: 128px;
+  --space-40: 160px;
+  --space-48: 192px;
+
+  /* Breakpoints (min-width, mobile-first) — for reference in JS/media queries:
+     sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536 */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  /* Content widths */
+  --container-max: 1200px;
+  --container-narrow: 720px;
+
+  /* Z-index layers */
+  --z-hide: -1; /* @kind other */
+  --z-base: 0; /* @kind other */
+  --z-raised: 10; /* @kind other */
+  --z-dropdown: 1000; /* @kind other */
+  --z-sticky: 1100; /* @kind other */
+  --z-banner: 1200; /* @kind other */
+  --z-overlay: 1300; /* @kind other */
+  --z-modal: 1400; /* @kind other */
+  --z-popover: 1500; /* @kind other */
+  --z-toast: 1600; /* @kind other */
+  --z-tooltip: 1700; /* @kind other */
+}
+
+/* ==== tokens/effects.css ==== */
+/* Amsterdam Data Labs — radii, shadows, motion. */
+:root {
+  /* Corner radii — crisp, technical; generous only on pills/avatars */
+  --radius-xs: 4px; /* checkboxes, tags */
+  --radius-sm: 6px; /* inputs, buttons */
+  --radius-md: 10px; /* cards */
+  --radius-lg: 14px; /* modals, feature panels */
+  --radius-xl: 20px; /* hero media */
+  --radius-full: 999px; /* pills, avatars */
+
+  /* Shadows — cool navy-tinted, low spread. Elevation, not decoration. */
+  --shadow-xs: 0 1px 2px rgba(10, 40, 64, 0.06);
+  --shadow-sm:
+    0 1px 3px rgba(10, 40, 64, 0.08), 0 1px 2px rgba(10, 40, 64, 0.04);
+  --shadow-md:
+    0 4px 12px rgba(10, 40, 64, 0.1), 0 1px 3px rgba(10, 40, 64, 0.06);
+  --shadow-lg:
+    0 12px 32px rgba(10, 40, 64, 0.14), 0 2px 6px rgba(10, 40, 64, 0.06);
+  --shadow-focus: 0 0 0 3px
+    color-mix(in srgb, var(--border-focus) 30%, transparent);
+
+  /* Motion — quick, understated. No bounces. */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
+  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* @kind other */
+  --duration-fast: 120ms; /* @kind other */
+  --duration-base: 180ms; /* @kind other */
+  --duration-slow: 320ms; /* @kind other */
+}
+
+/* ==== tokens/base.css ==== */
+/* Amsterdam Data Labs — minimal base element styles. */
+:root {
+  color-scheme: light;
+}
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: var(--text-md);
+  -webkit-font-smoothing: antialiased;
+  line-height: var(--leading-normal);
+  color: var(--text-primary);
+  background: var(--bg-canvas);
+  text-rendering: optimizeLegibility;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-snug);
+  color: var(--text-primary);
+  letter-spacing: var(--tracking-tight);
+}
+
+code,
+pre,
+kbd {
+  font-family: var(--font-mono);
+}
+
+a {
+  color: var(--text-link);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+::selection {
+  color: var(--adl-navy-900);
+  background: var(--adl-teal-100);
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@amsterdamdatalabs/enact-design-system",
+  "version": "0.1.1",
+  "description": "Enact design system — authored React + CSS-Modules components and 3-tier design tokens. Single source of truth; no local CSS/Tailwind overrides.",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./styles.css": "./dist/design-system.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc -p tsconfig.build.json && bun scripts/build-tokens.mjs",
+    "prepublishOnly": "bun run build",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src docs scripts",
+    "format": "biome format --write src docs scripts",
+    "fix": "biome check --write src docs scripts",
+    "check": "bun run typecheck && bun run lint && bun run test",
+    "test": "bun test",
+    "test:visual": "playwright test",
+    "test:visual:update": "playwright test --update-snapshots",
+    "docs": "vite --config docs/vite.config.ts"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.0",
+    "@happy-dom/global-registrator": "^20.10.6",
+    "@playwright/test": "^1.61.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/bun": "^1.3.14",
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.5",
+    "@vitejs/plugin-react": "^4.5.2",
+    "axe-core": "^4.12.1",
+    "happy-dom": "^20.10.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.8.3",
+    "ultracite": "^7.8.3",
+    "vite": "^6.3.5"
+  }
+}