{"_id":"@bastianplsfix/colors","name":"@bastianplsfix/colors","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@bastianplsfix/colors","version":"0.1.0","description":"A Tailwind CSS v4 color system: light/dark surfaces, text, borders, status and semantic tokens, with color-mix() blends and display-p3 wide-gamut enhancement.","type":"module","license":"MIT","sideEffects":["*.css"],"exports":{"./theme.css":"./css/theme.css"},"author":{"name":"Sebastian Nomme"},"repository":{"type":"git","url":"git+https://github.com/bastianplsfix/fonts.git","directory":"packages/colors"},"homepage":"https://github.com/bastianplsfix/fonts/tree/main/packages/colors#readme","bugs":{"url":"https://github.com/bastianplsfix/fonts/issues"},"keywords":["colors","color-system","tailwindcss","tailwind-v4","dark-mode","design-tokens","display-p3","design-system"],"_id":"@bastianplsfix/colors@0.1.0","gitHead":"700d4f91f187021eb384659488335ab19494ec20","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-45HcfZ2+FBnHz6csVIi0kD21StQ4xkW3HulMNOrTTnuJ3X6pvXHI7ois5Ng19ENL/W0tWbk2pWko5+K6rZh8Kg==","shasum":"303ad1a7e2cf6ef214d242d7ac0ca1fd577536d6","tarball":"https://registry.npmjs.org/@bastianplsfix/colors/-/colors-0.1.0.tgz","fileCount":4,"unpackedSize":15765,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDC2h3zC7IBTpnkzWWbRjxj2EN45JX94ekwEBXEtWs0kAIhAKGpuuCeDm0W0WY57+N4DK5lCWXgWdErK3QDLDmL3rBs"}]},"_npmUser":{"name":"bastianplsfix","email":"Sebastian.nomme@icloud.com"},"directories":{},"maintainers":[{"name":"bastianplsfix","email":"Sebastian.nomme@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/colors_0.1.0_1783536513653_0.12728514641685984"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-08T18:48:33.470Z","0.1.0":"2026-07-08T18:48:33.789Z","modified":"2026-07-08T18:48:34.046Z"},"maintainers":[{"name":"bastianplsfix","email":"Sebastian.nomme@icloud.com"}],"description":"A Tailwind CSS v4 color system: light/dark surfaces, text, borders, status and semantic tokens, with color-mix() blends and display-p3 wide-gamut enhancement.","homepage":"https://github.com/bastianplsfix/fonts/tree/main/packages/colors#readme","keywords":["colors","color-system","tailwindcss","tailwind-v4","dark-mode","design-tokens","display-p3","design-system"],"repository":{"type":"git","url":"git+https://github.com/bastianplsfix/fonts.git","directory":"packages/colors"},"author":{"name":"Sebastian Nomme"},"bugs":{"url":"https://github.com/bastianplsfix/fonts/issues"},"license":"MIT","readme":"# @bastianplsfix/colors\n\nA Tailwind CSS v4 color system: light and dark surfaces, foreground ramps,\nborders, buttons, shadows, status hues, and semantic alert/danger tokens —\nwith `color-mix()` blends and `display-p3` wide-gamut colors layered on where\nthe browser supports them.\n\nCSS only. No JavaScript, no build step.\n\n## Install\n\n```sh\nnpm install @bastianplsfix/colors\n```\n\n## Setup\n\nImport after Tailwind:\n\n```css\n@import \"tailwindcss\";\n@import \"@bastianplsfix/colors/theme.css\";\n```\n\nThat's the whole setup. Every token is a Tailwind theme variable, so it works\nboth as a utility and as a raw custom property:\n\n```html\n

…

