@neuravision/construct 1.1.5 → 1.2.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.
Files changed (10) hide show
  1. package/components/_shared.css +16 -0
  2. package/components/avatar.css +46 -0
  3. package/components/index.css +1 -0
  4. package/components/tree.css +328 -0
  5. package/docs/guidelines.md +59 -0
  6. package/package.json +1 -1
  7. package/tokens/tokens.css +100 -0
  8. package/tokens/tokens.js +138 -0
  9. package/tokens/tokens.json +96 -0
  10. package/tokens/tokens.ts +138 -0
package/components/_shared.css CHANGED
@@ -38,6 +38,22 @@
38
38
  --ct-avatar-color: var(--color-text-secondary);
39
39
  --ct-avatar-status-size: 10px;
40
40
  --ct-avatar-group-overlap: -8px;
41
+ --ct-avatar-seed-1-bg: var(--color-avatar-seed-1-bg);
42
+ --ct-avatar-seed-1-fg: var(--color-avatar-seed-1-fg);
43
+ --ct-avatar-seed-2-bg: var(--color-avatar-seed-2-bg);
44
+ --ct-avatar-seed-2-fg: var(--color-avatar-seed-2-fg);
45
+ --ct-avatar-seed-3-bg: var(--color-avatar-seed-3-bg);
46
+ --ct-avatar-seed-3-fg: var(--color-avatar-seed-3-fg);
47
+ --ct-avatar-seed-4-bg: var(--color-avatar-seed-4-bg);
48
+ --ct-avatar-seed-4-fg: var(--color-avatar-seed-4-fg);
49
+ --ct-avatar-seed-5-bg: var(--color-avatar-seed-5-bg);
50
+ --ct-avatar-seed-5-fg: var(--color-avatar-seed-5-fg);
51
+ --ct-avatar-seed-6-bg: var(--color-avatar-seed-6-bg);
52
+ --ct-avatar-seed-6-fg: var(--color-avatar-seed-6-fg);
53
+ --ct-avatar-seed-7-bg: var(--color-avatar-seed-7-bg);
54
+ --ct-avatar-seed-7-fg: var(--color-avatar-seed-7-fg);
55
+ --ct-avatar-seed-8-bg: var(--color-avatar-seed-8-bg);
56
+ --ct-avatar-seed-8-fg: var(--color-avatar-seed-8-fg);
41
57
  }
42
58
 
43
59
  :where(.ct-input, .ct-select, .ct-textarea, .ct-control) {
package/components/avatar.css CHANGED
@@ -36,6 +36,52 @@
36
36
  --ct-avatar-font-size: var(--font-size-xl);
37
37
  }
38
38
 
