@tenphi/cookbook 0.31.2 → 0.31.3

package/docs/upstream/manifest.json

@@ -1,10 +1,10 @@
 [
   {
     "name": "@tenphi/tasty",
-    "version": "3.16.0",
+    "version": "3.17.0",
     "license": "MIT",
     "repository": "https://github.com/tenphi/tasty",
-    "ref": "v3.16.0",
+    "ref": "v3.17.0",
     "directory": "upstream/tasty"
   },
   {

package/docs/upstream/tasty/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="https://raw.githubusercontent.com/tenphi/tasty/v3.16.0/assets/tasty.svg" width="128" height="128" alt="Tasty logo" />
+  <img src="https://raw.githubusercontent.com/tenphi/tasty/v3.17.0/assets/tasty.svg" width="128" height="128" alt="Tasty logo" />
 </p>
 
 <h1 align="center">Tasty</h1>
@@ -548,7 +548,7 @@ Covered in [Types and Linting](#eslint-and-oxlint): 40+ rules for ESLint 9+ and
 [Tasty for VS Code](https://github.com/tenphi/tasty-vscode-extension) highlights color tokens, units, state keys, presets, and style properties inside `tasty()`, `tastyStatic()`, `styles` objects, and style functions, and adds snippets for components, state maps, and `configure()`. Install the `.vsix` from the [latest release](https://github.com/tenphi/tasty-vscode-extension/releases/latest).
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/tenphi/tasty/v3.16.0/assets/tasty-vscode-highlight.png" width="512" alt="Tasty VS Code syntax highlighting example" />
+  <img src="https://raw.githubusercontent.com/tenphi/tasty/v3.17.0/assets/tasty-vscode-highlight.png" width="512" alt="Tasty VS Code syntax highlighting example" />
 </p>
 
 ### Glaze

package/docs/upstream/tasty/docs/ai-agents.md

@@ -135,7 +135,7 @@ Directional modifiers beat placeholder zeros:
 - ❌ `padding: '2x 4x top right'` — a directional group takes one value, so `4x` is dropped → ✅ `padding: '2x top, 4x right'`
 - ❌ `fade: '3x 1x top bottom'` → ✅ `fade: '3x top, 1x bottom'`
 
-Value-only properties reject both colors and modifiers: `gap`, `columnGap`, `rowGap`, `opacity`, `zIndex`, `order`, `flexGrow`, `flexShrink`, `flexBasis`, `aspectRatio`, `lineClamp`, and `tabSize`. Logical axis category styles accept one or two values in start/end order and the `start`, `end`, and `longhand` modifiers. `fill`, `color`, `caretColor`, and `accentColor` take a color only (use `#clear` for transparent). An overlay is a compound color, in any color slot: ❌ `fill: '#surface #dark.04'` (deprecated overlay layer) · ❌ `fill: '#dark.04, #surface'` (half-transparent mix) → ✅ `fill: '#surface+#dark.04'`. Write it as one word, with no spaces around `+`. Every layer after the first needs an opacity suffix, and its token must be opaque: a translucent layer token, or one that is `#clear` in some state, leaves the result see-through, so vary the suffix (`#surface+#dark.$hover`) or the whole compound per state instead. `fill` also mixes two colors with a comma, the weight as a percentage: `'#dark 4%, #surface'`.
+Value-only properties reject both colors and modifiers: `gap`, `columnGap`, `rowGap`, `opacity`, `zIndex`, `order`, `flexGrow`, `flexShrink`, `flexBasis`, `aspectRatio`, `lineClamp`, and `tabSize`. Logical axis category styles accept one or two values in start/end order and the `start`, `end`, and `longhand` modifiers. `fill`, `color`, `caretColor`, and `accentColor` take a color only (use `#clear` for transparent). An overlay is a compound color, in any color slot: ❌ `fill: '#surface #dark.04'` (deprecated overlay layer) · ❌ `fill: '#dark.04, #surface'` (half-transparent mix) → ✅ `fill: '#surface+#dark.04'`. Write it as one word, with no spaces around `+`. Every layer after the first needs an opacity suffix, and its token must be opaque: a translucent layer token, or one that is `#clear` in some state, leaves the result see-through, so vary the suffix (`#surface+#dark.$hover`) or the whole compound per state instead. A comma mix in `fill` is deprecated too: ❌ `fill: '#dark 4%, #surface'` → ✅ `fill: '#surface+#dark.04'`. For any other mix, write `color-mix()` itself: ✅ `fill: 'color-mix(in srgb, #dark $weight, #surface)'`.
 
 ### `transition`
 

package/docs/upstream/tasty/docs/styles.md

@@ -303,14 +303,13 @@ Avoid setting physical and logical declarations that resolve to the same edge in
 
 Background color with design token support. Preferred over `backgroundColor` and `background`.
 
-**Syntax:** `[color]`, or two colors mixed with a comma: `[color] [weight%], [color]`
+**Syntax:** `[color]`
 
 | Value | Effect |
 |-------|--------|
 | `"#purple"` | Token-based background color |
 | `"#purple.10"` | Token color at 10% opacity |
 | `"#surface+#dark.04"` | `#dark` at 4% opacity over `#surface`, as one color — see [Compound colors](dsl.md#compound-colors) |
-| `"#dark 4%, #surface"` | `#dark` mixed into `#surface` at 4% — the same color, written as `color-mix()` arguments |
 | `"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) |
 
@@ -325,29 +324,12 @@ fill: { '': '#surface', hovered: '#surface+#dark.04', pressed: '#surface+#dark.0
 
 The overlay token has to be opaque, with its opacity in the suffix: a translucent
 token, or one that turns `#clear` in some state, leaves the background
-see-through.
-
-#### Mixing two colors
-
-A comma between two colors mixes them into one:
-
-```jsx
-fill: '#dark 4%, #surface'
-// → background-color: color-mix(in srgb, var(--dark-color) 4%, var(--surface-color));
-```
-
-The comma-separated parts are the arguments of `color-mix()`, as written, mixed in sRGB: the space browsers composite layers in. When the weighted color is opaque, the mix is exactly what drawing it at that opacity over the other color shows. And because it is one `background-color`:
+see-through. Because the result is one `background-color`:
 
 - contrast checkers such as axe-core and Lighthouse can read it;
 - it transitions and animates between states like any other color;
 - an `image` on the same element stays the only `background-image` layer.
 
-The weight can come from a token or an expression: `'#dark $hover-weight, #surface'`, `'#dark ($hover * 100%), #surface'`.
-
-Give the weight as a percentage, not as an opacity. A color without a percentage takes half the weight, and its own alpha weighs it down again, so the mix comes out see-through: `'#dark.04, #surface'` is 52% opaque, not `#dark` at 4% over `#surface`. In development Tasty warns about a `#name.N` or `#clear` part without a percentage. It can't see into a token, though, so a token holding a translucent color mixes the same way with no warning: keep the token opaque and put its weight in the percentage.
-
-A mix takes two colors. Any more are ignored, with a development warning.
-
 #### Two colors separated by a space (deprecated)
 
 `fill: '#surface #dark.04'` paints the first color as `background-color` and the second as a `linear-gradient()` layer over it, through the `--tasty-second-fill-color` custom property. It still works, with a development warning, and is going away in the next major version: contrast checkers can't see through a `background-image`, so axe-core reports every text node over the layer as *incomplete*.
@@ -365,6 +347,20 @@ The rewrites are exact when the overlay token is opaque. A state map no longer n
 
 If an overlay has to stay a translucent token, draw the layer yourself with `fill: '#base', image: 'linear-gradient(#overlay, #overlay)'`. Contrast checkers can't read that either.
 
+#### Two colors mixed with a comma (deprecated)
+
+`fill: '#dark 4%, #surface'` mixes the two colors in sRGB, as the arguments of `color-mix()`: `color-mix(in srgb, var(--dark-color) 4%, var(--surface-color))`. It still works, with a development warning, and is going away in the next major version. A compound color is the same mix, in every color slot, and `color-mix()` itself covers what a compound can't write. `tasty/prefer-fill-mix` in [`@tenphi/eslint-plugin-tasty`](https://github.com/tenphi/eslint-plugin-tasty) rewrites each mix to the same color.
+
+| Before | After |
+|--------|-------|
+| `'#dark 4%, #surface'`, `'#surface, #dark 4%'` | `'#surface+#dark.04'` |
+| `'#accent 10%, #surface+#dark.04'` | `'#surface+#dark.04+#accent.1'` |
+| `'#dark $hover-weight, #surface'` (a percentage) | `'#surface+#dark.$hover-alpha'`, with `$hover-alpha` the opacity as a number — or `'color-mix(in srgb, #dark $hover-weight, #surface)'` |
+| `'#dark, #surface'`, `'rgb(0 0 0) 4%, #surface'`, and any other mix | `'color-mix(in srgb, #dark, #surface)'` — the same parts, in `color-mix()` |
+| `'#dark.04, #surface'` (a translucent part without a percentage) | `'#surface+#dark.04'` |
+
+Every rewrite but the last row's is the same color. `'#dark.04, #surface'` mixed a translucent color in by half and came out 52% opaque, so its rewrite paints what it was most likely meant to: `#dark` at 4% over `#surface`.
+
 There is no default fill color, so `fill: true` is ignored with a development warning. Use `false` for no fill.
 
 **Related deprecated props:** `backgroundColor` (use `fill`), `background` (overrides all background props when set — avoid).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/cookbook",
-  "version": "0.31.2",
+  "version": "0.31.3",
   "description": "Repository-native static documentation for Astro",
   "type": "module",
   "keywords": [
@@ -68,8 +68,8 @@
   "author": "Andrey Yamanov",
   "license": "MIT",
   "dependencies": {
-    "@tenphi/docs": "0.31.2",
-    "@tenphi/renderer": "0.31.2"
+    "@tenphi/docs": "0.31.3",
+    "@tenphi/renderer": "0.31.3"
   },
   "peerDependencies": {
     "astro": "^7.3.2"