@tenphi/tasty 3.0.1 → 3.1.0

package/dist/ssr/next.js

@@ -1,9 +1,9 @@
 "use client";
-import { n as getConfig } from "../config-CCcE_tqx.js";
-import { i as registerSSRCollectorGetter } from "../format-rules-BbKDjsfO.js";
+import { n as getConfig } from "../config-CwQ-fAsp.js";
+import { i as registerSSRCollectorGetter } from "../format-rules-CaW4lJGg.js";
 import { t as getTastySSRContext } from "../context-CA8YKeMn.js";
-import { t as ServerStyleCollector } from "../collector-D14DcZx9.js";
-import { t as hydrateTastyClasses } from "../hydrate-CwALW3J9.js";
+import { t as ServerStyleCollector } from "../collector-D7yzmG5G.js";
+import { t as hydrateTastyClasses } from "../hydrate-uFv9kx7G.js";
 import { Fragment, createElement, useState } from "react";
 import { useServerInsertedHTML } from "next/navigation";
 //#region src/ssr/next.ts

package/dist/static/index.d.ts

@@ -1,5 +1,5 @@
-import { b as Styles } from "../index-l_NdJSUS.js";
-import { t as mergeStyles } from "../merge-styles-NEvqayL_.js";
+import { b as Styles } from "../index-KUYya3x7.js";
+import { t as mergeStyles } from "../merge-styles-DLm4wdnb.js";
 
 //#region src/static/types.d.ts
 /**

package/dist/static/index.js

@@ -1,4 +1,4 @@
-import { t as mergeStyles } from "../merge-styles--1zOSFlS.js";
+import { t as mergeStyles } from "../merge-styles-H8LFJ5HY.js";
 //#region src/static/types.ts
 /**
 * Create a StaticStyle object.

package/dist/zero/babel.d.ts

@@ -1,2 +1,2 @@
-import { n as _default, r as TastyZeroConfig, t as TastyZeroBabelOptions } from "../babel-HlEpSZrj.js";
+import { n as _default, r as TastyZeroConfig, t as TastyZeroBabelOptions } from "../babel-R2qT7yLN.js";
 export { TastyZeroBabelOptions, type TastyZeroConfig, _default as default };

package/dist/zero/babel.js

@@ -1,7 +1,7 @@
-import { b as resetConfig, d as getGlobalStyles, i as getGlobalConfigTokens, s as getGlobalFunctions, t as configure } from "../config-CCcE_tqx.js";
-import { t as mergeStyles } from "../merge-styles--1zOSFlS.js";
-import { t as resolveRecipes } from "../resolve-recipes-Caix5NnH.js";
-import { a as extractFunctionsFromStyles, c as extractStylesForSelector, i as extractFontFaceFromStyles, l as extractStylesWithChunks, o as extractKeyframesFromStyles, r as extractCounterStyleFromStyles, s as extractPropertiesFromStyles, t as CSSWriter, u as setExtractorNamePrefix } from "../css-writer-B5DBoxhf.js";
+import { b as resetConfig, d as getGlobalStyles, i as getGlobalConfigTokens, s as getGlobalFunctions, t as configure } from "../config-CwQ-fAsp.js";
+import { t as mergeStyles } from "../merge-styles-H8LFJ5HY.js";
+import { t as resolveRecipes } from "../resolve-recipes-aN94fjqS.js";
+import { a as extractFunctionsFromStyles, c as extractStylesForSelector, i as extractFontFaceFromStyles, l as extractStylesWithChunks, o as extractKeyframesFromStyles, r as extractCounterStyleFromStyles, s as extractPropertiesFromStyles, t as CSSWriter, u as setExtractorNamePrefix } from "../css-writer-dS1srTkS.js";
 import * as fs from "fs";
 import * as path from "path";
 import { declare } from "@babel/helper-plugin-utils";

package/dist/zero/index.d.ts

@@ -1,4 +1,4 @@
-import { b as Styles } from "../index-l_NdJSUS.js";
+import { b as Styles } from "../index-KUYya3x7.js";
 
 //#region src/zero/extractor.d.ts
 interface ExtractedChunk {

package/dist/zero/index.js

@@ -1,2 +1,2 @@
-import { c as extractStylesForSelector, l as extractStylesWithChunks, n as createCSSWriter, t as CSSWriter } from "../css-writer-B5DBoxhf.js";
+import { c as extractStylesForSelector, l as extractStylesWithChunks, n as createCSSWriter, t as CSSWriter } from "../css-writer-dS1srTkS.js";
 export { CSSWriter, createCSSWriter, extractStylesForSelector, extractStylesWithChunks };

package/dist/zero/next.d.ts

@@ -1,4 +1,4 @@
-import { r as TastyZeroConfig } from "../babel-HlEpSZrj.js";
+import { r as TastyZeroConfig } from "../babel-R2qT7yLN.js";
 
 //#region src/zero/next.d.ts
 interface WebpackConfigContext {

package/docs/ai-agents.md

@@ -70,6 +70,9 @@ The last row goes the other way — longhands over the shorthand — because `fl
 - ❌ `#f5f5f5`, `rgb(0 0 0)`, `oklch(…)`, `okhsl(…)`, `red` → ✅ `#surface` (add the token to the config if it doesn't exist).
 - ❌ `var(--gap)` → ✅ `$gap` · ❌ `$accent-color` → ✅ `#accent` · ❌ `transparent` → ✅ `#clear` · ❌ `currentColor` → ✅ `#current`.
 - A `$name` must be declared as a `'$name': value` key in the same styles object, or in the config.
+- Names are case-sensitive and start lowercase — `$myVar` → `--myVar`; a leading capital folds (`$Foo` → `--foo`). Prefer kebab-case.
+- A `$name` reference is untyped: it fills the first free slot in a shorthand (`border: '1bw $my-style'` → the line style). Write colors as `#name`; `$name-color` is a fallback for pointing at a raw CSS custom property that holds a color.
+- `preset` and `transition` take token *names*, not values, so a `$name` cannot stand in for one (it warns in dev and is ignored).
 
 ### Units
 

package/docs/configuration.md

@@ -78,7 +78,7 @@ These docs use `data-schema="dark"` in examples. If your app already standardize
 
 ## Color Space
 
-Controls the CSS color space used for decomposed color token companion variables. When you define `#name` color tokens, tasty generates both `--name-color` (full color) and `--name-color-{suffix}` (decomposed components for alpha composition).
+Controls the CSS color space used for decomposed color token companion variables. When you define `#name` color tokens, tasty generates both `--name-color` (the color) and `--name-color-{suffix}` (its channels, decomposed).
 
 ```jsx
 configure({
@@ -86,13 +86,17 @@ configure({
 });
 ```
 
-| Color Space | Suffix | Components Format | Alpha Syntax |
+| Color Space | Suffix | Components Format | Channel Reference |
 |---|---|---|---|
-| `rgb` | `-rgb` | `255 128 0` | `rgb(var(--name-color-rgb) / .5)` |
-| `hsl` | `-hsl` | `300 100% 25%` | `hsl(var(--name-color-hsl) / .5)` |
-| `oklch` | `-oklch` | `0.42 0.16 328` | `oklch(var(--name-color-oklch) / .5)` |
+| `rgb` | `-rgb` | `255 128 0` | `rgb(var(--name-color-rgb))` |
+| `hsl` | `-hsl` | `300 100% 25%` | `hsl(var(--name-color-hsl))` |
+| `oklch` | `-oklch` | `0.42 0.16 328` | `oklch(var(--name-color-oklch))` |
 
-The `oklch` color space is the default because it provides perceptually uniform color manipulation — alpha fading and color mixing produce more natural-looking results.
+The `oklch` color space is the default because it provides perceptually uniform color manipulation — reaching for a channel to shift lightness or hue produces more natural-looking results.
+
+The companion is there so you can *address the channels*: shift a lightness, animate a hue, build a derived color. It is not how the [opacity suffix](dsl.md#color-tokens--opacity) works — that sets the alpha on `--name-color` itself with relative color syntax, so it needs nothing from the companion and works on any color.
+
+A color the engine cannot evaluate at build time — a `color-mix()`, a `light-dark()`, a `color()` in a space it has no conversion for — has no channels to decompose, so its companion is expressed *by reference* using CSS relative color syntax (`--name-color-oklch: from color-mix(…) l c h`). Reading a channel off it still works; the browser resolves them.
 
 ---
 
@@ -164,6 +168,7 @@ configure({
 
 - `$name` keys become `--name` CSS custom properties
 - `#name` keys become `--name-color` and `--name-color-{colorSpace}` properties (suffix depends on `colorSpace`, default `oklch`)
+- Names keep their case, since CSS custom properties are case-sensitive: `$myVar` is `--myVar` and is referenced as `$myVar`. A leading capital is not supported and folds — `$Foo` and `#Purple` become `--foo` and `--purple-color` — so start names lowercase. Kebab-case (`$my-var`) remains the convention.
 
 Tokens are automatically emitted in all rendering modes: runtime (client), SSR, and zero-runtime (Babel plugin).
 

package/docs/dsl.md

@@ -111,7 +111,7 @@ const List = tasty({
 Named color prefixed with `#` that maps to CSS custom properties. Supports opacity with `.N` suffix:
 
 ```jsx
-fill: '#purple.5'  // → var(--purple-color) with 50% opacity
+fill: '#purple.5'  // → oklch(from var(--purple-color) l c h / .5)
 ```
 
 ### Modifier
@@ -133,11 +133,108 @@ Modifiers can also be exposed as top-level component props via `modProps` — se
 color: '#purple',           // Full opacity
 color: '#purple.5',         // 50% opacity
 color: '#purple.05',        // 5% opacity
+color: '#purple.$fade',     // Opacity from a custom property
 fill: '#current',           // → currentcolor
-fill: '#current.5',         // → color-mix(in oklab, currentcolor 50%, transparent)
 color: '(#primary, #secondary)',  // Fallback syntax
 ```
 
+The suffix sets the alpha on the token's color with CSS relative color syntax:
+
+```jsx
+fill: '#purple.5';
+// → oklch(from var(--purple-color) l c h / .5)
+```
+
+The channels are copied over and the alpha slot is written, which asks nothing of
+the color beyond *being* a color. That means the suffix works on every one of
+these:
+
+- a token holding a `color-mix()`, a `light-dark()`, or a `color()` in a space
+  Tasty cannot convert — none of which have channels to decompose
+- `#current`, which resolves to `currentcolor`
+- a `--name-color` variable declared in your own CSS, with no Tasty token
+  definition and no companion variable behind it
+
+Two properties follow from writing the alpha slot rather than compositing:
+
+- **Alpha is replaced, not multiplied.** A token holding `rgb(255 0 0 / .8)`
+  faded to `.5` is alpha `.5`, not `.4`.
+- **The alpha may be a number or a percentage.** `#purple.$fade` emits
+  `/ var(--fade)` unchanged, so it works whether `$fade` holds `.5` or `50%` —
+  which is what `--*-opacity` properties are registered to accept.
+
+### `#current` composes instead
+
+`#current` is the one exception, and the difference is deliberate. A token *names*
+a color, so fading it sets its alpha. `currentcolor` is the color an element
+**inherits**, which an ancestor may already have faded — `#current.4` means "40%
+of what reaches me":
+
+```jsx
+fill: '#current.4';
+// → color-mix(in oklab, currentcolor 40%, transparent)
+```
+
+So a `#current` fade nested inside another one composes: a label at `#current.4`
+with a fill of `#current.18` under it lands at `.072`. Color ramps built on
+`#current` depend on that — replacing would double the opacity of every nested
+step. Because a `color-mix()` percentage cannot be a `<number>`, an opacity
+custom property used as `#current.$fade` must hold a unitless number; a token
+accepts either form.
+
+The space is always `oklch`, whatever [`colorSpace`](configuration.md#color-space)
+is set to: it is unbounded, so a wide-gamut color survives a round trip that a
+gamut-limited space would clamp.
+
+---
+
+## CSS Color Functions
+
+Every CSS color function is recognized as a color, so it lands in the color slot
+of whichever style property you use it in — and tokens inside it are expanded:
+
+```jsx
+fill: 'color-mix(in oklab, #primary 50%, #surface)',
+color: 'light-dark(#dark, #light)',
+color: 'contrast-color(#primary)',
+fill: 'color(display-p3 1 .5 0)',
+border: '1bw solid oklch(from #primary l c h / 50%)',  // relative color syntax
+shadow: '0 0 1x color-mix(in oklab, #dark 20%, transparent)',
+```
+
+`light-dark()` is the one exception to "always a color": CSS lets it pick between
+values of any type, so it is treated as a color only when its arguments are
+colors. `padding: 'light-dark(1x, 2x)'` still reaches the padding slot.
+
+A color token defined as one of these functions takes the
+[opacity suffix](#color-tokens--opacity) like any other:
+
+```jsx
+const Card = tasty({
+  styles: {
+    '#brand': 'color-mix(in oklab, #primary 50%, #surface)',
+    fill: '#brand.5',
+  },
+});
+```
+
+A [replace token](configuration.md#replace-tokens-parse-time-substitution) is
+substituted while parsing, so its color is right there to fade in place. A
+channel function takes the alpha after a slash; a derived function has no alpha
+channel, so it gets wrapped:
+
+```jsx
+configure({
+  replaceTokens: {
+    '#solid': 'hsl(220 90% 50%)',
+    '#adaptive': 'light-dark(#dark, #light)',
+  },
+});
+
+fill: '#solid.5';     // → hsl(220 90% 50% / .5)
+fill: '#adaptive.5';  // → oklch(from light-dark(…) l c h / .5)
+```
+
 ---
 
 ## Built-in Units

package/docs/styles.md

@@ -254,6 +254,7 @@ Background color with design token support. Preferred over `backgroundColor` and
 | `"#purple.10"` | Token color at 10% opacity |
 | `"#surface #primary.10"` | Background `#surface` with `#primary.10` overlay (two colors enable smooth transitions between both) |
 | `"rgb(255 128 0)"` | CSS color value |
+| `"color-mix(in oklab, #primary 50%, #surface)"` | CSS color function — see [CSS Color Functions](dsl.md#css-color-functions) |
 | `true` | Default fill color |
 
 When two colors are provided, the first sets the background color and the second is applied as an overlay gradient layer. This enables independent CSS transitions on each color. The overlay is only applied when no explicit `image` or `backgroundImage` is set.
@@ -286,9 +287,10 @@ Text color with design token support.
 | `"#current"` | Current inherited color |
 | `"#current.5"` | Current inherited color at 50% opacity |
 | `"(#primary, #secondary)"` | Fallback: use `#primary`, fall back to `#secondary` |
+| `"light-dark(#dark, #light)"` | CSS color function — see [CSS Color Functions](dsl.md#css-color-functions) |
 | `true` | `currentColor` |
 
-When set to a named color token, also sets `$current-color` and `$current-color-{colorSpace}` custom properties for downstream use (suffix depends on the configured `colorSpace`, default `oklch`).
+When set to a named color token, also sets `$current-color` and `$current-color-{colorSpace}` custom properties for downstream use (suffix depends on the configured `colorSpace`, default `oklch`). An opacity suffix does not move the companion: `color="#purple.5"` still reports `#purple`'s channels, since components carry no alpha.
 
 ### `svgFill`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/tasty",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
   "type": "module",
   "main": "./dist/index.js",
@@ -158,39 +158,39 @@
     "@types/babel__helper-plugin-utils": "^7.10.3",
     "@types/node": "^25.3.2",
     "@types/react": "^19.0.0",
+    "@vitest/browser-playwright": "^4.1.10",
     "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.8",
-    "happy-dom": "^20.9.0",
     "jiti": "^2.6.1",
-    "jsdom": "^29.0.2",
     "knip": "^5.61.3",
     "next": "^16.0.0",
+    "playwright": "^1.62.1",
     "prettier": "^3.8.1",
     "react": "^19.0.0",
     "size-limit": "^12.0.0",
     "tsdown": "^0.22.0",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.56.0",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.10"
   },
   "size-limit": [
     {
       "name": "main (import *)",
       "path": "dist/index.js",
       "import": "*",
-      "limit": "57 kB"
+      "limit": "58 kB"
     },
     {
       "name": "core (import *)",
       "path": "dist/core/index.js",
       "import": "*",
-      "limit": "54 kB"
+      "limit": "55 kB"
     },
     {
       "name": "static",
       "path": "dist/static/index.js",
       "import": "*",
-      "limit": "18.5 kB"
+      "limit": "19.25 kB"
     },
     {
       "name": "zero",
@@ -201,7 +201,7 @@
         "path",
         "crypto"
       ],
-      "limit": "33 kB"
+      "limit": "33.75 kB"
     },
     {
       "name": "babel-plugin",
@@ -212,12 +212,15 @@
         "path",
         "crypto"
       ],
-      "limit": "50.5 kB"
+      "limit": "51.25 kB"
     }
   ],
   "scripts": {
     "build": "tsdown",
     "test": "vitest run",
+    "test:node": "vitest run --project node",
+    "test:browser": "vitest run --project browser",
+    "test:setup": "playwright install chromium",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "typecheck": "tsc --noEmit",
@@ -226,7 +229,8 @@
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
     "size": "size-limit",
-    "bench": "vitest bench",
+    "bench": "vitest bench --project node",
+    "bench:browser": "vitest bench --project browser",
     "changeset": "changeset",
     "version": "changeset version",
     "release": "changeset publish",