@projectdiscoveryio/design-system 1.0.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 (13) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/LICENSE +21 -0
  3. package/README.md +841 -0
  4. package/dist/fallback.css +824 -0
  5. package/dist/index.cjs +1513 -0
  6. package/dist/index.cjs.map +1 -0
  7. package/dist/index.css +1332 -0
  8. package/dist/index.d.cts +1497 -0
  9. package/dist/index.d.ts +1497 -0
  10. package/dist/index.js +1439 -0
  11. package/dist/index.js.map +1 -0
  12. package/dist/styles.css +1301 -0
  13. package/package.json +152 -0
package/dist/index.css ADDED
@@ -0,0 +1,1332 @@
1
+ /* ✅ all tokens scoped under .pd-root */
2
+ /* This file is auto-generated from src/tokens/tokens.ts */
3
+ /* DO NOT EDIT MANUALLY - Run: npm run generate:tokens-css */
4
+ .pd-root {
5
+ /* Core shadcn-style tokens (HSL format) */
6
+ --pd-background: 0 0% 100%;
7
+ --pd-foreground: 240 10% 10%;
8
+
9
+ --pd-primary: 240 6% 40%;
10
+ --pd-primary-foreground: 0 0% 100%;
11
+
12
+ --pd-secondary: 0 0% 93%;
13
+ --pd-secondary-foreground: 240 10% 10%;
14
+
15
+ --pd-muted: 0 0% 93%;
16
+ --pd-muted-foreground: 240 2% 75%;
17
+
18
+ --pd-border: 240 2% 75%;
19
+ --pd-input: 240 2% 75%;
20
+ --pd-ring: 240 6% 40%;
21
+
22
+ --pd-radius: 0.375em;
23
+
24
+ /* Base tokens */
25
+ --pd-color-black: #09090B;
26
+ --pd-color-white: #FFFFFF;
27
+ --pd-font-mono: Geist Mono, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
28
+ --pd-font-sans: Geist, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
29
+ --pd-font-size-2xl: 1.5em;
30
+ --pd-font-size-3xl: 1.875em;
31
+ --pd-font-size-4xl: 2.25em;
32
+ --pd-font-size-5xl: 3em;
33
+ --pd-font-size-6xl: 3.75em;
34
+ --pd-font-size-7xl: 4.5em;
35
+ --pd-font-size-8xl: 6em;
36
+ --pd-font-size-9xl: 8em;
37
+ --pd-font-size-base: 1em;
38
+ --pd-font-size-lg: 1.125em;
39
+ --pd-font-size-sm: 0.875em;
40
+ --pd-font-size-xl: 1.25em;
41
+ --pd-font-size-xs: 0.75em;
42
+ --pd-font-weight-bold: 700;
43
+ --pd-font-weight-medium: 500;
44
+ --pd-font-weight-normal: 400;
45
+ --pd-font-weight-semibold: 600;
46
+ --pd-line-height-normal: 1.5;
47
+ --pd-line-height-relaxed: 1.75;
48
+ --pd-line-height-tight: 1.25;
49
+ --pd-letter-spacing-button: 0.00833em;
50
+ --pd-spacing-0: 0em;
51
+ --pd-spacing-10: 2.5em;
52
+ --pd-spacing-1: 0.25em;
53
+ --pd-spacing-2: 0.5em;
54
+ --pd-spacing-3: 0.75em;
55
+ --pd-spacing-4: 1em;
56
+ --pd-spacing-5: 1.25em;
57
+ --pd-spacing-6: 1.5em;
58
+ --pd-spacing-7: 1.75em;
59
+ --pd-spacing-8: 2em;
60
+ --pd-spacing-9: 2.25em;
61
+ --pd-radius-2xl: 1em;
62
+ --pd-radius-3xl: 1.5em;
63
+ --pd-radius-base: 0.25em;
64
+ --pd-radius-button: 0.5em;
65
+ --pd-radius-full: 9999px;
66
+ --pd-radius-lg: 0.5em;
67
+ --pd-radius-md: 0.375em;
68
+ --pd-radius-none: 0;
69
+ --pd-radius-sm: 0.125em;
70
+ --pd-radius-xl: 0.75em;
71
+ --pd-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
72
+ --pd-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
73
+ --pd-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
74
+ --pd-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
75
+ --pd-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
76
+ --pd-shadow-none: none;
77
+ --pd-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
78
+ --pd-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
79
+ --pd-z-base: 0;
80
+ --pd-z-dropdown: 1000;
81
+ --pd-z-fixed: 1030;
82
+ --pd-z-modal-backdrop: 1040;
83
+ --pd-z-modal: 1050;
84
+ --pd-z-popover: 1060;
85
+ --pd-z-sticky: 1020;
86
+ --pd-z-tooltip: 1070;
87
+ --pd-button-gap: 0.5em;
88
+ --pd-button-letter-spacing: 0.00833em;
89
+ --pd-button-line-height-lg: 1.333em;
90
+ --pd-button-line-height-md: 1.333em;
91
+ --pd-button-line-height-sm: 1.333em;
92
+ --pd-button-padding-lg-horizontal: 1.25em;
93
+ --pd-button-padding-lg-vertical: 0.75em;
94
+ --pd-button-padding-md-horizontal: 1em;
95
+ --pd-button-padding-md-vertical: 0.625em;
96
+ --pd-button-padding-sm-horizontal: 0.75em;
97
+ --pd-button-padding-sm-vertical: 0.5em;
98
+
99
+ /* Semantic tokens - light mode */
100
+ --pd-background-base: #FFFFFF;
101
+ --pd-background-green-on-hover: #BDFFD5;
102
+ --pd-background-green: #E0FFEC;
103
+ --pd-background-info-on-hover: #99B7FF;
104
+ --pd-background-info: #EBF1FF;
105
+ --pd-background-invert-light: #17171C;
106
+ --pd-background-invert: #09090B;
107
+ --pd-background-low-on-hover: #DFDFE2;
108
+ --pd-background-low: #EDEDED;
109
+ --pd-background-orange-on-hover: #FFE1CC;
110
+ --pd-background-orange: #FFF3EB;
111
+ --pd-background-primary: #FFFFFF;
112
+ --pd-background-red-on-hover: #FADBE1;
113
+ --pd-background-red: #FDF2F4;
114
+ --pd-background-secondary: #EDEDED;
115
+ --pd-background-system: #FAFAFA;
116
+ --pd-background-tertiary: #DFDFE2;
117
+ --pd-background-yellow-on-hover: #FFE1CC;
118
+ --pd-background-yellow: #FFF3EB;
119
+ --pd-border-blue-on-hover: #003FD6;
120
+ --pd-border-blue-subtle: #99B7FF;
121
+ --pd-border-blue: #3772FF;
122
+ --pd-border-green-on-hover: #00B241;
123
+ --pd-border-green-subtle: #8AFFB5;
124
+ --pd-border-green: #00E052;
125
+ --pd-border-invert: #09090B;
126
+ --pd-border-on-color: #FFFFFF;
127
+ --pd-border-orange-on-hover: #AD4700;
128
+ --pd-border-orange-subtle: #FFC9A3;
129
+ --pd-border-orange: #D65700;
130
+ --pd-border-primary: #BEBEC1;
131
+ --pd-border-red-on-hover: #A11730;
132
+ --pd-border-red-subtle: #F6C1CA;
133
+ --pd-border-red: #C41C3B;
134
+ --pd-border-secondary: #DFDFE2;
135
+ --pd-border-subtle: #DFDFE2;
136
+ --pd-border-yellow-on-hover: #D68700;
137
+ --pd-border-yellow-subtle: #FFD999;
138
+ --pd-border-yellow: #F09700;
139
+ --pd-content-always-black: #09090B;
140
+ --pd-content-always-white: #FFFFFF;
141
+ --pd-content-blue-disabled: #709AFF;
142
+ --pd-content-blue-on-hover: #004BFF;
143
+ --pd-content-blue: #3772FF;
144
+ --pd-content-green-disabled: #5CFF98;
145
+ --pd-content-green-on-hover: #00E052;
146
+ --pd-content-green: #00B241;
147
+ --pd-content-on-color-inverse: #09090B;
148
+ --pd-content-on-color: #FFFFFF;
149
+ --pd-content-orange-disabled: #EC9C64;
150
+ --pd-content-orange-on-hover: #AD4700;
151
+ --pd-content-orange: #D65700;
152
+ --pd-content-primary: #17171C;
153
+ --pd-content-red-disabled: #E15C5C;
154
+ --pd-content-red-on-hover: #A11730;
155
+ --pd-content-red: #C41C3B;
156
+ --pd-content-secondary: #60606C;
157
+ --pd-content-subtle: #BEBEC1;
158
+ --pd-content-yellow-disabled: #FFCA70;
159
+ --pd-content-yellow-on-hover: #D68700;
160
+ --pd-content-yellow: #F09700;
161
+
162
+ /* Intent tokens (for backward compatibility) */
163
+ --pd-intent-primary: #60606C;
164
+ --pd-intent-primary-hover: #4E4E5A;
165
+ --pd-intent-primary-active: #2F2F37;
166
+ --pd-intent-primary-bg: #EDEDED;
167
+ --pd-intent-primary-bg-hover: #DFDFE2;
168
+ --pd-intent-primary-bg-active: #DFDFE2;
169
+ --pd-intent-primary-border: #BEBEC1;
170
+ --pd-intent-primary-text: #17171C;
171
+
172
+ --pd-intent-success: #00E052;
173
+ --pd-intent-success-hover: #00B241;
174
+ --pd-intent-success-active: #008A32;
175
+ --pd-intent-success-bg: #E0FFEC;
176
+ --pd-intent-success-bg-hover: #BDFFD5;
177
+ --pd-intent-success-bg-active: #8AFFB5;
178
+ --pd-intent-success-border: #00E052;
179
+ --pd-intent-success-text: #00B241;
180
+
181
+ --pd-intent-warning: #F09700;
182
+ --pd-intent-warning-hover: #D68700;
183
+ --pd-intent-warning-active: #7A4D00;
184
+ --pd-intent-warning-bg: #FFF3EB;
185
+ --pd-intent-warning-bg-hover: #FFE1CC;
186
+ --pd-intent-warning-bg-active: #FFE8C2;
187
+ --pd-intent-warning-border: #F09700;
188
+ --pd-intent-warning-text: #F09700;
189
+
190
+ --pd-intent-danger: #C41C3B;
191
+ --pd-intent-danger-hover: #A11730;
192
+ --pd-intent-danger-active: #7D1225;
193
+ --pd-intent-danger-bg: #FDF2F4;
194
+ --pd-intent-danger-bg-hover: #FADBE1;
195
+ --pd-intent-danger-bg-active: #FADBE1;
196
+ --pd-intent-danger-border: #C41C3B;
197
+ --pd-intent-danger-text: #C41C3B;
198
+
199
+ --pd-intent-neutral: #60606C;
200
+ --pd-intent-neutral-hover: #4E4E5A;
201
+ --pd-intent-neutral-active: #2F2F37;
202
+ --pd-intent-neutral-bg: #EDEDED;
203
+ --pd-intent-neutral-bg-hover: #DFDFE2;
204
+ --pd-intent-neutral-bg-active: #DFDFE2;
205
+ --pd-intent-neutral-border: #BEBEC1;
206
+ --pd-intent-neutral-text: #17171C;
207
+
208
+ /* Surface tokens */
209
+ --pd-surface-base: #FFFFFF;
210
+ --pd-surface-base-border: #BEBEC1;
211
+ --pd-surface-elevated: #EDEDED;
212
+ --pd-surface-elevated-border: #DFDFE2;
213
+ --pd-surface-overlay: rgba(0, 0, 0, 0.5);
214
+
215
+ /* Text tokens */
216
+ --pd-text-heading: #17171C;
217
+ --pd-text-body: #17171C;
218
+ --pd-text-muted: #BEBEC1;
219
+ --pd-text-disabled: #BEBEC1;
220
+
221
+ /* Legacy token mappings for backward compatibility */
222
+ --accent: var(--pd-background-secondary);
223
+ --accent-foreground: var(--pd-content-primary);
224
+ --background: var(--pd-background-primary);
225
+ --background-green: var(--pd-background-green);
226
+ --background-green-on-hover: var(--pd-background-green-on-hover);
227
+ --background-info: var(--pd-background-info);
228
+ --background-info-on-hover: var(--pd-background-info-on-hover);
229
+ --background-invert: var(--pd-background-invert);
230
+ --background-invert-light: var(--pd-background-invert-light);
231
+ --background-low: var(--pd-background-low);
232
+ --background-low-on-hover: var(--pd-background-low-on-hover);
233
+ --background-orange: var(--pd-background-orange);
234
+ --background-orange-on-hover: var(--pd-background-orange-on-hover);
235
+ --background-primary: var(--pd-background-primary);
236
+ --background-red: var(--pd-background-red);
237
+ --background-red-on-hover: var(--pd-background-red-on-hover);
238
+ --background-secondary: var(--pd-background-secondary);
239
+ --background-system: var(--pd-background-system);
240
+ --background-tertiary: var(--pd-background-tertiary);
241
+ --background-yellow: var(--pd-background-yellow);
242
+ --background-yellow-on-hover: var(--pd-background-yellow-on-hover);
243
+ --border: var(--pd-border-primary);
244
+ --border-blue: var(--pd-border-blue);
245
+ --border-blue-on-hover: var(--pd-border-blue-on-hover);
246
+ --border-blue-subtle: var(--pd-border-blue-subtle);
247
+ --border-green: var(--pd-border-green);
248
+ --border-green-on-hover: var(--pd-border-green-on-hover);
249
+ --border-green-subtle: var(--pd-border-green-subtle);
250
+ --border-invert: var(--pd-border-invert);
251
+ --border-on-color: var(--pd-border-on-color);
252
+ --border-orange: var(--pd-border-orange);
253
+ --border-orange-on-hover: var(--pd-border-orange-on-hover);
254
+ --border-orange-subtle: var(--pd-border-orange-subtle);
255
+ --border-primary: var(--pd-border-primary);
256
+ --border-red: var(--pd-border-red);
257
+ --border-red-on-hover: var(--pd-border-red-on-hover);
258
+ --border-red-subtle: var(--pd-border-red-subtle);
259
+ --border-secondary: var(--pd-border-secondary);
260
+ --border-subtle: var(--pd-border-subtle);
261
+ --border-yellow: var(--pd-border-yellow);
262
+ --border-yellow-on-hover: var(--pd-border-yellow-on-hover);
263
+ --border-yellow-subtle: var(--pd-border-yellow-subtle);
264
+ --card: var(--pd-background-secondary);
265
+ --card-foreground: var(--pd-content-primary);
266
+ --color-black: var(--pd-color-black);
267
+ --color-white: var(--pd-color-white);
268
+ --content-always-black: var(--pd-content-always-black);
269
+ --content-always-white: var(--pd-content-always-white);
270
+ --content-blue: var(--pd-content-blue);
271
+ --content-blue-disabled: var(--pd-content-blue-disabled);
272
+ --content-blue-on-hover: var(--pd-content-blue-on-hover);
273
+ --content-green: var(--pd-content-green);
274
+ --content-green-disabled: var(--pd-content-green-disabled);
275
+ --content-green-on-hover: var(--pd-content-green-on-hover);
276
+ --content-on-color: var(--pd-content-on-color);
277
+ --content-on-color-inverse: var(--pd-content-on-color-inverse);
278
+ --content-orange: var(--pd-content-orange);
279
+ --content-orange-disabled: var(--pd-content-orange-disabled);
280
+ --content-orange-on-hover: var(--pd-content-orange-on-hover);
281
+ --content-primary: var(--pd-content-primary);
282
+ --content-red: var(--pd-content-red);
283
+ --content-red-disabled: var(--pd-content-red-disabled);
284
+ --content-red-on-hover: var(--pd-content-red-on-hover);
285
+ --content-secondary: var(--pd-content-secondary);
286
+ --content-subtle: var(--pd-content-subtle);
287
+ --content-yellow: var(--pd-content-yellow);
288
+ --content-yellow-disabled: var(--pd-content-yellow-disabled);
289
+ --content-yellow-on-hover: var(--pd-content-yellow-on-hover);
290
+ --destructive: var(--pd-content-red);
291
+ --destructive-foreground: var(--pd-color-white);
292
+ --font-mono: var(--pd-font-mono);
293
+ --font-sans: var(--pd-font-sans);
294
+ --font-size-2xl: var(--pd-font-size-2xl);
295
+ --font-size-3xl: var(--pd-font-size-3xl);
296
+ --font-size-4xl: var(--pd-font-size-4xl);
297
+ --font-size-5xl: var(--pd-font-size-5xl);
298
+ --font-size-base: var(--pd-font-size-base);
299
+ --font-size-lg: var(--pd-font-size-lg);
300
+ --font-size-sm: var(--pd-font-size-sm);
301
+ --font-size-xl: var(--pd-font-size-xl);
302
+ --font-size-xs: var(--pd-font-size-xs);
303
+ --font-weight-bold: var(--pd-font-weight-bold);
304
+ --font-weight-medium: var(--pd-font-weight-medium);
305
+ --font-weight-normal: var(--pd-font-weight-normal);
306
+ --font-weight-semibold: var(--pd-font-weight-semibold);
307
+ --foreground: var(--pd-foreground);
308
+ --input: var(--pd-input);
309
+ --intent-danger: var(--pd-intent-danger);
310
+ --intent-danger-active: var(--pd-intent-danger-active);
311
+ --intent-danger-bg: var(--pd-intent-danger-bg);
312
+ --intent-danger-bg-active: var(--pd-intent-danger-bg-active);
313
+ --intent-danger-bg-hover: var(--pd-intent-danger-bg-hover);
314
+ --intent-danger-border: var(--pd-intent-danger-border);
315
+ --intent-danger-hover: var(--pd-intent-danger-hover);
316
+ --intent-danger-text: var(--pd-intent-danger-text);
317
+ --intent-neutral: var(--pd-intent-neutral);
318
+ --intent-neutral-active: var(--pd-intent-neutral-active);
319
+ --intent-neutral-bg: var(--pd-intent-neutral-bg);
320
+ --intent-neutral-bg-active: var(--pd-intent-neutral-bg-active);
321
+ --intent-neutral-bg-hover: var(--pd-intent-neutral-bg-hover);
322
+ --intent-neutral-border: var(--pd-intent-neutral-border);
323
+ --intent-neutral-hover: var(--pd-intent-neutral-hover);
324
+ --intent-neutral-text: var(--pd-intent-neutral-text);
325
+ --intent-primary: var(--pd-intent-primary);
326
+ --intent-primary-active: var(--pd-intent-primary-active);
327
+ --intent-primary-bg: var(--pd-intent-primary-bg);
328
+ --intent-primary-bg-active: var(--pd-intent-primary-bg-active);
329
+ --intent-primary-bg-hover: var(--pd-intent-primary-bg-hover);
330
+ --intent-primary-border: var(--pd-intent-primary-border);
331
+ --intent-primary-hover: var(--pd-intent-primary-hover);
332
+ --intent-primary-text: var(--pd-intent-primary-text);
333
+ --intent-success: var(--pd-intent-success);
334
+ --intent-success-active: var(--pd-intent-success-active);
335
+ --intent-success-bg: var(--pd-intent-success-bg);
336
+ --intent-success-bg-active: var(--pd-intent-success-bg-active);
337
+ --intent-success-bg-hover: var(--pd-intent-success-bg-hover);
338
+ --intent-success-border: var(--pd-intent-success-border);
339
+ --intent-success-hover: var(--pd-intent-success-hover);
340
+ --intent-success-text: var(--pd-intent-success-text);
341
+ --intent-warning: var(--pd-intent-warning);
342
+ --intent-warning-active: var(--pd-intent-warning-active);
343
+ --intent-warning-bg: var(--pd-intent-warning-bg);
344
+ --intent-warning-bg-active: var(--pd-intent-warning-bg-active);
345
+ --intent-warning-bg-hover: var(--pd-intent-warning-bg-hover);
346
+ --intent-warning-border: var(--pd-intent-warning-border);
347
+ --intent-warning-hover: var(--pd-intent-warning-hover);
348
+ --intent-warning-text: var(--pd-intent-warning-text);
349
+ --line-height-normal: var(--pd-line-height-normal);
350
+ --line-height-relaxed: var(--pd-line-height-relaxed);
351
+ --line-height-tight: var(--pd-line-height-tight);
352
+ --muted: var(--pd-muted);
353
+ --muted-foreground: var(--pd-muted-foreground);
354
+ --popover: var(--pd-background-secondary);
355
+ --popover-foreground: var(--pd-content-primary);
356
+ --primary: var(--pd-primary);
357
+ --primary-foreground: var(--pd-primary-foreground);
358
+ --radius: var(--pd-radius);
359
+ --radius-2xl: var(--pd-radius-2xl);
360
+ --radius-3xl: var(--pd-radius-3xl);
361
+ --radius-base: var(--pd-radius-base);
362
+ --radius-full: var(--pd-radius-full);
363
+ --radius-lg: var(--pd-radius-lg);
364
+ --radius-md: var(--pd-radius-md);
365
+ --radius-none: var(--pd-radius-none);
366
+ --radius-sm: var(--pd-radius-sm);
367
+ --radius-xl: var(--pd-radius-xl);
368
+ --ring: var(--pd-ring);
369
+ --secondary: var(--pd-secondary);
370
+ --secondary-foreground: var(--pd-secondary-foreground);
371
+ --shadow-2xl: var(--pd-shadow-2xl);
372
+ --shadow-base: var(--pd-shadow-base);
373
+ --shadow-inner: var(--pd-shadow-inner);
374
+ --shadow-lg: var(--pd-shadow-lg);
375
+ --shadow-md: var(--pd-shadow-md);
376
+ --shadow-none: var(--pd-shadow-none);
377
+ --shadow-sm: var(--pd-shadow-sm);
378
+ --shadow-xl: var(--pd-shadow-xl);
379
+ --spacing-0: var(--pd-spacing-0);
380
+ --spacing-1: var(--pd-spacing-1);
381
+ --spacing-10: var(--pd-spacing-10);
382
+ --spacing-12: var(--pd-spacing-12);
383
+ --spacing-16: var(--pd-spacing-16);
384
+ --spacing-2: var(--pd-spacing-2);
385
+ --spacing-20: var(--pd-spacing-20);
386
+ --spacing-24: var(--pd-spacing-24);
387
+ --spacing-3: var(--pd-spacing-3);
388
+ --spacing-4: var(--pd-spacing-4);
389
+ --spacing-5: var(--pd-spacing-5);
390
+ --spacing-6: var(--pd-spacing-6);
391
+ --spacing-8: var(--pd-spacing-8);
392
+ --surface-base: var(--pd-surface-base);
393
+ --surface-base-border: var(--pd-surface-base-border);
394
+ --surface-elevated: var(--pd-surface-elevated);
395
+ --surface-elevated-border: var(--pd-surface-elevated-border);
396
+ --surface-overlay: var(--pd-surface-overlay);
397
+ --text-body: var(--pd-text-body);
398
+ --text-disabled: var(--pd-text-disabled);
399
+ --text-heading: var(--pd-text-heading);
400
+ --text-muted: var(--pd-text-muted);
401
+ --z-dropdown: var(--pd-z-dropdown);
402
+ --z-fixed: var(--pd-z-fixed);
403
+ --z-modal: var(--pd-z-modal);
404
+ --z-modal-backdrop: var(--pd-z-modal-backdrop);
405
+ --z-popover: var(--pd-z-popover);
406
+ --z-sticky: var(--pd-z-sticky);
407
+ --z-tooltip: var(--pd-z-tooltip);
408
+ }
409
+ /* ✅ dark theme also scoped */
410
+ .pd-root.pd-dark {
411
+ /* Core shadcn-style tokens (HSL format) - dark mode */
412
+ --pd-background: 240 10% 4%;
413
+ --pd-foreground: 240 5% 88%;
414
+
415
+ --pd-primary: 240 5% 88%;
416
+ --pd-primary-foreground: 240 10% 4%;
417
+
418
+ --pd-secondary: 240 10% 10%;
419
+ --pd-secondary-foreground: 240 5% 88%;
420
+
421
+ --pd-muted: 240 10% 10%;
422
+ --pd-muted-foreground: 240 7% 33%;
423
+
424
+ --pd-border: 240 7% 33%;
425
+ --pd-input: 240 7% 33%;
426
+ --pd-ring: 240 5% 52%;
427
+
428
+ /* Semantic tokens - dark mode */
429
+ --pd-background-base: #09090B;
430
+ --pd-background-green-on-hover: #006625;
431
+ --pd-background-green: #00471A;
432
+ --pd-background-info-on-hover: #001E66;
433
+ --pd-background-info: #00123D;
434
+ --pd-background-invert-light: #DFDFE2;
435
+ --pd-background-invert: #FFFFFF;
436
+ --pd-background-low-on-hover: #2F2F37;
437
+ --pd-background-low: #17171C;
438
+ --pd-background-orange-on-hover: #5C2500;
439
+ --pd-background-orange: #331500;
440
+ --pd-background-primary: #09090B;
441
+ --pd-background-red-on-hover: #4C0B17;
442
+ --pd-background-red: #2D060D;
443
+ --pd-background-secondary: #17171C;
444
+ --pd-background-system: #09090B;
445
+ --pd-background-tertiary: #2F2F37;
446
+ --pd-background-yellow-on-hover: #5C3A00;
447
+ --pd-background-yellow: #3D2600;
448
+ --pd-border-blue-on-hover: #3772FF;
449
+ --pd-border-blue-subtle: #002680;
450
+ --pd-border-blue: #709AFF;
451
+ --pd-border-green-on-hover: #00B241;
452
+ --pd-border-green-subtle: #006625;
453
+ --pd-border-green: #00E052;
454
+ --pd-border-invert: #FFFFFF;
455
+ --pd-border-on-color: #09090B;
456
+ --pd-border-orange-on-hover: #FF6800;
457
+ --pd-border-orange-subtle: #5C2500;
458
+ --pd-border-orange: #EC9C64;
459
+ --pd-border-primary: #4E4E5A;
460
+ --pd-border-red-on-hover: #E12D4E;
461
+ --pd-border-red-subtle: #4C0B17;
462
+ --pd-border-red: #E15C5C;
463
+ --pd-border-secondary: #2F2F37;
464
+ --pd-border-subtle: #2F2F37;
465
+ --pd-border-yellow-on-hover: #FFAD22;
466
+ --pd-border-yellow-subtle: #5C3A00;
467
+ --pd-border-yellow: #FFCA70;
468
+ --pd-content-always-black: #09090B;
469
+ --pd-content-always-white: #FFFFFF;
470
+ --pd-content-blue-disabled: #002680;
471
+ --pd-content-blue-on-hover: #3772FF;
472
+ --pd-content-blue: #709AFF;
473
+ --pd-content-green-disabled: #008A32;
474
+ --pd-content-green-on-hover: #09FF63;
475
+ --pd-content-green: #00E052;
476
+ --pd-content-on-color-inverse: #FFFFFF;
477
+ --pd-content-on-color: #09090B;
478
+ --pd-content-orange-disabled: #7A3200;
479
+ --pd-content-orange-on-hover: #FFC9A3;
480
+ --pd-content-orange: #EC9C64;
481
+ --pd-content-primary: #DFDFE2;
482
+ --pd-content-red-disabled: #7D1225;
483
+ --pd-content-red-on-hover: #F6C1CA;
484
+ --pd-content-red: #E15C5C;
485
+ --pd-content-secondary: #7E7E8B;
486
+ --pd-content-subtle: #4E4E5A;
487
+ --pd-content-yellow-disabled: #7A4D00;
488
+ --pd-content-yellow-on-hover: #FFD999;
489
+ --pd-content-yellow: #FFCA70;
490
+
491
+ /* Intent tokens (for backward compatibility) */
492
+ --pd-intent-primary: #7E7E8B;
493
+ --pd-intent-primary-hover: #DFDFE2;
494
+ --pd-intent-primary-active: #EDEDED;
495
+ --pd-intent-primary-bg: #17171C;
496
+ --pd-intent-primary-bg-hover: #2F2F37;
497
+ --pd-intent-primary-bg-active: #2F2F37;
498
+ --pd-intent-primary-border: #4E4E5A;
499
+ --pd-intent-primary-text: #DFDFE2;
500
+
501
+ --pd-intent-success: #00E052;
502
+ --pd-intent-success-hover: #09FF63;
503
+ --pd-intent-success-active: #00B241;
504
+ --pd-intent-success-bg: #00471A;
505
+ --pd-intent-success-bg-hover: #006625;
506
+ --pd-intent-success-bg-active: #008A32;
507
+ --pd-intent-success-border: #00E052;
508
+ --pd-intent-success-text: #00E052;
509
+
510
+ --pd-intent-warning: #FFCA70;
511
+ --pd-intent-warning-hover: #FFD999;
512
+ --pd-intent-warning-active: #FFAD22;
513
+ --pd-intent-warning-bg: #3D2600;
514
+ --pd-intent-warning-bg-hover: #5C3A00;
515
+ --pd-intent-warning-bg-active: #5C3A00;
516
+ --pd-intent-warning-border: #FFCA70;
517
+ --pd-intent-warning-text: #FFCA70;
518
+
519
+ --pd-intent-danger: #E15C5C;
520
+ --pd-intent-danger-hover: #F6C1CA;
521
+ --pd-intent-danger-active: #E12D4E;
522
+ --pd-intent-danger-bg: #2D060D;
523
+ --pd-intent-danger-bg-hover: #4C0B17;
524
+ --pd-intent-danger-bg-active: #4C0B17;
525
+ --pd-intent-danger-border: #E15C5C;
526
+ --pd-intent-danger-text: #E15C5C;
527
+
528
+ --pd-intent-neutral: #7E7E8B;
529
+ --pd-intent-neutral-hover: #DFDFE2;
530
+ --pd-intent-neutral-active: #EDEDED;
531
+ --pd-intent-neutral-bg: #17171C;
532
+ --pd-intent-neutral-bg-hover: #2F2F37;
533
+ --pd-intent-neutral-bg-active: #2F2F37;
534
+ --pd-intent-neutral-border: #4E4E5A;
535
+ --pd-intent-neutral-text: #DFDFE2;
536
+
537
+ /* Surface tokens */
538
+ --pd-surface-base: #09090B;
539
+ --pd-surface-base-border: #4E4E5A;
540
+ --pd-surface-elevated: #17171C;
541
+ --pd-surface-elevated-border: #2F2F37;
542
+ --pd-surface-overlay: rgba(0, 0, 0, 0.7);
543
+
544
+ /* Text tokens */
545
+ --pd-text-heading: #DFDFE2;
546
+ --pd-text-body: #DFDFE2;
547
+ --pd-text-muted: #4E4E5A;
548
+ --pd-text-disabled: #60606C;
549
+
550
+ /* Legacy token mappings for backward compatibility */
551
+ --accent: var(--pd-background-secondary);
552
+ --accent-foreground: var(--pd-content-primary);
553
+ --background: var(--pd-background-primary);
554
+ --background-green: var(--pd-background-green);
555
+ --background-green-on-hover: var(--pd-background-green-on-hover);
556
+ --background-info: var(--pd-background-info);
557
+ --background-info-on-hover: var(--pd-background-info-on-hover);
558
+ --background-invert: var(--pd-background-invert);
559
+ --background-invert-light: var(--pd-background-invert-light);
560
+ --background-low: var(--pd-background-low);
561
+ --background-low-on-hover: var(--pd-background-low-on-hover);
562
+ --background-orange: var(--pd-background-orange);
563
+ --background-orange-on-hover: var(--pd-background-orange-on-hover);
564
+ --background-primary: var(--pd-background-primary);
565
+ --background-red: var(--pd-background-red);
566
+ --background-red-on-hover: var(--pd-background-red-on-hover);
567
+ --background-secondary: var(--pd-background-secondary);
568
+ --background-system: var(--pd-background-system);
569
+ --background-tertiary: var(--pd-background-tertiary);
570
+ --background-yellow: var(--pd-background-yellow);
571
+ --background-yellow-on-hover: var(--pd-background-yellow-on-hover);
572
+ --border: var(--pd-border-primary);
573
+ --border-blue: var(--pd-border-blue);
574
+ --border-blue-on-hover: var(--pd-border-blue-on-hover);
575
+ --border-blue-subtle: var(--pd-border-blue-subtle);
576
+ --border-green: var(--pd-border-green);
577
+ --border-green-on-hover: var(--pd-border-green-on-hover);
578
+ --border-green-subtle: var(--pd-border-green-subtle);
579
+ --border-invert: var(--pd-border-invert);
580
+ --border-on-color: var(--pd-border-on-color);
581
+ --border-orange: var(--pd-border-orange);
582
+ --border-orange-on-hover: var(--pd-border-orange-on-hover);
583
+ --border-orange-subtle: var(--pd-border-orange-subtle);
584
+ --border-primary: var(--pd-border-primary);
585
+ --border-red: var(--pd-border-red);
586
+ --border-red-on-hover: var(--pd-border-red-on-hover);
587
+ --border-red-subtle: var(--pd-border-red-subtle);
588
+ --border-secondary: var(--pd-border-secondary);
589
+ --border-subtle: var(--pd-border-subtle);
590
+ --border-yellow: var(--pd-border-yellow);
591
+ --border-yellow-on-hover: var(--pd-border-yellow-on-hover);
592
+ --border-yellow-subtle: var(--pd-border-yellow-subtle);
593
+ --card: var(--pd-background-secondary);
594
+ --card-foreground: var(--pd-content-primary);
595
+ --color-black: var(--pd-color-black);
596
+ --color-white: var(--pd-color-white);
597
+ --content-always-black: var(--pd-content-always-black);
598
+ --content-always-white: var(--pd-content-always-white);
599
+ --content-blue: var(--pd-content-blue);
600
+ --content-blue-disabled: var(--pd-content-blue-disabled);
601
+ --content-blue-on-hover: var(--pd-content-blue-on-hover);
602
+ --content-green: var(--pd-content-green);
603
+ --content-green-disabled: var(--pd-content-green-disabled);
604
+ --content-green-on-hover: var(--pd-content-green-on-hover);
605
+ --content-on-color: var(--pd-content-on-color);
606
+ --content-on-color-inverse: var(--pd-content-on-color-inverse);
607
+ --content-orange: var(--pd-content-orange);
608
+ --content-orange-disabled: var(--pd-content-orange-disabled);
609
+ --content-orange-on-hover: var(--pd-content-orange-on-hover);
610
+ --content-primary: var(--pd-content-primary);
611
+ --content-red: var(--pd-content-red);
612
+ --content-red-disabled: var(--pd-content-red-disabled);
613
+ --content-red-on-hover: var(--pd-content-red-on-hover);
614
+ --content-secondary: var(--pd-content-secondary);
615
+ --content-subtle: var(--pd-content-subtle);
616
+ --content-yellow: var(--pd-content-yellow);
617
+ --content-yellow-disabled: var(--pd-content-yellow-disabled);
618
+ --content-yellow-on-hover: var(--pd-content-yellow-on-hover);
619
+ --destructive: var(--pd-content-red);
620
+ --destructive-foreground: var(--pd-color-white);
621
+ --font-mono: var(--pd-font-mono);
622
+ --font-sans: var(--pd-font-sans);
623
+ --font-size-2xl: var(--pd-font-size-2xl);
624
+ --font-size-3xl: var(--pd-font-size-3xl);
625
+ --font-size-4xl: var(--pd-font-size-4xl);
626
+ --font-size-5xl: var(--pd-font-size-5xl);
627
+ --font-size-base: var(--pd-font-size-base);
628
+ --font-size-lg: var(--pd-font-size-lg);
629
+ --font-size-sm: var(--pd-font-size-sm);
630
+ --font-size-xl: var(--pd-font-size-xl);
631
+ --font-size-xs: var(--pd-font-size-xs);
632
+ --font-weight-bold: var(--pd-font-weight-bold);
633
+ --font-weight-medium: var(--pd-font-weight-medium);
634
+ --font-weight-normal: var(--pd-font-weight-normal);
635
+ --font-weight-semibold: var(--pd-font-weight-semibold);
636
+ --foreground: var(--pd-foreground);
637
+ --input: var(--pd-input);
638
+ --intent-danger: var(--pd-intent-danger);
639
+ --intent-danger-active: var(--pd-intent-danger-active);
640
+ --intent-danger-bg: var(--pd-intent-danger-bg);
641
+ --intent-danger-bg-active: var(--pd-intent-danger-bg-active);
642
+ --intent-danger-bg-hover: var(--pd-intent-danger-bg-hover);
643
+ --intent-danger-border: var(--pd-intent-danger-border);
644
+ --intent-danger-hover: var(--pd-intent-danger-hover);
645
+ --intent-danger-text: var(--pd-intent-danger-text);
646
+ --intent-neutral: var(--pd-intent-neutral);
647
+ --intent-neutral-active: var(--pd-intent-neutral-active);
648
+ --intent-neutral-bg: var(--pd-intent-neutral-bg);
649
+ --intent-neutral-bg-active: var(--pd-intent-neutral-bg-active);
650
+ --intent-neutral-bg-hover: var(--pd-intent-neutral-bg-hover);
651
+ --intent-neutral-border: var(--pd-intent-neutral-border);
652
+ --intent-neutral-hover: var(--pd-intent-neutral-hover);
653
+ --intent-neutral-text: var(--pd-intent-neutral-text);
654
+ --intent-primary: var(--pd-intent-primary);
655
+ --intent-primary-active: var(--pd-intent-primary-active);
656
+ --intent-primary-bg: var(--pd-intent-primary-bg);
657
+ --intent-primary-bg-active: var(--pd-intent-primary-bg-active);
658
+ --intent-primary-bg-hover: var(--pd-intent-primary-bg-hover);
659
+ --intent-primary-border: var(--pd-intent-primary-border);
660
+ --intent-primary-hover: var(--pd-intent-primary-hover);
661
+ --intent-primary-text: var(--pd-intent-primary-text);
662
+ --intent-success: var(--pd-intent-success);
663
+ --intent-success-active: var(--pd-intent-success-active);
664
+ --intent-success-bg: var(--pd-intent-success-bg);
665
+ --intent-success-bg-active: var(--pd-intent-success-bg-active);
666
+ --intent-success-bg-hover: var(--pd-intent-success-bg-hover);
667
+ --intent-success-border: var(--pd-intent-success-border);
668
+ --intent-success-hover: var(--pd-intent-success-hover);
669
+ --intent-success-text: var(--pd-intent-success-text);
670
+ --intent-warning: var(--pd-intent-warning);
671
+ --intent-warning-active: var(--pd-intent-warning-active);
672
+ --intent-warning-bg: var(--pd-intent-warning-bg);
673
+ --intent-warning-bg-active: var(--pd-intent-warning-bg-active);
674
+ --intent-warning-bg-hover: var(--pd-intent-warning-bg-hover);
675
+ --intent-warning-border: var(--pd-intent-warning-border);
676
+ --intent-warning-hover: var(--pd-intent-warning-hover);
677
+ --intent-warning-text: var(--pd-intent-warning-text);
678
+ --line-height-normal: var(--pd-line-height-normal);
679
+ --line-height-relaxed: var(--pd-line-height-relaxed);
680
+ --line-height-tight: var(--pd-line-height-tight);
681
+ --muted: var(--pd-muted);
682
+ --muted-foreground: var(--pd-muted-foreground);
683
+ --popover: var(--pd-background-secondary);
684
+ --popover-foreground: var(--pd-content-primary);
685
+ --primary: var(--pd-primary);
686
+ --primary-foreground: var(--pd-primary-foreground);
687
+ --radius: var(--pd-radius);
688
+ --radius-2xl: var(--pd-radius-2xl);
689
+ --radius-3xl: var(--pd-radius-3xl);
690
+ --radius-base: var(--pd-radius-base);
691
+ --radius-full: var(--pd-radius-full);
692
+ --radius-lg: var(--pd-radius-lg);
693
+ --radius-md: var(--pd-radius-md);
694
+ --radius-none: var(--pd-radius-none);
695
+ --radius-sm: var(--pd-radius-sm);
696
+ --radius-xl: var(--pd-radius-xl);
697
+ --ring: var(--pd-ring);
698
+ --secondary: var(--pd-secondary);
699
+ --secondary-foreground: var(--pd-secondary-foreground);
700
+ --shadow-2xl: var(--pd-shadow-2xl);
701
+ --shadow-base: var(--pd-shadow-base);
702
+ --shadow-inner: var(--pd-shadow-inner);
703
+ --shadow-lg: var(--pd-shadow-lg);
704
+ --shadow-md: var(--pd-shadow-md);
705
+ --shadow-none: var(--pd-shadow-none);
706
+ --shadow-sm: var(--pd-shadow-sm);
707
+ --shadow-xl: var(--pd-shadow-xl);
708
+ --spacing-0: var(--pd-spacing-0);
709
+ --spacing-1: var(--pd-spacing-1);
710
+ --spacing-10: var(--pd-spacing-10);
711
+ --spacing-12: var(--pd-spacing-12);
712
+ --spacing-16: var(--pd-spacing-16);
713
+ --spacing-2: var(--pd-spacing-2);
714
+ --spacing-20: var(--pd-spacing-20);
715
+ --spacing-24: var(--pd-spacing-24);
716
+ --spacing-3: var(--pd-spacing-3);
717
+ --spacing-4: var(--pd-spacing-4);
718
+ --spacing-5: var(--pd-spacing-5);
719
+ --spacing-6: var(--pd-spacing-6);
720
+ --spacing-8: var(--pd-spacing-8);
721
+ --surface-base: var(--pd-surface-base);
722
+ --surface-base-border: var(--pd-surface-base-border);
723
+ --surface-elevated: var(--pd-surface-elevated);
724
+ --surface-elevated-border: var(--pd-surface-elevated-border);
725
+ --surface-overlay: var(--pd-surface-overlay);
726
+ --text-body: var(--pd-text-body);
727
+ --text-disabled: var(--pd-text-disabled);
728
+ --text-heading: var(--pd-text-heading);
729
+ --text-muted: var(--pd-text-muted);
730
+ --z-dropdown: var(--pd-z-dropdown);
731
+ --z-fixed: var(--pd-z-fixed);
732
+ --z-modal: var(--pd-z-modal);
733
+ --z-modal-backdrop: var(--pd-z-modal-backdrop);
734
+ --z-popover: var(--pd-z-popover);
735
+ --z-sticky: var(--pd-z-sticky);
736
+ --z-tooltip: var(--pd-z-tooltip);
737
+ }
738
+ /* ✅ Minimal base normalization (safe primitives) */
739
+ /* Since we disabled preflight, consumer resets might affect you. */
740
+ /* So we apply minimal scoped normalization. */
741
+ /* Use more specific selectors to ensure font-size overrides consumer's html/body settings */
742
+ body.pd-root,
743
+ html body.pd-root,
744
+ .pd-root {
745
+ font-family: var(--pd-font-sans, Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
746
+ color: var(--pd-text-body, var(--pd-content-primary));
747
+ background: var(--pd-background-primary);
748
+ font-size: 16px !important;
749
+ }
750
+ /* Ensure interactive elements behave correctly even with global resets */
751
+ .pd-root button {
752
+ font-family: var(--pd-font-sans, Geist, sans-serif);
753
+ /* Don't inherit color - buttons should use their own text colors */
754
+ box-shadow: none !important;
755
+ -o-border-image: none !important;
756
+ border-image: none !important;
757
+ text-shadow: none !important;
758
+ }
759
+ .pd-root button[class*="pd-border"] {
760
+ border-style: solid !important;
761
+ -o-border-image: none !important;
762
+ border-image: none !important;
763
+ box-shadow: none !important;
764
+ }
765
+ .pd-root input,
766
+ .pd-root textarea,
767
+ .pd-root select {
768
+ font: inherit;
769
+ color: inherit;
770
+ }
771
+ /* Disabled buttons - no hover/active state changes */
772
+ .pd-root button:disabled,
773
+ .pd-root button[aria-disabled="true"] {
774
+ pointer-events: none !important;
775
+ cursor: not-allowed !important;
776
+ }
777
+ .pd-root button:disabled:hover,
778
+ .pd-root button[aria-disabled="true"]:hover,
779
+ .pd-root button:disabled:active,
780
+ .pd-root button[aria-disabled="true"]:active {
781
+ /* Prevent any hover/active state changes on disabled buttons */
782
+ background-color: inherit !important;
783
+ color: inherit !important;
784
+ border-color: inherit !important;
785
+ transform: none !important;
786
+ opacity: inherit !important;
787
+ }
788
+ /* Focus visible styles for accessibility */
789
+ .pd-root button:focus-visible,
790
+ .pd-root input:focus-visible,
791
+ .pd-root select:focus-visible,
792
+ .pd-root textarea:focus-visible {
793
+ outline: 0.125em solid var(--pd-intent-primary, var(--pd-border-blue));
794
+ outline-offset: 0.125em;
795
+ }
796
+ /* Disabled buttons should not receive focus */
797
+ .pd-root button:disabled:focus-visible,
798
+ .pd-root button[aria-disabled="true"]:focus-visible {
799
+ outline: none !important;
800
+ }
801
+ /* Ghost button loading state - ensure background overrides transparent */
802
+ .pd-root button[aria-busy="true"][class*="pd-bg-transparent"][class*="pd-bg-\[var\(--pd-background-tertiary\)\]"] {
803
+ background-color: var(--pd-background-tertiary) !important;
804
+ }
805
+ /* Only utilities - no base/components because we disabled preflight */
806
+ .pd-sr-only {
807
+ position: absolute;
808
+ width: 1px;
809
+ height: 1px;
810
+ padding: 0;
811
+ margin: -1px;
812
+ overflow: hidden;
813
+ clip: rect(0, 0, 0, 0);
814
+ white-space: nowrap;
815
+ border-width: 0;
816
+ }
817
+ .pd-absolute {
818
+ position: absolute;
819
+ }
820
+ .pd-relative {
821
+ position: relative;
822
+ }
823
+ .pd-bottom-1 {
824
+ bottom: 0.25em;
825
+ }
826
+ .pd-left-1\/2 {
827
+ left: 50%;
828
+ }
829
+ .pd-m-0 {
830
+ margin: 0em;
831
+ }
832
+ .pd-mx-auto {
833
+ margin-left: auto;
834
+ margin-right: auto;
835
+ }
836
+ .pd-mb-2 {
837
+ margin-bottom: 0.5em;
838
+ }
839
+ .pd-ml-2 {
840
+ margin-left: 0.5em;
841
+ }
842
+ .pd-mr-2 {
843
+ margin-right: 0.5em;
844
+ }
845
+ .pd-mt-2 {
846
+ margin-top: 0.5em;
847
+ }
848
+ .pd-flex {
849
+ display: flex;
850
+ }
851
+ .pd-inline-flex {
852
+ display: inline-flex;
853
+ }
854
+ .pd-grid {
855
+ display: grid;
856
+ }
857
+ .pd-h-10 {
858
+ height: 2.5em;
859
+ }
860
+ .pd-h-3 {
861
+ height: 0.75em;
862
+ }
863
+ .pd-h-4 {
864
+ height: 1em;
865
+ }
866
+ .pd-h-5 {
867
+ height: 1.25em;
868
+ }
869
+ .pd-h-8 {
870
+ height: 2em;
871
+ }
872
+ .pd-min-h-\[100px\] {
873
+ min-height: 100px;
874
+ }
875
+ .pd-min-h-screen {
876
+ min-height: 100vh;
877
+ }
878
+ .pd-w-3 {
879
+ width: 0.75em;
880
+ }
881
+ .pd-w-4 {
882
+ width: 1em;
883
+ }
884
+ .pd-w-5 {
885
+ width: 1.25em;
886
+ }
887
+ .pd-w-full {
888
+ width: 100%;
889
+ }
890
+ .pd-max-w-\[1400px\] {
891
+ max-width: 1400px;
892
+ }
893
+ .pd-max-w-md {
894
+ max-width: 28rem;
895
+ }
896
+ .pd--translate-x-1\/2 {
897
+ --tw-translate-x: -50%;
898
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
899
+ }
900
+ @keyframes pd-spin {
901
+ to {
902
+ transform: rotate(360deg);
903
+ }
904
+ }
905
+ .pd-animate-spin {
906
+ animation: pd-spin 1s linear infinite;
907
+ }
908
+ .pd-cursor-pointer {
909
+ cursor: pointer;
910
+ }
911
+ .pd-grid-cols-\[150px_repeat\(5\,1fr\)\] {
912
+ grid-template-columns: 150px repeat(5,1fr);
913
+ }
914
+ .pd-flex-row {
915
+ flex-direction: row;
916
+ }
917
+ .pd-flex-col {
918
+ flex-direction: column;
919
+ }
920
+ .pd-flex-wrap {
921
+ flex-wrap: wrap;
922
+ }
923
+ .pd-items-start {
924
+ align-items: flex-start;
925
+ }
926
+ .pd-items-end {
927
+ align-items: flex-end;
928
+ }
929
+ .pd-items-center {
930
+ align-items: center;
931
+ }
932
+ .pd-justify-start {
933
+ justify-content: flex-start;
934
+ }
935
+ .pd-justify-end {
936
+ justify-content: flex-end;
937
+ }
938
+ .pd-justify-center {
939
+ justify-content: center;
940
+ }
941
+ .pd-justify-between {
942
+ justify-content: space-between;
943
+ }
944
+ .pd-gap-1 {
945
+ gap: 0.25em;
946
+ }
947
+ .pd-gap-2 {
948
+ gap: 0.5em;
949
+ }
950
+ .pd-gap-3 {
951
+ gap: 0.75em;
952
+ }
953
+ .pd-gap-4 {
954
+ gap: 1em;
955
+ }
956
+ .pd-gap-6 {
957
+ gap: 1.5em;
958
+ }
959
+ .pd-gap-8 {
960
+ gap: 2em;
961
+ }
962
+ .pd-gap-x-6 {
963
+ -moz-column-gap: 1.5em;
964
+ column-gap: 1.5em;
965
+ }
966
+ .pd-space-y-4 > :not([hidden]) ~ :not([hidden]) {
967
+ --tw-space-y-reverse: 0;
968
+ margin-top: calc(1em * calc(1 - var(--tw-space-y-reverse)));
969
+ margin-bottom: calc(1em * var(--tw-space-y-reverse));
970
+ }
971
+ .pd-overflow-auto {
972
+ overflow: auto;
973
+ }
974
+ .pd-whitespace-nowrap {
975
+ white-space: nowrap;
976
+ }
977
+ .pd-rounded {
978
+ border-radius: 0.25rem;
979
+ }
980
+ .pd-rounded-full {
981
+ border-radius: 9999px;
982
+ }
983
+ .pd-rounded-lg {
984
+ border-radius: var(--pd-radius);
985
+ }
986
+ .pd-rounded-md {
987
+ border-radius: calc(var(--pd-radius) - 0.125em);
988
+ }
989
+ .pd-rounded-none {
990
+ border-radius: 0px;
991
+ }
992
+ .pd-rounded-sm {
993
+ border-radius: calc(var(--pd-radius) - 0.25em);
994
+ }
995
+ .pd-border {
996
+ border-width: 1px;
997
+ }
998
+ .pd-border-0 {
999
+ border-width: 0px;
1000
+ }
1001
+ .pd-border-\[var\(--pd-border-red\)\] {
1002
+ border-color: var(--pd-border-red);
1003
+ }
1004
+ .pd-border-\[var\(--pd-border-secondary\)\] {
1005
+ border-color: var(--pd-border-secondary);
1006
+ }
1007
+ .pd-border-\[var\(--pd-intent-danger-border\)\] {
1008
+ border-color: var(--pd-intent-danger-border);
1009
+ }
1010
+ .pd-border-\[var\(--pd-intent-neutral-border\)\] {
1011
+ border-color: var(--pd-intent-neutral-border);
1012
+ }
1013
+ .pd-border-\[var\(--pd-intent-success-border\)\] {
1014
+ border-color: var(--pd-intent-success-border);
1015
+ }
1016
+ .pd-border-\[var\(--pd-intent-warning-border\)\] {
1017
+ border-color: var(--pd-intent-warning-border);
1018
+ }
1019
+ .\!pd-bg-\[var\(--pd-background-tertiary\)\] {
1020
+ background-color: var(--pd-background-tertiary) !important;
1021
+ }
1022
+ .pd-bg-\[var\(--pd-background-invert\)\] {
1023
+ background-color: var(--pd-background-invert);
1024
+ }
1025
+ .pd-bg-\[var\(--pd-background-primary\)\] {
1026
+ background-color: var(--pd-background-primary);
1027
+ }
1028
+ .pd-bg-\[var\(--pd-background-red\)\] {
1029
+ background-color: var(--pd-background-red);
1030
+ }
1031
+ .pd-bg-\[var\(--pd-background-red-on-hover\)\] {
1032
+ background-color: var(--pd-background-red-on-hover);
1033
+ }
1034
+ .pd-bg-\[var\(--pd-background-tertiary\)\] {
1035
+ background-color: var(--pd-background-tertiary);
1036
+ }
1037
+ .pd-bg-\[var\(--pd-intent-danger-bg\)\] {
1038
+ background-color: var(--pd-intent-danger-bg);
1039
+ }
1040
+ .pd-bg-\[var\(--pd-intent-neutral-bg\)\] {
1041
+ background-color: var(--pd-intent-neutral-bg);
1042
+ }
1043
+ .pd-bg-\[var\(--pd-intent-success-bg\)\] {
1044
+ background-color: var(--pd-intent-success-bg);
1045
+ }
1046
+ .pd-bg-\[var\(--pd-intent-warning-bg\)\] {
1047
+ background-color: var(--pd-intent-warning-bg);
1048
+ }
1049
+ .pd-bg-transparent {
1050
+ background-color: transparent;
1051
+ }
1052
+ .pd-p-2 {
1053
+ padding: 0.5em;
1054
+ }
1055
+ .pd-p-4 {
1056
+ padding: 1em;
1057
+ }
1058
+ .pd-p-5 {
1059
+ padding: 1.25em;
1060
+ }
1061
+ .pd-px-3 {
1062
+ padding-left: 0.75em;
1063
+ padding-right: 0.75em;
1064
+ }
1065
+ .pd-px-4 {
1066
+ padding-left: 1em;
1067
+ padding-right: 1em;
1068
+ }
1069
+ .pd-px-5 {
1070
+ padding-left: 1.25em;
1071
+ padding-right: 1.25em;
1072
+ }
1073
+ .pd-px-6 {
1074
+ padding-left: 1.5em;
1075
+ padding-right: 1.5em;
1076
+ }
1077
+ .pd-py-2 {
1078
+ padding-top: 0.5em;
1079
+ padding-bottom: 0.5em;
1080
+ }
1081
+ .pd-py-3 {
1082
+ padding-top: 0.75em;
1083
+ padding-bottom: 0.75em;
1084
+ }
1085
+ .pd-py-4 {
1086
+ padding-top: 1em;
1087
+ padding-bottom: 1em;
1088
+ }
1089
+ .pd-text-center {
1090
+ text-align: center;
1091
+ }
1092
+ .pd-text-\[10px\] {
1093
+ font-size: 10px;
1094
+ }
1095
+ .pd-text-base {
1096
+ font-size: 1em;
1097
+ line-height: 1.5em;
1098
+ }
1099
+ .pd-text-lg {
1100
+ font-size: 1.125em;
1101
+ line-height: 1.75em;
1102
+ }
1103
+ .pd-text-sm {
1104
+ font-size: 0.875em;
1105
+ line-height: 1.25em;
1106
+ }
1107
+ .pd-text-xs {
1108
+ font-size: 0.75em;
1109
+ line-height: 1em;
1110
+ }
1111
+ .pd-font-bold {
1112
+ font-weight: 700;
1113
+ }
1114
+ .pd-font-medium {
1115
+ font-weight: 500;
1116
+ }
1117
+ .pd-font-semibold {
1118
+ font-weight: 600;
1119
+ }
1120
+ .pd-leading-normal {
1121
+ line-height: 1.5;
1122
+ }
1123
+ .pd-text-\[var\(--pd-content-on-color\)\] {
1124
+ color: var(--pd-content-on-color);
1125
+ }
1126
+ .pd-text-\[var\(--pd-content-red\)\] {
1127
+ color: var(--pd-content-red);
1128
+ }
1129
+ .pd-text-\[var\(--pd-content-red-on-hover\)\] {
1130
+ color: var(--pd-content-red-on-hover);
1131
+ }
1132
+ .pd-text-\[var\(--pd-content-secondary\)\] {
1133
+ color: var(--pd-content-secondary);
1134
+ }
1135
+ .pd-text-\[var\(--pd-content-subtle\)\] {
1136
+ color: var(--pd-content-subtle);
1137
+ }
1138
+ .pd-text-\[var\(--pd-destructive-foreground\)\] {
1139
+ color: var(--pd-destructive-foreground);
1140
+ }
1141
+ .pd-text-\[var\(--pd-intent-danger-text\)\] {
1142
+ color: var(--pd-intent-danger-text);
1143
+ }
1144
+ .pd-text-\[var\(--pd-intent-neutral-text\)\] {
1145
+ color: var(--pd-intent-neutral-text);
1146
+ }
1147
+ .pd-text-\[var\(--pd-intent-success-text\)\] {
1148
+ color: var(--pd-intent-success-text);
1149
+ }
1150
+ .pd-text-\[var\(--pd-intent-warning-text\)\] {
1151
+ color: var(--pd-intent-warning-text);
1152
+ }
1153
+ .pd-shadow-none {
1154
+ --tw-shadow: 0 0 #0000;
1155
+ --tw-shadow-colored: 0 0 #0000;
1156
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1157
+ }
1158
+ .pd-transition-all {
1159
+ transition-property: all;
1160
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1161
+ transition-duration: 150ms;
1162
+ }
1163
+ .pd-transition-colors {
1164
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
1165
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1166
+ transition-duration: 150ms;
1167
+ }
1168
+ /* Screen reader only utility - visually hidden but accessible to assistive technologies */
1169
+ .pd-sr-only {
1170
+ position: absolute;
1171
+ width: 1px;
1172
+ height: 1px;
1173
+ padding: 0;
1174
+ margin: -1px;
1175
+ overflow: hidden;
1176
+ clip: rect(0, 0, 0, 0);
1177
+ white-space: nowrap;
1178
+ border-width: 0;
1179
+ }
1180
+ /* Hide scrollbar */
1181
+ /* Backdrop blur helpers */
1182
+ /* Transition helpers */
1183
+ .pd-transition-all { transition: all 0.15s ease-in-out; }
1184
+ .pd-transition-colors { transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; }
1185
+ /* Opacity helpers */
1186
+ /* Animation helpers */
1187
+ .pd-animate-spin {
1188
+ animation: pd-spin 1s linear infinite;
1189
+ }
1190
+ @keyframes pd-spin {
1191
+ from {
1192
+ transform: rotate(0deg);
1193
+ }
1194
+ to {
1195
+ transform: rotate(360deg);
1196
+ }
1197
+ }
1198
+ /* Button border fixes - remove shadows and gradients */
1199
+ .pd-root button[class*="pd-border"] {
1200
+ border-style: solid !important;
1201
+ -o-border-image: none !important;
1202
+ border-image: none !important;
1203
+ box-shadow: none !important;
1204
+ text-shadow: none !important;
1205
+ }
1206
+ .\[border-radius\:var\(--pd-radius-button\)\] {
1207
+ border-radius: var(--pd-radius-button);
1208
+ }
1209
+ .\[font-family\:var\(--pd-font-sans\2c Geist\2c sans-serif\)\] {
1210
+ font-family: var(--pd-font-sans,Geist,sans-serif);
1211
+ }
1212
+ .\[gap\:var\(--pd-button-gap\)\] {
1213
+ gap: var(--pd-button-gap);
1214
+ }
1215
+ .\[letter-spacing\:var\(--pd-button-letter-spacing\)\] {
1216
+ letter-spacing: var(--pd-button-letter-spacing);
1217
+ }
1218
+ .\[line-height\:var\(--pd-button-line-height-lg\)\] {
1219
+ line-height: var(--pd-button-line-height-lg);
1220
+ }
1221
+ .\[line-height\:var\(--pd-button-line-height-md\)\] {
1222
+ line-height: var(--pd-button-line-height-md);
1223
+ }
1224
+ .\[line-height\:var\(--pd-button-line-height-sm\)\] {
1225
+ line-height: var(--pd-button-line-height-sm);
1226
+ }
1227
+ .\[padding-bottom\:var\(--pd-button-padding-lg-vertical\)\] {
1228
+ padding-bottom: var(--pd-button-padding-lg-vertical);
1229
+ }
1230
+ .\[padding-bottom\:var\(--pd-button-padding-md-vertical\)\] {
1231
+ padding-bottom: var(--pd-button-padding-md-vertical);
1232
+ }
1233
+ .\[padding-bottom\:var\(--pd-button-padding-sm-vertical\)\] {
1234
+ padding-bottom: var(--pd-button-padding-sm-vertical);
1235
+ }
1236
+ .\[padding-left\:var\(--pd-button-padding-lg-horizontal\)\] {
1237
+ padding-left: var(--pd-button-padding-lg-horizontal);
1238
+ }
1239
+ .\[padding-left\:var\(--pd-button-padding-md-horizontal\)\] {
1240
+ padding-left: var(--pd-button-padding-md-horizontal);
1241
+ }
1242
+ .\[padding-left\:var\(--pd-button-padding-sm-horizontal\)\] {
1243
+ padding-left: var(--pd-button-padding-sm-horizontal);
1244
+ }
1245
+ .\[padding-right\:var\(--pd-button-padding-lg-horizontal\)\] {
1246
+ padding-right: var(--pd-button-padding-lg-horizontal);
1247
+ }
1248
+ .\[padding-right\:var\(--pd-button-padding-md-horizontal\)\] {
1249
+ padding-right: var(--pd-button-padding-md-horizontal);
1250
+ }
1251
+ .\[padding-right\:var\(--pd-button-padding-sm-horizontal\)\] {
1252
+ padding-right: var(--pd-button-padding-sm-horizontal);
1253
+ }
1254
+ .\[padding-top\:var\(--pd-button-padding-lg-vertical\)\] {
1255
+ padding-top: var(--pd-button-padding-lg-vertical);
1256
+ }
1257
+ .\[padding-top\:var\(--pd-button-padding-md-vertical\)\] {
1258
+ padding-top: var(--pd-button-padding-md-vertical);
1259
+ }
1260
+ .\[padding-top\:var\(--pd-button-padding-sm-vertical\)\] {
1261
+ padding-top: var(--pd-button-padding-sm-vertical);
1262
+ }
1263
+ /* Utilities */
1264
+ .hover\:pd-bg-\[var\(--pd-background-invert-light\)\]:hover {
1265
+ background-color: var(--pd-background-invert-light);
1266
+ }
1267
+ .hover\:pd-bg-\[var\(--pd-background-low\)\]:hover {
1268
+ background-color: var(--pd-background-low);
1269
+ }
1270
+ .hover\:pd-bg-\[var\(--pd-background-red-on-hover\)\]:hover {
1271
+ background-color: var(--pd-background-red-on-hover);
1272
+ }
1273
+ .hover\:pd-bg-\[var\(--pd-intent-danger-bg\)\]:hover {
1274
+ background-color: var(--pd-intent-danger-bg);
1275
+ }
1276
+ .hover\:pd-bg-\[var\(--pd-intent-danger-bg-hover\)\]:hover {
1277
+ background-color: var(--pd-intent-danger-bg-hover);
1278
+ }
1279
+ .hover\:pd-bg-\[var\(--pd-intent-neutral-bg-hover\)\]:hover {
1280
+ background-color: var(--pd-intent-neutral-bg-hover);
1281
+ }
1282
+ .hover\:pd-bg-\[var\(--pd-intent-success-bg\)\]:hover {
1283
+ background-color: var(--pd-intent-success-bg);
1284
+ }
1285
+ .hover\:pd-bg-\[var\(--pd-intent-success-bg-hover\)\]:hover {
1286
+ background-color: var(--pd-intent-success-bg-hover);
1287
+ }
1288
+ .hover\:pd-bg-\[var\(--pd-intent-warning-bg\)\]:hover {
1289
+ background-color: var(--pd-intent-warning-bg);
1290
+ }
1291
+ .hover\:pd-bg-\[var\(--pd-intent-warning-bg-hover\)\]:hover {
1292
+ background-color: var(--pd-intent-warning-bg-hover);
1293
+ }
1294
+ .hover\:pd-text-\[var\(--pd-content-primary\)\]:hover {
1295
+ color: var(--pd-content-primary);
1296
+ }
1297
+ .hover\:pd-text-\[var\(--pd-content-red-on-hover\)\]:hover {
1298
+ color: var(--pd-content-red-on-hover);
1299
+ }
1300
+ .hover\:pd-text-\[var\(--pd-intent-danger-hover\)\]:hover {
1301
+ color: var(--pd-intent-danger-hover);
1302
+ }
1303
+ .hover\:pd-text-\[var\(--pd-intent-neutral-hover\)\]:hover {
1304
+ color: var(--pd-intent-neutral-hover);
1305
+ }
1306
+ .hover\:pd-text-\[var\(--pd-intent-success-hover\)\]:hover {
1307
+ color: var(--pd-intent-success-hover);
1308
+ }
1309
+ .hover\:pd-text-\[var\(--pd-intent-warning-hover\)\]:hover {
1310
+ color: var(--pd-intent-warning-hover);
1311
+ }
1312
+ .active\:pd-bg-\[var\(--pd-background-invert\)\]:active {
1313
+ background-color: var(--pd-background-invert);
1314
+ }
1315
+ .active\:pd-bg-\[var\(--pd-background-low-on-hover\)\]:active {
1316
+ background-color: var(--pd-background-low-on-hover);
1317
+ }
1318
+ .active\:pd-bg-\[var\(--pd-intent-danger-bg-active\)\]:active {
1319
+ background-color: var(--pd-intent-danger-bg-active);
1320
+ }
1321
+ .active\:pd-bg-\[var\(--pd-intent-neutral-bg-active\)\]:active {
1322
+ background-color: var(--pd-intent-neutral-bg-active);
1323
+ }
1324
+ .active\:pd-bg-\[var\(--pd-intent-success-bg-active\)\]:active {
1325
+ background-color: var(--pd-intent-success-bg-active);
1326
+ }
1327
+ .active\:pd-bg-\[var\(--pd-intent-warning-bg-active\)\]:active {
1328
+ background-color: var(--pd-intent-warning-bg-active);
1329
+ }
1330
+ .active\:pd-text-\[var\(--pd-content-primary\)\]:active {
1331
+ color: var(--pd-content-primary);
1332
+ }