@codenhub/styles 0.4.0 → 0.6.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.
- package/README.md +7 -7
- package/dist/aesthetics/chunky-tile.css +1 -1
- package/dist/aesthetics/cyber.css +1 -1
- package/dist/aesthetics/glass.css +1 -1
- package/dist/aesthetics/index.css +1 -1
- package/dist/aesthetics/neobrutalism.css +1 -1
- package/dist/aesthetics/pixel.css +1 -1
- package/dist/aesthetics/sketch.css +1 -0
- package/dist/components.css +1 -1
- package/dist/index.css +1 -1
- package/dist/native.css +1 -1
- package/dist/palette.css +1 -1
- package/dist/theme.css +1 -1
- package/dist/tw/aesthetics/chunky-tile.css +144 -128
- package/dist/tw/aesthetics/cyber.css +138 -96
- package/dist/tw/aesthetics/glass.css +332 -66
- package/dist/tw/aesthetics/index.css +3 -1
- package/dist/tw/aesthetics/neobrutalism.css +113 -54
- package/dist/tw/aesthetics/pixel.css +137 -87
- package/dist/tw/aesthetics/sketch.css +333 -0
- package/dist/tw/box.css +139 -52
- package/dist/tw/components/button.css +67 -28
- package/dist/tw/components/feedback.css +85 -67
- package/dist/tw/components/form.css +300 -230
- package/dist/tw/components/index.css +17 -9
- package/dist/tw/components/loader.css +38 -30
- package/dist/tw/components/surface.css +89 -129
- package/dist/tw/components/tooltip.css +91 -47
- package/dist/tw/corner.css +26 -0
- package/dist/tw/elevation.css +19 -28
- package/dist/tw/index.css +15 -19
- package/dist/tw/intent.css +47 -32
- package/dist/tw/native.css +58 -42
- package/dist/tw/palette.css +455 -446
- package/dist/tw/presentation.css +20 -29
- package/dist/tw/reset.css +21 -28
- package/dist/tw/surface.css +61 -0
- package/dist/tw/theme.css +156 -153
- package/dist/tw/utilities/content.css +283 -205
- package/dist/tw/utilities/layout.css +17 -27
- package/docs/accessibility.md +63 -46
- package/docs/changelog/0.5.0.md +38 -0
- package/docs/changelog/0.6.0.md +52 -0
- package/docs/changelog/index.md +2 -0
- package/docs/concepts.md +6 -6
- package/docs/index.md +12 -3
- package/docs/integrating/nextjs.md +1 -1
- package/docs/integrating/tailwind.md +14 -6
- package/docs/setup.md +28 -8
- package/docs/usage/aesthetics.md +88 -18
- package/docs/usage/buttons.md +14 -14
- package/docs/usage/composing.md +12 -12
- package/docs/usage/content-and-layout.md +25 -24
- package/docs/usage/customizing.md +92 -55
- package/docs/usage/feedback.md +5 -3
- package/docs/usage/forms.md +61 -45
- package/docs/usage/theming.md +41 -42
- package/docs/usage/tooltips.md +37 -17
- package/llms-full.txt +590 -304
- package/llms.txt +6 -0
- package/package.json +15 -5
|
@@ -20,7 +20,7 @@ Presentation tokens describe _how much_ of an intent a component shows, never _w
|
|
|
20
20
|
|
|
21
21
|
A component resolves them with `color-mix` from its published default. Hover is derived by adding `--hover-step` to the resting fill and using `--intent-hover`; there are no per-presentation hover tokens.
|
|
22
22
|
|
|
23
|
-
No fill class writes `--ui-border` and no edge class writes `--ui-fill`. A filled box with no line is `.solid.edgeless`,
|
|
23
|
+
No fill class writes `--ui-border` and no edge class writes `--ui-fill`. A filled box with no line is `.solid.edgeless`, and `.solid.edged` renders the same box: the line fades out as the fill fills in, so even a neutral fill, capped and translucent, shows through its own border as one coat.
|
|
24
24
|
|
|
25
25
|
```css
|
|
26
26
|
background: color-mix(in oklab, var(--color-primary) var(--ui-fill, 100%), transparent);
|
|
@@ -38,41 +38,56 @@ Material tokens describe what a component is _made of_ rather than which intent
|
|
|
38
38
|
|
|
39
39
|
Components read each with a fallback, so leaving them unset produces the default look. Setting them on a container restyles the whole subtree. Only shadow geometry is split into colorless parts that inherit safely; color-capable inputs such as `--ui-ink` and `--ui-surface-shadow` may include their own colors.
|
|
40
40
|
|
|
41
|
-
| Token
|
|
42
|
-
|
|
|
43
|
-
| `--ui-
|
|
44
|
-
| `--ui-
|
|
45
|
-
| `--ui-corner-
|
|
46
|
-
| `--ui-radius
|
|
47
|
-
| `--ui-radius-
|
|
48
|
-
| `--ui-
|
|
49
|
-
| `--ui-
|
|
50
|
-
| `--ui-
|
|
51
|
-
| `--ui-
|
|
52
|
-
| `--ui-
|
|
53
|
-
| `--ui-
|
|
54
|
-
| `--ui-
|
|
55
|
-
| `--ui-
|
|
56
|
-
| `--ui-
|
|
57
|
-
| `--ui-
|
|
58
|
-
| `--ui-
|
|
59
|
-
| `--ui-
|
|
60
|
-
| `--ui-
|
|
61
|
-
| `--ui-
|
|
62
|
-
| `--ui-shadow-
|
|
63
|
-
| `--ui-shadow-
|
|
64
|
-
| `--ui-
|
|
65
|
-
| `--ui-
|
|
66
|
-
| `--ui-
|
|
67
|
-
| `--ui-
|
|
68
|
-
| `--ui-
|
|
69
|
-
| `--ui-
|
|
70
|
-
| `--ui-
|
|
71
|
-
| `--ui-
|
|
72
|
-
| `--ui-
|
|
41
|
+
| Token | Purpose | Fallback |
|
|
42
|
+
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
|
|
43
|
+
| `--ui-corner` | Control corner at the default size; scaled by the size step. | `--radius-control` |
|
|
44
|
+
| `--ui-corner-surface` | Surface corner at the default padding; scaled by the size step. | `--radius-surface` |
|
|
45
|
+
| `--ui-corner-tl` | `0` or `1`: whether the top-left takes the corner. `-tr`, `-br`, and `-bl` for the others. | `1` |
|
|
46
|
+
| `--ui-radius` | A complete control radius, used as written: overrides the corner, the step, and the pattern. | Computed from the corner |
|
|
47
|
+
| `--ui-radius-surface` | A complete surface radius, used as written. | Computed from the corner |
|
|
48
|
+
| `--ui-scale` | Overrides the size step the size and padding classes set. | The step |
|
|
49
|
+
| `--ui-corner-shape` | What every corner draws: `round`, or `bevel` for a straight cut. Chromium only today. | `round` |
|
|
50
|
+
| `--ui-radius-pill` | Corner for what is fully round by default: badges, switches, progress, the tooltip icon; `.btn.pill` and `.radio` read it with no fallback but full. | `--ui-radius`, `--ui-corner`, then full |
|
|
51
|
+
| `--ui-radius-tight` | Complete radius for chips -- checkbox, `.kbd`, `.code` -- when set; otherwise a small computed default. | `min(--ui-radius or --ui-corner, small)` |
|
|
52
|
+
| `--ui-line-style` | Style of every line a component draws: `solid`, `dashed`, `dotted`, or `double` (3px wide or more). | `solid` |
|
|
53
|
+
| `--ui-border-width` | Edge thickness. | `--border-width` |
|
|
54
|
+
| `--ui-border-max` | Ceiling on computed edge width. | `100px` |
|
|
55
|
+
| `--ui-ink` | Neutral line color when no intent is set. | `--color-border` |
|
|
56
|
+
| `--ui-control-ink` | Neutral line color of fields, selects, checkboxes, radios, and switches when no intent is set. | `--ui-ink`, then `--color-control-border` |
|
|
57
|
+
| `--ui-rule-ink` | Neutral line color of a table's frame and rules when no intent is set. | `--ui-ink`, then `--color-border` |
|
|
58
|
+
| `--ui-rule` | Lines inside a table. Unset draws the head and foot boundaries only; `0%` draws none; `100%` rules every row. | unset |
|
|
59
|
+
| `--ui-shadow-x` | Shadow horizontal offset. | `0px` |
|
|
60
|
+
| `--ui-shadow-y` | Shadow vertical offset. | `0px` |
|
|
61
|
+
| `--ui-shadow-blur` | Shadow blur radius. | `0px` |
|
|
62
|
+
| `--ui-shadow-spread` | Shadow spread radius. | `0px` |
|
|
63
|
+
| `--ui-shadow-inset` | The `inset` keyword for an inner ring. | Empty |
|
|
64
|
+
| `--ui-hover-shadow-x` | Shadow horizontal offset while hovered. | `--ui-shadow-x` |
|
|
65
|
+
| `--ui-hover-shadow-y` | Shadow vertical offset while hovered. | `--ui-shadow-y` |
|
|
66
|
+
| `--ui-active-shadow-x` | Shadow horizontal offset while pressed. | `--ui-shadow-x` |
|
|
67
|
+
| `--ui-active-shadow-y` | Shadow vertical offset while pressed. | `--ui-shadow-y` |
|
|
68
|
+
| `--ui-active-transform` | Transform while pressed. `none` under `prefers-reduced-motion`. | `scale(0.97)` |
|
|
69
|
+
| `--ui-active-translate-x` | Distance a press travels into the element's depth; `-y` beside it. Scaled like the shadow. | `0px` |
|
|
70
|
+
| `--ui-shadow-ink` | Percentage of shadow color taken from intent ink. | `0%` |
|
|
71
|
+
| `--ui-halo-blur` | Blur of a halo around the element; `--ui-halo-spread` beside it. Elevation does not scale it. | `0px` |
|
|
72
|
+
| `--ui-halo-ink` | The halo's share of the intent colour, over nothing. Unset, there is no halo. | Unset |
|
|
73
|
+
| `--ui-shadow-edge` | Declared, even empty, when the shadow is the element's edge rather than its depth. Read for presence. | Unset |
|
|
74
|
+
| `--ui-elevation` | Unitless multiplier over shadow geometry. | `1` |
|
|
75
|
+
| `--ui-surface-shadow` | Complete multi-layer shadow accepted by surfaces only. | Unset |
|
|
76
|
+
| `--ui-surface-ground` | Ground a surface, or a default or `.soft` table, sits on. | `--color-background` |
|
|
77
|
+
| `--ui-bg-alpha` | Multiplier over every fill, `.solid` included. No shipped aesthetic sets it. | `1` |
|
|
78
|
+
| `--ui-backdrop` | Backdrop filter accepted by surfaces, and by a default or `.soft` table, only. | `none` |
|
|
79
|
+
| `--ui-surface-image` | A painted layer over a surface's plate: any `background-image` value. Surfaces only. | `none` |
|
|
80
|
+
| `--ui-hover-transform` | Transform while an interactive element is hovered. | `none` |
|
|
81
|
+
| `--ui-clip` | Structural component silhouette. | `none` |
|
|
82
|
+
| `--ui-clip-tight` | Compact component silhouette. | `--ui-clip` |
|
|
83
|
+
| `--ui-focus-inset` | Inset focus layer width. | Unset |
|
|
84
|
+
| `--ui-label-weight` | Label weight of `.btn` (and, with `/native`, a bare `<button>`) and `.badge`. | Semibold on a button, bold on a badge |
|
|
85
|
+
| `--ui-label-tracking` | Label letter spacing. Unset, the label inherits it. | Unset |
|
|
86
|
+
| `--ui-label-case` | Label `text-transform`. | `none` on a button; inherited on a badge |
|
|
87
|
+
| `--ui-label-shadow` | Label `text-shadow`, written without a colour so it takes the label's own. | `none` on a button; inherited on a badge |
|
|
73
88
|
|
|
74
89
|
```html
|
|
75
|
-
<section style="--ui-
|
|
90
|
+
<section style="--ui-corner: 0; --ui-border-width: 3px">
|
|
76
91
|
<button class="btn primary">Square and heavy</button>
|
|
77
92
|
<input class="ipt" placeholder="Matches" />
|
|
78
93
|
</section>
|
|
@@ -80,13 +95,31 @@ Components read each with a fallback, so leaving them unset produces the default
|
|
|
80
95
|
|
|
81
96
|
> **Material token contract**: components read these; aesthetic classes and consumer overrides set them.
|
|
82
97
|
|
|
98
|
+
### Corner size and pattern
|
|
99
|
+
|
|
100
|
+
The corner scales with the element. `.p-xs` sets a size step of `0.5`, `.sm` and `.p-sm` `0.75`, and `.lg` and `.p-lg` `1.25`. When a size class and a padding class sit on one element, the smaller step wins, so `.lg.p-xs` is small. `box` multiplies `--ui-corner` by the step, so a small button takes a small corner and a bevel stays a true 45 degrees. Depth follows the step down but not up: a `.p-xs` button sits on half its aesthetic's shadow, and a `.lg` one on the whole of it. A press that travels into that depth, given as `--ui-active-translate-x` and `-y`, travels the same scaled distance, so it always lands flat.
|
|
101
|
+
|
|
102
|
+
Which corners take the corner is its own choice. `.cut-diagonal` keeps the top-left and bottom-right and squares the other two; `.cut-diagonal-reverse` keeps the other pair. Both set `--ui-corner-tl`, `-tr`, `-br`, and `-bl`, which you can also set yourself: a two-corner leaf on the default look, two cuts on a control under `.cyber`. A surface under `.cyber` keeps the aesthetic's own surface shape, which the pattern does not reach, and an explicit `--ui-radius` or `--ui-radius-surface` ignores the step and the pattern.
|
|
103
|
+
|
|
104
|
+
### Lines, layers, and labels
|
|
105
|
+
|
|
106
|
+
`--ui-line-style` reaches every line a component draws: the box's edge, the progress track, and dividers and table rules. `--ui-rule-style` optionally overrides just dividers and table rules, without changing the box edge; sketch uses it for dashed accents. A dashed or dotted line keeps its colour, so it keeps its contrast; `double` needs a width of 3px or more to draw two lines.
|
|
107
|
+
|
|
108
|
+
`--ui-halo-*` is light rather than depth -- a glow in the element's own intent colour -- so elevation does not scale it and `.flat` leaves it on. It appears only when its ink is set.
|
|
109
|
+
|
|
110
|
+
`--ui-surface-image` lays any `background-image` over a surface's plate: cards, panels, alerts, and tooltips, not controls. Whoever sets it owns the contrast of the text over it, and your own `background-image` on a surface still wins.
|
|
111
|
+
|
|
112
|
+
`--ui-label-*` treats the label of a button or a badge: weight, tracking, case, and a text shadow. Write the shadow without a colour -- `0 0 6px` -- so it takes the label's own colour and cannot lower its contrast. Your own `font-*`, `tracking-*`, and case utilities still win.
|
|
113
|
+
|
|
114
|
+
Under forced colours each of these draws its plain version: a solid line, no halo, no painted layer, and no label shadow.
|
|
115
|
+
|
|
83
116
|
### Shape and ring composition
|
|
84
117
|
|
|
85
118
|
Clipping removes borders, outlines, and outer shadows. An aesthetic that uses a clip can replace the border with an inset shadow by setting `--ui-shadow-inset` and the four shadow geometry parts. Set `--ui-border-max: 0px` when that ring replaces the component border. Focusable components restore the clipped focus outline through `--ui-focus-inset`.
|
|
86
119
|
|
|
87
120
|
A clip is not the only way to cut a corner. `--ui-corner-shape: bevel` draws the corner the radius sets as a straight cut instead of an arc, and the border, outer shadow, focus outline, and backdrop all follow it -- so a bevelled element keeps its glow and its line, where a clipped one loses both. `.cyber` uses it. Engines without `corner-shape` ignore it and draw the radius round, so an aesthetic that bevels should square its radius under `@supports not (corner-shape: bevel)`. A bevel on a full radius cuts to points: a radio, a `.btn.pill`, and anything reading `--ui-radius-pill` become diamonds or pointed hexagons.
|
|
88
121
|
|
|
89
|
-
|
|
122
|
+
`--ui-radius` accepts any `border-radius` value and is used as written, so it can place the corner per side: `10px 0` cuts only top-left and bottom-right. The pill and chip corners are separate tokens. An unset chip corner computes a small default from `--ui-radius`, then `--ui-corner`, capped at `--radius-small`; an explicit `--ui-radius-tight` is used as written, even for a per-corner or elliptical value. Aesthetic and consumer overrides can therefore give a chip a larger or more irregular shape. `.btn.pill` takes `--ui-radius-pill` ahead of the other radii; under sketch it takes organic hand-drawn pill contours avoiding egg distortion, while an explicit `--ui-radius-pill` on that button still wins.
|
|
90
123
|
|
|
91
124
|
Declare `--ui-shadow-edge` when that ring _is_ the border. The ring then takes the element's edge color, which carries the edge axis as its alpha, so `.edged` draws it and `.edgeless` does not — the same answer a real border gives. Without it the ring paints on every component the aesthetic reaches and the edge classes have no effect. Use `--ui-shadow-ink` instead when the shadow is depth cast in the intent's own ink, such as a hard offset slab, which an `.edgeless` element still gets.
|
|
92
125
|
|
|
@@ -113,22 +146,28 @@ Variables prefixed `--_` are internal composition outputs — `--_bg`, `--_fg`,
|
|
|
113
146
|
|
|
114
147
|
The shipped [aesthetic classes](./aesthetics.md) set material tokens for you. Only aesthetics with a token listed below expose an aesthetic-specific token. Tune all other behavior through the shared material tokens above. Listed tokens are available only where that aesthetic's stylesheet is imported.
|
|
115
148
|
|
|
116
|
-
| Token
|
|
117
|
-
|
|
|
118
|
-
| `--neo-offset`
|
|
119
|
-
| `--glass-radius`
|
|
120
|
-
| `--glass-radius-surface`
|
|
121
|
-
| `--pixel-unit`
|
|
122
|
-
| `--font-pixel`
|
|
123
|
-
| `--tile-radius`
|
|
124
|
-
| `--tile-lift`
|
|
125
|
-
| `--font-rounded`
|
|
126
|
-
| `--cyber-cut`
|
|
127
|
-
| `--cyber-shape`
|
|
128
|
-
| `--cyber-shape-surface`
|
|
129
|
-
| `--cyber-glow`
|
|
130
|
-
| `--cyber-ink`
|
|
131
|
-
| `--font-cyber`
|
|
149
|
+
| Token | Aesthetic | Purpose | Default |
|
|
150
|
+
| --------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
|
|
151
|
+
| `--neo-offset` | `.neobrutalism` | Hard shadow offset and distance the press travels. | `4px` |
|
|
152
|
+
| `--glass-radius` | `.glass`, `.glass-liquid` | Control corner radius. `1rem` under `.glass-liquid`. | `0.75rem` |
|
|
153
|
+
| `--glass-radius-surface` | `.glass`, `.glass-liquid` | Surface corner radius. `1.5rem` under `.glass-liquid`. | `1rem` |
|
|
154
|
+
| `--pixel-unit` | `.pixel` | One pixel of the grid. The corner cut and the ring are one. | `4px` |
|
|
155
|
+
| `--font-pixel` | `.pixel` | Consumer-supplied pixel font stack. | Falls back to the monospace stack |
|
|
156
|
+
| `--tile-radius` | `.chunky-tile` | Corner radius, on controls and surfaces alike. | `0.75rem` |
|
|
157
|
+
| `--tile-lift` | `.chunky-tile` | Depth of the seated bar, and how far a press travels. | `4px` |
|
|
158
|
+
| `--font-rounded` | `.chunky-tile` | Consumer-supplied rounded font stack. | Falls back to the page stack |
|
|
159
|
+
| `--cyber-cut` | `.cyber` | The cut at the default size, on controls and surfaces alike; controls scale it with the step. | `0.625rem` |
|
|
160
|
+
| `--cyber-shape` | `.cyber` | Where controls take the cut: any `border-radius` value. | `<cut> 0` (top-left, bottom-right) |
|
|
161
|
+
| `--cyber-shape-surface` | `.cyber` | Where surfaces take the cut: any `border-radius` value. | `0 <cut>` (top-right, bottom-left) |
|
|
162
|
+
| `--cyber-glow` | `.cyber` | Blur of the glow. | `8px` |
|
|
163
|
+
| `--cyber-ink` | `.cyber` | Neutral line and glow colour, where no intent sets one. | Theme ink (near-black, near-white) |
|
|
164
|
+
| `--font-cyber` | `.cyber` | Consumer-supplied technical font stack. | Falls back to the monospace stack |
|
|
165
|
+
| `--sketch-radius` | `.sketch` | Control outline radius: any `border-radius` value. | Irregular box outline with sibling variation |
|
|
166
|
+
| `--sketch-radius-surface` | `.sketch` | Surface container outline radius: any `border-radius` value. | Sharp irregular square outline with sibling variation |
|
|
167
|
+
| `--sketch-radius-rounded` | `.sketch`, `.sketch-rounded` | Rounded control outline radius: expressive elliptical contour with sibling variation. | `26px 10px 24px 11px / 12px 23px 11px 20px` with sibling variation |
|
|
168
|
+
| `--sketch-radius-surface-rounded` | `.sketch`, `.sketch-rounded` | Rounded surface container outline radius: expressive elliptical contour with sibling variation. | `38px 16px 36px 17px / 16px 34px 17px 32px` with sibling variation |
|
|
169
|
+
| `--sketch-radius-pill` | `.sketch` | Pill button outline radius: organic hand-drawn pill contour avoiding egg-shaped distortion. | `24px 16px 23px 17px / 17px 21px 16px 20px` with sibling variation |
|
|
170
|
+
| `--font-sketch` | `.sketch` | Consumer-supplied handwriting font stack. | Falls back to `cursive` |
|
|
132
171
|
|
|
133
172
|
Every aesthetic's knobs reach the same way: each knob is _read_ with its default as a `var()` fallback rather than declared, so it resolves once into a private on the aesthetic's own class (`--_pixel-unit`, `--_neo-offset`, `--_tile-radius`, `--_tile-lift`, and so on). Set a knob on the element carrying the aesthetic class, or on any ancestor including `:root`:
|
|
134
173
|
|
|
@@ -148,7 +187,7 @@ Every aesthetic's knobs reach the same way: each knob is _read_ with its default
|
|
|
148
187
|
|
|
149
188
|
Knobs and material tokens reach in opposite directions, and telling them apart matters. A knob resolves once at the aesthetic's own class and inherits down already-resolved, so it reaches the aesthetic **from above**: setting it on the element or any ancestor works, but setting it on a _descendant_ of the aesthetic class changes nothing — the value has already been read. `--ui-radius` and the other material tokens above are read fresh by each component as it draws, so they reach **at or below** the element carrying them, which is how you round one card differently from its neighbours without touching the knob at all.
|
|
150
189
|
|
|
151
|
-
Shipped aesthetics set the shared material tokens above. `.
|
|
190
|
+
Shipped aesthetics set the shared material tokens above. Every shipped aesthetic sets `--ui-ink` for its neutral line. Every shipped aesthetic also sets `--ui-control-ink`: `.glass` and `.chunky-tile` to a line of their own, heavier than their surfaces', and the others to `--color-control-border`, since their ink is the primary colour in both themes. `.glass` sets `--ui-rule-ink` too, so a table's lines read on its plate; the others clear it. Intent classes still override the intent slots on each component.
|
|
152
191
|
|
|
153
192
|
The same knobs tune each aesthetic's [solo class](./aesthetics.md#solo-classes), which reads them on its own element.
|
|
154
193
|
|
|
@@ -175,7 +214,7 @@ Naming: `--palette-<intent>-<presentation>-<slot>`, where `<intent>` is one of t
|
|
|
175
214
|
- A ground qualifier (`page` or `subtle`) inserted before the slot, present only on `.soft`/`.ghost`'s `bg` and `edge` -- `.solid` is ground-independent at full fill, and `fg` never varies by ground. No qualifier means the `transparent` ground (`.badge`/`.btn`'s ground): `--palette-success-soft-bg`. `page` is `.alert`'s ground (`--color-background`): `--palette-success-soft-page-bg`. `subtle` is `.pre`/`.code`/`.kbd`/`.tooltip-bubble`'s ground (that intent's own `--intent-subtle`): `--palette-success-soft-subtle-bg`.
|
|
176
215
|
- A `-hover` suffix on `bg` and `edge` only -- `fg` never changes on hover: `--palette-success-soft-page-bg-hover`.
|
|
177
216
|
|
|
178
|
-
|
|
217
|
+
Light values sit on `:root` and dark values are scoped the same way `@codenhub/styles`' own explicit theme override is: `.dark`, `.theme-dark`, and `[data-theme="dark"]`, on the element or an ancestor. The light values also answer `.light`, `.theme-light`, and `[data-theme="light"]`, so the nearest explicit theme wins at any depth -- a light subtree nested inside a dark one reads the light values. There is no `prefers-color-scheme` fallback in this file -- a consumer reaching for a standalone palette is already handling its own theme switching, so the OS-preference case is left to `@codenhub/styles`' own `light-dark()`-based tokens when that package is actually in use.
|
|
179
218
|
|
|
180
219
|
Three more tokens sit alongside the intent cells for the same reason, without an intent, presentation, ground, or hover axis of their own: `--palette-border`, `--palette-surface`, and `--palette-text`, flat values for `--color-border`, `--color-surface`, and `--color-text` -- the resting colors anything that is not intent-colored needs (a container's border, a dialog's background, its text), which an optional-peer consumer needs just as much as the intent cells.
|
|
181
220
|
|
|
@@ -185,6 +224,4 @@ Component classes may define scoped implementation variables such as `--surface-
|
|
|
185
224
|
|
|
186
225
|
Consumers should customize broad behavior through color, foundation, motion, elevation, radius, layout, and focus tokens first. The only supported component-scoped input is `--progress-value` on the `.progress` element, because consumers must provide a value such as `64%`.
|
|
187
226
|
|
|
188
|
-
`--layout-gap` replaces the removed `--layout-stack-gap` and `--layout-cluster-gap` tokens. No compatibility aliases are provided.
|
|
189
|
-
|
|
190
227
|
Next: [Aesthetics](./aesthetics.md) covers each shipped aesthetic's complete look and its documented exceptions.
|
package/docs/usage/feedback.md
CHANGED
|
@@ -33,7 +33,7 @@ Activity indicator modifier classes compose with `.loader`:
|
|
|
33
33
|
| `.bars-wave` | Three vertical bars scaling in a wave. |
|
|
34
34
|
| `.pulse-ring` | Two concentric rings pulsing outward. |
|
|
35
35
|
|
|
36
|
-
These variants retain their embedded SVG animations normally. Under `prefers-reduced-motion: reduce`, loader CSS substitutes a corresponding static mask. This fallback
|
|
36
|
+
These variants retain their embedded SVG animations normally. Under `prefers-reduced-motion: reduce`, loader CSS substitutes a corresponding static mask. This fallback ships wherever the loader does -- the complete, native, and `/components` entrypoints, `/tw/components`, and `/tw/loader` -- and does not depend on the global reset. `/tw/button` does not include the loader; pair it with `/tw/loader`. See [Accessibility](../accessibility.md).
|
|
37
37
|
|
|
38
38
|
Loader size modifiers:
|
|
39
39
|
|
|
@@ -43,7 +43,7 @@ Loader size modifiers:
|
|
|
43
43
|
| `.sm` | Small (`1.25rem`). |
|
|
44
44
|
| `.lg` | Large (`2.25rem`). |
|
|
45
45
|
|
|
46
|
-
Alerts, badges, progress bars, skeletons, and loaders accept `.primary`, `.secondary`, `.success`, `.warning`, `.destructive`,
|
|
46
|
+
Alerts, badges, progress bars, skeletons, and loaders accept `.primary`, `.secondary`, `.success`, `.warning`, `.destructive`, and `.info`. Without an intent, alerts and badges use the text palette, while the indicators -- `.loader`, `.skeleton`, and `.progress` -- take `currentColor`, so they match whatever content surrounds them.
|
|
47
47
|
|
|
48
48
|
Skeletons, loaders, and dividers are indicators: they read intent but ignore fill and edge [presentation](./composing.md#presentation). `.progress` is not one of them — its track reads both, `.soft.edgeless` by default; only the moving value fill stays intent-colored at full strength regardless of presentation. `.solid` is unsupported on the track, and `.ghost.edgeless` renders but is discouraged, since neither leaves the track a visible frame. See [Composing → Component axis reference](./composing.md#component-axis-reference) for the full table.
|
|
49
49
|
|
|
@@ -51,7 +51,9 @@ Skeletons, loaders, and dividers are indicators: they read intent but ignore fil
|
|
|
51
51
|
<span class="loader success" aria-hidden="true"></span> <span class="skeleton info"></span>
|
|
52
52
|
```
|
|
53
53
|
|
|
54
|
-
The package ships no icon of its own: `.alert` is already `flex`, so an icon dropped in as a child is spaced from the message by its `gap-3
|
|
54
|
+
The package ships no icon of its own: `.alert` is already `flex`, so an icon dropped in as a child is spaced from the message by its `gap-3`. `.alert-icon` only sizes and aligns whatever icon element you provide — an inline `<svg>`, an `<img>`, or a class from an icon set such as `@codenhub/icons` — the same contract [`.input-group`](./forms.md#icons) documents.
|
|
55
|
+
|
|
56
|
+
`.alert-icon` sizes the icon to `1.25rem`. A `@codenhub/icons` glyph sizes itself in an unlayered rule that no class of this package can outrank, so `.alert-icon` sets that set's `--ic-size` as well; an icon set with a different prefix keeps its own size unless you set its knob. Resize an alert icon with an ordinary rule of your own, and set `--ic-size` along with `width` and `height` for a `@codenhub/icons` glyph.
|
|
55
57
|
|
|
56
58
|
Alerts and badges read the shared [presentation](./composing.md#presentation) classes. Without one they use a tinted surface, intent-colored text, and a mixed intent border -- except a neutral `.alert` (no named intent), which rests untinted instead, the same no-named-intent carve-out `.card.soft` and `.panel` use: a plain `--color-foreground` plate rather than 12% of near-black ink over the page. A named intent (`.alert.success`, `.alert.destructive`, and so on) keeps its ordinary tint. `.badge` is unaffected either way -- it has no border to fall back on at rest, so untinting it would make a neutral badge disappear rather than read quieter.
|
|
57
59
|
|
package/docs/usage/forms.md
CHANGED
|
@@ -6,55 +6,69 @@ order: 6
|
|
|
6
6
|
|
|
7
7
|
# Forms
|
|
8
8
|
|
|
9
|
-
| Class or Selector | Purpose
|
|
10
|
-
| --------------------------------------------------------------------- |
|
|
11
|
-
| `.field` | Vertical field wrapper.
|
|
12
|
-
| `.label` | Form label text.
|
|
13
|
-
| `.hint` | Secondary helper text.
|
|
14
|
-
| `.hint.
|
|
15
|
-
| `.surface` | Shared public container composition utility.
|
|
16
|
-
| `.text-control` | Shared public text-control composition utility.
|
|
17
|
-
| `.ipt` | Input control styling.
|
|
18
|
-
| `.input-group` | Wrapper that owns the field box so a control can carry an icon or affix.
|
|
19
|
-
| `.
|
|
20
|
-
| `.
|
|
21
|
-
| `
|
|
22
|
-
| `input[type="
|
|
23
|
-
| `input[type="
|
|
24
|
-
| `[
|
|
25
|
-
| `[
|
|
9
|
+
| Class or Selector | Purpose |
|
|
10
|
+
| --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
|
|
11
|
+
| `.field` | Vertical field wrapper. |
|
|
12
|
+
| `.label` | Form label text. |
|
|
13
|
+
| `.hint` | Secondary helper text. |
|
|
14
|
+
| `.hint.destructive` | Helper text with destructive intent. |
|
|
15
|
+
| `.surface` | Shared public container composition utility. |
|
|
16
|
+
| `.text-control` | Shared public text-control composition utility. |
|
|
17
|
+
| `.ipt` | Input control styling. |
|
|
18
|
+
| `.input-group` | Wrapper that owns the field box so a control can carry an icon or affix. |
|
|
19
|
+
| `.unadorned` | Removes the browser's own field decorations, on the control or on its `.input-group`. |
|
|
20
|
+
| `.textarea` | Textarea control styling. |
|
|
21
|
+
| `.select` | Select control styling. With `multiple` or a `size` above 1 it is a list box: no chevron, as tall as its rows. |
|
|
22
|
+
| `input[type="checkbox"].checkbox` | Custom checkbox control styling. |
|
|
23
|
+
| `input[type="radio"].radio` | Custom radio control styling. |
|
|
24
|
+
| `input[type="checkbox"].switch` | Custom switch control styling. |
|
|
25
|
+
| `[aria-invalid="true"]` on controls | Destructive border and focus color. |
|
|
26
|
+
| `[disabled]`, `[aria-disabled="true"]`, `[data-disabled]` on controls | Disabled styling. |
|
|
26
27
|
|
|
27
28
|
## Icons
|
|
28
29
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
This is separate from the toggle marks below, which stay small, fixed, built-in glyphs. `.alert`'s icon followed the same path since — see [Feedback → Icon](./feedback.md#example) — the package no longer paints one there either.
|
|
30
|
+
The package ships no icon for text inputs. Icons for `.input-group` are the consumer's to choose: artwork painted as a `data:` URI could not read `currentColor` or a custom property, so it could not follow the theme or fit every aesthetic. The toggle marks below are the exception: small, fixed, built-in glyphs. `.alert` likewise takes a consumer-supplied icon; see [Feedback](./feedback.md#example).
|
|
32
31
|
|
|
33
32
|
`.input-group` is the wrapper for a control that carries one. It owns the field box — border, radius, fill, focus ring, invalid and disabled state — and the control inside it goes flush, so the boundary is drawn once. Any icon element works, placed before the control for a leading icon or after it for a trailing one: an inline `<svg>`, an `<img>`, or a class from an icon set such as `@codenhub/icons`.
|
|
34
33
|
|
|
35
34
|
```html
|
|
36
|
-
<
|
|
37
|
-
<
|
|
35
|
+
<div class="field">
|
|
36
|
+
<label class="label" for="contact-email">Email</label>
|
|
38
37
|
<div class="input-group">
|
|
39
38
|
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" aria-hidden="true">
|
|
40
39
|
<rect width="20" height="16" x="2" y="4" rx="2" />
|
|
41
40
|
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />
|
|
42
41
|
</svg>
|
|
43
|
-
<input class="ipt" type="email" />
|
|
42
|
+
<input class="ipt" type="email" id="contact-email" />
|
|
44
43
|
</div>
|
|
45
|
-
</
|
|
46
|
-
<
|
|
47
|
-
<
|
|
44
|
+
</div>
|
|
45
|
+
<div class="field">
|
|
46
|
+
<label class="label" for="site-search">Search</label>
|
|
48
47
|
<div class="input-group">
|
|
49
|
-
<input class="ipt" type="search" />
|
|
48
|
+
<input class="ipt" type="search" id="site-search" />
|
|
50
49
|
<i class="ic-search" aria-hidden="true"></i>
|
|
51
50
|
</div>
|
|
52
|
-
</
|
|
51
|
+
</div>
|
|
53
52
|
```
|
|
54
53
|
|
|
55
54
|
The group reads intent and both [presentation](./composing.md#presentation) axes the same way a lone `.ipt` does — `.input-group.soft.edgeless` is the sunk variant, `.input-group.primary` colors the boundary — and follows whichever [aesthetic](./aesthetics.md) is in scope. `aria-invalid` or `disabled` on the control inside propagates to the group; so does either on the group itself. Focus is shown with `:focus-within`, so unlike a lone field the ring also appears on a mouse click.
|
|
56
55
|
|
|
57
|
-
|
|
56
|
+
Text controls keep the browser's own decorations: the date and time picker button, a number field's spin buttons, and a search field's clear button and magnifier. Each one is also behaviour -- the picker button is the only pointer route to the picker, and the clear button empties the field.
|
|
57
|
+
|
|
58
|
+
`.unadorned` removes all of them, for a field whose adornments you draw yourself. Put it on the control, or on its `.input-group` to reach the control inside. Removing a decoration removes what it did, so wire the behaviour back to your own adornment: `input.showPicker()` for a picker, `stepUp()`/`stepDown()` for spin buttons, and setting `value` to `""` and dispatching an `input` event for a clear button. Keyboard entry keeps working either way. Firefox exposes no way to remove its date picker button, so it stays there.
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<div class="field">
|
|
62
|
+
<label class="label" for="query">Search</label>
|
|
63
|
+
<div class="input-group unadorned">
|
|
64
|
+
<i class="ic-search" aria-hidden="true"></i>
|
|
65
|
+
<input class="ipt" type="search" id="query" />
|
|
66
|
+
<button type="button" class="btn icon ghost p-xs" aria-label="Clear search">
|
|
67
|
+
<i class="ic-x" aria-hidden="true"></i>
|
|
68
|
+
</button>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
```
|
|
58
72
|
|
|
59
73
|
The slot works the same way for a text affix — a URL host, a currency symbol, a unit — not just an icon:
|
|
60
74
|
|
|
@@ -71,15 +85,15 @@ The gap between the control and its adornment is `--input-group-gap`, `0.5rem` b
|
|
|
71
85
|
|
|
72
86
|
`.checkbox`, `.radio`, and `.switch` accept the same intent classes as buttons to set the checked color:
|
|
73
87
|
|
|
74
|
-
| Class
|
|
75
|
-
|
|
|
76
|
-
| `.neutral` _(default)_
|
|
77
|
-
| `.primary`
|
|
78
|
-
| `.secondary`
|
|
79
|
-
| `.success`
|
|
80
|
-
| `.warning`
|
|
81
|
-
| `.destructive
|
|
82
|
-
| `.info`
|
|
88
|
+
| Class | Meaning |
|
|
89
|
+
| ---------------------- | ----------------------- |
|
|
90
|
+
| `.neutral` _(default)_ | Text color, capped. |
|
|
91
|
+
| `.primary` | Primary color. |
|
|
92
|
+
| `.secondary` | Secondary/accent color. |
|
|
93
|
+
| `.success` | Success color. |
|
|
94
|
+
| `.warning` | Warning color. |
|
|
95
|
+
| `.destructive` | Destructive color. |
|
|
96
|
+
| `.info` | Info color. |
|
|
83
97
|
|
|
84
98
|
All three toggles rest at `.soft`. Presentation decides the _unchecked_ plate; checked is pinned to one look regardless of which class is on the element, so a checkbox, a radio, and a switch each have a single "on" identity rather than one per presentation:
|
|
85
99
|
|
|
@@ -91,6 +105,8 @@ All three toggles rest at `.soft`. Presentation decides the _unchecked_ plate; c
|
|
|
91
105
|
|
|
92
106
|
A checked checkbox and a checked switch cut their mark out of that pinned plate. A checked radio thickens its ring to twice the resting line and takes the intent whole on it, and the dot follows the same pinned plate, so `.radio.soft` and `.radio.solid` render the same filled circle once checked — presentation only changes what the radio looks like before it's picked.
|
|
93
107
|
|
|
108
|
+
A checkbox whose `indeterminate` property is set -- a group some of whose items are checked -- takes the same pinned plate with a dash for its mark, and keeps the dash while it is also `checked`, as the browser's own checkbox does. The property is set from script (`input.indeterminate = true`); there is no attribute for it.
|
|
109
|
+
|
|
94
110
|
## Text controls
|
|
95
111
|
|
|
96
112
|
Text controls also take intent, which colors the resting border and the focus-visible border, and both [presentation](./composing.md#presentation) axes. `.ghost` fills nothing, `.soft` takes `12%`, and `.solid` takes `20%` — quiet enough that typed text still reads on it, and ordered so the louder name draws the stronger tint. None of them touches the line.
|
|
@@ -123,11 +139,11 @@ The boundary is the edge axis's, and it splits the same way. A container's `.edg
|
|
|
123
139
|
## Example
|
|
124
140
|
|
|
125
141
|
```html
|
|
126
|
-
<
|
|
127
|
-
<
|
|
128
|
-
<input class="ipt" type="email" aria-invalid="true" aria-describedby="email-error" />
|
|
129
|
-
<span class="hint
|
|
130
|
-
</
|
|
142
|
+
<div class="field">
|
|
143
|
+
<label class="label" for="email">Email</label>
|
|
144
|
+
<input class="ipt" type="email" id="email" aria-invalid="true" aria-describedby="email-error" />
|
|
145
|
+
<span class="hint destructive" id="email-error">Enter a valid email.</span>
|
|
146
|
+
</div>
|
|
131
147
|
<label style="display: flex; gap: 0.5rem; align-items: center">
|
|
132
148
|
<input type="checkbox" class="checkbox success" />
|
|
133
149
|
<span>Accept terms</span>
|
|
@@ -137,9 +153,9 @@ The boundary is the edge axis's, and it splits the same way. A container's `.edg
|
|
|
137
153
|
<span>Standard plan</span>
|
|
138
154
|
</label>
|
|
139
155
|
<label style="display: flex; gap: 0.5rem; align-items: center">
|
|
140
|
-
<input type="checkbox" class="switch destructive" />
|
|
156
|
+
<input type="checkbox" class="switch destructive" role="switch" />
|
|
141
157
|
<span>Enable</span>
|
|
142
158
|
</label>
|
|
143
159
|
```
|
|
144
160
|
|
|
145
|
-
Use labels, `type`, validation logic, `aria-describedby`, and error message relationships; see [Accessibility](../accessibility.md).
|
|
161
|
+
Keep a hint or error message outside the `<label>` and point `aria-describedby` at it, so it is announced as a description rather than read as part of the field's name. Give a `.switch` `role="switch"`. Use labels, `type`, validation logic, `aria-describedby`, and error message relationships; see [Accessibility](../accessibility.md).
|
package/docs/usage/theming.md
CHANGED
|
@@ -72,15 +72,15 @@ Every row is an override point: set it on `:root` to retheme globally, or on any
|
|
|
72
72
|
|
|
73
73
|
Intent classes set these seven slots; components read them. Because every supporting component reads the same seven names, an intent works on every component that supports intent, and a custom intent needs no component changes.
|
|
74
74
|
|
|
75
|
-
| Token | Purpose
|
|
76
|
-
| ------------------- |
|
|
77
|
-
| `--intent-color` | The intent's base color. What a fill is made of.
|
|
78
|
-
| `--intent-contrast` | Readable color on top of a filled `--intent-color`.
|
|
79
|
-
| `--intent-hover` | The intent's hovered base color.
|
|
80
|
-
| `--intent-strong` | The intent printed on a page. Text, icon, or border wherever the fill is not full.
|
|
81
|
-
| `--intent-subtle` | Low-emphasis tone. Tinted surfaces and tracks. Neutral resolves to `--color-surface`.
|
|
82
|
-
| `--intent-border` | Line color.
|
|
83
|
-
| `--intent-fill-max` | How far a fill of this intent is allowed to go. `100%` for every intent but neutral.
|
|
75
|
+
| Token | Purpose |
|
|
76
|
+
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
77
|
+
| `--intent-color` | The intent's base color. What a fill is made of. |
|
|
78
|
+
| `--intent-contrast` | Readable color on top of a filled `--intent-color`. |
|
|
79
|
+
| `--intent-hover` | The intent's hovered base color. |
|
|
80
|
+
| `--intent-strong` | The intent printed on a page. Text, icon, or border wherever the fill is not full. |
|
|
81
|
+
| `--intent-subtle` | Low-emphasis tone. Tinted surfaces and tracks. Neutral resolves to `--color-surface`. |
|
|
82
|
+
| `--intent-border` | Line color. With no intent it resolves to the aesthetic's `--ui-ink`, then `--color-border`; text controls and toggles read `--ui-control-ink`, then `--ui-ink`, then `--color-control-border`, and tables read `--ui-rule-ink` first. |
|
|
83
|
+
| `--intent-fill-max` | How far a fill of this intent is allowed to go. `100%` for every intent but neutral. |
|
|
84
84
|
|
|
85
85
|
`--intent-color` and `--intent-strong` are two ends of the same family and not interchangeable. The base is a ground, chosen to be filled with; the strong tone is chosen to be read against a page. A `.soft` or `.ghost` component prints the strong one, which is why an unfilled warning reads in amber-800 rather than the amber-600 its solid sibling is filled with.
|
|
86
86
|
|
|
@@ -92,7 +92,7 @@ The strong tone has to stay recognisably its own hue, not just readable. On a da
|
|
|
92
92
|
|
|
93
93
|
The foreground is gated by the plate rather than tied to the fill. `--intent-contrast` is the ink for a _full_ fill, so printing it at full strength on a fifth of one puts white on light grey. Contrast ink therefore appears only once the fill is past halfway and reaches full at a full fill; below that a component prints `--intent-strong`, the tone chosen to be read.
|
|
94
94
|
|
|
95
|
-
|
|
95
|
+
So a capped neutral takes the strong tone whole rather than a fraction of the way toward the page. A state that lifts the cap on purpose — a checked checkbox is filled with its own intent by definition — reaches a full fill and gets the contrast whole.
|
|
96
96
|
|
|
97
97
|
Set them directly to define an intent this package does not ship. **State every slot**, including `--intent-fill-max`: components reset all seven to the neutral values, so a slot your intent leaves out keeps neutral's — and an intent that omits the cap fills to 20% of its color instead of 100%.
|
|
98
98
|
|
|
@@ -118,37 +118,36 @@ Set them directly to define an intent this package does not ship. **State every
|
|
|
118
118
|
|
|
119
119
|
Foundation tokens are not aliases for one color. They define layout, shape, motion, focus, depth, and layering behavior used by helper classes.
|
|
120
120
|
|
|
121
|
-
The four `--elevation-*` values below are raw shadows for elements you style yourself. They are a separate thing from `.
|
|
122
|
-
|
|
123
|
-
| Token | Purpose
|
|
124
|
-
| -------------------------- |
|
|
125
|
-
| `--font-default` | Default app font family.
|
|
126
|
-
| `--container-narrow` | Narrow content width.
|
|
127
|
-
| `--container-max` | Default content width.
|
|
128
|
-
| `--container-wide` | Wide content width.
|
|
129
|
-
| `--layout-gutter` | Responsive inline page padding.
|
|
130
|
-
| `--layout-section-block` | Responsive section vertical padding.
|
|
131
|
-
| `--layout-gap` | Shared gap for `.view`, `.stack`, `.cluster`, and `.auto-grid`.
|
|
132
|
-
| `--layout-grid-min` | Minimum column width for `.auto-grid`.
|
|
133
|
-
| `--radius-small` | Small radius for compact utility surfaces such as code elements.
|
|
134
|
-
| `--radius-control` | Radius for buttons, inputs, tooltips, and compact UI.
|
|
135
|
-
| `--radius-surface` | Radius for cards, panels, and alerts.
|
|
136
|
-
| `--control-height` | Default minimum height for controls.
|
|
137
|
-
| `--border-width` | Default border width.
|
|
138
|
-
| `--elevation-color` | Shadow color the four elevations compose from. Heavier in dark themes.
|
|
139
|
-
| `--elevation-none` | No shadow. Use on an element that should read as flat against its page.
|
|
140
|
-
| `--elevation-sm` | A light shadow for your own surface-level elements, such as cards.
|
|
141
|
-
| `--elevation-md` | A shadow for your own raised elements, such as dropdowns and popovers.
|
|
142
|
-
| `--elevation-lg` | A shadow for your own full overlays, such as modal dialogs.
|
|
143
|
-
| `--focus-ring` | Focus-visible ring color.
|
|
144
|
-
| `--focus-ring-offset` | Focus-visible outline offset.
|
|
145
|
-
| `--focus-ring-width` | Focus-visible outline/ring width.
|
|
146
|
-
| `--motion-duration-fast` | Fast transition for
|
|
147
|
-
| `--motion-duration-normal` |
|
|
148
|
-
| `--motion-duration-slow` |
|
|
149
|
-
| `--motion-ease` | Default easing curve.
|
|
150
|
-
| `--z-popover` | Popover/tooltip z-index.
|
|
151
|
-
| `--breakpoint-xs` | Extra-small Tailwind responsive breakpoint.
|
|
152
|
-
| `--breakpoint-2xl` | Extended large Tailwind responsive breakpoint. |
|
|
121
|
+
The four `--elevation-*` values below are raw shadows for elements you style yourself. They are a separate thing from `.flat`/`.raised`/`.floating`, which scale a _component's own_ shadow geometry and default to no shadow at all until an aesthetic or one of those classes asks for depth — see [Composing → Elevation](./composing.md#elevation) for that system. The two share `none`/`sm`/`md`/`lg` naming for the same weight of depth, but one is a fixed value and the other multiplies shadow parts, so they will not always paint identically.
|
|
122
|
+
|
|
123
|
+
| Token | Purpose |
|
|
124
|
+
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
125
|
+
| `--font-default` | Default app font family. |
|
|
126
|
+
| `--container-narrow` | Narrow content width. |
|
|
127
|
+
| `--container-max` | Default content width. |
|
|
128
|
+
| `--container-wide` | Wide content width. |
|
|
129
|
+
| `--layout-gutter` | Responsive inline page padding. |
|
|
130
|
+
| `--layout-section-block` | Responsive section vertical padding. |
|
|
131
|
+
| `--layout-gap` | Shared gap for `.view`, `.stack`, `.cluster`, and `.auto-grid`. |
|
|
132
|
+
| `--layout-grid-min` | Minimum column width for `.auto-grid`. |
|
|
133
|
+
| `--radius-small` | Small radius for compact utility surfaces such as code elements. |
|
|
134
|
+
| `--radius-control` | Radius for buttons, inputs, tooltips, and compact UI. |
|
|
135
|
+
| `--radius-surface` | Radius for cards, panels, and alerts. |
|
|
136
|
+
| `--control-height` | Default minimum height for controls. |
|
|
137
|
+
| `--border-width` | Default border width. |
|
|
138
|
+
| `--elevation-color` | Shadow color the four elevations compose from. Heavier in dark themes. |
|
|
139
|
+
| `--elevation-none` | No shadow. Use on an element that should read as flat against its page. |
|
|
140
|
+
| `--elevation-sm` | A light shadow for your own surface-level elements, such as cards. |
|
|
141
|
+
| `--elevation-md` | A shadow for your own raised elements, such as dropdowns and popovers. |
|
|
142
|
+
| `--elevation-lg` | A shadow for your own full overlays, such as modal dialogs. |
|
|
143
|
+
| `--focus-ring` | Focus-visible ring color. |
|
|
144
|
+
| `--focus-ring-offset` | Focus-visible outline offset. Unset: the negative of the focused element's line width, so the ring lands on the edge under every aesthetic. |
|
|
145
|
+
| `--focus-ring-width` | Focus-visible outline/ring width. |
|
|
146
|
+
| `--motion-duration-fast` | Fast transition for a table row's hover (`120ms`). |
|
|
147
|
+
| `--motion-duration-normal` | Every component's colour, border, shadow, and press transitions, toggle marks, and the tooltip bubble (`200ms`). |
|
|
148
|
+
| `--motion-duration-slow` | Progress value changes, and the base of the skeleton and progress shimmer cycle (`400ms`). |
|
|
149
|
+
| `--motion-ease` | Default easing curve. |
|
|
150
|
+
| `--z-popover` | Popover/tooltip z-index. |
|
|
151
|
+
| `--breakpoint-xs` | Extra-small Tailwind responsive breakpoint. |
|
|
153
152
|
|
|
154
153
|
Next: [Customizing](./customizing.md) covers presentation and material tokens — how much of an intent shows, and what a component is made of.
|