39
+ /* ── Seeded colors ── */
40
+ /* Deterministic palette for initials avatars. The consumer hashes a stable
41
+ identifier (userUUID, email, …) into [0, palette-size - 1] and writes the
42
+ resulting index to data-seed-color. Without the attribute, .ct-avatar
43
+ keeps its default background — fully backwards compatible. */
44
+
45
+ .ct-avatar[data-seed-color='1'] {
46
+ background: var(--ct-avatar-seed-1-bg);
47
+ color: var(--ct-avatar-seed-1-fg);
48
+ }
49
+
50
+ .ct-avatar[data-seed-color='2'] {
51
+ background: var(--ct-avatar-seed-2-bg);
52
+ color: var(--ct-avatar-seed-2-fg);
53
+ }
54
+
55
+ .ct-avatar[data-seed-color='3'] {
56
+ background: var(--ct-avatar-seed-3-bg);
57
+ color: var(--ct-avatar-seed-3-fg);
58
+ }
59
+
60
+ .ct-avatar[data-seed-color='4'] {
61
+ background: var(--ct-avatar-seed-4-bg);
62
+ color: var(--ct-avatar-seed-4-fg);
63
+ }
64
+
65
+ .ct-avatar[data-seed-color='5'] {
66
+ background: var(--ct-avatar-seed-5-bg);
67
+ color: var(--ct-avatar-seed-5-fg);
68
+ }
69
+
70
+ .ct-avatar[data-seed-color='6'] {
71
+ background: var(--ct-avatar-seed-6-bg);
72
+ color: var(--ct-avatar-seed-6-fg);
73
+ }
74
+
75
+ .ct-avatar[data-seed-color='7'] {
76
+ background: var(--ct-avatar-seed-7-bg);
77
+ color: var(--ct-avatar-seed-7-fg);
78
+ }
79
+
80
+ .ct-avatar[data-seed-color='8'] {
81
+ background: var(--ct-avatar-seed-8-bg);
82
+ color: var(--ct-avatar-seed-8-fg);
83
+ }
84
+
39
85
  .ct-avatar__image {
40
86
  width: 100%;
41
87
  height: 100%;
package/components/index.css CHANGED
@@ -50,3 +50,4 @@
50
50
  @import './app-shell-v2.css';
51
51
  @import './_shell-shared.css';
52
52
  @import './list.css';
53
+ @import './tree.css';
package/components/tree.css ADDED
@@ -0,0 +1,328 @@
1
+ /* ── Tree (WAI-ARIA Tree View) ─────────────────────── */
2
+
3
+ .ct-tree {
4
+ --ct-tree-indent: 1.5rem;
5
+ --ct-tree-row-height: 2rem;
6
+ --ct-tree-row-padding-y: var(--space-2);
7
+ --ct-tree-row-padding-x: var(--space-4);
8
+ --ct-tree-row-gap: var(--space-3);
9
+ --ct-tree-row-radius: var(--radius-sm);
10
+ --ct-tree-row-bg: transparent;
11
+ --ct-tree-row-bg-hover: var(--color-bg-muted);
12
+ --ct-tree-row-bg-selected: color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
13
+ --ct-tree-row-color: var(--color-text-primary);
14
+ --ct-tree-row-color-selected: var(--color-brand-primary);
15
+
16
+ --ct-tree-guide-color: var(--color-border-subtle);
17
+ --ct-tree-guide-width: 1px;
18
+
19
+ --ct-tree-toggle-size: 1rem;
20
+ --ct-tree-toggle-color: var(--color-text-muted);
21
+ --ct-tree-toggle-color-hover: var(--color-text-primary);
22
+ --ct-tree-toggle-radius: var(--radius-xs);
23
+
24
+ --ct-tree-orphan-color: var(--color-state-warning-text);
25
+ --ct-tree-orphan-bg: var(--color-state-warning-surface);
26
+ --ct-tree-orphan-border: var(--color-state-warning-border);
27
+
28
+ --ct-tree-actions-opacity: 0;
29
+
30
+ display: block;
31
+ margin: 0;
32
+ padding: 0;
33
+ list-style: none;
34
+ font-size: var(--font-size-sm);
35
+ font-family: var(--font-family-body);
36
+ color: var(--ct-tree-row-color);
37
+ }
38
+
39
+ .ct-tree__group {
40
+ display: block;
41
+ margin: 0;
42
+ padding: 0;
43
+ list-style: none;
44
+ position: relative;
45
+ }
46
+
47
+ .ct-tree__node {
48
+ display: block;
49
+ position: relative;
50
+ margin: 0;
51
+ padding: 0;
52
+ }
53
+
54
+ .ct-tree__node[aria-expanded='false'] > .ct-tree__group {
55
+ display: none;
56
+ }
57
+
58
+ /* ── Row (focus + click target) ── */
59
+
60
+ .ct-tree__row {
61
+ display: flex;
62
+ align-items: center;
63
+ gap: var(--ct-tree-row-gap);
64
+ min-height: var(--ct-tree-row-height);
65
+ padding-block: var(--ct-tree-row-padding-y);
66
+ padding-inline-end: var(--ct-tree-row-padding-x);
67
+ /* Indent: --ct-level is 1-based and set inline by consumers */
68
+ padding-inline-start: calc(
69
+ var(--ct-tree-row-padding-x) +
70
+ var(--ct-tree-indent) * (var(--ct-level, 1) - 1)
71
+ );
72
+ border-radius: var(--ct-tree-row-radius);
73
+ background: var(--ct-tree-row-bg);
74
+ color: inherit;
75
+ cursor: pointer;
76
+ user-select: none;
77
+ transition: background var(--duration-fast) var(--easing-standard),
78
+ color var(--duration-fast) var(--easing-standard);
79
+ }
80
+
81
+ @media (hover: hover) {
82
+ .ct-tree__row:hover {
83
+ background: var(--ct-tree-row-bg-hover);
84
+ }
85
+
86
+ .ct-tree__row:hover .ct-tree__actions {
87
+ --ct-tree-actions-opacity: 1;
88
+ }
89
+ }
90
+
91
+ /* Focus lives on the `<li role="treeitem">`; outline is rendered on the row */
92
+ .ct-tree__node:focus {
93
+ outline: none;
94
+ }
95
+
96
+ .ct-tree__node:focus-visible > .ct-tree__row {
97
+ outline: 2px solid var(--color-focus-ring);
98
+ outline-offset: -2px;
99
+ }
100
+
101
+ /* ── Toggle (chevron) ── */
102
+
103
+ .ct-tree__toggle,
104
+ .ct-tree__spacer {
105
+ flex-shrink: 0;
106
+ inline-size: var(--ct-tree-toggle-size);
107
+ block-size: var(--ct-tree-toggle-size);
108
+ display: inline-flex;
109
+ align-items: center;
110
+ justify-content: center;
111
+ }
112
+
113
+ .ct-tree__toggle {
114
+ padding: 0;
115
+ margin: 0;
116
+ background: transparent;
117
+ border: none;
118
+ border-radius: var(--ct-tree-toggle-radius);
119
+ color: var(--ct-tree-toggle-color);
120
+ cursor: pointer;
121
+ transition: color var(--duration-fast) var(--easing-standard),
122
+ background var(--duration-fast) var(--easing-standard);
123
+ }
124
+
125
+ @media (hover: hover) {
126
+ .ct-tree__toggle:hover {
127
+ color: var(--ct-tree-toggle-color-hover);
128
+ }
129
+ }
130
+
131
+ .ct-tree__chevron {
132
+ inline-size: 0.75rem;
133
+ block-size: 0.75rem;
134
+ transition: transform var(--duration-fast) var(--easing-standard);
135
+ }
136
+
137
+ .ct-tree__node[aria-expanded='true'] > .ct-tree__row .ct-tree__chevron {
138
+ transform: rotate(90deg);
139
+ }
140
+
141
+ [dir='rtl'] .ct-tree__chevron {
142
+ transform: rotate(180deg);
143
+ }
144
+
145
+ [dir='rtl'] .ct-tree__node[aria-expanded='true'] > .ct-tree__row .ct-tree__chevron {
146
+ transform: rotate(90deg);
147
+ }
148
+
149
+ /* ── Content / actions slots ── */
150
+
151
+ .ct-tree__content {
152
+ display: flex;
153
+ align-items: center;
154
+ gap: var(--space-3);
155
+ min-inline-size: 0;
156
+ flex: 1;
157
+ overflow: hidden;
158
+ text-overflow: ellipsis;
159
+ white-space: nowrap;
160
+ }
161
+
162
+ .ct-tree__content > svg {
163
+ flex-shrink: 0;
164
+ inline-size: var(--icon-sm);
165
+ block-size: var(--icon-sm);
166
+ color: var(--color-text-secondary);
167
+ }
168
+
169
+ .ct-tree__label {
170
+ overflow: hidden;
171
+ text-overflow: ellipsis;
172
+ white-space: nowrap;
173
+ }
174
+
175
+ .ct-tree__label mark {
176
+ background: color-mix(in srgb, var(--color-brand-primary) 22%, transparent);
177
+ color: inherit;
178
+ border-radius: 2px;
179
+ padding-inline: 1px;
180
+ }
181
+
182
+ .ct-tree__actions {
183
+ display: inline-flex;
184
+ align-items: center;
185
+ gap: var(--space-2);
186
+ flex-shrink: 0;
187
+ margin-inline-start: auto;
188
+ opacity: var(--ct-tree-actions-opacity);
189
+ transition: opacity var(--duration-fast) var(--easing-standard);
190
+ }
191
+
192
+ .ct-tree__node:focus-visible > .ct-tree__row .ct-tree__actions,
193
+ .ct-tree__row:focus-within .ct-tree__actions {
194
+ --ct-tree-actions-opacity: 1;
195
+ }
196
+
197
+ /* ── Selection ── */
198
+
199
+ .ct-tree__node[aria-selected='true'] > .ct-tree__row,
200
+ .ct-tree__node--selected > .ct-tree__row {
201
+ background: var(--ct-tree-row-bg-selected);
202
+ color: var(--ct-tree-row-color-selected);
203
+ font-weight: var(--font-weight-semibold);
204
+ }
205
+
206
+ .ct-tree__node[aria-selected='true'] > .ct-tree__row .ct-tree__content > svg,
207
+ .ct-tree__node--selected > .ct-tree__row .ct-tree__content > svg {
208
+ color: var(--ct-tree-row-color-selected);
209
+ }
210
+
211
+ /* ── Disabled ── */
212
+
213
+ .ct-tree__node[aria-disabled='true'] > .ct-tree__row {
214
+ opacity: var(--opacity-disabled);
215
+ cursor: not-allowed;
216
+ }
217
+
218
+ .ct-tree__node[aria-disabled='true'] > .ct-tree__row:hover {
219
+ background: var(--ct-tree-row-bg);
220
+ }
221
+
222
+ /* ── Async loading (aria-busy on the `<li role="treeitem">`) ── */
223
+
224
+ .ct-tree__node[aria-busy='true'] > .ct-tree__row .ct-tree__chevron {
225
+ animation: ct-spin var(--duration-xslow) linear infinite;
226
+ transform-origin: center;
227
+ }
228
+
229
+ .ct-tree__node[aria-busy='true'] > .ct-tree__row .ct-tree__toggle {
230
+ pointer-events: none;
231
+ }
232
+
233
+ /* ── Orphan state ── */
234
+
235
+ .ct-tree__node--orphan > .ct-tree__row {
236
+ --ct-tree-row-bg: var(--ct-tree-orphan-bg);
237
+ border: 1px dashed var(--ct-tree-orphan-border);
238
+ color: var(--ct-tree-orphan-color);
239
+ }
240
+
241
+ .ct-tree__node--orphan > .ct-tree__row .ct-tree__content > svg {
242
+ color: var(--ct-tree-orphan-color);
243
+ }
244
+
245
+ /* ── Modifier: indent guides ── */
246
+
247
+ .ct-tree--guides .ct-tree__group::before {
248
+ content: '';
249
+ position: absolute;
250
+ inset-block: 0;
251
+ /* Anchor guide under parent's chevron centre */
252
+ inset-inline-start: calc(
253
+ var(--ct-tree-row-padding-x) +
254
+ var(--ct-tree-indent) * (var(--ct-parent-level, 0)) +
255
+ var(--ct-tree-toggle-size) / 2
256
+ );
257
+ inline-size: var(--ct-tree-guide-width);
258
+ background: var(--ct-tree-guide-color);
259
+ pointer-events: none;
260
+ }
261
+
262
+ /* ── Modifier: dense ── */
263
+
264
+ .ct-tree--dense {
265
+ --ct-tree-row-height: 1.5rem;
266
+ --ct-tree-row-padding-y: var(--space-1);
267
+ --ct-tree-row-gap: var(--space-2);
268
+ font-size: var(--font-size-xs);
269
+ }
270
+
271
+ /* ── Modifier: bordered (optional surface variant) ── */
272
+
273
+ .ct-tree--bordered {
274
+ border: var(--border-thin) solid var(--color-border-subtle);
275
+ border-radius: var(--radius-md);
276
+ padding: var(--space-2);
277
+ background: var(--color-bg-elevated);
278
+ }
279
+
280
+ /* ── Reduced motion ── */
281
+
282
+ @media (prefers-reduced-motion: reduce) {
283
+ .ct-tree__row,
284
+ .ct-tree__chevron,
285
+ .ct-tree__toggle,
286
+ .ct-tree__actions {
287
+ transition: none;
288
+ }
289
+
290
+ .ct-tree__node[aria-busy='true'] > .ct-tree__row .ct-tree__chevron {
291
+ animation: none;
292
+ }
293
+ }
294
+
295
+ /* ── Forced colors / High-contrast ── */
296
+
297
+ @media (forced-colors: active) {
298
+ .ct-tree__row {
299
+ border: 1px solid transparent;
300
+ }
301
+
302
+ .ct-tree__node:focus-visible > .ct-tree__row {
303
+ outline: 2px solid Highlight;
304
+ outline-offset: -2px;
305
+ }
306
+
307
+ .ct-tree__node[aria-selected='true'] > .ct-tree__row,
308
+ .ct-tree__node--selected > .ct-tree__row {
309
+ border: 2px solid Highlight;
310
+ background: Canvas;
311
+ color: HighlightText;
312
+ forced-color-adjust: none;
313
+ }
314
+
315
+ .ct-tree--guides .ct-tree__group::before {
316
+ background: CanvasText;
317
+ }
318
+
319
+ .ct-tree__node--orphan > .ct-tree__row {
320
+ border: 1px dashed Mark;
321
+ color: Mark;
322
+ }
323
+
324
+ .ct-tree__chevron,
325
+ .ct-tree__content > svg {
326
+ forced-color-adjust: auto;
327
+ }
328
+ }
package/docs/guidelines.md CHANGED
@@ -82,6 +82,65 @@ A consistent, accessible, professional design system for modern web applications
82
82
  - **Close**: On blur and Esc
83
83
  - **Role**: `role="tooltip"` with `aria-describedby`
84
84
 
85
+ ### Tree (`ct-tree`)
86
+
87
+ Hierarchical disclosure following the [WAI-ARIA Tree View pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/). Use it for n-level nested data such as file explorers, organisation hierarchies, or category trees.
88
+
89
+ **Roles**
90
+ - Container: `<ul role="tree">` with an `aria-label` or `aria-labelledby` reference
91
+ - Node: `<li role="treeitem">` with `aria-level` (1-based), `aria-setsize`, `aria-posinset`
92
+ - Children container: `<ul role="group">`
93
+ - Expandable nodes carry `aria-expanded="true|false"`. Leaf nodes omit the attribute.
94
+
95
+ **Indent**
96
+ Set `--ct-level` inline on each `.ct-tree__row` (matches the node's `aria-level`). The bundled JS controller used in Storybook fills it in automatically; framework wrappers should generate it during render.
97
+
98
+ **Keyboard**
99
+ - `↑` / `↓`: focus previous / next visible row
100
+ - `→`: if collapsed, expand. If expanded, focus first child. Leaf: nothing.
101
+ - `←`: if expanded, collapse. Otherwise, focus parent row.
102
+ - `Home` / `End`: focus first / last visible row
103
+ - `Enter`: activate (consumer-defined; emit `ct-tree:activate`)
104
+ - `Space`: toggle selection (multi/single) or activate (no selection)
105
+ - `*`: expand all siblings on the same level
106
+ - Type-ahead (`A`–`Z`): focus next row whose label starts with the typed prefix; buffer resets after 500 ms
107
+
108
+ **Roving tabindex**
109
+ Exactly one `<li role="treeitem">` carries `tabindex="0"`. All others carry `tabindex="-1"`. Arrow keys move focus — and the `tabindex` — along with them. The `tabindex` lives on the element with the `treeitem` role, never on the inner `.ct-tree__row` `<div>`: a focused `<div>` without a role would orphan the screen-reader announcement of level, posinset, expanded and selected state.
110
+
111
+ **Toggle / chevron**
112
+ The `.ct-tree__toggle` is a non-focusable `<span aria-hidden="true">`. Expand/collapse is reachable via keyboard through `←`/`→` on the row and via mouse through clicking the chevron. We deliberately avoid making the toggle a `<button>`: a focusable button inside a focusable row violates `aria-hidden-focus` / `nested-interactive`, and the row already provides the keyboard affordance.
113
+
114
+ **Row actions**
115
+ Buttons in the `.ct-tree__actions` slot live inside the focusable treeitem. Give them `tabindex="-1"` so the tree exposes a single Tab stop, as required by the WAI-ARIA Tree View pattern. Reach them via mouse, or expose a row-level action hotkey from the consuming framework.
116
+
117
+ **Selection**
118
+ - `aria-selected="true|false"` on the `<li role="treeitem">` (only when selection is active).
119
+ - For multi-selection, the container needs `aria-multiselectable="true"`. The Storybook controller (`attachTree`) sets and tears this down automatically when invoked with `selection: 'multi'`.
120
+ - Construct only styles selection — the consumer decides whether to clear other rows (`single`) or keep them (`multi`).
121
+
122
+ **Async children**
123
+ Set `aria-busy="true"` on the `<li role="treeitem">` while its children are loading. The chevron switches to a spinner via the existing `ct-spin` keyframe and the toggle becomes non-interactive while busy.
124
+
125
+ **Disabled nodes**
126
+ Use `aria-disabled="true"` on the `<li>`. Do **not** use the HTML `disabled` attribute — `treeitem` is not a form control. The Storybook controller skips activation, selection and toggle for disabled nodes; arrow-key navigation still passes through them so screen readers can announce them.
127
+
128
+ **Orphan state**
129
+ For sub-nodes whose parent reference is missing in the data set, render them on the root level with the `.ct-tree__node--orphan` modifier. They get a warning-tinted surface and a dashed border so the data inconsistency is visible without breaking the tree.
130
+
131
+ **Custom events**
132
+ The Storybook controller emits four bubbling `CustomEvent`s on the focused treeitem so consumers can wire up application logic without re-implementing the keyboard model:
133
+
134
+ | Event | Detail | Fires on |
135
+ |---|---|---|
136
+ | `ct-tree:expand` | `{ node }` | Node opened (click on toggle, `→`, `*`) |
137
+ | `ct-tree:collapse` | `{ node }` | Node closed (click on toggle, `←`) |
138
+ | `ct-tree:select` | `{ node, mode: 'click'\|'enter'\|'space' }` | Selection changed (only when `selection !== 'none'`) |
139
+ | `ct-tree:activate` | `{ node }` | Row primary-action (click, `Enter`, or `Space` when no selection) |
140
+
141
+ **What's not in Phase 1**
142
+ Drag & drop reparenting, virtual scrolling, and tristate parent-derived checkboxes are out of scope and tracked separately.
143
+
85
144
  ## Component States
86
145
 
87
146
  Use these attributes for state management:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neuravision/construct",
3
- "version": "1.1.5",
3
+ "version": "1.2.0",
4
4
  "description": "Construct Design System - Accessible, token-based design system for modern web applications",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens/tokens.css CHANGED
@@ -63,6 +63,26 @@
63
63
  --color-green-700: #1B6145;
64
64
  --color-green-800: #134533;
65
65
  --color-green-900: #0C2E22;
66
+ --color-purple-50: #F4EFFA;
67
+ --color-purple-100: #E5D7F4;
68
+ --color-purple-200: #C9B0E6;
69
+ --color-purple-300: #A988D6;
70
+ --color-purple-400: #8961C2;
71
+ --color-purple-500: #6F45A8;
72
+ --color-purple-600: #5A3789;
73
+ --color-purple-700: #432868;
74
+ --color-purple-800: #2D1A48;
75
+ --color-purple-900: #1A0F2C;
76
+ --color-pink-50: #FBEEF3;
77
+ --color-pink-100: #F5CDDC;
78
+ --color-pink-200: #EA9CB7;
79
+ --color-pink-300: #DD6F92;
80
+ --color-pink-400: #CD4671;
81
+ --color-pink-500: #B22F58;
82
+ --color-pink-600: #8E2244;
83
+ --color-pink-700: #6A1932;
84
+ --color-pink-800: #461020;
85
+ --color-pink-900: #29080F;
66
86
  /* Typography */
67
87
  --font-family-brand: "Sora", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
68
88
  --font-family-text: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
@@ -256,6 +276,22 @@
256
276
  --color-state-danger-text: var(--color-red-700);
257
277
  --color-overlay-scrim: rgba(14, 23, 32, 0.6);
258
278
  --color-focus-ring: var(--color-teal-400);
279
+ --color-avatar-seed-1-bg: var(--color-ocean-100);
280
+ --color-avatar-seed-1-fg: var(--color-ocean-800);
281
+ --color-avatar-seed-2-bg: var(--color-teal-100);
282
+ --color-avatar-seed-2-fg: var(--color-teal-800);
283
+ --color-avatar-seed-3-bg: var(--color-amber-100);
284
+ --color-avatar-seed-3-fg: var(--color-amber-800);
285
+ --color-avatar-seed-4-bg: var(--color-red-100);
286
+ --color-avatar-seed-4-fg: var(--color-red-800);
287
+ --color-avatar-seed-5-bg: var(--color-green-100);
288
+ --color-avatar-seed-5-fg: var(--color-green-800);
289
+ --color-avatar-seed-6-bg: var(--color-purple-100);
290
+ --color-avatar-seed-6-fg: var(--color-purple-800);
291
+ --color-avatar-seed-7-bg: var(--color-pink-100);
292
+ --color-avatar-seed-7-fg: var(--color-pink-800);
293
+ --color-avatar-seed-8-bg: var(--color-slate-200);
294
+ --color-avatar-seed-8-fg: var(--color-slate-800);
259
295
  --theme-color-scheme: light;
260
296
  --font-family-heading: var(--font-family-brand);
261
297
  --font-family-body: var(--font-family-text);
@@ -306,6 +342,22 @@
306
342
  --color-state-danger-text: var(--color-red-200);
307
343
  --color-overlay-scrim: rgba(8, 14, 20, 0.7);
308
344
  --color-focus-ring: var(--color-teal-300);
345
+ --color-avatar-seed-1-bg: var(--color-ocean-800);
346
+ --color-avatar-seed-1-fg: var(--color-ocean-200);
347
+ --color-avatar-seed-2-bg: var(--color-teal-800);
348
+ --color-avatar-seed-2-fg: var(--color-teal-200);
349
+ --color-avatar-seed-3-bg: var(--color-amber-800);
350
+ --color-avatar-seed-3-fg: var(--color-amber-200);
351
+ --color-avatar-seed-4-bg: var(--color-red-800);
352
+ --color-avatar-seed-4-fg: var(--color-red-200);
353
+ --color-avatar-seed-5-bg: var(--color-green-800);
354
+ --color-avatar-seed-5-fg: var(--color-green-200);
355
+ --color-avatar-seed-6-bg: var(--color-purple-800);
356
+ --color-avatar-seed-6-fg: var(--color-purple-200);
357
+ --color-avatar-seed-7-bg: var(--color-pink-800);
358
+ --color-avatar-seed-7-fg: var(--color-pink-200);
359
+ --color-avatar-seed-8-bg: var(--color-slate-700);
360
+ --color-avatar-seed-8-fg: var(--color-slate-200);
309
361
  --theme-color-scheme: dark;
310
362
  }
311
363
 
@@ -346,6 +398,22 @@
346
398
  --color-state-danger-text: var(--color-red-800);
347
399
  --color-overlay-scrim: rgba(14, 23, 32, 0.7);
348
400
  --color-focus-ring: var(--color-amber-400);
401
+ --color-avatar-seed-1-bg: var(--color-ocean-50);
402
+ --color-avatar-seed-1-fg: var(--color-ocean-900);
403
+ --color-avatar-seed-2-bg: var(--color-teal-50);
404
+ --color-avatar-seed-2-fg: var(--color-teal-900);
405
+ --color-avatar-seed-3-bg: var(--color-amber-50);
406
+ --color-avatar-seed-3-fg: var(--color-amber-900);
407
+ --color-avatar-seed-4-bg: var(--color-red-50);
408
+ --color-avatar-seed-4-fg: var(--color-red-900);
409
+ --color-avatar-seed-5-bg: var(--color-green-50);
410
+ --color-avatar-seed-5-fg: var(--color-green-900);
411
+ --color-avatar-seed-6-bg: var(--color-purple-50);
412
+ --color-avatar-seed-6-fg: var(--color-purple-900);
413
+ --color-avatar-seed-7-bg: var(--color-pink-50);
414
+ --color-avatar-seed-7-fg: var(--color-pink-900);
415
+ --color-avatar-seed-8-bg: var(--color-slate-50);
416
+ --color-avatar-seed-8-fg: var(--color-slate-950);
349
417
  --theme-color-scheme: light;
350
418
  }
