@12min/ds 0.1.0 → 3.0.0

package/README.md

@@ -1,12 +1,3 @@
-```text
- ██╗  ██████╗     ███╗   ███╗  ██╗  ███╗   ██╗              ██████╗   ███████╗
-███║  ╚════██╗    ████╗ ████║  ██║  ████╗  ██║              ██╔══██╗  ██╔════╝
-╚██║   █████╔╝    ██╔████╔██║  ██║  ██╔██╗ ██║    █████╗    ██║  ██║  ███████╗
- ██║  ██╔═══╝     ██║╚██╔╝██║  ██║  ██║╚██╗██║    ╚════╝    ██║  ██║  ╚════██║
- ██║  ███████╗    ██║ ╚═╝ ██║  ██║  ██║ ╚████║              ██████╔╝  ███████║
- ╚═╝  ╚══════╝    ╚═╝     ╚═╝  ╚═╝  ╚═╝  ╚═══╝              ╚═════╝   ╚══════╝
-```
-
 # `@12min/ds`
 
 Single source of truth for 12min's visual language — tokens, styles, and components shared across web and mobile.
@@ -15,12 +6,15 @@ Single source of truth for 12min's visual language — tokens, styles, and compo
 
 ## What's included
 
-| | Now | Phase 2 |
-|---|---|---|
-| Color tokens | ✅ | |
-| CSS theme (`theme.css`) | ✅ | |
-| Semantic themes (light / dark) | ✅ | |
-| Core components (Button, Input, Card, Modal) | | ✅ |
+| | Status |
+|---|---|
+| Color palette (`marianBlue`, `midnight`, `gray`, `mustard`, `ketchup`, `mint`) | ✅ |
+| Typography tokens (14-entry scale) | ✅ |
+| CSS theme (`theme.css`) — colors + `@utility text-*` blocks | ✅ |
+| Semantic themes (light / dark) | ✅ |
+| Components — Button, Chip, Alert, ProgressBar, Input, Checkbox, RadioItem, RadioGroup, ActionItem, Stepper, RatingScale | ✅ |
+| `DSThemeProvider` + `useTheme` (native programmatic dark mode) | ✅ |
+| Storybook 8 | ✅ |
 
 ---
 
@@ -37,26 +31,14 @@ pnpm add @12min/ds
 pnpm add tailwindcss@^4.0.0
 
 # mobile
-bun add nativewind@5.0.0-preview.3
-bun add --dev tailwindcss@^4.0.0
+pnpm add nativewind@5.0.0-preview.3
+pnpm add --dev tailwindcss@^4.0.0
 ```
 
 ---
 
 ## Usage
 
-### Tokens
-
-Raw token values as TypeScript — use anywhere, including `StyleSheet.create`.
-
-```ts
-import { colors } from '@12min/ds/tokens'
-
-const styles = StyleSheet.create({
-  button: { backgroundColor: colors.brand.primary },
-})
-```
-
 ### Web — Tailwind v4
 
 Import the generated theme in your global CSS entry point:
@@ -67,15 +49,28 @@ Import the generated theme in your global CSS entry point:
 @import "@12min/ds/tailwind/theme.css";
 ```
 
-All tokens are now available as Tailwind utilities:
+All palette tokens are available as Tailwind utilities, and typography utilities are pre-built:
+
+```tsx
+<div className="bg-marian-blue-600 text-white">
+<p className="text-body-default">Body text</p>
+<h1 className="text-h1">Heading</h1>
+```
+
+Import components from `@12min/ds`:
 
 ```tsx
-<div className="bg-brand-primary text-neutral-0">
-<div className="bg-success text-neutral-0">
-<div className="bg-error-light">
+import { Button, Input, RadioItem, RadioGroup } from '@12min/ds'
+
+<Button variant="primary" size="md">Continue</Button>
+
+<RadioGroup label="Pick your profile">
+  <RadioItem label="Leader" selected={selected === 'leader'} onClick={() => setSelected('leader')} />
+  <RadioItem label="Student" selected={selected === 'student'} onClick={() => setSelected('student')} />
+</RadioGroup>
 ```
 
