@dtsports/design-system 0.2.0

package/src/test/marketing-a11y.test.tsx

@@ -0,0 +1,138 @@
+/**
+ * Accessibility suite for the marketing tier
+ * (@dtsports/design-system/marketing). Same rule config rationale as
+ * a11y.test.tsx.
+ */
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "jest-axe";
+import { describe, expect, it } from "vitest";
+
+import { Button } from "../index";
+import {
+  Footer,
+  Hero,
+  LogoCloud,
+  MarketingNav,
+  Prose,
+  Section,
+} from "../marketing";
+
+const AXE_RULES = {
+  rules: {
+    "color-contrast": { enabled: false },
+    region: { enabled: false },
+    "page-has-heading-one": { enabled: false },
+    "heading-order": { enabled: false },
+    "landmark-one-main": { enabled: false },
+  },
+} as const;
+
+describe("marketing tier", () => {
+  it("full page composition", async () => {
+    const { baseElement } = render(
+      <>
+        <MarketingNav
+          brand={
+            <a href="/" aria-label="DT Sports home">
+              <span className="font-bold">DT Sports</span>
+            </a>
+          }
+          links={[
+            { label: "Games", href: "/games" },
+            { label: "Venues", href: "/venues" },
+            { label: "Pricing", href: "/pricing" },
+          ]}
+          cta={<Button variant="accent">Find a game</Button>}
+        />
+        <Hero
+          eyebrow="Pickup soccer, organized"
+          title="Book a game in 30 seconds"
+          description="Real fields, fair teams, instant refunds."
+          actions={
+            <>
+              <Button variant="accent" size="touch">
+                Find a game
+              </Button>
+              <Button variant="secondary" size="touch">
+                Host with us
+              </Button>
+            </>
+          }
+        />
+        <LogoCloud label="Trusted by leagues across NYC">
+          <span aria-label="Astoria League">AL</span>
+          <span aria-label="McCarren FC">MFC</span>
+        </LogoCloud>
+        <Section
+          id="how-it-works"
+          eyebrow="How it works"
+          title="Three taps to kickoff"
+          description="Browse, book, play."
+        >
+          <p>Feature grid goes here.</p>
+        </Section>
+        <Footer
+          brand={<span className="font-bold">DT Sports</span>}
+          tagline="Pickup sports, organized."
+          columns={[
+            {
+              title: "Product",
+              links: [
+                { label: "Games", href: "/games" },
+                { label: "Venues", href: "/venues" },
+              ],
+            },
+            {
+              title: "Company",
+              links: [{ label: "About", href: "/about" }],
+            },
+          ]}
+          legal="© 2026 DT Sports"
+        />
+      </>
+    );
+    expect(await axe(baseElement, AXE_RULES)).toHaveNoViolations();
+  });
+
+  it("mobile menu toggle is wired and accessible when open", async () => {
+    const user = userEvent.setup();
+    const { baseElement } = render(
+      <MarketingNav
+        brand={<span className="font-bold">DT Sports</span>}
+        links={[{ label: "Games", href: "/games" }]}
+        cta={<Button variant="accent">Find a game</Button>}
+      />
+    );
+    const toggle = screen.getByRole("button", { name: "Open menu" });
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+    await user.click(toggle);
+    expect(screen.getByRole("button", { name: "Close menu" })).toHaveAttribute(
+      "aria-expanded",
+      "true"
+    );
+    // Panel content is reachable while open.
+    expect(
+      screen.getAllByRole("link", { name: "Games" }).length
+    ).toBeGreaterThan(0);
+    expect(await axe(baseElement, AXE_RULES)).toHaveNoViolations();
+  });
+
+  it("Prose long-form content", async () => {
+    const { baseElement } = render(
+      <Prose>
+        <h2>Refund policy</h2>
+        <p>
+          Cancel up to 2 hours before kickoff for a{" "}
+          <a href="/credit">full credit</a>.
+        </p>
+        <ul>
+          <li>Weather cancellations refund automatically.</li>
+          <li>Host cancellations refund to the original card.</li>
+        </ul>
+        <blockquote>No surprise debits, ever.</blockquote>
+      </Prose>
+    );
+    expect(await axe(baseElement, AXE_RULES)).toHaveNoViolations();
+  });
+});

package/src/test/setup.ts