351
419
 
@@ -387,6 +455,22 @@
387
455
  --color-state-danger-text: var(--color-red-200);
388
456
  --color-overlay-scrim: rgba(8, 14, 20, 0.7);
389
457
  --color-focus-ring: var(--color-teal-300);
458
+ --color-avatar-seed-1-bg: var(--color-ocean-800);
459
+ --color-avatar-seed-1-fg: var(--color-ocean-200);
460
+ --color-avatar-seed-2-bg: var(--color-teal-800);
461
+ --color-avatar-seed-2-fg: var(--color-teal-200);
462
+ --color-avatar-seed-3-bg: var(--color-amber-800);
463
+ --color-avatar-seed-3-fg: var(--color-amber-200);
464
+ --color-avatar-seed-4-bg: var(--color-red-800);
465
+ --color-avatar-seed-4-fg: var(--color-red-200);
466
+ --color-avatar-seed-5-bg: var(--color-green-800);
467
+ --color-avatar-seed-5-fg: var(--color-green-200);
468
+ --color-avatar-seed-6-bg: var(--color-purple-800);
469
+ --color-avatar-seed-6-fg: var(--color-purple-200);
470
+ --color-avatar-seed-7-bg: var(--color-pink-800);
471
+ --color-avatar-seed-7-fg: var(--color-pink-200);
472
+ --color-avatar-seed-8-bg: var(--color-slate-700);
473
+ --color-avatar-seed-8-fg: var(--color-slate-200);
390
474
  --theme-color-scheme: dark;
