@dtsports/design-system 0.2.0

package/src/styles/generated/tokens.ts

@@ -0,0 +1,119 @@
+// GENERATED by scripts/build-tokens.mjs from src/tokens/tokens.json — do not edit (Tailwind preset data)
+
+export const colors = {
+  "brand-lime": "hsl(var(--brand-lime))",
+  "brand-lime-foreground": "hsl(var(--brand-lime-foreground))",
+  "brand-forest": "hsl(var(--brand-forest))",
+  "brand-forest-foreground": "hsl(var(--brand-forest-foreground))",
+  "background": "hsl(var(--background))",
+  "bg-subtle": "hsl(var(--bg-subtle))",
+  "bg-muted": "hsl(var(--bg-muted))",
+  "border": "hsl(var(--border))",
+  "border-strong": "hsl(var(--border-strong))",
+  "foreground": "hsl(var(--foreground))",
+  "text-muted": "hsl(var(--text-muted))",
+  "text-subtle": "hsl(var(--text-subtle))",
+  "success": "hsl(var(--success))",
+  "success-foreground": "hsl(var(--success-foreground))",
+  "warning": "hsl(var(--warning))",
+  "warning-foreground": "hsl(var(--warning-foreground))",
+  "danger": "hsl(var(--danger))",
+  "danger-foreground": "hsl(var(--danger-foreground))",
+  "info": "hsl(var(--info))",
+  "info-foreground": "hsl(var(--info-foreground))",
+  "ring": "hsl(var(--ring))",
+} as const;
+
+export const fontFamily = {
+  sans: ['"Exo 2"', 'system-ui', 'sans-serif'],
+  mono: ['ui-monospace', 'SFMono-Regular', '"JetBrains Mono"', 'Menlo', 'monospace'],
+} as const;
+
+export const fontSize = {
+  "xs": ["11px", { lineHeight: "16px" }],
+  "sm": ["13px", { lineHeight: "18px" }],
+  "base": ["14px", { lineHeight: "20px" }],
+  "md": ["15px", { lineHeight: "22px" }],
+  "lg": ["17px", { lineHeight: "24px" }],
+  "xl": ["20px", { lineHeight: "28px" }],
+  "2xl": ["24px", { lineHeight: "32px" }],
+  "3xl": ["30px", { lineHeight: "36px" }],
+} as const;
+
+export const fontSizeFluid = {
+  "display-sm": ["clamp(32px, 24px + 2.5vw, 44px)", { lineHeight: "1.1", letterSpacing: "-0.02em" }],
+  "display": ["clamp(40px, 26px + 4vw, 64px)", { lineHeight: "1.05", letterSpacing: "-0.02em" }],
+  "display-lg": ["clamp(48px, 28px + 6vw, 96px)", { lineHeight: "1", letterSpacing: "-0.025em" }],
+} as const;
+
+export const backgroundImage = {
+  "gradient-brand": "linear-gradient(135deg, hsl(var(--brand-forest)) 0%, hsl(100 55% 38%) 55%, hsl(var(--brand-lime)) 100%)",
+  "gradient-forest-fade": "linear-gradient(180deg, hsl(var(--brand-forest) / 0.08) 0%, transparent 100%)",
+} as const;
+
+export const fontWeight = {
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+} as const;
+
+export const spacing = {
+  "1": "4px",
+  "2": "8px",
+  "3": "12px",
+  "4": "16px",
+  "5": "20px",
+  "6": "24px",
+  "8": "32px",
+  "10": "40px",
+  "12": "48px",
+  "16": "64px",
+  "20": "80px",
+  "24": "96px",
+  "32": "128px",
+  "40": "160px",
+  "0.5": "2px",
+  "1.5": "6px",
+  "2.5": "10px",
+} as const;
+
+export const borderRadius = {
+  none: "0",
+  sm: "var(--radius-sm)",
+  DEFAULT: "var(--radius)",
+  md: "var(--radius-md)",
+  full: "9999px",
+} as const;
+
+export const boxShadow = {
+  none: "none",
+  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;
+
+export const transitionDuration = {
+  DEFAULT: "150ms",
+  "slow": "200ms",
+} as const;
+
+export const transitionTimingFunction = {
+  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;
+
+export const screens = {
+  "sm": "640px",
+  "md": "768px",
+  "lg": "1024px",
+  "xl": "1280px",
+  "2xl": "1536px",
+} as const;

package/src/styles/globals.css

@@ -0,0 +1,131 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  /* ── GENERATED TOKENS — edit src/tokens/tokens.json, then run `npm run build:tokens` ── */
+  :root {
+    --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%;
+
+    --radius-sm: 2px;
+    --radius: 4px;
+    --radius-md: 6px;
+  }
+
+  .dark {
+    --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%;
+  }
+  /* ── END GENERATED TOKENS ── */
+
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  html {
+    font-family:
+      "Exo 2",
+      system-ui,
+      -apple-system,
+      sans-serif;
+    font-size: 14px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-feature-settings: "cv11", "ss03";
+  }
+
+  /* Numeric rendering */
+  .tabular {
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: "tnum" 1;
+  }
+
+  /* Honor reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
+  /* Visible focus ring fallback for any element that opts in.
+     Full opacity on purpose — the ring must hit 3:1 non-text contrast. */
+  :focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  /* Skip link */
+  .skip-link {
+    position: absolute;
+    left: -9999px;
+    z-index: 999;
+    padding: 8px 12px;
+    background: hsl(var(--brand-forest));
+    color: hsl(var(--brand-forest-foreground));
+    font-size: 13px;
+    border-radius: var(--radius);
+  }
+  .skip-link:focus {
+    left: 8px;
+    top: 8px;
+  }
+}
+
+@layer utilities {
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background: hsl(var(--border-strong));
+    border-radius: 9999px;
+  }
+}

