@cupped/tokens 0.1.0

package/dist/native/index.js

@@ -0,0 +1,279 @@
+// GENERATED FILE — do not edit. Canonical source: tokens/**/*.tokens.json
+// (npm run build in @cupped/tokens). Dimensions are unitless RN dp numbers,
+// durations are ms, fontFamily is a single string. shadow.*.boxShadow targets
+// RN 0.76+/new architecture; shadow.*.ios/android are the legacy props.
+export const tokens = {
+  "color": {
+    "canvas": "#F8FAFC",
+    "card": "#FFFFFF",
+    "canvasBorder": "#E2E8F0",
+    "canvasBorderSubtle": "#F1F5F9",
+    "ink": {
+      "default": "#0F172A",
+      "secondary": "#475569",
+      "muted": "#94A3B8",
+      "inverse": "#F8FAFC"
+    },
+    "primary": {
+      "default": "#E07A5F",
+      "strong": "#C05539",
+      "strongHover": "#AD4A30",
+      "hover": "#D16A4F",
+      "light": "#FDF2F0",
+      "muted": "rgba(224, 122, 95, 0.12)"
+    },
+    "success": {
+      "default": "#22C55E",
+      "light": "#F0FDF4",
+      "ink": "#15803D"
+    },
+    "error": {
+      "default": "#EF4444",
+      "light": "#FEF2F2",
+      "ink": "#B91C1C"
+    },
+    "warning": {
+      "default": "#F59E0B",
+      "light": "#FFFBEB",
+      "ink": "#B45309"
+    },
+    "info": {
+      "default": "#3B82F6",
+      "light": "#EFF6FF",
+      "ink": "#1D4ED8"
+    },
+    "flavor": {
+      "fruity": {
+        "fill": "#B44C54",
+        "text": "#9B494E"
+      },
+      "berry": {
+        "fill": "#AC4D7B",
+        "text": "#94496D"
+      },
+      "citrus": {
+        "fill": "#A65F02",
+        "text": "#925512"
+      },
+      "sweet": {
+        "fill": "#8E6E09",
+        "text": "#7E6207"
+      },
+      "floral": {
+        "fill": "#865CB2",
+        "text": "#755498"
+      },
+      "green": {
+        "fill": "#4E8429",
+        "text": "#49742E"
+      },
+      "spice": {
+        "fill": "#B4503A",
+        "text": "#9B4C3A"
+      },
+      "nutty": {
+        "fill": "#876F49",
+        "text": "#79623E"
+      },
+      "chocolate": {
+        "fill": "#916951",
+        "text": "#825C46"
+      },
+      "roasted": {
+        "fill": "#896B5E",
+        "text": "#7B5F52"
+      }
+    },
+    "onFlavor": "#FFFFFF",
+    "xp": "#8E6E09",
+    "xpAccessible": "#7E6207",
+    "ember": "#F97316",
+    "emberAccessible": "#C2410C",
+    "streak": "#F97316",
+    "streakAccessible": "#C2410C",
+    "badge": "#865CB2",
+    "badgeAccessible": "#755498",
+    "zone": {
+      "ideal": "#22C55E",
+      "under": "#3B82F6",
+      "over": "#EF4444",
+      "strong": "#F59E0B",
+      "weak": "#94A3B8"
+    },
+    "chart": {
+      "sca": "#E07A5F",
+      "ucdavis": "#865CB2",
+      "grid": "#E2E8F0"
+    }
+  },
+  "space": {
+    "xs": 4,
+    "sm": 8,
+    "md": 12,
+    "base": 16,
+    "lg": 20,
+    "xl": 24,
+    "xxl": 32,
+    "hitTargetMin": 44
+  },
+  "radius": {
+    "sm": 8,
+    "md": 12,
+    "lg": 16,
+    "xl": 24,
+    "full": 9999
+  },
+  "font": {
+    "sans": "Inter",
+    "serif": "Instrument Serif",
+    "mono": "JetBrains Mono"
+  },
+  "type": {
+    "screenTitle": {
+      "fontFamily": "Inter",
+      "fontSize": 32,
+      "fontWeight": "700",
+      "lineHeight": 35
+    },
+    "sheetTitle": {
+      "fontFamily": "Inter",
+      "fontSize": 24,
+      "fontWeight": "600",
+      "lineHeight": 29
+    },
+    "cardTitle": {
+      "fontFamily": "Inter",
+      "fontSize": 20,
+      "fontWeight": "600",
+      "lineHeight": 25
+    },
+    "body": {
+      "fontFamily": "Inter",
+      "fontSize": 16,
+      "fontWeight": "400",
+      "lineHeight": 24
+    },
+    "bodySm": {
+      "fontFamily": "Inter",
+      "fontSize": 14,
+      "fontWeight": "400",
+      "lineHeight": 20
+    },
+    "caption": {
+      "fontFamily": "Inter",
+      "fontSize": 12,
+      "fontWeight": "500",
+      "lineHeight": 17
+    },
+    "display": {
+      "fontFamily": "Instrument Serif",
+      "fontSize": 56,
+      "fontWeight": "400",
+      "lineHeight": 56,
+      "letterSpacing": -0.84
+    },
+    "mono": {
+      "fontFamily": "JetBrains Mono",
+      "fontSize": 12,
+      "fontWeight": "500",
+      "lineHeight": 17
+    }
+  },
+  "shadow": {
+    "sm": {
+      "boxShadow": "0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03)",
+      "ios": {
+        "shadowColor": "#0F172A",
+        "shadowOffset": {
+          "width": 0,
+          "height": 1
+        },
+        "shadowOpacity": 0.04,
+        "shadowRadius": 2
+      },
+      "android": {
+        "elevation": 1
+      }
+    },
+    "md": {
+      "boxShadow": "0 4px 12px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)",
+      "ios": {
+        "shadowColor": "#0F172A",
+        "shadowOffset": {
+          "width": 0,
+          "height": 4
+        },
+        "shadowOpacity": 0.06,
+        "shadowRadius": 12
+      },
+      "android": {
+        "elevation": 4
+      }
+    },
+    "lg": {
+      "boxShadow": "0 12px 32px rgba(15,23,42,0.08), 0 4px 8px rgba(15,23,42,0.04)",
+      "ios": {
+        "shadowColor": "#0F172A",
+        "shadowOffset": {
+          "width": 0,
+          "height": 12
+        },
+        "shadowOpacity": 0.08,
+        "shadowRadius": 32
+      },
+      "android": {
+        "elevation": 8
+      }
+    },
+    "primary": {
+      "boxShadow": "0 12px 28px rgba(224,122,95,0.28), 0 4px 10px rgba(224,122,95,0.18)",
+      "ios": {
+        "shadowColor": "#E07A5F",
+        "shadowOffset": {
+          "width": 0,
+          "height": 12
+        },
+        "shadowOpacity": 0.28,
+        "shadowRadius": 28
+      },
+      "android": {
+        "elevation": 8,
+        "shadowColor": "#E07A5F"
+      }
+    }
+  },
+  "motion": {
+    "spring": {
+      "response": 550,
+      "damping": 0.75,
+      "reanimated": {
+        "stiffness": 130.51,
+        "damping": 17.14,
+        "mass": 1
+      },
+      "durationBased": {
+        "duration": 550,
+        "dampingRatio": 0.75
+      }
+    },
+    "tap": {
+      "scale": 0.95,
+      "opacity": 0.8
+    },
+    "staggerDelay": 80,
+    "shimmerDuration": 1500,
+    "reduced": 120
+  },
+  "focusRing": {
+    "innerWidth": 2,
+    "outerWidth": 2,
+    "innerColor": "#FFFFFF",
+    "color": "#C05539"
+  },
+  "material": {
+    "chromeBg": "rgba(255, 255, 255, 0.95)",
+    "scrim": "rgba(15, 23, 42, 0.45)",
+    "blur": 20,
+    "saturate": 1.4
+  }
+};