-### Mobile — NativeWind v5
+### Mobile — React Native + NativeWind v5
 
 Point Metro at the published theme file:
 
@@ -88,36 +83,73 @@ module.exports = withNativeWind(config, {
 })
 ```
 
-Same class names, compiled to `StyleSheet` at build time:
+Wrap your app in `DSThemeProvider` for programmatic dark mode:
 
 ```tsx
-<View className="bg-brand-primary dark:bg-neutral-900">
-  <Text className="text-neutral-0">Hello</Text>
-</View>
+import { DSThemeProvider, Button, Input } from '@12min/ds'
+
+export default function App() {
+  const colorScheme = useColorScheme()
+  return (
+    <DSThemeProvider colorScheme={colorScheme ?? 'light'}>
+      <Button variant="primary" onPress={handlePress}>Continue</Button>
+      <Input placeholder="Email" state="default" />
+    </DSThemeProvider>
+  )
+}
+```
+
+Access theme tokens directly via `useTheme()`:
+
+```tsx
+import { useTheme } from '@12min/ds'
+
+const { theme } = useTheme()
+// theme.primary, theme.background, theme.error, ...
 ```
 
-### Semantic themes (optional)
+### Tokens (framework-agnostic)
 
-For programmatic access to token values — useful for chart libraries, animations, or any non-Tailwind consumer:
+Raw token values as TypeScript — useful for chart libraries, animations, or any non-Tailwind consumer:
 
 ```ts
+import { colors, typography } from '@12min/ds/tokens'
 import { lightTheme, darkTheme } from '@12min/ds'
-import { useColorScheme } from 'react-native'
 
-const scheme = useColorScheme()
-const theme = scheme === 'dark' ? darkTheme : lightTheme
-
-// theme.primary === '#FF6B35'
-// theme.background, theme.surface, theme.error, ...
+// colors.marianBlue[600] === '#475CBB'
+// typography.bodyDefault.fontSize === 14
+// lightTheme.primary === '#475CBB'
 ```
 
 ---
 
+## Components
+
+All components are available on both web and native from the same `@12min/ds` import.
+
+| Component | Props |
+|---|---|
+| `Button` | `variant` (primary/secondary/ghost), `size` (sm/md/lg), `disabled` |
+| `Chip` | `children`, `checked`, `onPress`/`onClick` |
+| `Alert` | `variant` (info/success), `title`, `description` |
+| `ProgressBar` | `value` (0–100) |
+| `Input` | `state` (default/filled/error/disabled), `leadingIcon`, `placeholder` |
+| `Checkbox` | `checked`, `onChange`, `disabled` |
+| `RadioItem` | `label`, `description`, `selected`, `icon`, `onPress`/`onClick` |
+| `RadioGroup` | `label` (for a11y), `className`/`style` — wraps `RadioItem` list |
+| `ActionItem` | `label`, `description`, `selected`, `icon`, `onPress`/`onClick` |
+| `Stepper` | `steps`, `currentStep` |
+| `RatingScale` | `value`, `onChange`, `options` (default: 5 emoji options) |
+
+> Native components accept a `style` prop for layout overrides. Web components accept `className`.
+
+---
+
 ## Development
 
 ### Requirements
 
-- Node 20+
+- Node 22+
 - pnpm 10+
 
 ```sh
@@ -132,13 +164,15 @@ pnpm install
 | `pnpm dev` | Watch mode (tsup) |
 | `pnpm generate:theme` | Regenerate `src/tailwind/theme.css` from tokens |
 | `pnpm typecheck` | TypeScript — library code |
+| `pnpm test:unit` | Run unit tests (vitest) |
+| `pnpm storybook` | Start Storybook on port 6006 |
 | `pnpm lint` | ESLint |
 
 ### Adding or changing tokens
 
