@fusion.dev/helix-docs 0.228.0 → 0.229.0

package/content/color.mdx

@@ -24,9 +24,9 @@ The surfaces above it form an ordered ladder:
 | --- | --- | --- |
 | `--helix-color-background` | <span data-token-swatch style={{ background: 'var(--helix-color-background)' }} /> | The page background. Every other surface sits on it. |
 | `--helix-color-surface` | <span data-token-swatch style={{ background: 'var(--helix-color-surface)' }} /> | A surface on the page, such as a card or a panel. The separation policy sets it apart with a fill, a border, or a shadow. |
-| `--helix-color-surface-raised` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-raised)' }} /> | A raised surface on the page, such as a selected tab or a hovered row. Its fill is one step down the ramp. |
+| `--helix-color-surface-raised` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-raised)' }} /> | A panel raised inside a surface, such as a card inside a card. Its fill is one step down the ramp. |
 | `--helix-color-surface-overlay` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-overlay)' }} /> | A surface over the page, such as a menu, a popover, or a dialog. Its edge and its shadow set it apart. |
-| `--helix-color-surface-sunken` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-sunken)' }} /> | A recessed surface that holds a value, such as an input, a track, or a groove. Its fill sets it apart. |
+| `--helix-color-surface-sunken` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-sunken)' }} /> | A recessed surface, such as a track or a groove. Its fill sets it apart. A field reads `well`. |
 
 [//]: # (/tokens)
 
@@ -47,7 +47,8 @@ Inks are the colors that go on grounds. The base ink is `foreground`.
   placeholder, a hint, or a caption. The engine solves it to the contrast
   target.
 - `foreground-subtle` recedes further. It is for marks that are not text, such
-  as a separator, a chevron, or a grip, and for the text of a disabled control.
+  as a separator, a chevron, or a grip. A disabled control fades whole, through
+  `--helix-opacity-disabled`.
   It is a fixed step of the gray ramp, and the engine does not solve it, so its
   contrast is not guaranteed. Use `foreground-muted` for text that is read.
 - Text on a filled color takes the ink named for that fill:
@@ -139,7 +140,7 @@ readable grays has room for one quiet ink, and `foreground-muted` is that ink, s
 `foreground-subtle` stays a fixed step of the stylesheet's gray ramp and its
 contrast is not guaranteed. A component paints its quiet text in
 `foreground-muted`, and keeps `foreground-subtle` for marks that are not text and
-for the text of a disabled control.
+for a mark that recedes.
 
 The engine can solve only the pairs it knows about, so we check two things:
 

package/content/elevation-and-material.mdx

@@ -53,6 +53,7 @@ for the cases the top layer does not cover:
 | `--helix-shadow-lg` | `0 12px 32px var(--_helix-shadow-ink-lg)` |
 | `--helix-shadow-surface` | `var(--helix-shadow-none)` |
 | `--helix-shadow-floating` | `var(--helix-shadow-lg)` |
+| `--helix-shadow-raised` | `var(--helix-shadow-floating)` |
 
 [//]: # (/tokens)
 
@@ -62,19 +63,21 @@ separation](./surfaces-and-separation).
 
 ## Material
 
-Eight tokens describe translucency:
+Ten tokens describe translucency:
 
 [//]: # (tokens:material)
 
 | Token | Value | For |
 | --- | --- | --- |
-| `--helix-material-backdrop` | `blur(var(--helix-material-blur-md)) saturate(1.5)` | The tint behind a modal. |
+| `--helix-material-backdrop` | `blur(var(--helix-material-blur-md)) saturate(1.5)` | The blur and saturation behind a translucent surface. |
 | `--helix-material-opacity` | `1` | How opaque a translucent surface is. |
 | `--helix-material-blur-sm` | `8px` | The lightest backdrop blur. |
 | `--helix-material-blur-md` | `16px` | The backdrop blur behind a modal. |
 | `--helix-material-blur-lg` | `32px` | The heaviest backdrop blur. |
-| `--helix-material-translucent` | `color-mix(in oklab, light-dark(oklch(1 0 0), oklch(0.182 var(--helix-seed-neutral-chroma, 0) var(--helix-seed-neutral-hue, 258))) 30%, transparent)` | The translucent background, for a surface that shows what is behind it. |
+| `--helix-material-translucent` | `light-dark(color-mix(in oklab, oklch(1 0 0) 30%, transparent), color-mix(in oklab, oklch(0.182 var(--helix-seed-neutral-chroma, 0) var(--helix-seed-neutral-hue, 258)) 60%, transparent))` | The translucent background, for a surface that shows what is behind it. |
 | `--helix-material-translucent-strong` | `color-mix(in oklab, light-dark(oklch(1 0 0), oklch(0.182 var(--helix-seed-neutral-chroma, 0) var(--helix-seed-neutral-hue, 258))) 88%, transparent)` | The stronger translucent background, for a surface that shows less of what is behind it. |
+| `--helix-material-modal` | `light-dark(var(--helix-material-translucent-strong), var(--helix-material-translucent))` | The glass of a Dialog or Drawer, which sits over its own scrim. |
+| `--helix-material-panel` | `light-dark(color-mix(in oklab, oklch(1 0 0) 72%, transparent), var(--helix-material-translucent))` | The glass of a panel over the page, such as a Menu, Popover, or Tooltip. |
 | `--helix-material-border` | `light-dark(color-mix(in oklab, oklch(0.15 var(--helix-seed-neutral-chroma, 0) var(--helix-seed-neutral-hue, 258)) 14%, transparent), color-mix(in oklab, oklch(1 0 0) 12%, transparent))` | The border a translucent surface needs to keep a visible edge. |
 
 [//]: # (/tokens)