@atelier-ui/react 0.2.18 → 0.2.19
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/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
## 0.2.19 (2026-08-26)
|
|
2
|
+
|
|
3
|
+
### 🚀 Features
|
|
4
|
+
|
|
5
|
+
- **rows:** prove the row recipe on two boxes, and what that exposed ([14284f9](https://github.com/DominikPieper/atelier-ui/commit/14284f9))
|
|
6
|
+
- **tokens:** the row ladder — --ui-row-inset and --ui-row-height-sm/md/lg ([b2f390a](https://github.com/DominikPieper/atelier-ui/commit/b2f390a))
|
|
7
|
+
|
|
8
|
+
### ❤️ Thank You
|
|
9
|
+
|
|
10
|
+
- Claude Opus 5
|
|
11
|
+
- Dominik Pieper @DominikPieper
|
|
12
|
+
|
|
1
13
|
## 0.2.18 (2026-08-26)
|
|
2
14
|
|
|
3
15
|
### 🩹 Fixes
|
package/package.json
CHANGED
|
@@ -156,8 +156,15 @@
|
|
|
156
156
|
display: flex;
|
|
157
157
|
align-items: center;
|
|
158
158
|
justify-content: space-between;
|
|
159
|
-
|
|
160
|
-
|
|
159
|
+
/* Row recipe (ADR-0052): the height is stated, the block padding is zero and the
|
|
160
|
+
* content is centred. A row centres, a control pads — ADR-0041's derived-padding
|
|
161
|
+
* formula produces the wrong box here. The line-height is stated so the box does
|
|
162
|
+
* not follow the installed font (ADR-0048).
|
|
163
|
+
*/
|
|
164
|
+
min-height: var(--ui-row-height-sm);
|
|
165
|
+
padding-block: 0;
|
|
166
|
+
line-height: var(--ui-line-height-tight);
|
|
167
|
+
padding-inline: var(--ui-spacing-4);
|
|
161
168
|
cursor: pointer;
|
|
162
169
|
color: var(--ui-color-text);
|
|
163
170
|
font-size: var(--ui-font-size-md);
|
|
@@ -68,8 +68,14 @@
|
|
|
68
68
|
display: flex;
|
|
69
69
|
align-items: center;
|
|
70
70
|
gap: var(--ui-spacing-3);
|
|
71
|
-
|
|
72
|
-
|
|
71
|
+
/* Row recipe (ADR-0052): the height is stated, the block padding is zero and the
|
|
72
|
+
* content is centred. A row centres, a control pads — ADR-0041's derived-padding
|
|
73
|
+
* formula produces the wrong box here. The line-height is stated so the box does
|
|
74
|
+
* not follow the installed font (ADR-0048).
|
|
75
|
+
*/
|
|
76
|
+
min-height: var(--ui-row-height-sm);
|
|
77
|
+
padding-block: 0;
|
|
78
|
+
padding-inline: var(--ui-spacing-4);
|
|
73
79
|
cursor: pointer;
|
|
74
80
|
color: var(--ui-color-text);
|
|
75
81
|
transition: background var(--ui-transition-fast);
|
|
@@ -77,6 +83,10 @@
|
|
|
77
83
|
border: none;
|
|
78
84
|
background: none;
|
|
79
85
|
font: inherit;
|
|
86
|
+
/* After `font: inherit`, which is a shorthand and resets line-height along with
|
|
87
|
+
* everything else. Declared above it, the row's stated line-height was silently
|
|
88
|
+
* erased and the box grew with the text metrics again (ADR-0052). */
|
|
89
|
+
line-height: var(--ui-line-height-tight);
|
|
80
90
|
width: 100%;
|
|
81
91
|
text-align: start;
|
|
82
92
|
}
|
package/styles/tokens.css
CHANGED
|
@@ -47,6 +47,32 @@
|
|
|
47
47
|
* button the same height. Stating the padding and hoping, which is what the
|
|
48
48
|
* library did until 2026-08-26, made them 6px apart.
|
|
49
49
|
*/
|
|
50
|
+
/* ── Row heights ────────────────────────────────────────────────────────────
|
|
51
|
+
* A row is taller than the control it holds. That relation lives here, in a
|
|
52
|
+
* calc over the control scale, rather than as a convention thirty stylesheets
|
|
53
|
+
* have to honour: `--ui-row-inset: 0` collapses the two ladders into one in a
|
|
54
|
+
* single edit.
|
|
55
|
+
*
|
|
56
|
+
* Measured, which is why the inset exists: a table cell at the *control* height
|
|
57
|
+
* of 40 renders 41.0px when it holds a 40px control (the extra pixel is the two
|
|
58
|
+
* collapsed cell borders), while the same cell at 48 renders exactly 48.00px
|
|
59
|
+
* holding text, a badge, an sm button, an md button or an md avatar. So at the
|
|
60
|
+
* row height any control of the matching step fits, with no convention.
|
|
61
|
+
*
|
|
62
|
+
* A row CENTRES its content; a control PADS it. ADR-0041's derived-padding
|
|
63
|
+
* formula therefore does not apply here — a size-md cell with derived padding
|
|
64
|
+
* renders 62.5px holding an md button. The row recipe is
|
|
65
|
+
* `min-height: var(--ui-row-height-*); padding-block: 0; line-height: tight`.
|
|
66
|
+
*
|
|
67
|
+
* Not rows, on purpose: breadcrumbs (17px of inline text, holding no control)
|
|
68
|
+
* and the card/dialog/drawer/chat headers (one-off bands with their own
|
|
69
|
+
* padding, not one line among many). See ADR-0052.
|
|
70
|
+
*/
|
|
71
|
+
--ui-row-inset: 0.25rem;
|
|
72
|
+
--ui-row-height-sm: calc(var(--ui-control-height-sm) + 2 * var(--ui-row-inset));
|
|
73
|
+
--ui-row-height-md: calc(var(--ui-control-height-md) + 2 * var(--ui-row-inset));
|
|
74
|
+
--ui-row-height-lg: calc(var(--ui-control-height-lg) + 2 * var(--ui-row-inset));
|
|
75
|
+
|
|
50
76
|
--ui-control-height-sm: 2rem;
|
|
51
77
|
--ui-control-height-md: 2.5rem;
|
|
52
78
|
--ui-control-height-lg: 3rem;
|
|
@@ -56,6 +82,9 @@
|
|
|
56
82
|
--ui-font-weight-bold: 700;
|
|
57
83
|
--ui-line-height-tight: 1.25;
|
|
58
84
|
--ui-line-height-normal: 1.5;
|
|
85
|
+
/* Code needs looser leading than prose: a reader scans columns, not sentences.
|
|
86
|
+
* AtlCodeBlock had 1.65 as a literal in one stylesheet. */
|
|
87
|
+
--ui-line-height-code: 1.65;
|
|
59
88
|
|
|
60
89
|
/* ── Type roles ─────────────────────────────────────────────
|
|
61
90
|
* Composed entirely from the axes above, so sizes and weights stay
|