astryx-dracula 0.2.0 → 0.3.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 (83) hide show
  1. package/BRAND.md +30 -18
  2. package/README.md +22 -11
  3. package/USAGE.md +29 -10
  4. package/astryx-dracula.js +19 -13
  5. package/astryx-dracula.variants.d.ts +15 -0
  6. package/package.json +59 -17
  7. package/shared/auth-chrome-config.ts +18 -0
  8. package/shared/auth-chrome.tsx +25 -0
  9. package/shared/auth-copy.ts +22 -0
  10. package/shared/chaptered-doc-config.ts +92 -0
  11. package/shared/chaptered-doc.tsx +332 -0
  12. package/shared/chart-hues.ts +27 -0
  13. package/shared/chart-labels.tsx +44 -0
  14. package/shared/chart-legend.tsx +100 -0
  15. package/shared/chart-panel-style.ts +13 -0
  16. package/shared/data-bar.tsx +160 -0
  17. package/shared/gallery-image.ts +20 -0
  18. package/shared/login-demo.ts +7 -0
  19. package/shared/metric-delta.tsx +36 -0
  20. package/shared/order-desk.tsx +273 -0
  21. package/shared/revenue-chart.tsx +174 -0
  22. package/shared/scene-castle.tsx +322 -0
  23. package/shared/scene-frame.tsx +88 -0
  24. package/shared/scene-hues.ts +49 -0
  25. package/shared/scene-tile.tsx +128 -0
  26. package/shared/settings-data.ts +125 -0
  27. package/shared/settings-rows.tsx +179 -0
  28. package/shared/sparkline.tsx +94 -0
  29. package/shared/sso-icons.tsx +30 -0
  30. package/templates/ai-chat-landing.tsx +67 -32
  31. package/templates/ai-chat.tsx +41 -20
  32. package/templates/blank.tsx +5 -2
  33. package/templates/centered-hero.tsx +15 -124
  34. package/templates/classic-gallery.tsx +21 -65
  35. package/templates/contact-form.tsx +62 -40
  36. package/templates/dashboard-portfolio.tsx +146 -227
  37. package/templates/dashboard.tsx +123 -121
  38. package/templates/detail-page.tsx +101 -95
  39. package/templates/documentation-design.template.mjs +1 -1
  40. package/templates/documentation-design.tsx +85 -96
  41. package/templates/documentation-technical.template.mjs +1 -1
  42. package/templates/documentation-technical.tsx +33 -21
  43. package/templates/documentation.template.mjs +1 -1
  44. package/templates/documentation.tsx +54 -74
  45. package/templates/editor.tsx +119 -89
  46. package/templates/file-explorer.tsx +133 -84
  47. package/templates/form-two-column.tsx +62 -124
  48. package/templates/gallery-hero.tsx +17 -171
  49. package/templates/ide.tsx +27 -21
  50. package/templates/incident-console.tsx +105 -69
  51. package/templates/kanban-board.tsx +100 -41
  52. package/templates/library.template.mjs +2 -2
  53. package/templates/library.tsx +38 -41
  54. package/templates/login-card.tsx +59 -86
  55. package/templates/login-split.tsx +88 -128
  56. package/templates/login-sso.tsx +107 -68
  57. package/templates/login.tsx +108 -52
  58. package/templates/messaging-shell.tsx +172 -143
  59. package/templates/mixed-gallery.tsx +31 -130
  60. package/templates/payment-form.tsx +369 -289
  61. package/templates/product-detail.tsx +40 -57
  62. package/templates/product-gallery.tsx +31 -40
  63. package/templates/product-tour.template.mjs +6 -0
  64. package/templates/product-tour.tsx +916 -0
  65. package/templates/settings-dialog.tsx +145 -286
  66. package/templates/settings-sidebar.tsx +179 -267
  67. package/templates/settings.tsx +42 -13
  68. package/templates/shell-nav.tsx +32 -23
  69. package/templates/shell-side-nav.tsx +30 -19
  70. package/templates/shell-top-nav.tsx +81 -43
  71. package/templates/side-gallery.tsx +39 -93
  72. package/templates/table-grouped.tsx +63 -33
  73. package/templates/table-page-chart.tsx +24 -297
  74. package/templates/table-page-heatmap-status.tsx +157 -91
  75. package/templates/table-page-shoe-store-heatmap.tsx +19 -288
  76. package/templates/table-page.tsx +24 -6
  77. package/templates/table.tsx +24 -7
  78. package/templates/tech-report.template.mjs +6 -0
  79. package/templates/tech-report.tsx +1486 -0
  80. package/templates/theme-showcase.template.mjs +1 -1
  81. package/templates/theme-showcase.tsx +313 -249
  82. package/theme.css +76 -14
  83. package/tokens.css +425 -30
