@togo-framework/ui 0.1.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 (27) hide show
  1. package/LICENSE +5 -0
  2. package/README.md +45 -0
  3. package/dist/chunk-KD4MPGYQ.js +211 -0
  4. package/dist/chunk-KD4MPGYQ.js.map +1 -0
  5. package/dist/chunk-XXP2ZYPY.js +2192 -0
  6. package/dist/chunk-XXP2ZYPY.js.map +1 -0
  7. package/dist/index.d.ts +3872 -0
  8. package/dist/index.js +16145 -0
  9. package/dist/index.js.map +1 -0
  10. package/dist/shadcn.css +527 -0
  11. package/dist/shadcn.d.ts +757 -0
  12. package/dist/shadcn.js +505 -0
  13. package/dist/shadcn.js.map +1 -0
  14. package/dist/styles.css +527 -0
  15. package/dist/theme/index.d.ts +184 -0
  16. package/dist/theme/index.js +36 -0
  17. package/dist/theme/index.js.map +1 -0
  18. package/dist/theme/tokens.primitive.css +63 -0
  19. package/dist/theme/tokens.semantic.css +45 -0
  20. package/package.json +123 -0
  21. package/public/fonts/ibm-plex-sans/ibm-plex-sans.woff2 +0 -0
  22. package/public/fonts/jetbrains-mono/jetbrains-mono.woff2 +0 -0
  23. package/public/fonts/lusail/Lusail-Bold.woff2 +0 -0
  24. package/public/fonts/lusail/Lusail-Light.woff2 +0 -0
  25. package/public/fonts/lusail/Lusail-Medium.woff2 +0 -0
  26. package/public/fonts/lusail/Lusail-Regular.woff2 +0 -0
  27. package/public/fonts/sora/sora.woff2 +0 -0