-1. Edit `src/tokens/colors.ts`
+1. Edit `src/tokens/colors.ts` or `src/tokens/typography.ts`
 2. Run `pnpm generate:theme` to regenerate `theme.css`
-3. Verify the output in `src/tailwind/theme.css`
+3. If adding a new semantic token, update `src/themes/types.ts` first, then both `lightTheme.ts` and `darkTheme.ts`
 4. Run `pnpm build` before committing
 
 `theme.css` is gitignored — it is always generated from source.
@@ -159,8 +193,7 @@ pnpm version major   # 0.1.0 → 1.0.0
 git push origin main --tags
 ```
 
-The GitHub Actions release workflow publishes to npm automatically on `v*` tags.  
-See [`docs/next-steps.md §5`](docs/next-steps.md) for the full workflow file.
+The GitHub Actions CI runs typecheck, build, and unit tests on every push to `main` and on pull requests.
 
 ---
 

package/dist/Checkbox.styles-DPyXzxFJ.d.mts

@@ -0,0 +1,90 @@
+interface Theme {
+    bg: {
+        primary: string;
+        primaryHover: string;
+        primaryPressed: string;
+        primarySubtle: string;
+        primarySubtleHover: string;
+        primarySubtlePressed: string;
+        surface: string;
+        surfaceRaised: string;
+        surfaceHover: string;
+        surfacePressed: string;
+        overlay: string;
+        overlaySubtle: string;
+        overlaySubtleHover: string;
+        overlaySubtlePressed: string;
+        success: string;
+        successSubtle: string;
+        error: string;
+        errorSubtle: string;
+        warning: string;
+        warningSubtle: string;
+        info: string;
+        infoSubtle: string;
+        highlight: string;
+        accent: string;
+        accentSubtle: string;
+        disabled: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        inverse: string;
+        brand: string;
+        link: string;
+        placeholder: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+        highlight: string;
+        accent: string;
+        disabled: string;
+        onSuccess: string;
+        onError: string;
+        onWarning: string;
+        onHighlight: string;
+    };
+    border: {
+        default: string;
+        strong: string;
+        subtle: string;
+        focus: string;
+        accent: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+        disabled: string;
+    };
+    icon: {
+        primary: string;
+        secondary: string;
+        inverse: string;
+        brand: string;
+        accent: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+        highlight: string;
+        disabled: string;
+    };
+    interactive: {
+        hover: string;
+        pressed: string;
+        selected: string;
+        selectedSubtle: string;
+    };
+}
+
+declare const lightTheme: Theme;
+
+declare const darkTheme: Theme;
+
+type ChipSize = 'sm' | 'md';
+
+type CheckboxSize = 'xs' | 'sm' | 'md';
+
+export { type ChipSize as C, type Theme as T, type CheckboxSize as a, darkTheme as d, lightTheme as l };

package/dist/Checkbox.styles-DPyXzxFJ.d.ts

@@ -0,0 +1,90 @@
+interface Theme {
+    bg: {
+        primary: string;
+        primaryHover: string;
+        primaryPressed: string;
+        primarySubtle: string;
+        primarySubtleHover: string;
+        primarySubtlePressed: string;
+        surface: string;
+        surfaceRaised: string;
+        surfaceHover: string;
+        surfacePressed: string;
+        overlay: string;
+        overlaySubtle: string;
+        overlaySubtleHover: string;
+        overlaySubtlePressed: string;
+        success: string;
+        successSubtle: string;
+        error: string;
+        errorSubtle: string;
+        warning: string;
+        warningSubtle: string;
+        info: string;
+        infoSubtle: string;
+        highlight: string;
+        accent: string;
+        accentSubtle: string;
+        disabled: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        inverse: string;
+        brand: string;
+        link: string;
+        placeholder: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+        highlight: string;
+        accent: string;
+        disabled: string;
+        onSuccess: string;
+        onError: string;
+        onWarning: string;
+        onHighlight: string;
+    };
+    border: {
+        default: string;
+        strong: string;
+        subtle: string;
+        focus: string;
+        accent: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+        disabled: string;
+    };
+    icon: {
+        primary: string;
+        secondary: string;
+        inverse: string;
+        brand: string;
+        accent: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+        highlight: string;
+        disabled: string;
+    };
+    interactive: {
+        hover: string;
+        pressed: string;
+        selected: string;
+        selectedSubtle: string;
+    };
+}
+
+declare const lightTheme: Theme;
+
+declare const darkTheme: Theme;
+
+type ChipSize = 'sm' | 'md';
+
+type CheckboxSize = 'xs' | 'sm' | 'md';
+
+export { type ChipSize as C, type Theme as T, type CheckboxSize as a, darkTheme as d, lightTheme as l };

package/dist/chunk-ZK7NW4WW.mjs

@@ -0,0 +1,247 @@
+// src/tokens/colors.ts
+var colors = {
+  marianBlue: {
+    50: "#FAFBFF",
+    100: "#F6F8FF",
+    200: "#E1E7FF",
+    300: "#C3CCF7",
+    400: "#94A5F2",
+    500: "#697DD6",
+    600: "#4357AD",
+    700: "#31428B",
+    800: "#25326A",
+    900: "#131937"
+  },
+  midnight: {
+    50: "#707070",
+    100: "#5C5C5C",
+    200: "#525252",
+    300: "#474747",
+    400: "#3D3D3D",
+    500: "#333333",
+    600: "#292929",
+    700: "#161616",
+    800: "#141414",
+    900: "#0A0A0A"
+  },
+  gray: {
+    15: "#F4F5F8",
+    25: "#EDEEF1",
+    35: "#DDE0E6",
+    50: "#B1B5BE",
+    100: "#A6ABB5",
+    200: "#9BA0AB",
+    300: "#9095A2",
+    400: "#858B99",
+    500: "#7A8190",
+    600: "#6F7685",
+    700: "#5E6471",
+    800: "#5D636F",
+    900: "#545964"
+  },
+  amber: {
+    50: "#FFFBEB",
+    100: "#FEF3C7",
+    200: "#FDE68A",
+    300: "#FCD34D",
+    400: "#FBBF24",
+    500: "#F59E0B",
+    600: "#D97706",
+    700: "#B45309",
+    800: "#92400E",
+    900: "#78350F",
+    text: "#BA5C0A"
+  },
+  yellow: {
+    50: "#FFF2D6",
+    100: "#FFECC2",
+    200: "#FFE5AD",
+    300: "#FFDF99",
+    400: "#FFD885",
+    500: "#FFD270",
+    600: "#FFCB5C",
+    700: "#FFC140",
+    800: "#FFBE33",
+    900: "#FFB81F"
+  },
+  ketchup: {
+    50: "#FEF2F2",
+    100: "#FEE2E2",
+    200: "#FECACA",
+    300: "#FCA5A5",
+    400: "#F87171",
+    500: "#EF4444",
+    600: "#DC2626",
+    700: "#B91C1C",
+    800: "#991B1B",
+    900: "#7F1D1D",
+    text: "#D91F3C"
+  },
+  green: {
+    50: "#F2FDF4",
+    100: "#E5FBE9",
+    200: "#C7F4D0",
+    300: "#99E5AC",
+    400: "#5FCD80",
+    500: "#36B260",
+    600: "#258F4B",
+    700: "#1B6F3B",
+    800: "#145430",
+    900: "#0E3622",
+    text: "#0E8745"
+  },
+  blue: {
+    50: "#EFF6FF",
+    100: "#DBEAFE",
+    200: "#BFDBFE",
+    300: "#93C5FD",
+    400: "#60A5FA",
+    500: "#3B82F6",
+    600: "#2563EB",
+    700: "#1D4ED8",
+    800: "#1E40AF",
+    900: "#1E3A8A",
+    text: "#1E40AF"
+  },
+  // Single brand accent green — the vibrant tone that was previously green/300
+  // before the green scale was retuned to muted values in the Figma v2 palette.
+  brandGreen: "#6DFFB4",
+  overlayBlack: {
+    5: "#0000000D",
+    8: "#00000014",
+    12: "#0000001F",
+    16: "#00000029"
+  },
+  overlayWhite: {
+    5: "#FFFFFF0D",
+    8: "#FFFFFF14",
+    12: "#FFFFFF1F",
+    16: "#FFFFFF29"
+  },
+  white: "#FFFFFF",
+  black: "#000000"
+};
+
+// src/tokens/typography.ts
+var typography = {
+  display1: { fontFamily: "Poppins", fontSize: 32, fontWeight: "700", lineHeight: 40, letterSpacing: -1, textTransform: "none" },
+  display2: { fontFamily: "Poppins", fontSize: 32, fontWeight: "700", lineHeight: 40, letterSpacing: -1, textTransform: "none" },
+  h1: { fontFamily: "Poppins", fontSize: 24, fontWeight: "700", lineHeight: 32, letterSpacing: -1, textTransform: "none" },
+  h2: { fontFamily: "Poppins", fontSize: 20, fontWeight: "700", lineHeight: 28, letterSpacing: 0, textTransform: "none" },
+  h3: { fontFamily: "Poppins", fontSize: 16, fontWeight: "600", lineHeight: 24, letterSpacing: 0, textTransform: "none" },
+  bodyLarge: { fontFamily: "Inter", fontSize: 16, fontWeight: "500", lineHeight: 24, letterSpacing: 0, textTransform: "none" },
+  bodyDefault: { fontFamily: "Inter", fontSize: 14, fontWeight: "500", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  bodySmall: { fontFamily: "Inter", fontSize: 12, fontWeight: "400", lineHeight: 16, letterSpacing: 0.2, textTransform: "none" },
+  labelLarge: { fontFamily: "Inter", fontSize: 16, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  labelDefault: { fontFamily: "Inter", fontSize: 14, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  labelSmall: { fontFamily: "Inter", fontSize: 12, fontWeight: "600", lineHeight: 16, letterSpacing: 0.2, textTransform: "none" },
+  labelTiny: { fontFamily: "Inter", fontSize: 10, fontWeight: "600", lineHeight: 14, letterSpacing: 0, textTransform: "none" },
+  caption: { fontFamily: "Inter", fontSize: 12, fontWeight: "500", lineHeight: 16, letterSpacing: 0.5, textTransform: "none" },
+  captionUppercase: { fontFamily: "Inter", fontSize: 12, fontWeight: "500", lineHeight: 16, letterSpacing: 0.5, textTransform: "uppercase" },
+  overline: { fontFamily: "Inter", fontSize: 10, fontWeight: "600", lineHeight: 16, letterSpacing: 8, textTransform: "uppercase" },
+  buttonLarge: { fontFamily: "Inter", fontSize: 16, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  buttonDefault: { fontFamily: "Inter", fontSize: 14, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  buttonSmall: { fontFamily: "Inter", fontSize: 12, fontWeight: "600", lineHeight: 16, letterSpacing: 0, textTransform: "none" }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  unit: 4,
+  gap: {
+    "0.5": 2,
+    "1": 4,
+    "2": 8,
+    "3": 12,
+    "4": 16,
+    "5": 20,
+    "6": 24,
+    "8": 32,
+    "10": 40,
+    "12": 48,
+    "14": 56,
+    "16": 64,
+    "18": 72,
+    "20": 80,
+    "22": 88,
+    "24": 96
+  },
+  screen: {
+    x: 16,
+    y: 24
+  }
+};
+
+// src/tokens/grid.ts
+var grid = {
+  // 8px square baseline — line-height/* steps 16/24/32/40 snap; 20 and 28 land on a half-cell
+  baseline: 8,
+  breakpoints: {
+    mobile: 0,
+    tablet: 768,
+    desktop: 1024
+  },
+  columns: {
+    mobile: 4,
+    tablet: 8,
+    desktop: 12
+  },
+  gutter: {
+    mobile: 8,
+    tablet: 16,
+    desktop: 24
+  },
+  margin: {
+    mobile: 20,
+    tablet: 24,
+    desktop: 32
+  }
+};
+
+// src/tokens/radius.ts
+var radius = {
+  none: 0,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  "2xl": 24,
+  full: 9999,
+  button: 16,
+  card: 20,
+  input: 12,
+  chip: 9999,
+  badge: 8
+};
+
+// src/tokens/borderWidth.ts
+var borderWidth = {
+  default: 1,
+  strong: 1.5,
+  heavy: 2
+};
+
+// src/tokens/shadow.ts
+var shadow = {
+  sm: { offsetX: 0, offsetY: 1, blur: 3, spread: 0, color: "#000000", opacity: { light: 0.08, dark: 0.4 } },
+  md: { offsetX: 0, offsetY: 4, blur: 12, spread: 0, color: "#000000", opacity: { light: 0.1, dark: 0.5 } },
+  lg: { offsetX: 0, offsetY: 8, blur: 24, spread: -4, color: "#000000", opacity: { light: 0.12, dark: 0.6 } }
+};
+
+// src/tokens/opacity.ts
+var opacity = {
+  disabled: 0.4,
+  hover: 0.08,
+  pressed: 0.12
+};
+
+export {
+  colors,
+  typography,
+  spacing,
+  grid,
+  radius,
+  borderWidth,
+  shadow,
+  opacity
+};
+//# sourceMappingURL=chunk-ZK7NW4WW.mjs.map

package/dist/chunk-ZK7NW4WW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/colors.ts","../src/tokens/typography.ts","../src/tokens/spacing.ts","../src/tokens/grid.ts","../src/tokens/radius.ts","../src/tokens/borderWidth.ts","../src/tokens/shadow.ts","../src/tokens/opacity.ts"],"sourcesContent":["export const colors = {\n  marianBlue: {\n    50:  '#FAFBFF',\n    100: '#F6F8FF',\n    200: '#E1E7FF',\n    300: '#C3CCF7',\n    400: '#94A5F2',\n    500: '#697DD6',\n    600: '#4357AD',\n    700: '#31428B',\n    800: '#25326A',\n    900: '#131937',\n  },\n\n  midnight: {\n    50:  '#707070',\n    100: '#5C5C5C',\n    200: '#525252',\n    300: '#474747',\n    400: '#3D3D3D',\n    500: '#333333',\n    600: '#292929',\n    700: '#161616',\n    800: '#141414',\n    900: '#0A0A0A',\n  },\n\n  gray: {\n    15:  '#F4F5F8',\n    25:  '#EDEEF1',\n    35:  '#DDE0E6',\n    50:  '#B1B5BE',\n    100: '#A6ABB5',\n    200: '#9BA0AB',\n    300: '#9095A2',\n    400: '#858B99',\n    500: '#7A8190',\n    600: '#6F7685',\n    700: '#5E6471',\n    800: '#5D636F',\n    900: '#545964',\n  },\n\n  amber: {\n    50:   '#FFFBEB',\n    100:  '#FEF3C7',\n    200:  '#FDE68A',\n    300:  '#FCD34D',\n    400:  '#FBBF24',\n    500:  '#F59E0B',\n    600:  '#D97706',\n    700:  '#B45309',\n    800:  '#92400E',\n    900:  '#78350F',\n    text: '#BA5C0A',\n  },\n\n  yellow: {\n    50:  '#FFF2D6',\n    100: '#FFECC2',\n    200: '#FFE5AD',\n    300: '#FFDF99',\n    400: '#FFD885',\n    500: '#FFD270',\n    600: '#FFCB5C',\n    700: '#FFC140',\n    800: '#FFBE33',\n    900: '#FFB81F',\n  },\n\n  ketchup: {\n    50:   '#FEF2F2',\n    100:  '#FEE2E2',\n    200:  '#FECACA',\n    300:  '#FCA5A5',\n    400:  '#F87171',\n    500:  '#EF4444',\n    600:  '#DC2626',\n    700:  '#B91C1C',\n    800:  '#991B1B',\n    900:  '#7F1D1D',\n    text: '#D91F3C',\n  },\n\n  green: {\n    50:   '#F2FDF4',\n    100:  '#E5FBE9',\n    200:  '#C7F4D0',\n    300:  '#99E5AC',\n    400:  '#5FCD80',\n    500:  '#36B260',\n    600:  '#258F4B',\n    700:  '#1B6F3B',\n    800:  '#145430',\n    900:  '#0E3622',\n    text: '#0E8745',\n  },\n\n  blue: {\n    50:   '#EFF6FF',\n    100:  '#DBEAFE',\n    200:  '#BFDBFE',\n    300:  '#93C5FD',\n    400:  '#60A5FA',\n    500:  '#3B82F6',\n    600:  '#2563EB',\n    700:  '#1D4ED8',\n    800:  '#1E40AF',\n    900:  '#1E3A8A',\n    text: '#1E40AF',\n  },\n\n  // Single brand accent green — the vibrant tone that was previously green/300\n  // before the green scale was retuned to muted values in the Figma v2 palette.\n  brandGreen: '#6DFFB4',\n\n  overlayBlack: {\n    5:  '#0000000D',\n    8:  '#00000014',\n    12: '#0000001F',\n    16: '#00000029',\n  },\n\n  overlayWhite: {\n    5:  '#FFFFFF0D',\n    8:  '#FFFFFF14',\n    12: '#FFFFFF1F',\n    16: '#FFFFFF29',\n  },\n\n  white: '#FFFFFF',\n  black: '#000000',\n} as const\n\nexport type Colors = typeof colors\n","export const typography = {\n  display1:      { fontFamily: 'Poppins', fontSize: 32, fontWeight: '700', lineHeight: 40, letterSpacing: -1,  textTransform: 'none' },\n  display2:      { fontFamily: 'Poppins', fontSize: 32, fontWeight: '700', lineHeight: 40, letterSpacing: -1,  textTransform: 'none' },\n  h1:            { fontFamily: 'Poppins', fontSize: 24, fontWeight: '700', lineHeight: 32, letterSpacing: -1,  textTransform: 'none' },\n  h2:            { fontFamily: 'Poppins', fontSize: 20, fontWeight: '700', lineHeight: 28, letterSpacing: 0,   textTransform: 'none' },\n  h3:            { fontFamily: 'Poppins', fontSize: 16, fontWeight: '600', lineHeight: 24, letterSpacing: 0,   textTransform: 'none' },\n  bodyLarge:     { fontFamily: 'Inter',   fontSize: 16, fontWeight: '500', lineHeight: 24, letterSpacing: 0,   textTransform: 'none' },\n  bodyDefault:   { fontFamily: 'Inter',   fontSize: 14, fontWeight: '500', lineHeight: 20, letterSpacing: 0,   textTransform: 'none' },\n  bodySmall:     { fontFamily: 'Inter',   fontSize: 12, fontWeight: '400', lineHeight: 16, letterSpacing: 0.2, textTransform: 'none' },\n  labelLarge:    { fontFamily: 'Inter',   fontSize: 16, fontWeight: '600', lineHeight: 20, letterSpacing: 0,   textTransform: 'none' },\n  labelDefault:  { fontFamily: 'Inter',   fontSize: 14, fontWeight: '600', lineHeight: 20, letterSpacing: 0,   textTransform: 'none' },\n  labelSmall:    { fontFamily: 'Inter',   fontSize: 12, fontWeight: '600', lineHeight: 16, letterSpacing: 0.2, textTransform: 'none' },\n  labelTiny:     { fontFamily: 'Inter',   fontSize: 10, fontWeight: '600', lineHeight: 14, letterSpacing: 0,   textTransform: 'none' },\n  caption:       { fontFamily: 'Inter',   fontSize: 12, fontWeight: '500', lineHeight: 16, letterSpacing: 0.5, textTransform: 'none' },\n  captionUppercase: { fontFamily: 'Inter', fontSize: 12, fontWeight: '500', lineHeight: 16, letterSpacing: 0.5, textTransform: 'uppercase' },\n  overline:      { fontFamily: 'Inter',   fontSize: 10, fontWeight: '600', lineHeight: 16, letterSpacing: 8,   textTransform: 'uppercase' },\n  buttonLarge:   { fontFamily: 'Inter',   fontSize: 16, fontWeight: '600', lineHeight: 20, letterSpacing: 0,   textTransform: 'none' },\n  buttonDefault: { fontFamily: 'Inter',   fontSize: 14, fontWeight: '600', lineHeight: 20, letterSpacing: 0,   textTransform: 'none' },\n  buttonSmall:   { fontFamily: 'Inter',   fontSize: 12, fontWeight: '600', lineHeight: 16, letterSpacing: 0,   textTransform: 'none' },\n} as const\n\nexport type Typography = typeof typography\n","export const spacing = {\n  unit: 4,\n  gap: {\n    '0.5': 2,\n    '1':   4,\n    '2':   8,\n    '3':   12,\n    '4':   16,\n    '5':   20,\n    '6':   24,\n    '8':   32,\n    '10':  40,\n    '12':  48,\n    '14':  56,\n    '16':  64,\n    '18':  72,\n    '20':  80,\n    '22':  88,\n    '24':  96,\n  },\n  screen: {\n    x: 16,\n    y: 24,\n  },\n} as const\n\nexport type Spacing = typeof spacing\n","export const grid = {\n  // 8px square baseline — line-height/* steps 16/24/32/40 snap; 20 and 28 land on a half-cell\n  baseline: 8,\n  breakpoints: {\n    mobile:  0,\n    tablet:  768,\n    desktop: 1024,\n  },\n  columns: {\n    mobile:  4,\n    tablet:  8,\n    desktop: 12,\n  },\n  gutter: {\n    mobile:  8,\n    tablet:  16,\n    desktop: 24,\n  },\n  margin: {\n    mobile:  20,\n    tablet:  24,\n    desktop: 32,\n  },\n} as const\n\nexport type Grid = typeof grid\n","export const radius = {\n  none:   0,\n  sm:     8,\n  md:     12,\n  lg:     16,\n  xl:     20,\n  '2xl':  24,\n  full:   9999,\n\n  button: 16,\n  card:   20,\n  input:  12,\n  chip:   9999,\n  badge:  8,\n} as const\n\nexport type Radius = typeof radius\n","export const borderWidth = {\n  default: 1,\n  strong:  1.5,\n  heavy:   2,\n} as const\n\nexport type BorderWidth = typeof borderWidth\n","export const shadow = {\n  sm: { offsetX: 0, offsetY: 1, blur: 3,  spread: 0,  color: '#000000', opacity: { light: 0.08, dark: 0.40 } },\n  md: { offsetX: 0, offsetY: 4, blur: 12, spread: 0,  color: '#000000', opacity: { light: 0.10, dark: 0.50 } },\n  lg: { offsetX: 0, offsetY: 8, blur: 24, spread: -4, color: '#000000', opacity: { light: 0.12, dark: 0.60 } },\n} as const\n\nexport type Shadow = typeof shadow\n","export const opacity = {\n  disabled: 0.4,\n  hover:    0.08,\n  pressed:  0.12,\n} as const\n\nexport type Opacity = typeof opacity\n"],"mappings":"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","names":[]}