@optiaxiom/globals 0.5.0 → 0.6.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 (7) hide show
  1. package/dist/context.js +1 -1
  2. package/dist/index.d.ts +181 -352
  3. package/dist/index.js +1 -1
  4. package/dist/toaster.js +32 -10
  5. package/dist/tokens/colors.js +94 -174
  6. package/dist/tokens/index.js +2 -6
  7. package/package.json +5 -4
package/dist/context.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { createContext } from 'react';
2
2
 
3
- const AxiomVersionContext = createContext(void 0);
3
+ const AxiomVersionContext = createContext(undefined);
4
4
 
5
5
  export { AxiomVersionContext };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import { useSyncExternalStore, ReactElement } from 'react';
2
+ import { RefObject, ReactElement, useSyncExternalStore } from 'react';
3
3
 
4
4
  declare const AxiomVersionContext: react.Context<string | undefined>;
5
5
 
@@ -17,91 +17,91 @@ declare const theme: MapLeafNodes<{
17
17
  readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
18
18
  };
19
19
  readonly colors: {
20
- readonly "bg.accent": "#0037FF";
21
- readonly "bg.accent.hovered": "#002CCC";
22
- readonly "bg.accent.light": "#B3C3FF";
23
- readonly "bg.accent.pressed": "#002894";
24
- readonly "bg.accent.subtle": "#F0F3FF";
25
- readonly "bg.avatar.neutral": "#E9EDF5";
26
- readonly "bg.avatar.purple": "#E5DCF4";
27
- readonly "bg.default": "#FFFFFF";
28
- readonly "bg.default.hovered": "#091E420A";
29
- readonly "bg.default.inverse": "#2E3442";
30
- readonly "bg.default.inverse.hovered": "#1C212B";
31
- readonly "bg.default.inverse.pressed": "#1C2029";
32
- readonly "bg.default.pressed": "#091E4214";
33
- readonly "bg.error": "#CC1616";
34
- readonly "bg.error.hovered": "#B21313";
35
- readonly "bg.error.light": "#FFB4B4";
36
- readonly "bg.error.pressed": "#911D1D";
37
- readonly "bg.error.subtle": "#FFD7D7";
38
- readonly "bg.error.subtlest": "#FFF7F7";
39
- readonly "bg.information": "#115DD4";
40
- readonly "bg.information.light": "#A1C2F7";
41
- readonly "bg.information.subtle": "#C6DBFA";
42
- readonly "bg.overlay": "#091E4252";
43
- readonly "bg.page": "#F9FAFC";
44
- readonly "bg.secondary": "#F5F6FA";
45
- readonly "bg.secondary.hovered": "#F5F6FA";
46
- readonly "bg.spinner.default": "#091E42";
47
- readonly "bg.spinner.inverse": "#F9FAFC";
48
- readonly "bg.success": "#038047";
49
- readonly "bg.success.hovered": "#24663E";
50
- readonly "bg.success.light": "#A5E1C3";
51
- readonly "bg.success.subtle": "#D1F0E1";
52
- readonly "bg.tertiary": "#DADFEB";
53
- readonly "bg.tertiary.hovered": "#CACFDC";
54
- readonly "bg.warning": "#FFC84B";
55
- readonly "bg.warning.hovered": "#DC6903";
56
- readonly "bg.warning.light": "#FEDF88";
57
- readonly "bg.warning.subtle": "#FEF1C6";
58
- readonly "border.accent": "#0037FF";
59
- readonly "border.active": "#838DA4";
60
- readonly "border.active.hovered": "#66708C";
61
- readonly "border.default": "#CACFDC";
62
- readonly "border.default.hovered": "#838DA4";
63
- readonly "border.disabled": "#F5F6FA";
64
- readonly "border.error": "#CC1616";
65
- readonly "border.focus": "#2E66F7";
66
- readonly "border.focus.error": "#F64F4F";
67
- readonly "border.secondary": "#DADFEB";
68
- readonly "border.success": "#03A65D";
69
- readonly "border.tertiary": "#E9EDF5";
70
- readonly "border.warning": "#F79008";
71
- readonly "fg.accent": "#0037FF";
72
- readonly "fg.accent.hovered": "#002CCC";
73
- readonly "fg.accent.strong": "#002894";
74
- readonly "fg.avatar.neutral": "#4F576E";
75
- readonly "fg.avatar.purple": "#412470";
76
- readonly "fg.default": "#2E3442";
77
- readonly "fg.default.inverse": "#FFFFFF";
78
- readonly "fg.disabled": "#CACFDC";
79
- readonly "fg.error": "#CC1616";
80
- readonly "fg.error.hovered": "#B21313";
81
- readonly "fg.error.light": "#FC8B8B";
82
- readonly "fg.error.strong": "#911D1D";
83
- readonly "fg.information": "#2F7AEE";
84
- readonly "fg.information.light": "#7BAAF4";
85
- readonly "fg.information.strong": "#0D46A0";
86
- readonly "fg.link.default": "#0037FF";
87
- readonly "fg.link.default.hovered": "#002CCC";
88
- readonly "fg.link.inverse": "#FFFFFF";
89
- readonly "fg.link.subtle": "#2E3442";
90
- readonly "fg.link.visited": "#532E8F";
91
- readonly "fg.secondary": "#4F576E";
92
- readonly "fg.spinner.default": "#2E3442";
93
- readonly "fg.spinner.inverse": "#CACFDC";
94
- readonly "fg.success": "#03A65D";
95
- readonly "fg.success.hovered": "#038047";
96
- readonly "fg.success.light": "#7CD2A7";
97
- readonly "fg.success.strong": "#24663E";
98
- readonly "fg.tertiary": "#66708C";
99
- readonly "fg.warning": "#F79008";
100
- readonly "fg.warning.hovered": "#DC6903";
101
- readonly "fg.warning.inverse": "#2E3442";
102
- readonly "fg.warning.light": "#FFC84B";
103
- readonly "fg.warning.strong": "#B54707";
104
- readonly "fg.white": "#FFFFFF";
20
+ readonly "bg.accent": "light-dark(#0037FF, #2E66F7)";
21
+ readonly "bg.accent.hovered": "light-dark(#002CCC, #2E66F7)";
22
+ readonly "bg.accent.light": "light-dark(#B3C3FF, #001666)";
23
+ readonly "bg.accent.pressed": "light-dark(#002894, #002CCC)";
24
+ readonly "bg.accent.subtle": "light-dark(#F0F3FF, #000B33)";
25
+ readonly "bg.avatar.neutral": "light-dark(#E9EDF5, #2E3442)";
26
+ readonly "bg.avatar.purple": "light-dark(#E5DCF4, #412470)";
27
+ readonly "bg.default": "light-dark(#FFFFFF, #1C2029)";
28
+ readonly "bg.default.hovered": "light-dark(#091E420A, #F9FAFC0F)";
29
+ readonly "bg.default.inverse": "light-dark(#2E3442, #E9EDF5)";
30
+ readonly "bg.default.inverse.hovered": "light-dark(#1C212B, #CACFDC)";
31
+ readonly "bg.default.inverse.pressed": "light-dark(#1C2029, #B8BECB)";
32
+ readonly "bg.default.pressed": "light-dark(#091E4214, #F9FAFC1F)";
33
+ readonly "bg.error": "light-dark(#CC1616, #CC1616)";
34
+ readonly "bg.error.hovered": "light-dark(#B21313, #F64F4F)";
35
+ readonly "bg.error.light": "light-dark(#FFB4B4, #911D1D)";
36
+ readonly "bg.error.pressed": "light-dark(#911D1D, #B21313)";
37
+ readonly "bg.error.subtle": "light-dark(#FFD7D7, #601313)";
38
+ readonly "bg.error.subtlest": "light-dark(#FFF7F7, #300A0A)";
39
+ readonly "bg.information": "light-dark(#115DD4, #115DD4)";
40
+ readonly "bg.information.light": "light-dark(#A1C2F7, #09306D)";
41
+ readonly "bg.information.subtle": "light-dark(#C6DBFA, #051939)";
42
+ readonly "bg.overlay": "light-dark(#091E4252, #F9FAFC52)";
43
+ readonly "bg.page": "light-dark(#F9FAFC, #171A23)";
44
+ readonly "bg.secondary": "light-dark(#F5F6FA, #1C212B)";
45
+ readonly "bg.secondary.hovered": "light-dark(#F5F6FA, #F9FAFC1F)";
46
+ readonly "bg.spinner.default": "light-dark(#091E42, #F9FAFC)";
47
+ readonly "bg.spinner.inverse": "light-dark(#F9FAFC, #F9FAFC)";
48
+ readonly "bg.success": "light-dark(#038047, #038047)";
49
+ readonly "bg.success.hovered": "light-dark(#24663E, #5AC58A)";
50
+ readonly "bg.success.light": "light-dark(#A5E1C3, #17492B)";
51
+ readonly "bg.success.subtle": "light-dark(#D1F0E1, #082415)";
52
+ readonly "bg.tertiary": "light-dark(#DADFEB, #4F576E)";
53
+ readonly "bg.tertiary.hovered": "light-dark(#CACFDC, #F9FAFC2E)";
54
+ readonly "bg.warning": "light-dark(#FFC84B, #F79008)";
55
+ readonly "bg.warning.hovered": "light-dark(#DC6903, #FDB022)";
56
+ readonly "bg.warning.light": "light-dark(#FEDF88, #7A2E0D)";
57
+ readonly "bg.warning.subtle": "light-dark(#FEF1C6, #4E1D09)";
58
+ readonly "border.accent": "light-dark(#0037FF, #6A8FFC)";
59
+ readonly "border.active": "light-dark(#838DA4, #4F576E)";
60
+ readonly "border.active.hovered": "light-dark(#66708C, #66708C)";
61
+ readonly "border.default": "light-dark(#CACFDC, #66708C)";
62
+ readonly "border.default.hovered": "light-dark(#838DA4, #838DA4)";
63
+ readonly "border.disabled": "light-dark(#F5F6FA, #2E3442)";
64
+ readonly "border.error": "light-dark(#CC1616, #FFB4B4)";
65
+ readonly "border.focus": "light-dark(#2E66F7, #6A8FFC)";
66
+ readonly "border.focus.error": "light-dark(#F64F4F, #FC8B8B)";
67
+ readonly "border.secondary": "light-dark(#DADFEB, #4F576E)";
68
+ readonly "border.success": "light-dark(#03A65D, #03A65D)";
69
+ readonly "border.tertiary": "light-dark(#E9EDF5, #2E3442)";
70
+ readonly "border.warning": "light-dark(#F79008, #F79008)";
71
+ readonly "fg.accent": "light-dark(#0037FF, #6A8FFC)";
72
+ readonly "fg.accent.hovered": "light-dark(#002CCC, #0037FF)";
73
+ readonly "fg.accent.strong": "light-dark(#002894, #2E66F7)";
74
+ readonly "fg.avatar.neutral": "light-dark(#4F576E, #E9EDF5)";
75
+ readonly "fg.avatar.purple": "light-dark(#412470, #E5DCF4)";
76
+ readonly "fg.default": "light-dark(#2E3442, #F5F6FA)";
77
+ readonly "fg.default.inverse": "light-dark(#FFFFFF, #2E3442)";
78
+ readonly "fg.disabled": "light-dark(#CACFDC, #F9FAFC52)";
79
+ readonly "fg.error": "light-dark(#CC1616, #FC8B8B)";
80
+ readonly "fg.error.hovered": "light-dark(#B21313, #B21313)";
81
+ readonly "fg.error.light": "light-dark(#FC8B8B, #FC8B8B)";
82
+ readonly "fg.error.strong": "light-dark(#911D1D, #FFB4B4)";
83
+ readonly "fg.information": "light-dark(#2F7AEE, #7BAAF4)";
84
+ readonly "fg.information.light": "light-dark(#7BAAF4, #7BAAF4)";
85
+ readonly "fg.information.strong": "light-dark(#0D46A0, #A1C2F7)";
86
+ readonly "fg.link.default": "light-dark(#0037FF, #2E66F7)";
87
+ readonly "fg.link.default.hovered": "light-dark(#002CCC, #B3C3FF)";
88
+ readonly "fg.link.inverse": "light-dark(#FFFFFF, #FFFFFF)";
89
+ readonly "fg.link.subtle": "light-dark(#2E3442, #2E3442)";
90
+ readonly "fg.link.visited": "light-dark(#532E8F, #693AB6)";
91
+ readonly "fg.secondary": "light-dark(#4F576E, #CACFDC)";
92
+ readonly "fg.spinner.default": "light-dark(#2E3442, #CACFDC)";
93
+ readonly "fg.spinner.inverse": "light-dark(#CACFDC, #2E3442)";
94
+ readonly "fg.success": "light-dark(#03A65D, #7CD2A7)";
95
+ readonly "fg.success.hovered": "light-dark(#038047, #038047)";
96
+ readonly "fg.success.light": "light-dark(#7CD2A7, #7CD2A7)";
97
+ readonly "fg.success.strong": "light-dark(#24663E, #A5E1C3)";
98
+ readonly "fg.tertiary": "light-dark(#66708C, #838DA4)";
99
+ readonly "fg.warning": "light-dark(#F79008, #FFC84B)";
100
+ readonly "fg.warning.hovered": "light-dark(#DC6903, #DC6903)";
101
+ readonly "fg.warning.inverse": "light-dark(#2E3442, #2E3442)";
102
+ readonly "fg.warning.light": "light-dark(#FFC84B, #FFC84B)";
103
+ readonly "fg.warning.strong": "light-dark(#B54707, #FEDF88)";
104
+ readonly "fg.white": "light-dark(#FFFFFF, #FFFFFF)";
105
105
  };