package/src/styles/tailwind.preset.ts

@@ -0,0 +1,134 @@
+import type { Config } from "tailwindcss";
+// Explicit ".js" — Tailwind v3 has no exports map, so strict Node ESM
+// needs the extension (bundlers/jiti accept it too).
+import plugin from "tailwindcss/plugin.js";
+import {
+  backgroundImage,
+  borderRadius,
+  boxShadow,
+  colors,
+  fontFamily,
+  fontSize,
+  fontSizeFluid,
+  fontWeight,
+  screens,
+  spacing,
+  transitionDuration,
+  transitionTimingFunction,
+  zIndex,
+} from "./generated/tokens";
+
+/**
+ * DT Sports — Tailwind preset.
+ *
+ * All token values come from src/tokens/tokens.json via the generated
+ * ./generated/tokens module (run `npm run build:tokens` after editing the
+ * JSON). Only Tailwind-specific wiring lives in this file: dark-mode
+ * strategy, keyframes/animations, and the pointer-coarse variant.
+ *
+ * Consume from apps via:
+ *
+ *   import preset from "@dtsports/design-system/tailwind-preset";
+ *   const config: Config = {
+ *     presets: [preset],
+ *     content: [ ...your app + design-system source paths ],
+ *   };
+ */
+const preset = {
+  darkMode: ["class"],
+  // Empty content here — apps must declare their own paths so Tailwind
+  // can scan the design-system source AND the app's own files.
+  content: [],
+  theme: {
+    // Explicit (non-extend) so web and native share one breakpoint source.
+    screens,
+    extend: {
+      colors: {
+        brand: {
+          lime: colors["brand-lime"],
+          "lime-foreground": colors["brand-lime-foreground"],
+          forest: colors["brand-forest"],
+          "forest-foreground": colors["brand-forest-foreground"],
+        },
+        background: colors.background,
+        "bg-subtle": colors["bg-subtle"],
+        "bg-muted": colors["bg-muted"],
+        border: colors.border,
+        "border-strong": colors["border-strong"],
+        foreground: colors.foreground,
+        "text-muted": colors["text-muted"],
+        "text-subtle": colors["text-subtle"],
+        success: colors.success,
+        "success-foreground": colors["success-foreground"],
+        warning: colors.warning,
+        "warning-foreground": colors["warning-foreground"],
+        danger: colors.danger,
+        "danger-foreground": colors["danger-foreground"],
+        info: colors.info,
+        "info-foreground": colors["info-foreground"],
+        ring: colors.ring,
+      },
+      fontFamily: {
+        sans: [...fontFamily.sans],
+        mono: [...fontFamily.mono],
+      },
+      fontSize: {
+        ...Object.fromEntries(
+          Object.entries(fontSize).map(([k, [size, opts]]) => [
+            k,
+            [size, { ...opts }],
+          ])
+        ),
+        // Marketing display scale — fluid clamp(), zero cost unless used.
+        ...Object.fromEntries(
+          Object.entries(fontSizeFluid).map(([k, [size, opts]]) => [
+            k,
+            [size, { ...opts }],
+          ])
+        ),
+      },
+      fontWeight: { ...fontWeight },
+      spacing: { ...spacing },
+      borderRadius: { ...borderRadius },
+      boxShadow: { ...boxShadow },
+      backgroundImage: { ...backgroundImage },
+      transitionDuration: { ...transitionDuration },
+      transitionTimingFunction: { ...transitionTimingFunction },
+      zIndex: { ...zIndex },
+      keyframes: {
+        "live-pulse": {
+          "0%, 100%": { opacity: "1" },
+          "50%": { opacity: "0.4" },
+        },
+        "fade-in": {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
+        // Opacity-only on purpose. A `transform: translateY(...)` here
+        // would override Tailwind's `-translate-x-1/2 -translate-y-1/2`
+        // centering on the desktop DialogContent (CSS `transform` is a
+        // single property — animation wins), shoving the modal off-
+        // screen to the bottom-right. Opacity is enough entrance polish
+        // and works for both the centered modal and the mobile sheet.
+        "fade-in-up": {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
+      },
+      animation: {
+        "live-pulse": "live-pulse 1.5s ease-in-out infinite",
+        "fade-in": "fade-in 150ms cubic-bezier(0.2, 0, 0, 1)",
+        "fade-in-up": "fade-in-up 200ms cubic-bezier(0.2, 0, 0, 1)",
+      },
+    },
+  },
+  plugins: [
+    // `pointer-coarse:` targets touch-primary devices — used to grow tap
+    // targets to 44px without loosening the dense pointer/desktop layout.
+    plugin(({ addVariant }) => {
+      addVariant("pointer-coarse", "@media (pointer: coarse)");
+    }),
+  ],
+} satisfies Partial<Config>;
+
+export default preset;