@atelier-ui/react 0.2.13 → 0.2.14
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 +11 -0
- package/package.json +1 -1
- package/src/lib/button/atl-button.css +18 -6
- package/src/lib/input/atl-input.css +8 -3
- package/styles/tokens.css +12 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
## 0.2.14 (2026-08-26)
|
|
2
|
+
|
|
3
|
+
### 🩹 Fixes
|
|
4
|
+
|
|
5
|
+
- **tokens:** the control height is the primitive, padding is derived (ADR-0041) ([df973f7](https://github.com/DominikPieper/atelier-ui/commit/df973f7))
|
|
6
|
+
|
|
7
|
+
### ❤️ Thank You
|
|
8
|
+
|
|
9
|
+
- Claude Opus 5
|
|
10
|
+
- Dominik Pieper @DominikPieper
|
|
11
|
+
|
|
1
12
|
## 0.2.13 (2026-08-26)
|
|
2
13
|
|
|
3
14
|
### 🩹 Fixes
|
package/package.json
CHANGED
|
@@ -98,21 +98,33 @@
|
|
|
98
98
|
|
|
99
99
|
/* Sizes — modern target heights (sm 32px / md 40px / lg 48px) */
|
|
100
100
|
.atl-button.size-sm {
|
|
101
|
-
padding:
|
|
101
|
+
padding: calc(
|
|
102
|
+
(var(--ui-control-height-sm) - var(--ui-line-height-tight) * var(--ui-font-size-sm)) / 2 -
|
|
103
|
+
1px
|
|
104
|
+
)
|
|
105
|
+
0.875rem;
|
|
102
106
|
font-size: var(--ui-font-size-sm);
|
|
103
|
-
min-height:
|
|
107
|
+
min-height: var(--ui-control-height-sm);
|
|
104
108
|
}
|
|
105
109
|
|
|
106
110
|
.atl-button.size-md {
|
|
107
|
-
padding:
|
|
111
|
+
padding: calc(
|
|
112
|
+
(var(--ui-control-height-md) - var(--ui-line-height-tight) * var(--ui-font-size-md)) / 2 -
|
|
113
|
+
1px
|
|
114
|
+
)
|
|
115
|
+
1.125rem;
|
|
108
116
|
font-size: var(--ui-font-size-md);
|
|
109
|
-
min-height:
|
|
117
|
+
min-height: var(--ui-control-height-md);
|
|
110
118
|
}
|
|
111
119
|
|
|
112
120
|
.atl-button.size-lg {
|
|
113
|
-
padding:
|
|
121
|
+
padding: calc(
|
|
122
|
+
(var(--ui-control-height-lg) - var(--ui-line-height-tight) * var(--ui-font-size-lg)) / 2 -
|
|
123
|
+
1px
|
|
124
|
+
)
|
|
125
|
+
1.5rem;
|
|
114
126
|
font-size: var(--ui-font-size-lg);
|
|
115
|
-
min-height:
|
|
127
|
+
min-height: var(--ui-control-height-lg);
|
|
116
128
|
}
|
|
117
129
|
|
|
118
130
|
/* Disabled */
|
|
@@ -7,11 +7,16 @@
|
|
|
7
7
|
.atl-input input {
|
|
8
8
|
display: block;
|
|
9
9
|
width: 100%;
|
|
10
|
-
min-height:
|
|
11
|
-
padding:
|
|
10
|
+
min-height: var(--ui-control-height-md);
|
|
11
|
+
padding: calc(
|
|
12
|
+
(var(--ui-control-height-md) - var(--ui-line-height-tight) * var(--ui-font-size-md)) / 2 - 1px
|
|
13
|
+
)
|
|
14
|
+
var(--ui-spacing-4);
|
|
12
15
|
font-size: inherit;
|
|
13
16
|
font-family: inherit;
|
|
14
|
-
line-height:
|
|
17
|
+
/* Control line-height, not the prose one: a single-line field has nothing to
|
|
18
|
+
* read across lines, and 1.5 is what made it 6px taller than a button. */
|
|
19
|
+
line-height: var(--ui-line-height-tight);
|
|
15
20
|
color: var(--ui-color-text);
|
|
16
21
|
background-color: var(--ui-color-input-bg);
|
|
17
22
|
border: 1px solid var(--ui-color-input-border);
|
package/styles/tokens.css
CHANGED
|
@@ -38,6 +38,18 @@
|
|
|
38
38
|
--ui-letter-spacing-wide: 0.01em;
|
|
39
39
|
--ui-letter-spacing-uppercase: 0.08em;
|
|
40
40
|
--ui-font-size-3xl: 2.25rem;
|
|
41
|
+
|
|
42
|
+
/* ── Control heights ────────────────────────────────────────
|
|
43
|
+
* The height of an interactive control is the primitive; its block padding
|
|
44
|
+
* is DERIVED from it (ADR-0041):
|
|
45
|
+
* padding-block: calc((height - line-height * font-size) / 2 - border)
|
|
46
|
+
* Stating the height and deriving the padding is what makes an input and a
|
|
47
|
+
* button the same height. Stating the padding and hoping, which is what the
|
|
48
|
+
* library did until 2026-08-26, made them 6px apart.
|
|
49
|
+
*/
|
|
50
|
+
--ui-control-height-sm: 2rem;
|
|
51
|
+
--ui-control-height-md: 2.5rem;
|
|
52
|
+
--ui-control-height-lg: 3rem;
|
|
41
53
|
--ui-font-weight-normal: 400;
|
|
42
54
|
--ui-font-weight-medium: 500;
|
|
43
55
|
--ui-font-weight-semibold: 600;
|