{"_id":"@b-333/tokens","name":"@b-333/tokens","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@b-333/tokens","version":"0.1.0","description":"Cross-platform design tokens for web + React Native. One W3C DTCG source → CSS variables, a Tailwind preset, and a typed native theme. Coral accent, Fraunces + Inter, warm paper surfaces.","license":"MIT","type":"module","sideEffects":["*.css"],"exports":{"./css":"./dist/web/variables.css","./tailwind":"./dist/web/tailwind-preset.cjs","./native":{"types":"./dist/native/theme.ts","default":"./dist/native/theme.ts"},"./package.json":"./package.json"},"scripts":{"clean":"node scripts/clean.mjs","prebuild":"npm run clean","build":"node style-dictionary.config.mjs","preview":"node scripts/preview-server.mjs","typecheck":"npm run build && tsc --noEmit","changeset":"changeset","version":"changeset version","release":"changeset publish"},"devDependencies":{"@changesets/cli":"^2.31.0","style-dictionary":"^5.5.0","typescript":"^6.0.3"},"engines":{"node":">=18.18"},"publishConfig":{"registry":"https://registry.npmjs.org","access":"public"},"repository":{"type":"git","url":"git+https://github.com/B-333/design-system.git"},"_id":"@b-333/tokens@0.1.0","gitHead":"edd3401e456c01ec4683049c2e11d2fc8a1d34a0","bugs":{"url":"https://github.com/B-333/design-system/issues"},"homepage":"https://github.com/B-333/design-system#readme","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-G03Yg2L+EVTIi7a5aNvblNCiSmaG30ywokDF0KJdM382lYwrtTAFmoUGZTW7AieLEpru1yfEIdM2on2tGUiR7g==","shasum":"6e712505a478adaa7221f14c7407b0a40f4786fa","tarball":"https://registry.npmjs.org/@b-333/tokens/-/tokens-0.1.0.tgz","fileCount":6,"unpackedSize":20476,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIH+HGhsVAIeRQWPI4GzfJuYXu9FuYOrrvTWs4j/Zjjr3AiBngCpppS6jrc4xB0Yo1zLyKtGXQd5p64zkI80PpCnvCA=="}]},"_npmUser":{"name":"b-333","email":"bendemontgrand@gmail.com"},"directories":{},"maintainers":[{"name":"b-333","email":"bendemontgrand@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tokens_0.1.0_1783090411227_0.1634478057588966"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-03T14:53:31.070Z","0.1.0":"2026-07-03T14:53:31.362Z","modified":"2026-07-03T14:53:31.515Z"},"maintainers":[{"name":"b-333","email":"bendemontgrand@gmail.com"}],"description":"Cross-platform design tokens for web + React Native. One W3C DTCG source → CSS variables, a Tailwind preset, and a typed native theme. Coral accent, Fraunces + Inter, warm paper surfaces.","homepage":"https://github.com/B-333/design-system#readme","repository":{"type":"git","url":"git+https://github.com/B-333/design-system.git"},"bugs":{"url":"https://github.com/B-333/design-system/issues"},"license":"MIT","readme":"# @b-333/tokens\n\nCross-platform **design tokens** in one place.\nOne source of truth (W3C DTCG JSON) → **CSS variables**, a **Tailwind preset**, and a typed\n**React Native theme**. Only tokens are shared across platforms; components stay per-app.\n\n**The signature** (kept identical everywhere): coral accent `#F0552B` · **Fraunces + Inter** ·\nwarm \"paper\" surfaces + warm-tinted shadows · quick ~150 ms motion with a decelerated entrance curve.\n\n---\n\n## Install\n\nThis package is published to the **public npm registry** — no auth or `.npmrc` required:\n\n```sh\nnpm install @b-333/tokens\n```\n\nThe package ships three entry points:\n\n| Import | What you get |\n|---|---|\n| `@b-333/tokens/css` | `variables.css` — `:root` + `[data-theme=\"dark\"]` custom properties |\n| `@b-333/tokens/tailwind` | a Tailwind **preset** mapping semantic tokens → the CSS variables |\n| `@b-333/tokens/native` | a typed `theme.ts` object with **numeric** values (no CSS units) |\n\n---\n\n## Next.js (web)\n\n**1. Load the variables once**, in your root layout:\n\n```ts\n// app/layout.tsx\nimport '@b-333/tokens/css';\n```\n\n**2. Extend Tailwind** with the preset:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  presets: [require('@b-333/tokens/tailwind')],\n  // dark mode is driven by the [data-theme=\"dark\"] attribute the variables use:\n  darkMode: ['selector', '[data-theme=\"dark\"]'],\n  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],\n};\n```\n\n**3. Use the semantic utilities** — they resolve to CSS variables, so switching\n`<html data-theme=\"dark\">` re-themes everything with no rebuild:\n\n```tsx\n<button className=\"bg-accent text-on-accent rounded-md shadow-card font-sans\">\n  Enregistrer\n</button>\n<div className=\"bg-surface text-text-primary border border-border\" />\n```\n\n> Note: semantic color roles keep their token names, so a couple of utilities read doubled\n> (`text-text-primary`, `border-border`). That is intentional — names match the tokens 1:1.\n> Raw primitives stay available as CSS vars (e.g. `bg-[var(--color-coral-300)]`).\n\n---\n\n## React Native\n\nFonts are **not** bundled — load `Fraunces`, `Inter`, and `JetBrains Mono` in the app\n(e.g. `expo-font`) so the family names in the theme resolve.\n\n```ts\nimport { tokens } from '@b-333/tokens/native';\nimport { StyleSheet, useColorScheme, Easing } from 'react-native';\n\nconst scheme = useColorScheme(); // 'light' | 'dark'\nconst c = scheme === 'dark' ? tokens.colorDark : tokens.color;\n\nconst styles = StyleSheet.create({\n  card: {\n    backgroundColor: c.surface,          // '#FFFFFF' / '#241F18'\n    borderColor: c.border,\n    borderWidth: tokens.border.width.hairline, // 1\n    borderRadius: tokens.radius.lg,      // 14\n    padding: tokens.space[16],           // 16\n  },\n  title: {\n    fontFamily: tokens.font.family.serif,   // 'Fraunces'\n    fontSize: tokens.font.size.title,       // 18\n    fontWeight: tokens.font.weight.semibold,// '600'\n    color: c.textPrimary,\n  },\n});\n\n// motion\nconst easeIn = Easing.bezier(...tokens.easing.decelerate); // 0.16, 1, 0.3, 1\nconst duration = tokens.duration.base;                     // 150 (ms)\n```\n\n`tokens` is `as const`, so `Tokens = typeof tokens` gives full autocompletion. Primitive ramps\nlive under `tokens.color.coral[500]`, subject colors under `tokens.color.subject.fr`, etc.\n\n---\n\n## Local preview\n\nA self-contained reference page renders every token — semantic + primitive colors, the\ntype scale, spacing, radii, shadows, borders, motion, and example components — with a live\nlight/dark toggle. It styles **itself** with the tokens, so it doubles as a visual smoke test.\n\n```sh\nnpm run build      # generate dist/ (the preview reads dist/web/variables.css)\nnpm run preview    # serve at http://localhost:4321/   (PORT=5000 npm run preview to change)\n```\n\nThe page lives in `preview/` and the server in `scripts/preview-server.mjs`; neither is part\nof the published package (only `dist/` ships).\n\n---\n\n## Contributing\n\n1. Edit the source tokens in **`tokens/`** (never edit `dist/` — it is generated).\n   - `tokens/primitives/*` = raw values. `tokens/semantic/*` = roles that alias primitives with `{...}`.\n2. `npm run build` — regenerates all three outputs into `dist/`.\n3. `npm run changeset` — record the change and pick a semver bump (patch / minor / **major** for a\n   breaking token rename or removal).\n4. Open a PR. On merge to `main`, CI opens a **Version Packages** PR; merging that publishes the\n   new version, and Renovate propagates it to the consumer apps.\n\nRequires Node ≥ 18.18 (see `.nvmrc`). Built with [Style Dictionary](https://styledictionary.com) v5.\n","readmeFilename":"README.md","_rev":"1-e3908fb7608c31809e01e062beecae9f"}