391
475
  }
392
476
  }
@@ -429,6 +513,22 @@
429
513
  --color-state-danger-text: var(--color-red-800);
430
514
  --color-overlay-scrim: rgba(14, 23, 32, 0.7);
431
515
  --color-focus-ring: var(--color-amber-400);
516
+ --color-avatar-seed-1-bg: var(--color-ocean-50);
517
+ --color-avatar-seed-1-fg: var(--color-ocean-900);
518
+ --color-avatar-seed-2-bg: var(--color-teal-50);
519
+ --color-avatar-seed-2-fg: var(--color-teal-900);
520
+ --color-avatar-seed-3-bg: var(--color-amber-50);
521
+ --color-avatar-seed-3-fg: var(--color-amber-900);
522
+ --color-avatar-seed-4-bg: var(--color-red-50);
523
+ --color-avatar-seed-4-fg: var(--color-red-900);
524
+ --color-avatar-seed-5-bg: var(--color-green-50);
525
+ --color-avatar-seed-5-fg: var(--color-green-900);
526
+ --color-avatar-seed-6-bg: var(--color-purple-50);
527
+ --color-avatar-seed-6-fg: var(--color-purple-900);
528
+ --color-avatar-seed-7-bg: var(--color-pink-50);
529
+ --color-avatar-seed-7-fg: var(--color-pink-900);
530
+ --color-avatar-seed-8-bg: var(--color-slate-50);
531
+ --color-avatar-seed-8-fg: var(--color-slate-950);
432
532
  --theme-color-scheme: light;
