@codenhub/styles 0.2.0 → 0.3.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/dist/components.css +1 -1
- package/dist/index.css +1 -1
- package/dist/native.css +1 -1
- package/dist/palette.css +1 -0
- package/dist/theme.css +1 -1
- package/dist/tw/components/feedback.css +43 -21
- package/dist/tw/palette.css +451 -0
- package/dist/tw/theme.css +14 -1
- package/docs/accessibility.md +8 -7
- package/docs/changelog/0.3.0.md +15 -0
- package/docs/changelog/index.md +1 -0
- package/docs/setup.md +23 -22
- package/docs/usage/composing.md +16 -13
- package/docs/usage/customizing.md +27 -0
- package/docs/usage/feedback.md +2 -1
- package/llms-full.txt +89 -43
- package/package.json +9 -2
package/docs/usage/composing.md
CHANGED
|
@@ -63,18 +63,19 @@ The edge is the silhouette and nothing else. Rules _inside_ a component that has
|
|
|
63
63
|
|
|
64
64
|
With no presentation class in scope, each component keeps its own default: buttons are filled, alerts and badges are tinted, surfaces and controls are neutral and bordered.
|
|
65
65
|
|
|
66
|
-
| Component | Reads
|
|
67
|
-
| ----------------------------------------------- |
|
|
68
|
-
| `.btn`, `.alert`, `.badge`, `.card`, `.panel` | Fill, text, border, and border width.
|
|
69
|
-
| `.kbd` | Fill, text, border, and border width.
|
|
70
|
-
| `.data-table` | Header fill and text, border, border width.
|
|
71
|
-
| `.ipt`, `.textarea`, `.select`, `.text-control` | Border, border width, and a capped fill.
|
|
72
|
-
| `.input-group` | Border, border width, and a capped fill.
|
|
73
|
-
| `.checkbox`, `.radio` | A capped fill, checked and unchecked.
|
|
74
|
-
| `.switch` | Border, border width, and a capped fill.
|
|
75
|
-
| `.quote` | Fill, text, border, and width.
|
|
76
|
-
| `.code`, `.pre`, `.tooltip-bubble` | Fill, text, border, and material.
|
|
77
|
-
| `.
|
|
66
|
+
| Component | Reads |
|
|
67
|
+
| ----------------------------------------------- | ----------------------------------------------------------------------------------------------- |
|
|
68
|
+
| `.btn`, `.alert`, `.badge`, `.card`, `.panel` | Fill, text, border, and border width. |
|
|
69
|
+
| `.kbd` | Fill, text, border, and border width. |
|
|
70
|
+
| `.data-table` | Header fill and text, border, border width. |
|
|
71
|
+
| `.ipt`, `.textarea`, `.select`, `.text-control` | Border, border width, and a capped fill. |
|
|
72
|
+
| `.input-group` | Border, border width, and a capped fill. |
|
|
73
|
+
| `.checkbox`, `.radio` | A capped fill, checked and unchecked. |
|
|
74
|
+
| `.switch` | Border, border width, and a capped fill. |
|
|
75
|
+
| `.quote` | Fill, text, border, and width. |
|
|
76
|
+
| `.code`, `.pre`, `.tooltip-bubble` | Fill, text, border, and material. |
|
|
77
|
+
| `.progress` | Track fill, border, and border width; the value fill is always the intent color, full strength. |
|
|
78
|
+
| `.loader`, `.skeleton`, `.divider` | Intent only, not presentation. |
|
|
78
79
|
|
|
79
80
|
A text control caps a **cascaded** fill at `6%`, keeping typed text legible when a `.solid` container reaches a field nobody classed. A fill class written on the control itself names its own cap instead, because that is a consumer describing what they want: `.soft` takes `12%` and `.solid` takes `20%`.
|
|
80
81
|
|
|
@@ -113,13 +114,15 @@ Presentation is two independent axes, so they get a column each. A `Yes` means t
|
|
|
113
114
|
| `.surface` | Yes | Yes | Yes | Shape |
|
|
114
115
|
| `.checkbox`, `.radio` | Yes | Yes | No | Radius and edge |
|
|
115
116
|
| `.switch` | Yes | Yes | Yes | Radius and edge |
|
|
116
|
-
| `.progress` | Yes |
|
|
117
|
+
| `.progress` | Yes | Yes | Yes | Radius and edge |
|
|
117
118
|
| `.code`, `.pre` | Yes | Yes | Yes | Radius and clip |
|
|
118
119
|
| `.tooltip-bubble` | Yes | Yes | Yes | Shape and overlay |
|
|
119
120
|
| `.table-wrap`, `.quote-inline`, layout and text utilities | No | No | No | No |
|
|
120
121
|
|
|
121
122
|
`.checkbox` and `.radio` are the only components that read one axis and not the other. Their line is the only thing marking an unchecked box, so it is drawn whatever the edge class says, from a container or from the element itself. `.edgeless` on either is unsupported rather than merely discouraged.
|
|
122
123
|
|
|
124
|
+
`.progress` reads both axes on its track; the value fill, the moving bar itself, is always the intent color at full strength and never changes. `.solid` is unsupported on the track: at full fill the track and the value fill compose the same color, and the one thing the component exists to show — how much is filled versus not — disappears. `.ghost.edgeless` renders (no fill, no border) but is not recommended: `.ghost.edged` — an outline capsule around the moving fill — keeps a visible frame at rest, while pairing `.ghost` with `.edgeless` leaves the track with none.
|
|
125
|
+
|
|
123
126
|
Every other text control floors a _cascaded_ `.edgeless` and honours its own: a `.edgeless` toolbar will not erase the line of a field nobody classed, while `.ipt.edgeless` is a consumer describing what they want and gets it.
|
|
124
127
|
|
|
125
128
|
Intent aliases such as `.danger` and `.error` occupy the same intent axis as `.destructive`; they do not add component behavior. State and modifier classes such as `.interactive`, `.hoverable`, `.pressable`, `.invalid`, `.compact`, and `.vertical` sit above this map and are documented with their component.
|
|
@@ -137,6 +137,33 @@ Knobs and material tokens reach in opposite directions, and telling them apart m
|
|
|
137
137
|
|
|
138
138
|
Shipped aesthetics set the shared material tokens above. `.neobrutalism` and `.pixel` set `--ui-ink` for their neutral outline; intent classes still override the intent slots on each component.
|
|
139
139
|
|
|
140
|
+
## Generated palette
|
|
141
|
+
|
|
142
|
+
`@codenhub/styles/palette` is a generated, self-contained stylesheet of every `intent x presentation` cell's composed colors, baked to flat `--palette-*` custom properties -- the same values `box.css` composes live, computed once at build time rather than re-derived. It exists for a consumer that cannot take `@codenhub/styles` as a build-time dependency (an optional peer, for example) but still wants to look consistent with it, not as a replacement for the components themselves when Tailwind is available.
|
|
143
|
+
|
|
144
|
+
```css
|
|
145
|
+
@import "@codenhub/styles/palette";
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
```css
|
|
149
|
+
.my-badge {
|
|
150
|
+
background: var(--palette-success-soft-page-bg);
|
|
151
|
+
color: var(--palette-success-soft-fg);
|
|
152
|
+
border-color: var(--palette-success-soft-page-edge);
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
Every value is already the composited color -- never a `var(--color-background)` or `var(--intent-subtle)` reference -- so this file never needs `./theme` loaded alongside it to resolve anything.
|
|
157
|
+
|
|
158
|
+
Naming: `--palette-<intent>-<presentation>-<slot>`, where `<intent>` is one of the seven published intents (`neutral`, `primary`, `secondary`, `success`, `warning`, `destructive`, `info`) and `<presentation>` is `solid`, `soft`, or `ghost`. `<slot>` is `bg`, `fg`, or `edge`. Two qualifiers layer on only where they apply:
|
|
159
|
+
|
|
160
|
+
- 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`.
|
|
161
|
+
- A `-hover` suffix on `bg` and `edge` only -- `fg` never changes on hover: `--palette-success-soft-page-bg-hover`.
|
|
162
|
+
|
|
163
|
+
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. 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.
|
|
164
|
+
|
|
165
|
+
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.
|
|
166
|
+
|
|
140
167
|
## Component internals
|
|
141
168
|
|
|
142
169
|
Component classes may define scoped implementation variables such as `--surface-padding`, `--field-gap`, `--input-group-pad`, `--switch-*`, `--table-*`, `--quote-*`, and `--tooltip-*`. These variables are internal wiring for class composition and are not the public token contract.
|
package/docs/usage/feedback.md
CHANGED
|
@@ -45,7 +45,7 @@ Loader size modifiers:
|
|
|
45
45
|
|
|
46
46
|
Alerts, badges, progress bars, skeletons, and loaders accept `.primary`, `.secondary`, `.success`, `.warning`, `.destructive`, `.danger`, `.error`, and `.info`. Without an intent, they use the text palette, except `.loader`, which keeps `currentColor` so it matches whatever content surrounds it.
|
|
47
47
|
|
|
48
|
-
Skeletons, loaders,
|
|
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
|
|
|
50
50
|
```html
|
|
51
51
|
<span class="loader success" aria-hidden="true"></span> <span class="skeleton info"></span>
|
|
@@ -80,6 +80,7 @@ Alerts and badges read the shared [presentation](./composing.md#presentation) cl
|
|
|
80
80
|
<span class="loader dots-grow lg" aria-hidden="true"></span>
|
|
81
81
|
<div class="progress" role="progressbar" aria-label="Upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="--progress-value: 64%"></div>
|
|
82
82
|
<div class="progress secondary active" role="progressbar" aria-label="Upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="--progress-value: 64%"></div>
|
|
83
|
+
<div class="progress primary ghost edged" role="progressbar" aria-label="Upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="--progress-value: 64%"></div>
|
|
83
84
|
<div class="progress info indeterminate" role="progressbar" aria-label="Loading" aria-valuemin="0" aria-valuemax="100"></div>
|
|
84
85
|
```
|
|
85
86
|
|
package/llms-full.txt
CHANGED
|
@@ -168,28 +168,29 @@ The one place it does not track the token theme: nesting an explicit selector in
|
|
|
168
168
|
|
|
169
169
|
Compiled entrypoints are ready-to-import CSS and require only tooling that can resolve package CSS imports. `/tw` entrypoints publish copied, uncompiled source from `dist/tw`; a Tailwind v4 build must still process their `@theme`, `@utility`, `@apply`, and related directives. Focused source component entrypoints include theme tokens so their classes can work independently.
|
|
170
170
|
|
|
171
|
-
| Import path | Composition and effects
|
|
172
|
-
| -------------------------------- |
|
|
173
|
-
| `@codenhub/styles` | Compiled complete surface: Tailwind base/theme output, tokens, typography, utilities, components, and reset. Applies global reset, root theme, and focus rules.
|
|
174
|
-
| `@codenhub/styles/theme` | Compiled Tailwind theme variables, Codenhub tokens, and the presentation classes. Sets root theme properties and system/explicit theme selectors; no reset or component classes.
|
|
175
|
-
| `@codenhub/styles/
|
|
176
|
-
| `@codenhub/styles/
|
|
177
|
-
| `@codenhub/styles/
|
|
178
|
-
| `@codenhub/styles/aesthetics
|
|
179
|
-
| `@codenhub/styles/
|
|
180
|
-
| `@codenhub/styles/tw
|
|
181
|
-
| `@codenhub/styles/tw/
|
|
182
|
-
| `@codenhub/styles/tw/
|
|
183
|
-
| `@codenhub/styles/tw/
|
|
184
|
-
| `@codenhub/styles/tw/
|
|
185
|
-
| `@codenhub/styles/tw/
|
|
186
|
-
| `@codenhub/styles/tw/
|
|
187
|
-
| `@codenhub/styles/tw/
|
|
188
|
-
| `@codenhub/styles/tw/
|
|
189
|
-
| `@codenhub/styles/tw/
|
|
190
|
-
| `@codenhub/styles/tw/
|
|
191
|
-
| `@codenhub/styles/tw/
|
|
192
|
-
| `@codenhub/styles/tw/
|
|
171
|
+
| Import path | Composition and effects |
|
|
172
|
+
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
173
|
+
| `@codenhub/styles` | Compiled complete surface: Tailwind base/theme output, tokens, typography, utilities, components, and reset. Applies global reset, root theme, and focus rules. |
|
|
174
|
+
| `@codenhub/styles/theme` | Compiled Tailwind theme variables, Codenhub tokens, and the presentation classes. Sets root theme properties and system/explicit theme selectors; no reset or component classes. |
|
|
175
|
+
| `@codenhub/styles/palette` | Generated, self-contained `--palette-*` custom properties: every intent/presentation cell's fill, text, and edge color, plus the flat `border`/`surface`/`text` neutral tokens, pre-composed to a flat value. For a consumer that cannot take this package as a build-time dependency (an optional peer, for example) but wants to look consistent with it. Not a replacement for the components themselves when Tailwind is available -- see [Customizing → Generated palette](docs/usage/customizing.md#generated-palette). |
|
|
176
|
+
| `@codenhub/styles/components` | Compiled theme tokens, typography utilities, and every component class. Includes static reduced-motion loader masks; no reset, layout/content utilities, or native mappings. |
|
|
177
|
+
| `@codenhub/styles/native` | Compiled complete surface plus classless mappings for headings, text, content elements, form controls, and buttons. Applies the reset and broad element selectors. |
|
|
178
|
+
| `@codenhub/styles/aesthetics` | Compiled `.neobrutalism`, `.glass`, `.pixel`, and `.chunky-tile` classes. Adds no tokens or components of its own; import after the base stylesheet. |
|
|
179
|
+
| `@codenhub/styles/aesthetics/*` | One compiled aesthetic: `/neobrutalism`, `/glass`, `/pixel`, or `/chunky-tile`. Same rules and ordering as the combined file. |
|
|
180
|
+
| `@codenhub/styles/tw` | Source equivalent of the complete stylesheet. Imports Tailwind itself, theme, typography, utilities, components, and reset; applies the same global rules. |
|
|
181
|
+
| `@codenhub/styles/tw/theme` | Source theme, tokens, and presentation classes. Imports Tailwind's theme layer; emits root/system/explicit theme selectors and defines the package's custom `dark:` variant. |
|
|
182
|
+
| `@codenhub/styles/tw/components` | Published Tailwind source for theme, typography, buttons, feedback, forms, loaders, surfaces, and tooltips, including static reduced-motion loader masks. No reset, layout/content utilities, or native mappings. |
|
|
183
|
+
| `@codenhub/styles/tw/surface` | Source theme plus `.surface`, `.card`, and `.panel`. |
|
|
184
|
+
| `@codenhub/styles/tw/button` | Published Tailwind source for theme and `.btn`. Pair it with `/tw/loader` for a loading state composed from `.loader`. |
|
|
185
|
+
| `@codenhub/styles/tw/form` | Source theme plus field, public `text-control`, input, textarea, select, checkbox, radio, and switch utilities. |
|
|
186
|
+
| `@codenhub/styles/tw/feedback` | Source theme plus alert, badge, skeleton, and progress utilities and their keyframes. |
|
|
187
|
+
| `@codenhub/styles/tw/loader` | Published Tailwind source for activity indicators and loaders, including static reduced-motion masks. It has no theme or reset side effects and uses `currentColor`. |
|
|
188
|
+
| `@codenhub/styles/tw/tooltip` | Source theme plus tooltip utilities. |
|
|
189
|
+
| `@codenhub/styles/tw/reset` | Source theme, typography utilities, and global reset/accessibility rules. It changes root/body/elements and selection, motion, focus, scrollbar, and forced colors. |
|
|
190
|
+
| `@codenhub/styles/tw/native` | Source complete surface plus reset and classless native-element mappings; broadest global effects. |
|
|
191
|
+
| `@codenhub/styles/tw/typography` | Source theme plus typography utilities; sets theme selectors but no reset or classless mappings. |
|
|
192
|
+
| `@codenhub/styles/tw/utilities` | Source theme and typography composition plus layout and content utilities; safelists the package utility names. |
|
|
193
|
+
| `@codenhub/styles/tw/aesthetics` | Source aesthetics, combined. `/tw/aesthetics/neobrutalism`, `/glass`, `/pixel`, and `/chunky-tile` publish one apiece. Plain CSS with no theme or reset side effects. |
|
|
193
194
|
|
|
194
195
|
Avoid importing overlapping entrypoints in the same build unless duplicate generated CSS is acceptable; pick the narrowest entrypoint that covers what a page needs.
|
|
195
196
|
|
|
@@ -347,18 +348,19 @@ The edge is the silhouette and nothing else. Rules _inside_ a component that has
|
|
|
347
348
|
|
|
348
349
|
With no presentation class in scope, each component keeps its own default: buttons are filled, alerts and badges are tinted, surfaces and controls are neutral and bordered.
|
|
349
350
|
|
|
350
|
-
| Component | Reads
|
|
351
|
-
| ----------------------------------------------- |
|
|
352
|
-
| `.btn`, `.alert`, `.badge`, `.card`, `.panel` | Fill, text, border, and border width.
|
|
353
|
-
| `.kbd` | Fill, text, border, and border width.
|
|
354
|
-
| `.data-table` | Header fill and text, border, border width.
|
|
355
|
-
| `.ipt`, `.textarea`, `.select`, `.text-control` | Border, border width, and a capped fill.
|
|
356
|
-
| `.input-group` | Border, border width, and a capped fill.
|
|
357
|
-
| `.checkbox`, `.radio` | A capped fill, checked and unchecked.
|
|
358
|
-
| `.switch` | Border, border width, and a capped fill.
|
|
359
|
-
| `.quote` | Fill, text, border, and width.
|
|
360
|
-
| `.code`, `.pre`, `.tooltip-bubble` | Fill, text, border, and material.
|
|
361
|
-
| `.
|
|
351
|
+
| Component | Reads |
|
|
352
|
+
| ----------------------------------------------- | ----------------------------------------------------------------------------------------------- |
|
|
353
|
+
| `.btn`, `.alert`, `.badge`, `.card`, `.panel` | Fill, text, border, and border width. |
|
|
354
|
+
| `.kbd` | Fill, text, border, and border width. |
|
|
355
|
+
| `.data-table` | Header fill and text, border, border width. |
|
|
356
|
+
| `.ipt`, `.textarea`, `.select`, `.text-control` | Border, border width, and a capped fill. |
|
|
357
|
+
| `.input-group` | Border, border width, and a capped fill. |
|
|
358
|
+
| `.checkbox`, `.radio` | A capped fill, checked and unchecked. |
|
|
359
|
+
| `.switch` | Border, border width, and a capped fill. |
|
|
360
|
+
| `.quote` | Fill, text, border, and width. |
|
|
361
|
+
| `.code`, `.pre`, `.tooltip-bubble` | Fill, text, border, and material. |
|
|
362
|
+
| `.progress` | Track fill, border, and border width; the value fill is always the intent color, full strength. |
|
|
363
|
+
| `.loader`, `.skeleton`, `.divider` | Intent only, not presentation. |
|
|
362
364
|
|
|
363
365
|
A text control caps a **cascaded** fill at `6%`, keeping typed text legible when a `.solid` container reaches a field nobody classed. A fill class written on the control itself names its own cap instead, because that is a consumer describing what they want: `.soft` takes `12%` and `.solid` takes `20%`.
|
|
364
366
|
|
|
@@ -397,13 +399,15 @@ Presentation is two independent axes, so they get a column each. A `Yes` means t
|
|
|
397
399
|
| `.surface` | Yes | Yes | Yes | Shape |
|
|
398
400
|
| `.checkbox`, `.radio` | Yes | Yes | No | Radius and edge |
|
|
399
401
|
| `.switch` | Yes | Yes | Yes | Radius and edge |
|
|
400
|
-
| `.progress` | Yes |
|
|
402
|
+
| `.progress` | Yes | Yes | Yes | Radius and edge |
|
|
401
403
|
| `.code`, `.pre` | Yes | Yes | Yes | Radius and clip |
|
|
402
404
|
| `.tooltip-bubble` | Yes | Yes | Yes | Shape and overlay |
|
|
403
405
|
| `.table-wrap`, `.quote-inline`, layout and text utilities | No | No | No | No |
|
|
404
406
|
|
|
405
407
|
`.checkbox` and `.radio` are the only components that read one axis and not the other. Their line is the only thing marking an unchecked box, so it is drawn whatever the edge class says, from a container or from the element itself. `.edgeless` on either is unsupported rather than merely discouraged.
|
|
406
408
|
|
|
409
|
+
`.progress` reads both axes on its track; the value fill, the moving bar itself, is always the intent color at full strength and never changes. `.solid` is unsupported on the track: at full fill the track and the value fill compose the same color, and the one thing the component exists to show — how much is filled versus not — disappears. `.ghost.edgeless` renders (no fill, no border) but is not recommended: `.ghost.edged` — an outline capsule around the moving fill — keeps a visible frame at rest, while pairing `.ghost` with `.edgeless` leaves the track with none.
|
|
410
|
+
|
|
407
411
|
Every other text control floors a _cascaded_ `.edgeless` and honours its own: a `.edgeless` toolbar will not erase the line of a field nobody classed, while `.ipt.edgeless` is a consumer describing what they want and gets it.
|
|
408
412
|
|
|
409
413
|
Intent aliases such as `.danger` and `.error` occupy the same intent axis as `.destructive`; they do not add component behavior. State and modifier classes such as `.interactive`, `.hoverable`, `.pressable`, `.invalid`, `.compact`, and `.vertical` sit above this map and are documented with their component.
|
|
@@ -716,6 +720,33 @@ Knobs and material tokens reach in opposite directions, and telling them apart m
|
|
|
716
720
|
|
|
717
721
|
Shipped aesthetics set the shared material tokens above. `.neobrutalism` and `.pixel` set `--ui-ink` for their neutral outline; intent classes still override the intent slots on each component.
|
|
718
722
|
|
|
723
|
+
## Generated palette
|
|
724
|
+
|
|
725
|
+
`@codenhub/styles/palette` is a generated, self-contained stylesheet of every `intent x presentation` cell's composed colors, baked to flat `--palette-*` custom properties -- the same values `box.css` composes live, computed once at build time rather than re-derived. It exists for a consumer that cannot take `@codenhub/styles` as a build-time dependency (an optional peer, for example) but still wants to look consistent with it, not as a replacement for the components themselves when Tailwind is available.
|
|
726
|
+
|
|
727
|
+
```css
|
|
728
|
+
@import "@codenhub/styles/palette";
|
|
729
|
+
```
|
|
730
|
+
|
|
731
|
+
```css
|
|
732
|
+
.my-badge {
|
|
733
|
+
background: var(--palette-success-soft-page-bg);
|
|
734
|
+
color: var(--palette-success-soft-fg);
|
|
735
|
+
border-color: var(--palette-success-soft-page-edge);
|
|
736
|
+
}
|
|
737
|
+
```
|
|
738
|
+
|
|
739
|
+
Every value is already the composited color -- never a `var(--color-background)` or `var(--intent-subtle)` reference -- so this file never needs `./theme` loaded alongside it to resolve anything.
|
|
740
|
+
|
|
741
|
+
Naming: `--palette-<intent>-<presentation>-<slot>`, where `<intent>` is one of the seven published intents (`neutral`, `primary`, `secondary`, `success`, `warning`, `destructive`, `info`) and `<presentation>` is `solid`, `soft`, or `ghost`. `<slot>` is `bg`, `fg`, or `edge`. Two qualifiers layer on only where they apply:
|
|
742
|
+
|
|
743
|
+
- 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`.
|
|
744
|
+
- A `-hover` suffix on `bg` and `edge` only -- `fg` never changes on hover: `--palette-success-soft-page-bg-hover`.
|
|
745
|
+
|
|
746
|
+
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. 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.
|
|
747
|
+
|
|
748
|
+
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.
|
|
749
|
+
|
|
719
750
|
## Component internals
|
|
720
751
|
|
|
721
752
|
Component classes may define scoped implementation variables such as `--surface-padding`, `--field-gap`, `--input-group-pad`, `--switch-*`, `--table-*`, `--quote-*`, and `--tooltip-*`. These variables are internal wiring for class composition and are not the public token contract.
|
|
@@ -1088,7 +1119,7 @@ Loader size modifiers:
|
|
|
1088
1119
|
|
|
1089
1120
|
Alerts, badges, progress bars, skeletons, and loaders accept `.primary`, `.secondary`, `.success`, `.warning`, `.destructive`, `.danger`, `.error`, and `.info`. Without an intent, they use the text palette, except `.loader`, which keeps `currentColor` so it matches whatever content surrounds it.
|
|
1090
1121
|
|
|
1091
|
-
Skeletons, loaders,
|
|
1122
|
+
Skeletons, loaders, and dividers are indicators: they read intent but ignore fill and edge [presentation](docs/usage/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](docs/usage/composing.md#component-axis-reference) for the full table.
|
|
1092
1123
|
|
|
1093
1124
|
```html
|
|
1094
1125
|
<span class="loader success" aria-hidden="true"></span> <span class="skeleton info"></span>
|
|
@@ -1123,6 +1154,7 @@ Alerts and badges read the shared [presentation](docs/usage/composing.md#present
|
|
|
1123
1154
|
<span class="loader dots-grow lg" aria-hidden="true"></span>
|
|
1124
1155
|
<div class="progress" role="progressbar" aria-label="Upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="--progress-value: 64%"></div>
|
|
1125
1156
|
<div class="progress secondary active" role="progressbar" aria-label="Upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="--progress-value: 64%"></div>
|
|
1157
|
+
<div class="progress primary ghost edged" role="progressbar" aria-label="Upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="--progress-value: 64%"></div>
|
|
1126
1158
|
<div class="progress info indeterminate" role="progressbar" aria-label="Loading" aria-valuemin="0" aria-valuemax="100"></div>
|
|
1127
1159
|
```
|
|
1128
1160
|
|
|
@@ -1648,13 +1680,14 @@ This package provides CSS hooks for accessible states. It does not provide seman
|
|
|
1648
1680
|
|
|
1649
1681
|
### Control boundaries
|
|
1650
1682
|
|
|
1651
|
-
| Feature | Behavior
|
|
1652
|
-
| -------------------- |
|
|
1653
|
-
| Control boundaries | Text controls rest at `--_line-rest` of their intent, under 3:1 by choice; hover and focus take the tone whole.
|
|
1654
|
-
| Toggle boundaries | `.checkbox`, `.radio`, and `.switch` draw their line whole, because it is the only thing marking an unchecked box.
|
|
1655
|
-
| Cascaded `.edgeless` | Floored on every text control: a container cannot erase the line of a field or toggle nobody classed.
|
|
1656
|
-
| Own `.edgeless` | On the element, `.ipt`, `.textarea`, `.select`, and `.switch` do drop their line and do not meet 1.4.11 at rest, except `.switch.ghost`: `.ghost` already asks for zero fill, so dropping the line too would leave no boundary at all, and `.switch.ghost.edgeless` keeps it up instead.
|
|
1657
|
-
| `.checkbox`/`.radio` | Never drop their line, on the element or from a container. `.edgeless` on them is unsupported, not merely discouraged.
|
|
1683
|
+
| Feature | Behavior |
|
|
1684
|
+
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1685
|
+
| Control boundaries | Text controls rest at `--_line-rest` of their intent, under 3:1 by choice; hover and focus take the tone whole. |
|
|
1686
|
+
| Toggle boundaries | `.checkbox`, `.radio`, and `.switch` draw their line whole, because it is the only thing marking an unchecked box. |
|
|
1687
|
+
| Cascaded `.edgeless` | Floored on every text control: a container cannot erase the line of a field or toggle nobody classed. |
|
|
1688
|
+
| Own `.edgeless` | On the element, `.ipt`, `.textarea`, `.select`, and `.switch` do drop their line and do not meet 1.4.11 at rest, except `.switch.ghost`: `.ghost` already asks for zero fill, so dropping the line too would leave no boundary at all, and `.switch.ghost.edgeless` keeps it up instead. |
|
|
1689
|
+
| `.checkbox`/`.radio` | Never drop their line, on the element or from a container. `.edgeless` on them is unsupported, not merely discouraged. |
|
|
1690
|
+
| Progress track | Known gap. `.progress`'s registered default, `.soft.edgeless`, does not meet 1.4.11 at rest -- measured ~1.1-1.3:1 against the page in both themes and across intents, down from the ~3.6-4.3:1 the prior fixed-neutral track cleared. An `.edged` presentation restores a boundary through the line for most intents (`primary.soft.edged` ~15:1), but not every one clears 3:1 there either (`warning.soft.edged` ~2.7:1). A consumer whose track must meet 1.4.11 should choose an `.edged` presentation and verify the intents they use, until this is resolved. |
|
|
1658
1691
|
|
|
1659
1692
|
### Motion and transparency
|
|
1660
1693
|
|
|
@@ -1723,6 +1756,19 @@ Use ARIA or data attributes when native attributes are not available for the ele
|
|
|
1723
1756
|
|
|
1724
1757
|
`aria-disabled="true"` communicates disabled state but does not prevent activation. JavaScript or element choice must prevent activation when required.
|
|
1725
1758
|
|
|
1759
|
+
<!-- Source: docs/changelog/0.3.0.md -->
|
|
1760
|
+
|
|
1761
|
+
# 0.3.0
|
|
1762
|
+
|
|
1763
|
+
## Added
|
|
1764
|
+
|
|
1765
|
+
- **`@codenhub/styles/palette`**, a generated, self-contained stylesheet of every `intent x presentation` cell's composed colors -- `--palette-<intent>-<presentation>[-<ground>]-<slot>[-hover]` custom properties, already-composited light and dark values, for a consumer that cannot take this package as a build-time dependency (an optional peer, for example) but wants to look consistent with it. Not a replacement for the components themselves when Tailwind is available. Also includes `--palette-border`/`--palette-surface`/`--palette-text`, flat values for the three neutral surface tokens that sit outside the intent x presentation cross. See [Customizing → Generated palette](docs/usage/customizing.md#generated-palette).
|
|
1766
|
+
|
|
1767
|
+
## Changed
|
|
1768
|
+
|
|
1769
|
+
- **`.progress`'s track reads presentation.** It used to be intent-only, like `.loader`, `.skeleton`, and `.divider`; now it composes a fill and an edge like `.quote` does, while the moving value fill stays `--intent-color` at full strength, unaffected by presentation. The registered default is `.soft.edgeless`, chosen to stay closest to the previous fixed-neutral look, but it renders differently than before: it now tints by intent instead of a fixed grey, and every existing `.progress` gets that new look with no markup change. `.solid` is unsupported on the track (a fully-filled track and the value fill it carries would become the same color); `.ghost.edgeless` renders but is discouraged, since it leaves the track with neither fill nor line.
|
|
1770
|
+
- **Known issue: the new `.progress.soft.edgeless` default does not meet WCAG 1.4.11's 3:1 non-text contrast floor.** Measured at roughly 1.1-1.3:1 against the page, in both themes and across intents -- down from the ~3.6-4.3:1 the prior fixed-neutral track cleared. An `.edged` presentation restores a boundary through the line for most intents, but not all of them clear 3:1 there either (`warning.soft.edged` measured ~2.7:1). A consumer whose track must meet 1.4.11 should choose an `.edged` presentation and verify the intents they use. See [Accessibility](docs/accessibility.md#control-boundaries).
|
|
1771
|
+
|
|
1726
1772
|
<!-- Source: docs/changelog/0.2.0.md -->
|
|
1727
1773
|
|
|
1728
1774
|
# 0.2.0
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codenhub/styles",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "CSS-only Codenhub design tokens, base styles, and composable UI helper classes.",
|
|
6
6
|
"homepage": "https://github.com/codenhub/codenhub/tree/main/packages/styles",
|
|
@@ -33,6 +33,11 @@
|
|
|
33
33
|
"import": "./dist/theme.css",
|
|
34
34
|
"default": "./dist/theme.css"
|
|
35
35
|
},
|
|
36
|
+
"./palette": {
|
|
37
|
+
"style": "./dist/palette.css",
|
|
38
|
+
"import": "./dist/palette.css",
|
|
39
|
+
"default": "./dist/palette.css"
|
|
40
|
+
},
|
|
36
41
|
"./components": {
|
|
37
42
|
"style": "./dist/components.css",
|
|
38
43
|
"import": "./dist/components.css",
|
|
@@ -168,8 +173,9 @@
|
|
|
168
173
|
"dev": "pnpm --filter=@codenhub/styles-dev dev",
|
|
169
174
|
"debug": "pnpm build && pnpm --filter=@codenhub/styles-debug dev",
|
|
170
175
|
"demo": "pnpm build && pnpm --filter=@codenhub/styles-demo dev",
|
|
176
|
+
"generate": "node scripts/generate-palette.mjs",
|
|
171
177
|
"build": "pnpm clean && pnpm build:styles && pnpm build:aesthetics && pnpm build:tw",
|
|
172
|
-
"build:styles": "tailwindcss -i ./src/index.css -o ./dist/index.css --minify && tailwindcss -i ./src/theme.css -o ./dist/theme.css --minify && tailwindcss -i ./src/components/index.css -o ./dist/components.css --minify && tailwindcss -i ./src/native.css -o ./dist/native.css --minify",
|
|
178
|
+
"build:styles": "tailwindcss -i ./src/index.css -o ./dist/index.css --minify && tailwindcss -i ./src/theme.css -o ./dist/theme.css --minify && tailwindcss -i ./src/palette.css -o ./dist/palette.css --minify && tailwindcss -i ./src/components/index.css -o ./dist/components.css --minify && tailwindcss -i ./src/native.css -o ./dist/native.css --minify",
|
|
173
179
|
"build:aesthetics": "tailwindcss -i ./src/aesthetics/index.css -o ./dist/aesthetics/index.css --minify && tailwindcss -i ./src/aesthetics/neobrutalism.css -o ./dist/aesthetics/neobrutalism.css --minify && tailwindcss -i ./src/aesthetics/glass.css -o ./dist/aesthetics/glass.css --minify && tailwindcss -i ./src/aesthetics/pixel.css -o ./dist/aesthetics/pixel.css --minify && tailwindcss -i ./src/aesthetics/chunky-tile.css -o ./dist/aesthetics/chunky-tile.css --minify",
|
|
174
180
|
"build:tw": "node scripts/build-tw.mjs",
|
|
175
181
|
"prepublishOnly": "pnpm build && pnpm typecheck && pnpm test",
|
|
@@ -183,6 +189,7 @@
|
|
|
183
189
|
"typecheck": "tsc -b"
|
|
184
190
|
},
|
|
185
191
|
"devDependencies": {
|
|
192
|
+
"@codenhub/tools": "workspace:*",
|
|
186
193
|
"@playwright/test": "catalog:",
|
|
187
194
|
"@tailwindcss/cli": "catalog:",
|
|
188
195
|
"@types/node": "catalog:",
|