@nyaruka/temba-components 0.170.0 → 0.170.1
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 +6 -0
- package/dist/temba-components.js +870 -640
- package/dist/temba-components.js.map +1 -1
- package/package.json +1 -1
- package/src/display/Button.ts +14 -2
- package/src/display/Chat.ts +41 -22
- package/src/display/Label.ts +18 -3
- package/src/form/select/Select.ts +15 -2
- package/src/list/BroadcastList.ts +17 -6
- package/src/list/ContentList.ts +29 -13
- package/src/list/FieldList.ts +8 -1
- package/src/live/CampaignEvents.ts +31 -11
- package/src/live/ContactChat.ts +29 -6
- package/src/live/ContactTimeline.ts +46 -24
- package/src/styles/designTokens.ts +57 -17
- package/src/styles/pillVariants.ts +42 -10
- package/static/css/design-system.css +47 -12
- package/static/css/temba-components.css +31 -9
|
@@ -100,10 +100,14 @@ export const pillVariants = css`
|
|
|
100
100
|
border-color: var(--pill-border, var(--border));
|
|
101
101
|
--icon-color: var(--text-2);
|
|
102
102
|
}
|
|
103
|
+
/* Anchor-derived variants carry static pre-mixed bg/border values
|
|
104
|
+
for browsers without color-mix() (pre-Chrome 111); the @supports
|
|
105
|
+
block at the bottom re-derives them from the anchors so host
|
|
106
|
+
re-theming still works where color-mix() is available. */
|
|
103
107
|
.pill-flow {
|
|
104
|
-
background:
|
|
108
|
+
background: #e3f4e9;
|
|
105
109
|
color: var(--flow);
|
|
106
|
-
border-color:
|
|
110
|
+
border-color: #c5e8d2;
|
|
107
111
|
--icon-color: var(--flow);
|
|
108
112
|
}
|
|
109
113
|
/* Recipient color — shared by contacts and groups. Anchored to
|
|
@@ -111,27 +115,27 @@ export const pillVariants = css`
|
|
|
111
115
|
identity even when the host page re-themes via --primary-rgb. */
|
|
112
116
|
.pill-contact,
|
|
113
117
|
.pill-group {
|
|
114
|
-
background:
|
|
118
|
+
background: #e5eef6;
|
|
115
119
|
color: var(--recipient);
|
|
116
|
-
border-color:
|
|
120
|
+
border-color: #cadbec;
|
|
117
121
|
--icon-color: var(--recipient);
|
|
118
122
|
}
|
|
119
123
|
.pill-channel {
|
|
120
|
-
background:
|
|
124
|
+
background: #ede4f5;
|
|
121
125
|
color: var(--channel);
|
|
122
|
-
border-color:
|
|
126
|
+
border-color: #dac8e9;
|
|
123
127
|
--icon-color: var(--channel);
|
|
124
128
|
}
|
|
125
129
|
.pill-topic {
|
|
126
|
-
background:
|
|
130
|
+
background: #faefe1;
|
|
127
131
|
color: var(--topic);
|
|
128
|
-
border-color:
|
|
132
|
+
border-color: #f6ddc1;
|
|
129
133
|
--icon-color: var(--topic);
|
|
130
134
|
}
|
|
131
135
|
.pill-campaign {
|
|
132
|
-
background:
|
|
136
|
+
background: #e1f2f6;
|
|
133
137
|
color: var(--campaign);
|
|
134
|
-
border-color:
|
|
138
|
+
border-color: #c1e4ec;
|
|
135
139
|
--icon-color: var(--campaign);
|
|
136
140
|
}
|
|
137
141
|
.pill-field {
|
|
@@ -171,4 +175,32 @@ export const pillVariants = css`
|
|
|
171
175
|
border-color: var(--pill-border, var(--border));
|
|
172
176
|
--icon-color: var(--text-2);
|
|
173
177
|
}
|
|
178
|
+
|
|
179
|
+
/* Anchor-derived bg/border for browsers with color-mix(). These
|
|
180
|
+
can't be simple same-rule fallbacks: a declaration containing
|
|
181
|
+
var() isn't dropped at parse time, it goes invalid at
|
|
182
|
+
computed-value time and takes the earlier declaration with it. */
|
|
183
|
+
@supports (color: color-mix(in srgb, red, red)) {
|
|
184
|
+
.pill-flow {
|
|
185
|
+
background: color-mix(in srgb, var(--flow) 12%, white);
|
|
186
|
+
border-color: color-mix(in srgb, var(--flow) 25%, white);
|
|
187
|
+
}
|
|
188
|
+
.pill-contact,
|
|
189
|
+
.pill-group {
|
|
190
|
+
background: color-mix(in srgb, var(--recipient) 12%, white);
|
|
191
|
+
border-color: color-mix(in srgb, var(--recipient) 25%, white);
|
|
192
|
+
}
|
|
193
|
+
.pill-channel {
|
|
194
|
+
background: color-mix(in srgb, var(--channel) 12%, white);
|
|
195
|
+
border-color: color-mix(in srgb, var(--channel) 25%, white);
|
|
196
|
+
}
|
|
197
|
+
.pill-topic {
|
|
198
|
+
background: color-mix(in srgb, var(--topic) 12%, white);
|
|
199
|
+
border-color: color-mix(in srgb, var(--topic) 25%, white);
|
|
200
|
+
}
|
|
201
|
+
.pill-campaign {
|
|
202
|
+
background: color-mix(in srgb, var(--campaign) 12%, white);
|
|
203
|
+
border-color: color-mix(in srgb, var(--campaign) 25%, white);
|
|
204
|
+
}
|
|
205
|
+
}
|
|
174
206
|
`;
|
|
@@ -20,18 +20,22 @@
|
|
|
20
20
|
--primary-rgb: 73, 127, 206;
|
|
21
21
|
|
|
22
22
|
/* accent ramp — derived from --primary-rgb via sRGB mixing.
|
|
23
|
-
400 == primary; the ramp computes outward in both directions.
|
|
23
|
+
400 == primary; the ramp computes outward in both directions.
|
|
24
|
+
Static values pre-mixed from the default anchor come first for
|
|
25
|
+
browsers without color-mix() (pre-Chrome 111); the @supports
|
|
26
|
+
block below re-derives them from --accent so re-theming via
|
|
27
|
+
--primary-rgb still works where color-mix() is available. */
|
|
24
28
|
--accent: rgb(var(--primary-rgb));
|
|
25
|
-
--accent-50:
|
|
26
|
-
--accent-100:
|
|
27
|
-
--accent-200:
|
|
28
|
-
--accent-300:
|
|
29
|
+
--accent-50: #f4f7fc;
|
|
30
|
+
--accent-100: #e2ebf7;
|
|
31
|
+
--accent-200: #c5d6ef;
|
|
32
|
+
--accent-300: #92b2e2;
|
|
29
33
|
--accent-400: var(--accent);
|
|
30
|
-
--accent-500:
|
|
31
|
-
--accent-600:
|
|
32
|
-
--accent-700:
|
|
33
|
-
--accent-800:
|
|
34
|
-
--accent-900:
|
|
34
|
+
--accent-500: #4272b9;
|
|
35
|
+
--accent-600: #3a66a5;
|
|
36
|
+
--accent-700: #2f5386;
|
|
37
|
+
--accent-800: #244067;
|
|
38
|
+
--accent-900: #1a2c48;
|
|
35
39
|
|
|
36
40
|
/* neutrals */
|
|
37
41
|
--bg: #F6F7F9;
|
|
@@ -94,6 +98,24 @@
|
|
|
94
98
|
--section-w-collapsed: 56px;
|
|
95
99
|
}
|
|
96
100
|
|
|
101
|
+
/* Where color-mix() is supported, derive the accent ramp from --accent
|
|
102
|
+
so re-theming via --primary-rgb works without design-system.js.
|
|
103
|
+
Custom properties can't fall back per-declaration (they're never
|
|
104
|
+
invalid at parse time), hence the @supports gate. */
|
|
105
|
+
@supports (color: color-mix(in srgb, red, red)) {
|
|
106
|
+
:root {
|
|
107
|
+
--accent-50: color-mix(in srgb, var(--accent) 6%, white);
|
|
108
|
+
--accent-100: color-mix(in srgb, var(--accent) 16%, white);
|
|
109
|
+
--accent-200: color-mix(in srgb, var(--accent) 32%, white);
|
|
110
|
+
--accent-300: color-mix(in srgb, var(--accent) 60%, white);
|
|
111
|
+
--accent-500: color-mix(in srgb, var(--accent) 90%, black);
|
|
112
|
+
--accent-600: color-mix(in srgb, var(--accent) 80%, black);
|
|
113
|
+
--accent-700: color-mix(in srgb, var(--accent) 65%, black);
|
|
114
|
+
--accent-800: color-mix(in srgb, var(--accent) 50%, black);
|
|
115
|
+
--accent-900: color-mix(in srgb, var(--accent) 35%, black);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
97
119
|
/* ─── base ───────────────────────────────────────────────────────────── */
|
|
98
120
|
.ds * { box-sizing: border-box; }
|
|
99
121
|
.ds {
|
|
@@ -364,7 +386,13 @@
|
|
|
364
386
|
color: white;
|
|
365
387
|
}
|
|
366
388
|
.ds .btn-danger:hover {
|
|
367
|
-
|
|
389
|
+
/* pre-mixed fallback for browsers without color-mix() */
|
|
390
|
+
background: #b73737;
|
|
391
|
+
}
|
|
392
|
+
@supports (color: color-mix(in srgb, red, red)) {
|
|
393
|
+
.ds .btn-danger:hover {
|
|
394
|
+
background: color-mix(in srgb, var(--danger) 88%, black);
|
|
395
|
+
}
|
|
368
396
|
}
|
|
369
397
|
.ds .btn.is-disabled,
|
|
370
398
|
.ds .btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
@@ -533,7 +561,14 @@
|
|
|
533
561
|
.ds .input:focus-within {
|
|
534
562
|
outline: 0;
|
|
535
563
|
border-color: var(--accent-300);
|
|
536
|
-
|
|
564
|
+
/* translucent-ring fallback for browsers without color-mix() */
|
|
565
|
+
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
|
|
566
|
+
}
|
|
567
|
+
@supports (color: color-mix(in srgb, red, red)) {
|
|
568
|
+
.ds .input:focus,
|
|
569
|
+
.ds .input:focus-within {
|
|
570
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
|
|
571
|
+
}
|
|
537
572
|
}
|
|
538
573
|
|
|
539
574
|
.ds .input-tokens {
|
|
@@ -41,15 +41,19 @@
|
|
|
41
41
|
--curvature: 6px;
|
|
42
42
|
--curvature-widget: 6px;
|
|
43
43
|
--focus: rgb(var(--focus-rgb, 91, 156, 229));
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
--focus-
|
|
47
|
-
--focus-
|
|
48
|
-
--focus-
|
|
49
|
-
--focus-
|
|
50
|
-
--focus-
|
|
51
|
-
--focus-
|
|
52
|
-
|
|
44
|
+
/* Static values pre-mixed from the default focus hue for browsers
|
|
45
|
+
without color-mix(); re-derived in the @supports block below. */
|
|
46
|
+
--focus-50: #ebf3fc;
|
|
47
|
+
--focus-100: #d8e7f9;
|
|
48
|
+
--focus-200: #bdd7f5;
|
|
49
|
+
--focus-300: #9dc4ef;
|
|
50
|
+
--focus-600: #375e89;
|
|
51
|
+
--focus-700: #294667;
|
|
52
|
+
--focus-muted: #9dc4ef;
|
|
53
|
+
/* The halo is a translucent wash, so unlike the opaque ramp steps
|
|
54
|
+
it can keep tracking the theme without color-mix() — rgba(var())
|
|
55
|
+
substitution works wherever custom properties do. */
|
|
56
|
+
--focus-halo: 0 0 0 3px rgba(var(--focus-rgb, 91, 156, 229), 0.3);
|
|
53
57
|
--color-focus: #a4cafe;
|
|
54
58
|
--color-widget-bg: #fff;
|
|
55
59
|
--color-widget-bg-focused: #fff;
|
|
@@ -201,6 +205,24 @@
|
|
|
201
205
|
|
|
202
206
|
}
|
|
203
207
|
|
|
208
|
+
/* Where color-mix() is supported, derive the focus ramp from --focus
|
|
209
|
+
so re-theming via --focus-rgb works. Custom properties can't fall
|
|
210
|
+
back per-declaration (they're never invalid at parse time), hence
|
|
211
|
+
the @supports gate. */
|
|
212
|
+
@supports (color: color-mix(in srgb, red, red)) {
|
|
213
|
+
html {
|
|
214
|
+
--focus-50: color-mix(in srgb, var(--focus) 12%, white);
|
|
215
|
+
--focus-100: color-mix(in srgb, var(--focus) 24%, white);
|
|
216
|
+
--focus-200: color-mix(in srgb, var(--focus) 40%, white);
|
|
217
|
+
--focus-300: color-mix(in srgb, var(--focus) 60%, white);
|
|
218
|
+
--focus-600: color-mix(in srgb, var(--focus) 60%, black);
|
|
219
|
+
--focus-700: color-mix(in srgb, var(--focus) 45%, black);
|
|
220
|
+
--focus-muted: color-mix(in srgb, var(--focus) 60%, white);
|
|
221
|
+
--focus-halo: 0 0 0 3px
|
|
222
|
+
color-mix(in srgb, var(--focus) 30%, transparent);
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
|
|
204
226
|
temba-button {
|
|
205
227
|
--button-bg: var(--accent-500);
|
|
206
228
|
--button-text: var(--color-text-light);
|