433
533
  }
434
534
  }
package/tokens/tokens.js CHANGED
@@ -75,6 +75,30 @@ export const primitives = {
75
75
  "700": "#1B6145",
76
76
  "800": "#134533",
77
77
  "900": "#0C2E22"
78
+ },
79
+ "purple": {
80
+ "50": "#F4EFFA",
81
+ "100": "#E5D7F4",
82
+ "200": "#C9B0E6",
83
+ "300": "#A988D6",
84
+ "400": "#8961C2",
85
+ "500": "#6F45A8",
86
+ "600": "#5A3789",
87
+ "700": "#432868",
88
+ "800": "#2D1A48",
89
+ "900": "#1A0F2C"
90
+ },
91
+ "pink": {
92
+ "50": "#FBEEF3",
93
+ "100": "#F5CDDC",
94
+ "200": "#EA9CB7",
95
+ "300": "#DD6F92",
96
+ "400": "#CD4671",
97
+ "500": "#B22F58",
98
+ "600": "#8E2244",
99
+ "700": "#6A1932",
100
+ "800": "#461020",
101
+ "900": "#29080F"
78
102
  }
79
103
  },
80
104
  "font": {
@@ -283,6 +307,24 @@ export const semantic = {
283
307
  },
284
308
  "focus": {
285
309
  "ring": "#35B2AA"
310
+ },
311
+ "avatarSeed": {
312
+ "1Bg": "#CFE5EC",
313
+ "1Fg": "#103745",
314
+ "2Bg": "#C5ECEA",
315
+ "2Fg": "#0D4744",
316
+ "3Bg": "#FFE8BF",
317
+ "3Fg": "#5E3500",
318
+ "4Bg": "#F8CACA",
319
+ "4Fg": "#561717",
320
+ "5Bg": "#C7EAD9",
321
+ "5Fg": "#134533",
322
+ "6Bg": "#E5D7F4",
323
+ "6Fg": "#2D1A48",
324
+ "7Bg": "#F5CDDC",
325
+ "7Fg": "#461020",
326
+ "8Bg": "#D3DDE7",
327
+ "8Fg": "#263747"
286
328
  }
287
329
  },
