@fusion.dev/helix-docs 0.217.0 → 0.219.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/content/building-on-the-headless-tier.mdx +5 -3
  2. package/content/color.mdx +1 -1
  3. package/content/metrics.mdx +257 -256
  4. package/content/shape-and-borders.mdx +1 -1
  5. package/content/surfaces-and-separation.mdx +8 -4
  6. package/dist/sources.generated.js +272 -265
  7. package/package.json +12 -12
package/content/shape-and-borders.mdx CHANGED
@@ -68,7 +68,7 @@ does not change them.
68
68
  | `--helix-border-thin` | `1px` |
69
69
  | `--helix-border-thick` | `2px` |
70
70
  | `--helix-border-surface` | `var(--helix-border-thin)` |
71
- | `--helix-border-floating` | `0` |
71
+ | `--helix-border-floating` | `var(--helix-border-thin)` |
72
72
 
73
73
  [//]: # (/tokens)
74
74
 
package/content/surfaces-and-separation.mdx CHANGED
@@ -34,11 +34,15 @@ Helix sets the choice with two pairs of policy tokens:
34
34
  | --- | --- | --- |
35
35
  | `--helix-border-surface` | `var(--helix-border-thin)` | The border of a surface in the page flow. Set it to zero to separate surfaces with shadows. |
36
36
  | `--helix-shadow-surface` | `var(--helix-shadow-none)` | The shadow of a surface in the page flow. Set it to none to separate surfaces with borders. |
37
- | `--helix-border-floating` | `0` | The border of a surface that floats over content. |
37
+ | `--helix-border-floating` | `var(--helix-border-thin)` | The border of a surface that floats over content. Set it to zero to separate floating surfaces by their shadow alone. |
38
38
  | `--helix-shadow-floating` | `var(--helix-shadow-lg)` | The shadow of a surface that floats over content. |
39
39
 
40
40
  [//]: # (/tokens)
41
41
 
42
+ A floating surface draws a hairline edge and a shadow by default. A shadow is
43
+ ink darker than the ground it falls on, so over a dark page it does not show,
44
+ and the edge keeps a menu or a popover apart from what it opened over.
45
+
42
46
  To make every component shadow-first, set the border pair to zero and give the
43
47
  shadow pair a value. Reverse them to go border-first. Every Helix surface reads
44
48
  both pairs, and this is checked. A surface that reads only one pair is easy to
@@ -56,7 +60,7 @@ A surface's ground color token names where the surface sits:
56
60
  | `--helix-color-background` | <span data-token-swatch style={{ background: 'var(--helix-color-background)' }} /> | The page background. Every other surface sits on it. |
57
61
  | `--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. |
58
62
  | `--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. |
59
- | `--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 shadow sets it apart. |
63
+ | `--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. |
60
64
  | `--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. |
61
65
 
62
66
  [//]: # (/tokens)
@@ -64,8 +68,8 @@ A surface's ground color token names where the surface sits:
64
68
  **`raised` goes one step down the ramp.** A selected tab's pill, a hovered row,
65
69
  and an option under the pointer all have the page on every side. Only their
66
70
  fill separates them, and on a white page a fill has to be a step darker to be
67
- seen. `overlay` works the other way. Its shadow and what it covers separate it,
68
- so on a white page it is white.
71
+ seen. `overlay` works the other way. Its edge and its shadow separate it, so on
72
+ a white page it is white.
69
73
 
70
74
  ## Using the page color inside a component
71
75