@polyxd/react 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 (63) hide show
  1. package/LICENSE +202 -0
  2. package/NOTICE +177 -0
  3. package/README.md +39 -0
  4. package/dist/components/avatar.d.ts +10 -0
  5. package/dist/components/avatar.js +47 -0
  6. package/dist/components/avatar.js.map +1 -0
  7. package/dist/components/chart.d.ts +5 -0
  8. package/dist/components/chart.js +98 -0
  9. package/dist/components/chart.js.map +1 -0
  10. package/dist/components/content.d.ts +23 -0
  11. package/dist/components/content.js +108 -0
  12. package/dist/components/content.js.map +1 -0
  13. package/dist/components/filter.d.ts +9 -0
  14. package/dist/components/filter.js +97 -0
  15. package/dist/components/filter.js.map +1 -0
  16. package/dist/components/flow.d.ts +22 -0
  17. package/dist/components/flow.js +143 -0
  18. package/dist/components/flow.js.map +1 -0
  19. package/dist/components/index.d.ts +10 -0
  20. package/dist/components/index.js +19 -0
  21. package/dist/components/index.js.map +1 -0
  22. package/dist/components/inputs.d.ts +38 -0
  23. package/dist/components/inputs.js +230 -0
  24. package/dist/components/inputs.js.map +1 -0
  25. package/dist/components/navigation.d.ts +8 -0
  26. package/dist/components/navigation.js +51 -0
  27. package/dist/components/navigation.js.map +1 -0
  28. package/dist/components/structure.d.ts +25 -0
  29. package/dist/components/structure.js +58 -0
  30. package/dist/components/structure.js.map +1 -0
  31. package/dist/components/table.d.ts +9 -0
  32. package/dist/components/table.js +144 -0
  33. package/dist/components/table.js.map +1 -0
  34. package/dist/context.d.ts +93 -0
  35. package/dist/context.js +42 -0
  36. package/dist/context.js.map +1 -0
  37. package/dist/data.d.ts +26 -0
  38. package/dist/data.js +52 -0
  39. package/dist/data.js.map +1 -0
  40. package/dist/format.d.ts +12 -0
  41. package/dist/format.js +51 -0
  42. package/dist/format.js.map +1 -0
  43. package/dist/index.d.ts +5 -0
  44. package/dist/index.js +6 -0
  45. package/dist/index.js.map +1 -0
  46. package/dist/surface.d.ts +37 -0
  47. package/dist/surface.js +80 -0
  48. package/dist/surface.js.map +1 -0
  49. package/package.json +53 -0
  50. package/src/styles.css +2182 -0
  51. package/themes/antd.css +300 -0
  52. package/themes/bootstrap.css +300 -0
  53. package/themes/carbon.css +310 -0
  54. package/themes/chakra.css +300 -0
  55. package/themes/fluent.css +300 -0
  56. package/themes/govuk.css +150 -0
  57. package/themes/mantine.css +300 -0
  58. package/themes/material3.css +300 -0
  59. package/themes/polaris.css +300 -0
  60. package/themes/primer.css +300 -0
  61. package/themes/radix.css +300 -0
  62. package/themes/shadcn.css +300 -0
  63. package/themes/spectrum.css +300 -0