288
330
  "theme": {
@@ -430,6 +472,24 @@ export const semanticThemes = {
430
472
  },
431
473
  "focus": {
432
474
  "ring": "#35B2AA"
475
+ },
476
+ "avatarSeed": {
477
+ "1Bg": "#CFE5EC",
478
+ "1Fg": "#103745",
479
+ "2Bg": "#C5ECEA",
480
+ "2Fg": "#0D4744",
481
+ "3Bg": "#FFE8BF",
482
+ "3Fg": "#5E3500",
483
+ "4Bg": "#F8CACA",
484
+ "4Fg": "#561717",
485
+ "5Bg": "#C7EAD9",
486
+ "5Fg": "#134533",
487
+ "6Bg": "#E5D7F4",
488
+ "6Fg": "#2D1A48",
489
+ "7Bg": "#F5CDDC",
490
+ "7Fg": "#461020",
491
+ "8Bg": "#D3DDE7",
492
+ "8Fg": "#263747"
433
493
  }
434
494
  },
435
495
  "theme": {
@@ -575,6 +635,24 @@ export const semanticThemes = {
575
635
  },
576
636
  "focus": {
577
637
  "ring": "#63C7C1"
638
+ },
639
+ "avatarSeed": {
640
+ "1Bg": "#103745",
641
+ "1Fg": "#A5CBD8",
642
+ "2Bg": "#0D4744",
643
+ "2Fg": "#93DAD6",
644
+ "3Bg": "#5E3500",
645
+ "3Fg": "#FFD180",
646
+ "4Bg": "#561717",
647
+ "4Fg": "#F3A3A3",
648
+ "5Bg": "#134533",
649
+ "5Fg": "#9EDCC0",
650
+ "6Bg": "#2D1A48",
651
+ "6Fg": "#C9B0E6",
652
+ "7Bg": "#461020",
653
+ "7Fg": "#EA9CB7",
654
+ "8Bg": "#364C5F",
655
+ "8Fg": "#D3DDE7"
578
656
  }
579
657
  },
580
658
  "theme": {
@@ -720,6 +798,24 @@ export const semanticThemes = {
720
798
  },
721
799
  "focus": {
722
800
  "ring": "#FF9E1A"
801
+ },
802
+ "avatarSeed": {
803
+ "1Bg": "#E9F4F7",
804
+ "1Fg": "#0B2631",
805
+ "2Bg": "#E7F7F6",
806
+ "2Fg": "#0A3533",
807
+ "3Bg": "#FFF6E5",
808
+ "3Fg": "#3D2300",
809
+ "4Bg": "#FDECEC",
810
+ "4Fg": "#361010",
811
+ "5Bg": "#E8F6EF",
812
+ "5Fg": "#0C2E22",
813
+ "6Bg": "#F4EFFA",
814
+ "6Fg": "#1A0F2C",
815
+ "7Bg": "#FBEEF3",
816
+ "7Fg": "#29080F",
817
+ "8Bg": "#F5F7FA",
818
+ "8Fg": "#0E1720"
723
819
  }
724
820
  },
725
821
  "theme": {
@@ -887,6 +983,30 @@ export const cssVars = {
887
983
  "700": "var(--color-green-700)",
888
984
  "800": "var(--color-green-800)",
889
985
  "900": "var(--color-green-900)"
986
+ },
987
+ "purple": {
988
+ "50": "var(--color-purple-50)",
989
+ "100": "var(--color-purple-100)",
990
+ "200": "var(--color-purple-200)",
991
+ "300": "var(--color-purple-300)",
992
+ "400": "var(--color-purple-400)",
993
+ "500": "var(--color-purple-500)",
994
+ "600": "var(--color-purple-600)",
995
+ "700": "var(--color-purple-700)",
996
+ "800": "var(--color-purple-800)",
997
+ "900": "var(--color-purple-900)"
998
+ },
999
+ "pink": {
1000
+ "50": "var(--color-pink-50)",
1001
+ "100": "var(--color-pink-100)",
1002
+ "200": "var(--color-pink-200)",
1003
+ "300": "var(--color-pink-300)",
1004
+ "400": "var(--color-pink-400)",
1005
+ "500": "var(--color-pink-500)",
1006
+ "600": "var(--color-pink-600)",
1007
+ "700": "var(--color-pink-700)",
1008
+ "800": "var(--color-pink-800)",
1009
+ "900": "var(--color-pink-900)"
890
1010
  }
891
1011
  },
892
1012
  "font": {
@@ -1094,6 +1214,24 @@ export const cssVars = {
1094
1214
  },
1095
1215
  "focus": {
1096
1216
  "ring": "var(--color-focus-ring)"
1217
+ },
1218
+ "avatarSeed": {
1219
+ "1Bg": "var(--color-avatar-seed-1-bg)",
1220
+ "1Fg": "var(--color-avatar-seed-1-fg)",
1221
+ "2Bg": "var(--color-avatar-seed-2-bg)",
1222
+ "2Fg": "var(--color-avatar-seed-2-fg)",
1223
+ "3Bg": "var(--color-avatar-seed-3-bg)",
1224
+ "3Fg": "var(--color-avatar-seed-3-fg)",
1225
+ "4Bg": "var(--color-avatar-seed-4-bg)",
1226
+ "4Fg": "var(--color-avatar-seed-4-fg)",
1227
+ "5Bg": "var(--color-avatar-seed-5-bg)",
1228
+ "5Fg": "var(--color-avatar-seed-5-fg)",
1229
+ "6Bg": "var(--color-avatar-seed-6-bg)",
1230
+ "6Fg": "var(--color-avatar-seed-6-fg)",
1231
+ "7Bg": "var(--color-avatar-seed-7-bg)",
1232
+ "7Fg": "var(--color-avatar-seed-7-fg)",
1233
+ "8Bg": "var(--color-avatar-seed-8-bg)",
1234
+ "8Fg": "var(--color-avatar-seed-8-fg)"
1097
1235
  }
1098
1236
  },
