@botiverse/raft-ui 0.19.0 → 0.21.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/CHANGELOG.md +191 -3
- package/codemods/button-sizes.mjs +340 -0
- package/codemods/token-names.mjs +16 -0
- package/dist/cn.mjs +23 -2
- package/dist/components/combobox-select/combobox-select.css +58 -40
- package/dist/components/float-button/float-button.css +21 -12
- package/dist/foundation.css +66 -39
- package/dist/{index-DsVVBZ5T.d.mts → index-CP05_pvu.d.mts} +44 -2
- package/dist/index.d.mts +16 -25
- package/dist/index.mjs +213 -166
- package/dist/style.css +73 -58
- package/dist/styles.css +119 -24
- package/dist/tokens.json +90 -55
- package/dist/{touch-drag-CbWqiMlZ.mjs → touch-drag-B7uLTWXe.mjs} +265 -62
- package/dist/wip.d.mts +100 -3
- package/dist/wip.mjs +349 -5
- package/package.json +8 -1
package/dist/cn.mjs
CHANGED
|
@@ -7,9 +7,18 @@ const twMerge = extendTailwindMerge({ extend: {
|
|
|
7
7
|
"control-cta",
|
|
8
8
|
"control-icon",
|
|
9
9
|
"control-hit",
|
|
10
|
+
"control-embedded",
|
|
11
|
+
"embedded-inset",
|
|
10
12
|
"option",
|
|
11
13
|
"option-inset",
|
|
12
|
-
"icon-inset"
|
|
14
|
+
"icon-inset",
|
|
15
|
+
"timeline-message",
|
|
16
|
+
"timeline-section",
|
|
17
|
+
"timeline-row",
|
|
18
|
+
"timeline-turn",
|
|
19
|
+
"timeline-lead",
|
|
20
|
+
"timeline-end",
|
|
21
|
+
"timeline-start"
|
|
13
22
|
] },
|
|
14
23
|
classGroups: {
|
|
15
24
|
shadow: [{ shadow: [
|
|
@@ -50,7 +59,19 @@ const twMerge = extendTailwindMerge({ extend: {
|
|
|
50
59
|
"mono-code",
|
|
51
60
|
"control"
|
|
52
61
|
] }],
|
|
53
|
-
"font-weight": [{ font: ["field", "card-title"] }]
|
|
62
|
+
"font-weight": [{ font: ["field", "card-title"] }],
|
|
63
|
+
"bg-image": [
|
|
64
|
+
{ overlay: [
|
|
65
|
+
"subtle",
|
|
66
|
+
"medium",
|
|
67
|
+
"sticker-medium",
|
|
68
|
+
"frame-medium"
|
|
69
|
+
] },
|
|
70
|
+
"press-overlay",
|
|
71
|
+
"press-overlay-sticker",
|
|
72
|
+
"row-hover-overlay",
|
|
73
|
+
"row-open-overlay"
|
|
74
|
+
]
|
|
54
75
|
}
|
|
55
76
|
} });
|
|
56
77
|
function cn(...inputs) {
|
|
@@ -3,16 +3,24 @@
|
|
|
3
3
|
min-width: 0;
|
|
4
4
|
position: relative;
|
|
5
5
|
}
|
|
6
|
+
/* The chips, the clear button and the toggle are embedded in the field: they
|
|
7
|
+
sit --control-embedded-inset inside its outer edge and as far apart, and
|
|
8
|
+
are as tall as the field less that inset on both sides, so the field keeps
|
|
9
|
+
its height with chips in it. They wear the chip radius
|
|
10
|
+
(design/foundations/shape.md#inside-a-frame). Across the field the inset is
|
|
11
|
+
counted over the 1px Chromium draws the 1.5px border at (WebKit draws
|
|
12
|
+
1.5px: half a pixel more); down it the chips are centred in the field's
|
|
13
|
+
height, which holds on both. */
|
|
6
14
|
.r-combobox-select__control {
|
|
7
15
|
box-sizing: border-box;
|
|
8
16
|
min-width: 0;
|
|
9
17
|
min-height: var(--control-height);
|
|
10
18
|
display: flex;
|
|
11
19
|
align-items: center;
|
|
12
|
-
gap:
|
|
13
|
-
padding: 0
|
|
20
|
+
gap: var(--control-embedded-inset);
|
|
21
|
+
padding: 0 calc(var(--control-embedded-inset) - 1px) 0 12px;
|
|
14
22
|
border: 1.5px solid var(--line-field);
|
|
15
|
-
border-radius:
|
|
23
|
+
border-radius: var(--radius-control);
|
|
16
24
|
outline: 0;
|
|
17
25
|
background: var(--layer-card);
|
|
18
26
|
color: var(--foreground);
|
|
@@ -38,30 +46,30 @@
|
|
|
38
46
|
color: var(--foreground-hint);
|
|
39
47
|
}
|
|
40
48
|
.r-combobox-select__chips {
|
|
41
|
-
min-height:
|
|
49
|
+
min-height: var(--control-embedded-size);
|
|
42
50
|
min-width: 0;
|
|
43
|
-
margin-inline-start: -
|
|
44
|
-
padding:
|
|
51
|
+
margin-inline-start: calc(var(--control-embedded-inset) - 13px);
|
|
52
|
+
padding: calc(var(--control-embedded-inset) - 1.5px) 0;
|
|
45
53
|
display: flex;
|
|
46
54
|
flex: 1;
|
|
47
55
|
flex-wrap: wrap;
|
|
48
56
|
align-items: center;
|
|
49
|
-
gap:
|
|
57
|
+
gap: var(--control-embedded-inset);
|
|
50
58
|
border: 0;
|
|
51
59
|
}
|
|
52
60
|
.r-combobox-select__chips .r-combobox-select__input {
|
|
53
|
-
|
|
61
|
+
height: var(--control-embedded-size);
|
|
54
62
|
padding: 0 4px;
|
|
55
63
|
}
|
|
56
64
|
.r-combobox-select__chip {
|
|
57
65
|
max-width: 100%;
|
|
58
|
-
|
|
66
|
+
height: var(--control-embedded-size);
|
|
59
67
|
padding: 0 2px 0 8px;
|
|
60
68
|
display: inline-flex;
|
|
61
69
|
align-items: center;
|
|
62
70
|
gap: 6px;
|
|
63
71
|
overflow: hidden;
|
|
64
|
-
border-radius:
|
|
72
|
+
border-radius: var(--radius-chip);
|
|
65
73
|
background: var(--fill-muted);
|
|
66
74
|
color: var(--foreground);
|
|
67
75
|
font-size: var(--text-footnote);
|
|
@@ -89,7 +97,7 @@
|
|
|
89
97
|
.r-combobox-select__actions {
|
|
90
98
|
display: inline-flex;
|
|
91
99
|
align-items: center;
|
|
92
|
-
gap:
|
|
100
|
+
gap: var(--control-embedded-inset);
|
|
93
101
|
flex: 0 0 auto;
|
|
94
102
|
}
|
|
95
103
|
.r-combobox-select__action,
|
|
@@ -107,15 +115,15 @@
|
|
|
107
115
|
background-color 150ms ease;
|
|
108
116
|
}
|
|
109
117
|
.r-combobox-select__remove {
|
|
110
|
-
width:
|
|
111
|
-
height:
|
|
112
|
-
border-radius:
|
|
118
|
+
width: calc(var(--control-embedded-size) - 4px);
|
|
119
|
+
height: calc(var(--control-embedded-size) - 4px);
|
|
120
|
+
border-radius: var(--radius-sticker);
|
|
113
121
|
color: var(--foreground-hint);
|
|
114
122
|
}
|
|
115
123
|
.r-combobox-select__action {
|
|
116
|
-
width:
|
|
117
|
-
height:
|
|
118
|
-
border-radius:
|
|
124
|
+
width: var(--control-embedded-size);
|
|
125
|
+
height: var(--control-embedded-size);
|
|
126
|
+
border-radius: var(--radius-chip);
|
|
119
127
|
color: var(--foreground-hint);
|
|
120
128
|
}
|
|
121
129
|
.r-combobox-select__action > svg,
|
|
@@ -130,15 +138,28 @@
|
|
|
130
138
|
width: 0.875rem;
|
|
131
139
|
height: 0.875rem;
|
|
132
140
|
}
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
141
|
+
/* Hover only where there is a pointer that hovers: on a touch screen a
|
|
142
|
+
:hover would stay on the last button tapped. */
|
|
143
|
+
@media (hover: hover) {
|
|
144
|
+
.r-combobox-select__action:hover,
|
|
145
|
+
.r-combobox-select__remove:hover {
|
|
146
|
+
background: var(--fill-medium);
|
|
147
|
+
color: var(--foreground);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
.r-combobox-select__action:active,
|
|
151
|
+
.r-combobox-select__remove:active {
|
|
152
|
+
background: var(--fill-medium);
|
|
136
153
|
color: var(--foreground);
|
|
137
154
|
}
|
|
138
|
-
.r-combobox-select__action:focus-visible
|
|
139
|
-
.r-combobox-select__remove:focus-visible {
|
|
155
|
+
.r-combobox-select__action:focus-visible {
|
|
140
156
|
box-shadow: var(--focus-ring);
|
|
141
157
|
}
|
|
158
|
+
/* The chip clips anything outside it, so the remove button's ring is drawn
|
|
159
|
+
inside, after keyboard navigation only (styles.css, the keyboard variant). */
|
|
160
|
+
.r-combobox-select__remove:focus-visible:not(:where(:root[data-input-modality="pointer"] *)) {
|
|
161
|
+
box-shadow: inset 0 0 0 2px var(--foreground);
|
|
162
|
+
}
|
|
142
163
|
.r-combobox-select__positioner {
|
|
143
164
|
z-index: 50;
|
|
144
165
|
isolation: isolate;
|
|
@@ -152,7 +173,7 @@
|
|
|
152
173
|
max-height: min(var(--available-height), max(24rem, var(--combobox-select-list-max-height, 0px)));
|
|
153
174
|
overflow: hidden;
|
|
154
175
|
border: 0;
|
|
155
|
-
border-radius:
|
|
176
|
+
border-radius: var(--radius-container);
|
|
156
177
|
background: var(--layer-popover);
|
|
157
178
|
color: var(--foreground);
|
|
158
179
|
box-shadow:
|
|
@@ -165,8 +186,8 @@
|
|
|
165
186
|
max-height: var(--combobox-select-list-max-height, 16rem);
|
|
166
187
|
overflow-y: auto;
|
|
167
188
|
overscroll-behavior: contain;
|
|
168
|
-
scroll-padding-block:
|
|
169
|
-
padding:
|
|
189
|
+
scroll-padding-block: 4px;
|
|
190
|
+
padding: 4px;
|
|
170
191
|
}
|
|
171
192
|
.r-combobox-select__option {
|
|
172
193
|
box-sizing: border-box;
|
|
@@ -180,7 +201,7 @@
|
|
|
180
201
|
justify-content: space-between;
|
|
181
202
|
gap: 10px;
|
|
182
203
|
overflow: hidden;
|
|
183
|
-
border-radius:
|
|
204
|
+
border-radius: var(--radius-chip);
|
|
184
205
|
cursor: default;
|
|
185
206
|
user-select: none;
|
|
186
207
|
color: var(--foreground);
|
|
@@ -192,7 +213,12 @@
|
|
|
192
213
|
background-color 120ms ease,
|
|
193
214
|
color 120ms ease;
|
|
194
215
|
}
|
|
195
|
-
|
|
216
|
+
@media (hover: hover) {
|
|
217
|
+
.r-combobox-select__option:hover {
|
|
218
|
+
background: var(--brand-soft);
|
|
219
|
+
color: var(--foreground);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
196
222
|
.r-combobox-select__option[data-highlighted] {
|
|
197
223
|
background: var(--brand-soft);
|
|
198
224
|
color: var(--foreground);
|
|
@@ -250,23 +276,15 @@
|
|
|
250
276
|
animation: r-combobox-select-spin 700ms linear infinite;
|
|
251
277
|
}
|
|
252
278
|
.r-combobox-select--sm.r-combobox-select__control {
|
|
253
|
-
|
|
279
|
+
--control-height: 1.75rem;
|
|
280
|
+
--control-embedded-inset: 3px;
|
|
281
|
+
--control-embedded-size: 22px;
|
|
254
282
|
font-size: var(--text-control);
|
|
255
283
|
line-height: var(--text-control--line-height);
|
|
256
284
|
}
|
|
257
|
-
.r-combobox-select--sm .r-combobox-select__chips {
|
|
258
|
-
min-height: 1.5rem;
|
|
259
|
-
padding: 1px 0;
|
|
260
|
-
}
|
|
261
|
-
.r-combobox-select--sm .r-combobox-select__chip {
|
|
262
|
-
min-height: 1.375rem;
|
|
263
|
-
}
|
|
264
|
-
.r-combobox-select--sm .r-combobox-select__action {
|
|
265
|
-
width: 1.5rem;
|
|
266
|
-
height: 1.5rem;
|
|
267
|
-
}
|
|
268
285
|
.r-combobox-select--lg.r-combobox-select__control {
|
|
269
|
-
|
|
286
|
+
--control-height: 52px;
|
|
287
|
+
--control-embedded-size: 40px;
|
|
270
288
|
}
|
|
271
289
|
.r-combobox-select__control[data-status="error"] {
|
|
272
290
|
border-color: var(--danger-strong);
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
--r-float-button-border-color: var(--line-strong);
|
|
21
21
|
--r-float-button-bg: var(--layer-card);
|
|
22
22
|
--r-float-button-bg-hover: var(--layer-card);
|
|
23
|
-
--r-float-button-press: var(--fill-
|
|
23
|
+
--r-float-button-press: var(--fill-medium);
|
|
24
24
|
--r-float-button-text-color: var(--foreground);
|
|
25
25
|
--r-float-button-text-hover-color: var(--foreground);
|
|
26
26
|
--r-float-button-text-disabled-color: var(--foreground-disabled);
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
--r-float-button-border-color: var(--sticker-ink);
|
|
88
88
|
--r-float-button-bg: var(--attention-400);
|
|
89
89
|
--r-float-button-bg-hover: var(--attention-400);
|
|
90
|
-
--r-float-button-press: var(--sticker-
|
|
90
|
+
--r-float-button-press: var(--sticker-medium);
|
|
91
91
|
--r-float-button-text-color: var(--sticker-ink);
|
|
92
92
|
--r-float-button-text-hover-color: var(--sticker-ink);
|
|
93
93
|
}
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
--r-float-button-border-color: var(--sticker-ink);
|
|
96
96
|
--r-float-button-bg: var(--warning);
|
|
97
97
|
--r-float-button-bg-hover: var(--warning);
|
|
98
|
-
--r-float-button-press: var(--sticker-
|
|
98
|
+
--r-float-button-press: var(--sticker-medium);
|
|
99
99
|
--r-float-button-text-color: var(--sticker-ink);
|
|
100
100
|
--r-float-button-text-hover-color: var(--sticker-ink);
|
|
101
101
|
}
|
|
@@ -103,15 +103,15 @@
|
|
|
103
103
|
--r-float-button-border-color: var(--sticker-ink);
|
|
104
104
|
--r-float-button-bg: var(--danger);
|
|
105
105
|
--r-float-button-bg-hover: var(--danger);
|
|
106
|
-
--r-float-button-press: var(--sticker-
|
|
106
|
+
--r-float-button-press: var(--sticker-medium);
|
|
107
107
|
--r-float-button-text-color: var(--sticker-ink);
|
|
108
108
|
--r-float-button-text-hover-color: var(--sticker-ink);
|
|
109
109
|
}
|
|
110
110
|
&.r-float-button--ghost {
|
|
111
111
|
--r-float-button-border-color: transparent;
|
|
112
112
|
--r-float-button-bg: transparent;
|
|
113
|
-
--r-float-button-bg-hover:
|
|
114
|
-
--r-float-button-press:
|
|
113
|
+
--r-float-button-bg-hover: transparent;
|
|
114
|
+
--r-float-button-press: var(--fill-medium);
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
117
|
|
|
@@ -159,11 +159,15 @@
|
|
|
159
159
|
padding-right: var(--r-float-button-padding-x);
|
|
160
160
|
}
|
|
161
161
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
162
|
+
/* Hover only where there is a pointer that hovers: on a touch screen a
|
|
163
|
+
:hover would stay on the button after the tap. */
|
|
164
|
+
@media (hover: hover) {
|
|
165
|
+
&:hover:not(:disabled) {
|
|
166
|
+
background-color: var(--r-float-button-bg-hover);
|
|
167
|
+
color: var(--r-float-button-text-hover-color);
|
|
168
|
+
box-shadow: var(--r-float-button-shadow-hover);
|
|
169
|
+
transform: var(--r-float-button-transform-hover);
|
|
170
|
+
}
|
|
167
171
|
}
|
|
168
172
|
|
|
169
173
|
&:active:not(:disabled) {
|
|
@@ -179,7 +183,12 @@
|
|
|
179
183
|
|
|
180
184
|
/* Press feedback lays one overlay over the resting fill instead of
|
|
181
185
|
swapping it. */
|
|
182
|
-
|
|
186
|
+
@media (hover: hover) {
|
|
187
|
+
&:hover:not(:disabled) {
|
|
188
|
+
background-image: linear-gradient(var(--r-float-button-press), var(--r-float-button-press));
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
&:active:not(:disabled) {
|
|
183
192
|
background-image: linear-gradient(var(--r-float-button-press), var(--r-float-button-press));
|
|
184
193
|
}
|
|
185
194
|
|
package/dist/foundation.css
CHANGED
|
@@ -11,10 +11,11 @@
|
|
|
11
11
|
hairline < seam < strong for line
|
|
12
12
|
layer = places on the elevation ladder; fill = neutral interaction fills
|
|
13
13
|
(resting/hover/active/disabled surfaces): fill-muted and fill-strong are
|
|
14
|
-
opaque, the
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
opaque, the two hover tiers are translucent ink laid over a surface:
|
|
15
|
+
fill-subtle (hover on rows, messages and readable cards, and a row whose
|
|
16
|
+
menu is open, lighter than any selection tint) and fill-medium (hover on
|
|
17
|
+
small controls, press on everything; fill-frame-medium on the frame,
|
|
18
|
+
sticker-medium on a colour sticker).
|
|
18
19
|
Families: {family}(-{slot})
|
|
19
20
|
family = brand | attention | info | success | warning | danger | inactive
|
|
20
21
|
slot = -strong (deep shade: readable text, rings) > bare (solid fill)
|
|
@@ -24,8 +25,8 @@
|
|
|
24
25
|
an opted-in family always gets both)
|
|
25
26
|
Washes: ink-{alpha%} (2..40) — neutral overlays, hairlines, hover fills.
|
|
26
27
|
Opacity rule: layer tokens are opaque in every theme, except the two
|
|
27
|
-
backdrops (overlays by contract); among fills only the
|
|
28
|
-
|
|
28
|
+
backdrops (overlays by contract); among fills only the hover tiers
|
|
29
|
+
(fill-subtle, fill-medium, fill-frame-medium) are translucent.
|
|
29
30
|
Interaction fills: transparent resting → ink-N directly; solid family fill →
|
|
30
31
|
the family's -hover/-active pair; neutral or tinted surface → step up its ladder.
|
|
31
32
|
Escape hatches: ink ramp for one-off washes; inline oklch() literals for
|
|
@@ -169,21 +170,21 @@
|
|
|
169
170
|
--layer-code: oklch(1 0 0);
|
|
170
171
|
--fill-muted: oklch(0.9642 0 0);
|
|
171
172
|
--fill-strong: oklch(0.936 0.0006 17.62);
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
one perceptible step (OKLab dE about 2.8 in both modes), below every
|
|
173
|
+
/* Hover tier subtle (light): hover on large things people read, a row, a
|
|
174
|
+
message, a readable card, and a row whose menu is open. About 2.5 to 3 OKLab
|
|
175
|
+
dE in both modes, on paper, the sidebar and cards alike, under every
|
|
176
176
|
selection tint, so text keeps its contrast. */
|
|
177
|
-
--fill-
|
|
178
|
-
/* Hover
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
on
|
|
186
|
-
|
|
177
|
+
--fill-subtle: oklch(0.1813 0.005 17.62 / 0.04);
|
|
178
|
+
/* Hover tier medium: hover on small controls (buttons, icon buttons, chips,
|
|
179
|
+
tabs, segment items) and press on everything, on paper-coloured surfaces.
|
|
180
|
+
About 5.5 to 6.5 OKLab dE; dark is lighter than light because the same ink
|
|
181
|
+
alpha shows more on a dark surface. */
|
|
182
|
+
--fill-medium: oklch(0.1813 0.005 17.62 / 0.078);
|
|
183
|
+
/* Hover tier medium on the frame (rail items, on-frame buttons, the workspace
|
|
184
|
+
button): hover and press. Its own alphas because ink shows differently on
|
|
185
|
+
the yellow and on the near-black frame: 10% on the yellow and 6% on the dark
|
|
186
|
+
frame land on the medium step, about 6 OKLab dE. */
|
|
187
|
+
--fill-frame-medium: oklch(0.1813 0.005 17.62 / 0.1);
|
|
187
188
|
--line-strong: oklch(0.1813 0.005 17.62);
|
|
188
189
|
--line-seam: oklch(0.1813 0.005 17.62 / 0.451);
|
|
189
190
|
--line-hairline: oklch(0.1813 0.005 17.62 / 0.149);
|
|
@@ -213,8 +214,9 @@
|
|
|
213
214
|
--brand-soft: oklch(0.9547 0.0674 93.62);
|
|
214
215
|
--brand-edge: var(--sticker-ink);
|
|
215
216
|
--brand-glow: oklch(0.8829 0.1623 91.9);
|
|
216
|
-
/*
|
|
217
|
-
|
|
217
|
+
/* Hovering or pressing a sticker lays sticker-medium (10% ink) over its
|
|
218
|
+
colour. */
|
|
219
|
+
--brand-hover: color-mix(in srgb, var(--brand-400) 90%, var(--sticker-ink));
|
|
218
220
|
--brand-active: var(--brand-hover);
|
|
219
221
|
--attention-50: var(--palette-pink-50);
|
|
220
222
|
--attention-100: var(--palette-pink-100);
|
|
@@ -229,14 +231,14 @@
|
|
|
229
231
|
--attention-950: var(--palette-pink-950);
|
|
230
232
|
--attention-strong: oklch(0.52 0.215 359.77);
|
|
231
233
|
--attention-soft: oklch(0.9141 0.0482 358.59);
|
|
232
|
-
--attention-hover: color-mix(in srgb, var(--attention-400)
|
|
234
|
+
--attention-hover: color-mix(in srgb, var(--attention-400) 90%, var(--sticker-ink));
|
|
233
235
|
--attention-active: var(--attention-hover);
|
|
234
236
|
/* Every solid is a sticker: ink type on the colour in both modes. */
|
|
235
237
|
--info: oklch(0.7833 0.1353 219.21);
|
|
236
238
|
--info-strong: var(--palette-cyan-800);
|
|
237
239
|
--info-muted: var(--palette-cyan-200);
|
|
238
240
|
--info-soft: oklch(0.9452 0.0326 226.3);
|
|
239
|
-
--info-hover: color-mix(in srgb, var(--info)
|
|
241
|
+
--info-hover: color-mix(in srgb, var(--info) 90%, var(--sticker-ink));
|
|
240
242
|
--info-active: var(--info-hover);
|
|
241
243
|
--success: oklch(0.8272 0.1354 130.07);
|
|
242
244
|
--success-foreground: var(--sticker-ink);
|
|
@@ -248,7 +250,7 @@
|
|
|
248
250
|
--warning-strong: var(--palette-orange-800);
|
|
249
251
|
--warning-muted: var(--palette-orange-200);
|
|
250
252
|
--warning-soft: oklch(0.9413 0.0275 40.2);
|
|
251
|
-
--warning-hover: color-mix(in srgb, var(--warning)
|
|
253
|
+
--warning-hover: color-mix(in srgb, var(--warning) 90%, var(--sticker-ink));
|
|
252
254
|
--warning-active: var(--warning-hover);
|
|
253
255
|
/* danger = the destructive sticker (red fill, ink type); danger-strong is the
|
|
254
256
|
error ink for invalid fields and destructive menu items. */
|
|
@@ -257,7 +259,7 @@
|
|
|
257
259
|
--danger-strong: oklch(0.5154 0.1715 32.56);
|
|
258
260
|
--danger-muted: var(--palette-red-200);
|
|
259
261
|
--danger-soft: oklch(0.9259 0.0344 20);
|
|
260
|
-
--danger-hover: color-mix(in srgb, var(--danger)
|
|
262
|
+
--danger-hover: color-mix(in srgb, var(--danger) 90%, var(--sticker-ink));
|
|
261
263
|
--danger-active: var(--danger-hover);
|
|
262
264
|
--inactive: oklch(0.7892 0.0137 71.29);
|
|
263
265
|
--inactive-foreground: var(--sticker-ink);
|
|
@@ -302,10 +304,32 @@
|
|
|
302
304
|
/* How far a control-height button's hit area reaches past its top and bottom,
|
|
303
305
|
to keep 44px. */
|
|
304
306
|
--control-hit-inset: 0px;
|
|
307
|
+
/* How far a chip or a button embedded in a field, the composer or a corner
|
|
308
|
+
sits inside its frame's outer edge, and from its sibling. */
|
|
309
|
+
--control-embedded-inset: 6px;
|
|
310
|
+
/* A chip or a button embedded in a field: the control height less the embedded
|
|
311
|
+
inset above and below, so the field keeps its height. */
|
|
312
|
+
--control-embedded-size: 32px;
|
|
313
|
+
/* The message step of a timeline: from the last line of one turn to the first
|
|
314
|
+
line of the next (a sender line, an event line). Every row keeps the row
|
|
315
|
+
inset above and below its text; the first row of a turn adds the rest above
|
|
316
|
+
it. */
|
|
317
|
+
--timeline-gap-message: 16px;
|
|
318
|
+
/* The section step of a timeline, one step wider than the message step: either
|
|
319
|
+
side of a date line, from the top of the list to the first line, and from
|
|
320
|
+
the last line to the composer, so a boundary reads as one and the last
|
|
321
|
+
message never sits on the composer. */
|
|
322
|
+
--timeline-gap-section: 24px;
|
|
323
|
+
/* How far a timeline row's hover and selected highlight reaches above and
|
|
324
|
+
below its text. Two rows of one turn sit two insets apart. */
|
|
325
|
+
--timeline-row-inset: 4px;
|
|
305
326
|
--sticker-ink: oklch(0.1813 0.005 17.62);
|
|
306
327
|
--sticker-paper: oklch(1 0 0);
|
|
307
328
|
--sticker-edge: oklch(0.1813 0.005 17.62 / 0);
|
|
308
|
-
|
|
329
|
+
/* Hover tier medium on a colour sticker (primary, warning and danger buttons,
|
|
330
|
+
colour badges, the selected segment on press): hover and press, 10% ink in
|
|
331
|
+
both modes. */
|
|
332
|
+
--sticker-medium: oklch(0.1813 0.005 17.62 / 0.1);
|
|
309
333
|
--presence-online: oklch(0.8272 0.1354 130.07);
|
|
310
334
|
--presence-busy: oklch(0.8829 0.1623 91.9);
|
|
311
335
|
--presence-error: oklch(0.7855 0.1227 50.11);
|
|
@@ -340,11 +364,9 @@
|
|
|
340
364
|
--layer-code: oklch(0.154 0.0092 264.28);
|
|
341
365
|
--fill-muted: oklch(0.3161 0.0052 106.7);
|
|
342
366
|
--fill-strong: oklch(0.3474 0.0051 106.66);
|
|
343
|
-
--fill-
|
|
344
|
-
--fill-
|
|
345
|
-
--fill-
|
|
346
|
-
--fill-message-hover: oklch(0.9843 0.004 106.47 / 0.022);
|
|
347
|
-
--fill-row-open: oklch(0.9843 0.004 106.47 / 0.04);
|
|
367
|
+
--fill-subtle: oklch(0.9843 0.004 106.47 / 0.03);
|
|
368
|
+
--fill-medium: oklch(0.9843 0.004 106.47 / 0.065);
|
|
369
|
+
--fill-frame-medium: oklch(0.9843 0.004 106.47 / 0.06);
|
|
348
370
|
--line-strong: oklch(0.9211 0.004 106.48);
|
|
349
371
|
--line-seam: oklch(0.9843 0.004 106.47 / 0.259);
|
|
350
372
|
--line-hairline: oklch(0.9843 0.004 106.47 / 0.102);
|
|
@@ -359,7 +381,7 @@
|
|
|
359
381
|
--ink-40: oklch(0.9843 0.004 106.47 / 0.4);
|
|
360
382
|
--ink: oklch(0.9843 0.004 106.47);
|
|
361
383
|
--brand-strong: oklch(0.8829 0.1623 91.9);
|
|
362
|
-
--brand-soft: oklch(0.5501 0.0999 91.5 / 0.
|
|
384
|
+
--brand-soft: oklch(0.5501 0.0999 91.5 / 0.2);
|
|
363
385
|
--attention-strong: oklch(0.84 0.11 0);
|
|
364
386
|
--attention-soft: oklch(0.5997 0.1805 359.83 / 0.161);
|
|
365
387
|
--info-strong: oklch(0.8 0.1 220);
|
|
@@ -424,11 +446,9 @@
|
|
|
424
446
|
--layer-code: oklch(0.154 0.0092 264.28);
|
|
425
447
|
--fill-muted: oklch(0.3161 0.0052 106.7);
|
|
426
448
|
--fill-strong: oklch(0.3474 0.0051 106.66);
|
|
427
|
-
--fill-
|
|
428
|
-
--fill-
|
|
429
|
-
--fill-
|
|
430
|
-
--fill-message-hover: oklch(0.9843 0.004 106.47 / 0.022);
|
|
431
|
-
--fill-row-open: oklch(0.9843 0.004 106.47 / 0.04);
|
|
449
|
+
--fill-subtle: oklch(0.9843 0.004 106.47 / 0.03);
|
|
450
|
+
--fill-medium: oklch(0.9843 0.004 106.47 / 0.065);
|
|
451
|
+
--fill-frame-medium: oklch(0.9843 0.004 106.47 / 0.06);
|
|
432
452
|
--line-strong: oklch(0.9211 0.004 106.48);
|
|
433
453
|
--line-seam: oklch(0.9843 0.004 106.47 / 0.259);
|
|
434
454
|
--line-hairline: oklch(0.9843 0.004 106.47 / 0.102);
|
|
@@ -443,7 +463,7 @@
|
|
|
443
463
|
--ink-40: oklch(0.9843 0.004 106.47 / 0.4);
|
|
444
464
|
--ink: oklch(0.9843 0.004 106.47);
|
|
445
465
|
--brand-strong: oklch(0.8829 0.1623 91.9);
|
|
446
|
-
--brand-soft: oklch(0.5501 0.0999 91.5 / 0.
|
|
466
|
+
--brand-soft: oklch(0.5501 0.0999 91.5 / 0.2);
|
|
447
467
|
--attention-strong: oklch(0.84 0.11 0);
|
|
448
468
|
--attention-soft: oklch(0.5997 0.1805 359.83 / 0.161);
|
|
449
469
|
--info-strong: oklch(0.8 0.1 220);
|
|
@@ -496,6 +516,12 @@
|
|
|
496
516
|
/* Deprecated names, kept until raft-ui 1.0. Run
|
|
497
517
|
`node node_modules/@botiverse/raft-ui/codemods/token-names.mjs <src>` to move to the
|
|
498
518
|
current names. */
|
|
519
|
+
--fill-pressed: var(--fill-medium);
|
|
520
|
+
--fill-frame-pressed: var(--fill-frame-medium);
|
|
521
|
+
--fill-row-hover: var(--fill-subtle);
|
|
522
|
+
--fill-row-open: var(--fill-subtle);
|
|
523
|
+
--fill-message-hover: var(--fill-subtle);
|
|
524
|
+
--sticker-pressed: var(--sticker-medium);
|
|
499
525
|
--layer-panel: var(--layer-canvas);
|
|
500
526
|
--layer-inset: var(--fill-muted);
|
|
501
527
|
--layer-canvas-muted: var(--layer-sidebar);
|
|
@@ -677,5 +703,6 @@
|
|
|
677
703
|
--control-height-cta: 40px;
|
|
678
704
|
--control-icon-size: 18px;
|
|
679
705
|
--control-hit-inset: 6px;
|
|
706
|
+
--control-embedded-size: 20px;
|
|
680
707
|
}
|
|
681
708
|
}
|
|
@@ -253,7 +253,26 @@ declare const buttonVariants: import("tailwind-variants/lite").TVReturnType<{
|
|
|
253
253
|
content: string;
|
|
254
254
|
loadingIndicator: string;
|
|
255
255
|
}>>;
|
|
256
|
-
type
|
|
256
|
+
type ButtonVariantProps = VariantProps<typeof buttonVariants>;
|
|
257
|
+
/** The Button sizes: `md`, `lg`, `xl`, `icon-md` and `icon-lg`. */
|
|
258
|
+
type ButtonSize = "md" | "lg" | "xl" | "icon-md" | "icon-lg";
|
|
259
|
+
/**
|
|
260
|
+
* Deprecated: `xs` and `sm` render as `md`, `icon-xs` and `icon-sm` as
|
|
261
|
+
* `icon-md`. Removed in raft-ui 1.0; run
|
|
262
|
+
* `node node_modules/@botiverse/raft-ui/codemods/button-sizes.mjs <src>`.
|
|
263
|
+
*/
|
|
264
|
+
type DeprecatedButtonSize = "xs" | "sm" | "icon-xs" | "icon-sm";
|
|
265
|
+
type ButtonProps = StyledProps<Button.Props> & Omit<ButtonVariantProps, "size"> & DataAttributes & {
|
|
266
|
+
/**
|
|
267
|
+
* `md` (32px) and `icon-md` for rows, cards, banners, toolbars and panel
|
|
268
|
+
* headers; `lg` and `icon-lg` (the control height) for dialog footers,
|
|
269
|
+
* forms and beside a field; `xl` for a full-width call to action. The size
|
|
270
|
+
* follows the place: see Button › Size by place.
|
|
271
|
+
*
|
|
272
|
+
* `xs`, `sm`, `icon-xs` and `icon-sm` are deprecated aliases of `md` and
|
|
273
|
+
* `icon-md`, removed in raft-ui 1.0 (`codemods/button-sizes.mjs`).
|
|
274
|
+
*/
|
|
275
|
+
size?: "md" | "lg" | "xl" | "icon-md" | "icon-lg" | DeprecatedButtonSize;
|
|
257
276
|
loading?: boolean;
|
|
258
277
|
loadingLabel?: string;
|
|
259
278
|
};
|
|
@@ -314,6 +333,26 @@ type DialogNavProps = useRender.ComponentProps<"nav">;
|
|
|
314
333
|
/** The section list of a wide (`size="wide"`) dialog, inside a `bar` body. */
|
|
315
334
|
declare function DialogNav({ className, render, ...props }: DialogNavProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
316
335
|
//#endregion
|
|
336
|
+
//#region src/components/text-link/text-link.d.ts
|
|
337
|
+
declare const textLinkVariants: import("tailwind-variants/lite").TVReturnType<{
|
|
338
|
+
variant: {
|
|
339
|
+
muted: string[];
|
|
340
|
+
strong: string[];
|
|
341
|
+
};
|
|
342
|
+
}, undefined, string[], {
|
|
343
|
+
variant: {
|
|
344
|
+
muted: string[];
|
|
345
|
+
strong: string[];
|
|
346
|
+
};
|
|
347
|
+
}, undefined, import("tailwind-variants/lite").TVReturnTypeLike<{
|
|
348
|
+
variant: {
|
|
349
|
+
muted: string[];
|
|
350
|
+
strong: string[];
|
|
351
|
+
};
|
|
352
|
+
}, undefined>>;
|
|
353
|
+
type TextLinkProps = useRender.ComponentProps<"button"> & VariantProps<typeof textLinkVariants>;
|
|
354
|
+
declare function TextLink({ variant, className, render, ...props }: TextLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
355
|
+
//#endregion
|
|
317
356
|
//#region src/lib/presence.d.ts
|
|
318
357
|
/**
|
|
319
358
|
* The five status lights of the design system. Each colour is a fixed
|
|
@@ -1012,6 +1051,9 @@ declare function MessageMultiSelect({ className, render, ...props }: MessageMult
|
|
|
1012
1051
|
type MessageMultiSelectToolbarProps = useRender.ComponentProps<"div">;
|
|
1013
1052
|
/** Shared select-mode toolbar shell. Consumers compose the count and actions as children. */
|
|
1014
1053
|
declare function MessageMultiSelectToolbar({ className, render, ...props }: MessageMultiSelectToolbarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
1054
|
+
type MessageMultiSelectToolbarActionsProps = useRender.ComponentProps<"div">;
|
|
1055
|
+
/** The toolbar's actions, at its end, 4px apart like every floating toolbar's buttons. */
|
|
1056
|
+
declare function MessageMultiSelectToolbarActions({ className, render, ...props }: MessageMultiSelectToolbarActionsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
1015
1057
|
type MessageMultiSelectCheckboxProps = CheckboxProps;
|
|
1016
1058
|
declare function MessageMultiSelectCheckbox({ className, ...props }: MessageMultiSelectCheckboxProps): import("react").JSX.Element;
|
|
1017
1059
|
//#endregion
|
|
@@ -1095,4 +1137,4 @@ type MessageListJumpPillDismissProps = StyledProps<Button.Props> & DataAttribute
|
|
|
1095
1137
|
};
|
|
1096
1138
|
declare function MessageListJumpPillDismiss({ className, children, render, nativeButton, ...props }: MessageListJumpPillDismissProps): import("react").JSX.Element;
|
|
1097
1139
|
//#endregion
|
|
1098
|
-
export { MessageMultiSelect as $,
|
|
1140
|
+
export { MessageMultiSelect as $, DeprecatedButtonSize as $i, MessageItemGutterProps as $n, DropdownMenuRadioItemProps as $r, MessageItemBadgeSeparator as $t, MessageQuotedPreviewChannel as A, DialogContentProps as Ai, MessageItemSenderGroupProps as An, DropdownMenuCheckboxItemProps as Ar, MessageReactionGlyphProps as At, MessageQuotedPreviewTextProps as B, DialogOverlayProps as Bi, MessageItemEdited as Bn, DropdownMenuItemProps as Br, MessageReactionTooltipContentProps as Bt, MessageQuotedPreviewAuthorDelegatedBy as C, textLinkVariants as Ci, MessageItemMetaProps as Cn, TooltipProviderProps as Cr, MessageReactionChip as Ct, MessageQuotedPreviewAuthorName as D, DialogClose as Di, MessageItemSenderButton as Dn, DropdownMenuCheckboxItem as Dr, MessageReactionErrorIndicator as Dt, MessageQuotedPreviewAuthorMetaProps as E, DialogBodyProps as Ei, MessageItemSenderBadgesProps as En, DropdownMenu as Er, MessageReactionCountProps as Et, MessageQuotedPreviewHeaderProps as F, DialogHeader as Fi, MessageItemAttachmentsProps as Fn, DropdownMenuItem as Fr, MessageReactionQuickButton as Ft, MessageQuotedPreviewUnavailable as G, DialogSurfaceProps as Gi, MessageItemFooterProps as Gn, DropdownMenuPortal as Gr, MessageReactionTooltipNameText as Gt, MessageQuotedPreviewThreadProps as H, DialogPortalProps as Hi, MessageItemEmbedded as Hn, DropdownMenuLabelProps as Hr, MessageReactionTooltipMetaProps as Ht, MessageQuotedPreviewLoading as I, DialogHeaderProps as Ii, MessageItemBody as In, DropdownMenuItemCount as Ir, MessageReactionQuickButtonProps as It, MessageTextSelectionToolbarButton as J, DialogTrigger as Ji, MessageItemAvatarSlot as Jn, DropdownMenuRadioGroup as Jr, MessageReactionTooltipNamesProps as Jt, MessageQuotedPreviewUnavailableProps as K, DialogTitle as Ki, MessageItemSearchMatch as Kn, DropdownMenuPortalProps as Kr, MessageReactionTooltipNameTextProps as Kt, MessageQuotedPreviewLoadingProps as L, DialogNav as Li, MessageItemBodyProps as Ln, DropdownMenuItemCountProps as Lr, MessageReactionQuickRow as Lt, MessageQuotedPreviewContent as M, DialogDescriptionProps as Mi, MessageItemTime as Mn, DropdownMenuContentProps as Mr, MessageReactionPickerContentProps as Mt, MessageQuotedPreviewContentProps as N, DialogFooter as Ni, MessageItemTimeProps as Nn, DropdownMenuFooter as Nr, MessageReactionPickerStatic as Nt, MessageQuotedPreviewAuthorNameProps as O, DialogCloseProps as Oi, MessageItemSenderButtonProps as On, DropdownMenuCheckboxItemIndicator as Or, MessageReactionErrorIndicatorProps as Ot, MessageQuotedPreviewHeader as P, DialogFooterProps as Pi, MessageItemAttachments as Pn, DropdownMenuFooterProps as Pr, MessageReactionPickerStaticProps as Pt, MessageTextSelectionToolbarSeparatorProps as Q, ButtonSize as Qi, MessageItemGutter as Qn, DropdownMenuRadioItemIndicatorProps as Qr, MessageItemBadgeProps as Qt, MessageQuotedPreviewProps as R, DialogNavProps as Ri, MessageItemContent as Rn, DropdownMenuItemLabel as Rr, MessageReactionQuickRowProps as Rt, MessageQuotedPreviewAuthor as S, TextLinkProps as Si, MessageItemMeta as Sn, TooltipProvider as Sr, MessageReactionAddButtonProps as St, MessageQuotedPreviewAuthorMeta as T, DialogBody as Ti, MessageItemSenderBadges as Tn, TooltipTriggerProps as Tr, MessageReactionCount as Tt, MessageQuotedPreviewTimestamp as U, DialogProps as Ui, MessageItemEmbeddedProps as Un, DropdownMenuPopup as Ur, MessageReactionTooltipName as Ut, MessageQuotedPreviewThread as V, DialogPortal as Vi, MessageItemEditedProps as Vn, DropdownMenuLabel as Vr, MessageReactionTooltipMeta as Vt, MessageQuotedPreviewTimestampProps as W, DialogSurface as Wi, MessageItemFooter as Wn, DropdownMenuPopupProps as Wr, MessageReactionTooltipNameProps as Wt, MessageTextSelectionToolbarProps as X, Button$1 as Xi, MessageItemContinuationTime as Xn, DropdownMenuRadioItem as Xr, MessageReactionTooltipSeparatorProps as Xt, MessageTextSelectionToolbarButtonProps as Y, DialogTriggerProps as Yi, MessageItemAvatarSlotProps as Yn, DropdownMenuRadioGroupProps as Yr, MessageReactionTooltipSeparator as Yt, MessageTextSelectionToolbarSeparator as Z, ButtonProps as Zi, MessageItemContinuationTimeProps as Zn, DropdownMenuRadioItemIndicator as Zr, MessageItemBadge as Zt, MessageQuotedPreview as _, CheckboxIndicatorProps as _i, MessageItemDelegatedByProps as _n, TooltipContent as _r, MessageReferenceUnavailable as _t, MessageListJumpPillDismissProps as a, DropdownMenuSubmenuProps as ai, MessageItemSavedIndicatorProps as an, AvatarBadgeProps as ar, MessageMultiSelectToolbarActionsProps as at, MessageQuotedPreviewAttachments as b, Presence as bi, MessageItemInlineStatus as bn, TooltipPortalProps as br, MessageReferenceTextVariant as bt, MessageListJumpPillProps as c, DropdownMenuTrigger as ci, MessageItemToolbarButtonProps as cn, AvatarGroup as cr, MessageReferenceChipProps as ct, MessageListHistoryLimited as d, KbdGroup as di, MessageItemDelegatedAvatarProps as dn, AvatarGroupProps as dr, MessageReferenceLabel as dt, buttonVariants as ea, DropdownMenuSeparator as ei, MessageItemBadgeSeparatorProps as en, MessageItem as er, MessageMultiSelectCheckbox as et, MessageListHistoryLimitedProps as f, KbdGroupProps as fi, MessageItemDelegatedBy as fn, AvatarImage as fr, MessageReferenceLabelProps as ft, MessageListProps as g, CheckboxIndicator as gi, MessageItemDelegatedByNameProps as gn, Tooltip$1 as gr, MessageReferenceTextProps as gt, MessageList as h, BadgeProps as hi, MessageItemDelegatedByName as hn, AvatarSize as hr, MessageReferenceText as ht, MessageListJumpPillDismiss as i, DropdownMenuSubmenu as ii, MessageItemSavedIndicator as in, AvatarBadgeOffset as ir, MessageMultiSelectToolbarActions as it, MessageQuotedPreviewChannelProps as j, DialogDescription as ji, MessageItemSenderProps as jn, DropdownMenuContent as jr, MessageReactionPickerContent as jt, MessageQuotedPreviewAuthorProps as k, DialogContent as ki, MessageItemSenderGroup as kn, DropdownMenuCheckboxItemIndicatorProps as kr, MessageReactionGlyph as kt, MessageListDateDivider as l, DropdownMenuTriggerProps as li, MessageItemToolbarProps as ln, AvatarGroupCount as lr, MessageReferenceIndicator as lt, MessageListNoticeProps as m, Badge as mi, MessageItemDelegatedByButtonProps as mn, AvatarProps as mr, MessageReferencePendingProps as mt, MessageListJumpControlsProps as n, DataAttributes as na, DropdownMenuShortcut as ni, MessageItemReadReceipt as nn, Avatar$1 as nr, MessageMultiSelectProps as nt, MessageListJumpPillGroup as o, DropdownMenuSubmenuTrigger as oi, MessageItemToolbar as on, AvatarFallback as or, MessageMultiSelectToolbarProps as ot, MessageListNotice as p, KbdProps as pi, MessageItemDelegatedByButton as pn, AvatarImageProps as pr, MessageReferencePending as pt, MessageTextSelectionToolbar as q, DialogTitleProps as qi, MessageItemSearchMatchProps as qn, DropdownMenuProps as qr, MessageReactionTooltipNames as qt, MessageListJumpPill as r, StyledProps as ra, DropdownMenuShortcutProps as ri, MessageItemReadReceiptProps as rn, AvatarBadge as rr, MessageMultiSelectToolbar as rt, MessageListJumpPillGroupProps as s, DropdownMenuSubmenuTriggerProps as si, MessageItemToolbarButton as sn, AvatarFallbackProps as sr, MessageReferenceChip as st, MessageListJumpControls as t, VariantProps as ta, DropdownMenuSeparatorProps as ti, MessageItemBadgeStatus as tn, MessageItemProps as tr, MessageMultiSelectCheckboxProps as tt, MessageListDateDividerProps as u, Kbd as ui, MessageItemDelegatedAvatar as un, AvatarGroupCountProps as ur, MessageReferenceIndicatorProps as ut, MessageQuotedPreviewAttachment as v, Checkbox$1 as vi, MessageItemHeader as vn, TooltipContentProps as vr, MessageReferenceUnavailableProps as vt, MessageQuotedPreviewAuthorDelegatedByProps as w, Dialog$1 as wi, MessageItemSender as wn, TooltipTrigger as wr, MessageReactionChipProps as wt, MessageQuotedPreviewAttachmentsProps as x, TextLink as xi, MessageItemInlineStatusProps as xn, TooltipProps as xr, MessageReactionAddButton as xt, MessageQuotedPreviewAttachmentProps as y, CheckboxProps as yi, MessageItemHeaderProps as yn, TooltipPortal as yr, MessageReferenceChipVariant as yt, MessageQuotedPreviewText as z, DialogOverlay as zi, MessageItemContentProps as zn, DropdownMenuItemLabelProps as zr, MessageReactionTooltipContent as zt };
|