package/themes/carbon.css ADDED
@@ -0,0 +1,310 @@
1
+ /* Generated by @polyxd/react scripts/build-themes.ts from the carbon pack. Do not edit. */
2
+
3
+ [data-pxd-theme="carbon"]:not([data-pxd-mode]),
4
+ [data-pxd-theme="carbon"][data-pxd-mode="light"] {
5
+ --pxd-color-surface-default: #ffffff;
6
+ --pxd-color-surface-subtle: #e0e0e0;
7
+ --pxd-color-surface-raised: #f4f4f4;
8
+ --pxd-color-surface-overlay: #f4f4f4;
9
+ --pxd-color-surface-inverse: #393939;
10
+ --pxd-color-scrim: rgb(0 0 0 / 0.6);
11
+ --pxd-color-text-default: #161616;
12
+ --pxd-color-text-muted: #525252;
13
+ --pxd-color-text-inverse: #ffffff;
14
+ --pxd-color-text-link: #0f62fe;
15
+ --pxd-color-border-default: #c6c6c6;
16
+ --pxd-color-border-strong: #8d8d8d;
17
+ --pxd-color-border-focus: #0f62fe;
18
+ --pxd-color-action-primary-background: #0f62fe;
19
+ --pxd-color-action-primary-foreground: #ffffff;
20
+ --pxd-color-action-secondary-background: #393939;
21
+ --pxd-color-action-secondary-foreground: #ffffff;
22
+ --pxd-color-action-secondary-border: #393939;
23
+ --pxd-color-action-danger-background: #da1e28;
24
+ --pxd-color-action-danger-foreground: #ffffff;
25
+ --pxd-color-selection-background: #e0e0e0;
26
+ --pxd-color-selection-foreground: #161616;
27
+ --pxd-color-status-info-background: #edf5ff;
28
+ --pxd-color-status-info-foreground: #161616;
29
+ --pxd-color-status-info-emphasis: #0043ce;
30
+ --pxd-color-status-success-background: #defbe6;
31
+ --pxd-color-status-success-foreground: #161616;
32
+ --pxd-color-status-success-emphasis: #24a148;
33
+ --pxd-color-status-warning-background: #fcf4d6;
34
+ --pxd-color-status-warning-foreground: #161616;
35
+ --pxd-color-status-warning-emphasis: #8e6a00;
36
+ --pxd-color-status-danger-background: #fff1f1;
37
+ --pxd-color-status-danger-foreground: #161616;
38
+ --pxd-color-status-danger-emphasis: #da1e28;
39
+ --pxd-color-data-categorical-1: #6929c4;
40
+ --pxd-color-data-categorical-2: #1192e8;
41
+ --pxd-color-data-categorical-3: #005d5d;
42
+ --pxd-color-data-categorical-4: #9f1853;
43
+ --pxd-color-data-categorical-5: #fa4d56;
44
+ --pxd-color-data-categorical-6: #520408;
45
+ --pxd-color-data-positive: #24a148;
46
+ --pxd-color-data-negative: #da1e28;
47
+ --pxd-color-data-neutral: #6f6f6f;
48
+ --pxd-type-title-page-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
49
+ --pxd-type-title-page-size: 32px;
50
+ --pxd-type-title-page-weight: 400;
51
+ --pxd-type-title-page-line-height: 1.25;
52
+ --pxd-type-title-page-letter-spacing: 0px;
53
+ --pxd-type-title-section-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
54
+ --pxd-type-title-section-size: 20px;
55
+ --pxd-type-title-section-weight: 400;
56
+ --pxd-type-title-section-line-height: 1.4;
57
+ --pxd-type-title-section-letter-spacing: 0px;
58
+ --pxd-type-title-item-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
59
+ --pxd-type-title-item-size: 16px;
60
+ --pxd-type-title-item-weight: 600;
61
+ --pxd-type-title-item-line-height: 1.5;
62
+ --pxd-type-title-item-letter-spacing: 0px;
63
+ --pxd-type-body-default-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", 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: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
69
+ --pxd-type-body-small-size: 14px;
70
+ --pxd-type-body-small-weight: 400;
71
+ --pxd-type-body-small-line-height: 1.42857;
72
+ --pxd-type-body-small-letter-spacing: 0.16px;
73
+ --pxd-type-label-default-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
74
+ --pxd-type-label-default-size: 14px;
75
+ --pxd-type-label-default-weight: 400;
76
+ --pxd-type-label-default-line-height: 1.28572;
77
+ --pxd-type-label-default-letter-spacing: 0.16px;
78
+ --pxd-type-label-small-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
79
+ --pxd-type-label-small-size: 12px;
80
+ --pxd-type-label-small-weight: 400;
81
+ --pxd-type-label-small-line-height: 1.33333;
82
+ --pxd-type-label-small-letter-spacing: 0.32px;
83
+ --pxd-type-numeric-display-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
84
+ --pxd-type-numeric-display-size: 42px;
85
+ --pxd-type-numeric-display-weight: 300;
86
+ --pxd-type-numeric-display-line-height: 1.199;
87
+ --pxd-type-numeric-display-letter-spacing: 0px;
88
+ --pxd-space-inset-compact: 8px;
89
+ --pxd-space-inset-default: 16px;
90
+ --pxd-space-inset-comfortable: 24px;
91
+ --pxd-space-stack-tight: 8px;
92
+ --pxd-space-stack-default: 16px;
93
+ --pxd-space-stack-loose: 32px;
94
+ --pxd-space-stack-section: 48px;
95
+ --pxd-space-inline-tight: 4px;
96
+ --pxd-space-inline-default: 8px;
97
+ --pxd-space-inline-loose: 16px;
98
+ --pxd-size-target-min: 48px;
99
+ --pxd-size-icon-small: 16px;
100
+ --pxd-size-icon-default: 20px;
101
+ --pxd-radius-small: 0px;
102
+ --pxd-radius-control: 0px;
103
+ --pxd-radius-default: 0px;
104
+ --pxd-radius-large: 0px;
105
+ --pxd-radius-full: 999999px;
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.12;
112
+ --pxd-opacity-state-pressed: 0.5;
113
+ --pxd-opacity-state-focus: 0.12;
114
+ --pxd-opacity-state-disabled: 0.3;
115
+ --pxd-shadow-raised: 0px 0px 0px 0px rgb(0 0 0 / 0);
116
+ --pxd-shadow-overlay: 0px 2px 6px 0px rgb(0 0 0 / 0.3);
117
+ --pxd-motion-duration-instant: 70ms;
118
+ --pxd-motion-duration-short: 110ms;
119
+ --pxd-motion-duration-medium: 240ms;
120
+ --pxd-motion-duration-long: 400ms;
121
+ --pxd-motion-easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
122
+ --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.38, 0.9);
123
+ --pxd-motion-easing-exit: cubic-bezier(0.2, 0, 1, 0.9);
124
+
125
+ /* Layout this system's components differ on, which tokens can't express (see the manifest) */
126
+ --pxd-layout-action-gap: 1px;
127
+ --pxd-layout-action-item: 1 1 0;
128
+ --pxd-layout-action-bleed: var(--pxd-space-stack-default) calc(-1 * var(--pxd-space-inset-comfortable)) calc(-1 * var(--pxd-space-inset-comfortable));
129
+
130
+ /* shadcn/ui variable names, so shadcn components follow this pack too */
131
+ --background: var(--pxd-color-surface-default);
132
+ --foreground: var(--pxd-color-text-default);
133
+ --card: var(--pxd-color-surface-raised);
134
+ --card-foreground: var(--pxd-color-text-default);
135
+ --popover: var(--pxd-color-surface-overlay);
136
+ --popover-foreground: var(--pxd-color-text-default);
137
+ --primary: var(--pxd-color-action-primary-background);
138
+ --primary-foreground: var(--pxd-color-action-primary-foreground);
139
+ --secondary: var(--pxd-color-action-secondary-background);
140
+ --secondary-foreground: var(--pxd-color-action-secondary-foreground);
141
+ --muted: var(--pxd-color-surface-subtle);
142
+ --muted-foreground: var(--pxd-color-text-muted);
143
+ --accent: var(--pxd-color-selection-background);
144
+ --accent-foreground: var(--pxd-color-selection-foreground);
145
+ --destructive: var(--pxd-color-action-danger-background);
146
+ --border: var(--pxd-color-border-default);
147
+ --input: var(--pxd-color-border-strong);
148
+ --ring: var(--pxd-color-border-focus);
149
+ --radius: var(--pxd-radius-default);
150
+ --chart-1: var(--pxd-color-data-categorical-1);
151
+ --chart-2: var(--pxd-color-data-categorical-2);
152
+ --chart-3: var(--pxd-color-data-categorical-3);
153
+ --chart-4: var(--pxd-color-data-categorical-4);
154
+ --chart-5: var(--pxd-color-data-categorical-5);
155
+ color-scheme: light;
156
+ }
157
+
158
+ [data-pxd-theme="carbon"][data-pxd-mode="dark"] {
159
+ --pxd-color-surface-default: #161616;
160
+ --pxd-color-surface-subtle: #393939;
161
+ --pxd-color-surface-raised: #262626;
162
+ --pxd-color-surface-overlay: #262626;
163
+ --pxd-color-surface-inverse: #f4f4f4;
164
+ --pxd-color-scrim: rgb(0 0 0 / 0.6);
165
+ --pxd-color-text-default: #f4f4f4;
166
+ --pxd-color-text-muted: #c6c6c6;
167
+ --pxd-color-text-inverse: #161616;
168
+ --pxd-color-text-link: #78a9ff;
169
+ --pxd-color-border-default: #525252;
170
+ --pxd-color-border-strong: #6f6f6f;
171
+ --pxd-color-border-focus: #ffffff;
172
+ --pxd-color-action-primary-background: #0f62fe;
173
+ --pxd-color-action-primary-foreground: #ffffff;
174
+ --pxd-color-action-secondary-background: #6f6f6f;
175
+ --pxd-color-action-secondary-foreground: #ffffff;
176
+ --pxd-color-action-secondary-border: #6f6f6f;
177
+ --pxd-color-action-danger-background: #da1e28;
178
+ --pxd-color-action-danger-foreground: #ffffff;
179
+ --pxd-color-selection-background: #393939;
180
+ --pxd-color-selection-foreground: #f4f4f4;
181
+ --pxd-color-status-info-background: #262626;
182
+ --pxd-color-status-info-foreground: #f4f4f4;
183
+ --pxd-color-status-info-emphasis: #4589ff;
184
+ --pxd-color-status-success-background: #262626;
185
+ --pxd-color-status-success-foreground: #f4f4f4;
186
+ --pxd-color-status-success-emphasis: #42be65;
187
+ --pxd-color-status-warning-background: #262626;
188
+ --pxd-color-status-warning-foreground: #f4f4f4;
189
+ --pxd-color-status-warning-emphasis: #f1c21b;
190
+ --pxd-color-status-danger-background: #262626;
191
+ --pxd-color-status-danger-foreground: #f4f4f4;
192
+ --pxd-color-status-danger-emphasis: #fa4d56;
193
+ --pxd-color-data-categorical-1: #8a3ffc;
194
+ --pxd-color-data-categorical-2: #33b1ff;
195
+ --pxd-color-data-categorical-3: #007d79;
196
+ --pxd-color-data-categorical-4: #ff7eb6;
197
+ --pxd-color-data-categorical-5: #fa4d56;
198
+ --pxd-color-data-categorical-6: #fff1f1;
199
+ --pxd-color-data-positive: #42be65;
200
+ --pxd-color-data-negative: #fa4d56;
201
+ --pxd-color-data-neutral: #8d8d8d;
202
+ --pxd-type-title-page-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
203
+ --pxd-type-title-page-size: 32px;
204
+ --pxd-type-title-page-weight: 400;
205
+ --pxd-type-title-page-line-height: 1.25;
206
+ --pxd-type-title-page-letter-spacing: 0px;
207
+ --pxd-type-title-section-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
208
+ --pxd-type-title-section-size: 20px;
209
+ --pxd-type-title-section-weight: 400;
210
+ --pxd-type-title-section-line-height: 1.4;
211
+ --pxd-type-title-section-letter-spacing: 0px;
212
+ --pxd-type-title-item-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
213
+ --pxd-type-title-item-size: 16px;
214
+ --pxd-type-title-item-weight: 600;
215
+ --pxd-type-title-item-line-height: 1.5;
216
+ --pxd-type-title-item-letter-spacing: 0px;
217
+ --pxd-type-body-default-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
218
+ --pxd-type-body-default-size: 16px;
219
+ --pxd-type-body-default-weight: 400;
220
+ --pxd-type-body-default-line-height: 1.5;
221
+ --pxd-type-body-default-letter-spacing: 0px;
222
+ --pxd-type-body-small-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
223
+ --pxd-type-body-small-size: 14px;
224
+ --pxd-type-body-small-weight: 400;
225
+ --pxd-type-body-small-line-height: 1.42857;
226
+ --pxd-type-body-small-letter-spacing: 0.16px;
227
+ --pxd-type-label-default-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
228
+ --pxd-type-label-default-size: 14px;
229
+ --pxd-type-label-default-weight: 400;
230
+ --pxd-type-label-default-line-height: 1.28572;
231
+ --pxd-type-label-default-letter-spacing: 0.16px;
232
+ --pxd-type-label-small-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
233
+ --pxd-type-label-small-size: 12px;
234
+ --pxd-type-label-small-weight: 400;
235
+ --pxd-type-label-small-line-height: 1.33333;
236
+ --pxd-type-label-small-letter-spacing: 0.32px;
237
+ --pxd-type-numeric-display-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
238
+ --pxd-type-numeric-display-size: 42px;
239
+ --pxd-type-numeric-display-weight: 300;
240
+ --pxd-type-numeric-display-line-height: 1.199;
241
+ --pxd-type-numeric-display-letter-spacing: 0px;
242
+ --pxd-space-inset-compact: 8px;
243
+ --pxd-space-inset-default: 16px;
244
+ --pxd-space-inset-comfortable: 24px;
245
+ --pxd-space-stack-tight: 8px;
246
+ --pxd-space-stack-default: 16px;
247
+ --pxd-space-stack-loose: 32px;
248
+ --pxd-space-stack-section: 48px;
249
+ --pxd-space-inline-tight: 4px;
250
+ --pxd-space-inline-default: 8px;
251
+ --pxd-space-inline-loose: 16px;
252
+ --pxd-size-target-min: 48px;
253
+ --pxd-size-icon-small: 16px;
254
+ --pxd-size-icon-default: 20px;
255
+ --pxd-radius-small: 0px;
256
+ --pxd-radius-control: 0px;
257
+ --pxd-radius-default: 0px;
258
+ --pxd-radius-large: 0px;
259
+ --pxd-radius-full: 999999px;
260
+ --pxd-border-width-default: 1px;
261
+ --pxd-border-width-strong: 2px;
262
+ --pxd-focus-ring-width: 2px;
263
+ --pxd-focus-ring-offset: -2px;
264
+ --pxd-measure-max: 65;
265
+ --pxd-opacity-state-hover: 0.16;
266
+ --pxd-opacity-state-pressed: 0.4;
267
+ --pxd-opacity-state-focus: 0.16;
268
+ --pxd-opacity-state-disabled: 0.3;
269
+ --pxd-shadow-raised: 0px 0px 0px 0px rgb(0 0 0 / 0);
270
+ --pxd-shadow-overlay: 0px 2px 6px 0px rgb(0 0 0 / 0.8);
271
+ --pxd-motion-duration-instant: 70ms;
272
+ --pxd-motion-duration-short: 110ms;
273
+ --pxd-motion-duration-medium: 240ms;
274
+ --pxd-motion-duration-long: 400ms;
275
+ --pxd-motion-easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
276
+ --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.38, 0.9);
277
+ --pxd-motion-easing-exit: cubic-bezier(0.2, 0, 1, 0.9);
278
+
279
+ /* Layout this system's components differ on, which tokens can't express (see the manifest) */
280
+ --pxd-layout-action-gap: 1px;
281
+ --pxd-layout-action-item: 1 1 0;
282
+ --pxd-layout-action-bleed: var(--pxd-space-stack-default) calc(-1 * var(--pxd-space-inset-comfortable)) calc(-1 * var(--pxd-space-inset-comfortable));
283
+
284
+ /* shadcn/ui variable names, so shadcn components follow this pack too */
285
+ --background: var(--pxd-color-surface-default);
286
+ --foreground: var(--pxd-color-text-default);
287
+ --card: var(--pxd-color-surface-raised);
288
+ --card-foreground: var(--pxd-color-text-default);
289
+ --popover: var(--pxd-color-surface-overlay);
290
+ --popover-foreground: var(--pxd-color-text-default);
291
+ --primary: var(--pxd-color-action-primary-background);
292
+ --primary-foreground: var(--pxd-color-action-primary-foreground);
293
+ --secondary: var(--pxd-color-action-secondary-background);
294
+ --secondary-foreground: var(--pxd-color-action-secondary-foreground);
295
+ --muted: var(--pxd-color-surface-subtle);
296
+ --muted-foreground: var(--pxd-color-text-muted);
297
+ --accent: var(--pxd-color-selection-background);
298
+ --accent-foreground: var(--pxd-color-selection-foreground);
299
+ --destructive: var(--pxd-color-action-danger-background);
300
+ --border: var(--pxd-color-border-default);
301
+ --input: var(--pxd-color-border-strong);
302
+ --ring: var(--pxd-color-border-focus);
303
+ --radius: var(--pxd-radius-default);
304
+ --chart-1: var(--pxd-color-data-categorical-1);
305
+ --chart-2: var(--pxd-color-data-categorical-2);
306
+ --chart-3: var(--pxd-color-data-categorical-3);
307
+ --chart-4: var(--pxd-color-data-categorical-4);
308
+ --chart-5: var(--pxd-color-data-categorical-5);
309
+ color-scheme: dark;
310
+ }
package/themes/chakra.css ADDED
@@ -0,0 +1,300 @@
1
+ /* Generated by @polyxd/react scripts/build-themes.ts from the chakra pack. Do not edit. */
2
+
3
+ [data-pxd-theme="chakra"]:not([data-pxd-mode]),
4
+ [data-pxd-theme="chakra"][data-pxd-mode="light"] {
5
+ --pxd-color-surface-default: #FFFFFF;
6
+ --pxd-color-surface-subtle: #fafafa;
7
+ --pxd-color-surface-raised: #FFFFFF;
8
+ --pxd-color-surface-overlay: #FFFFFF;
9
+ --pxd-color-surface-inverse: #09090B;
10
+ --pxd-color-scrim: rgba(0, 0, 0, 0.48);
11
+ --pxd-color-text-default: #09090B;
12
+ --pxd-color-text-muted: #52525b;
13
+ --pxd-color-text-inverse: #fafafa;
14
+ --pxd-color-text-link: #2563eb;
15
+ --pxd-color-border-default: #e4e4e7;
16
+ --pxd-color-border-strong: #71717a;
17
+ --pxd-color-border-focus: #71717a;
18
+ --pxd-color-action-primary-background: #52525b;
19
+ --pxd-color-action-primary-foreground: #fafafa;
20
+ --pxd-color-action-secondary-background: #fafafa;
21
+ --pxd-color-action-secondary-foreground: #09090B;
22
+ --pxd-color-action-secondary-border: #e4e4e7;
23
+ --pxd-color-action-danger-background: #dc2626;
24
+ --pxd-color-action-danger-foreground: #fafafa;
25
+ --pxd-color-selection-background: #eff6ff;
26
+ --pxd-color-selection-foreground: #2563eb;
27
+ --pxd-color-status-info-background: #eff6ff;
28
+ --pxd-color-status-info-foreground: #2563eb;
29
+ --pxd-color-status-info-emphasis: #3b82f6;
30
+ --pxd-color-status-success-background: #f0fdf4;
31
+ --pxd-color-status-success-foreground: #116932;
32
+ --pxd-color-status-success-emphasis: #16a34a;
33
+ --pxd-color-status-warning-background: #fff7ed;
34
+ --pxd-color-status-warning-foreground: #92310a;
35
+ --pxd-color-status-warning-emphasis: #ea580c;
36
+ --pxd-color-status-danger-background: #fef2f2;
37
+ --pxd-color-status-danger-foreground: #991919;
38
+ --pxd-color-status-danger-emphasis: #ef4444;
39
+ --pxd-color-data-categorical-1: #3b82f6;
40
+ --pxd-color-data-categorical-2: #16a34a;
41
+ --pxd-color-data-categorical-3: #a855f7;
42
+ --pxd-color-data-categorical-4: #ea580c;
43
+ --pxd-color-data-categorical-5: #ec4899;
44
+ --pxd-color-data-categorical-6: #0d9488;
45
+ --pxd-color-data-positive: #16a34a;
46
+ --pxd-color-data-negative: #ef4444;
47
+ --pxd-color-data-neutral: #71717a;
48
+ --pxd-type-title-page-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
49
+ --pxd-type-title-page-size: 24px;
50
+ --pxd-type-title-page-weight: 700;
51
+ --pxd-type-title-page-line-height: 1.25;
52
+ --pxd-type-title-page-letter-spacing: 0px;
53
+ --pxd-type-title-section-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
54
+ --pxd-type-title-section-size: 20px;
55
+ --pxd-type-title-section-weight: 600;
56
+ --pxd-type-title-section-line-height: 1.375;
57
+ --pxd-type-title-section-letter-spacing: 0px;
58
+ --pxd-type-title-item-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
59
+ --pxd-type-title-item-size: 16px;
60
+ --pxd-type-title-item-weight: 600;
61
+ --pxd-type-title-item-line-height: 1.375;
62
+ --pxd-type-title-item-letter-spacing: 0px;
63
+ --pxd-type-body-default-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
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: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
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: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
74
+ --pxd-type-label-default-size: 14px;
75
+ --pxd-type-label-default-weight: 500;
76
+ --pxd-type-label-default-line-height: 1.375;
77
+ --pxd-type-label-default-letter-spacing: 0px;
78
+ --pxd-type-label-small-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
79
+ --pxd-type-label-small-size: 12px;
80
+ --pxd-type-label-small-weight: 500;
81
+ --pxd-type-label-small-line-height: 1.375;
82
+ --pxd-type-label-small-letter-spacing: 0px;
83
+ --pxd-type-numeric-display-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
84
+ --pxd-type-numeric-display-size: 24px;
85
+ --pxd-type-numeric-display-weight: 700;
86
+ --pxd-type-numeric-display-line-height: 1.25;
87
+ --pxd-type-numeric-display-letter-spacing: 0px;
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: 14px;
100
+ --pxd-size-icon-default: 18px;
101
+ --pxd-radius-small: 4px;
102
+ --pxd-radius-control: 4px;
103
+ --pxd-radius-default: 6px;
104
+ --pxd-radius-large: 8px;
105
+ --pxd-radius-full: 9999px;
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.5;
115
+ --pxd-shadow-raised: 0px 2px 4px 0px color-mix(in srgb, #18181b 10%, transparent), 0px 0px 1px 0px color-mix(in srgb, #18181b 30%, transparent);
116
+ --pxd-shadow-overlay: 0px 8px 16px 0px color-mix(in srgb, #18181b 10%, transparent), 0px 0px 1px 0px color-mix(in srgb, #18181b 30%, transparent);
117
+ --pxd-motion-duration-instant: 50ms;
118
+ --pxd-motion-duration-short: 150ms;
119
+ --pxd-motion-duration-medium: 200ms;
120
+ --pxd-motion-duration-long: 300ms;
121
+ --pxd-motion-easing-standard: cubic-bezier(0.42, 0, 0.58, 1);
122
+ --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.58, 1);
123
+ --pxd-motion-easing-exit: cubic-bezier(0.42, 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="chakra"][data-pxd-mode="dark"] {
154
+ --pxd-color-surface-default: #09090B;
155
+ --pxd-color-surface-subtle: #111111;
156
+ --pxd-color-surface-raised: #111111;
157
+ --pxd-color-surface-overlay: #111111;
158
+ --pxd-color-surface-inverse: #FFFFFF;
159
+ --pxd-color-scrim: rgba(0, 0, 0, 0.48);
160
+ --pxd-color-text-default: #fafafa;
161
+ --pxd-color-text-muted: #a1a1aa;
162
+ --pxd-color-text-inverse: #09090B;
163
+ --pxd-color-text-link: #60a5fa;
164
+ --pxd-color-border-default: #27272a;
165
+ --pxd-color-border-strong: #71717a;
166
+ --pxd-color-border-focus: #71717a;
167
+ --pxd-color-action-primary-background: #a1a1aa;
168
+ --pxd-color-action-primary-foreground: #09090B;
169
+ --pxd-color-action-secondary-background: #111111;
170
+ --pxd-color-action-secondary-foreground: #fafafa;
171
+ --pxd-color-action-secondary-border: #27272a;
172
+ --pxd-color-action-danger-background: #f87171;
173
+ --pxd-color-action-danger-foreground: #09090B;
174
+ --pxd-color-selection-background: #0c142e;
175
+ --pxd-color-selection-foreground: #a3cfff;
176
+ --pxd-color-status-info-background: #0c142e;
177
+ --pxd-color-status-info-foreground: #a3cfff;
178
+ --pxd-color-status-info-emphasis: #60a5fa;
179
+ --pxd-color-status-success-background: #03190c;
180
+ --pxd-color-status-success-foreground: #86efac;
181
+ --pxd-color-status-success-emphasis: #4ade80;
182
+ --pxd-color-status-warning-background: #220a04;
183
+ --pxd-color-status-warning-foreground: #fdba74;
184
+ --pxd-color-status-warning-emphasis: #fb923c;
185
+ --pxd-color-status-danger-background: #1f0808;
186
+ --pxd-color-status-danger-foreground: #fca5a5;
187
+ --pxd-color-status-danger-emphasis: #f87171;
188
+ --pxd-color-data-categorical-1: #60a5fa;
189
+ --pxd-color-data-categorical-2: #4ade80;
190
+ --pxd-color-data-categorical-3: #c084fc;
191
+ --pxd-color-data-categorical-4: #fb923c;
192
+ --pxd-color-data-categorical-5: #f472b6;
193
+ --pxd-color-data-categorical-6: #2dd4bf;
194
+ --pxd-color-data-positive: #4ade80;
195
+ --pxd-color-data-negative: #f87171;
196
+ --pxd-color-data-neutral: #a1a1aa;
197
+ --pxd-type-title-page-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
198
+ --pxd-type-title-page-size: 24px;
199
+ --pxd-type-title-page-weight: 700;
200
+ --pxd-type-title-page-line-height: 1.25;
201
+ --pxd-type-title-page-letter-spacing: 0px;
202
+ --pxd-type-title-section-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
203
+ --pxd-type-title-section-size: 20px;
204
+ --pxd-type-title-section-weight: 600;
205
+ --pxd-type-title-section-line-height: 1.375;
206
+ --pxd-type-title-section-letter-spacing: 0px;
207
+ --pxd-type-title-item-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
208
+ --pxd-type-title-item-size: 16px;
209
+ --pxd-type-title-item-weight: 600;
210
+ --pxd-type-title-item-line-height: 1.375;
211
+ --pxd-type-title-item-letter-spacing: 0px;
212
+ --pxd-type-body-default-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
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: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
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: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
223
+ --pxd-type-label-default-size: 14px;
224
+ --pxd-type-label-default-weight: 500;
225
+ --pxd-type-label-default-line-height: 1.375;
226
+ --pxd-type-label-default-letter-spacing: 0px;
227
+ --pxd-type-label-small-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
228
+ --pxd-type-label-small-size: 12px;
229
+ --pxd-type-label-small-weight: 500;
230
+ --pxd-type-label-small-line-height: 1.375;
231
+ --pxd-type-label-small-letter-spacing: 0px;
232
+ --pxd-type-numeric-display-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
233
+ --pxd-type-numeric-display-size: 24px;
234
+ --pxd-type-numeric-display-weight: 700;
235
+ --pxd-type-numeric-display-line-height: 1.25;
236
+ --pxd-type-numeric-display-letter-spacing: 0px;
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: 14px;
249
+ --pxd-size-icon-default: 18px;
250
+ --pxd-radius-small: 4px;
251
+ --pxd-radius-control: 4px;
252
+ --pxd-radius-default: 6px;
253
+ --pxd-radius-large: 8px;
254
+ --pxd-radius-full: 9999px;
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.5;
264
+ --pxd-shadow-raised: 0px 2px 4px 0px color-mix(in srgb, black 64%, transparent), inset 0px 0px 1px 0px color-mix(in srgb, #d4d4d8 30%, transparent);
265
+ --pxd-shadow-overlay: 0px 8px 16px 0px color-mix(in srgb, black 64%, transparent), inset 0px 0px 1px 0px color-mix(in srgb, #d4d4d8 30%, transparent);
266
+ --pxd-motion-duration-instant: 50ms;
267
+ --pxd-motion-duration-short: 150ms;
268
+ --pxd-motion-duration-medium: 200ms;
269
+ --pxd-motion-duration-long: 300ms;
270
+ --pxd-motion-easing-standard: cubic-bezier(0.42, 0, 0.58, 1);
271
+ --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.58, 1);
272
+ --pxd-motion-easing-exit: cubic-bezier(0.42, 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
+ }