1099
1237
  "theme": {
package/tokens/tokens.json CHANGED
@@ -74,6 +74,30 @@
74
74
  "700": "#1B6145",
75
75
  "800": "#134533",
76
76
  "900": "#0C2E22"
77
+ },
78
+ "purple": {
79
+ "50": "#F4EFFA",
80
+ "100": "#E5D7F4",
81
+ "200": "#C9B0E6",
82
+ "300": "#A988D6",
83
+ "400": "#8961C2",
84
+ "500": "#6F45A8",
85
+ "600": "#5A3789",
86
+ "700": "#432868",
87
+ "800": "#2D1A48",
88
+ "900": "#1A0F2C"
89
+ },
90
+ "pink": {
91
+ "50": "#FBEEF3",
92
+ "100": "#F5CDDC",
93
+ "200": "#EA9CB7",
94
+ "300": "#DD6F92",
95
+ "400": "#CD4671",
96
+ "500": "#B22F58",
97
+ "600": "#8E2244",
98
+ "700": "#6A1932",
99
+ "800": "#461020",
100
+ "900": "#29080F"
77
101
  }
78
102
  },
79
103
  "font": {
@@ -281,6 +305,24 @@
281
305
  },
282
306
  "focus": {
283
307
  "ring": "#35B2AA"
308
+ },
309
+ "avatarSeed": {
310
+ "1Bg": "#CFE5EC",
311
+ "1Fg": "#103745",
312
+ "2Bg": "#C5ECEA",
313
+ "2Fg": "#0D4744",
314
+ "3Bg": "#FFE8BF",
315
+ "3Fg": "#5E3500",
316
+ "4Bg": "#F8CACA",
317
+ "4Fg": "#561717",
318
+ "5Bg": "#C7EAD9",
319
+ "5Fg": "#134533",
320
+ "6Bg": "#E5D7F4",
321
+ "6Fg": "#2D1A48",
322
+ "7Bg": "#F5CDDC",
323
+ "7Fg": "#461020",
324
+ "8Bg": "#D3DDE7",
325
+ "8Fg": "#263747"
284
326
  }
285
327
  },
286
328
  "theme": {
@@ -427,6 +469,24 @@
427
469
  },
428
470
  "focus": {
429
471
  "ring": "#35B2AA"
472
+ },
473
+ "avatarSeed": {
474
+ "1Bg": "#CFE5EC",
475
+ "1Fg": "#103745",
476
+ "2Bg": "#C5ECEA",
477
+ "2Fg": "#0D4744",
478
+ "3Bg": "#FFE8BF",
479
+ "3Fg": "#5E3500",
480
+ "4Bg": "#F8CACA",
481
+ "4Fg": "#561717",
482
+ "5Bg": "#C7EAD9",
483
+ "5Fg": "#134533",
484
+ "6Bg": "#E5D7F4",
485
+ "6Fg": "#2D1A48",
486
+ "7Bg": "#F5CDDC",
487
+ "7Fg": "#461020",
488
+ "8Bg": "#D3DDE7",
489
+ "8Fg": "#263747"
430
490
  }
431
491
  },
432
492
  "theme": {
@@ -572,6 +632,24 @@
572
632
  },
573
633
  "focus": {
574
634
  "ring": "#63C7C1"
635
+ },
636
+ "avatarSeed": {
637
+ "1Bg": "#103745",
638
+ "1Fg": "#A5CBD8",
639
+ "2Bg": "#0D4744",
640
+ "2Fg": "#93DAD6",
641
+ "3Bg": "#5E3500",
642
+ "3Fg": "#FFD180",
643
+ "4Bg": "#561717",
644
+ "4Fg": "#F3A3A3",
645
+ "5Bg": "#134533",
646
+ "5Fg": "#9EDCC0",
647
+ "6Bg": "#2D1A48",
648
+ "6Fg": "#C9B0E6",
649
+ "7Bg": "#461020",
650
+ "7Fg": "#EA9CB7",
651
+ "8Bg": "#364C5F",
652
+ "8Fg": "#D3DDE7"
575
653
  }
576
654
  },
577
655
  "theme": {
@@ -717,6 +795,24 @@
717
795
  },
718
796
  "focus": {
719
797
  "ring": "#FF9E1A"
798
+ },
799
+ "avatarSeed": {
800
+ "1Bg": "#E9F4F7",
801
+ "1Fg": "#0B2631",
802
+ "2Bg": "#E7F7F6",
803
+ "2Fg": "#0A3533",
804
+ "3Bg": "#FFF6E5",
805
+ "3Fg": "#3D2300",
806
+ "4Bg": "#FDECEC",
807
+ "4Fg": "#361010",
808
+ "5Bg": "#E8F6EF",
809
+ "5Fg": "#0C2E22",
810
+ "6Bg": "#F4EFFA",
811
+ "6Fg": "#1A0F2C",
812
+ "7Bg": "#FBEEF3",
813
+ "7Fg": "#29080F",
814
+ "8Bg": "#F5F7FA",
815
+ "8Fg": "#0E1720"
720
816
  }
721
817
  },
722
818
  "theme": {
package/tokens/tokens.ts CHANGED
@@ -75,6 +75,30 @@ export const primitives = {
75
75
  "700": "#1B6145",
76
76
  "800": "#134533",
77
77
  "900": "#0C2E22"
78
+ },
79
+ "purple": {
80
+ "50": "#F4EFFA",
81
+ "100": "#E5D7F4",
82
+ "200": "#C9B0E6",
83
+ "300": "#A988D6",
84
+ "400": "#8961C2",
85
+ "500": "#6F45A8",
86
+ "600": "#5A3789",
87
+ "700": "#432868",
88
+ "800": "#2D1A48",
89
+ "900": "#1A0F2C"
90
+ },
91
+ "pink": {
92
+ "50": "#FBEEF3",
93
+ "100": "#F5CDDC",
94
+ "200": "#EA9CB7",
95
+ "300": "#DD6F92",
96
+ "400": "#CD4671",
97
+ "500": "#B22F58",
98
+ "600": "#8E2244",
99
+ "700": "#6A1932",
100
+ "800": "#461020",
101
+ "900": "#29080F"
78
102
  }
79
103
  },
