{"_id":"@asnewyla/tokens","_rev":"4-34ceb928e9c934011b04945ca9f210fe","name":"@asnewyla/tokens","dist-tags":{"latest":"0.5.0"},"versions":{"0.2.0":{"name":"@asnewyla/tokens","version":"0.2.0","keywords":["css","design-tokens","theming"],"license":"MIT","_id":"@asnewyla/tokens@0.2.0","maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"dist":{"shasum":"43ef17f0c446aecc421ed057193cd6f5c4f3cf49","tarball":"https://registry.npmjs.org/@asnewyla/tokens/-/tokens-0.2.0.tgz","fileCount":4,"integrity":"sha512-2yMbImrzMeZToXacWdOPyw2FMBc/VBhHx9s53avA2NLhq9ruFQ0i/8OU4r0ejWb2PeBGO/1mIA32wHNgXYjzdQ==","signatures":[{"sig":"MEYCIQCsgs7+GEKxBvBWykD9Pla6n3tL/y9kzEqY8OBmy6GVdAIhAL/OpExSvWmehQu3Sk0lE12QHwIJykJVRUxVstP2OmSE","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5500},"exports":{"./tokens.css":"./dist/tokens.css"},"scripts":{"test":"vitest run","build":"tsup","test:watch":"vitest","type-check":"tsc --noEmit","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"asnewyla","email":"asnewyla@gmail.com"},"repository":{"url":"git+https://github.com/xavierDelaFuente/xd-components.git","type":"git","directory":"packages/tokens"},"description":"Design tokens (color, spacing, typography, radius) as CSS custom properties","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.1.0","vitest":"^2.0.0","typescript":"^5.5.0","@vitest/coverage-v8":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tokens_0.2.0_1787420668243_0.448639852221157","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@asnewyla/tokens","version":"0.3.0","keywords":["css","design-tokens","theming"],"license":"MIT","_id":"@asnewyla/tokens@0.3.0","maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"dist":{"shasum":"24a797092c8d5c05232575f0ec8816c262908d0e","tarball":"https://registry.npmjs.org/@asnewyla/tokens/-/tokens-0.3.0.tgz","fileCount":7,"integrity":"sha512-6Y3k8aXvParkfupT/yGvDBCf0Uda58c61Z7HozTIEl7N1vZlR5FnFEsWI59zFx+PaXJGavbMNvYDwaxxV23Qew==","signatures":[{"sig":"MEYCIQCCzfVU942EDpctKTfm1HvbO5b+hYYKTZhKCS2Sxy76xwIhAOnYQS7eqNJMmx/kRv1l8WnhDVwHM8PxsR4znCUkDUnW","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12741},"exports":{"./tokens.css":"./dist/tokens.css","./theme-sand.css":"./dist/theme-sand.css","./theme-paper.css":"./dist/theme-paper.css","./theme-lavender.css":"./dist/theme-lavender.css"},"scripts":{"test":"vitest run","build":"tsup","test:watch":"vitest","type-check":"tsc --noEmit","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"asnewyla","email":"asnewyla@gmail.com"},"repository":{"url":"git+https://github.com/xavierDelaFuente/xd-components.git","type":"git","directory":"packages/tokens"},"description":"Design tokens (color, spacing, typography, radius) as CSS custom properties","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.1.0","vitest":"^2.0.0","typescript":"^5.5.0","@vitest/coverage-v8":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tokens_0.3.0_1787564634207_0.2303099939735247","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@asnewyla/tokens","version":"0.4.0","keywords":["css","design-tokens","theming"],"license":"MIT","_id":"@asnewyla/tokens@0.4.0","maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"dist":{"shasum":"ca77e3268b299deda38e601238761a0775478077","tarball":"https://registry.npmjs.org/@asnewyla/tokens/-/tokens-0.4.0.tgz","fileCount":7,"integrity":"sha512-312HN15T0uihsyXGNHahV7BjGD564OLsP6/LFNz4ODWy8ZanGhctyDb6fOk6x9BslbsWcRJhwPaWB1ZKEEdzWA==","signatures":[{"sig":"MEQCIEI3YQzF7hyBFsN/kj9uOcdE/G+X4Uu9ndhsUhdkUQr2AiBFzZeAbh8Ft0DGVYOejh0meWNGltVscf9oUzQ7P2Gk3Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17036},"exports":{"./tokens.css":"./dist/tokens.css","./theme-sand.css":"./dist/theme-sand.css","./theme-paper.css":"./dist/theme-paper.css","./theme-lavender.css":"./dist/theme-lavender.css"},"scripts":{"test":"vitest run","build":"tsup","test:watch":"vitest","type-check":"tsc --noEmit","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"asnewyla","email":"asnewyla@gmail.com"},"repository":{"url":"git+https://github.com/xavierDelaFuente/xd-components.git","type":"git","directory":"packages/tokens"},"description":"Design tokens (color, spacing, typography, radius) as CSS custom properties","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.1.0","vitest":"^2.0.0","typescript":"^5.5.0","@vitest/coverage-v8":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tokens_0.4.0_1787691185492_0.5555107103754953","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"@asnewyla/tokens","version":"0.5.0","description":"Design tokens (color, spacing, typography, radius) as CSS custom properties","license":"MIT","repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/tokens"},"publishConfig":{"access":"public"},"exports":{"./tokens.css":"./dist/tokens.css","./theme-terra.css":"./dist/theme-terra.css","./theme-almanac.css":"./dist/theme-almanac.css","./theme-block.css":"./dist/theme-block.css","./theme-graphite.css":"./dist/theme-graphite.css","./theme-rubber.css":"./dist/theme-rubber.css","./theme-terminal.css":"./dist/theme-terminal.css"},"sideEffects":["*.css"],"keywords":["css","design-tokens","theming"],"devDependencies":{"@vitest/coverage-v8":"^2.0.0","tsup":"^8.1.0","typescript":"^5.5.0","vitest":"^2.0.0"},"scripts":{"build":"tsup","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","type-check":"tsc --noEmit"},"_nodeVersion":"24.19.0","_id":"@asnewyla/tokens@0.5.0","dist":{"integrity":"sha512-cXaCzlNnrEw2tUdseDO5Uh2eSeowm3QrD1COF5PkySolwVLhYqmK3BgjlWWiZkR/uVGZht7EhasEkTgT9qctWw==","shasum":"5b491ed3f415f986cd82abbb44f0833f7fb28889","tarball":"https://registry.npmjs.org/@asnewyla/tokens/-/tokens-0.5.0.tgz","fileCount":10,"unpackedSize":33674,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDQZ/COG7kVbhg6t+AbXuQdwg/oiepW3eBl/uWeXQt1LAiEAzAadWIx9S3v7rA5Ay2ipP6gDGbkm/k4d0dsjRrBznBM="}]},"_npmUser":{"name":"asnewyla","email":"asnewyla@gmail.com"},"directories":{},"maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tokens_0.5.0_1787860427555_0.2689823425269702"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-22T17:44:28.142Z","modified":"2026-08-27T19:53:47.862Z","0.2.0":"2026-08-22T17:44:28.407Z","0.3.0":"2026-08-24T09:43:54.346Z","0.4.0":"2026-08-25T20:53:05.659Z","0.5.0":"2026-08-27T19:53:47.698Z"},"license":"MIT","keywords":["css","design-tokens","theming"],"repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/tokens"},"description":"Design tokens (color, spacing, typography, radius) as CSS custom properties","maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"readme":"# @asnewyla/tokens\n\nDesign tokens — color, spacing, radius, typography, elevation — as CSS\ncustom properties under the `--xd-*` prefix shared across every\n`@asnewyla/*` component.\n\n## Install\n\n```bash\nnpm install @asnewyla/tokens\n```\n\n## Usage\n\nThis is a **soft dependency**. Every component ships its own hardcoded\nfallback for each token it uses (`var(--xd-color-primary, #0f766e)`), so it\nlooks right with zero setup. Import this stylesheet once to override the\nwhole set at once — no component declares a dependency on it, and none is\nrequired to import it:\n\n```ts\nimport '@asnewyla/tokens/tokens.css';\n```\n\n```css\n:root {\n  --xd-color-primary: #0f766e;\n  --xd-color-focus: #0f766e;\n}\n```\n\n### Tokens\n\n| Group | Tokens |\n|---|---|\n| Color | `--xd-color-{primary,secondary,destructive}`, `--xd-on-{primary,secondary,destructive}` — light mode by default, overridden under `prefers-color-scheme: dark` |\n| Surface & text | `--xd-color-surface`, `--xd-color-surface-hover`, `--xd-color-text`, `--xd-color-text-muted` — page/popover background and text; `-text-muted` is placeholder/secondary text, still held to 4.5:1 |\n| Spacing | `--xd-space-{xs,sm,md,lg,xl,2xl,3xl}` (0.25rem → 2rem) |\n| Radius | `--xd-radius-{sm,md,lg}` in rem (0.25rem → 0.625rem), `--xd-radius-full` (`9999px`, a fixed pill/circle trick value, not on the rem scale) |\n| Typography | `--xd-font-family`, `--xd-font-family-mono`, `--xd-font-size-{sm,md,lg}`, `--xd-font-weight-{regular,medium,semibold,bold}`, `--xd-line-height-normal`, `--xd-letter-spacing-label`, `--xd-text-transform-label` (the last two are read by every form `<label>` and by a filled button's own visible text) |\n| Border | `--xd-color-border` (decorative, e.g. a card outline) and `--xd-color-border-strong` (an interactive control's own boundary, held to WCAG 1.4.11's 3:1) — two different jobs, don't swap them; `--xd-border-width-{thin,thick}`; `--xd-frame-border-width` (what a card/popover/listbox border reads, defaults to the hairline); `--xd-control-border-width`/`--xd-control-border-color` (a filled control's own outline — `0`/`currentColor` by default, so inert until a theme opts in) |\n| Focus ring | `--xd-color-focus`, `--xd-focus-ring-width`, `--xd-focus-ring-offset` — `-focus` is its own token rather than an alias of `-primary`, since on a primary-filled control the ring has to contrast with the fill and the two need to be able to diverge per theme |\n| Elevation | `--xd-shadow-{sm,md}` (surface elevation — a card, a popover), `--xd-shadow-control`/`--xd-shadow-control-active`/`--xd-press-transform` (a button's own press effect, separate tier, all `none` by default) |\n| Density | `--xd-control-height-md` — the fixed height `Button`'s `md` size, `Select`'s trigger, and `Input`'s field all read |\n| State | `--xd-opacity-disabled` |\n| Motion | `--xd-motion-fast` |\n\n### Units: rem vs. px, on purpose\n\nSpacing, typography, and radius are in `rem` — they scale together with the\nuser's text-size preference, which is what should happen for anything sized\nrelative to text. `--xd-radius-full` and `--xd-border-width-thin`/`-thick`\nare the deliberate exceptions, all in `px`: `radius-full` is a \"bigger than\nany element will ever be\" trick value to force a pill/circle shape, not a\nreal size on the scale; a hairline (or thicker) border is meant to render\nat a fixed device-pixel width at any zoom level — in `rem` it would scale\nwith font-size and could round to a blurry sub-pixel or a visibly thicker\nline. This isn't inconsistency — it's picking the unit that matches what\neach token means.\n\n## Themes\n\nBeyond the default palette, this package ships six complete alternative\ntoken sets, each scoped under its own `[data-theme=\"...\"]` attribute:\n\n```ts\nimport '@asnewyla/tokens/theme-terra.css';\nimport '@asnewyla/tokens/theme-almanac.css';\nimport '@asnewyla/tokens/theme-block.css';\nimport '@asnewyla/tokens/theme-graphite.css';\nimport '@asnewyla/tokens/theme-rubber.css';\nimport '@asnewyla/tokens/theme-terminal.css';\n```\n\n| Theme | Feel |\n|---|---|\n| `terra` | Warm terracotta and clay, generous rounded corners, soft diffuse warm shadows, 170ms motion, Plus Jakarta Sans |\n| `almanac` | Editorial serif on cool ink-and-cream, tight 2–4px corners, navy-ink primary, Source Serif 4, 200ms motion |\n| `block` | Thick ink frames, hard offset shadows that collapse on press, uppercase Space Grotesk labels, 2px borders everywhere, no blur |\n| `graphite` | Dense, precise, neutral instrument-panel feel — tight spacing/radius, IBM Plex Sans/Mono, 90ms motion; for tables and control panels, not marketing surfaces |\n| `rubber` | Soft, airy, pill-shaped, springy — 16–24px radius, diffuse violet shadows, overshoot easing, `scale(0.97)` press |\n| `terminal` | Monospace, square, outlined, instant — JetBrains Mono, zero radius, 1px outlines on filled controls, uppercase tracked labels, 60ms linear motion |\n\nEach theme file is a **complete, standalone** token set — every `--xd-*`\ntoken this package defines, not just the ones that diverge from the\ndefault — so importing just one theme file works with no other import,\nmatching the soft-dependency model above. Unlike the default palette, a\ntheme's selector is only ever `[data-theme=\"name\"]` — it does **not** also\napply to a bare, untagged `:root`. `tokens.css`'s own `:root` is the sole\nuntagged default; every theme is opt-in on top of it. Import several and\nset `data-theme=\"terra\"` (etc.) on `<html>` to pick one at runtime — see\n`@asnewyla/theme`'s `ThemeProvider`, which does exactly that.\n\nEvery theme also supports the same `data-mode=\"light\"|\"dark\"` override as\nan explicit third state, independent of `prefers-color-scheme`, on top of\nwhichever theme is active — e.g. `[data-theme=\"block\"][data-mode=\"dark\"]`.\nEach theme also paints `background-color`/`color`/`font-family` directly\non its own `[data-theme=\"name\"]` element, not just the custom properties\n— a page that mounts only a theme file, with no other component styling,\nstill renders correctly rather than transparent.\n\n## License\n\nMIT\n","readmeFilename":""}