@@ -0,0 +1,47 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup } from "@testing-library/react";
+import { toHaveNoViolations } from "jest-axe";
+import { afterEach, expect, vi } from "vitest";
+
+expect.extend(toHaveNoViolations);
+
+// RTL auto-cleanup needs vitest globals; we run without them, so clean
+// up explicitly — axe scans document.body and would see leaked renders.
+afterEach(cleanup);
+
+// jsdom lacks these browser APIs that Radix and ThemeProvider rely on.
+if (!window.matchMedia) {
+  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+}
+
+if (!window.ResizeObserver) {
+  window.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+}
+
+if (!Element.prototype.scrollIntoView) {
+  Element.prototype.scrollIntoView = vi.fn();
+}
+
+// Radix Select/DropdownMenu call these pointer-capture APIs.
+if (!Element.prototype.hasPointerCapture) {
+  Element.prototype.hasPointerCapture = vi.fn().mockReturnValue(false);
+}
+if (!Element.prototype.setPointerCapture) {
+  Element.prototype.setPointerCapture = vi.fn();
+}
+if (!Element.prototype.releasePointerCapture) {
+  Element.prototype.releasePointerCapture = vi.fn();
+}

package/src/tokens/index.ts

@@ -0,0 +1,154 @@
+// GENERATED by scripts/build-tokens.mjs from src/tokens/tokens.json — do not edit (platform-agnostic tokens for React Native / plain JS)
+
+/** Resolved color palettes. Values are CSS hsl() strings (RN-compatible). */
+export const palette = {
+  light: {
+    "brand-lime": "hsl(72 65% 52%)",
+    "brand-lime-foreground": "hsl(0 0% 4%)",
+    "brand-forest": "hsl(147 66% 26%)",
+    "brand-forest-foreground": "hsl(0 0% 100%)",
+    "background": "hsl(0 0% 100%)",
+    "bg-subtle": "hsl(0 0% 98%)",
+    "bg-muted": "hsl(240 5% 96%)",
+    "border": "hsl(0 0% 90%)",
+    "border-strong": "hsl(0 0% 83%)",
+    "foreground": "hsl(0 0% 4%)",
+    "text-muted": "hsl(0 0% 32%)",
+    "text-subtle": "hsl(0 0% 45%)",
+    "success": "hsl(142 72% 29%)",
+    "success-foreground": "hsl(0 0% 100%)",
+    "warning": "hsl(35 90% 33%)",
+    "warning-foreground": "hsl(0 0% 100%)",
+    "danger": "hsl(0 72% 49%)",
+    "danger-foreground": "hsl(0 0% 100%)",
+    "info": "hsl(217 91% 50%)",
+    "info-foreground": "hsl(0 0% 100%)",
+    "ring": "hsl(147 66% 26%)",
+  },
+  dark: {
+    "brand-lime": "hsl(72 65% 52%)",
+    "brand-lime-foreground": "hsl(0 0% 4%)",
+    "brand-forest": "hsl(147 66% 26%)",
+    "brand-forest-foreground": "hsl(0 0% 100%)",
+    "background": "hsl(0 0% 4%)",
+    "bg-subtle": "hsl(0 0% 8%)",
+    "bg-muted": "hsl(0 0% 12%)",
+    "border": "hsl(0 0% 15%)",
+    "border-strong": "hsl(240 5% 26%)",
+    "foreground": "hsl(0 0% 98%)",
+    "text-muted": "hsl(240 5% 65%)",
+    "text-subtle": "hsl(240 4% 52%)",
+    "success": "hsl(142 60% 45%)",
+    "success-foreground": "hsl(0 0% 4%)",
+    "warning": "hsl(38 92% 50%)",
+    "warning-foreground": "hsl(0 0% 4%)",
+    "danger": "hsl(0 84% 62%)",
+    "danger-foreground": "hsl(0 0% 4%)",
+    "info": "hsl(217 91% 62%)",
+    "info-foreground": "hsl(0 0% 4%)",
+    "ring": "hsl(72 65% 52%)",
+  },
+} as const;
+
+export type ThemeName = keyof typeof palette;
+export type ColorToken = keyof typeof palette.light;
+
+/** Spacing scale in device pixels. */
+export const spacing = {
+  "1": 4,
+  "2": 8,
+  "3": 12,
+  "4": 16,
+  "5": 20,
+  "6": 24,
+  "8": 32,
+  "10": 40,
+  "12": 48,
+  "16": 64,
+  "20": 80,
+  "24": 96,
+  "32": 128,
+  "40": 160,
+  "0.5": 2,
+  "1.5": 6,
+  "2.5": 10,
+} as const;
+
+/** Type scale in device pixels. */
+export const fontSize = {
+  "xs": { size: 11, lineHeight: 16 },
+  "sm": { size: 13, lineHeight: 18 },
+  "base": { size: 14, lineHeight: 20 },
+  "md": { size: 15, lineHeight: 22 },
+  "lg": { size: 17, lineHeight: 24 },
+  "xl": { size: 20, lineHeight: 28 },
+  "2xl": { size: 24, lineHeight: 32 },
+  "3xl": { size: 30, lineHeight: 36 },
+} as const;
+
+export const fontWeight = {
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+} as const;
+
+/** Marketing display scale — RN gets the min/max bounds (no vw units). */
+export const fontSizeFluid = {
+  "display-sm": { min: 32, max: 44, lineHeight: 1.1 },
+  "display": { min: 40, max: 64, lineHeight: 1.05 },
+  "display-lg": { min: 48, max: 96, lineHeight: 1 },
+} as const;
+
+/** CSS gradient strings (web); RN needs its own gradient impl. */
+export const gradient = {
+  "brand": "linear-gradient(135deg, hsl(var(--brand-forest)) 0%, hsl(100 55% 38%) 55%, hsl(var(--brand-lime)) 100%)",
+  "forest-fade": "linear-gradient(180deg, hsl(var(--brand-forest) / 0.08) 0%, transparent 100%)",
+} as const;
+
+export const fontFamily = {
+  sans: ['Exo 2', 'system-ui', 'sans-serif'],
+  mono: ['ui-monospace', 'SFMono-Regular', 'JetBrains Mono', 'Menlo', 'monospace'],
+} as const;
+
+/** Corner radii in device pixels. */
+export const radius = {
+  "sm": 2,
+  base: 4,
+  "md": 6,
+} as const;
+
+/** CSS box-shadow strings — map to RN elevation/shadow* as needed. */
+export const shadow = {
+  sm: "0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.04)",
+  md: "0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06)",
+  lg: "0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08)",
+} as const;
+
+/** Durations in ms. */
+export const duration = {
+  base: 150,
+  "slow": 200,
+  "pulse": 1500,
+} as const;
+
+export const easing = {
+  out: "cubic-bezier(0.2, 0, 0, 1)",
+} as const;
+
+export const zIndex = {
+  sticky: 20,
+  overlay: 40,
+  modal: 50,
+  popover: 50,
+  toast: 60,
+} as const;
+
+/** Breakpoints in px (web); useful for RN tablet/phone splits too. */
+export const breakpoint = {
+  "sm": 640,
+  "md": 768,
+  "lg": 1024,
+  "xl": 1280,
+  "2xl": 1536,
+} as const;

