@krizaka/tokens 0.0.0-stage → 1.2.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -1,3 +1,134 @@
-# Temporary Holding Version
+# @krizaka/tokens
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**The Krizaka semantic design tokens.** One vocabulary, `--kz-*`, written once in [DTCG](https://www.designtokens.org/)
+JSON and compiled to CSS (dark, light, media invariants), typed constants and React Native themes. It is the vocabulary
+krizaka.com already runs on (1 974 usages, zero raw palette colour), now shared by every product.
+
+[![npm](https://img.shields.io/npm/v/@krizaka/tokens?color=3b82f6&label=npm)](https://www.npmjs.com/package/@krizaka/tokens)
+[![License](https://img.shields.io/badge/license-Apache--2.0-blue)](../../LICENSE)
+
+## The rule
+
+> **A component never reads a palette colour, only a role.**
+> `bg-zinc-950/70 light:bg-white` → `var(--kz-surface-1)`; `text-zinc-400 light:text-slate-500` →
+> `var(--kz-text-secondary)`; `bg-black/60 text-white` on an image → `var(--kz-scrim)` + `var(--kz-text-on-media)`.
+
+A theme is a set of **values**, never a set of classes. A component is written once against the roles below; dark,
+light and a product theme (an override of `--kz-accent`, `--kz-font-display`…) only change the values. No `light:`
+variant, no `dark:` variant, no `zinc-*` / `slate-*` / `#hex` in a component.
+
+## Install
+
+```bash
+npm install @krizaka/tokens
+```
+
+| Entry | For | Gives |
+| :-- | :-- | :-- |
+| `@krizaka/tokens/tokens.css` | Web (imported once, usually through `@krizaka/tailwind`) | The `--kz-*` custom properties. |
+| `@krizaka/tokens` | TS / JS on the web (canvas, charts, e-mails, inline styles) | `tokens` (`var(--kz-…)` references, camelCase keys), `values.dark` / `values.light` (raw CSS, aliases resolved), `TokenName`. |
+| `@krizaka/tokens/native` | React Native / Expo | `themes.dark` / `themes.light` (hex, `rgba()` when translucent), `radius` (dp), `typography`, `motion.ease`, type `Theme`. |
+
+```css
+@import "@krizaka/tokens/tokens.css";
+
+.card { background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); border-radius: var(--kz-radius-lg); }
+```
+
+```ts
+import { tokens, values } from "@krizaka/tokens";
+element.style.color = tokens.textSecondary;  // "var(--kz-text-secondary)" — follows the theme
+chart.gridColor = values.dark.borderSubtle;   // "hsl(0 0% 100% / 0.06)"
+
+import { themes, radius, type Theme } from "@krizaka/tokens/native";
+const t: Theme = scheme === "light" ? themes.light : themes.dark;
+<View style={{ backgroundColor: t.surface1, borderRadius: radius.lg }} />;
+```
+
+### Themes
+
+| Selector | Gets |
+| :-- | :-- |
+| `:root`, `.theme-dark` | Dark — the default. `.theme-dark` re-declares the dark values, so a player, an editor or a media stays dark inside a light page without one `light:` class in its subtree. |
+| `html.light` | Light. Toggle the `light` class on `<html>`. |
+| `:root` (invariants) | Identical in both themes: what sits **on** a media (scrims, text on media, dialog overlay), statuses, `on-accent`, radii, easing, font stacks. |
+
+`color-scheme` follows the theme, so scrollbars and native controls match.
+
+## Roles
+
+Values are the CSS written in `dist/tokens.css`; `→` marks an alias, which follows its target in every theme and
+under every product override.
+
+### Colour
+
+| Token | Key | Usage | Dark | Light |
+| :-- | :-- | :-- | :-- | :-- |
+| `--kz-surface-0` | `surface0` | Page background | `hsl(240 6% 5%)` | `hsl(0 0% 98%)` |
+| `--kz-surface-1` | `surface1` | Card, panel | `hsl(240 5% 9%)` | `hsl(0 0% 100%)` |
+| `--kz-surface-2` | `surface2` | Raised element, field, hover | `hsl(240 5% 13%)` | `hsl(240 6% 95%)` |
+| `--kz-surface-3` | `surface3` | Active element, chip, track | `hsl(240 4% 17%)` | `hsl(240 5% 90%)` |
+| `--kz-media` | `media` | A media's background before it loads | `hsl(240 5% 11%)` | `hsl(240 6% 92%)` |
+| `--kz-border-subtle` | `borderSubtle` | Quiet separator | `hsl(0 0% 100% / 0.06)` | `hsl(240 6% 0% / 0.06)` |
+| `--kz-border-default` | `borderDefault` | Card and field outline | `hsl(0 0% 100% / 0.10)` | `hsl(240 6% 0% / 0.10)` |
+| `--kz-border-strong` | `borderStrong` | Hover outline, non-keyboard focus | `hsl(0 0% 100% / 0.16)` | `hsl(240 6% 0% / 0.16)` |
+| `--kz-text-primary` | `textPrimary` | Headings, body text (≥ 4.5:1 on every surface) | `hsl(0 0% 96%)` | `hsl(240 6% 10%)` |
+| `--kz-text-secondary` | `textSecondary` | Supporting text, labels (≥ 4.5:1 on every surface) | `hsl(240 4% 64%)` | `hsl(240 4% 41%)` |
+| `--kz-text-muted` | `textMuted` | Metadata, placeholders, disabled (≥ 3:1 on every surface) | `hsl(240 4% 47%)` | `hsl(240 4% 52%)` |
+| `--kz-text-on-media` | `textOnMedia` | Text on an image or a video | `hsl(0 0% 100%)` | = dark |
+| `--kz-accent` | `accent` | Primary action, link, selection — the product's identity | `hsl(217 92% 53%)` | `hsl(217 92% 50%)` |
+| `--kz-accent-hover` | `accentHover` | Accent on hover | `hsl(217 88% 45%)` | `hsl(217 88% 42%)` |
+| `--kz-accent-soft` | `accentSoft` | Tinted background (selection, badge) | `hsl(217 92% 53% / 0.10)` | `hsl(217 92% 50% / 0.08)` |
+| `--kz-accent-2` | `accent2` | Second accent (gradients) | → `accent` | → `accent` |
+| `--kz-on-accent` | `onAccent` | Text and icon on the accent (≥ 4.5:1) | `hsl(0 0% 100%)` | = dark |
+| `--kz-ring` | `ring` | Keyboard focus ring | → `accent` | → `accent` |
+| `--kz-success` | `success` | Status: success | `hsl(160 84% 39%)` | = dark |
+| `--kz-warning` | `warning` | Status: warning | `hsl(38 92% 50%)` | = dark |
+| `--kz-danger` | `danger` | Status: error, destructive action | `hsl(0 84% 60%)` | = dark |
+| `--kz-info` | `info` | Status: information | → `accent` | → `accent` |
+| `--kz-scrim` | `scrim` | Veil behind a badge or a caption on an image | `hsl(0 0% 0% / 0.60)` | = dark |
+| `--kz-scrim-strong` | `scrimStrong` | Stronger veil (long text on an image) | `hsl(0 0% 0% / 0.80)` | = dark |
+| `--kz-overlay` | `overlay` | Dialog backdrop | `hsl(0 0% 0% / 0.70)` | = dark |
+
+### Shape, depth, motion, type
+
+| Token | Key | Usage | Dark | Light |
+| :-- | :-- | :-- | :-- | :-- |
+| `--kz-radius-sm` | `radiusSm` | Field, chip | `8px` | = dark |
+| `--kz-radius-md` | `radiusMd` | Button, menu | `12px` | = dark |
+| `--kz-radius-lg` | `radiusLg` | Card | `16px` | = dark |
+| `--kz-radius-xl` | `radiusXl` | Dialog, sheet | `20px` | = dark |
+| `--kz-radius-full` | `radiusFull` | Pill, avatar | `9999px` | = dark |
+| `--kz-shadow-sm` | `shadowSm` | Field, button at rest (web only) | `0 1px 3px hsl(0 0% 0% / 0.12), 0 1px 2px hsl(0 0% 0% / 0.06)` | `0 1px 3px hsl(240 6% 0% / 0.06), 0 1px 2px hsl(240 6% 0% / 0.04)` |
+| `--kz-shadow-md` | `shadowMd` | Menu, popover, card on hover (web only) | `0 4px 12px hsl(0 0% 0% / 0.15), 0 2px 4px hsl(0 0% 0% / 0.08)` | `0 4px 12px hsl(240 6% 0% / 0.08), 0 2px 4px hsl(240 6% 0% / 0.04)` |
+| `--kz-shadow-lg` | `shadowLg` | Dialog, sheet (web only) | `0 8px 24px hsl(0 0% 0% / 0.18), 0 4px 8px hsl(0 0% 0% / 0.08)` | `0 8px 24px hsl(240 6% 0% / 0.10), 0 4px 8px hsl(240 6% 0% / 0.05)` |
+| `--kz-ease` | `ease` | Default curve of the motion signature | `cubic-bezier(0.16, 1, 0.3, 1)` | = dark |
+| `--kz-font-sans` | `fontSans` | Interface and running text | `Inter, system-ui, sans-serif` | = dark |
+| `--kz-font-display` | `fontDisplay` | Headings; a product theme may override it | → `font-sans` | → `font-sans` |
+| `--kz-font-mono` | `fontMono` | Code, aligned amounts | `"JetBrains Mono", ui-monospace, monospace` | = dark |
+
+Contrast is **tested**, not assumed: `pnpm turbo run check` fails if `text-primary` / `text-secondary` drop under 4.5:1 or
+`text-muted` under 3:1 on any surface, or `on-accent` under 4.5:1 on the accent, in either theme (WCAG 2.x).
+One trade-off is known: no blue can carry white text at 4.5:1 *and* be read at 4.5:1 as text on `surface-0`. The
+accent favours white text on it; for body-size links on dark, pair the accent with an underline or use it at
+≥ 18.66px bold (3:1).
+
+## Add or change a token
+
+1. **Source** — edit `src/tokens/<category>.tokens.json` (DTCG: `$type`, `$value`, `$description`).
+   - `$value` is the **dark** value (the default); the **light** value goes in
+     `"$extensions": { "com.krizaka": { "light": … } }`. No extension = the same value in both themes.
+   - An alias is `"{group.token}"` (`"{accent.$root}"` for a group's own token); it compiles to `var(--kz-…)` and
+     may not carry a light value — it follows its target.
+   - The CSS name is the path joined with `-` (`text.on-media` → `--kz-text-on-media`), the JS key its camelCase
+     (`textOnMedia`). Colours are `hsl()`; radii are `px` (the native output converts them to dp).
+2. **Build** — `pnpm --filter @krizaka/tokens build` writes `dist/` (never edit `dist/`), then
+   `pnpm --filter @krizaka/tokens test`: update the `tokens.css` snapshot only when the change is intended
+   (`vitest run -u`), and keep the contrast tests green.
+3. **Changeset** — `pnpm changeset`: a new token is a **minor**, a changed value at least a **minor** (it changes
+   every product), a removed or renamed token a **major**. `@krizaka/tokens` and `@krizaka/ui` are released together
+   (`fixed` group).
+
+## License
+
+[Apache-2.0](LICENSE)

package/dist/index.d.ts

@@ -0,0 +1,48 @@
+// @krizaka/tokens — GÉNÉRÉ depuis src/tokens/*.tokens.json par scripts/build.mjs : ne pas éditer.
+
+/** Every token as a CSS reference, `var(--kz-…)`: follows the active theme. */
+export declare const tokens: {
+  readonly surface0: "var(--kz-surface-0)";
+  readonly surface1: "var(--kz-surface-1)";
+  readonly surface2: "var(--kz-surface-2)";
+  readonly surface3: "var(--kz-surface-3)";
+  readonly media: "var(--kz-media)";
+  readonly borderSubtle: "var(--kz-border-subtle)";
+  readonly borderDefault: "var(--kz-border-default)";
+  readonly borderStrong: "var(--kz-border-strong)";
+  readonly textPrimary: "var(--kz-text-primary)";
+  readonly textSecondary: "var(--kz-text-secondary)";
+  readonly textMuted: "var(--kz-text-muted)";
+  readonly textOnMedia: "var(--kz-text-on-media)";
+  readonly accent: "var(--kz-accent)";
+  readonly accentHover: "var(--kz-accent-hover)";
+  readonly accentSoft: "var(--kz-accent-soft)";
+  readonly accent2: "var(--kz-accent-2)";
+  readonly onAccent: "var(--kz-on-accent)";
+  readonly ring: "var(--kz-ring)";
+  readonly success: "var(--kz-success)";
+  readonly warning: "var(--kz-warning)";
+  readonly danger: "var(--kz-danger)";
+  readonly info: "var(--kz-info)";
+  readonly scrim: "var(--kz-scrim)";
+  readonly scrimStrong: "var(--kz-scrim-strong)";
+  readonly overlay: "var(--kz-overlay)";
+  readonly radiusSm: "var(--kz-radius-sm)";
+  readonly radiusMd: "var(--kz-radius-md)";
+  readonly radiusLg: "var(--kz-radius-lg)";
+  readonly radiusXl: "var(--kz-radius-xl)";
+  readonly radiusFull: "var(--kz-radius-full)";
+  readonly shadowSm: "var(--kz-shadow-sm)";
+  readonly shadowMd: "var(--kz-shadow-md)";
+  readonly shadowLg: "var(--kz-shadow-lg)";
+  readonly ease: "var(--kz-ease)";
+  readonly fontSans: "var(--kz-font-sans)";
+  readonly fontDisplay: "var(--kz-font-display)";
+  readonly fontMono: "var(--kz-font-mono)";
+};
+/** A token's camelCase name. */
+export type TokenName = keyof typeof tokens;
+/** Raw CSS values of one theme. */
+export type TokenValues = { readonly [K in TokenName]: string };
+/** The raw CSS values per theme (aliases resolved), for canvas, charts and e-mails. */
+export declare const values: { readonly dark: TokenValues; readonly light: TokenValues };

package/dist/index.js

@@ -0,0 +1,121 @@
+// @krizaka/tokens — GÉNÉRÉ depuis src/tokens/*.tokens.json par scripts/build.mjs : ne pas éditer.
+
+/** Every token as a CSS reference, `var(--kz-…)`: follows the active theme. */
+export const tokens = Object.freeze({
+  "surface0": "var(--kz-surface-0)",
+  "surface1": "var(--kz-surface-1)",
+  "surface2": "var(--kz-surface-2)",
+  "surface3": "var(--kz-surface-3)",
+  "media": "var(--kz-media)",
+  "borderSubtle": "var(--kz-border-subtle)",
+  "borderDefault": "var(--kz-border-default)",
+  "borderStrong": "var(--kz-border-strong)",
+  "textPrimary": "var(--kz-text-primary)",
+  "textSecondary": "var(--kz-text-secondary)",
+  "textMuted": "var(--kz-text-muted)",
+  "textOnMedia": "var(--kz-text-on-media)",
+  "accent": "var(--kz-accent)",
+  "accentHover": "var(--kz-accent-hover)",
+  "accentSoft": "var(--kz-accent-soft)",
+  "accent2": "var(--kz-accent-2)",
+  "onAccent": "var(--kz-on-accent)",
+  "ring": "var(--kz-ring)",
+  "success": "var(--kz-success)",
+  "warning": "var(--kz-warning)",
+  "danger": "var(--kz-danger)",
+  "info": "var(--kz-info)",
+  "scrim": "var(--kz-scrim)",
+  "scrimStrong": "var(--kz-scrim-strong)",
+  "overlay": "var(--kz-overlay)",
+  "radiusSm": "var(--kz-radius-sm)",
+  "radiusMd": "var(--kz-radius-md)",
+  "radiusLg": "var(--kz-radius-lg)",
+  "radiusXl": "var(--kz-radius-xl)",
+  "radiusFull": "var(--kz-radius-full)",
+  "shadowSm": "var(--kz-shadow-sm)",
+  "shadowMd": "var(--kz-shadow-md)",
+  "shadowLg": "var(--kz-shadow-lg)",
+  "ease": "var(--kz-ease)",
+  "fontSans": "var(--kz-font-sans)",
+  "fontDisplay": "var(--kz-font-display)",
+  "fontMono": "var(--kz-font-mono)"
+});
+
+/** The raw CSS values per theme (aliases resolved), for canvas, charts and e-mails. */
+export const values = Object.freeze({ dark: Object.freeze({
+  "surface0": "hsl(240 6% 5%)",
+  "surface1": "hsl(240 5% 9%)",
+  "surface2": "hsl(240 5% 13%)",
+  "surface3": "hsl(240 4% 17%)",
+  "media": "hsl(240 5% 11%)",
+  "borderSubtle": "hsl(0 0% 100% / 0.06)",
+  "borderDefault": "hsl(0 0% 100% / 0.10)",
+  "borderStrong": "hsl(0 0% 100% / 0.16)",
+  "textPrimary": "hsl(0 0% 96%)",
+  "textSecondary": "hsl(240 4% 64%)",
+  "textMuted": "hsl(240 4% 47%)",
+  "textOnMedia": "hsl(0 0% 100%)",
+  "accent": "hsl(217 92% 53%)",
+  "accentHover": "hsl(217 88% 45%)",
+  "accentSoft": "hsl(217 92% 53% / 0.10)",
+  "accent2": "hsl(217 92% 53%)",
+  "onAccent": "hsl(0 0% 100%)",
+  "ring": "hsl(217 92% 53%)",
+  "success": "hsl(160 84% 39%)",
+  "warning": "hsl(38 92% 50%)",
+  "danger": "hsl(0 84% 60%)",
+  "info": "hsl(217 92% 53%)",
+  "scrim": "hsl(0 0% 0% / 0.60)",
+  "scrimStrong": "hsl(0 0% 0% / 0.80)",
+  "overlay": "hsl(0 0% 0% / 0.70)",
+  "radiusSm": "8px",
+  "radiusMd": "12px",
+  "radiusLg": "16px",
+  "radiusXl": "20px",
+  "radiusFull": "9999px",
+  "shadowSm": "0 1px 3px hsl(0 0% 0% / 0.12), 0 1px 2px hsl(0 0% 0% / 0.06)",
+  "shadowMd": "0 4px 12px hsl(0 0% 0% / 0.15), 0 2px 4px hsl(0 0% 0% / 0.08)",
+  "shadowLg": "0 8px 24px hsl(0 0% 0% / 0.18), 0 4px 8px hsl(0 0% 0% / 0.08)",
+  "ease": "cubic-bezier(0.16, 1, 0.3, 1)",
+  "fontSans": "Inter, system-ui, sans-serif",
+  "fontDisplay": "Inter, system-ui, sans-serif",
+  "fontMono": "\"JetBrains Mono\", ui-monospace, monospace"
+}), light: Object.freeze({
+  "surface0": "hsl(0 0% 98%)",
+  "surface1": "hsl(0 0% 100%)",
+  "surface2": "hsl(240 6% 95%)",
+  "surface3": "hsl(240 5% 90%)",
+  "media": "hsl(240 6% 92%)",
+  "borderSubtle": "hsl(240 6% 0% / 0.06)",
+  "borderDefault": "hsl(240 6% 0% / 0.10)",
+  "borderStrong": "hsl(240 6% 0% / 0.16)",
+  "textPrimary": "hsl(240 6% 10%)",
+  "textSecondary": "hsl(240 4% 41%)",
+  "textMuted": "hsl(240 4% 52%)",
+  "textOnMedia": "hsl(0 0% 100%)",
+  "accent": "hsl(217 92% 50%)",
+  "accentHover": "hsl(217 88% 42%)",
+  "accentSoft": "hsl(217 92% 50% / 0.08)",
+  "accent2": "hsl(217 92% 50%)",
+  "onAccent": "hsl(0 0% 100%)",
+  "ring": "hsl(217 92% 50%)",
+  "success": "hsl(160 84% 39%)",
+  "warning": "hsl(38 92% 50%)",
+  "danger": "hsl(0 84% 60%)",
+  "info": "hsl(217 92% 50%)",
+  "scrim": "hsl(0 0% 0% / 0.60)",
+  "scrimStrong": "hsl(0 0% 0% / 0.80)",
+  "overlay": "hsl(0 0% 0% / 0.70)",
+  "radiusSm": "8px",
+  "radiusMd": "12px",
+  "radiusLg": "16px",
+  "radiusXl": "20px",
+  "radiusFull": "9999px",
+  "shadowSm": "0 1px 3px hsl(240 6% 0% / 0.06), 0 1px 2px hsl(240 6% 0% / 0.04)",
+  "shadowMd": "0 4px 12px hsl(240 6% 0% / 0.08), 0 2px 4px hsl(240 6% 0% / 0.04)",
+  "shadowLg": "0 8px 24px hsl(240 6% 0% / 0.10), 0 4px 8px hsl(240 6% 0% / 0.05)",
+  "ease": "cubic-bezier(0.16, 1, 0.3, 1)",
+  "fontSans": "Inter, system-ui, sans-serif",
+  "fontDisplay": "Inter, system-ui, sans-serif",
+  "fontMono": "\"JetBrains Mono\", ui-monospace, monospace"
+}) });

package/dist/native.d.ts

@@ -0,0 +1,49 @@
+// @krizaka/tokens — GÉNÉRÉ depuis src/tokens/*.tokens.json par scripts/build.mjs : ne pas éditer.
+
+/** The colour roles of one theme. */
+export type Theme = {
+  readonly surface0: string;
+  readonly surface1: string;
+  readonly surface2: string;
+  readonly surface3: string;
+  readonly media: string;
+  readonly borderSubtle: string;
+  readonly borderDefault: string;
+  readonly borderStrong: string;
+  readonly textPrimary: string;
+  readonly textSecondary: string;
+  readonly textMuted: string;
+  readonly textOnMedia: string;
+  readonly accent: string;
+  readonly accentHover: string;
+  readonly accentSoft: string;
+  readonly accent2: string;
+  readonly onAccent: string;
+  readonly ring: string;
+  readonly success: string;
+  readonly warning: string;
+  readonly danger: string;
+  readonly info: string;
+  readonly scrim: string;
+  readonly scrimStrong: string;
+  readonly overlay: string;
+};
+export type ThemeName = "dark" | "light";
+/** Colour roles per theme, resolved for React Native (`#rrggbb`, `rgba()` when translucent). */
+export declare const themes: { readonly dark: Theme; readonly light: Theme };
+/** Corner radii, in dp. */
+export declare const radius: {
+  readonly sm: 8;
+  readonly md: 12;
+  readonly lg: 16;
+  readonly xl: 20;
+  readonly full: 9999;
+};
+/** Font families: the first family of each web stack (React Native takes a single name). */
+export declare const typography: {
+  readonly sans: "Inter";
+  readonly display: "Inter";
+  readonly mono: "JetBrains Mono";
+};
+/** Motion: the cubic-bezier control points (`Easing.bezier(...motion.ease)`). */
+export declare const motion: { readonly ease: readonly [number, number, number, number] };

package/dist/native.js

@@ -0,0 +1,75 @@
+// @krizaka/tokens — GÉNÉRÉ depuis src/tokens/*.tokens.json par scripts/build.mjs : ne pas éditer.
+
+/** Colour roles per theme, resolved for React Native (`#rrggbb`, `rgba()` when translucent). */
+export const themes = Object.freeze({ dark: Object.freeze({
+  "surface0": "#0c0c0e",
+  "surface1": "#161618",
+  "surface2": "#1f1f23",
+  "surface3": "#2a2a2d",
+  "media": "#1b1b1d",
+  "borderSubtle": "rgba(255,255,255,0.06)",
+  "borderDefault": "rgba(255,255,255,0.1)",
+  "borderStrong": "rgba(255,255,255,0.16)",
+  "textPrimary": "#f5f5f5",
+  "textSecondary": "#a0a0a7",
+  "textMuted": "#73737d",
+  "textOnMedia": "#ffffff",
+  "accent": "#196df5",
+  "accentHover": "#0e5bd8",
+  "accentSoft": "rgba(25,109,245,0.1)",
+  "accent2": "#196df5",
+  "onAccent": "#ffffff",
+  "ring": "#196df5",
+  "success": "#10b77f",
+  "warning": "#f59f0a",
+  "danger": "#ef4343",
+  "info": "#196df5",
+  "scrim": "rgba(0,0,0,0.6)",
+  "scrimStrong": "rgba(0,0,0,0.8)",
+  "overlay": "rgba(0,0,0,0.7)"
+}), light: Object.freeze({
+  "surface0": "#fafafa",
+  "surface1": "#ffffff",
+  "surface2": "#f1f1f3",
+  "surface3": "#e4e4e7",
+  "media": "#e9e9ec",
+  "borderSubtle": "rgba(0,0,0,0.06)",
+  "borderDefault": "rgba(0,0,0,0.1)",
+  "borderStrong": "rgba(0,0,0,0.16)",
+  "textPrimary": "#18181b",
+  "textSecondary": "#64646d",
+  "textMuted": "#808089",
+  "textOnMedia": "#ffffff",
+  "accent": "#0a64f5",
+  "accentHover": "#0d55c9",
+  "accentSoft": "rgba(10,100,245,0.08)",
+  "accent2": "#0a64f5",
+  "onAccent": "#ffffff",
+  "ring": "#0a64f5",
+  "success": "#10b77f",
+  "warning": "#f59f0a",
+  "danger": "#ef4343",
+  "info": "#0a64f5",
+  "scrim": "rgba(0,0,0,0.6)",
+  "scrimStrong": "rgba(0,0,0,0.8)",
+  "overlay": "rgba(0,0,0,0.7)"
+}) });
+
+/** Corner radii, in dp. */
+export const radius = Object.freeze({
+  "sm": 8,
+  "md": 12,
+  "lg": 16,
+  "xl": 20,
+  "full": 9999
+});
+
+/** Font families: the first family of each web stack (React Native takes a single name). */
+export const typography = Object.freeze({
+  "sans": "Inter",
+  "display": "Inter",
+  "mono": "JetBrains Mono"
+});
+
+/** Motion: the cubic-bezier control points (`Easing.bezier(...motion.ease)`). */
+export const motion = Object.freeze({ ease: Object.freeze([0.16,1,0.3,1]) });

package/dist/tokens.css

@@ -0,0 +1,89 @@
+/* @krizaka/tokens — GÉNÉRÉ depuis src/tokens/*.tokens.json par scripts/build.mjs : ne pas éditer. */
+
+/* Dark : la valeur par défaut. `.theme-dark` reprend exactement les mêmes valeurs : un lecteur, un éditeur ou un
+   média reste sombre dans les deux thèmes sans une seule classe `light:` dans son sous-arbre. */
+:root, .theme-dark {
+  color-scheme: dark;
+
+  /* Surfaces (hiérarchie de profondeur) */
+  --kz-surface-0: hsl(240 6% 5%); /* Fond de page */
+  --kz-surface-1: hsl(240 5% 9%); /* Carte, panneau */
+  --kz-surface-2: hsl(240 5% 13%); /* Élément surélevé, champ, survol */
+  --kz-surface-3: hsl(240 4% 17%); /* Élément actif, puce, piste */
+  --kz-media: hsl(240 5% 11%); /* fond d'un média avant chargement */
+
+  /* Bordures */
+  --kz-border-subtle: hsl(0 0% 100% / 0.06); /* Séparateur discret */
+  --kz-border-default: hsl(0 0% 100% / 0.10); /* Contour de carte, de champ */
+  --kz-border-strong: hsl(0 0% 100% / 0.16); /* Contour au survol, focus non clavier */
+
+  /* Texte */
+  --kz-text-primary: hsl(0 0% 96%); /* Titres, corps de texte */
+  --kz-text-secondary: hsl(240 4% 64%); /* Texte d'appui, libellés */
+  --kz-text-muted: hsl(240 4% 47%); /* Métadonnées, placeholders, désactivé (≥ 3:1) */
+
+  /* Accent : l'identité du produit. Surchargé par le thème produit, jamais par un composant. */
+  --kz-accent: hsl(217 92% 53%); /* Action principale, lien, sélection */
+  --kz-accent-hover: hsl(217 88% 45%); /* Accent au survol */
+  --kz-accent-soft: hsl(217 92% 53% / 0.10); /* Fond teinté (sélection, badge) */
+  --kz-accent-2: var(--kz-accent); /* 2e accent (dégradés) ; égal à l'accent par défaut */
+  --kz-ring: var(--kz-accent); /* Anneau de focus clavier */
+  --kz-info: var(--kz-accent); /* Statut : information */
+
+  /* Ombres (web uniquement) */
+  --kz-shadow-sm: 0 1px 3px hsl(0 0% 0% / 0.12), 0 1px 2px hsl(0 0% 0% / 0.06); /* Champ, bouton au repos */
+  --kz-shadow-md: 0 4px 12px hsl(0 0% 0% / 0.15), 0 2px 4px hsl(0 0% 0% / 0.08); /* Menu, popover, carte au survol */
+  --kz-shadow-lg: 0 8px 24px hsl(0 0% 0% / 0.18), 0 4px 8px hsl(0 0% 0% / 0.08); /* Dialogue, feuille */
+
+  /* Typographie */
+  --kz-font-display: var(--kz-font-sans); /* Titres ; égal à sans par défaut, surchargé par le thème produit */
+}
+
+/* Light. */
+html.light {
+  color-scheme: light;
+  --kz-surface-0: hsl(0 0% 98%); /* Fond de page */
+  --kz-surface-1: hsl(0 0% 100%); /* Carte, panneau */
+  --kz-surface-2: hsl(240 6% 95%); /* Élément surélevé, champ, survol */
+  --kz-surface-3: hsl(240 5% 90%); /* Élément actif, puce, piste */
+  --kz-media: hsl(240 6% 92%); /* fond d'un média avant chargement */
+  --kz-border-subtle: hsl(240 6% 0% / 0.06); /* Séparateur discret */
+  --kz-border-default: hsl(240 6% 0% / 0.10); /* Contour de carte, de champ */
+  --kz-border-strong: hsl(240 6% 0% / 0.16); /* Contour au survol, focus non clavier */
+  --kz-text-primary: hsl(240 6% 10%); /* Titres, corps de texte */
+  --kz-text-secondary: hsl(240 4% 41%); /* Texte d'appui, libellés */
+  --kz-text-muted: hsl(240 4% 52%); /* Métadonnées, placeholders, désactivé (≥ 3:1) */
+  --kz-accent: hsl(217 92% 50%); /* Action principale, lien, sélection */
+  --kz-accent-hover: hsl(217 88% 42%); /* Accent au survol */
+  --kz-accent-soft: hsl(217 92% 50% / 0.08); /* Fond teinté (sélection, badge) */
+  --kz-shadow-sm: 0 1px 3px hsl(240 6% 0% / 0.06), 0 1px 2px hsl(240 6% 0% / 0.04); /* Champ, bouton au repos */
+  --kz-shadow-md: 0 4px 12px hsl(240 6% 0% / 0.08), 0 2px 4px hsl(240 6% 0% / 0.04); /* Menu, popover, carte au survol */
+  --kz-shadow-lg: 0 8px 24px hsl(240 6% 0% / 0.10), 0 4px 8px hsl(240 6% 0% / 0.05); /* Dialogue, feuille */
+}
+
+/* Invariants : identiques dans les deux thèmes. Tout ce qui se pose SUR un média les utilise. */
+:root {
+  /* Texte */
+  --kz-text-on-media: hsl(0 0% 100%); /* Texte posé sur une image ou une vidéo */
+  --kz-on-accent: hsl(0 0% 100%); /* Texte et icône posés sur l'accent */
+  --kz-success: hsl(160 84% 39%); /* Statut : succès (lisible dans les deux thèmes) */
+  --kz-warning: hsl(38 92% 50%); /* Statut : avertissement */
+  --kz-danger: hsl(0 84% 60%); /* Statut : erreur, action destructive */
+
+  /* Voiles sur média : identiques dans les deux thèmes. */
+  --kz-scrim: hsl(0 0% 0% / 0.60); /* voile derrière un badge ou une légende sur image */
+  --kz-scrim-strong: hsl(0 0% 0% / 0.80); /* voile renforcé (texte long sur image) */
+  --kz-overlay: hsl(0 0% 0% / 0.70); /* fond d'un dialogue */
+
+  /* Rayons */
+  --kz-radius-sm: 8px; /* Champ, puce */
+  --kz-radius-md: 12px; /* Bouton, menu */
+  --kz-radius-lg: 16px; /* Carte */
+  --kz-radius-xl: 20px; /* Dialogue, feuille */
+  --kz-radius-full: 9999px; /* Pastille, avatar */
+  --kz-ease: cubic-bezier(0.16, 1, 0.3, 1); /* Courbe par défaut de la signature de mouvement */
+
+  /* Typographie */
+  --kz-font-sans: Inter, system-ui, sans-serif; /* Interface et texte courant */
+  --kz-font-mono: "JetBrains Mono", ui-monospace, monospace; /* Code, montants alignés */
+}

package/package.json

@@ -1,6 +1,92 @@
 {
   "name": "@krizaka/tokens",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.2.0",
+  "description": "The Krizaka semantic design tokens (--kz-*): one DTCG source compiled to CSS (dark, light, media invariants), typed constants and React Native themes.",
+  "keywords": [
+    "krizaka",
+    "design-tokens",
+    "dtcg",
+    "css-variables",
+    "theme",
+    "dark-mode",
+    "react-native",
+    "design-system"
+  ],
+  "homepage": "https://github.com/krizaka/krizaka-ui/tree/main/packages/tokens#readme",
+  "bugs": "https://github.com/krizaka/krizaka-ui/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/krizaka/krizaka-ui.git",
+    "directory": "packages/tokens"
+  },
+  "license": "Apache-2.0",
+  "author": "Krizaka (https://www.krizaka.com)",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./native": {
+      "types": "./dist/native.d.ts",
+      "import": "./dist/native.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@size-limit/preset-small-lib": "^14.2.0",
+    "@types/node": "^22.15.0",
+    "publint": "^0.3.25",
+    "size-limit": "^14.2.0",
+    "typescript": "^5.9.0",
+    "vitest": "^4.1.11"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "size-limit": [
+    {
+      "name": "./tokens.css",
+      "path": "dist/tokens.css",
+      "limit": "2.5 kB",
+      "gzip": true,
+      "rolldown": false
+    },
+    {
+      "name": ".",
+      "path": "dist/index.js",
+      "limit": "1.5 kB",
+      "gzip": true
+    },
+    {
+      "name": "./native",
+      "path": "dist/native.js",
+      "limit": "1 kB",
+      "gzip": true
+    }
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "lint": "tsc --noEmit --noUnusedLocals --noUnusedParameters --noFallthroughCasesInSwitch --noImplicitReturns",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "size": "size-limit",
+    "publint": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./tokens.css"
+  }
 }