package/dist/tailwind/theme.css

@@ -0,0 +1,164 @@
+/* ════════════════════════════════════════════════════════════════
+   CUPPED · TAILWIND v4 THEME
+   GENERATED FILE — do not edit. Canonical source: the DTCG token files
+   under tokens/ (npm run build in @cupped/tokens).
+
+   Import after Tailwind:
+     @import "tailwindcss";
+     @import "@cupped/tokens/tailwind";
+
+   Namespaced variables generate utilities (bg-canvas, text-ink-secondary,
+   rounded-lg, shadow-primary, font-serif, text-card-title, p-base…); the
+   trailing block re-exports the motion/material tokens as plain CSS
+   variables. Values here are fully resolved — alias var() chains live in
+   the "/css" export.
+   ════════════════════════════════════════════════════════════════ */
+
+@theme {
+  /* ── Colors → bg-*, text-*, border-*, fill-*… ── */
+  --color-canvas: #F8FAFC;
+  --color-card: #FFFFFF;
+  --color-canvas-border: #E2E8F0;
+  --color-canvas-border-subtle: #F1F5F9;
+  --color-ink: #0F172A;
+  --color-ink-secondary: #475569;
+  --color-ink-muted: #94A3B8;
+  --color-ink-inverse: #F8FAFC;
+  --color-primary: #E07A5F;
+  --color-primary-strong: #C05539;
+  --color-primary-strong-hover: #AD4A30;
+  --color-primary-hover: #D16A4F;
+  --color-primary-light: #FDF2F0;
+  --color-primary-muted: rgba(224, 122, 95, 0.12);
+  --color-success: #22C55E;
+  --color-success-light: #F0FDF4;
+  --color-success-ink: #15803D;
+  --color-error: #EF4444;
+  --color-error-light: #FEF2F2;
+  --color-error-ink: #B91C1C;
+  --color-warning: #F59E0B;
+  --color-warning-light: #FFFBEB;
+  --color-warning-ink: #B45309;
+  --color-info: #3B82F6;
+  --color-info-light: #EFF6FF;
+  --color-info-ink: #1D4ED8;
+  --color-fruity: #B44C54;
+  --color-floral: #865CB2;
+  --color-nutty: #876F49;
+  --color-chocolate: #916951;
+  --color-spice: #B4503A;
+  --color-sweet: #8E6E09;
+  --color-citrus: #A65F02;
+  --color-green: #4E8429;
+  --color-berry: #AC4D7B;
+  --color-roasted: #896B5E;
+  --color-fruity-accessible: #9B494E;
+  --color-berry-accessible: #94496D;
+  --color-citrus-accessible: #925512;
+  --color-sweet-accessible: #7E6207;
+  --color-floral-accessible: #755498;
+  --color-green-accessible: #49742E;
+  --color-spice-accessible: #9B4C3A;
+  --color-nutty-accessible: #79623E;
+  --color-chocolate-accessible: #825C46;
+  --color-roasted-accessible: #7B5F52;
+  --color-on-flavor: #FFFFFF;
+  --color-xp: #8E6E09;
+  --color-xp-accessible: #7E6207;
+  --color-ember: #F97316;
+  --color-ember-accessible: #C2410C;
+  --color-streak: #F97316;
+  --color-streak-accessible: #C2410C;
+  --color-badge: #865CB2;
+  --color-badge-accessible: #755498;
+  --color-zone-ideal: #22C55E;
+  --color-zone-under: #3B82F6;
+  --color-zone-over: #EF4444;
+  --color-zone-strong: #F59E0B;
+  --color-zone-weak: #94A3B8;
+  --color-chart-sca: #E07A5F;
+  --color-chart-ucdavis: #865CB2;
+  --color-chart-grid: #E2E8F0;
+
+  /* ── Font families → font-sans, font-serif, font-mono ── */
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-serif: 'Instrument Serif', Georgia, serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
+
+  /* ── Type scale → text-screen-title, text-body… (size + line-height + weight) ── */
+  --text-screen-title: 32px;
+  --text-screen-title--line-height: 1.1;
+  --text-screen-title--font-weight: 700;
+  --text-sheet-title: 24px;
+  --text-sheet-title--line-height: 1.2;
+  --text-sheet-title--font-weight: 600;
+  --text-card-title: 20px;
+  --text-card-title--line-height: 1.25;
+  --text-card-title--font-weight: 600;
+  --text-body: 16px;
+  --text-body--line-height: 1.5;
+  --text-body--font-weight: 400;
+  --text-body-sm: 14px;
+  --text-body-sm--line-height: 1.45;
+  --text-body-sm--font-weight: 400;
+  --text-caption: 12px;
+  --text-caption--line-height: 1.4;
+  --text-caption--font-weight: 500;
+  --text-display: 56px;
+  --text-display--line-height: 1;
+  --text-display--font-weight: 400;
+  --text-display--letter-spacing: -0.015em;
+  --text-mono: 12px;
+  --text-mono--line-height: 1.4;
+  --text-mono--font-weight: 500;
+
+  /* ── Spacing → p-base, gap-sm, m-xxl… (4pt grid) ── */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-base: 16px;
+  --spacing-lg: 20px;
+  --spacing-xl: 24px;
+  --spacing-xxl: 32px;
+
+  /* ── Radii → rounded-sm…rounded-full ── */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-full: 9999px;
+
+  /* ── Elevation → shadow-sm, shadow-md, shadow-lg, shadow-primary ── */
+  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03);
+  --shadow-md: 0 4px 12px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
+  --shadow-lg: 0 12px 32px rgba(15,23,42,0.08), 0 4px 8px rgba(15,23,42,0.04);
+  --shadow-primary: 0 12px 28px rgba(224,122,95,0.28), 0 4px 10px rgba(224,122,95,0.18);
+
+  /* ── Motion, interaction & materials (plain variables) ── */
+  --spring-response: 0.55s;
+  --spring-damping: 0.75;
+  --tap-scale: 0.95;
+  --tap-opacity: 0.8;
+  --stagger-delay: 0.08s;
+  --shimmer-duration: 1.5s;
+  --motion-reduced: 120ms;
+  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #C05539;
+  --hit-target-min: 44px;
+  --material-chrome-bg: rgba(255, 255, 255, 0.95);
+  --material-chrome-blur: saturate(1.4) blur(20px);
+  --scrim: rgba(15, 23, 42, 0.45);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --spring-response: var(--motion-reduced);
+    --stagger-delay: 0s;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --material-chrome-bg: var(--color-card);
+    --material-chrome-blur: none;
+  }
+}