package/src/tokens/tokens.json

@@ -0,0 +1,154 @@
+{
+  "$description": "DT Sports design tokens — single source of truth. Edit this file, then run `npm run build:tokens`. Never edit the generated blocks in globals.css, src/styles/generated/, or src/tokens/index.ts by hand.",
+  "color": {
+    "$format": "HSL channel triplets (\"H S% L%\") so CSS can compose hsl(var(--x) / alpha).",
+    "light": {
+      "brand-lime": "72 65% 52%",
+      "brand-lime-foreground": "0 0% 4%",
+      "brand-forest": "147 66% 26%",
+      "brand-forest-foreground": "0 0% 100%",
+      "background": "0 0% 100%",
+      "bg-subtle": "0 0% 98%",
+      "bg-muted": "240 5% 96%",
+      "border": "0 0% 90%",
+      "border-strong": "0 0% 83%",
+      "foreground": "0 0% 4%",
+      "text-muted": "0 0% 32%",
+      "text-subtle": "0 0% 45%",
+      "success": "142 72% 29%",
+      "success-foreground": "0 0% 100%",
+      "warning": "35 90% 33%",
+      "warning-foreground": "0 0% 100%",
+      "danger": "0 72% 49%",
+      "danger-foreground": "0 0% 100%",
+      "info": "217 91% 50%",
+      "info-foreground": "0 0% 100%",
+      "ring": "147 66% 26%"
+    },
+    "dark": {
+      "$comment": "Overrides only — anything not listed inherits the light value.",
+      "background": "0 0% 4%",
+      "bg-subtle": "0 0% 8%",
+      "bg-muted": "0 0% 12%",
+      "border": "0 0% 15%",
+      "border-strong": "240 5% 26%",
+      "foreground": "0 0% 98%",
+      "text-muted": "240 5% 65%",
+      "text-subtle": "240 4% 52%",
+      "success": "142 60% 45%",
+      "success-foreground": "0 0% 4%",
+      "warning": "38 92% 50%",
+      "warning-foreground": "0 0% 4%",
+      "danger": "0 84% 62%",
+      "danger-foreground": "0 0% 4%",
+      "info": "217 91% 62%",
+      "info-foreground": "0 0% 4%",
+      "ring": "72 65% 52%"
+    }
+  },
+  "fontFamily": {
+    "sans": ["\"Exo 2\"", "system-ui", "sans-serif"],
+    "mono": [
+      "ui-monospace",
+      "SFMono-Regular",
+      "\"JetBrains Mono\"",
+      "Menlo",
+      "monospace"
+    ]
+  },
+  "fontSize": {
+    "xs": { "size": 11, "lineHeight": 16 },
+    "sm": { "size": 13, "lineHeight": 18 },
+    "base": { "size": 14, "lineHeight": 20 },
+    "md": { "size": 15, "lineHeight": 22 },
+    "lg": { "size": 17, "lineHeight": 24 },
+    "xl": { "size": 20, "lineHeight": 28 },
+    "2xl": { "size": 24, "lineHeight": 32 },
+    "3xl": { "size": 30, "lineHeight": 36 }
+  },
+  "fontSizeFluid": {
+    "$comment": "Marketing display scale — clamp(minPx, basePx + vw, maxPx). Web gets fluid clamp(); React Native gets {min,max}.",
+    "display-sm": {
+      "min": 32,
+      "max": 44,
+      "base": 24,
+      "vw": 2.5,
+      "lineHeight": 1.1,
+      "letterSpacing": "-0.02em"
+    },
+    "display": {
+      "min": 40,
+      "max": 64,
+      "base": 26,
+      "vw": 4,
+      "lineHeight": 1.05,
+      "letterSpacing": "-0.02em"
+    },
+    "display-lg": {
+      "min": 48,
+      "max": 96,
+      "base": 28,
+      "vw": 6,
+      "lineHeight": 1,
+      "letterSpacing": "-0.025em"
+    }
+  },
+  "fontWeight": {
+    "normal": 400,
+    "medium": 500,
+    "semibold": 600,
+    "bold": 700
+  },
+  "spacing": {
+    "0.5": 2,
+    "1": 4,
+    "1.5": 6,
+    "2": 8,
+    "2.5": 10,
+    "3": 12,
+    "4": 16,
+    "5": 20,
+    "6": 24,
+    "8": 32,
+    "10": 40,
+    "12": 48,
+    "16": 64,
+    "20": 80,
+    "24": 96,
+    "32": 128,
+    "40": 160
+  },
+  "radius": {
+    "sm": 2,
+    "DEFAULT": 4,
+    "md": 6
+  },
+  "shadow": {
+    "sm": "0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.04)",
+    "md": "0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06)",
+    "lg": "0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08)"
+  },
+  "gradient": {
+    "brand": "linear-gradient(135deg, hsl(var(--brand-forest)) 0%, hsl(100 55% 38%) 55%, hsl(var(--brand-lime)) 100%)",
+    "forest-fade": "linear-gradient(180deg, hsl(var(--brand-forest) / 0.08) 0%, transparent 100%)"
+  },
+  "motion": {
+    "duration": { "DEFAULT": 150, "slow": 200, "pulse": 1500 },
+    "easing": { "out": "cubic-bezier(0.2, 0, 0, 1)" }
+  },
+  "zIndex": {
+    "sticky": 20,
+    "overlay": 40,
+    "modal": 50,
+    "popover": 50,
+    "toast": 60
+  },
+  "breakpoint": {
+    "$comment": "Matches Tailwind defaults; declared so RN and marketing share them.",
+    "sm": 640,
+    "md": 768,
+    "lg": 1024,
+    "xl": 1280,
+    "2xl": 1536
+  }
+}