package/theme.css CHANGED
@@ -121,7 +121,7 @@
121
121
  --text-large-weight: var(--font-weight-semibold);
122
122
  --text-large-leading: 1.4118;
123
123
  --text-label-size: var(--font-size-base);
124
- --text-label-weight: var(--font-weight-medium);
124
+ --text-label-weight: var(--font-weight-semibold);
125
125
  --text-label-leading: 1.4286;
126
126
  --text-code-size: var(--font-size-base);
127
127
  --text-code-weight: var(--font-weight-normal);
@@ -158,16 +158,18 @@
158
158
  --color-syntax-type: #8BE9FD;
159
159
  --color-syntax-variable: #F8F8F2;
160
160
  --color-syntax-operator: #FF79C6;
161
- --color-syntax-constant: #FFB86C;
161
+ --color-syntax-constant: #BD93F9;
162
162
  --color-syntax-tag: #FF79C6;
163
- --color-syntax-attribute: #F1FA8C;
164
- --color-syntax-property: #8BE9FD;
163
+ --color-syntax-attribute: #50FA7B;
164
+ --color-syntax-property: #F8F8F2;
165
165
  --color-syntax-punctuation: #F8F8F2;
166
166
  --color-syntax-background: #282A36;
167
167
  --radius-inner: 4px;
168
168
  --radius-element: 5px;
169
169
  --radius-container: 5px;
170
170
  --radius-page: 5px;
171
+ --radius-chat: 5px;
172
+ --font-family-mono: 'JetBrains Mono', monospace;
171
173
  --font-size-h1: 24px;
172
174
  --font-size-h2: 20px;
173
175
  --font-size-h3: 16px;
@@ -178,12 +180,17 @@
178
180
  --shadow-med: 0 2px 4px #191A210D, 0 4px 12px #191A211A;
179
181
  --shadow-high: 0 4px 6px #191A211A, 0 12px 24px #191A2126;
180
182
  --shadow-inset-hover: inset 0px 0px 0px 2px #6272A430;
183
+ --shadow-inset-selected: inset 0px 0px 0px 2px #BD93F930;
181
184
  --shadow-inset-success: inset 0px 0px 0px 2px #50FA7B30;
182
185
  --shadow-inset-warning: inset 0px 0px 0px 2px #F1FA8C30;
183
186
  --shadow-inset-error: inset 0px 0px 0px 2px #FF555530;