106
106
  readonly fontFamily: {
107
107
  readonly mono: "Fira Code Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace";
@@ -177,32 +177,28 @@ type CSSVarFunction = `var(--${string})` | `var(--${string}, ${number | string})
177
177
  type Primitive = boolean | null | number | string | undefined;
178
178
 
179
179
  declare const ToastContextProvider: react.FC<{
180
+ offset: number;
180
181
  onOpenChange: (open: boolean) => void;
181
182
  open: boolean;
183
+ toastRef: RefObject<HTMLElement>;
182
184
  } & {
183
185
  children: React.ReactNode;
184
186
  }>;
185
187
  declare const useToastContext: (consumerName: string) => {
188
+ offset: number;
186
189
  onOpenChange: (open: boolean) => void;
187
190
  open: boolean;
191
+ toastRef: RefObject<HTMLElement>;
188
192
  };
189
193
 
190
- type ToastItem = {
191
- id: string;
192
- open: boolean;
193
- toast: ReactElement | {
194
- action?: {
195
- altText: string;
196
- label: string;
197
- onClick: () => void;
198
- };
199
- title: string;
200
- type?: "danger" | "neutral" | "success" | "warning";
201
- };
194
+ type ToastOptions = {
195
+ action?: string;
196
+ onAction?: () => void;
197
+ type?: "danger" | "information" | "neutral" | "success" | "warning";
202
198
  };
203
199
  type Toaster = {
204
200
  clear: () => void;
205
- create: (toast: ToastItem["toast"]) => string;
201
+ create: (...args: [message: string, options?: ToastOptions] | [toast: ReactElement]) => string;
206
202
  remove: (id: string) => void;
207
203
  store: Parameters<typeof useSyncExternalStore<ToastItem[]>>;
208
204
  };
@@ -223,258 +219,91 @@ declare const tokens: {
223
219
  readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
224
220
  };
225
221
  readonly colors: {
226
- readonly "bg.accent": "#0037FF";
227
- readonly "bg.accent.hovered": "#002CCC";
228
- readonly "bg.accent.light": "#B3C3FF";
229
- readonly "bg.accent.pressed": "#002894";
230
- readonly "bg.accent.subtle": "#F0F3FF";
231
- readonly "bg.avatar.neutral": "#E9EDF5";
232
- readonly "bg.avatar.purple": "#E5DCF4";
233
- readonly "bg.default": "#FFFFFF";
234
- readonly "bg.default.hovered": "#091E420A";
235
- readonly "bg.default.inverse": "#2E3442";
236
- readonly "bg.default.inverse.hovered": "#1C212B";
237
- readonly "bg.default.inverse.pressed": "#1C2029";
238
- readonly "bg.default.pressed": "#091E4214";
239
- readonly "bg.error": "#CC1616";
240
- readonly "bg.error.hovered": "#B21313";
241
- readonly "bg.error.light": "#FFB4B4";
242
- readonly "bg.error.pressed": "#911D1D";
243
- readonly "bg.error.subtle": "#FFD7D7";
244
- readonly "bg.error.subtlest": "#FFF7F7";
245
- readonly "bg.information": "#115DD4";
246
- readonly "bg.information.light": "#A1C2F7";
247
- readonly "bg.information.subtle": "#C6DBFA";
248
- readonly "bg.overlay": "#091E4252";
249
- readonly "bg.page": "#F9FAFC";
250
- readonly "bg.secondary": "#F5F6FA";
251
- readonly "bg.secondary.hovered": "#F5F6FA";
252
- readonly "bg.spinner.default": "#091E42";
253
- readonly "bg.spinner.inverse": "#F9FAFC";
254
- readonly "bg.success": "#038047";
255
- readonly "bg.success.hovered": "#24663E";
256
- readonly "bg.success.light": "#A5E1C3";
257
- readonly "bg.success.subtle": "#D1F0E1";
258
- readonly "bg.tertiary": "#DADFEB";
259
- readonly "bg.tertiary.hovered": "#CACFDC";
260
- readonly "bg.warning": "#FFC84B";
261
- readonly "bg.warning.hovered": "#DC6903";
262
- readonly "bg.warning.light": "#FEDF88";
263
- readonly "bg.warning.subtle": "#FEF1C6";
264
- readonly "border.accent": "#0037FF";
265
- readonly "border.active": "#838DA4";
266
- readonly "border.active.hovered": "#66708C";
267
- readonly "border.default": "#CACFDC";
268
- readonly "border.default.hovered": "#838DA4";
269
- readonly "border.disabled": "#F5F6FA";
270
- readonly "border.error": "#CC1616";
271
- readonly "border.focus": "#2E66F7";
272
- readonly "border.focus.error": "#F64F4F";
273
- readonly "border.secondary": "#DADFEB";
274
- readonly "border.success": "#03A65D";
275
- readonly "border.tertiary": "#E9EDF5";
276
- readonly "border.warning": "#F79008";
277
- readonly "fg.accent": "#0037FF";
278
- readonly "fg.accent.hovered": "#002CCC";
279
- readonly "fg.accent.strong": "#002894";
280
- readonly "fg.avatar.neutral": "#4F576E";
281
- readonly "fg.avatar.purple": "#412470";
282
- readonly "fg.default": "#2E3442";
283
- readonly "fg.default.inverse": "#FFFFFF";
284
- readonly "fg.disabled": "#CACFDC";
285
- readonly "fg.error": "#CC1616";
286
- readonly "fg.error.hovered": "#B21313";
287
- readonly "fg.error.light": "#FC8B8B";
288
- readonly "fg.error.strong": "#911D1D";
289
- readonly "fg.information": "#2F7AEE";
290
- readonly "fg.information.light": "#7BAAF4";
291
- readonly "fg.information.strong": "#0D46A0";
292
- readonly "fg.link.default": "#0037FF";
293
- readonly "fg.link.default.hovered": "#002CCC";
294
- readonly "fg.link.inverse": "#FFFFFF";
295
- readonly "fg.link.subtle": "#2E3442";
296
- readonly "fg.link.visited": "#532E8F";
297
- readonly "fg.secondary": "#4F576E";
298
- readonly "fg.spinner.default": "#2E3442";
299
- readonly "fg.spinner.inverse": "#CACFDC";
300
- readonly "fg.success": "#03A65D";
301
- readonly "fg.success.hovered": "#038047";
302
- readonly "fg.success.light": "#7CD2A7";
303
- readonly "fg.success.strong": "#24663E";
304
- readonly "fg.tertiary": "#66708C";
305
- readonly "fg.warning": "#F79008";
306
- readonly "fg.warning.hovered": "#DC6903";
307
- readonly "fg.warning.inverse": "#2E3442";
308
- readonly "fg.warning.light": "#FFC84B";
309
- readonly "fg.warning.strong": "#B54707";
310
- readonly "fg.white": "#FFFFFF";
311
- };
312
- readonly fontFamily: {
313
- readonly mono: "Fira Code Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace";
314
- readonly sans: "InterVariable, system-ui, sans-serif";
315
- };
316
- readonly fontSize: {
317
- readonly xs: {
318
- readonly fontSize: "10px";
319
- readonly lineHeight: "14px";
320
- };
321
- readonly sm: {
322
- readonly fontSize: "12px";
323
- readonly lineHeight: "16px";
324
- };
325
- readonly md: {
326
- readonly fontSize: "14px";
327
- readonly lineHeight: "20px";
328
- };
329
- readonly lg: {
330
- readonly fontSize: "16px";
331
- readonly lineHeight: "24px";
332
- };
333
- readonly xl: {
334
- readonly fontSize: "18px";
335
- readonly lineHeight: "28px";
336
- };
337
- readonly "2xl": {
338
- readonly fontSize: "20px";
339
- readonly lineHeight: "28px";
340
- };
341
- readonly "3xl": {
342
- readonly fontSize: "24px";
343
- readonly lineHeight: "32px";
344
- };
345
- readonly "4xl": {
346
- readonly fontSize: "30px";
347
- readonly lineHeight: "36px";
348
- };
349
- readonly "5xl": {
350
- readonly fontSize: "36px";
351
- readonly lineHeight: "40px";
352
- };
353
- };
354
- readonly maxSize: {
355
- readonly xs: "320px";
356
- readonly sm: "384px";
357
- readonly md: "448px";
358
- readonly lg: "512px";
359
- };
360
- readonly screens: {
361
- readonly sm: "600px";
362
- readonly md: "900px";
363
- };
364
- readonly size: {
365
- readonly "2xs": "16px";
366
- readonly xs: "20px";
367
- readonly sm: "24px";
368
- readonly md: "32px";
369
- readonly lg: "40px";
370
- readonly xl: "48px";
371
- readonly "3xl": "80px";
372
- };
373
- readonly zIndex: {
374
- readonly popover: "3000";
375
- readonly toast: "3010";
376
- readonly tooltip: "10000";
377
- };
378
- };
379
- declare const tokensDark: {
380
- readonly colors: {
381
- readonly "bg.accent": "#2E66F7";
382
- readonly "bg.accent.hovered": "#2E66F7";
383
- readonly "bg.accent.light": "#001666";
384
- readonly "bg.accent.pressed": "#002CCC";
385
- readonly "bg.accent.subtle": "#000B33";
386
- readonly "bg.avatar.neutral": "#2E3442";
387
- readonly "bg.avatar.purple": "#331C59";
388
- readonly "bg.default": "#1C2029";
389
- readonly "bg.default.hovered": "#F9FAFC0F";
390
- readonly "bg.default.inverse": "#E9EDF5";
391
- readonly "bg.default.inverse.hovered": "#CACFDC";
392
- readonly "bg.default.inverse.pressed": "#B8BECB";
393
- readonly "bg.default.pressed": "#F9FAFC1F";
394
- readonly "bg.error": "#CC1616";
395
- readonly "bg.error.hovered": "#F64F4F";
396
- readonly "bg.error.light": "#911D1D";
397
- readonly "bg.error.pressed": "#B21313";
398
- readonly "bg.error.subtle": "#601313";
399
- readonly "bg.error.subtlest": "#300A0A";
400
- readonly "bg.information": "#115DD4";
401
- readonly "bg.information.light": "#09306D";
402
- readonly "bg.information.subtle": "#051939";
403
- readonly "bg.overlay": "#F9FAFC52";
404
- readonly "bg.page": "#171A23";
405
- readonly "bg.secondary": "#1C212B";
406
- readonly "bg.secondary.hovered": "#F9FAFC1F";
407
- readonly "bg.spinner.default": "#F9FAFC";
408
- readonly "bg.spinner.inverse": "#F9FAFC";
409
- readonly "bg.success": "#038047";
410
- readonly "bg.success.hovered": "#5AC58A";
411
- readonly "bg.success.light": "#17492B";
412
- readonly "bg.success.subtle": "#082415";
413
- readonly "bg.tertiary": "#4F576E";
414
- readonly "bg.tertiary.hovered": "#F9FAFC2E";
415
- readonly "bg.warning": "#F79008";
416
- readonly "bg.warning.hovered": "#FDB022";
417
- readonly "bg.warning.light": "#7A2E0D";
418
- readonly "bg.warning.subtle": "#4E1D09";
419
- readonly "border.accent": "#6A8FFC";
420
- readonly "border.active": "#4F576E";
421
- readonly "border.active.hovered": "#66708C";
422
- readonly "border.default": "#66708C";
423
- readonly "border.default.hovered": "#838DA4";
424
- readonly "border.disabled": "#2E3442";
425
- readonly "border.error": "#FFB4B4";
426
- readonly "border.focus": "#6A8FFC";
427
- readonly "border.focus.error": "#FC8B8B";
428
- readonly "border.secondary": "#4F576E";
429
- readonly "border.success": "#03A65D";
430
- readonly "border.tertiary": "#2E3442";
431
- readonly "border.warning": "#F79008";
432
- readonly "fg.accent": "#6A8FFC";
433
- readonly "fg.accent.hovered": "#0037FF";
434
- readonly "fg.accent.strong": "#2E66F7";
435
- readonly "fg.avatar.neutral": "#E9EDF5";
436
- readonly "fg.avatar.purple": "#E5DCF4";
437
- readonly "fg.default": "#F5F6FA";
438
- readonly "fg.default.inverse": "#2E3442";
439
- readonly "fg.disabled": "#F9FAFC52";
440
- readonly "fg.error": "#FC8B8B";
441
- readonly "fg.error.hovered": "#B21313";
442
- readonly "fg.error.light": "#FC8B8B";
443
- readonly "fg.error.strong": "#FFB4B4";
444
- readonly "fg.information": "#7BAAF4";
445
- readonly "fg.information.light": "#7BAAF4";
446
- readonly "fg.information.strong": "#A1C2F7";
447
- readonly "fg.link.default": "#2E66F7";
448
- readonly "fg.link.default.hovered": "#B3C3FF";
449
- readonly "fg.link.inverse": "#FFFFFF";
450
- readonly "fg.link.subtle": "#2E3442";
451
- readonly "fg.link.visited": "#693AB6";
452
- readonly "fg.secondary": "#CACFDC";
453
- readonly "fg.spinner.default": "#CACFDC";
454
- readonly "fg.spinner.inverse": "#2E3442";
455
- readonly "fg.success": "#7CD2A7";
456
- readonly "fg.success.hovered": "#038047";
457
- readonly "fg.success.light": "#7CD2A7";
458
- readonly "fg.success.strong": "#A5E1C3";
459
- readonly "fg.tertiary": "#838DA4";
460
- readonly "fg.warning": "#FFC84B";
461
- readonly "fg.warning.hovered": "#DC6903";
462
- readonly "fg.warning.inverse": "#2E3442";
463
- readonly "fg.warning.light": "#FFC84B";
464
- readonly "fg.warning.strong": "#FEDF88";
465
- readonly "fg.white": "#FFFFFF";
466
- };
467
- readonly borderRadius: {
468
- readonly xs: "2px";
469
- readonly sm: "4px";
470
- readonly md: "6px";
471
- readonly lg: "8px";
472
- readonly full: "9999px";
473
- };
474
- readonly boxShadow: {
475
- readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
476
- readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
477
- readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
222
+ readonly "bg.accent": "light-dark(#0037FF, #2E66F7)";
223
+ readonly "bg.accent.hovered": "light-dark(#002CCC, #2E66F7)";
224
+ readonly "bg.accent.light": "light-dark(#B3C3FF, #001666)";
225
+ readonly "bg.accent.pressed": "light-dark(#002894, #002CCC)";
226
+ readonly "bg.accent.subtle": "light-dark(#F0F3FF, #000B33)";
227
+ readonly "bg.avatar.neutral": "light-dark(#E9EDF5, #2E3442)";
228
+ readonly "bg.avatar.purple": "light-dark(#E5DCF4, #412470)";
229
+ readonly "bg.default": "light-dark(#FFFFFF, #1C2029)";
230
+ readonly "bg.default.hovered": "light-dark(#091E420A, #F9FAFC0F)";
231
+ readonly "bg.default.inverse": "light-dark(#2E3442, #E9EDF5)";
232
+ readonly "bg.default.inverse.hovered": "light-dark(#1C212B, #CACFDC)";
233
+ readonly "bg.default.inverse.pressed": "light-dark(#1C2029, #B8BECB)";
234
+ readonly "bg.default.pressed": "light-dark(#091E4214, #F9FAFC1F)";
235
+ readonly "bg.error": "light-dark(#CC1616, #CC1616)";
236
+ readonly "bg.error.hovered": "light-dark(#B21313, #F64F4F)";
237
+ readonly "bg.error.light": "light-dark(#FFB4B4, #911D1D)";
238
+ readonly "bg.error.pressed": "light-dark(#911D1D, #B21313)";
239
+ readonly "bg.error.subtle": "light-dark(#FFD7D7, #601313)";
240
+ readonly "bg.error.subtlest": "light-dark(#FFF7F7, #300A0A)";
241
+ readonly "bg.information": "light-dark(#115DD4, #115DD4)";
242
+ readonly "bg.information.light": "light-dark(#A1C2F7, #09306D)";
243
+ readonly "bg.information.subtle": "light-dark(#C6DBFA, #051939)";
244
+ readonly "bg.overlay": "light-dark(#091E4252, #F9FAFC52)";
245
+ readonly "bg.page": "light-dark(#F9FAFC, #171A23)";
246
+ readonly "bg.secondary": "light-dark(#F5F6FA, #1C212B)";
247
+ readonly "bg.secondary.hovered": "light-dark(#F5F6FA, #F9FAFC1F)";
248
+ readonly "bg.spinner.default": "light-dark(#091E42, #F9FAFC)";
249
+ readonly "bg.spinner.inverse": "light-dark(#F9FAFC, #F9FAFC)";
250
+ readonly "bg.success": "light-dark(#038047, #038047)";
251
+ readonly "bg.success.hovered": "light-dark(#24663E, #5AC58A)";
252
+ readonly "bg.success.light": "light-dark(#A5E1C3, #17492B)";
253
+ readonly "bg.success.subtle": "light-dark(#D1F0E1, #082415)";
254
+ readonly "bg.tertiary": "light-dark(#DADFEB, #4F576E)";
255
+ readonly "bg.tertiary.hovered": "light-dark(#CACFDC, #F9FAFC2E)";
256
+ readonly "bg.warning": "light-dark(#FFC84B, #F79008)";
257
+ readonly "bg.warning.hovered": "light-dark(#DC6903, #FDB022)";
258
+ readonly "bg.warning.light": "light-dark(#FEDF88, #7A2E0D)";
259
+ readonly "bg.warning.subtle": "light-dark(#FEF1C6, #4E1D09)";
260
+ readonly "border.accent": "light-dark(#0037FF, #6A8FFC)";
261
+ readonly "border.active": "light-dark(#838DA4, #4F576E)";
262
+ readonly "border.active.hovered": "light-dark(#66708C, #66708C)";
263
+ readonly "border.default": "light-dark(#CACFDC, #66708C)";
264
+ readonly "border.default.hovered": "light-dark(#838DA4, #838DA4)";
265
+ readonly "border.disabled": "light-dark(#F5F6FA, #2E3442)";
266
+ readonly "border.error": "light-dark(#CC1616, #FFB4B4)";
267
+ readonly "border.focus": "light-dark(#2E66F7, #6A8FFC)";
268
+ readonly "border.focus.error": "light-dark(#F64F4F, #FC8B8B)";
269
+ readonly "border.secondary": "light-dark(#DADFEB, #4F576E)";
270
+ readonly "border.success": "light-dark(#03A65D, #03A65D)";
271
+ readonly "border.tertiary": "light-dark(#E9EDF5, #2E3442)";
272
+ readonly "border.warning": "light-dark(#F79008, #F79008)";
273
+ readonly "fg.accent": "light-dark(#0037FF, #6A8FFC)";
274
+ readonly "fg.accent.hovered": "light-dark(#002CCC, #0037FF)";
275
+ readonly "fg.accent.strong": "light-dark(#002894, #2E66F7)";
276
+ readonly "fg.avatar.neutral": "light-dark(#4F576E, #E9EDF5)";
277
+ readonly "fg.avatar.purple": "light-dark(#412470, #E5DCF4)";
278
+ readonly "fg.default": "light-dark(#2E3442, #F5F6FA)";
279
+ readonly "fg.default.inverse": "light-dark(#FFFFFF, #2E3442)";
280
+ readonly "fg.disabled": "light-dark(#CACFDC, #F9FAFC52)";
281
+ readonly "fg.error": "light-dark(#CC1616, #FC8B8B)";
282
+ readonly "fg.error.hovered": "light-dark(#B21313, #B21313)";
283
+ readonly "fg.error.light": "light-dark(#FC8B8B, #FC8B8B)";
284
+ readonly "fg.error.strong": "light-dark(#911D1D, #FFB4B4)";
285
+ readonly "fg.information": "light-dark(#2F7AEE, #7BAAF4)";
286
+ readonly "fg.information.light": "light-dark(#7BAAF4, #7BAAF4)";
287
+ readonly "fg.information.strong": "light-dark(#0D46A0, #A1C2F7)";
288
+ readonly "fg.link.default": "light-dark(#0037FF, #2E66F7)";
289
+ readonly "fg.link.default.hovered": "light-dark(#002CCC, #B3C3FF)";
290
+ readonly "fg.link.inverse": "light-dark(#FFFFFF, #FFFFFF)";
291
+ readonly "fg.link.subtle": "light-dark(#2E3442, #2E3442)";
292
+ readonly "fg.link.visited": "light-dark(#532E8F, #693AB6)";
293
+ readonly "fg.secondary": "light-dark(#4F576E, #CACFDC)";
294
+ readonly "fg.spinner.default": "light-dark(#2E3442, #CACFDC)";
295
+ readonly "fg.spinner.inverse": "light-dark(#CACFDC, #2E3442)";
296
+ readonly "fg.success": "light-dark(#03A65D, #7CD2A7)";
297
+ readonly "fg.success.hovered": "light-dark(#038047, #038047)";
298
+ readonly "fg.success.light": "light-dark(#7CD2A7, #7CD2A7)";
299
+ readonly "fg.success.strong": "light-dark(#24663E, #A5E1C3)";
300
+ readonly "fg.tertiary": "light-dark(#66708C, #838DA4)";
301
+ readonly "fg.warning": "light-dark(#F79008, #FFC84B)";
302
+ readonly "fg.warning.hovered": "light-dark(#DC6903, #DC6903)";
303
+ readonly "fg.warning.inverse": "light-dark(#2E3442, #2E3442)";
304
+ readonly "fg.warning.light": "light-dark(#FFC84B, #FFC84B)";
305
+ readonly "fg.warning.strong": "light-dark(#B54707, #FEDF88)";
306
+ readonly "fg.white": "light-dark(#FFFFFF, #FFFFFF)";
478
307
  };
479
308
  readonly fontFamily: {
480
309
  readonly mono: "Fira Code Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace";
@@ -544,4 +373,4 @@ declare const tokensDark: {
544
373
  };
545
374
  };
546
375
 
547
- export { AxiomVersionContext, type MapLeafNodes, ToastContextProvider, createToaster, theme, toaster, tokens, tokensDark, useToastContext };
376
+ export { AxiomVersionContext, type MapLeafNodes, ToastContextProvider, createToaster, theme, toaster, tokens, useToastContext };
package/dist/index.js CHANGED
@@ -2,4 +2,4 @@ export { AxiomVersionContext } from './context.js';
2
2
  export { theme } from './theme-css.js';
3
3
  export { ToastContextProvider, useToastContext } from './toast-context.js';
4
4
  export { createToaster, toaster } from './toaster.js';
5
- export { tokens, tokensDark } from './tokens/index.js';
5
+ export { tokens } from './tokens/index.js';
package/dist/toaster.js CHANGED
@@ -11,6 +11,7 @@ const createToaster = () => {
11
11
  listener();
12
12
  }
13
13
  };
14
+ let queue = Promise.resolve();
14
15
  return {
15
16
  store: [
16
17
  (callback) => {
@@ -24,24 +25,45 @@ const createToaster = () => {
24
25
  snapshot = [];
25
26
  emit();
26
27
  },
27
- create: (toast) => {
28
+ create: (...args) => {
29
+ const toast = typeof args[0] === "string" ? {
30
+ ...args[1],
31
+ title: args[0]
32
+ } : args[0];
28
33
  const id2 = genId();
29
- snapshot = [...snapshot, { id: id2, open: true, toast }];
30
- emit();
34
+ queue = queue.then(async () => {
35
+ const item = {
36
+ id: id2,
37
+ open: true,
38
+ ref: { current: null },
39
+ toast
40
+ };
41
+ snapshot = [...snapshot, item];
42
+ emit();
43
+ await waitForAnimation(item.ref.current);
44
+ });
31
45
  return id2;
32
46
  },
33
47
  remove: (id2) => {
34
- snapshot = snapshot.map(
35
- (item) => item.id === id2 ? { ...item, open: false } : item
36
- );
37
- emit();
38
- setTimeout(() => {
39
- snapshot = snapshot.filter((item) => item.id !== id2);
48
+ queue = queue.then(async () => {
49
+ snapshot = snapshot.map(
50
+ (item2) => item2.id === id2 ? { ...item2, open: false } : item2
51
+ );
40
52
  emit();
41
- }, 200);
53
+ const item = snapshot.find((item2) => item2.id === id2);
54
+ await waitForAnimation(item?.ref.current);
55
+ snapshot = snapshot.filter((item2) => item2.id !== id2);
56
+ emit();
57
+ });
42
58
  }
43
59
  };
44
60
  };
61
+ const waitForAnimation = async (element) => {
62
+ await new Promise((resolve) => requestAnimationFrame(resolve));
63
+ await Promise.allSettled(
64
+ typeof element?.getAnimations === "function" ? element?.getAnimations().map((animation) => animation.finished) : [Promise.resolve()]
65
+ );
66
+ };
45
67
  const toaster = createToaster();
46
68
 
47
69
  export { createToaster, toaster };
package/dist/tokens/colors.js CHANGED
@@ -1,4 +1,4 @@
1
- const colorPalette = {
1
+ const palette = {
2
2
  "blue.50": "#D9E7FC",
3
3
  "blue.100": "#C6DBFA",
4
4
  "blue.200": "#A1C2F7",
@@ -105,179 +105,99 @@ const colorPalette = {
105
105
  "yellow.800": "#7A2E0D",
106
106
  "yellow.900": "#4E1D09"
107
107
  };
108
+ const ld = (a, b) => `light-dark(${a}, ${b})`;
108
109
  const colors = {
109
- "bg.accent": colorPalette["brand.500"],
110
- "bg.accent.hovered": colorPalette["brand.600"],
111
- "bg.accent.light": colorPalette["brand.200"],
112
- "bg.accent.pressed": colorPalette["brand.700"],
113
- "bg.accent.subtle": colorPalette["brand.50"],
114
- "bg.avatar.neutral": colorPalette["neutral.100"],
115
- "bg.avatar.purple": colorPalette["purple.100"],
116
- "bg.default": colorPalette["neutral.00"],
117
- "bg.default.hovered": colorPalette["neutral.1200/4"],
118
- "bg.default.inverse": colorPalette["neutral.800"],
119
- "bg.default.inverse.hovered": colorPalette["neutral.900"],
120
- "bg.default.inverse.pressed": colorPalette["neutral.1000"],
121
- "bg.default.pressed": colorPalette["neutral.1200/8"],
122
- "bg.error": colorPalette["red.500"],
123
- "bg.error.hovered": colorPalette["red.600"],
124
- "bg.error.light": colorPalette["red.200"],
125
- "bg.error.pressed": colorPalette["red.700"],
126
- "bg.error.subtle": colorPalette["red.100"],
127
- "bg.error.subtlest": colorPalette["red.50"],
128
- "bg.information": colorPalette["blue.600"],
129
- "bg.information.light": colorPalette["blue.200"],
130
- "bg.information.subtle": colorPalette["blue.100"],
131
- "bg.overlay": colorPalette["neutral.1200/32"],
132
- "bg.page": colorPalette["neutral.50"],
133
- "bg.secondary": colorPalette["neutral.75"],
134
- "bg.secondary.hovered": colorPalette["neutral.75"],
135
- "bg.spinner.default": colorPalette["neutral.1200"],
136
- "bg.spinner.inverse": colorPalette["neutral.50"],
137
- "bg.success": colorPalette["green.600"],
138
- "bg.success.hovered": colorPalette["green.700"],
139
- "bg.success.light": colorPalette["green.200"],
140
- "bg.success.subtle": colorPalette["green.100"],
141
- "bg.tertiary": colorPalette["neutral.150"],
142
- "bg.tertiary.hovered": colorPalette["neutral.200"],
143
- "bg.warning": colorPalette["yellow.300"],
144
- "bg.warning.hovered": colorPalette["yellow.600"],
145
- "bg.warning.light": colorPalette["yellow.200"],
146
- "bg.warning.subtle": colorPalette["yellow.100"],
147
- "border.accent": colorPalette["brand.500"],
148
- "border.active": colorPalette["neutral.500"],
149
- "border.active.hovered": colorPalette["neutral.600"],
150
- "border.default": colorPalette["neutral.200"],
151
- "border.default.hovered": colorPalette["neutral.500"],
152
- "border.disabled": colorPalette["neutral.75"],
153
- "border.error": colorPalette["red.500"],
154
- "border.focus": colorPalette["brand.400"],
155
- "border.focus.error": colorPalette["red.400"],
156
- "border.secondary": colorPalette["neutral.150"],
157
- "border.success": colorPalette["green.500"],
158
- "border.tertiary": colorPalette["neutral.100"],
159
- "border.warning": colorPalette["yellow.500"],
160
- "fg.accent": colorPalette["brand.500"],
161
- "fg.accent.hovered": colorPalette["brand.600"],
162
- "fg.accent.strong": colorPalette["brand.700"],
163
- "fg.avatar.neutral": colorPalette["neutral.700"],
164
- "fg.avatar.purple": colorPalette["purple.700"],
165
- "fg.default": colorPalette["neutral.800"],
166
- "fg.default.inverse": colorPalette["neutral.00"],
167
- "fg.disabled": colorPalette["neutral.200"],
168
- "fg.error": colorPalette["red.500"],
169
- "fg.error.hovered": colorPalette["red.600"],
170
- "fg.error.light": colorPalette["red.300"],
171
- "fg.error.strong": colorPalette["red.700"],
172
- "fg.information": colorPalette["blue.500"],
173
- "fg.information.light": colorPalette["blue.300"],
174
- "fg.information.strong": colorPalette["blue.700"],
175
- "fg.link.default": colorPalette["brand.500"],
176
- "fg.link.default.hovered": colorPalette["brand.600"],
177
- "fg.link.inverse": colorPalette["neutral.00"],
178
- "fg.link.subtle": colorPalette["neutral.800"],
179
- "fg.link.visited": colorPalette["purple.600"],
180
- "fg.secondary": colorPalette["neutral.700"],
181
- "fg.spinner.default": colorPalette["neutral.800"],
182
- "fg.spinner.inverse": colorPalette["neutral.200"],
183
- "fg.success": colorPalette["green.500"],
184
- "fg.success.hovered": colorPalette["green.600"],
185
- "fg.success.light": colorPalette["green.300"],
186
- "fg.success.strong": colorPalette["green.700"],
187
- "fg.tertiary": colorPalette["neutral.600"],
188
- "fg.warning": colorPalette["yellow.500"],
189
- "fg.warning.hovered": colorPalette["yellow.600"],
190
- "fg.warning.inverse": colorPalette["neutral.800"],
191
- "fg.warning.light": colorPalette["yellow.300"],
192
- "fg.warning.strong": colorPalette["yellow.700"],
193
- "fg.white": colorPalette["neutral.00"]
194
- };
195
- const colorsDark = {
196
- "bg.accent": colorPalette["brand.400"],
197
- "bg.accent.hovered": colorPalette["brand.400"],
198
- "bg.accent.light": colorPalette["brand.800"],
199
- "bg.accent.pressed": colorPalette["brand.600"],
200
- "bg.accent.subtle": colorPalette["brand.900"],
201
- "bg.avatar.neutral": colorPalette["neutral.800"],
202
- "bg.avatar.purple": colorPalette["purple.800"],
203
- "bg.default": colorPalette["neutral.1000"],
204
- "bg.default.hovered": colorPalette["neutral.50/6"],
205
- "bg.default.inverse": colorPalette["neutral.100"],
206
- "bg.default.inverse.hovered": colorPalette["neutral.200"],
207
- "bg.default.inverse.pressed": colorPalette["neutral.300"],
208
- "bg.default.pressed": colorPalette["neutral.50/12"],
209
- "bg.error": colorPalette["red.500"],
210
- "bg.error.hovered": colorPalette["red.400"],
211
- "bg.error.light": colorPalette["red.700"],
212
- "bg.error.pressed": colorPalette["red.600"],
213
- "bg.error.subtle": colorPalette["red.800"],
214
- "bg.error.subtlest": colorPalette["red.900"],
215
- "bg.information": colorPalette["blue.600"],
216
- "bg.information.light": colorPalette["blue.800"],
217
- "bg.information.subtle": colorPalette["blue.900"],
218
- "bg.overlay": colorPalette["neutral.50/32"],
219
- "bg.page": colorPalette["neutral.1100"],
220
- "bg.secondary": colorPalette["neutral.900"],
221
- "bg.secondary.hovered": colorPalette["neutral.50/12"],
222
- "bg.spinner.default": colorPalette["neutral.50"],
223
- "bg.spinner.inverse": colorPalette["neutral.50"],
224
- "bg.success": colorPalette["green.600"],
225
- "bg.success.hovered": colorPalette["green.400"],
226
- "bg.success.light": colorPalette["green.800"],
227
- "bg.success.subtle": colorPalette["green.900"],
228
- "bg.tertiary": colorPalette["neutral.700"],
229
- "bg.tertiary.hovered": colorPalette["neutral.50/18"],
230
- "bg.warning": colorPalette["yellow.500"],
231
- "bg.warning.hovered": colorPalette["yellow.400"],
232
- "bg.warning.light": colorPalette["yellow.800"],
233
- "bg.warning.subtle": colorPalette["yellow.900"],
234
- "border.accent": colorPalette["brand.300"],
235
- "border.active": colorPalette["neutral.700"],
236
- "border.active.hovered": colorPalette["neutral.600"],
237
- "border.default": colorPalette["neutral.600"],
238
- "border.default.hovered": colorPalette["neutral.500"],
239
- "border.disabled": colorPalette["neutral.800"],
240
- "border.error": colorPalette["red.200"],
241
- "border.focus": colorPalette["brand.300"],
242
- "border.focus.error": colorPalette["red.300"],
243
- "border.secondary": colorPalette["neutral.700"],
244
- "border.success": colorPalette["green.500"],
245
- "border.tertiary": colorPalette["neutral.800"],
246
- "border.warning": colorPalette["yellow.500"],
247
- "fg.accent": colorPalette["brand.300"],
248
- "fg.accent.hovered": colorPalette["brand.500"],
249
- "fg.accent.strong": colorPalette["brand.400"],
250
- "fg.avatar.neutral": colorPalette["neutral.100"],
251
- "fg.avatar.purple": colorPalette["purple.100"],
252
- "fg.default": colorPalette["neutral.75"],
253
- "fg.default.inverse": colorPalette["neutral.800"],
254
- "fg.disabled": colorPalette["neutral.50/32"],
255
- "fg.error": colorPalette["red.300"],
256
- "fg.error.hovered": colorPalette["red.600"],
257
- "fg.error.light": colorPalette["red.300"],
258
- "fg.error.strong": colorPalette["red.200"],
259
- "fg.information": colorPalette["blue.300"],
260
- "fg.information.light": colorPalette["blue.300"],
261
- "fg.information.strong": colorPalette["blue.200"],
262
- "fg.link.default": colorPalette["brand.400"],
263
- "fg.link.default.hovered": colorPalette["brand.200"],
264
- "fg.link.inverse": colorPalette["neutral.00"],
265
- "fg.link.subtle": colorPalette["neutral.800"],
266
- "fg.link.visited": colorPalette["purple.500"],
267
- "fg.secondary": colorPalette["neutral.200"],
268
- "fg.spinner.default": colorPalette["neutral.200"],
269
- "fg.spinner.inverse": colorPalette["neutral.800"],
270
- "fg.success": colorPalette["green.300"],
271
- "fg.success.hovered": colorPalette["green.600"],
272
- "fg.success.light": colorPalette["green.300"],
273
- "fg.success.strong": colorPalette["green.200"],
274
- "fg.tertiary": colorPalette["neutral.500"],
275
- "fg.warning": colorPalette["yellow.300"],
276
- "fg.warning.hovered": colorPalette["yellow.600"],
277
- "fg.warning.inverse": colorPalette["neutral.800"],
278
- "fg.warning.light": colorPalette["yellow.300"],
279
- "fg.warning.strong": colorPalette["yellow.200"],
280
- "fg.white": colorPalette["neutral.00"]
110
+ "bg.accent": ld(palette["brand.500"], palette["brand.400"]),
111
+ "bg.accent.hovered": ld(palette["brand.600"], palette["brand.400"]),
112
+ "bg.accent.light": ld(palette["brand.200"], palette["brand.800"]),
113
+ "bg.accent.pressed": ld(palette["brand.700"], palette["brand.600"]),
114
+ "bg.accent.subtle": ld(palette["brand.50"], palette["brand.900"]),
115
+ "bg.avatar.neutral": ld(palette["neutral.100"], palette["neutral.800"]),
116
+ "bg.avatar.purple": ld(palette["purple.100"], palette["purple.700"]),
117
+ "bg.default": ld(palette["neutral.00"], palette["neutral.1000"]),
118
+ "bg.default.hovered": ld(palette["neutral.1200/4"], palette["neutral.50/6"]),
119
+ "bg.default.inverse": ld(palette["neutral.800"], palette["neutral.100"]),
120
+ "bg.default.inverse.hovered": ld(
121
+ palette["neutral.900"],
122
+ palette["neutral.200"]
123
+ ),
124
+ "bg.default.inverse.pressed": ld(
125
+ palette["neutral.1000"],
126
+ palette["neutral.300"]
127
+ ),
128
+ "bg.default.pressed": ld(palette["neutral.1200/8"], palette["neutral.50/12"]),
129
+ "bg.error": ld(palette["red.500"], palette["red.500"]),
130
+ "bg.error.hovered": ld(palette["red.600"], palette["red.400"]),
131
+ "bg.error.light": ld(palette["red.200"], palette["red.700"]),
132
+ "bg.error.pressed": ld(palette["red.700"], palette["red.600"]),
133
+ "bg.error.subtle": ld(palette["red.100"], palette["red.800"]),
134
+ "bg.error.subtlest": ld(palette["red.50"], palette["red.900"]),
135
+ "bg.information": ld(palette["blue.600"], palette["blue.600"]),
136
+ "bg.information.light": ld(palette["blue.200"], palette["blue.800"]),
137
+ "bg.information.subtle": ld(palette["blue.100"], palette["blue.900"]),
138
+ "bg.overlay": ld(palette["neutral.1200/32"], palette["neutral.50/32"]),
139
+ "bg.page": ld(palette["neutral.50"], palette["neutral.1100"]),
140
+ "bg.secondary": ld(palette["neutral.75"], palette["neutral.900"]),
141
+ "bg.secondary.hovered": ld(palette["neutral.75"], palette["neutral.50/12"]),
142
+ "bg.spinner.default": ld(palette["neutral.1200"], palette["neutral.50"]),
143
+ "bg.spinner.inverse": ld(palette["neutral.50"], palette["neutral.50"]),
144
+ "bg.success": ld(palette["green.600"], palette["green.600"]),
145
+ "bg.success.hovered": ld(palette["green.700"], palette["green.400"]),
146
+ "bg.success.light": ld(palette["green.200"], palette["green.800"]),
147
+ "bg.success.subtle": ld(palette["green.100"], palette["green.900"]),
148
+ "bg.tertiary": ld(palette["neutral.150"], palette["neutral.700"]),
149
+ "bg.tertiary.hovered": ld(palette["neutral.200"], palette["neutral.50/18"]),
150
+ "bg.warning": ld(palette["yellow.300"], palette["yellow.500"]),
151
+ "bg.warning.hovered": ld(palette["yellow.600"], palette["yellow.400"]),
152
+ "bg.warning.light": ld(palette["yellow.200"], palette["yellow.800"]),
153
+ "bg.warning.subtle": ld(palette["yellow.100"], palette["yellow.900"]),
154
+ "border.accent": ld(palette["brand.500"], palette["brand.300"]),
155
+ "border.active": ld(palette["neutral.500"], palette["neutral.700"]),
156
+ "border.active.hovered": ld(palette["neutral.600"], palette["neutral.600"]),
157
+ "border.default": ld(palette["neutral.200"], palette["neutral.600"]),
158
+ "border.default.hovered": ld(palette["neutral.500"], palette["neutral.500"]),
159
+ "border.disabled": ld(palette["neutral.75"], palette["neutral.800"]),
160
+ "border.error": ld(palette["red.500"], palette["red.200"]),
161
+ "border.focus": ld(palette["brand.400"], palette["brand.300"]),
162
+ "border.focus.error": ld(palette["red.400"], palette["red.300"]),
163
+ "border.secondary": ld(palette["neutral.150"], palette["neutral.700"]),
164
+ "border.success": ld(palette["green.500"], palette["green.500"]),
165
+ "border.tertiary": ld(palette["neutral.100"], palette["neutral.800"]),
166
+ "border.warning": ld(palette["yellow.500"], palette["yellow.500"]),
167
+ "fg.accent": ld(palette["brand.500"], palette["brand.300"]),
168
+ "fg.accent.hovered": ld(palette["brand.600"], palette["brand.500"]),
169
+ "fg.accent.strong": ld(palette["brand.700"], palette["brand.400"]),
170
+ "fg.avatar.neutral": ld(palette["neutral.700"], palette["neutral.100"]),
171
+ "fg.avatar.purple": ld(palette["purple.700"], palette["purple.100"]),
172
+ "fg.default": ld(palette["neutral.800"], palette["neutral.75"]),
173
+ "fg.default.inverse": ld(palette["neutral.00"], palette["neutral.800"]),
174
+ "fg.disabled": ld(palette["neutral.200"], palette["neutral.50/32"]),
175
+ "fg.error": ld(palette["red.500"], palette["red.300"]),
176
+ "fg.error.hovered": ld(palette["red.600"], palette["red.600"]),
177
+ "fg.error.light": ld(palette["red.300"], palette["red.300"]),
178
+ "fg.error.strong": ld(palette["red.700"], palette["red.200"]),
179
+ "fg.information": ld(palette["blue.500"], palette["blue.300"]),
180
+ "fg.information.light": ld(palette["blue.300"], palette["blue.300"]),
181
+ "fg.information.strong": ld(palette["blue.700"], palette["blue.200"]),
182
+ "fg.link.default": ld(palette["brand.500"], palette["brand.400"]),
183
+ "fg.link.default.hovered": ld(palette["brand.600"], palette["brand.200"]),
184
+ "fg.link.inverse": ld(palette["neutral.00"], palette["neutral.00"]),
185
+ "fg.link.subtle": ld(palette["neutral.800"], palette["neutral.800"]),
186
+ "fg.link.visited": ld(palette["purple.600"], palette["purple.500"]),
187
+ "fg.secondary": ld(palette["neutral.700"], palette["neutral.200"]),
188
+ "fg.spinner.default": ld(palette["neutral.800"], palette["neutral.200"]),
189
+ "fg.spinner.inverse": ld(palette["neutral.200"], palette["neutral.800"]),
190
+ "fg.success": ld(palette["green.500"], palette["green.300"]),
191
+ "fg.success.hovered": ld(palette["green.600"], palette["green.600"]),
192
+ "fg.success.light": ld(palette["green.300"], palette["green.300"]),
193
+ "fg.success.strong": ld(palette["green.700"], palette["green.200"]),
194
+ "fg.tertiary": ld(palette["neutral.600"], palette["neutral.500"]),
195
+ "fg.warning": ld(palette["yellow.500"], palette["yellow.300"]),
196
+ "fg.warning.hovered": ld(palette["yellow.600"], palette["yellow.600"]),
197
+ "fg.warning.inverse": ld(palette["neutral.800"], palette["neutral.800"]),
198
+ "fg.warning.light": ld(palette["yellow.300"], palette["yellow.300"]),
199
+ "fg.warning.strong": ld(palette["yellow.700"], palette["yellow.200"]),
200
+ "fg.white": ld(palette["neutral.00"], palette["neutral.00"])
281
201
  };
282
202
 
283
- export { colorPalette, colors, colorsDark };
203
+ export { colors };
package/dist/tokens/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { borderRadius } from './borderRadius.js';
2
2
  import { boxShadow } from './boxShadow.js';
3
- import { colors, colorsDark } from './colors.js';
3
+ import { colors } from './colors.js';
4
4
  import { fontFamily } from './fontFamily.js';
5
5
  import { fontSize } from './fontSize.js';
6
6
  import { maxSize } from './maxSize.js';
@@ -19,9 +19,5 @@ const tokens = {
19
19
  size,
20
20
  zIndex
21
21
  };
22
- const tokensDark = {
23
- ...tokens,
24
- colors: colorsDark
25
- };
26
22
 
27
- export { tokens, tokensDark };
23
+ export { tokens };
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "url": "https://github.com/optimizely-axiom/optiaxiom.git"
8
8
  },
9
9
  "type": "module",
10
- "version": "0.5.0",
10
+ "version": "0.6.0",
11
11
  "files": [
12
12
  "dist/**",
13
13
  "LICENSE"
@@ -27,12 +27,12 @@
27
27
  ],
28
28
  "types": "dist/index.d.ts",
29
29
  "dependencies": {
30
- "@fontsource-variable/fira-code": "^5.1.0",
30
+ "@fontsource-variable/fira-code": "^5.1.1",
31
31
  "@radix-ui/react-context": "^1.1.1",
32
32
  "inter-ui": "^4.1.0"
33
33
  },
34
34
  "devDependencies": {
35
- "@vanilla-extract/css": "^1.16.1",
35
+ "@vanilla-extract/css": "^1.17.0",
36
36
  "@optiaxiom/shared": "^0.0.0"
37
37
  },
38
38
  "peerDependencies": {
@@ -42,6 +42,7 @@
42
42
  "scripts": {
43
43
  "build": "rm -rf dist && NODE_ENV=production rollup -c",
44
44
  "dev": "rm -rf dist && rollup -cw",
45
- "lint": "oas-lint"
45
+ "lint": "oas-lint",
46
+ "test": "vitest"
46
47
  }
47
48
  }