\n```\n\n```css\n.card {\n background: var(--color-surface-2);\n box-shadow: var(--shadow-2);\n}\n```\n\n## Dark mode\n\nLight is the default. Dark activates on a `.dark` class on any ancestor —\nusually ``:\n\n```js\ndocument.documentElement.classList.toggle(\"dark\", isDark);\n```\n\nThe package declares the matching Tailwind variant for you:\n\n```css\n@custom-variant dark (&:where(.dark, .dark *));\n```\n\nso `dark:` utilities and the palette flip from the same switch. **Do not also\ndeclare `@custom-variant dark` in your app CSS** — and if you were using\nTailwind's default `prefers-color-scheme` dark variant, importing this package\nswitches you to the class strategy.\n\nBecause `.dark` is a class and not a media query, it nests. A `.dark` subtree\ninside a light page is a self-contained dark island, `color-scheme` included:\n\n```html\n\n

Light text.

\n \n\n```\n\n`color-scheme` is set on `:root` and `.dark` so native form controls,\nscrollbars, and the page canvas track the theme.\n\n## Tokens\n\nEverything in the `--color-*` namespace generates the usual `bg-*`, `text-*`,\n`border-*`, `fill-*`, `ring-*` utilities.\n\n| Group | Tokens |\n| --- | --- |\n| Surfaces | `--color-surface-1` `-2` `-3` `--color-surface-accent` |\n| Foreground | `--color-fg-1` `-2` `-3` `--color-accent` |\n| Borders | `--color-border` |\n| Buttons | `--color-button` `--color-button-hover` `--color-button-fg` |\n| Scrollbar | `--color-scrollbar` `--color-scrollbar-active` |\n| Links | `--color-link` `--color-link-hover` `--color-decoration` `--color-decoration-hover` |\n| Tooltip | `--color-tooltip` `--color-tooltip-fg` |\n| Status | `--color-green` `-red` `-yellow` `-blue` `-orange` `-purple` |\n| Semantic | `--color-alert` `--color-danger` `--color-surface-alert` `--color-surface-danger` |\n\nSurface and foreground ramps go from most to least prominent: `surface-1` is\nthe page, `surface-2` a raised panel, `surface-3` a hover state; `fg-1` is body\ncopy, `fg-2` secondary, `fg-3` disabled or hint text.\n\n### Tokens without utilities\n\n| Group | Tokens |\n| --- | --- |\n| Shadows | `--shadow-1` `--shadow-2` |\n| Effects | `--lifted-brightness` `--backdrop-brightness` |\n\nThese are plain custom properties, not `@theme` entries, and generate no\nutilities by design.\n\nShadows are kept out of Tailwind's `--shadow-*` namespace because that\nnamespace *inlines* the literal shadow into the generated class (so\n`shadow-red-500` can rewrite its color). A `shadow-2` utility built that way\nwould bake in the light shadow and ignore the `.dark` override entirely. Use\nthe variable, or Tailwind's late-binding arbitrary form:\n\n```html\n

…

\n```\n\n```css\n.card { box-shadow: var(--shadow-2); }\n```\n\nThe `*-brightness` tokens are multipliers for `filter: brightness()`, not\ncolors — a lifted surface brightens in dark mode (`1.45`) and is a no-op in\nlight (`1`); a scrim dims the backdrop behind a modal.\n\n## Overriding\n\nTokens are declared with `@theme static`, which means:\n\n1. Every token is emitted into `:root`, even ones no utility references — so\n reading `var(--color-purple)` from hand-written CSS always resolves. (Plain\n `@theme` prunes unused variables.)\n2. Utilities compile to `var(--color-*)` rather than inlining the literal\n value, so overriding a token at runtime — which is exactly what `.dark`\n does — also repaints `bg-*`, `text-*`, and `border-*`.\n\nTo retheme, override the variables after the import:\n\n```css\n@import \"tailwindcss\";\n@import \"@bastianplsfix/colors/theme.css\";\n\n:root {\n --color-accent: rebeccapurple;\n}\n.dark {\n --color-accent: #c9a9ff;\n}\n```\n\nNote that `--color-alert`, `--color-danger`, `--color-surface-alert`,\n`--color-surface-danger`, and (in dark) `--color-tooltip` are *derived* — they\n`color-mix()` a status hue against `--color-fg-1` or `--color-surface-1`. Change\n`--color-orange` and the alert tokens follow. Override them directly and you\nopt out of the blend.\n\n## Browser support\n\nEverything degrades. The base layer is plain sRGB hex, and the\n`color-mix()` and `display-p3` refinements sit behind `@supports`, so an old\nbrowser gets flat, correct colors rather than nothing.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-01ac6a4b599f76c012d890fd2b337353"}