184
187
  --color-neutral: light-dark(#F8F8F21A, #F8F8F21A);
185
188
  --color-background-inverted: light-dark(#F8F8F2, #F8F8F2);
186
189
  --color-background-error-inverted: light-dark(#FFD5CC, #FFD5CC);
190
+ --color-tint-hover: light-dark(#FFFFFF, #FFFFFF);
191
+ --color-on-dark: light-dark(#F8F8F2, #F8F8F2);
192
+ --color-on-light: light-dark(#000000, #000000);
193
+ --color-shadow: light-dark(#21222C, #21222C);
187
194
  --color-accent-muted: var(--color-background-purple);
188
195
  --color-success-muted: var(--color-background-green);
189
196
  --color-warning-muted: var(--color-background-yellow);
@@ -205,7 +212,7 @@
205
212
  --color-overlay-hover: light-dark(#0000001F, #0000001F);
206
213
  --color-overlay-pressed: light-dark(#00000033, #00000033);
207
214
  --color-border: light-dark(#6272A4, #6272A4);
208
- --color-border-emphasized: light-dark(#6272A4, #6272A4);
215
+ --color-border-emphasized: light-dark(#9AA1BC, #9AA1BC);
209
216
  --color-accent: light-dark(#BD93F9, #BD93F9);
210
217
  --color-success: light-dark(#50FA7B, #50FA7B);
211
218
  --color-error: light-dark(#FF5555, #FF5555);
@@ -224,6 +231,7 @@
224
231
  --color-on-warning: light-dark(#21222C, #21222C);
225
232
  --color-on-error: light-dark(#21222C, #21222C);
226
233
  --color-on-info: light-dark(#21222C, #21222C);
234
+ --color-data-neutral: light-dark(#8C939B, #8C939B);
227
235
  --color-track: light-dark(#6272A4, #6272A4);
228
236
  --color-skeleton: light-dark(#6272A4, #6272A4);
229
237
  --color-functional-red: light-dark(#DE5735, #DE5735);
@@ -233,13 +241,11 @@
233
241
  --color-functional-purple: light-dark(#815CD6, #815CD6);
234
242
  --color-data-categorical-blue: light-dark(#6272A4, #6272A4);
235
243
  --color-data-categorical-orange: light-dark(#FFB86C, #FFB86C);
236
- --color-data-categorical-purple: light-dark(#BD93F9, #BD93F9);
237
244
  --color-data-categorical-green: light-dark(#50FA7B, #50FA7B);
238
245
  --color-data-categorical-pink: light-dark(#FF79C6, #FF79C6);
239
246
  --color-data-categorical-cyan: light-dark(#8BE9FD, #8BE9FD);
240
247
  --color-data-categorical-red: light-dark(#FF5555, #FF5555);
241
248
  --color-data-categorical-teal: light-dark(#A4FFFF, #A4FFFF);
242
- --color-data-categorical-brown: light-dark(#FFB86C, #FFB86C);
243
249
  --color-data-categorical-indigo: light-dark(#D6ACFF, #D6ACFF);
244
250
  --color-background-blue: light-dark(#6272A41A, #6272A41A);
245
251
  --color-border-blue: light-dark(#6272A44D, #6272A44D);
@@ -306,11 +312,11 @@
306
312
  --color-data-yellow-3: light-dark(hsl(64.91 91.67% 60%), hsl(64.91 91.67% 60%));
307
313
  --color-data-yellow-2: light-dark(hsl(64.91 91.67% 74%), hsl(64.91 91.67% 74%));
308
314
  --color-data-yellow-1: light-dark(hsl(64.91 91.67% 88%), hsl(64.91 91.67% 88%));
309
- --color-data-teal-5: light-dark(hsl(190.53 96.61% 28%), hsl(190.53 96.61% 28%));
310
- --color-data-teal-4: light-dark(hsl(190.53 96.61% 44%), hsl(190.53 96.61% 44%));
311
- --color-data-teal-3: light-dark(hsl(190.53 96.61% 60%), hsl(190.53 96.61% 60%));
312
- --color-data-teal-2: light-dark(hsl(190.53 96.61% 74%), hsl(190.53 96.61% 74%));
313
- --color-data-teal-1: light-dark(hsl(190.53 96.61% 88%), hsl(190.53 96.61% 88%));
315
+ --color-data-teal-5: light-dark(hsl(180 100% 28%), hsl(180 100% 28%));
316
+ --color-data-teal-4: light-dark(hsl(180 100% 44%), hsl(180 100% 44%));
317
+ --color-data-teal-3: light-dark(hsl(180 100% 60%), hsl(180 100% 60%));
318
+ --color-data-teal-2: light-dark(hsl(180 100% 74%), hsl(180 100% 74%));
319
+ --color-data-teal-1: light-dark(hsl(180 100% 88%), hsl(180 100% 88%));
314
320
  --color-data-blue-5: light-dark(hsl(225.45 26.61% 28%), hsl(225.45 26.61% 28%));
315
321
  --color-data-blue-4: light-dark(hsl(225.45 26.61% 44%), hsl(225.45 26.61% 44%));
316
322
  --color-data-blue-3: light-dark(hsl(225.45 26.61% 60%), hsl(225.45 26.61% 60%));
@@ -353,7 +359,7 @@
353
359
  --color-tag-cyan: light-dark(#8BE9FD, #8BE9FD);
354
360
  --color-tag-yellow: light-dark(#F1FA8C, #F1FA8C);
355
361
  --color-tag-green: light-dark(#50FA7B, #50FA7B);
356
- --color-tag-blue: light-dark(#BD93F9, #BD93F9);
362
+ --color-tag-purple: light-dark(#BD93F9, #BD93F9);
357
363
  }
358
364
 
359
365
  .astryx-heading.level-1 {
@@ -446,6 +452,22 @@
446
452
  line-height: var(--text-display-3-leading);
447
453
  }
448
454
 
455
+ .astryx-app-shell.wash {
456
+ background-color: var(--color-background-body);
457
+ }
458
+
459
+ .astryx-app-shell.elevated {
460
+ background-color: var(--color-background-body);
461
+ }
462
+
463
+ .astryx-app-shell.surface {
464
+ background-color: var(--color-background-surface);
465
+ }
466
+
467
+ .astryx-app-shell.section {
468
+ background-color: var(--color-background-surface);
469
+ }
470
+
449
471
  .astryx-link {
450
472
  color: var(--color-text-accent);
451
473
  text-decoration: underline;
@@ -496,6 +518,10 @@
496
518
  border-color: var(--color-error);
497
519
  }
498
520
 
521
+ .astryx-statusdot.info {
522
+ background-color: #8BE9FD;
523
+ }
524
+
499
525
  .astryx-progressbar-fill.accent {
500
526
  background-color: #BD93F9;
501
527
  }
@@ -512,6 +538,14 @@
512
538
  background-color: #FF5555;
513
539
  }
514
540
 
541
+ .astryx-progressbar-fill.neutral {
542
+ background-color: var(--color-progress-value);
543
+ }
544
+
545
+ .astryx-progressbar-fill.disabled {
546
+ background-color: var(--color-progress-value);
547
+ }
548
+
515
549
  .astryx-text-input.success {
516
550
  --color-success: #50FA7B;
517
551
  }
@@ -624,6 +658,16 @@
624
658
  --color-background-gray: var(--color-skeleton);
625
659
  }
626
660
 
661
+ .astryx-toast.info {
662
+ background-color: var(--color-background-inverted);
663
+ color: var(--color-on-light);
664
+ }
665
+
666
+ .astryx-toast.error {
667
+ background-color: var(--color-background-error-inverted);
668
+ color: var(--color-on-light);
669
+ }
670
+
627
671
  .astryx-field-status.success {
628
672
  background-color: var(--color-background-green);
629
673
  }
@@ -636,6 +680,24 @@
636
680
  background-color: var(--color-background-red);
637
681
  }
638
682
 
683
+ .astryx-tooltip {
684
+ background-color: var(--color-background-popover);
685
+ color: var(--color-text-primary);
686
+ box-shadow: var(--shadow-low);
687
+ }
688
+
689
+ .astryx-hovercard {
690
+ background-color: var(--color-background-popover);
691
+ }
692
+
693
+ .astryx-avatar-status-dot.success {
694
+ color: var(--color-on-success);
695
+ }
696
+
697
+ .astryx-avatar-status-dot.error {
698
+ color: var(--color-on-error);
699
+ }
700
+
639
701
  .astryx-text.primary { color: var(--color-text-primary); }
640
702
 
641
703
  .astryx-heading.primary { color: var(--color-text-primary); }
@@ -696,7 +758,7 @@
696
758
  color-scheme: dark;
697
759
  --color-text-primary: var(--color-on-dark);
698
760
  --color-icon-primary: var(--color-on-dark);
699
- --color-accent: var(--color-on-dark);
761
+ --color-accent: light-dark(#BD93F9, #BD93F9);
700
762
  }
701
763
 
702
764
  [data-astryx-media="light"] {