@cognite/aura 0.1.2 → 0.1.3

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.
@@ -41,7 +41,7 @@ declare const MessageBranchNext: ({ children, ...props }: MessageBranchNextProps
41
41
  type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
42
42
  declare const MessageBranchPage: ({ className, ...props }: MessageBranchPageProps) => import("react/jsx-runtime").JSX.Element;
43
43
  type MessageResponseProps = ComponentProps<typeof Streamdown>;
44
- declare const MessageResponse: import('react').MemoExoticComponent<({ className, components, ...props }: MessageResponseProps) => import("react/jsx-runtime").JSX.Element>;
44
+ declare const MessageResponse: import('react').MemoExoticComponent<({ className, components, plugins, ...props }: MessageResponseProps) => import("react/jsx-runtime").JSX.Element>;
45
45
  type MessageAttachmentProps = HTMLAttributes<HTMLDivElement> & {
46
46
  data: FileUIPart;
47
47
  className?: string;
@@ -1,13 +1,14 @@
1
- import { jsx as e, jsxs as s } from "react/jsx-runtime";
1
+ import { jsx as e, jsxs as n } from "react/jsx-runtime";
2
2
  import { createContext as i, memo as b } from "react";
3
+ import { mermaid as _ } from "@streamdown/mermaid";
3
4
  import "@tabler/icons-react";
4
- import { Streamdown as _ } from "streamdown";
5
+ import { Streamdown as p } from "streamdown";
5
6
  import { cn as d } from "../../../../lib/utils.js";
6
7
  import "../avatar/avatar.js";
7
- import { Button as p } from "../button/button.js";
8
+ import { Button as u } from "../button/button.js";
8
9
  import "../button-group/button-group.js";
9
- import { Tooltip as u, TooltipTrigger as w, TooltipContent as g } from "../tooltip/tooltip.js";
10
- const T = ({ className: t, isResponse: o = !1, ...a }) => /* @__PURE__ */ e(
10
+ import { Tooltip as w, TooltipTrigger as g, TooltipContent as f } from "../tooltip/tooltip.js";
11
+ const z = ({ className: t, isResponse: o = !1, ...a }) => /* @__PURE__ */ e(
11
12
  "div",
12
13
  {
13
14
  "data-slot": "message",
@@ -18,7 +19,7 @@ const T = ({ className: t, isResponse: o = !1, ...a }) => /* @__PURE__ */ e(
18
19
  ),
19
20
  ...a
20
21
  }
21
- ), R = ({
22
+ ), A = ({
22
23
  children: t,
23
24
  className: o,
24
25
  ...a
@@ -36,7 +37,7 @@ const T = ({ className: t, isResponse: o = !1, ...a }) => /* @__PURE__ */ e(
36
37
  ...a,
37
38
  children: t
38
39
  }
39
- ), z = ({
40
+ ), B = ({
40
41
  className: t,
41
42
  children: o,
42
43
  ...a
@@ -48,22 +49,22 @@ const T = ({ className: t, isResponse: o = !1, ...a }) => /* @__PURE__ */ e(
48
49
  ...a,
49
50
  children: o
50
51
  }
51
- ), A = ({
52
+ ), S = ({
52
53
  tooltip: t,
53
54
  children: o,
54
55
  label: a,
55
- className: n,
56
+ className: r,
56
57
  variant: m = "ghost",
57
58
  size: c = "sm",
58
59
  ...l
59
60
  }) => {
60
- const r = /* @__PURE__ */ s(
61
- p,
61
+ const s = /* @__PURE__ */ n(
62
+ u,
62
63
  {
63
64
  "data-slot": "message-action",
64
65
  className: d(
65
66
  "relative icon-sm text-muted-foreground hover:text-foreground",
66
- n
67
+ r
67
68
  ),
68
69
  size: c,
69
70
  type: "button",
@@ -75,15 +76,15 @@ const T = ({ className: t, isResponse: o = !1, ...a }) => /* @__PURE__ */ e(
75
76
  ]
76
77
  }
77
78
  );
78
- return t ? /* @__PURE__ */ s(u, { children: [
79
- /* @__PURE__ */ e(w, { render: r }),
80
- /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e("p", { children: t }) })
81
- ] }) : r;
79
+ return t ? /* @__PURE__ */ n(w, { children: [
80
+ /* @__PURE__ */ e(g, { render: s }),
81
+ /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e("p", { children: t }) })
82
+ ] }) : s;
82
83
  };
83
84
  i(
84
85
  null
85
86
  );
86
- const f = {
87
+ const k = {
87
88
  h1: ({ children: t }) => /* @__PURE__ */ e("h1", { className: "mt-0 mb-2 scroll-m-20 text-xl font-medium tracking-tightest", children: t }),
88
89
  h2: ({ children: t }) => /* @__PURE__ */ e("h2", { className: "mt-4 mb-1 scroll-m-20 text-lg font-medium tracking-tightest", children: t }),
89
90
  h3: ({ children: t }) => /* @__PURE__ */ e("h3", { className: "mt-4 mb-1 scroll-m-20 text-base font-medium tracking-tighter", children: t }),
@@ -115,9 +116,9 @@ const f = {
115
116
  tr: ({ children: t }) => /* @__PURE__ */ e("tr", { className: "m-0 border-t p-0 even:bg-muted", children: t }),
116
117
  th: ({ children: t }) => /* @__PURE__ */ e("th", { className: "border px-4 py-2 text-left font-bold", children: t }),
117
118
  td: ({ children: t }) => /* @__PURE__ */ e("td", { className: "border px-4 py-2 text-left", children: t })
118
- }, k = b(
119
- ({ className: t, components: o, ...a }) => /* @__PURE__ */ e(
120
- _,
119
+ }, x = b(
120
+ ({ className: t, components: o, plugins: a, ...r }) => /* @__PURE__ */ e(
121
+ p,
121
122
  {
122
123
  "data-slot": "message-response",
123
124
  className: d(
@@ -219,18 +220,19 @@ const f = {
219
220
  "[&>*:last-child]:mb-0",
220
221
  t
221
222
  ),
222
- components: { ...f, ...o },
223
+ components: { ...k, ...o },
223
224
  controls: !1,
224
- ...a
225
+ plugins: { ...a, mermaid: _ },
226
+ ...r
225
227
  }
226
228
  ),
227
229
  (t, o) => t.children === o.children
228
230
  );
229
- k.displayName = "MessageResponse";
231
+ x.displayName = "MessageResponse";
230
232
  export {
231
- T as Message,
232
- A as MessageAction,
233
- z as MessageActions,
234
- R as MessageContent,
235
- k as MessageResponse
233
+ z as Message,
234
+ S as MessageAction,
235
+ B as MessageActions,
236
+ A as MessageContent,
237
+ x as MessageResponse
236
238
  };
@@ -0,0 +1,1055 @@
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Space+Grotesk:wght@300..700&family=Source+Code+Pro:wght@200..900&display=swap');
2
+ @import 'tailwindcss';
3
+ @import 'tw-animate-css';
4
+
5
+ @custom-variant dark (&:is(.dark *));
6
+
7
+ /* Dark mode configuration */
8
+ @variant dark (@media (prefers-color-scheme: dark));
9
+ @variant dark (.dark &);
10
+
11
+ @theme inline {
12
+ /* Container query breakpoint overrides for layout system */
13
+ --container-2xl: 40rem; /* 640px - Override Tailwind's default 672px */
14
+ --container-8xl: 96rem; /* 1536px - Custom breakpoint for widest layouts */
15
+
16
+ /* Typography scale overrides - font sizes */
17
+ --text-2xs: 0.625rem;
18
+ /* 10px */
19
+ --text-2xl: 1.5rem;
20
+ /* 24px (TW default is 24px) */
21
+ --text-3xl: 1.75rem;
22
+ /* 28px (TW default is 30px) */
23
+ --text-4xl: 2rem;
24
+ /* 32px (TW default is 36px) */
25
+ --text-5xl: 2.25rem;
26
+ /* 36px (TW default is 48px) */
27
+
28
+ /* Typography scale overrides - line heights */
29
+ --text-2xs--line-height: 0.75rem;
30
+ /* 12px */
31
+ --text-xs--line-height: 0.875rem;
32
+ /* 14px (TW default is 16px) */
33
+ --text-sm--line-height: 1.125rem;
34
+ /* 18px (TW default is 20px) */
35
+ --text-base--line-height: 1.25rem;
36
+ /* 20px (TW default is 24px) */
37
+ --text-lg--line-height: 1.5rem;
38
+ /* 24px (TW default is 28px) */
39
+ --text-xl--line-height: 1.5rem;
40
+ /* 24px (TW default is 28px) */
41
+ --text-2xl--line-height: 1.75rem;
42
+ /* 28px (TW default is 32px) */
43
+ --text-3xl--line-height: 2rem;
44
+ /* 32px (TW default is 36px) */
45
+ --text-4xl--line-height: 2.5rem;
46
+ /* 40px (TW default is 40px) */
47
+ --text-5xl--line-height: 2.75rem;
48
+ /* 44px (TW default is 1) */
49
+
50
+ --font-sans: var(--font-inter);
51
+ --font-marketing: var(--font-space-grotesk);
52
+ --font-mono: var(--font-source-code-pro);
53
+ --tracking-tight: -0.04px;
54
+ --tracking-tighter: -0.08px;
55
+ --tracking-tightest: -0.1px;
56
+ --shadow-sm: 0 1px 2px 0 var(--effect-shadow-sm);
57
+ /* tooltips; small containers */
58
+ --shadow-default:
59
+ 0 1px 3px 0 var(--effect-shadow-md), 0 1px 2px 0 var(--effect-shadow-sm);
60
+ /* menus; popovers; hover cards */
61
+ --shadow-md:
62
+ 0 4px 6px -1px var(--effect-shadow-md),
63
+ 0 2px 4px -1px var(--effect-shadow-sm);
64
+ /* sonner; temporary elements */
65
+ --shadow-lg:
66
+ 0 10px 15px -3px var(--effect-shadow-lg),
67
+ 0 4px 6px -2px var(--effect-shadow-sm);
68
+ /* modals; dialogs without backdrop overlay */
69
+ --shadow-xl:
70
+ 0 20px 25px -5px var(--effect-shadow-xl),
71
+ 0 10px 10px -5px var(--effect-shadow-lg);
72
+ /* modals; dialogs with backdrop overlay */
73
+ --shadow-focus-ring: 0 0 0 2px var(--ring), 0 0 0 4px var(--ring-shadow);
74
+ /* default focus ring: inner border (2px dark) + outer glow (4px light, 2px visible beyond inner) */
75
+ --shadow-focus-ring-destructive:
76
+ 0 0 0 2px var(--ring-destructive), 0 0 0 4px var(--ring-destructive-shadow);
77
+ /* destructive focus ring: inner border (2px dark) + outer glow (4px light, 2px visible beyond inner) */
78
+ --color-background: var(--background);
79
+ --color-foreground: var(--foreground);
80
+ --color-sidebar-ring: var(--sidebar-ring);
81
+ --color-sidebar-border: var(--sidebar-border);
82
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
83
+ --color-sidebar-accent: var(--sidebar-accent);
84
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
85
+ --color-sidebar-primary: var(--sidebar-primary);
86
+ --color-sidebar-foreground: var(--sidebar-foreground);
87
+ --color-sidebar: var(--sidebar);
88
+ --color-chart-5: var(--chart-5);
89
+ --color-chart-4: var(--chart-4);
90
+ --color-chart-3: var(--chart-3);
91
+ --color-chart-2: var(--chart-2);
92
+ --color-chart-1: var(--chart-1);
93
+ --color-ring: var(--ring);
94
+ --color-ring-shadow: var(--ring-shadow);
95
+ --color-ring-destructive: var(--ring-destructive);
96
+ --color-ring-destructive-shadow: var(--ring-destructive-shadow);
97
+ --color-input: var(--input);
98
+ --color-border: var(--border);
99
+ --color-destructive: var(--destructive);
100
+ --color-destructive-foreground: var(--destructive-foreground);
101
+ --color-destructive-hover: var(--destructive-hover);
102
+ --color-accent-foreground: var(--accent-foreground);
103
+ --color-accent: var(--accent);
104
+ --color-mountain-foreground: var(--mountain-foreground);
105
+ --color-mountain: var(--mountain);
106
+ --color-muted-foreground: var(--muted-foreground);
107
+ --color-muted: var(--muted);
108
+ --color-primary-foreground: var(--primary-foreground);
109
+ --color-primary: var(--primary);
110
+ --color-primary-hover: var(--primary-hover);
111
+ --color-secondary: var(--secondary);
112
+ --color-secondary-foreground: var(--secondary-foreground);
113
+ --color-secondary-hover: var(--secondary-hover);
114
+ --color-tertiary: var(--tertiary);
115
+ --color-tertiary-hover: var(--tertiary-hover);
116
+ --color-tertiary-foreground: var(--tertiary-foreground);
117
+ --color-toggled: var(--toggled);
118
+ --color-toggled-hover: var(--toggled-hover);
119
+ --color-toggled-foreground: var(--toggled-foreground);
120
+ --color-popover-foreground: var(--popover-foreground);
121
+ --color-popover: var(--popover);
122
+ --color-card-foreground: var(--card-foreground);
123
+ --color-card: var(--card);
124
+ --color-foreground-link: var(--foreground-link);
125
+ --color-backdrop: var(--backdrop);
126
+ --color-warning: var(--warning);
127
+ --color-warning-hover: var(--warning-hover);
128
+ --color-warning-foreground: var(--warning-foreground);
129
+ --color-success: var(--success);
130
+ --color-success-hover: var(--success-hover);
131
+ --color-success-foreground: var(--success-foreground);
132
+ --color-neutral: var(--neutral);
133
+ --color-neutral-hover: var(--neutral-hover);
134
+ --color-neutral-foreground: var(--neutral-foreground);
135
+ --color-undefined: var(--undefined);
136
+ --color-undefined-hover: var(--undefined-hover);
137
+ --color-undefined-foreground: var(--undefined-foreground);
138
+ --color-disabled: var(--disabled);
139
+ --color-disabled-foreground: var(--disabled-foreground);
140
+ --color-hover: var(--hover);
141
+
142
+ /* Status color -alternate variants */
143
+ --color-destructive-foreground-alternate: var(
144
+ --destructive-foreground-alternate
145
+ );
146
+ --color-warning-foreground-alternate: var(--warning-foreground-alternate);
147
+ --color-success-foreground-alternate: var(--success-foreground-alternate);
148
+ --color-neutral-foreground-alternate: var(--neutral-foreground-alternate);
149
+ --color-undefined-foreground-alternate: var(--undefined-foreground-alternate);
150
+
151
+ /* Chart tokens */
152
+ --color-chart-fjord-solid: var(--chart-fjord-solid);
153
+ --color-chart-fjord-opacity-1: var(--chart-fjord-opacity-1);
154
+ --color-chart-fjord-opacity-2: var(--chart-fjord-opacity-2);
155
+ --color-chart-fjord-opacity-3: var(--chart-fjord-opacity-3);
156
+ --color-chart-fjord-opacity-4: var(--chart-fjord-opacity-4);
157
+ --color-chart-fjord-opacity-5: var(--chart-fjord-opacity-5);
158
+ --color-chart-aurora-solid: var(--chart-aurora-solid);
159
+ --color-chart-aurora-opacity-1: var(--chart-aurora-opacity-1);
160
+ --color-chart-aurora-opacity-2: var(--chart-aurora-opacity-2);
161
+ --color-chart-aurora-opacity-3: var(--chart-aurora-opacity-3);
162
+ --color-chart-aurora-opacity-4: var(--chart-aurora-opacity-4);
163
+ --color-chart-aurora-opacity-5: var(--chart-aurora-opacity-5);
164
+ --color-chart-nordic-solid: var(--chart-nordic-solid);
165
+ --color-chart-nordic-opacity-1: var(--chart-nordic-opacity-1);
166
+ --color-chart-nordic-opacity-2: var(--chart-nordic-opacity-2);
167
+ --color-chart-nordic-opacity-3: var(--chart-nordic-opacity-3);
168
+ --color-chart-nordic-opacity-4: var(--chart-nordic-opacity-4);
169
+ --color-chart-nordic-opacity-5: var(--chart-nordic-opacity-5);
170
+ --color-chart-dusk-solid: var(--chart-dusk-solid);
171
+ --color-chart-dusk-opacity-1: var(--chart-dusk-opacity-1);
172
+ --color-chart-dusk-opacity-2: var(--chart-dusk-opacity-2);
173
+ --color-chart-dusk-opacity-3: var(--chart-dusk-opacity-3);
174
+ --color-chart-dusk-opacity-4: var(--chart-dusk-opacity-4);
175
+ --color-chart-dusk-opacity-5: var(--chart-dusk-opacity-5);
176
+ --color-chart-orange-solid: var(--chart-orange-solid);
177
+ --color-chart-orange-opacity-1: var(--chart-orange-opacity-1);
178
+ --color-chart-orange-opacity-2: var(--chart-orange-opacity-2);
179
+ --color-chart-orange-opacity-3: var(--chart-orange-opacity-3);
180
+ --color-chart-orange-opacity-4: var(--chart-orange-opacity-4);
181
+ --color-chart-orange-opacity-5: var(--chart-orange-opacity-5);
182
+ --color-chart-gridlines: var(--chart-gridlines);
183
+
184
+ /* Opacity overlays */
185
+ --color-opacity-10: var(--opacity-10);
186
+ --color-opacity-20: var(--opacity-20);
187
+ --color-opacity-40: var(--opacity-40);
188
+ --color-opacity-60: var(--opacity-60);
189
+ --color-opacity-80: var(--opacity-80);
190
+
191
+ /* Effect tokens for shadows */
192
+ --color-effect-shadow-sm: var(--effect-shadow-sm);
193
+ --color-effect-shadow-md: var(--effect-shadow-md);
194
+ --color-effect-shadow-lg: var(--effect-shadow-lg);
195
+ --color-effect-shadow-xl: var(--effect-shadow-xl);
196
+
197
+ /* Color ramps - base colors */
198
+ --color-fjord: var(--fjord-50);
199
+ --color-nordic: var(--nordic-50);
200
+ --color-aurora: var(--aurora-50);
201
+ --color-sky: var(--sky-50);
202
+
203
+ /* Color ramps - individual shades */
204
+ --color-fjord-50: var(--fjord-50);
205
+ --color-fjord-100: var(--fjord-100);
206
+ --color-fjord-200: var(--fjord-200);
207
+ --color-fjord-300: var(--fjord-300);
208
+ --color-fjord-400: var(--fjord-400);
209
+ --color-fjord-450: var(--fjord-450);
210
+ --color-fjord-500: var(--fjord-500);
211
+ --color-fjord-550: var(--fjord-550);
212
+ --color-fjord-600: var(--fjord-600);
213
+ --color-fjord-650: var(--fjord-650);
214
+ --color-fjord-700: var(--fjord-700);
215
+ --color-fjord-800: var(--fjord-800);
216
+ --color-fjord-900: var(--fjord-900);
217
+ --color-fjord-950: var(--fjord-950);
218
+
219
+ --color-nordic-50: var(--nordic-50);
220
+ --color-nordic-100: var(--nordic-100);
221
+ --color-nordic-200: var(--nordic-200);
222
+ --color-nordic-300: var(--nordic-300);
223
+ --color-nordic-400: var(--nordic-400);
224
+ --color-nordic-450: var(--nordic-450);
225
+ --color-nordic-500: var(--nordic-500);
226
+ --color-nordic-550: var(--nordic-550);
227
+ --color-nordic-600: var(--nordic-600);
228
+ --color-nordic-650: var(--nordic-650);
229
+ --color-nordic-700: var(--nordic-700);
230
+ --color-nordic-800: var(--nordic-800);
231
+ --color-nordic-900: var(--nordic-900);
232
+ --color-nordic-950: var(--nordic-950);
233
+
234
+ --color-aurora-50: var(--aurora-50);
235
+ --color-aurora-100: var(--aurora-100);
236
+ --color-aurora-200: var(--aurora-200);
237
+ --color-aurora-300: var(--aurora-300);
238
+ --color-aurora-400: var(--aurora-400);
239
+ --color-aurora-450: var(--aurora-450);
240
+ --color-aurora-500: var(--aurora-500);
241
+ --color-aurora-550: var(--aurora-550);
242
+ --color-aurora-600: var(--aurora-600);
243
+ --color-aurora-650: var(--aurora-650);
244
+ --color-aurora-700: var(--aurora-700);
245
+ --color-aurora-800: var(--aurora-800);
246
+ --color-aurora-900: var(--aurora-900);
247
+ --color-aurora-950: var(--aurora-950);
248
+
249
+ --color-sky-50: var(--sky-50);
250
+ --color-sky-100: var(--sky-100);
251
+ --color-sky-200: var(--sky-200);
252
+ --color-sky-300: var(--sky-300);
253
+ --color-sky-400: var(--sky-400);
254
+ --color-sky-450: var(--sky-450);
255
+ --color-sky-500: var(--sky-500);
256
+ --color-sky-550: var(--sky-550);
257
+ --color-sky-600: var(--sky-600);
258
+ --color-sky-650: var(--sky-650);
259
+ --color-sky-700: var(--sky-700);
260
+ --color-sky-800: var(--sky-800);
261
+ --color-sky-900: var(--sky-900);
262
+ --color-sky-950: var(--sky-950);
263
+
264
+ --color-dusk-50: var(--dusk-50);
265
+ --color-dusk-100: var(--dusk-100);
266
+ --color-dusk-200: var(--dusk-200);
267
+ --color-dusk-300: var(--dusk-300);
268
+ --color-dusk-400: var(--dusk-400);
269
+ --color-dusk-450: var(--dusk-450);
270
+ --color-dusk-500: var(--dusk-500);
271
+ --color-dusk-550: var(--dusk-550);
272
+ --color-dusk-600: var(--dusk-600);
273
+ --color-dusk-650: var(--dusk-650);
274
+ --color-dusk-700: var(--dusk-700);
275
+ --color-dusk-800: var(--dusk-800);
276
+ --color-dusk-900: var(--dusk-900);
277
+ --color-dusk-950: var(--dusk-950);
278
+
279
+ --color-mountain-50: var(--mountain-50);
280
+ --color-mountain-100: var(--mountain-100);
281
+ --color-mountain-200: var(--mountain-200);
282
+ --color-mountain-300: var(--mountain-300);
283
+ --color-mountain-400: var(--mountain-400);
284
+ --color-mountain-450: var(--mountain-450);
285
+ --color-mountain-500: var(--mountain-500);
286
+ --color-mountain-550: var(--mountain-550);
287
+ --color-mountain-600: var(--mountain-600);
288
+ --color-mountain-650: var(--mountain-650);
289
+ --color-mountain-700: var(--mountain-700);
290
+ --color-mountain-800: var(--mountain-800);
291
+ --color-mountain-900: var(--mountain-900);
292
+ --color-mountain-950: var(--mountain-950);
293
+
294
+ /* Decorative background tokens */
295
+ --color-decorative-background-mountain: var(--decorative-background-mountain);
296
+ --color-decorative-background-fjord: var(--decorative-background-fjord);
297
+ --color-decorative-background-nordic: var(--decorative-background-nordic);
298
+ --color-decorative-background-aurora: var(--decorative-background-aurora);
299
+ --color-decorative-background-dusk: var(--decorative-background-dusk);
300
+ --color-decorative-background-orange: var(--decorative-background-orange);
301
+ --color-decorative-background-sky: var(--decorative-background-sky);
302
+ --color-decorative-background-gray: var(--decorative-background-gray);
303
+
304
+ /* Decorative background hover tokens */
305
+ --color-decorative-background-hover-mountain: var(
306
+ --decorative-background-hover-mountain
307
+ );
308
+ --color-decorative-background-hover-fjord: var(
309
+ --decorative-background-hover-fjord
310
+ );
311
+ --color-decorative-background-hover-nordic: var(
312
+ --decorative-background-hover-nordic
313
+ );
314
+ --color-decorative-background-hover-aurora: var(
315
+ --decorative-background-hover-aurora
316
+ );
317
+ --color-decorative-background-hover-dusk: var(
318
+ --decorative-background-hover-dusk
319
+ );
320
+ --color-decorative-background-hover-orange: var(
321
+ --decorative-background-hover-orange
322
+ );
323
+ --color-decorative-background-hover-sky: var(
324
+ --decorative-background-hover-sky
325
+ );
326
+ --color-decorative-background-hover-gray: var(
327
+ --decorative-background-hover-gray
328
+ );
329
+
330
+ /* Decorative foreground tokens */
331
+ --color-decorative-foreground-mountain: var(--decorative-foreground-mountain);
332
+ --color-decorative-foreground-fjord: var(--decorative-foreground-fjord);
333
+ --color-decorative-foreground-nordic: var(--decorative-foreground-nordic);
334
+ --color-decorative-foreground-aurora: var(--decorative-foreground-aurora);
335
+ --color-decorative-foreground-dusk: var(--decorative-foreground-dusk);
336
+ --color-decorative-foreground-orange: var(--decorative-foreground-orange);
337
+ --color-decorative-foreground-sky: var(--decorative-foreground-sky);
338
+ --color-decorative-foreground-gray: var(--decorative-foreground-gray);
339
+
340
+ /* Gradient tokens */
341
+ --color-gradient-nordic: var(--gradient-nordic);
342
+ --color-gradient-aurora: var(--gradient-aurora);
343
+ --color-gradient-dusk: var(--gradient-dusk);
344
+ --color-gradient-equinox: var(--gradient-equinox);
345
+ --color-gradient-summer: var(--gradient-summer);
346
+ --color-gradient-spring: var(--gradient-spring);
347
+ --color-gradient-fall: var(--gradient-fall);
348
+
349
+ --radius-none: 0px;
350
+ --radius-xs: 2px;
351
+ --radius-sm: 4px;
352
+ --radius-md: 6px;
353
+ --radius-lg: 8px;
354
+ --radius-xl: 12px;
355
+ --radius-2xl: 16px;
356
+ --radius-3xl: 24px;
357
+ --radius-4xl: 32px;
358
+ --radius-full: 9999px;
359
+ --ring-width-md: 3px;
360
+ --avatar-icon-default: 1.09375rem;
361
+ --avatar-icon-xs: 0.875rem;
362
+ --avatar-icon-xxs: 0.65625rem;
363
+ --avatar-image-backdrop: rgba(2, 6, 23, 0.2);
364
+ }
365
+
366
+ :root {
367
+ --radius: 0.375rem;
368
+ /* 6px - default radius, maps to radius-md */
369
+ --font-inter: 'Inter', sans-serif;
370
+ --font-space-grotesk: 'Space Grotesk', sans-serif;
371
+ --font-source-code-pro: 'Source Code Pro', monospace;
372
+ --code-block-collapsed-height: 6.5rem;
373
+ --code-block-fade-height: 0.9375rem;
374
+ --message-content-max-width: 80%;
375
+
376
+ /* Component-specific sizing */
377
+ --alert-icon-width: calc(var(--spacing) * 4);
378
+ /* 16px - width of icon column in alert grid */
379
+ --drawer-max-height: 80vh;
380
+ /* Maximum height for top/bottom drawers */
381
+
382
+ /* Mountain */
383
+ --mountain-white: rgb(255, 255, 255);
384
+ --mountain-black: rgb(0, 0, 0);
385
+ --mountain-10: rgb(249, 250, 250);
386
+ --mountain-50: rgb(241, 242, 243);
387
+ --mountain-100: rgb(228, 230, 232);
388
+ --mountain-200: rgb(212, 215, 217);
389
+ --mountain-300: rgb(187, 192, 196);
390
+ --mountain-400: rgb(165, 171, 177);
391
+ --mountain-450: rgb(139, 148, 154);
392
+ --mountain-500: rgb(124, 134, 142);
393
+ --mountain-550: rgb(109, 118, 126);
394
+ --mountain-600: rgb(94, 102, 109);
395
+ --mountain-650: rgb(82, 89, 95);
396
+ --mountain-700: rgb(64, 70, 74);
397
+ --mountain-800: rgb(45, 49, 52);
398
+ --mountain-900: rgb(33, 36, 38);
399
+ --mountain-950: rgb(17, 18, 19);
400
+
401
+ /* Fjord */
402
+ --fjord-50: rgb(239, 242, 253);
403
+ --fjord-100: rgb(223, 229, 252);
404
+ --fjord-200: rgb(204, 213, 250);
405
+ --fjord-300: rgb(174, 189, 247);
406
+ --fjord-400: rgb(147, 167, 244);
407
+ --fjord-450: rgb(114, 141, 241);
408
+ --fjord-500: rgb(95, 125, 239);
409
+ --fjord-550: rgb(72, 106, 237);
410
+ --fjord-600: rgb(47, 85, 234);
411
+ --fjord-650: rgb(23, 66, 231);
412
+ --fjord-700: rgb(18, 52, 182);
413
+ --fjord-800: rgb(13, 37, 130);
414
+ --fjord-900: rgb(10, 28, 97);
415
+ --fjord-950: rgb(5, 15, 51);
416
+
417
+ /* Nordic */
418
+ --nordic-50: rgb(218, 249, 242);
419
+ --nordic-100: rgb(180, 242, 229);
420
+ --nordic-200: rgb(127, 233, 210);
421
+ --nordic-300: rgb(37, 215, 176);
422
+ --nordic-400: rgb(33, 192, 157);
423
+ --nordic-450: rgb(28, 165, 135);
424
+ --nordic-500: rgb(26, 150, 122);
425
+ --nordic-550: rgb(23, 132, 108);
426
+ --nordic-600: rgb(20, 115, 94);
427
+ --nordic-650: rgb(17, 100, 82);
428
+ --nordic-700: rgb(13, 78, 64);
429
+ --nordic-800: rgb(10, 55, 45);
430
+ --nordic-900: rgb(7, 41, 34);
431
+ --nordic-950: rgb(4, 21, 17);
432
+
433
+ /* Aurora */
434
+ --aurora-50: rgb(231, 249, 198);
435
+ --aurora-100: rgb(207, 243, 141);
436
+ --aurora-200: rgb(171, 233, 56);
437
+ --aurora-300: rgb(144, 210, 23);
438
+ --aurora-400: rgb(129, 188, 20);
439
+ --aurora-450: rgb(110, 161, 18);
440
+ --aurora-500: rgb(100, 146, 16);
441
+ --aurora-550: rgb(88, 129, 14);
442
+ --aurora-600: rgb(77, 112, 12);
443
+ --aurora-650: rgb(67, 97, 11);
444
+ --aurora-700: rgb(52, 76, 8);
445
+ --aurora-800: rgb(37, 54, 6);
446
+ --aurora-900: rgb(27, 40, 4);
447
+ --aurora-950: rgb(14, 20, 2);
448
+
449
+ /* Dusk */
450
+ --dusk-50: rgb(248, 239, 249);
451
+ --dusk-100: rgb(241, 225, 243);
452
+ --dusk-200: rgb(232, 206, 236);
453
+ --dusk-300: rgb(219, 177, 225);
454
+ --dusk-400: rgb(207, 151, 215);
455
+ --dusk-450: rgb(192, 120, 203);
456
+ --dusk-500: rgb(183, 101, 196);
457
+ --dusk-550: rgb(173, 78, 187);
458
+ --dusk-600: rgb(153, 64, 166);
459
+ --dusk-650: rgb(133, 55, 144);
460
+ --dusk-700: rgb(104, 44, 113);
461
+ --dusk-800: rgb(74, 31, 80);
462
+ --dusk-900: rgb(55, 23, 60);
463
+ --dusk-950: rgb(28, 12, 31);
464
+
465
+ /* Red */
466
+ --red-50: rgb(254, 238, 241);
467
+ --red-100: rgb(253, 222, 228);
468
+ --red-200: rgb(252, 202, 210);
469
+ --red-300: rgb(250, 169, 183);
470
+ --red-400: rgb(248, 137, 156);
471
+ --red-450: rgb(246, 94, 120);
472
+ --red-500: rgb(244, 61, 92);
473
+ --red-550: rgb(233, 13, 50);
474
+ --red-600: rgb(203, 11, 44);
475
+ --red-650: rgb(178, 10, 38);
476
+ --red-700: rgb(141, 8, 31);
477
+ --red-800: rgb(102, 6, 22);
478
+ --red-900: rgb(78, 4, 17);
479
+ --red-950: rgb(44, 2, 9);
480
+
481
+ /* Amber */
482
+ --amber-50: rgb(255, 241, 208);
483
+ --amber-100: rgb(255, 227, 162);
484
+ --amber-200: rgb(255, 208, 98);
485
+ --amber-300: rgb(252, 177, 0);
486
+ --amber-400: rgb(225, 158, 0);
487
+ --amber-450: rgb(193, 136, 0);
488
+ --amber-500: rgb(175, 123, 0);
489
+ --amber-550: rgb(155, 109, 0);
490
+ --amber-600: rgb(134, 94, 0);
491
+ --amber-650: rgb(117, 82, 0);
492
+ --amber-700: rgb(91, 64, 0);
493
+ --amber-800: rgb(65, 45, 0);
494
+ --amber-900: rgb(48, 34, 0);
495
+ --amber-950: rgb(24, 17, 0);
496
+
497
+ /* Green */
498
+ --green-50: rgb(221, 249, 231);
499
+ --green-100: rgb(187, 243, 208);
500
+ --green-200: rgb(139, 234, 174);
501
+ --green-300: rgb(52, 218, 113);
502
+ --green-400: rgb(36, 196, 94);
503
+ --green-450: rgb(31, 168, 81);
504
+ --green-500: rgb(28, 152, 74);
505
+ --green-550: rgb(25, 135, 65);
506
+ --green-600: rgb(21, 117, 56);
507
+ --green-650: rgb(19, 102, 49);
508
+ --green-700: rgb(15, 80, 38);
509
+ --green-800: rgb(10, 56, 27);
510
+ --green-900: rgb(8, 42, 20);
511
+ --green-950: rgb(4, 22, 10);
512
+
513
+ /* Blue */
514
+ --blue-50: rgb(230, 244, 255);
515
+ --blue-100: rgb(206, 234, 255);
516
+ --blue-200: rgb(174, 220, 255);
517
+ --blue-300: rgb(124, 198, 255);
518
+ --blue-400: rgb(76, 178, 255);
519
+ --blue-450: rgb(11, 149, 255);
520
+ --blue-500: rgb(0, 134, 237);
521
+ --blue-550: rgb(0, 119, 210);
522
+ --blue-600: rgb(0, 103, 182);
523
+ --blue-650: rgb(0, 90, 159);
524
+ --blue-700: rgb(0, 71, 125);
525
+ --blue-800: rgb(0, 50, 89);
526
+ --blue-900: rgb(0, 37, 66);
527
+ --blue-950: rgb(0, 20, 35);
528
+
529
+ /* Sky */
530
+ --sky-50: rgb(219, 247, 255);
531
+ --sky-100: rgb(183, 239, 254);
532
+ --sky-200: rgb(132, 228, 254);
533
+ --sky-300: rgb(37, 207, 253);
534
+ --sky-400: rgb(2, 185, 234);
535
+ --sky-450: rgb(2, 159, 201);
536
+ --sky-500: rgb(2, 144, 182);
537
+ --sky-550: rgb(1, 127, 161);
538
+ --sky-600: rgb(1, 110, 140);
539
+ --sky-650: rgb(1, 96, 122);
540
+ --sky-700: rgb(1, 75, 96);
541
+ --sky-800: rgb(1, 54, 68);
542
+ --sky-900: rgb(0, 40, 50);
543
+ --sky-950: rgb(0, 21, 26);
544
+
545
+ /* Orange */
546
+ --orange-50: rgb(254, 239, 230);
547
+ --orange-100: rgb(253, 224, 207);
548
+ --orange-200: rgb(252, 205, 176);
549
+ --orange-300: rgb(251, 174, 126);
550
+ --orange-400: rgb(249, 143, 78);
551
+ --orange-450: rgb(247, 100, 10);
552
+ --orange-500: rgb(225, 90, 7);
553
+ --orange-550: rgb(199, 80, 6);
554
+ --orange-600: rgb(173, 69, 6);
555
+ --orange-650: rgb(150, 60, 5);
556
+ --orange-700: rgb(118, 47, 4);
557
+ --orange-800: rgb(84, 34, 3);
558
+ --orange-900: rgb(62, 25, 2);
559
+ --orange-950: rgb(33, 13, 1);
560
+
561
+ /* Yellow */
562
+ --yellow-50: rgb(255, 244, 162);
563
+ --yellow-100: rgb(255, 232, 52);
564
+ --yellow-200: rgb(243, 215, 0);
565
+ --yellow-300: rgb(216, 191, 0);
566
+ --yellow-400: rgb(193, 171, 0);
567
+ --yellow-450: rgb(166, 147, 0);
568
+ --yellow-500: rgb(150, 133, 0);
569
+ --yellow-550: rgb(133, 118, 0);
570
+ --yellow-600: rgb(115, 102, 0);
571
+ --yellow-650: rgb(100, 89, 0);
572
+ --yellow-700: rgb(78, 69, 0);
573
+ --yellow-800: rgb(55, 49, 0);
574
+ --yellow-900: rgb(41, 36, 0);
575
+ --yellow-950: rgb(21, 18, 0);
576
+
577
+ /* Gray */
578
+ --gray-50: rgb(240, 242, 249);
579
+ --gray-100: rgb(226, 229, 244);
580
+ --gray-200: rgb(208, 214, 237);
581
+ --gray-300: rgb(181, 190, 226);
582
+ --gray-400: rgb(157, 169, 217);
583
+ --gray-450: rgb(129, 143, 206);
584
+ --gray-500: rgb(112, 129, 199);
585
+ --gray-550: rgb(93, 112, 192);
586
+ --gray-600: rgb(74, 95, 184);
587
+ --gray-650: rgb(63, 82, 163);
588
+ --gray-700: rgb(50, 65, 127);
589
+ --gray-800: rgb(35, 46, 90);
590
+ --gray-900: rgb(26, 34, 66);
591
+ --gray-950: rgb(13, 17, 34);
592
+
593
+ /* Pink */
594
+ --pink-50: rgb(253, 238, 244);
595
+ --pink-100: rgb(251, 222, 234);
596
+ --pink-200: rgb(249, 202, 221);
597
+ --pink-300: rgb(245, 169, 200);
598
+ --pink-400: rgb(242, 139, 180);
599
+ --pink-450: rgb(237, 97, 153);
600
+ --pink-500: rgb(233, 68, 135);
601
+ --pink-550: rgb(225, 26, 106);
602
+ --pink-600: rgb(196, 23, 92);
603
+ --pink-650: rgb(171, 20, 81);
604
+ --pink-700: rgb(136, 16, 64);
605
+ --pink-800: rgb(98, 11, 46);
606
+ --pink-900: rgb(73, 8, 35);
607
+ --pink-950: rgb(40, 5, 19);
608
+
609
+ /* Theme tokens (Light) mapped to ramp variables */
610
+ --background: var(--mountain-white);
611
+ --foreground: var(--mountain-950);
612
+ --card: var(--mountain-10);
613
+ --card-foreground: var(--mountain-950);
614
+ --popover: var(--mountain-white);
615
+ --popover-foreground: var(--mountain-950);
616
+ --primary: var(--mountain-900);
617
+ --primary-hover: var(--mountain-700);
618
+ --primary-foreground: var(--mountain-50);
619
+ --secondary: var(--mountain-100);
620
+ --secondary-hover: var(--mountain-200);
621
+ --secondary-foreground: var(--mountain-800);
622
+ --tertiary: var(--gray-550);
623
+ --tertiary-hover: var(--gray-600);
624
+ --tertiary-foreground: var(--mountain-white);
625
+ --muted: var(--mountain-10);
626
+ --muted-foreground: var(--mountain-600);
627
+ --accent: var(--mountain-50);
628
+ --accent-foreground: var(--mountain-950);
629
+ --mountain: var(--mountain-50);
630
+ --mountain-foreground: var(--mountain-950);
631
+ --foreground-link: var(--fjord-550);
632
+ --border: var(--mountain-100);
633
+ --input: var(--mountain-100);
634
+ --ring: var(--gray-500);
635
+ --ring-shadow: var(--gray-300);
636
+ --ring-destructive: var(--red-500);
637
+ --ring-destructive-shadow: var(--red-300);
638
+ --backdrop: rgba(2, 6, 23, 0.2);
639
+
640
+ /* Status tokens */
641
+ --destructive: var(--red-200);
642
+ --destructive-hover: var(--red-300);
643
+ --destructive-foreground: var(--red-550);
644
+ --warning: var(--amber-100);
645
+ --warning-hover: var(--amber-200);
646
+ --warning-foreground: var(--amber-500);
647
+ --success: var(--green-100);
648
+ --success-hover: var(--green-200);
649
+ --success-foreground: var(--green-500);
650
+ --neutral: var(--gray-100);
651
+ --neutral-hover: var(--gray-200);
652
+ --neutral-foreground: var(--gray-650);
653
+ --undefined: var(--mountain-100);
654
+ --undefined-hover: var(--mountain-200);
655
+ --undefined-foreground: var(--mountain-500);
656
+ --disabled: var(--mountain-50);
657
+ --disabled-foreground: var(--mountain-450);
658
+ --hover: var(--mountain-50);
659
+
660
+ /* Status color -alternate variants (light mode) */
661
+ --destructive-foreground-alternate: var(--red-700);
662
+ --warning-foreground-alternate: var(--amber-700);
663
+ --success-foreground-alternate: var(--green-700);
664
+ --neutral-foreground-alternate: var(--gray-700);
665
+ --undefined-foreground-alternate: var(--mountain-550);
666
+
667
+ /* Chart tokens (light mode) */
668
+ --chart-fjord-solid: var(--fjord-600);
669
+ --chart-fjord-opacity-1: rgba(47, 85, 234, 0.8);
670
+ --chart-fjord-opacity-2: rgba(47, 85, 234, 0.65);
671
+ --chart-fjord-opacity-3: rgba(47, 85, 234, 0.5);
672
+ --chart-fjord-opacity-4: rgba(47, 85, 234, 0.35);
673
+ --chart-fjord-opacity-5: rgba(47, 85, 234, 0.2);
674
+ --chart-aurora-solid: var(--aurora-600);
675
+ --chart-aurora-opacity-1: rgba(77, 112, 12, 0.8);
676
+ --chart-aurora-opacity-2: rgba(77, 112, 12, 0.65);
677
+ --chart-aurora-opacity-3: rgba(77, 112, 12, 0.5);
678
+ --chart-aurora-opacity-4: rgba(77, 112, 12, 0.35);
679
+ --chart-aurora-opacity-5: rgba(77, 112, 12, 0.2);
680
+ --chart-nordic-solid: var(--nordic-600);
681
+ --chart-nordic-opacity-1: rgba(20, 115, 94, 0.8);
682
+ --chart-nordic-opacity-2: rgba(20, 115, 94, 0.65);
683
+ --chart-nordic-opacity-3: rgba(20, 115, 94, 0.5);
684
+ --chart-nordic-opacity-4: rgba(20, 115, 94, 0.35);
685
+ --chart-nordic-opacity-5: rgba(20, 115, 94, 0.2);
686
+ --chart-dusk-solid: var(--dusk-600);
687
+ --chart-dusk-opacity-1: rgba(153, 64, 166, 0.8);
688
+ --chart-dusk-opacity-2: rgba(153, 64, 166, 0.65);
689
+ --chart-dusk-opacity-3: rgba(153, 64, 166, 0.5);
690
+ --chart-dusk-opacity-4: rgba(153, 64, 166, 0.35);
691
+ --chart-dusk-opacity-5: rgba(153, 64, 166, 0.2);
692
+ --chart-orange-solid: var(--orange-600);
693
+ --chart-orange-opacity-1: rgba(173, 69, 6, 0.8);
694
+ --chart-orange-opacity-2: rgba(173, 69, 6, 0.65);
695
+ --chart-orange-opacity-3: rgba(173, 69, 6, 0.5);
696
+ --chart-orange-opacity-4: rgba(173, 69, 6, 0.35);
697
+ --chart-orange-opacity-5: rgba(173, 69, 6, 0.2);
698
+ --chart-gridlines: var(--mountain-50);
699
+
700
+ /* Opacity overlays (light mode - white backgrounds) */
701
+ --opacity-10: rgba(255, 255, 255, 0.1);
702
+ --opacity-20: rgba(255, 255, 255, 0.2);
703
+ --opacity-40: rgba(255, 255, 255, 0.4);
704
+ --opacity-60: rgba(255, 255, 255, 0.6);
705
+ --opacity-80: rgba(255, 255, 255, 0.8);
706
+
707
+ /* Effect tokens for shadow colors (light mode) */
708
+ --effect-shadow-sm: rgba(0, 0, 0, 0.04);
709
+ --effect-shadow-md: rgba(0, 0, 0, 0.05);
710
+ --effect-shadow-lg: rgba(0, 0, 0, 0.06);
711
+ --effect-shadow-xl: rgba(0, 0, 0, 0.1);
712
+
713
+ /* Toggled tokens (light mode) */
714
+ --toggled: var(--gray-100);
715
+ --toggled-foreground: var(--gray-700);
716
+ --toggled-hover: var(--gray-200);
717
+
718
+ /* Inverted tokens */
719
+ --inverted: var(--mountain-900);
720
+ --inverted-foreground: var(--mountain-50);
721
+ --inverted-foreground-muted: var(--mountain-300);
722
+ --inverted-destructive-foreground: var(--red-300);
723
+ --inverted-success-foreground: var(--green-300);
724
+
725
+ /* Decorative tokens */
726
+ --decorative-background-mountain: var(--mountain-100);
727
+ --decorative-background-fjord: var(--fjord-200);
728
+ --decorative-background-nordic: var(--nordic-100);
729
+ --decorative-background-aurora: var(--aurora-100);
730
+ --decorative-background-dusk: var(--dusk-200);
731
+ --decorative-background-orange: var(--orange-200);
732
+ --decorative-background-sky: var(--sky-200);
733
+ --decorative-background-gray: var(--gray-100);
734
+
735
+ /* Decorative background hover tokens */
736
+ --decorative-background-hover-mountain: var(--mountain-300);
737
+ --decorative-background-hover-fjord: var(--fjord-300);
738
+ --decorative-background-hover-nordic: var(--nordic-200);
739
+ --decorative-background-hover-aurora: var(--aurora-200);
740
+ --decorative-background-hover-dusk: var(--dusk-300);
741
+ --decorative-background-hover-orange: var(--orange-300);
742
+ --decorative-background-hover-sky: var(--sky-200);
743
+ --decorative-background-hover-gray: var(--gray-300);
744
+
745
+ /* Decorative foreground tokens */
746
+ --decorative-foreground-mountain: var(--mountain-700);
747
+ --decorative-foreground-fjord: var(--fjord-700);
748
+ --decorative-foreground-nordic: var(--nordic-700);
749
+ --decorative-foreground-aurora: var(--aurora-700);
750
+ --decorative-foreground-dusk: var(--dusk-700);
751
+ --decorative-foreground-orange: var(--orange-700);
752
+ --decorative-foreground-sky: var(--sky-600);
753
+ --decorative-foreground-gray: var(--gray-650);
754
+
755
+ /* Gradient tokens */
756
+ --gradient-nordic: linear-gradient(
757
+ -100deg,
758
+ var(--nordic-50) 0%,
759
+ var(--nordic-400) 44%,
760
+ var(--nordic-200) 100%
761
+ );
762
+ --gradient-aurora: linear-gradient(
763
+ -100deg,
764
+ var(--aurora-50) 0%,
765
+ var(--aurora-400) 50%,
766
+ var(--aurora-200) 100%
767
+ );
768
+ --gradient-dusk: linear-gradient(
769
+ -100deg,
770
+ var(--dusk-50) 0%,
771
+ var(--dusk-400) 48%,
772
+ var(--dusk-200) 100%
773
+ );
774
+ --gradient-equinox: linear-gradient(
775
+ -100deg,
776
+ var(--dusk-600) 0%,
777
+ var(--dusk-300) 40%,
778
+ var(--aurora-50) 60%,
779
+ var(--aurora-100) 100%
780
+ );
781
+ --gradient-summer: linear-gradient(
782
+ -100deg,
783
+ var(--nordic-100) 0%,
784
+ var(--dusk-50) 50%,
785
+ var(--aurora-100) 100%
786
+ );
787
+ --gradient-spring: linear-gradient(
788
+ -100deg,
789
+ var(--aurora-50) 0%,
790
+ var(--nordic-100) 50%,
791
+ var(--aurora-100) 100%
792
+ );
793
+ --gradient-fall: linear-gradient(
794
+ -100deg,
795
+ var(--fjord-550) 0%,
796
+ var(--dusk-550) 50%,
797
+ var(--dusk-300) 100%
798
+ );
799
+
800
+ /* Sidebar */
801
+ --sidebar: var(--mountain-900);
802
+ --sidebar-foreground: var(--mountain-100);
803
+ --sidebar-primary: var(--mountain-600);
804
+ --sidebar-primary-foreground: var(--mountain-white);
805
+ --sidebar-accent: var(--mountain-700);
806
+ --sidebar-accent-foreground: var(--mountain-white);
807
+ --sidebar-border: var(--mountain-800);
808
+ --sidebar-ring: var(--gray-300);
809
+ }
810
+
811
+ .dark {
812
+ --background: var(--mountain-950);
813
+ --foreground: var(--mountain-50);
814
+ --card: var(--mountain-900);
815
+ --card-foreground: var(--mountain-50);
816
+ --popover: var(--mountain-900);
817
+ --popover-foreground: var(--mountain-200);
818
+ --primary: var(--mountain-50);
819
+ --primary-hover: var(--mountain-200);
820
+ --primary-foreground: var(--mountain-950);
821
+ --secondary: var(--mountain-700);
822
+ --secondary-hover: var(--mountain-600);
823
+ --secondary-foreground: var(--mountain-50);
824
+ --tertiary: var(--gray-550);
825
+ --tertiary-hover: var(--gray-600);
826
+ --tertiary-foreground: var(--mountain-white);
827
+ --muted: var(--mountain-900);
828
+ --muted-foreground: var(--mountain-300);
829
+ --accent: var(--mountain-800);
830
+ --accent-foreground: var(--mountain-50);
831
+ --mountain: var(--mountain-800);
832
+ --mountain-foreground: var(--mountain-50);
833
+ --foreground-link: var(--fjord-550);
834
+ --border: var(--mountain-700);
835
+ --input: var(--mountain-900);
836
+ --ring: var(--gray-500);
837
+ --ring-shadow: var(--gray-300);
838
+ --ring-destructive: var(--red-500);
839
+ --ring-destructive-shadow: var(--red-300);
840
+ --backdrop: rgba(226, 232, 240, 0.2);
841
+
842
+ /* Status tokens */
843
+ --destructive: var(--red-400);
844
+ --destructive-hover: var(--red-500);
845
+ --destructive-foreground: var(--red-450);
846
+ --warning: var(--amber-100);
847
+ --warning-hover: var(--amber-200);
848
+ --warning-foreground: var(--amber-300);
849
+ --success: var(--green-200);
850
+ --success-hover: var(--green-300);
851
+ --success-foreground: var(--green-400);
852
+ --neutral: var(--gray-200);
853
+ --neutral-hover: var(--gray-300);
854
+ --neutral-foreground: var(--gray-400);
855
+ --undefined: var(--mountain-700);
856
+ --undefined-hover: var(--mountain-800);
857
+ --undefined-foreground: var(--mountain-400);
858
+ --disabled: var(--mountain-800);
859
+ --disabled-foreground: var(--mountain-450);
860
+ --hover: var(--mountain-800);
861
+
862
+ /* Status color -alternate variants (dark mode) */
863
+ --destructive-foreground-alternate: var(--red-900);
864
+ --warning-foreground-alternate: var(--amber-800);
865
+ --success-foreground-alternate: var(--green-800);
866
+ --neutral-foreground-alternate: var(--gray-900);
867
+ --undefined-foreground-alternate: var(--mountain-400);
868
+
869
+ /* Chart tokens (dark mode) */
870
+ --chart-fjord-solid: var(--fjord-300);
871
+ --chart-fjord-opacity-1: rgba(174, 189, 247, 0.8);
872
+ --chart-fjord-opacity-2: rgba(174, 189, 247, 0.65);
873
+ --chart-fjord-opacity-3: rgba(174, 189, 247, 0.5);
874
+ --chart-fjord-opacity-4: rgba(174, 189, 247, 0.35);
875
+ --chart-fjord-opacity-5: rgba(174, 189, 247, 0.2);
876
+ --chart-aurora-solid: var(--aurora-200);
877
+ --chart-aurora-opacity-1: rgba(171, 233, 56, 0.8);
878
+ --chart-aurora-opacity-2: rgba(171, 233, 56, 0.65);
879
+ --chart-aurora-opacity-3: rgba(171, 233, 56, 0.5);
880
+ --chart-aurora-opacity-4: rgba(171, 233, 56, 0.35);
881
+ --chart-aurora-opacity-5: rgba(171, 233, 56, 0.2);
882
+ --chart-nordic-solid: var(--nordic-200);
883
+ --chart-nordic-opacity-1: rgba(127, 233, 210, 0.8);
884
+ --chart-nordic-opacity-2: rgba(127, 233, 210, 0.65);
885
+ --chart-nordic-opacity-3: rgba(127, 233, 210, 0.5);
886
+ --chart-nordic-opacity-4: rgba(127, 233, 210, 0.35);
887
+ --chart-nordic-opacity-5: rgba(127, 233, 210, 0.2);
888
+ --chart-dusk-solid: var(--dusk-200);
889
+ --chart-dusk-opacity-1: rgba(232, 206, 236, 0.8);
890
+ --chart-dusk-opacity-2: rgba(232, 206, 236, 0.65);
891
+ --chart-dusk-opacity-3: rgba(232, 206, 236, 0.5);
892
+ --chart-dusk-opacity-4: rgba(232, 206, 236, 0.35);
893
+ --chart-dusk-opacity-5: rgba(232, 206, 236, 0.2);
894
+ --chart-orange-solid: var(--orange-200);
895
+ --chart-orange-opacity-1: rgba(252, 205, 176, 0.8);
896
+ --chart-orange-opacity-2: rgba(252, 205, 176, 0.65);
897
+ --chart-orange-opacity-3: rgba(252, 205, 176, 0.5);
898
+ --chart-orange-opacity-4: rgba(252, 205, 176, 0.35);
899
+ --chart-orange-opacity-5: rgba(252, 205, 176, 0.2);
900
+ --chart-gridlines: var(--mountain-800);
901
+
902
+ /* Opacity overlays (dark mode - dark backgrounds) */
903
+ --opacity-10: rgba(17, 18, 19, 0.1);
904
+ --opacity-20: rgba(17, 18, 19, 0.2);
905
+ --opacity-40: rgba(17, 18, 19, 0.4);
906
+ --opacity-60: rgba(17, 18, 19, 0.6);
907
+ --opacity-80: rgba(17, 18, 19, 0.8);
908
+
909
+ /* Effect tokens for shadow colors (dark mode) */
910
+ --effect-shadow-sm: rgba(0, 0, 0, 0.2);
911
+ --effect-shadow-md: rgba(0, 0, 0, 0.3);
912
+ --effect-shadow-lg: rgba(0, 0, 0, 0.4);
913
+ --effect-shadow-xl: rgba(0, 0, 0, 0.6);
914
+
915
+ /* Toggled tokens (dark mode) */
916
+ --toggled: var(--gray-650);
917
+ --toggled-foreground: var(--gray-50);
918
+ --toggled-hover: var(--gray-500);
919
+
920
+ /* Inverted tokens */
921
+ --inverted: var(--mountain-900);
922
+ --inverted-foreground: var(--mountain-50);
923
+ --inverted-foreground-muted: var(--mountain-300);
924
+ --inverted-destructive-foreground: var(--red-300);
925
+ --inverted-success-foreground: var(--green-300);
926
+
927
+ /* Decorative tokens */
928
+ --decorative-background-mountain: var(--mountain-700);
929
+ --decorative-background-fjord: var(--fjord-300);
930
+ --decorative-background-nordic: var(--nordic-200);
931
+ --decorative-background-aurora: var(--aurora-100);
932
+ --decorative-background-dusk: var(--dusk-300);
933
+ --decorative-background-orange: var(--orange-300);
934
+ --decorative-background-sky: var(--sky-200);
935
+ --decorative-background-gray: var(--gray-200);
936
+
937
+ /* Decorative background hover tokens */
938
+ --decorative-background-hover-mountain: var(--mountain-650);
939
+ --decorative-background-hover-fjord: var(--fjord-650);
940
+ --decorative-background-hover-nordic: var(--nordic-600);
941
+ --decorative-background-hover-aurora: var(--aurora-600);
942
+ --decorative-background-hover-dusk: var(--dusk-650);
943
+ --decorative-background-hover-orange: var(--orange-650);
944
+ --decorative-background-hover-sky: var(--sky-600);
945
+ --decorative-background-hover-gray: var(--gray-600);
946
+
947
+ /* Decorative foreground tokens */
948
+ --decorative-foreground-mountain: var(--mountain-200);
949
+ --decorative-foreground-fjord: var(--fjord-800);
950
+ --decorative-foreground-nordic: var(--nordic-800);
951
+ --decorative-foreground-aurora: var(--aurora-800);
952
+ --decorative-foreground-dusk: var(--dusk-800);
953
+ --decorative-foreground-orange: var(--orange-800);
954
+ --decorative-foreground-sky: var(--sky-300);
955
+ --decorative-foreground-gray: var(--gray-400);
956
+
957
+ /* Gradient tokens */
958
+ --gradient-nordic: linear-gradient(
959
+ -100deg,
960
+ var(--nordic-900) 0%,
961
+ var(--nordic-600) 44%,
962
+ var(--nordic-800) 100%
963
+ );
964
+ --gradient-aurora: linear-gradient(
965
+ -100deg,
966
+ var(--aurora-900) 0%,
967
+ var(--aurora-600) 50%,
968
+ var(--aurora-800) 100%
969
+ );
970
+ --gradient-dusk: linear-gradient(
971
+ -100deg,
972
+ var(--dusk-900) 0%,
973
+ var(--dusk-600) 48%,
974
+ var(--dusk-800) 100%
975
+ );
976
+ --gradient-equinox: linear-gradient(
977
+ -100deg,
978
+ var(--dusk-400) 0%,
979
+ var(--dusk-700) 40%,
980
+ var(--aurora-950) 60%,
981
+ var(--aurora-900) 100%
982
+ );
983
+ --gradient-summer: linear-gradient(
984
+ -100deg,
985
+ var(--nordic-900) 0%,
986
+ var(--dusk-950) 50%,
987
+ var(--aurora-900) 100%
988
+ );
989
+ --gradient-spring: linear-gradient(
990
+ -100deg,
991
+ var(--aurora-950) 0%,
992
+ var(--nordic-900) 50%,
993
+ var(--aurora-900) 100%
994
+ );
995
+ --gradient-fall: linear-gradient(
996
+ -100deg,
997
+ var(--fjord-450) 0%,
998
+ var(--dusk-450) 50%,
999
+ var(--dusk-700) 100%
1000
+ );
1001
+
1002
+ /* Sidebar */
1003
+ --sidebar: var(--mountain-900);
1004
+ --sidebar-foreground: var(--mountain-100);
1005
+ --sidebar-primary: var(--mountain-600);
1006
+ --sidebar-primary-foreground: var(--mountain-white);
1007
+ --sidebar-accent: var(--mountain-700);
1008
+ --sidebar-accent-foreground: var(--mountain-white);
1009
+ --sidebar-border: var(--mountain-800);
1010
+ --sidebar-ring: var(--gray-300);
1011
+ }
1012
+
1013
+ @layer base {
1014
+ * {
1015
+ @apply border-border outline-ring/50;
1016
+ }
1017
+
1018
+ body {
1019
+ @apply bg-background text-foreground;
1020
+ }
1021
+ }
1022
+
1023
+ @layer utilities {
1024
+ [data-state='closed'] {
1025
+ --tw-animation-fill-mode: forwards;
1026
+ }
1027
+
1028
+ @keyframes accordion-down {
1029
+ from {
1030
+ height: 0;
1031
+ }
1032
+
1033
+ to {
1034
+ height: var(--radix-accordion-content-height);
1035
+ }
1036
+ }
1037
+
1038
+ @keyframes accordion-up {
1039
+ from {
1040
+ height: var(--radix-accordion-content-height);
1041
+ }
1042
+
1043
+ to {
1044
+ height: 0;
1045
+ }
1046
+ }
1047
+
1048
+ .animate-accordion-down {
1049
+ animation: accordion-down 0.2s ease-out;
1050
+ }
1051
+
1052
+ .animate-accordion-up {
1053
+ animation: accordion-up 0.2s ease-out;
1054
+ }
1055
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cognite/aura",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  "./components": {
@@ -18,7 +18,8 @@
18
18
  "default": "./dist/styles.css"
19
19
  },
20
20
  "./styles.source.css": {
21
- "default": "./src/styles.css"
21
+ "@fusion/source": "./src/styles.source.css",
22
+ "default": "./dist/styles.source.css"
22
23
  }
23
24
  },
24
25
  "files": [
@@ -26,6 +27,7 @@
26
27
  ],
27
28
  "dependencies": {
28
29
  "@base-ui/react": "^1.1.0",
30
+ "@streamdown/mermaid": "^1.0.2",
29
31
  "@tabler/icons-react": "^3.35.0",
30
32
  "class-variance-authority": "^0.7.1",
31
33
  "clsx": "^2.1.1",
@@ -33,7 +35,8 @@
33
35
  "framer-motion": "^11.0.3",
34
36
  "shiki": "^3.19.0",
35
37
  "streamdown": "^2.4.0",
36
- "tailwind-merge": "^3.4.0"
38
+ "tailwind-merge": "^3.4.0",
39
+ "tw-animate-css": "^1.4.0"
37
40
  },
38
41
  "devDependencies": {
39
42
  "@storybook/addon-docs": "10.2.17",
@@ -45,12 +48,19 @@
45
48
  "@vitest/browser": "^4.0.18",
46
49
  "@vitest/browser-playwright": "^4.0.18",
47
50
  "tailwindcss": "^4.1.17",
48
- "tw-animate-css": "^1.4.0",
49
51
  "typescript": "5.8.3",
50
- "vite-plugin-dts": "^4.5.4"
52
+ "vite": "7.3.1",
53
+ "vite-plugin-dts": "^4.5.4",
54
+ "vitest": "^4.0.18"
51
55
  },
52
56
  "peerDependencies": {
53
- "react": "^18.3.1"
57
+ "react": "^18.3.1",
58
+ "tailwindcss": "^4.1.17"
59
+ },
60
+ "peerDependenciesMeta": {
61
+ "tailwindcss": {
62
+ "optional": true
63
+ }
54
64
  },
55
65
  "publishConfig": {
56
66
  "access": "public"