80
104
  "font": {
@@ -283,6 +307,24 @@ export const semantic = {
283
307
  },
284
308
  "focus": {
285
309
  "ring": "#35B2AA"
310
+ },
311
+ "avatarSeed": {
312
+ "1Bg": "#CFE5EC",
313
+ "1Fg": "#103745",
314
+ "2Bg": "#C5ECEA",
315
+ "2Fg": "#0D4744",
316
+ "3Bg": "#FFE8BF",
317
+ "3Fg": "#5E3500",
318
+ "4Bg": "#F8CACA",
319
+ "4Fg": "#561717",
320
+ "5Bg": "#C7EAD9",
321
+ "5Fg": "#134533",
322
+ "6Bg": "#E5D7F4",
323
+ "6Fg": "#2D1A48",
324
+ "7Bg": "#F5CDDC",
325
+ "7Fg": "#461020",
326
+ "8Bg": "#D3DDE7",
327
+ "8Fg": "#263747"
286
328
  }
287
329
  },
288
330
  "theme": {
@@ -430,6 +472,24 @@ export const semanticThemes = {
430
472
  },
431
473
  "focus": {
432
474
  "ring": "#35B2AA"
475
+ },
476
+ "avatarSeed": {
477
+ "1Bg": "#CFE5EC",
478
+ "1Fg": "#103745",
479
+ "2Bg": "#C5ECEA",
480
+ "2Fg": "#0D4744",
481
+ "3Bg": "#FFE8BF",
482
+ "3Fg": "#5E3500",
483
+ "4Bg": "#F8CACA",
484
+ "4Fg": "#561717",
485
+ "5Bg": "#C7EAD9",
486
+ "5Fg": "#134533",
487
+ "6Bg": "#E5D7F4",
488
+ "6Fg": "#2D1A48",
489
+ "7Bg": "#F5CDDC",
490
+ "7Fg": "#461020",
491
+ "8Bg": "#D3DDE7",
492
+ "8Fg": "#263747"
433
493
  }
434
494
  },
435
495
  "theme": {
@@ -575,6 +635,24 @@ export const semanticThemes = {
575
635
  },
576
636
  "focus": {
577
637
  "ring": "#63C7C1"
638
+ },
639
+ "avatarSeed": {
640
+ "1Bg": "#103745",
641
+ "1Fg": "#A5CBD8",
642
+ "2Bg": "#0D4744",
643
+ "2Fg": "#93DAD6",
644
+ "3Bg": "#5E3500",
645
+ "3Fg": "#FFD180",
646
+ "4Bg": "#561717",
647
+ "4Fg": "#F3A3A3",
648
+ "5Bg": "#134533",
649
+ "5Fg": "#9EDCC0",
650
+ "6Bg": "#2D1A48",
651
+ "6Fg": "#C9B0E6",
652
+ "7Bg": "#461020",
653
+ "7Fg": "#EA9CB7",
654
+ "8Bg": "#364C5F",
655
+ "8Fg": "#D3DDE7"
578
656
  }
579
657
  },
580
658
  "theme": {
@@ -720,6 +798,24 @@ export const semanticThemes = {
720
798
  },
721
799
  "focus": {
722
800
  "ring": "#FF9E1A"
801
+ },
802
+ "avatarSeed": {
803
+ "1Bg": "#E9F4F7",
804
+ "1Fg": "#0B2631",
805
+ "2Bg": "#E7F7F6",
806
+ "2Fg": "#0A3533",
807
+ "3Bg": "#FFF6E5",
808
+ "3Fg": "#3D2300",
809
+ "4Bg": "#FDECEC",
810
+ "4Fg": "#361010",
811
+ "5Bg": "#E8F6EF",
812
+ "5Fg": "#0C2E22",
813
+ "6Bg": "#F4EFFA",
814
+ "6Fg": "#1A0F2C",
815
+ "7Bg": "#FBEEF3",
816
+ "7Fg": "#29080F",
817
+ "8Bg": "#F5F7FA",
818
+ "8Fg": "#0E1720"
723
819
  }
724
820
  },
725
821
  "theme": {
@@ -887,6 +983,30 @@ export const cssVars = {
887
983
  "700": "var(--color-green-700)",
888
984
  "800": "var(--color-green-800)",
889
985
  "900": "var(--color-green-900)"
986
+ },
987
+ "purple": {
988
+ "50": "var(--color-purple-50)",
989
+ "100": "var(--color-purple-100)",
990
+ "200": "var(--color-purple-200)",
991
+ "300": "var(--color-purple-300)",
992
+ "400": "var(--color-purple-400)",
993
+ "500": "var(--color-purple-500)",
994
+ "600": "var(--color-purple-600)",
995
+ "700": "var(--color-purple-700)",
996
+ "800": "var(--color-purple-800)",
997
+ "900": "var(--color-purple-900)"
998
+ },
999
+ "pink": {
1000
+ "50": "var(--color-pink-50)",
1001
+ "100": "var(--color-pink-100)",
1002
+ "200": "var(--color-pink-200)",
1003
+ "300": "var(--color-pink-300)",
1004
+ "400": "var(--color-pink-400)",
1005
+ "500": "var(--color-pink-500)",
1006
+ "600": "var(--color-pink-600)",
1007
+ "700": "var(--color-pink-700)",
1008
+ "800": "var(--color-pink-800)",
1009
+ "900": "var(--color-pink-900)"
890
1010
  }
891
1011
  },
892
1012
  "font": {
@@ -1094,6 +1214,24 @@ export const cssVars = {
1094
1214
  },
1095
1215
  "focus": {
1096
1216
  "ring": "var(--color-focus-ring)"
1217
+ },
1218
+ "avatarSeed": {
1219
+ "1Bg": "var(--color-avatar-seed-1-bg)",
1220
+ "1Fg": "var(--color-avatar-seed-1-fg)",
1221
+ "2Bg": "var(--color-avatar-seed-2-bg)",
1222
+ "2Fg": "var(--color-avatar-seed-2-fg)",
1223
+ "3Bg": "var(--color-avatar-seed-3-bg)",
1224
+ "3Fg": "var(--color-avatar-seed-3-fg)",
1225
+ "4Bg": "var(--color-avatar-seed-4-bg)",
1226
+ "4Fg": "var(--color-avatar-seed-4-fg)",
1227
+ "5Bg": "var(--color-avatar-seed-5-bg)",
1228
+ "5Fg": "var(--color-avatar-seed-5-fg)",
1229
+ "6Bg": "var(--color-avatar-seed-6-bg)",
1230
+ "6Fg": "var(--color-avatar-seed-6-fg)",
1231
+ "7Bg": "var(--color-avatar-seed-7-bg)",
1232
+ "7Fg": "var(--color-avatar-seed-7-fg)",
1233
+ "8Bg": "var(--color-avatar-seed-8-bg)",
1234
+ "8Fg": "var(--color-avatar-seed-8-fg)"
1097
1235
  }
1098
1236
  },
1099
1237
  "theme": {