@tenphi/tasty 3.3.0 → 3.3.1

package/dist/ssr/index.js

@@ -1,7 +1,7 @@
-import { a as registerSSRCollectorGetterGlobal } from "../format-rules-Co21uwA3.js";
-import { n as createServerStyleCollector, t as ServerStyleCollector } from "../collector-BNQJyxFh.js";
+import { a as registerSSRCollectorGetterGlobal } from "../format-rules-Bo_e2u7r.js";
+import { n as createServerStyleCollector, t as ServerStyleCollector } from "../collector-BKqNBmzA.js";
 import { n as runWithCollector, t as getSSRCollector } from "../async-storage-DKK-wTD4.js";
-import { t as hydrateTastyClasses } from "../hydrate-D38TyhAG.js";
+import { t as hydrateTastyClasses } from "../hydrate-CMKOuKAx.js";
 //#region src/ssr/index.ts
 registerSSRCollectorGetterGlobal(getSSRCollector);
 //#endregion

package/dist/ssr/next.js

@@ -1,9 +1,9 @@
 "use client";
-import { n as getConfig } from "../config-zkrtb424.js";
-import { i as registerSSRCollectorGetter } from "../format-rules-Co21uwA3.js";
+import { n as getConfig } from "../config-BCdCTIED.js";
+import { i as registerSSRCollectorGetter } from "../format-rules-Bo_e2u7r.js";
 import { t as getTastySSRContext } from "../context-CA8YKeMn.js";
-import { t as ServerStyleCollector } from "../collector-BNQJyxFh.js";
-import { t as hydrateTastyClasses } from "../hydrate-D38TyhAG.js";
+import { t as ServerStyleCollector } from "../collector-BKqNBmzA.js";
+import { t as hydrateTastyClasses } from "../hydrate-CMKOuKAx.js";
 import { Fragment, createElement, useState } from "react";
 import { useServerInsertedHTML } from "next/navigation";
 //#region src/ssr/next.ts

package/dist/static/index.js

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

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-zkrtb424.js";
-import { t as mergeStyles } from "../merge-styles-CFwtEHzv.js";
-import { t as resolveRecipes } from "../resolve-recipes-B8pIVinB.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-B-SvwNbq.js";
+import { b as resetConfig, d as getGlobalStyles, i as getGlobalConfigTokens, s as getGlobalFunctions, t as configure } from "../config-BCdCTIED.js";
+import { t as mergeStyles } from "../merge-styles-CUIQcs5v.js";
+import { t as resolveRecipes } from "../resolve-recipes-Df1Ta-Q0.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-D64NY9AX.js";
 import * as fs from "fs";
 import * as path from "path";
 import { declare } from "@babel/helper-plugin-utils";

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-B-SvwNbq.js";
+import { c as extractStylesForSelector, l as extractStylesWithChunks, n as createCSSWriter, t as CSSWriter } from "../css-writer-D64NY9AX.js";
 export { CSSWriter, createCSSWriter, extractStylesForSelector, extractStylesWithChunks };

package/docs/dsl.md

@@ -134,7 +134,7 @@ color: '#purple',           // Full opacity
 color: '#purple.5',         // 50% opacity
 color: '#purple.05',        // 5% opacity
 color: '#purple.$fade',     // Opacity from a custom property
-fill: '#current',           // → var(--current-color)
+fill: '#current',           // → currentcolor
 color: '(#primary, #secondary)',  // Fallback syntax
 ```
 
@@ -163,27 +163,40 @@ Two properties follow from writing the alpha slot rather than compositing:
   `/ var(--fade)` unchanged, so it works whether `$fade` holds `.5` or `50%` —
   which is what `--*-opacity` properties are registered to accept.
 
-### Why `#current` is a variable
+### `#current` is the keyword
 
-`#current` emits `var(--current-color)`, not the `currentcolor` keyword. The
-`color` style publishes `--current-color` alongside every color it sets, and the
-property is registered with `initial-value: currentcolor` — so where nothing has
-published it, the variable resolves against each element's own inherited color
-and is indistinguishable from the keyword.
+`#current` emits the `currentcolor` keyword, so it resolves against the element
+that reads it. That is what lets it follow a color an ancestor faded — a ramp
+that expresses its disabled state once, in `color`, fades everything painted from
+`#current` below it with no further declarations.
 
-The difference shows when a token is *defined* as `#current` and then faded:
+The `color` style also publishes `--current-color` beside every color it sets,
+for anything that needs the inherited color *as a color* rather than as the
+keyword — hand-authored CSS, or a place the keyword will not do. Read it as
+`$current-color`. It is registered with `initial-value: currentcolor`, so where
+nothing published it, it still resolves against each element's own color:
+
+```jsx
+fill: '$current-color'; // → var(--current-color)
+```
+
+A color that already reads the color it inherits — `#current`, a `#current` fade
+— is not published into it: resolving such a value a second time at a descendant
+would fade it twice.
+
+One case needs the wider floor to be considered. A token *defined* as `#current`
+and then faded gives relative color syntax a `currentcolor` origin, which Safari
+supports only from 18:
 
 ```jsx
 { '#ink': '#current', fill: '#ink.5' }
-// --ink-color: var(--current-color)  → a concrete color where one was published
-// fill: oklch(from var(--ink-color) l c h / .5)
+// --ink-color: currentcolor
+// fill: oklch(from currentcolor l c h / .5)  → Chrome, Firefox, Safari 18+
 ```
 
-Relative color syntax accepts a concrete origin from Safari 16.4, while
-`oklch(from currentcolor …)` needs Safari 18. Resolving through the variable is
-what keeps that token fadeable on the wider floor. Where no `color` style
-published the variable, the origin is the keyword again and the Safari 18 floor
-applies to that case alone.
+Put the fade in the token instead — `{ '#ink': '#current.5' }` — and it goes
+through `color-mix()`, which works from Safari 16.2 and composes like every other
+`#current` fade.
 
 ### `#current` composes instead
 

package/docs/styles.md

@@ -290,12 +290,14 @@ Text color with design token support.
 | `"light-dark(#dark, #light)"` | CSS color function — see [CSS Color Functions](dsl.md#css-color-functions) |
 | `true` | `currentColor` |
 
-Also sets `$current-color` to the same color, which is what `#current` resolves
-through. Every color publishes it, not just a named token, so a descendant's
-`#current` always reads the nearest `color` rather than the nearest *token*
-color. A value that already reads the inherited color — `#current` itself, a
-`#current` fade, a bare `currentColor` — is not republished: that would be a
-self-reference, or would resolve a second time one level down.
+Also sets `$current-color` to the same color, for anything that needs the
+inherited color as a color rather than as the `currentcolor` keyword. Every color
+publishes it, not just a named token, so a reader below always takes the nearest
+`color` rather than the nearest *token* color. A value that already reads the
+inherited color — `#current` itself, a `#current` fade, a bare `currentColor` —
+is not republished: resolving it a second time one level down would fade it
+twice, and the variable into itself is a self-reference. `#current` does not go
+through it; it is the keyword.
 
 ### `svgFill`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/tasty",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
   "type": "module",
   "main": "./dist/index.js",