package/docs/expo.md

@@ -0,0 +1,141 @@
+# Consuming @cupped/tokens from Expo / React Native
+
+Requires Expo SDK 53+ / RN 0.79+ (Metro resolves package.json `"exports"` by
+default). The top-level `main`/`types` fallback covers SDK 52. The
+`shadow.*.boxShadow` shape targets RN 0.76+ on the New Architecture; the
+`ios`/`android` shapes are the legacy props.
+
+## Install
+
+**Primary — GitHub Packages.** Map the `@cupped` scope to GitHub Packages in
+the app's `.npmrc`:
+
+```ini
+# .npmrc
+@cupped:registry=https://npm.pkg.github.com
+# TODO: this registry needs a read token. Add the auth line for your setup, e.g.
+# //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+```
+
+```bash
+npm install @cupped/tokens
+```
+
+Pin the version in `package.json` as usual (`"@cupped/tokens": "^0.1.0"`).
+
+**Fallback — git dependency (no registry auth).** Because `dist/` is committed,
+the package also installs straight from git with no `.npmrc` / token setup:
+
+```bash
+npm install github:ybird-labs/cupped-design-system#v0.1.0
+```
+
+## The theme.ts pattern
+
+Define one app-side theme module and make it **the only file allowed to
+import the package** — call sites go through `theme`, which leaves room for
+a future dark-mode tier without touching components:
+
+```ts
+// src/theme.ts
+import { tokens, type FlavorName } from "@cupped/tokens";
+
+export const theme = {
+  colors: tokens.color,
+  space: tokens.space,
+  radius: tokens.radius,
+  font: tokens.font,
+  type: tokens.type,
+  shadow: tokens.shadow,
+  motion: tokens.motion,
+  focusRing: tokens.focusRing,
+  material: tokens.material,
+} as const;
+
+export type Theme = typeof theme;
+export type { FlavorName };
+```
+
+Usage (see [examples/expo/Button.example.tsx](../examples/expo/Button.example.tsx)):
+
+```tsx
+style={{
+  minHeight: theme.space.hitTargetMin,        // 44
+  borderRadius: theme.radius.md,              // 12
+  backgroundColor: theme.colors.primary.strong,
+  ...theme.shadow.primary.android,            // or boxShadow / .ios per arch
+}}
+
+// Reanimated — exact conversion of the spec's response/damping spring:
+withSpring(1, theme.motion.spring.reanimated)        // {stiffness: 130.51, damping: 17.14, mass: 1}
+// or: withSpring(1, theme.motion.spring.durationBased)
+
+// Reduced motion stays app-side behavior:
+const reduced = useReducedMotion();
+const duration = reduced ? theme.motion.reduced : undefined; // 120ms crossfade
+```
+
+Dimensions are unitless dp numbers; `type.*` styles have absolute
+`lineHeight` and a single `fontFamily` string. `material.chromeBg` /
+`material.blur` / `material.saturate` pair with `expo-blur`; the opaque
+`colors.card` fallback is the default, and iOS should prefer native
+materials.
+
+## Fonts
+
+Use the `expo-font` config plugin with static per-weight files, named to
+match PostScript names so iOS and Android share one `fontFamily`:
+
+```jsonc
+// app.json
+{
+  "expo": {
+    "plugins": [
+      ["expo-font", { "fonts": [
+        "./assets/fonts/Inter-Regular.ttf",
+        "./assets/fonts/Inter-Medium.ttf",
+        "./assets/fonts/Inter-SemiBold.ttf",
+        "./assets/fonts/Inter-Bold.ttf",
+        "./assets/fonts/InstrumentSerif-Regular.ttf",
+        "./assets/fonts/InstrumentSerif-Italic.ttf",
+        "./assets/fonts/JetBrainsMono-Regular.ttf",
+        "./assets/fonts/JetBrainsMono-Medium.ttf"
+      ] }]
+    ]
+  }
+}
+```
+
+## Enforcing "no raw values"
+
+ESLint config (ports the adherence patterns shipped with the original
+design-system export):
+
+```jsonc
+{
+  "rules": {
+    "react-native/no-color-literals": "error",
+    "no-restricted-imports": ["error", {
+      "paths": [{
+        "name": "@cupped/tokens",
+        "message": "Import the app theme from src/theme.ts instead."
+      }],
+      "patterns": ["@cupped/tokens/**"]
+    }],
+    "no-restricted-syntax": [
+      "error",
+      {
+        "selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
+        "message": "Raw hex color — use a design-system token via theme."
+      },
+      {
+        "selector": "Literal[value=/\\b\\d+px\\b/]",
+        "message": "Raw px value — use a design-system spacing token via theme."
+      }
+    ]
+  },
+  "overrides": [
+    { "files": ["src/theme.ts"], "rules": { "no-restricted-imports": "off" } }
+  ]
+}
+```