dowel-ui 0.9.0 → 0.11.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 +17 -4
- package/dist/theme.css +20 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ A dowel is the hidden peg that joins two boards so the seam does not show. That
|
|
|
11
11
|
**[Documentation](https://lacodda.github.io/dowel/)** — what everything is and why it is that way.
|
|
12
12
|
**[The stand](https://lacodda.github.io/dowel/stand/)** — every component, live, in either theme and in the accent of any product of the line.
|
|
13
13
|
|
|
14
|
-
**Status:** v0.
|
|
14
|
+
**Status:** v0.11.0 - the theme, the scales, an accent per product, twenty-six components - overlays, menus, the command palette and the three ways of saying something happened - and the gates each one passes: axe, the keyboard, a dependency budget and a picture in both themes. The first product of the line lives on it. See the [roadmap](#roadmap).
|
|
15
15
|
|
|
16
16
|
## The theme
|
|
17
17
|
|
|
@@ -83,10 +83,23 @@ your code:
|
|
|
83
83
|
npx shadcn@latest add https://lacodda.github.io/dowel/r/button.json
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
-
Twenty of them so far. The everyday ones - Button, Input, Textarea, Panel,
|
|
86
|
+
Twenty-six of them so far. The everyday ones - Button, Input, Textarea, Panel,
|
|
87
87
|
Badge, Chip, Kbd, Spinner, Truncate and Copyable; the six that float above the
|
|
88
|
-
page - Dialog, ConfirmDialog, Drawer, Popover, PreviewCard and Tooltip;
|
|
89
|
-
|
|
88
|
+
page - Dialog, ConfirmDialog, Drawer, Popover, PreviewCard and Tooltip; four
|
|
89
|
+
for choosing something - Menu, ContextMenu, Select and Combobox; three for
|
|
90
|
+
finding it - SearchField, CommandPalette and the `useShortcut` behind them; and
|
|
91
|
+
three for saying that something happened: Toast, Alert and Banner.
|
|
92
|
+
|
|
93
|
+
Those last three are the ones products keep confusing, so each page names all
|
|
94
|
+
four options: a **toast** goes away, an **alert** is still true after a reload,
|
|
95
|
+
a **banner** is true on every screen, and anything that needs an answer is a
|
|
96
|
+
**dialog**.
|
|
97
|
+
|
|
98
|
+
The palette is a Combobox rather than a Dialog with a field in it, which is
|
|
99
|
+
Base UI's own arrangement: put the input inside the popup and the popup becomes
|
|
100
|
+
a dialog on its own, with the input still the combobox that owns the list. So
|
|
101
|
+
the filtering, the highlight and the arrow keys are the ones Combobox already
|
|
102
|
+
has - there is no second implementation of any of it.
|
|
90
103
|
|
|
91
104
|
`Select` is the one the line's oldest rule is about. It renders
|
|
92
105
|
`<button role="combobox">` and no native `<select>` at all - the browser draws
|
package/dist/theme.css
CHANGED
|
@@ -105,10 +105,21 @@
|
|
|
105
105
|
--bg: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ground));
|
|
106
106
|
--raise: #ffffff;
|
|
107
107
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
108
|
+
/* Tinted, and translucent - which took two goes to get right.
|
|
109
|
+
*
|
|
110
|
+
* `color-mix` mixes the alpha along with the colour, so mixing 60% of an
|
|
111
|
+
* opaque accent into a 5%-opaque grey gives a surface 62% opaque: twelve
|
|
112
|
+
* times denser than the hairline it was meant to be. It went unnoticed for
|
|
113
|
+
* ten versions because `bg-soft` was only ever used for a hover, where a
|
|
114
|
+
* flash of colour reads as feedback rather than as a mistake. The first
|
|
115
|
+
* component to sit on it permanently - Alert - made it obvious.
|
|
116
|
+
*
|
|
117
|
+
* `oklch(from … / alpha)` keeps the alpha out of the mix: the hue comes
|
|
118
|
+
* from the tinted colour, the transparency is stated. */
|
|
119
|
+
--soft: oklch(from color-mix(in oklab, var(--neutral-base) 45%, #181420) l c h / 0.05);
|
|
120
|
+
--softer: oklch(from color-mix(in oklab, var(--neutral-base) 45%, #181420) l c h / 0.03);
|
|
121
|
+
--line: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.11);
|
|
122
|
+
--line-2: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.2);
|
|
112
123
|
|
|
113
124
|
--text: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ink));
|
|
114
125
|
--dim: color-mix(in oklab, var(--neutral-base) var(--neutral-tint-strong), #63606b);
|
|
@@ -147,10 +158,11 @@
|
|
|
147
158
|
--bg: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ground));
|
|
148
159
|
--raise: #ffffff;
|
|
149
160
|
|
|
150
|
-
|
|
151
|
-
--
|
|
152
|
-
--
|
|
153
|
-
--line
|
|
161
|
+
/* The same surfaces as above; see the note there. */
|
|
162
|
+
--soft: oklch(from color-mix(in oklab, var(--neutral-base) 45%, #181420) l c h / 0.05);
|
|
163
|
+
--softer: oklch(from color-mix(in oklab, var(--neutral-base) 45%, #181420) l c h / 0.03);
|
|
164
|
+
--line: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.11);
|
|
165
|
+
--line-2: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.2);
|
|
154
166
|
|
|
155
167
|
--text: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ink));
|
|
156
168
|
--dim: color-mix(in oklab, var(--neutral-base) var(--neutral-tint-strong), #63606b);
|
package/package.json
CHANGED