@polyxd/react 0.2.2 → 0.4.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 (75) hide show
  1. package/NOTICE +45 -0
  2. package/README.md +15 -2
  3. package/dist/components/avatar.js +5 -36
  4. package/dist/components/avatar.js.map +1 -1
  5. package/dist/components/chart.js +4 -87
  6. package/dist/components/chart.js.map +1 -1
  7. package/dist/components/content.d.ts +0 -8
  8. package/dist/components/content.js +27 -349
  9. package/dist/components/content.js.map +1 -1
  10. package/dist/components/filter.js +1 -1
  11. package/dist/components/filter.js.map +1 -1
  12. package/dist/components/flow.js +11 -85
  13. package/dist/components/flow.js.map +1 -1
  14. package/dist/components/index.js +6 -1
  15. package/dist/components/index.js.map +1 -1
  16. package/dist/components/inputs.d.ts +2 -12
  17. package/dist/components/inputs.js +5 -47
  18. package/dist/components/inputs.js.map +1 -1
  19. package/dist/components/marks.js +5 -20
  20. package/dist/components/marks.js.map +1 -1
  21. package/dist/components/navigation.d.ts +2 -0
  22. package/dist/components/navigation.js +31 -19
  23. package/dist/components/navigation.js.map +1 -1
  24. package/dist/components/pickers.js +12 -160
  25. package/dist/components/pickers.js.map +1 -1
  26. package/dist/components/shell.d.ts +41 -0
  27. package/dist/components/shell.js +190 -0
  28. package/dist/components/shell.js.map +1 -0
  29. package/dist/components/split.d.ts +11 -0
  30. package/dist/components/split.js +85 -0
  31. package/dist/components/split.js.map +1 -0
  32. package/dist/components/structure.d.ts +8 -0
  33. package/dist/components/structure.js +12 -1
  34. package/dist/components/structure.js.map +1 -1
  35. package/dist/components/table.js +10 -17
  36. package/dist/components/table.js.map +1 -1
  37. package/dist/components/tree.js +6 -57
  38. package/dist/components/tree.js.map +1 -1
  39. package/dist/context.d.ts +34 -46
  40. package/dist/context.js +10 -7
  41. package/dist/context.js.map +1 -1
  42. package/dist/data.d.ts +2 -26
  43. package/dist/data.js +2 -51
  44. package/dist/data.js.map +1 -1
  45. package/dist/format.d.ts +2 -14
  46. package/dist/format.js +2 -69
  47. package/dist/format.js.map +1 -1
  48. package/dist/frame.d.ts +19 -0
  49. package/dist/frame.js +21 -0
  50. package/dist/frame.js.map +1 -0
  51. package/dist/index.d.ts +2 -1
  52. package/dist/index.js +2 -1
  53. package/dist/index.js.map +1 -1
  54. package/dist/skeleton.d.ts +2 -1
  55. package/dist/skeleton.js +9 -25
  56. package/dist/skeleton.js.map +1 -1
  57. package/dist/surface.d.ts +7 -3
  58. package/dist/surface.js +15 -13
  59. package/dist/surface.js.map +1 -1
  60. package/package.json +11 -6
  61. package/preview/polyxd.css +2 -0
  62. package/preview/polyxd.js +56 -0
  63. package/src/styles.css +623 -8
  64. package/themes/brutalist.css +300 -0
  65. package/themes/civic.css +300 -0
  66. package/themes/editorial.css +300 -0
  67. package/themes/finance.css +300 -0
  68. package/themes/glass.css +300 -0
  69. package/themes/health.css +300 -0
  70. package/themes/mono.css +300 -0
  71. package/themes/neon.css +300 -0
  72. package/themes/pastel.css +300 -0
  73. package/themes/sketch.css +356 -0
  74. package/themes/terminal.css +300 -0
  75. package/themes/wireframe.css +328 -0