package/dist/shadcn.css ADDED
@@ -0,0 +1,527 @@
1
+ /*
2
+ * Sentra Design System — CSS Custom Properties (Design Tokens)
3
+ *
4
+ * Import this file in every product's global CSS:
5
+ * @import '@prism/ui/styles/tokens.css';
6
+ *
7
+ * Then reference the tokens via Tailwind semantic classes:
8
+ * bg-background, text-foreground, border-border, bg-primary, etc.
9
+ *
10
+ * The Lusail font (@font-face) is declared here. Products must serve the
11
+ * font files from their own /public/fonts/lusail/ directory, or remove the
12
+ * @font-face block and fall back to Inter/system-ui.
13
+ */
14
+
15
+ /* Enter/exit animation utilities (animate-in/out, fade/zoom/slide) used by the
16
+ * overlay components (Dialog, DropdownMenu, Sheet, Popover, Tooltip, Accordion). */
17
+ @import "tw-animate-css";
18
+
19
+ /* ToGO token layers — primitive palette + semantic roles (the --togo-* contract).
20
+ * The existing HSL tokens below are remapped onto this palette so the whole kit
21
+ * re-skins to the ToGO brand; the --togo-color-* roles add the runtime-theming
22
+ * surface that ThemeProvider switches via [data-theme]. */
23
+ @import "./theme/tokens.primitive.css";
24
+ @import "./theme/tokens.semantic.css";
25
+
26
+ /* Class-based dark mode: `dark:` utilities follow the `.dark` class (toggled on
27
+ * <html>), NOT the OS prefers-color-scheme. Without this, components using
28
+ * `dark:` variants render their dark styles whenever the OS is dark — even in
29
+ * light mode — causing low-contrast text. This keeps `dark:` in sync with the
30
+ * token theming (which is also `.dark`-driven). */
31
+ @custom-variant dark (&:where(.dark, .dark *));
32
+
33
+ /* ── Lusail Font Family (Arabic + Latin bilingual) ── */
34
+ @font-face {
35
+ font-family: 'Lusail';
36
+ src: url('/fonts/lusail/Lusail-Light.woff2') format('woff2'),
37
+ url('/fonts/lusail/Lusail-Light.woff') format('woff');
38
+ font-weight: 300;
39
+ font-style: normal;
40
+ font-display: swap;
41
+ }
42
+ @font-face {
43
+ font-family: 'Lusail';
44
+ src: url('/fonts/lusail/Lusail-Regular.woff2') format('woff2'),
45
+ url('/fonts/lusail/Lusail-Regular.woff') format('woff');
46
+ font-weight: 400;
47
+ font-style: normal;
48
+ font-display: swap;
49
+ }
50
+ @font-face {
51
+ font-family: 'Lusail';
52
+ src: url('/fonts/lusail/Lusail-Medium.woff2') format('woff2'),
53
+ url('/fonts/lusail/Lusail-Medium.woff') format('woff');
54
+ font-weight: 500;
55
+ font-style: normal;
56
+ font-display: swap;
57
+ }
58
+ @font-face {
59
+ font-family: 'Lusail';
60
+ src: url('/fonts/lusail/Lusail-Bold.woff2') format('woff2'),
61
+ url('/fonts/lusail/Lusail-Bold.woff') format('woff');
62
+ font-weight: 700;
63
+ font-style: normal;
64
+ font-display: swap;
65
+ }
66
+
67
+ /* ── Light Theme (default) ── */
68
+ :root {
69
+ /* Typography */
70
+ --font-size-2xs: 0.6875rem; /* 11px - badges only */
71
+ --font-size-xs: 0.8125rem; /* 13px - minimum UI */
72
+ --font-size-sm: 0.875rem; /* 14px - compact text */
73
+ --font-size-base: 0.9375rem; /* 15px - body text */
74
+ --font-size-lg: 1.0625rem; /* 17px - important */
75
+ --line-height-tight: 1.4;
76
+ --line-height-base: 1.6;
77
+ --line-height-relaxed: 1.75;
78
+ --font-arabic: 'Lusail', sans-serif;
79
+
80
+ /* Brand */
81
+ --brand-primary: 345 75% 33%;
82
+ --brand-primary-glow: 345 75% 40%;
83
+
84
+ /* Semantic — light mode */
85
+ --background: 0 0% 98%;
86
+ --background-medium: 210 20% 96%;
87
+ --foreground: 210 20% 10%;
88
+
89
+ --card: 0 0% 100%;
90
+ --card-foreground: 210 20% 10%;
91
+
92
+ --popover: 0 0% 100%;
93
+ --popover-foreground: 210 20% 10%;
94
+
95
+ --primary: 345 75% 33%;
96
+ --primary-foreground: 0 0% 100%;
97
+
98
+ --secondary: 210 15% 93%;
99
+ --secondary-foreground: 210 20% 10%;
100
+
101
+ --muted: 210 15% 93%;
102
+ --muted-foreground: 215 20% 35%;
103
+
104
+ --accent: 210 15% 90%;
105
+ --accent-foreground: 210 20% 10%;
106
+ --accent-muted: 40 45% 45%;
107
+
108
+ --destructive: 0 72% 51%;
109
+ --destructive-foreground: 0 0% 100%;
110
+
111
+ --border: 210 15% 85%;
112
+ --input: 210 15% 85%;
113
+ --ring: 345 75% 33%;
114
+
115
+ --radius: 0.5rem;
116
+
117
+ /* ── Prism v2 — UX-polish layer (radii · elevation · motion · focus) ──
118
+ * Brand hues are unchanged. These tokens add the craft layer (consistent
119
+ * rounding, layered elevation, calibrated motion, visible focus) that makes
120
+ * every component feel premium. Theme-independent tokens (radius/motion/
121
+ * focus) live only here; shadows are re-tuned per theme in .dark. */
122
+
123
+ /* Radius scale derived from --radius for consistent rounding */
124
+ --radius-xs: calc(var(--radius) - 4px);
125
+ --radius-sm: calc(var(--radius) - 2px);
126
+ --radius-md: var(--radius);
127
+ --radius-lg: calc(var(--radius) + 2px);
128
+ --radius-xl: calc(var(--radius) + 6px);
129
+ --radius-2xl: calc(var(--radius) + 12px);
130
+
131
+ /* Elevation — soft, layered shadows tuned for light surfaces */
132
+ --shadow-xs: 0 1px 2px 0 hsl(215 25% 15% / 0.05);
133
+ --shadow-sm: 0 1px 3px 0 hsl(215 25% 15% / 0.08), 0 1px 2px -1px hsl(215 25% 15% / 0.08);
134
+ --shadow-md: 0 4px 12px -2px hsl(215 25% 15% / 0.10), 0 2px 6px -2px hsl(215 25% 15% / 0.08);
135
+ --shadow-lg: 0 12px 28px -6px hsl(215 25% 15% / 0.14), 0 6px 12px -6px hsl(215 25% 15% / 0.10);
136
+ --shadow-xl: 0 24px 48px -12px hsl(215 25% 15% / 0.20);
137
+ --shadow-brand: 0 8px 24px -8px hsl(var(--primary) / 0.35);
138
+
139
+ /* Motion — easing + duration tokens for consistent micro-interactions */
140
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
141
+ --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
142
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
143
+ --ease-in: cubic-bezier(0.4, 0, 1, 1);
144
+ --duration-fast: 120ms;
145
+ --duration-base: 180ms;
146
+ --duration-slow: 280ms;
147
+
148
+ /* Focus ring */
149
+ --focus-ring: var(--ring);
150
+ --focus-ring-offset: var(--background);
151
+
152
+ /* Alerts & semantic signals */
153
+ --alert-amber: 40 65% 50%;
154
+ --alert-cyan: 174 62% 40%;
155
+ --success: 142 71% 40%;
156
+ --warning: 40 65% 50%;
157
+ --info: 174 62% 40%;
158
+ --event: 262 60% 55%;
159
+
160
+ /* Sidebar */
161
+ --sidebar-background: 0 0% 100%;
162
+ --sidebar-foreground: 215 15% 40%;
163
+ --sidebar-primary: 345 75% 33%;
164
+ --sidebar-primary-foreground: 0 0% 100%;
165
+ --sidebar-accent: 210 15% 95%;
166
+ --sidebar-accent-foreground: 210 20% 10%;
167
+ --sidebar-border: 210 15% 90%;
168
+ --sidebar-ring: 345 75% 33%;
169
+
170
+ /* AI glow */
171
+ --ai-glow: 345 75% 33%;
172
+ --ai-pulse: 345 60% 50%;
173
+
174
+ /* Situation Room — light tactical */
175
+ --sr-navy: 222 47% 11%;
176
+ --sr-navy-deep: 222 50% 7%;
177
+ --sr-surface: 220 40% 13%;
178
+ --sr-border: 220 30% 20%;
179
+ --sr-gold: 45 93% 47%;
180
+ --sr-gold-muted: 45 60% 35%;
181
+ --sr-accent-text: 45 90% 40%;
182
+
183
+ /* War Room */
184
+ --warroom-bg: 210 20% 96%;
185
+ --warroom-card: 0 0% 100%;
186
+ --warroom-border: 210 15% 85%;
187
+ --warroom-land: 210 15% 92%;
188
+ --warroom-land-hover: 210 15% 88%;
189
+
190
+ /* Landing gradient */
191
+ --landing-gradient-hero:
192
+ radial-gradient(ellipse at 50% 0%, hsl(var(--primary) / 0.06) 0%, transparent 50%),
193
+ radial-gradient(ellipse at 0% 50%, hsl(var(--primary) / 0.04) 0%, transparent 40%),
194
+ radial-gradient(ellipse at 100% 80%, hsl(var(--muted-foreground) / 0.03) 0%, transparent 40%);
195
+
196
+ /* Personalize / AI palette */
197
+ --pz-primary: 170 72% 36%;
198
+ --pz-secondary: 145 68% 49%;
199
+ --pz-ai: 251 68% 67%;
200
+ --pz-ai-foreground: 0 0% 100%;
201
+ --pz-gradient-hero:
202
+ radial-gradient(ellipse at 50% 0%, hsl(251 68% 67% / 0.08) 0%, transparent 50%),
203
+ radial-gradient(ellipse at 0% 50%, hsl(170 72% 36% / 0.06) 0%, transparent 40%),
204
+ radial-gradient(ellipse at 100% 80%, hsl(145 68% 49% / 0.05) 0%, transparent 40%);
205
+ --pz-shadow-glow: 0 0 30px hsl(170 72% 36% / 0.15);
206
+ --pz-shadow-glow-intense: 0 0 50px hsl(170 72% 36% / 0.28), 0 0 80px hsl(170 72% 36% / 0.12);
207
+ }
208
+
209
+ /* ── Dark Theme ── */
210
+ .dark {
211
+ --brand-primary: 345 75% 33%;
212
+ --brand-primary-glow: 345 75% 40%;
213
+
214
+ --background: 210 20% 6%;
215
+ --background-medium: 215 18% 11%;
216
+ --foreground: 210 20% 98%;
217
+
218
+ --card: 215 18% 11%;
219
+ --card-foreground: 210 20% 98%;
220
+
221
+ --popover: 215 18% 13%;
222
+ --popover-foreground: 210 20% 98%;
223
+
224
+ --primary: 345 75% 33%;
225
+ --primary-foreground: 210 20% 98%;
226
+
227
+ --secondary: 215 15% 18%;
228
+ --secondary-foreground: 210 20% 98%;
229
+
230
+ --muted: 215 15% 18%;
231
+ --muted-foreground: 215 15% 68%;
232
+
233
+ --accent: 215 15% 22%;
234
+ --accent-foreground: 210 20% 98%;
235
+ --accent-muted: 40 45% 45%;
236
+
237
+ --destructive: 0 72% 51%;
238
+ --destructive-foreground: 210 20% 98%;
239
+
240
+ --border: 215 15% 20%;
241
+ --input: 215 15% 20%;
242
+ --ring: 345 75% 33%;
243
+
244
+ --radius: 0.5rem;
245
+
246
+ /* Prism v2 polish — dark elevation (deeper, blacker shadows so cards lift
247
+ * off the dark background). Radius/motion/focus tokens inherit from :root. */
248
+ --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.30);
249
+ --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.40), 0 1px 2px -1px hsl(0 0% 0% / 0.40);
250
+ --shadow-md: 0 4px 12px -2px hsl(0 0% 0% / 0.45), 0 2px 6px -2px hsl(0 0% 0% / 0.40);
251
+ --shadow-lg: 0 12px 28px -6px hsl(0 0% 0% / 0.55), 0 6px 12px -6px hsl(0 0% 0% / 0.45);
252
+ --shadow-xl: 0 24px 48px -12px hsl(0 0% 0% / 0.65);
253
+ --shadow-brand: 0 8px 24px -8px hsl(var(--primary) / 0.50);
254
+
255
+ --alert-amber: 40 65% 58%;
256
+ --alert-cyan: 174 62% 47%;
257
+ --success: 142 71% 45%;
258
+ --warning: 40 65% 58%;
259
+ --info: 174 62% 47%;
260
+ --event: 262 60% 62%;
261
+
262
+ --sidebar-background: 215 18% 8%;
263
+ --sidebar-foreground: 215 15% 75%;
264
+ --sidebar-primary: 345 75% 33%;
265
+ --sidebar-primary-foreground: 210 20% 98%;
266
+ --sidebar-accent: 215 15% 14%;
267
+ --sidebar-accent-foreground: 210 20% 98%;
268
+ --sidebar-border: 215 15% 16%;
269
+ --sidebar-ring: 345 75% 33%;
270
+
271
+ --ai-glow: 345 75% 33%;
272
+ --ai-pulse: 345 60% 50%;
273
+
274
+ --sr-navy: 222 47% 11%;
275
+ --sr-navy-deep: 222 50% 7%;
276
+ --sr-surface: 220 40% 13%;
277
+ --sr-border: 220 30% 20%;
278
+ --sr-gold: 45 93% 47%;
279
+ --sr-gold-muted: 45 60% 35%;
280
+ --sr-accent-text: 45 90% 65%;
281
+
282
+ --warroom-bg: var(--sr-navy-deep);
283
+ --warroom-card: var(--sr-surface);
284
+ --warroom-border: var(--sr-border);
285
+ --warroom-land: 215 18% 12%;
286
+ --warroom-land-hover: 215 18% 16%;
287
+
288
+ --pz-gradient-hero:
289
+ radial-gradient(ellipse at 50% 0%, hsl(251 68% 67% / 0.12) 0%, transparent 55%),
290
+ radial-gradient(ellipse at 0% 50%, hsl(170 72% 36% / 0.10) 0%, transparent 45%),
291
+ radial-gradient(ellipse at 100% 80%, hsl(145 68% 49% / 0.08) 0%, transparent 40%);
292
+ --pz-shadow-glow: 0 0 30px hsl(170 72% 36% / 0.25);
293
+ --pz-shadow-glow-intense: 0 0 50px hsl(170 72% 36% / 0.40), 0 0 80px hsl(170 72% 36% / 0.20);
294
+ }
295
+
296
+ /* ── Global resets ──
297
+ * Tailwind v4 changed the default border/ring color to `currentColor`, so any
298
+ * component using a bare `border` would render a black/foreground-colored outline
299
+ * (especially visible in light mode). Default the border + ring + placeholder to
300
+ * the design tokens so every component is correct without the consumer adding it. */
301
+ @layer base {
302
+ *, ::before, ::after {
303
+ border-color: hsl(var(--border));
304
+ }
305
+ * {
306
+ outline-color: hsl(var(--ring) / 0.5);
307
+ }
308
+ ::placeholder {
309
+ color: hsl(var(--muted-foreground));
310
+ }
311
+ }
312
+
313
+ /* ── RTL utilities (include in product @layer utilities) ── */
314
+ /* [dir="rtl"] .rtl-flip { transform: scaleX(-1); }
315
+ * [dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]),
316
+ * [dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]),
317
+ * [dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]),
318
+ * [dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) {
319
+ * --tw-space-x-reverse: 1;
320
+ * }
321
+ */
322
+
323
+ /* ── Tailwind v4 theme: expose tokens as color utilities (bg-background, text-muted-foreground, border-input…) ── */
324
+ @theme inline {
325
+ --color-background: hsl(var(--background));
326
+ --color-foreground: hsl(var(--foreground));
327
+ --color-card: hsl(var(--card));
328
+ --color-card-foreground: hsl(var(--card-foreground));
329
+ --color-popover: hsl(var(--popover));
330
+ --color-popover-foreground: hsl(var(--popover-foreground));
331
+ --color-primary: hsl(var(--primary));
332
+ --color-primary-foreground: hsl(var(--primary-foreground));
333
+ --color-secondary: hsl(var(--secondary));
334
+ --color-secondary-foreground: hsl(var(--secondary-foreground));
335
+ --color-muted: hsl(var(--muted));
336
+ --color-muted-foreground: hsl(var(--muted-foreground));
337
+ --color-accent: hsl(var(--accent));
338
+ --color-accent-foreground: hsl(var(--accent-foreground));
339
+ --color-destructive: hsl(var(--destructive));
340
+ --color-destructive-foreground: hsl(var(--destructive-foreground));
341
+ --color-border: hsl(var(--border));
342
+ --color-input: hsl(var(--input));
343
+ --color-ring: hsl(var(--ring));
344
+ --color-success: hsl(var(--success));
345
+ --color-warning: hsl(var(--warning));
346
+ --color-info: hsl(var(--info));
347
+ --color-sidebar-background: hsl(var(--sidebar-background));
348
+ --color-sidebar-foreground: hsl(var(--sidebar-foreground));
349
+ --color-sidebar-primary: hsl(var(--sidebar-primary));
350
+ --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
351
+ --color-sidebar-accent: hsl(var(--sidebar-accent));
352
+ --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
353
+ --color-sidebar-border: hsl(var(--sidebar-border));
354
+ --color-sidebar-ring: hsl(var(--sidebar-ring));
355
+
356
+ /* prism color "sets" — brand / gold / ai / alert / extras */
357
+ --color-background-medium: hsl(var(--background-medium));
358
+ --color-brand: hsl(var(--brand-primary));
359
+ --color-brand-glow: hsl(var(--brand-primary-glow));
360
+ --color-gold: hsl(var(--accent));
361
+ --color-gold-muted: hsl(var(--accent-muted));
362
+ --color-ai: hsl(var(--pz-ai, 251 68% 67%));
363
+ --color-ai-foreground: hsl(var(--pz-ai-foreground, 0 0% 100%));
364
+ --color-alert-amber: hsl(var(--alert-amber));
365
+ --color-alert-cyan: hsl(var(--alert-cyan));
366
+
367
+ /* radius scale */
368
+ --radius-lg: var(--radius, 0.5rem);
369
+ --radius-md: calc(var(--radius, 0.5rem) - 2px);
370
+ --radius-sm: calc(var(--radius, 0.5rem) - 4px);
371
+
372
+ /* prism type scale */
373
+ --text-2xs: 0.6875rem;
374
+ --text-xs: 0.8125rem;
375
+ --text-sm: 0.875rem;
376
+ --text-base: 0.9375rem;
377
+ --text-lg: 1.0625rem;
378
+
379
+ /* breakpoints (mobile-first; xs = 375) */
380
+ --breakpoint-xs: 375px;
381
+
382
+ /* animations */
383
+ --animate-accordion-down: accordion-down 0.2s ease-out;
384
+ --animate-accordion-up: accordion-up 0.2s ease-out;
385
+ --animate-breathing: breathing 3s ease-in-out infinite;
386
+ --animate-pulse-brand: pulse-brand 2s ease-in-out infinite;
387
+ --animate-ai-pulse: ai-pulse 1.5s ease-in-out infinite;
388
+ }
389
+
390
+ /* keyframes referenced by the animation utilities above */
391
+ @keyframes accordion-down { from { height: 0 } to { height: var(--radix-accordion-content-height) } }
392
+ @keyframes accordion-up { from { height: var(--radix-accordion-content-height) } to { height: 0 } }
393
+ @keyframes breathing { 0%, 100% { box-shadow: 0 0 15px -5px hsl(var(--brand-primary) / 0.3) } 50% { box-shadow: 0 0 25px -5px hsl(var(--brand-primary) / 0.5) } }
394
+ @keyframes pulse-brand { 0%, 100% { box-shadow: 0 0 15px -5px hsl(var(--brand-primary) / 0.3) } 50% { box-shadow: 0 0 25px -5px hsl(var(--brand-primary) / 0.5) } }
395
+ @keyframes ai-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } }
396
+
397
+ /* ── togo kit root helper (used by Storybook canvas + optional app wrapper) ── */
398
+ :root { --tg-font: "Lusail", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
399
+ .tg-root { font-family: var(--tg-font); }
400
+ /* RTL: components use logical properties (ps/pe/ms/me/start/end) and flip under [dir="rtl"]. */
401
+
402
+ /* ── highlight.js theme (token-driven; works in dark & light) ── */
403
+ .tg-md .hljs { color: hsl(var(--foreground)); }
404
+ .tg-md .hljs-comment, .tg-md .hljs-quote { color: hsl(var(--muted-foreground)); font-style: italic; }
405
+ .tg-md .hljs-keyword, .tg-md .hljs-selector-tag, .tg-md .hljs-built_in, .tg-md .hljs-name, .tg-md .hljs-tag { color: hsl(var(--primary)); }
406
+ .tg-md .hljs-string, .tg-md .hljs-title, .tg-md .hljs-section, .tg-md .hljs-attribute, .tg-md .hljs-literal, .tg-md .hljs-template-tag, .tg-md .hljs-template-variable, .tg-md .hljs-type, .tg-md .hljs-addition { color: hsl(var(--success)); }
407
+ .tg-md .hljs-number, .tg-md .hljs-symbol, .tg-md .hljs-bullet, .tg-md .hljs-link, .tg-md .hljs-meta, .tg-md .hljs-selector-id, .tg-md .hljs-selector-class { color: hsl(var(--info)); }
408
+ .tg-md .hljs-attr, .tg-md .hljs-variable, .tg-md .hljs-params { color: hsl(var(--warning)); }
409
+ .tg-md .hljs-deletion { color: hsl(var(--destructive)); }
410
+ .tg-md .hljs-emphasis { font-style: italic; }
411
+ .tg-md .hljs-strong { font-weight: 700; }
412
+
413
+ /* ════════════════════════════════════════════════════════════════════════════
414
+ * ToGO BRAND REMAP — re-point the inherited (prism) HSL tokens onto the ToGO
415
+ * palette so the entire kit + every app re-skins to the brand. Appended last so
416
+ * it wins by cascade without editing the blocks above. [data-theme] selectors are
417
+ * added alongside .dark so ThemeProvider can drive these tokens too.
418
+ * HSL triples here are the ToGO hex palette converted for the hsl(var(--x)) system.
419
+ * ════════════════════════════════════════════════════════════════════════════ */
420
+
421
+ /* Light (default + explicit) — accent = Cobalt, focus = Stack Sky, surfaces = Mist */
422
+ :root,
423
+ [data-theme="light"] {
424
+ --background: 195 21% 96%; /* Mist #F4F7F8 */
425
+ --background-medium: 200 16% 92%;
426
+ --foreground: 200 18% 10%; /* Ink #141A1D */
427
+ --card: 0 0% 100%;
428
+ --card-foreground: 200 18% 10%;
429
+ --popover: 0 0% 100%;
430
+ --popover-foreground: 200 18% 10%;
431
+ --primary: 217 80% 44%; /* Cobalt #1659C8 */
432
+ --primary-foreground: 0 0% 100%;
433
+ --secondary: 200 16% 93%;
434
+ --secondary-foreground: 200 18% 12%;
435
+ --muted: 200 16% 93%;
436
+ --muted-foreground: 198 12% 40%; /* Slate #5A6B72 */
437
+ --accent: 200 18% 90%;
438
+ --accent-foreground: 200 18% 12%;
439
+ --border: 200 14% 88%; /* Line #E8EDEF */
440
+ --input: 200 14% 88%;
441
+ --ring: 209 79% 54%; /* Stack Sky #2D8CE6 */
442
+ --brand-primary: 217 80% 44%;
443
+ --brand-primary-glow: 209 79% 54%;
444
+ --ai-glow: 217 80% 44%;
445
+ --ai-pulse: 187 75% 49%;
446
+ --sidebar-background: 0 0% 100%;
447
+ --sidebar-foreground: 198 12% 40%;
448
+ --sidebar-primary: 217 80% 44%;
449
+ --sidebar-primary-foreground: 0 0% 100%;
450
+ --sidebar-accent: 200 18% 95%;
451
+ --sidebar-accent-foreground: 200 18% 12%;
452
+ --sidebar-border: 200 14% 90%;
453
+ --sidebar-ring: 209 79% 54%;
454
+ --success: 157 67% 37%; /* #1F9D6B */
455
+ --warning: 40 80% 49%; /* #E0A11B */
456
+ --destructive: 353 62% 59%; /* Danger #D85563 */
457
+ --info: 209 79% 54%;
458
+ }
459
+
460
+ /* Dark (default-when-.dark + explicit) — accent = Gopher Cyan on Ink */
461
+ .dark,
462
+ [data-theme="dark"] {
463
+ --background: 200 20% 7%; /* near-Ink */
464
+ --background-medium: 200 16% 11%;
465
+ --foreground: 200 15% 96%;
466
+ --card: 200 18% 11%;
467
+ --card-foreground: 200 15% 96%;
468
+ --popover: 200 18% 13%;
469
+ --popover-foreground: 200 15% 96%;
470
+ --primary: 187 75% 49%; /* Gopher Cyan #1FC7DC */
471
+ --primary-foreground: 200 18% 10%; /* Ink text on cyan */
472
+ --secondary: 200 14% 17%;
473
+ --secondary-foreground: 200 15% 96%;
474
+ --muted: 200 14% 17%;
475
+ --muted-foreground: 200 11% 68%; /* Slate-300 */
476
+ --accent: 200 14% 20%;
477
+ --accent-foreground: 200 15% 96%;
478
+ --border: 200 14% 20%;
479
+ --input: 200 14% 20%;
480
+ --ring: 187 75% 55%;
481
+ --brand-primary: 187 75% 49%;
482
+ --brand-primary-glow: 209 79% 54%;
483
+ --ai-glow: 187 75% 49%;
484
+ --ai-pulse: 187 60% 60%;
485
+ --sidebar-background: 200 20% 9%;
486
+ --sidebar-foreground: 200 11% 68%;
487
+ --sidebar-primary: 187 75% 49%;
488
+ --sidebar-primary-foreground: 200 18% 10%;
489
+ --sidebar-accent: 200 14% 16%;
490
+ --sidebar-accent-foreground: 200 15% 96%;
491
+ --sidebar-border: 200 14% 18%;
492
+ --sidebar-ring: 187 75% 55%;
493
+ --success: 157 60% 45%;
494
+ --warning: 40 80% 55%;
495
+ --destructive: 353 62% 59%;
496
+ --info: 209 79% 60%;
497
+ }
498
+
499
+ /* New ToGO Tailwind aliases for the §2 authoring API (non-conflicting names).
500
+ * The brand accent is also available as `bg-primary` (remapped above). */
501
+ @theme inline {
502
+ --color-surface: var(--togo-color-surface);
503
+ --color-surface-alt: var(--togo-color-surface-alt);
504
+ --color-on-accent: var(--togo-color-on-accent);
505
+ --color-accent-strong: var(--togo-color-accent-strong);
506
+ --color-danger: var(--togo-color-danger);
507
+ --color-warn: var(--togo-color-warn);
508
+ --font-display: var(--togo-font-display);
509
+ --font-mono: var(--togo-font-mono);
510
+ --font-sans: var(--togo-font-body);
511
+ }
512
+
513
+ /* ════════════════════════════════════════════════════════════════════════════
514
+ * ToGO brand fonts — self-hosted (OFL), variable woff2. Latin display/body/mono;
515
+ * Lusail stays the Arabic face. Consumers serve /fonts/** from their public dir
516
+ * (same model as Lusail). Making IBM Plex Sans the default Latin UI font fixes the
517
+ * top-aligned-glyph issue Lusail caused (its tall ascent pushed Latin text up in
518
+ * the line box) — IBM Plex has normal vertical metrics so text centers.
519
+ * ════════════════════════════════════════════════════════════════════════════ */
520
+ @font-face { font-family: "Sora"; src: url("/fonts/sora/sora.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
521
+ @font-face { font-family: "IBM Plex Sans"; src: url("/fonts/ibm-plex-sans/ibm-plex-sans.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
522
+ @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
523
+
524
+ :root { --tg-font: var(--togo-font-body); }
525
+ .tg-root { font-family: var(--togo-font-body); }
526
+ /* Arabic / RTL renders in the Lusail brand face. */
527
+ [dir="rtl"], :lang(ar) { font-family: "Lusail", var(--togo-font-body); }