package/themes/mono.css ADDED
@@ -0,0 +1,300 @@
1
+ /* Generated by @polyxd/react scripts/build-themes.ts from the mono pack. Do not edit. */
2
+
3
+ [data-pxd-theme="mono"]:not([data-pxd-mode]),
4
+ [data-pxd-theme="mono"][data-pxd-mode="light"] {
5
+ --pxd-color-surface-default: oklch(99% 0.006 275);
6
+ --pxd-color-surface-subtle: oklch(96.5% 0.02 275);
7
+ --pxd-color-surface-raised: #ffffff;
8
+ --pxd-color-surface-overlay: #ffffff;
9
+ --pxd-color-surface-inverse: oklch(28% 0.11 275);
10
+ --pxd-color-scrim: oklch(20% 0.07 275 / 0.5);
11
+ --pxd-color-text-default: oklch(20% 0.07 275);
12
+ --pxd-color-text-muted: oklch(42% 0.19 275);
13
+ --pxd-color-text-inverse: oklch(96.5% 0.02 275);
14
+ --pxd-color-text-link: oklch(48% 0.21 275);
15
+ --pxd-color-border-default: oklch(87% 0.07 275);
16
+ --pxd-color-border-strong: oklch(57% 0.2 275);
17
+ --pxd-color-border-focus: oklch(48% 0.21 275);
18
+ --pxd-color-action-primary-background: oklch(48% 0.21 275);
19
+ --pxd-color-action-primary-foreground: #ffffff;
20
+ --pxd-color-action-secondary-background: oklch(93% 0.04 275);
21
+ --pxd-color-action-secondary-foreground: oklch(28% 0.11 275);
22
+ --pxd-color-action-secondary-border: oklch(78% 0.11 275);
23
+ --pxd-color-action-danger-background: oklch(50% 0.2 25);
24
+ --pxd-color-action-danger-foreground: #ffffff;
25
+ --pxd-color-selection-background: oklch(93% 0.04 275);
26
+ --pxd-color-selection-foreground: oklch(28% 0.11 275);
27
+ --pxd-color-status-info-background: oklch(93% 0.04 275);
28
+ --pxd-color-status-info-foreground: oklch(35% 0.15 275);
29
+ --pxd-color-status-info-emphasis: oklch(48% 0.21 275);
30
+ --pxd-color-status-success-background: oklch(94% 0.05 150);
31
+ --pxd-color-status-success-foreground: oklch(36% 0.11 150);
32
+ --pxd-color-status-success-emphasis: oklch(48% 0.15 150);
33
+ --pxd-color-status-warning-background: oklch(95% 0.05 80);
34
+ --pxd-color-status-warning-foreground: oklch(38% 0.1 70);
35
+ --pxd-color-status-warning-emphasis: oklch(52% 0.13 70);
36
+ --pxd-color-status-danger-background: oklch(94% 0.04 25);
37
+ --pxd-color-status-danger-foreground: oklch(38% 0.15 25);
38
+ --pxd-color-status-danger-emphasis: oklch(50% 0.2 25);
39
+ --pxd-color-data-categorical-1: oklch(48% 0.21 275);
40
+ --pxd-color-data-categorical-2: oklch(28% 0.11 275);
41
+ --pxd-color-data-categorical-3: oklch(57% 0.2 275);
42
+ --pxd-color-data-categorical-4: oklch(35% 0.15 275);
43
+ --pxd-color-data-categorical-5: oklch(50% 0.03 275);
44
+ --pxd-color-data-categorical-6: oklch(42% 0.19 275);
45
+ --pxd-color-data-positive: oklch(48% 0.15 150);
46
+ --pxd-color-data-negative: oklch(50% 0.2 25);
47
+ --pxd-color-data-neutral: oklch(50% 0.03 275);
48
+ --pxd-type-title-page-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
49
+ --pxd-type-title-page-size: 30px;
50
+ --pxd-type-title-page-weight: 700;
51
+ --pxd-type-title-page-line-height: 1.2;
52
+ --pxd-type-title-page-letter-spacing: -0.3px;
53
+ --pxd-type-title-section-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
54
+ --pxd-type-title-section-size: 22px;
55
+ --pxd-type-title-section-weight: 600;
56
+ --pxd-type-title-section-line-height: 1.25;
57
+ --pxd-type-title-section-letter-spacing: -0.1px;
58
+ --pxd-type-title-item-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
59
+ --pxd-type-title-item-size: 17px;
60
+ --pxd-type-title-item-weight: 600;
61
+ --pxd-type-title-item-line-height: 1.35;
62
+ --pxd-type-title-item-letter-spacing: 0px;
63
+ --pxd-type-body-default-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
64
+ --pxd-type-body-default-size: 16px;
65
+ --pxd-type-body-default-weight: 400;
66
+ --pxd-type-body-default-line-height: 1.5;
67
+ --pxd-type-body-default-letter-spacing: 0px;
68
+ --pxd-type-body-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
69
+ --pxd-type-body-small-size: 14px;
70
+ --pxd-type-body-small-weight: 400;
71
+ --pxd-type-body-small-line-height: 1.5;
72
+ --pxd-type-body-small-letter-spacing: 0px;
73
+ --pxd-type-label-default-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
74
+ --pxd-type-label-default-size: 14px;
75
+ --pxd-type-label-default-weight: 600;
76
+ --pxd-type-label-default-line-height: 1.4;
77
+ --pxd-type-label-default-letter-spacing: 0px;
78
+ --pxd-type-label-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
79
+ --pxd-type-label-small-size: 12px;
80
+ --pxd-type-label-small-weight: 600;
81
+ --pxd-type-label-small-line-height: 1.4;
82
+ --pxd-type-label-small-letter-spacing: 0.2px;
83
+ --pxd-type-numeric-display-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
84
+ --pxd-type-numeric-display-size: 30px;
85
+ --pxd-type-numeric-display-weight: 700;
86
+ --pxd-type-numeric-display-line-height: 1.15;
87
+ --pxd-type-numeric-display-letter-spacing: -0.3px;
88
+ --pxd-space-inset-compact: 8px;
89
+ --pxd-space-inset-default: 16px;
90
+ --pxd-space-inset-comfortable: 24px;
91
+ --pxd-space-stack-tight: 4px;
92
+ --pxd-space-stack-default: 8px;
93
+ --pxd-space-stack-loose: 16px;
94
+ --pxd-space-stack-section: 32px;
95
+ --pxd-space-inline-tight: 4px;
96
+ --pxd-space-inline-default: 8px;
97
+ --pxd-space-inline-loose: 16px;
98
+ --pxd-size-target-min: 44px;
99
+ --pxd-size-icon-small: 16px;
100
+ --pxd-size-icon-default: 20px;
101
+ --pxd-radius-small: 6px;
102
+ --pxd-radius-control: 8px;
103
+ --pxd-radius-default: 8px;
104
+ --pxd-radius-large: 12px;
105
+ --pxd-radius-full: 999px;
106
+ --pxd-border-width-default: 1px;
107
+ --pxd-border-width-strong: 2px;
108
+ --pxd-focus-ring-width: 2px;
109
+ --pxd-focus-ring-offset: 2px;
110
+ --pxd-measure-max: 65;
111
+ --pxd-opacity-state-hover: 0.06;
112
+ --pxd-opacity-state-pressed: 0.12;
113
+ --pxd-opacity-state-focus: 0.12;
114
+ --pxd-opacity-state-disabled: 0.4;
115
+ --pxd-shadow-raised: 0px 1px 3px 0px oklch(28% 0.11 275 / 0.12);
116
+ --pxd-shadow-overlay: 0px 12px 32px 0px oklch(28% 0.11 275 / 0.28);
117
+ --pxd-motion-duration-instant: 80ms;
118
+ --pxd-motion-duration-short: 150ms;
119
+ --pxd-motion-duration-medium: 220ms;
120
+ --pxd-motion-duration-long: 320ms;
121
+ --pxd-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
122
+ --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
123
+ --pxd-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
124
+
125
+ /* shadcn/ui variable names, so shadcn components follow this pack too */
126
+ --background: var(--pxd-color-surface-default);
127
+ --foreground: var(--pxd-color-text-default);
128
+ --card: var(--pxd-color-surface-raised);
129
+ --card-foreground: var(--pxd-color-text-default);
130
+ --popover: var(--pxd-color-surface-overlay);
131
+ --popover-foreground: var(--pxd-color-text-default);
132
+ --primary: var(--pxd-color-action-primary-background);
133
+ --primary-foreground: var(--pxd-color-action-primary-foreground);
134
+ --secondary: var(--pxd-color-action-secondary-background);
135
+ --secondary-foreground: var(--pxd-color-action-secondary-foreground);
136
+ --muted: var(--pxd-color-surface-subtle);
137
+ --muted-foreground: var(--pxd-color-text-muted);
138
+ --accent: var(--pxd-color-selection-background);
139
+ --accent-foreground: var(--pxd-color-selection-foreground);
140
+ --destructive: var(--pxd-color-action-danger-background);
141
+ --border: var(--pxd-color-border-default);
142
+ --input: var(--pxd-color-border-strong);
143
+ --ring: var(--pxd-color-border-focus);
144
+ --radius: var(--pxd-radius-default);
145
+ --chart-1: var(--pxd-color-data-categorical-1);
146
+ --chart-2: var(--pxd-color-data-categorical-2);
147
+ --chart-3: var(--pxd-color-data-categorical-3);
148
+ --chart-4: var(--pxd-color-data-categorical-4);
149
+ --chart-5: var(--pxd-color-data-categorical-5);
150
+ color-scheme: light;
151
+ }
152
+
153
+ [data-pxd-theme="mono"][data-pxd-mode="dark"] {
154
+ --pxd-color-surface-default: oklch(17% 0.035 275);
155
+ --pxd-color-surface-subtle: oklch(22% 0.045 275);
156
+ --pxd-color-surface-raised: oklch(20% 0.04 275);
157
+ --pxd-color-surface-overlay: oklch(26% 0.05 275);
158
+ --pxd-color-surface-inverse: oklch(93% 0.04 275);
159
+ --pxd-color-scrim: oklch(10% 0.03 275 / 0.6);
160
+ --pxd-color-text-default: oklch(96% 0.02 275);
161
+ --pxd-color-text-muted: oklch(82% 0.1 275);
162
+ --pxd-color-text-inverse: oklch(17% 0.035 275);
163
+ --pxd-color-text-link: oklch(76% 0.13 275);
164
+ --pxd-color-border-default: oklch(32% 0.07 275);
165
+ --pxd-color-border-strong: oklch(58% 0.15 275);
166
+ --pxd-color-border-focus: oklch(76% 0.13 275);
167
+ --pxd-color-action-primary-background: oklch(76% 0.13 275);
168
+ --pxd-color-action-primary-foreground: oklch(16% 0.04 275);
169
+ --pxd-color-action-secondary-background: oklch(26% 0.05 275);
170
+ --pxd-color-action-secondary-foreground: oklch(93% 0.04 275);
171
+ --pxd-color-action-secondary-border: oklch(42% 0.12 275);
172
+ --pxd-color-action-danger-background: oklch(74% 0.16 25);
173
+ --pxd-color-action-danger-foreground: oklch(16% 0.04 275);
174
+ --pxd-color-selection-background: oklch(32% 0.07 275);
175
+ --pxd-color-selection-foreground: oklch(93% 0.04 275);
176
+ --pxd-color-status-info-background: oklch(32% 0.07 275);
177
+ --pxd-color-status-info-foreground: oklch(88% 0.07 275);
178
+ --pxd-color-status-info-emphasis: oklch(76% 0.13 275);
179
+ --pxd-color-status-success-background: oklch(30% 0.07 150);
180
+ --pxd-color-status-success-foreground: oklch(90% 0.08 150);
181
+ --pxd-color-status-success-emphasis: oklch(78% 0.15 150);
182
+ --pxd-color-status-warning-background: oklch(32% 0.07 70);
183
+ --pxd-color-status-warning-foreground: oklch(91% 0.08 80);
184
+ --pxd-color-status-warning-emphasis: oklch(80% 0.14 75);
185
+ --pxd-color-status-danger-background: oklch(30% 0.09 25);
186
+ --pxd-color-status-danger-foreground: oklch(88% 0.07 25);
187
+ --pxd-color-status-danger-emphasis: oklch(74% 0.16 25);
188
+ --pxd-color-data-categorical-1: oklch(76% 0.13 275);
189
+ --pxd-color-data-categorical-2: oklch(93% 0.04 275);
190
+ --pxd-color-data-categorical-3: oklch(58% 0.15 275);
191
+ --pxd-color-data-categorical-4: oklch(82% 0.1 275);
192
+ --pxd-color-data-categorical-5: oklch(70% 0.03 275);
193
+ --pxd-color-data-categorical-6: oklch(66% 0.14 275);
194
+ --pxd-color-data-positive: oklch(78% 0.15 150);
195
+ --pxd-color-data-negative: oklch(74% 0.16 25);
196
+ --pxd-color-data-neutral: oklch(70% 0.03 275);
197
+ --pxd-type-title-page-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
198
+ --pxd-type-title-page-size: 30px;
199
+ --pxd-type-title-page-weight: 700;
200
+ --pxd-type-title-page-line-height: 1.2;
201
+ --pxd-type-title-page-letter-spacing: -0.3px;
202
+ --pxd-type-title-section-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
203
+ --pxd-type-title-section-size: 22px;
204
+ --pxd-type-title-section-weight: 600;
205
+ --pxd-type-title-section-line-height: 1.25;
206
+ --pxd-type-title-section-letter-spacing: -0.1px;
207
+ --pxd-type-title-item-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
208
+ --pxd-type-title-item-size: 17px;
209
+ --pxd-type-title-item-weight: 600;
210
+ --pxd-type-title-item-line-height: 1.35;
211
+ --pxd-type-title-item-letter-spacing: 0px;
212
+ --pxd-type-body-default-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
213
+ --pxd-type-body-default-size: 16px;
214
+ --pxd-type-body-default-weight: 400;
215
+ --pxd-type-body-default-line-height: 1.5;
216
+ --pxd-type-body-default-letter-spacing: 0px;
217
+ --pxd-type-body-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
218
+ --pxd-type-body-small-size: 14px;
219
+ --pxd-type-body-small-weight: 400;
220
+ --pxd-type-body-small-line-height: 1.5;
221
+ --pxd-type-body-small-letter-spacing: 0px;
222
+ --pxd-type-label-default-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
223
+ --pxd-type-label-default-size: 14px;
224
+ --pxd-type-label-default-weight: 600;
225
+ --pxd-type-label-default-line-height: 1.4;
226
+ --pxd-type-label-default-letter-spacing: 0px;
227
+ --pxd-type-label-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
228
+ --pxd-type-label-small-size: 12px;
229
+ --pxd-type-label-small-weight: 600;
230
+ --pxd-type-label-small-line-height: 1.4;
231
+ --pxd-type-label-small-letter-spacing: 0.2px;
232
+ --pxd-type-numeric-display-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
233
+ --pxd-type-numeric-display-size: 30px;
234
+ --pxd-type-numeric-display-weight: 700;
235
+ --pxd-type-numeric-display-line-height: 1.15;
236
+ --pxd-type-numeric-display-letter-spacing: -0.3px;
237
+ --pxd-space-inset-compact: 8px;
238
+ --pxd-space-inset-default: 16px;
239
+ --pxd-space-inset-comfortable: 24px;
240
+ --pxd-space-stack-tight: 4px;
241
+ --pxd-space-stack-default: 8px;
242
+ --pxd-space-stack-loose: 16px;
243
+ --pxd-space-stack-section: 32px;
244
+ --pxd-space-inline-tight: 4px;
245
+ --pxd-space-inline-default: 8px;
246
+ --pxd-space-inline-loose: 16px;
247
+ --pxd-size-target-min: 44px;
248
+ --pxd-size-icon-small: 16px;
249
+ --pxd-size-icon-default: 20px;
250
+ --pxd-radius-small: 6px;
251
+ --pxd-radius-control: 8px;
252
+ --pxd-radius-default: 8px;
253
+ --pxd-radius-large: 12px;
254
+ --pxd-radius-full: 999px;
255
+ --pxd-border-width-default: 1px;
256
+ --pxd-border-width-strong: 2px;
257
+ --pxd-focus-ring-width: 2px;
258
+ --pxd-focus-ring-offset: 2px;
259
+ --pxd-measure-max: 65;
260
+ --pxd-opacity-state-hover: 0.06;
261
+ --pxd-opacity-state-pressed: 0.12;
262
+ --pxd-opacity-state-focus: 0.12;
263
+ --pxd-opacity-state-disabled: 0.4;
264
+ --pxd-shadow-raised: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
265
+ --pxd-shadow-overlay: 0px 12px 32px 0px rgba(0, 0, 0, 0.6);
266
+ --pxd-motion-duration-instant: 80ms;
267
+ --pxd-motion-duration-short: 150ms;
268
+ --pxd-motion-duration-medium: 220ms;
269
+ --pxd-motion-duration-long: 320ms;
270
+ --pxd-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
271
+ --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
272
+ --pxd-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
273
+
274
+ /* shadcn/ui variable names, so shadcn components follow this pack too */
275
+ --background: var(--pxd-color-surface-default);
276
+ --foreground: var(--pxd-color-text-default);
277
+ --card: var(--pxd-color-surface-raised);
278
+ --card-foreground: var(--pxd-color-text-default);
279
+ --popover: var(--pxd-color-surface-overlay);
280
+ --popover-foreground: var(--pxd-color-text-default);
281
+ --primary: var(--pxd-color-action-primary-background);
282
+ --primary-foreground: var(--pxd-color-action-primary-foreground);
283
+ --secondary: var(--pxd-color-action-secondary-background);
284
+ --secondary-foreground: var(--pxd-color-action-secondary-foreground);
285
+ --muted: var(--pxd-color-surface-subtle);
286
+ --muted-foreground: var(--pxd-color-text-muted);
287
+ --accent: var(--pxd-color-selection-background);
288
+ --accent-foreground: var(--pxd-color-selection-foreground);
289
+ --destructive: var(--pxd-color-action-danger-background);
290
+ --border: var(--pxd-color-border-default);
291
+ --input: var(--pxd-color-border-strong);
292
+ --ring: var(--pxd-color-border-focus);
293
+ --radius: var(--pxd-radius-default);
294
+ --chart-1: var(--pxd-color-data-categorical-1);
295
+ --chart-2: var(--pxd-color-data-categorical-2);
296
+ --chart-3: var(--pxd-color-data-categorical-3);
297
+ --chart-4: var(--pxd-color-data-categorical-4);
298
+ --chart-5: var(--pxd-color-data-categorical-5);
299
+ color-scheme: dark;
300
+ }
package/themes/neon.css ADDED
@@ -0,0 +1,300 @@
1
+ /* Generated by @polyxd/react scripts/build-themes.ts from the neon pack. Do not edit. */
2
+
3
+ [data-pxd-theme="neon"]:not([data-pxd-mode]),
4
+ [data-pxd-theme="neon"][data-pxd-mode="dark"] {
5
+ --pxd-color-surface-default: #0a0a14;
6
+ --pxd-color-surface-subtle: #13132a;
7
+ --pxd-color-surface-raised: #101024;
8
+ --pxd-color-surface-overlay: #161636;
9
+ --pxd-color-surface-inverse: #f4f0ff;
10
+ --pxd-color-scrim: rgba(10, 10, 20, 0.75);
11
+ --pxd-color-text-default: #eee9ff;
12
+ --pxd-color-text-muted: #a9a3c8;
13
+ --pxd-color-text-inverse: #0a0a14;
14
+ --pxd-color-text-link: #4ff0ff;
15
+ --pxd-color-border-default: #2a2a4a;
16
+ --pxd-color-border-strong: #7873a8;
17
+ --pxd-color-border-focus: #4ff0ff;
18
+ --pxd-color-action-primary-background: #ff2bd6;
19
+ --pxd-color-action-primary-foreground: #12001a;
20
+ --pxd-color-action-secondary-background: #13132a;
21
+ --pxd-color-action-secondary-foreground: #eee9ff;
22
+ --pxd-color-action-secondary-border: #ff2bd6;
23
+ --pxd-color-action-danger-background: #ff4d6d;
24
+ --pxd-color-action-danger-foreground: #1a0008;
25
+ --pxd-color-selection-background: #2c1440;
26
+ --pxd-color-selection-foreground: #ffa6ee;
27
+ --pxd-color-status-info-background: #0f2a3a;
28
+ --pxd-color-status-info-foreground: #9beaff;
29
+ --pxd-color-status-info-emphasis: #4ff0ff;
30
+ --pxd-color-status-success-background: #0c2f24;
31
+ --pxd-color-status-success-foreground: #8dffcf;
32
+ --pxd-color-status-success-emphasis: #3dffb0;
33
+ --pxd-color-status-warning-background: #332a08;
34
+ --pxd-color-status-warning-foreground: #ffe27a;
35
+ --pxd-color-status-warning-emphasis: #ffd23f;
36
+ --pxd-color-status-danger-background: #3a0f1c;
37
+ --pxd-color-status-danger-foreground: #ffb3c3;
38
+ --pxd-color-status-danger-emphasis: #ff4d6d;
39
+ --pxd-color-data-categorical-1: #ff2bd6;
40
+ --pxd-color-data-categorical-2: #4ff0ff;
41
+ --pxd-color-data-categorical-3: #3dffb0;
42
+ --pxd-color-data-categorical-4: #ffd23f;
43
+ --pxd-color-data-categorical-5: #b388ff;
44
+ --pxd-color-data-categorical-6: #ff8a3d;
45
+ --pxd-color-data-positive: #3dffb0;
46
+ --pxd-color-data-negative: #ff4d6d;
47
+ --pxd-color-data-neutral: #8f89b8;
48
+ --pxd-type-title-page-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
49
+ --pxd-type-title-page-size: 34px;
50
+ --pxd-type-title-page-weight: 700;
51
+ --pxd-type-title-page-line-height: 1.1;
52
+ --pxd-type-title-page-letter-spacing: -0.8px;
53
+ --pxd-type-title-section-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
54
+ --pxd-type-title-section-size: 24px;
55
+ --pxd-type-title-section-weight: 700;
56
+ --pxd-type-title-section-line-height: 1.2;
57
+ --pxd-type-title-section-letter-spacing: -0.4px;
58
+ --pxd-type-title-item-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
59
+ --pxd-type-title-item-size: 18px;
60
+ --pxd-type-title-item-weight: 600;
61
+ --pxd-type-title-item-line-height: 1.3;
62
+ --pxd-type-title-item-letter-spacing: 0px;
63
+ --pxd-type-body-default-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
64
+ --pxd-type-body-default-size: 16px;
65
+ --pxd-type-body-default-weight: 400;
66
+ --pxd-type-body-default-line-height: 1.5;
67
+ --pxd-type-body-default-letter-spacing: 0px;
68
+ --pxd-type-body-small-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
69
+ --pxd-type-body-small-size: 14px;
70
+ --pxd-type-body-small-weight: 400;
71
+ --pxd-type-body-small-line-height: 1.5;
72
+ --pxd-type-body-small-letter-spacing: 0px;
73
+ --pxd-type-label-default-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
74
+ --pxd-type-label-default-size: 14px;
75
+ --pxd-type-label-default-weight: 600;
76
+ --pxd-type-label-default-line-height: 1.4;
77
+ --pxd-type-label-default-letter-spacing: 0.6px;
78
+ --pxd-type-label-small-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
79
+ --pxd-type-label-small-size: 12px;
80
+ --pxd-type-label-small-weight: 600;
81
+ --pxd-type-label-small-line-height: 1.4;
82
+ --pxd-type-label-small-letter-spacing: 1px;
83
+ --pxd-type-numeric-display-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
84
+ --pxd-type-numeric-display-size: 36px;
85
+ --pxd-type-numeric-display-weight: 700;
86
+ --pxd-type-numeric-display-line-height: 1.05;
87
+ --pxd-type-numeric-display-letter-spacing: -0.8px;
88
+ --pxd-space-inset-compact: 8px;
89
+ --pxd-space-inset-default: 16px;
90
+ --pxd-space-inset-comfortable: 24px;
91
+ --pxd-space-stack-tight: 4px;
92
+ --pxd-space-stack-default: 8px;
93
+ --pxd-space-stack-loose: 16px;
94
+ --pxd-space-stack-section: 36px;
95
+ --pxd-space-inline-tight: 4px;
96
+ --pxd-space-inline-default: 8px;
97
+ --pxd-space-inline-loose: 16px;
98
+ --pxd-size-target-min: 44px;
99
+ --pxd-size-icon-small: 16px;
100
+ --pxd-size-icon-default: 20px;
101
+ --pxd-radius-small: 8px;
102
+ --pxd-radius-control: 12px;
103
+ --pxd-radius-default: 12px;
104
+ --pxd-radius-large: 16px;
105
+ --pxd-radius-full: 999px;
106
+ --pxd-border-width-default: 1px;
107
+ --pxd-border-width-strong: 2px;
108
+ --pxd-focus-ring-width: 2px;
109
+ --pxd-focus-ring-offset: 2px;
110
+ --pxd-measure-max: 65;
111
+ --pxd-opacity-state-hover: 0.1;
112
+ --pxd-opacity-state-pressed: 0.18;
113
+ --pxd-opacity-state-focus: 0.18;
114
+ --pxd-opacity-state-disabled: 0.4;
115
+ --pxd-shadow-raised: 0px 0px 24px 0px rgba(255, 43, 214, 0.25), 0px 0px 2px 0px rgba(79, 240, 255, 0.35);
116
+ --pxd-shadow-overlay: 0px 0px 48px 0px rgba(79, 240, 255, 0.35), 0px 0px 4px 0px rgba(255, 43, 214, 0.5);
117
+ --pxd-motion-duration-instant: 60ms;
118
+ --pxd-motion-duration-short: 140ms;
119
+ --pxd-motion-duration-medium: 220ms;
120
+ --pxd-motion-duration-long: 320ms;
121
+ --pxd-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
122
+ --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
123
+ --pxd-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
124
+
125
+ /* shadcn/ui variable names, so shadcn components follow this pack too */
126
+ --background: var(--pxd-color-surface-default);
127
+ --foreground: var(--pxd-color-text-default);
128
+ --card: var(--pxd-color-surface-raised);
129
+ --card-foreground: var(--pxd-color-text-default);
130
+ --popover: var(--pxd-color-surface-overlay);
131
+ --popover-foreground: var(--pxd-color-text-default);
132
+ --primary: var(--pxd-color-action-primary-background);
133
+ --primary-foreground: var(--pxd-color-action-primary-foreground);
134
+ --secondary: var(--pxd-color-action-secondary-background);
135
+ --secondary-foreground: var(--pxd-color-action-secondary-foreground);
136
+ --muted: var(--pxd-color-surface-subtle);
137
+ --muted-foreground: var(--pxd-color-text-muted);
138
+ --accent: var(--pxd-color-selection-background);
139
+ --accent-foreground: var(--pxd-color-selection-foreground);
140
+ --destructive: var(--pxd-color-action-danger-background);
141
+ --border: var(--pxd-color-border-default);
142
+ --input: var(--pxd-color-border-strong);
143
+ --ring: var(--pxd-color-border-focus);
144
+ --radius: var(--pxd-radius-default);
145
+ --chart-1: var(--pxd-color-data-categorical-1);
146
+ --chart-2: var(--pxd-color-data-categorical-2);
147
+ --chart-3: var(--pxd-color-data-categorical-3);
148
+ --chart-4: var(--pxd-color-data-categorical-4);
149
+ --chart-5: var(--pxd-color-data-categorical-5);
150
+ color-scheme: dark;
151
+ }
152
+
153
+ [data-pxd-theme="neon"][data-pxd-mode="light"] {
154
+ --pxd-color-surface-default: #f6f4ff;
155
+ --pxd-color-surface-subtle: #ece8fb;
156
+ --pxd-color-surface-raised: #ffffff;
157
+ --pxd-color-surface-overlay: #ffffff;
158
+ --pxd-color-surface-inverse: #14102a;
159
+ --pxd-color-scrim: rgba(20, 16, 42, 0.5);
160
+ --pxd-color-text-default: #16122b;
161
+ --pxd-color-text-muted: #5a5478;
162
+ --pxd-color-text-inverse: #f6f4ff;
163
+ --pxd-color-text-link: #b0138f;
164
+ --pxd-color-border-default: #d8d2f0;
165
+ --pxd-color-border-strong: #7d76a8;
166
+ --pxd-color-border-focus: #b0138f;
167
+ --pxd-color-action-primary-background: #b0138f;
168
+ --pxd-color-action-primary-foreground: #ffffff;
169
+ --pxd-color-action-secondary-background: #ffffff;
170
+ --pxd-color-action-secondary-foreground: #16122b;
171
+ --pxd-color-action-secondary-border: #b0138f;
172
+ --pxd-color-action-danger-background: #c8203f;
173
+ --pxd-color-action-danger-foreground: #ffffff;
174
+ --pxd-color-selection-background: #ffd6f5;
175
+ --pxd-color-selection-foreground: #6a0b57;
176
+ --pxd-color-status-info-background: #dff4fb;
177
+ --pxd-color-status-info-foreground: #0b4a5c;
178
+ --pxd-color-status-info-emphasis: #0e8aa8;
179
+ --pxd-color-status-success-background: #dcf7ea;
180
+ --pxd-color-status-success-foreground: #0f5a3a;
181
+ --pxd-color-status-success-emphasis: #12915a;
182
+ --pxd-color-status-warning-background: #fff3c4;
183
+ --pxd-color-status-warning-foreground: #5c4600;
184
+ --pxd-color-status-warning-emphasis: #a07800;
185
+ --pxd-color-status-danger-background: #ffe0e6;
186
+ --pxd-color-status-danger-foreground: #7a1028;
187
+ --pxd-color-status-danger-emphasis: #c8203f;
188
+ --pxd-color-data-categorical-1: #b0138f;
189
+ --pxd-color-data-categorical-2: #0e8aa8;
190
+ --pxd-color-data-categorical-3: #12915a;
191
+ --pxd-color-data-categorical-4: #a07800;
192
+ --pxd-color-data-categorical-5: #6a3ad9;
193
+ --pxd-color-data-categorical-6: #d4551c;
194
+ --pxd-color-data-positive: #12915a;
195
+ --pxd-color-data-negative: #c8203f;
196
+ --pxd-color-data-neutral: #7d76a8;
197
+ --pxd-type-title-page-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
198
+ --pxd-type-title-page-size: 34px;
199
+ --pxd-type-title-page-weight: 700;
200
+ --pxd-type-title-page-line-height: 1.1;
201
+ --pxd-type-title-page-letter-spacing: -0.8px;
202
+ --pxd-type-title-section-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
203
+ --pxd-type-title-section-size: 24px;
204
+ --pxd-type-title-section-weight: 700;
205
+ --pxd-type-title-section-line-height: 1.2;
206
+ --pxd-type-title-section-letter-spacing: -0.4px;
207
+ --pxd-type-title-item-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
208
+ --pxd-type-title-item-size: 18px;
209
+ --pxd-type-title-item-weight: 600;
210
+ --pxd-type-title-item-line-height: 1.3;
211
+ --pxd-type-title-item-letter-spacing: 0px;
212
+ --pxd-type-body-default-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
213
+ --pxd-type-body-default-size: 16px;
214
+ --pxd-type-body-default-weight: 400;
215
+ --pxd-type-body-default-line-height: 1.5;
216
+ --pxd-type-body-default-letter-spacing: 0px;
217
+ --pxd-type-body-small-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
218
+ --pxd-type-body-small-size: 14px;
219
+ --pxd-type-body-small-weight: 400;
220
+ --pxd-type-body-small-line-height: 1.5;
221
+ --pxd-type-body-small-letter-spacing: 0px;
222
+ --pxd-type-label-default-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
223
+ --pxd-type-label-default-size: 14px;
224
+ --pxd-type-label-default-weight: 600;
225
+ --pxd-type-label-default-line-height: 1.4;
226
+ --pxd-type-label-default-letter-spacing: 0.6px;
227
+ --pxd-type-label-small-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
228
+ --pxd-type-label-small-size: 12px;
229
+ --pxd-type-label-small-weight: 600;
230
+ --pxd-type-label-small-line-height: 1.4;
231
+ --pxd-type-label-small-letter-spacing: 1px;
232
+ --pxd-type-numeric-display-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
233
+ --pxd-type-numeric-display-size: 36px;
234
+ --pxd-type-numeric-display-weight: 700;
235
+ --pxd-type-numeric-display-line-height: 1.05;
236
+ --pxd-type-numeric-display-letter-spacing: -0.8px;
237
+ --pxd-space-inset-compact: 8px;
238
+ --pxd-space-inset-default: 16px;
239
+ --pxd-space-inset-comfortable: 24px;
240
+ --pxd-space-stack-tight: 4px;
241
+ --pxd-space-stack-default: 8px;
242
+ --pxd-space-stack-loose: 16px;
243
+ --pxd-space-stack-section: 36px;
244
+ --pxd-space-inline-tight: 4px;
245
+ --pxd-space-inline-default: 8px;
246
+ --pxd-space-inline-loose: 16px;
247
+ --pxd-size-target-min: 44px;
248
+ --pxd-size-icon-small: 16px;
249
+ --pxd-size-icon-default: 20px;
250
+ --pxd-radius-small: 8px;
251
+ --pxd-radius-control: 12px;
252
+ --pxd-radius-default: 12px;
253
+ --pxd-radius-large: 16px;
254
+ --pxd-radius-full: 999px;
255
+ --pxd-border-width-default: 1px;
256
+ --pxd-border-width-strong: 2px;
257
+ --pxd-focus-ring-width: 2px;
258
+ --pxd-focus-ring-offset: 2px;
259
+ --pxd-measure-max: 65;
260
+ --pxd-opacity-state-hover: 0.1;
261
+ --pxd-opacity-state-pressed: 0.18;
262
+ --pxd-opacity-state-focus: 0.18;
263
+ --pxd-opacity-state-disabled: 0.4;
264
+ --pxd-shadow-raised: 0px 4px 20px 0px rgba(176, 19, 143, 0.15);
265
+ --pxd-shadow-overlay: 0px 16px 48px 0px rgba(176, 19, 143, 0.28);
266
+ --pxd-motion-duration-instant: 60ms;
267
+ --pxd-motion-duration-short: 140ms;
268
+ --pxd-motion-duration-medium: 220ms;
269
+ --pxd-motion-duration-long: 320ms;
270
+ --pxd-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
271
+ --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
272
+ --pxd-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
273
+
274
+ /* shadcn/ui variable names, so shadcn components follow this pack too */
275
+ --background: var(--pxd-color-surface-default);
276
+ --foreground: var(--pxd-color-text-default);
277
+ --card: var(--pxd-color-surface-raised);
278
+ --card-foreground: var(--pxd-color-text-default);
279
+ --popover: var(--pxd-color-surface-overlay);
280
+ --popover-foreground: var(--pxd-color-text-default);
281
+ --primary: var(--pxd-color-action-primary-background);
282
+ --primary-foreground: var(--pxd-color-action-primary-foreground);
283
+ --secondary: var(--pxd-color-action-secondary-background);
284
+ --secondary-foreground: var(--pxd-color-action-secondary-foreground);
285
+ --muted: var(--pxd-color-surface-subtle);
286
+ --muted-foreground: var(--pxd-color-text-muted);
287
+ --accent: var(--pxd-color-selection-background);
288
+ --accent-foreground: var(--pxd-color-selection-foreground);
289
+ --destructive: var(--pxd-color-action-danger-background);
290
+ --border: var(--pxd-color-border-default);
291
+ --input: var(--pxd-color-border-strong);
292
+ --ring: var(--pxd-color-border-focus);
293
+ --radius: var(--pxd-radius-default);
294
+ --chart-1: var(--pxd-color-data-categorical-1);
295
+ --chart-2: var(--pxd-color-data-categorical-2);
296
+ --chart-3: var(--pxd-color-data-categorical-3);
297
+ --chart-4: var(--pxd-color-data-categorical-4);
298
+ --chart-5: var(--pxd-color-data-categorical-5);
299
+ color-scheme: light;
300
+ }