@abhir9/pd-design-system 0.1.18 → 0.1.19

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.
package/dist/styles.css CHANGED
@@ -1,76 +1,86 @@
1
1
  /* src/styles.css */
2
- :root {
3
- --accent: #EDEDED;
4
- --accent-foreground: #17171C;
5
- --background: #FFFFFF;
6
- --background-green: #E0FFEC;
7
- --background-green-on-hover: #BDFFD5;
8
- --background-info: #EBF1FF;
9
- --background-info-on-hover: #99B7FF;
10
- --background-invert: #09090B;
11
- --background-invert-light: #17171C;
12
- --background-low: #EDEDED;
13
- --background-low-on-hover: #DFDFE2;
14
- --background-orange: #FFF3EB;
15
- --background-orange-on-hover: #FFE1CC;
16
- --background-primary: #FFFFFF;
17
- --background-red: #FDF2F4;
18
- --background-red-on-hover: #FADBE1;
19
- --background-secondary: #EDEDED;
20
- --background-system: #FAFAFA;
21
- --background-tertiary: #DFDFE2;
22
- --background-yellow: #FFF3EB;
23
- --background-yellow-on-hover: #FFE1CC;
24
- --border: #BEBEC1;
25
- --border-blue: #3772FF;
26
- --border-blue-on-hover: #003FD6;
27
- --border-blue-subtle: #99B7FF;
28
- --border-green: #00E052;
29
- --border-green-on-hover: #00B241;
30
- --border-green-subtle: #8AFFB5;
31
- --border-invert: #09090B;
32
- --border-on-color: #FFFFFF;
33
- --border-orange: #D65700;
34
- --border-orange-on-hover: #AD4700;
35
- --border-orange-subtle: #FFC9A3;
36
- --border-primary: #BEBEC1;
37
- --border-red: #C41C3B;
38
- --border-red-on-hover: #A11730;
39
- --border-red-subtle: #F6C1CA;
40
- --border-secondary: #DFDFE2;
41
- --border-subtle: #DFDFE2;
42
- --border-yellow: #F09700;
43
- --border-yellow-on-hover: #D68700;
44
- --border-yellow-subtle: #FFD999;
45
- --card: #EDEDED;
46
- --card-foreground: #17171C;
47
- --color-black: #09090B;
48
- --color-white: #FFFFFF;
49
- --content-always-black: #09090B;
50
- --content-always-white: #FFFFFF;
51
- --content-blue: #3772FF;
52
- --content-blue-disabled: #709AFF;
53
- --content-blue-on-hover: #004BFF;
54
- --content-green: #00B241;
55
- --content-green-disabled: #5CFF98;
56
- --content-green-on-hover: #00E052;
57
- --content-on-color: #FFFFFF;
58
- --content-on-color-inverse: #09090B;
59
- --content-orange: #D65700;
60
- --content-orange-disabled: #EC9C64;
61
- --content-orange-on-hover: #AD4700;
62
- --content-primary: #17171C;
63
- --content-red: #C41C3B;
64
- --content-red-disabled: #E15C5C;
65
- --content-red-on-hover: #A11730;
66
- --content-secondary: #60606C;
67
- --content-subtle: #BEBEC1;
68
- --content-yellow: #F09700;
69
- --content-yellow-disabled: #FFCA70;
70
- --content-yellow-on-hover: #D68700;
71
- --destructive: #C41C3B;
72
- --destructive-foreground: #FFFFFF;
73
- --font-mono:
2
+ .pd-root {
3
+ --pd-background: 0 0% 100%;
4
+ --pd-foreground: 240 10% 10%;
5
+ --pd-primary: 240 6% 40%;
6
+ --pd-primary-foreground: 0 0% 100%;
7
+ --pd-secondary: 0 0% 93%;
8
+ --pd-secondary-foreground: 240 10% 10%;
9
+ --pd-muted: 0 0% 93%;
10
+ --pd-muted-foreground: 240 2% 75%;
11
+ --pd-border: 240 2% 75%;
12
+ --pd-input: 240 2% 75%;
13
+ --pd-ring: 240 6% 40%;
14
+ --pd-radius: 0.375rem;
15
+ --pd-accent: #EDEDED;
16
+ --pd-accent-foreground: #17171C;
17
+ --pd-background-green: #E0FFEC;
18
+ --pd-background-green-on-hover: #BDFFD5;
19
+ --pd-background-info: #EBF1FF;
20
+ --pd-background-info-on-hover: #99B7FF;
21
+ --pd-background-invert: #09090B;
22
+ --pd-background-invert-light: #17171C;
23
+ --pd-background-low: #EDEDED;
24
+ --pd-background-low-on-hover: #DFDFE2;
25
+ --pd-background-orange: #FFF3EB;
26
+ --pd-background-orange-on-hover: #FFE1CC;
27
+ --pd-background-primary: #FFFFFF;
28
+ --pd-background-red: #FDF2F4;
29
+ --pd-background-red-on-hover: #FADBE1;
30
+ --pd-background-secondary: #EDEDED;
31
+ --pd-background-system: #FAFAFA;
32
+ --pd-background-tertiary: #DFDFE2;
33
+ --pd-background-yellow: #FFF3EB;
34
+ --pd-background-yellow-on-hover: #FFE1CC;
35
+ --pd-border-blue: #3772FF;
36
+ --pd-border-blue-on-hover: #003FD6;
37
+ --pd-border-blue-subtle: #99B7FF;
38
+ --pd-border-green: #00E052;
39
+ --pd-border-green-on-hover: #00B241;
40
+ --pd-border-green-subtle: #8AFFB5;
41
+ --pd-border-invert: #09090B;
42
+ --pd-border-on-color: #FFFFFF;
43
+ --pd-border-orange: #D65700;
44
+ --pd-border-orange-on-hover: #AD4700;
45
+ --pd-border-orange-subtle: #FFC9A3;
46
+ --pd-border-primary: #BEBEC1;
47
+ --pd-border-red: #C41C3B;
48
+ --pd-border-red-on-hover: #A11730;
49
+ --pd-border-red-subtle: #F6C1CA;
50
+ --pd-border-secondary: #DFDFE2;
51
+ --pd-border-subtle: #DFDFE2;
52
+ --pd-border-yellow: #F09700;
53
+ --pd-border-yellow-on-hover: #D68700;
54
+ --pd-border-yellow-subtle: #FFD999;
55
+ --pd-card: #EDEDED;
56
+ --pd-card-foreground: #17171C;
57
+ --pd-color-black: #09090B;
58
+ --pd-color-white: #FFFFFF;
59
+ --pd-content-always-black: #09090B;
60
+ --pd-content-always-white: #FFFFFF;
61
+ --pd-content-blue: #3772FF;
62
+ --pd-content-blue-disabled: #709AFF;
63
+ --pd-content-blue-on-hover: #004BFF;
64
+ --pd-content-green: #00B241;
65
+ --pd-content-green-disabled: #5CFF98;
66
+ --pd-content-green-on-hover: #00E052;
67
+ --pd-content-on-color: #FFFFFF;
68
+ --pd-content-on-color-inverse: #09090B;
69
+ --pd-content-orange: #D65700;
70
+ --pd-content-orange-disabled: #EC9C64;
71
+ --pd-content-orange-on-hover: #AD4700;
72
+ --pd-content-primary: #17171C;
73
+ --pd-content-red: #C41C3B;
74
+ --pd-content-red-disabled: #E15C5C;
75
+ --pd-content-red-on-hover: #A11730;
76
+ --pd-content-secondary: #60606C;
77
+ --pd-content-subtle: #BEBEC1;
78
+ --pd-content-yellow: #F09700;
79
+ --pd-content-yellow-disabled: #FFCA70;
80
+ --pd-content-yellow-on-hover: #D68700;
81
+ --pd-destructive: #C41C3B;
82
+ --pd-destructive-foreground: #FFFFFF;
83
+ --pd-font-mono:
74
84
  Gist Mono,
75
85
  Menlo,
76
86
  Monaco,
@@ -78,7 +88,7 @@
78
88
  Liberation Mono,
79
89
  Courier New,
80
90
  monospace;
81
- --font-sans:
91
+ --pd-font-sans:
82
92
  Gist,
83
93
  -apple-system,
84
94
  BlinkMacSystemFont,
@@ -88,208 +98,386 @@
88
98
  Ubuntu,
89
99
  Cantarell,
90
100
  sans-serif;
91
- --font-size-2xl: 1.5rem;
92
- --font-size-3xl: 1.875rem;
93
- --font-size-4xl: 2.25rem;
94
- --font-size-5xl: 3rem;
95
- --font-size-base: 1rem;
96
- --font-size-lg: 1.125rem;
97
- --font-size-sm: 0.875rem;
98
- --font-size-xl: 1.25rem;
99
- --font-size-xs: 0.75rem;
100
- --font-weight-bold: 700;
101
- --font-weight-medium: 500;
102
- --font-weight-normal: 400;
103
- --font-weight-semibold: 600;
104
- --foreground: #17171C;
105
- --input: #BEBEC1;
106
- --intent-danger: #C41C3B;
107
- --intent-danger-active: #7D1225;
108
- --intent-danger-bg: #FDF2F4;
109
- --intent-danger-bg-active: #FADBE1;
110
- --intent-danger-bg-hover: #FADBE1;
111
- --intent-danger-border: #C41C3B;
112
- --intent-danger-hover: #A11730;
113
- --intent-danger-text: #C41C3B;
114
- --intent-neutral: #60606C;
115
- --intent-neutral-active: #2F2F37;
116
- --intent-neutral-bg: #EDEDED;
117
- --intent-neutral-bg-active: #DFDFE2;
118
- --intent-neutral-bg-hover: #DFDFE2;
119
- --intent-neutral-border: #BEBEC1;
120
- --intent-neutral-hover: #4E4E5A;
121
- --intent-neutral-text: #17171C;
122
- --intent-primary: #60606C;
123
- --intent-primary-active: #2F2F37;
124
- --intent-primary-bg: #EDEDED;
125
- --intent-primary-bg-active: #DFDFE2;
126
- --intent-primary-bg-hover: #DFDFE2;
127
- --intent-primary-border: #BEBEC1;
128
- --intent-primary-hover: #4E4E5A;
129
- --intent-primary-text: #17171C;
130
- --intent-success: #00E052;
131
- --intent-success-active: #008A32;
132
- --intent-success-bg: #E0FFEC;
133
- --intent-success-bg-active: #8AFFB5;
134
- --intent-success-bg-hover: #BDFFD5;
135
- --intent-success-border: #00E052;
136
- --intent-success-hover: #00B241;
137
- --intent-success-text: #00B241;
138
- --intent-warning: #F09700;
139
- --intent-warning-active: #7A4D00;
140
- --intent-warning-bg: #FFF3EB;
141
- --intent-warning-bg-active: #FFE8C2;
142
- --intent-warning-bg-hover: #FFE1CC;
143
- --intent-warning-border: #F09700;
144
- --intent-warning-hover: #D68700;
145
- --intent-warning-text: #F09700;
146
- --line-height-normal: 1.5;
147
- --line-height-relaxed: 1.75;
148
- --line-height-tight: 1.25;
149
- --muted: #EDEDED;
150
- --muted-foreground: #BEBEC1;
151
- --popover: #EDEDED;
152
- --popover-foreground: #17171C;
153
- --primary: #60606C;
154
- --primary-foreground: #FFFFFF;
155
- --radius: 0.375rem;
156
- --radius-2xl: 1rem;
157
- --radius-3xl: 1.5rem;
158
- --radius-base: 0.25rem;
159
- --radius-full: 9999px;
160
- --radius-lg: 0.5rem;
161
- --radius-md: 0.375rem;
162
- --radius-none: 0;
163
- --radius-sm: 0.125rem;
164
- --radius-xl: 0.75rem;
165
- --ring: #60606C;
166
- --secondary: #EDEDED;
167
- --secondary-foreground: #17171C;
168
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
169
- --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
170
- --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
171
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
172
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
173
- --shadow-none: none;
174
- --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
175
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
176
- --spacing-0: 0;
177
- --spacing-1: 0.25rem;
178
- --spacing-10: 2.5rem;
179
- --spacing-12: 3rem;
180
- --spacing-16: 4rem;
181
- --spacing-2: 0.5rem;
182
- --spacing-20: 5rem;
183
- --spacing-24: 6rem;
184
- --spacing-3: 0.75rem;
185
- --spacing-4: 1rem;
186
- --spacing-5: 1.25rem;
187
- --spacing-6: 1.5rem;
188
- --spacing-8: 2rem;
189
- --surface-base: #FFFFFF;
190
- --surface-base-border: #BEBEC1;
191
- --surface-elevated: #EDEDED;
192
- --surface-elevated-border: #DFDFE2;
193
- --surface-overlay: rgba(0, 0, 0, 0.5);
194
- --text-body: #17171C;
195
- --text-disabled: #BEBEC1;
196
- --text-heading: #17171C;
197
- --text-muted: #BEBEC1;
198
- --z-dropdown: 1000;
199
- --z-fixed: 1030;
200
- --z-modal: 1050;
201
- --z-modal-backdrop: 1040;
202
- --z-popover: 1060;
203
- --z-sticky: 1020;
204
- --z-tooltip: 1070;
205
- --pd-reset-html-font-size: 10px;
206
- --pd-reset-html-height: 100vh;
207
- --pd-reset-html-width: 100vw;
208
- --pd-reset-html-min-height: 100vh;
209
- --pd-reset-html-min-width: 100vw;
210
- --pd-reset-body-margin: 0;
211
- --pd-reset-body-padding: 0;
212
- --pd-reset-body-height: 100vh;
213
- --pd-reset-body-min-height: 100vh;
214
- --pd-reset-body-width: 100vw;
215
- --pd-reset-body-min-width: 100vw;
216
- --pd-reset-box-sizing: border-box;
217
- --pd-reset-border-width: 0;
218
- --pd-reset-focus-outline: 0;
219
- --pd-reset-focus-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
220
- }
221
- .dark {
222
- --accent: #17171C;
223
- --accent-foreground: #DFDFE2;
224
- --background: #09090B;
225
- --background-green: #00471A;
226
- --background-green-on-hover: #006625;
227
- --background-info: #00123D;
228
- --background-info-on-hover: #001E66;
229
- --background-invert: #FFFFFF;
230
- --background-invert-light: #DFDFE2;
231
- --background-low: #17171C;
232
- --background-low-on-hover: #2F2F37;
233
- --background-orange: #331500;
234
- --background-orange-on-hover: #5C2500;
235
- --background-primary: #09090B;
236
- --background-red: #2D060D;
237
- --background-red-on-hover: #4C0B17;
238
- --background-secondary: #17171C;
239
- --background-system: #09090B;
240
- --background-tertiary: #2F2F37;
241
- --background-yellow: #3D2600;
242
- --background-yellow-on-hover: #5C3A00;
243
- --border: #4E4E5A;
244
- --border-blue: #709AFF;
245
- --border-blue-on-hover: #3772FF;
246
- --border-blue-subtle: #002680;
247
- --border-green: #00E052;
248
- --border-green-on-hover: #00B241;
249
- --border-green-subtle: #006625;
250
- --border-invert: #FFFFFF;
251
- --border-on-color: #09090B;
252
- --border-orange: #EC9C64;
253
- --border-orange-on-hover: #FF6800;
254
- --border-orange-subtle: #5C2500;
255
- --border-primary: #4E4E5A;
256
- --border-red: #E15C5C;
257
- --border-red-on-hover: #E12D4E;
258
- --border-red-subtle: #4C0B17;
259
- --border-secondary: #2F2F37;
260
- --border-subtle: #2F2F37;
261
- --border-yellow: #FFCA70;
262
- --border-yellow-on-hover: #FFAD22;
263
- --border-yellow-subtle: #5C3A00;
264
- --card: #17171C;
265
- --card-foreground: #DFDFE2;
266
- --color-black: #09090B;
267
- --color-white: #FFFFFF;
268
- --content-always-black: #09090B;
269
- --content-always-white: #FFFFFF;
270
- --content-blue: #709AFF;
271
- --content-blue-disabled: #002680;
272
- --content-blue-on-hover: #3772FF;
273
- --content-green: #00E052;
274
- --content-green-disabled: #008A32;
275
- --content-green-on-hover: #09FF63;
276
- --content-on-color: #09090B;
277
- --content-on-color-inverse: #EDEDED;
278
- --content-orange: #EC9C64;
279
- --content-orange-disabled: #7A3200;
280
- --content-orange-on-hover: #FFC9A3;
281
- --content-primary: #DFDFE2;
282
- --content-red: #E15C5C;
283
- --content-red-disabled: #7D1225;
284
- --content-red-on-hover: #F6C1CA;
285
- --content-secondary: #7E7E8B;
286
- --content-subtle: #4E4E5A;
287
- --content-yellow: #FFCA70;
288
- --content-yellow-disabled: #7A4D00;
289
- --content-yellow-on-hover: #FFD999;
290
- --destructive: #E15C5C;
291
- --destructive-foreground: #FFFFFF;
292
- --font-mono:
101
+ --pd-font-size2xl: 1.5rem;
102
+ --pd-font-size3xl: 1.875rem;
103
+ --pd-font-size4xl: 2.25rem;
104
+ --pd-font-size5xl: 3rem;
105
+ --pd-font-size-base: 1rem;
106
+ --pd-font-size-lg: 1.125rem;
107
+ --pd-font-size-sm: 0.875rem;
108
+ --pd-font-size-xl: 1.25rem;
109
+ --pd-font-size-xs: 0.75rem;
110
+ --pd-font-weight-bold: 700;
111
+ --pd-font-weight-medium: 500;
112
+ --pd-font-weight-normal: 400;
113
+ --pd-font-weight-semibold: 600;
114
+ --pd-input: #BEBEC1;
115
+ --pd-intent-danger: #C41C3B;
116
+ --pd-intent-danger-active: #7D1225;
117
+ --pd-intent-danger-bg: #FDF2F4;
118
+ --pd-intent-danger-bg-active: #FADBE1;
119
+ --pd-intent-danger-bg-hover: #FADBE1;
120
+ --pd-intent-danger-border: #C41C3B;
121
+ --pd-intent-danger-hover: #A11730;
122
+ --pd-intent-danger-text: #C41C3B;
123
+ --pd-intent-neutral: #60606C;
124
+ --pd-intent-neutral-active: #2F2F37;
125
+ --pd-intent-neutral-bg: #EDEDED;
126
+ --pd-intent-neutral-bg-active: #DFDFE2;
127
+ --pd-intent-neutral-bg-hover: #DFDFE2;
128
+ --pd-intent-neutral-border: #BEBEC1;
129
+ --pd-intent-neutral-hover: #4E4E5A;
130
+ --pd-intent-neutral-text: #17171C;
131
+ --pd-intent-primary: #60606C;
132
+ --pd-intent-primary-active: #2F2F37;
133
+ --pd-intent-primary-bg: #EDEDED;
134
+ --pd-intent-primary-bg-active: #DFDFE2;
135
+ --pd-intent-primary-bg-hover: #DFDFE2;
136
+ --pd-intent-primary-border: #BEBEC1;
137
+ --pd-intent-primary-hover: #4E4E5A;
138
+ --pd-intent-primary-text: #17171C;
139
+ --pd-intent-success: #00E052;
140
+ --pd-intent-success-active: #008A32;
141
+ --pd-intent-success-bg: #E0FFEC;
142
+ --pd-intent-success-bg-active: #8AFFB5;
143
+ --pd-intent-success-bg-hover: #BDFFD5;
144
+ --pd-intent-success-border: #00E052;
145
+ --pd-intent-success-hover: #00B241;
146
+ --pd-intent-success-text: #00B241;
147
+ --pd-intent-warning: #F09700;
148
+ --pd-intent-warning-active: #7A4D00;
149
+ --pd-intent-warning-bg: #FFF3EB;
150
+ --pd-intent-warning-bg-active: #FFE8C2;
151
+ --pd-intent-warning-bg-hover: #FFE1CC;
152
+ --pd-intent-warning-border: #F09700;
153
+ --pd-intent-warning-hover: #D68700;
154
+ --pd-intent-warning-text: #F09700;
155
+ --pd-line-height-normal: 1.5;
156
+ --pd-line-height-relaxed: 1.75;
157
+ --pd-line-height-tight: 1.25;
158
+ --pd-muted: #EDEDED;
159
+ --pd-muted-foreground: #BEBEC1;
160
+ --pd-popover: #EDEDED;
161
+ --pd-popover-foreground: #17171C;
162
+ --pd-primary: #60606C;
163
+ --pd-primary-foreground: #FFFFFF;
164
+ --pd-radius2xl: 1rem;
165
+ --pd-radius3xl: 1.5rem;
166
+ --pd-radius-base: 0.25rem;
167
+ --pd-radius-full: 9999px;
168
+ --pd-radius-lg: 0.5rem;
169
+ --pd-radius-md: 0.375rem;
170
+ --pd-radius-none: 0;
171
+ --pd-radius-sm: 0.125rem;
172
+ --pd-radius-xl: 0.75rem;
173
+ --pd-ring: #60606C;
174
+ --pd-secondary: #EDEDED;
175
+ --pd-secondary-foreground: #17171C;
176
+ --pd-shadow2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
177
+ --pd-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
178
+ --pd-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
179
+ --pd-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
180
+ --pd-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
181
+ --pd-shadow-none: none;
182
+ --pd-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
183
+ --pd-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
184
+ --pd-spacing0: 0;
185
+ --pd-spacing1: 0.25rem;
186
+ --pd-spacing10: 2.5rem;
187
+ --pd-spacing12: 3rem;
188
+ --pd-spacing16: 4rem;
189
+ --pd-spacing2: 0.5rem;
190
+ --pd-spacing20: 5rem;
191
+ --pd-spacing24: 6rem;
192
+ --pd-spacing3: 0.75rem;
193
+ --pd-spacing4: 1rem;
194
+ --pd-spacing5: 1.25rem;
195
+ --pd-spacing6: 1.5rem;
196
+ --pd-spacing8: 2rem;
197
+ --pd-surface-base: #FFFFFF;
198
+ --pd-surface-base-border: #BEBEC1;
199
+ --pd-surface-elevated: #EDEDED;
200
+ --pd-surface-elevated-border: #DFDFE2;
201
+ --pd-surface-overlay: rgba(0, 0, 0, 0.5);
202
+ --pd-text-body: #17171C;
203
+ --pd-text-disabled: #BEBEC1;
204
+ --pd-text-heading: #17171C;
205
+ --pd-text-muted: #BEBEC1;
206
+ --pd-z-dropdown: 1000;
207
+ --pd-z-fixed: 1030;
208
+ --pd-z-modal: 1050;
209
+ --pd-z-modal-backdrop: 1040;
210
+ --pd-z-popover: 1060;
211
+ --pd-z-sticky: 1020;
212
+ --pd-z-tooltip: 1070;
213
+ --accent: var(--pd-accent);
214
+ --accent-foreground: var(--pd-accent-foreground);
215
+ --background: var(--pd-background-primary);
216
+ --background-green: var(--pd-background-green);
217
+ --background-green-on-hover: var(--pd-background-green-on-hover);
218
+ --background-info: var(--pd-background-info);
219
+ --background-info-on-hover: var(--pd-background-info-on-hover);
220
+ --background-invert: var(--pd-background-invert);
221
+ --background-invert-light: var(--pd-background-invert-light);
222
+ --background-low: var(--pd-background-low);
223
+ --background-low-on-hover: var(--pd-background-low-on-hover);
224
+ --background-orange: var(--pd-background-orange);
225
+ --background-orange-on-hover: var(--pd-background-orange-on-hover);
226
+ --background-primary: var(--pd-background-primary);
227
+ --background-red: var(--pd-background-red);
228
+ --background-red-on-hover: var(--pd-background-red-on-hover);
229
+ --background-secondary: var(--pd-background-secondary);
230
+ --background-system: var(--pd-background-system);
231
+ --background-tertiary: var(--pd-background-tertiary);
232
+ --background-yellow: var(--pd-background-yellow);
233
+ --background-yellow-on-hover: var(--pd-background-yellow-on-hover);
234
+ --border: var(--pd-border-primary);
235
+ --border-blue: var(--pd-border-blue);
236
+ --border-blue-on-hover: var(--pd-border-blue-on-hover);
237
+ --border-blue-subtle: var(--pd-border-blue-subtle);
238
+ --border-green: var(--pd-border-green);
239
+ --border-green-on-hover: var(--pd-border-green-on-hover);
240
+ --border-green-subtle: var(--pd-border-green-subtle);
241
+ --border-invert: var(--pd-border-invert);
242
+ --border-on-color: var(--pd-border-on-color);
243
+ --border-orange: var(--pd-border-orange);
244
+ --border-orange-on-hover: var(--pd-border-orange-on-hover);
245
+ --border-orange-subtle: var(--pd-border-orange-subtle);
246
+ --border-primary: var(--pd-border-primary);
247
+ --border-red: var(--pd-border-red);
248
+ --border-red-on-hover: var(--pd-border-red-on-hover);
249
+ --border-red-subtle: var(--pd-border-red-subtle);
250
+ --border-secondary: var(--pd-border-secondary);
251
+ --border-subtle: var(--pd-border-subtle);
252
+ --border-yellow: var(--pd-border-yellow);
253
+ --border-yellow-on-hover: var(--pd-border-yellow-on-hover);
254
+ --border-yellow-subtle: var(--pd-border-yellow-subtle);
255
+ --card: var(--pd-card);
256
+ --card-foreground: var(--pd-card-foreground);
257
+ --color-black: var(--pd-color-black);
258
+ --color-white: var(--pd-color-white);
259
+ --content-always-black: var(--pd-content-always-black);
260
+ --content-always-white: var(--pd-content-always-white);
261
+ --content-blue: var(--pd-content-blue);
262
+ --content-blue-disabled: var(--pd-content-blue-disabled);
263
+ --content-blue-on-hover: var(--pd-content-blue-on-hover);
264
+ --content-green: var(--pd-content-green);
265
+ --content-green-disabled: var(--pd-content-green-disabled);
266
+ --content-green-on-hover: var(--pd-content-green-on-hover);
267
+ --content-on-color: var(--pd-content-on-color);
268
+ --content-on-color-inverse: var(--pd-content-on-color-inverse);
269
+ --content-orange: var(--pd-content-orange);
270
+ --content-orange-disabled: var(--pd-content-orange-disabled);
271
+ --content-orange-on-hover: var(--pd-content-orange-on-hover);
272
+ --content-primary: var(--pd-content-primary);
273
+ --content-red: var(--pd-content-red);
274
+ --content-red-disabled: var(--pd-content-red-disabled);
275
+ --content-red-on-hover: var(--pd-content-red-on-hover);
276
+ --content-secondary: var(--pd-content-secondary);
277
+ --content-subtle: var(--pd-content-subtle);
278
+ --content-yellow: var(--pd-content-yellow);
279
+ --content-yellow-disabled: var(--pd-content-yellow-disabled);
280
+ --content-yellow-on-hover: var(--pd-content-yellow-on-hover);
281
+ --destructive: var(--pd-destructive);
282
+ --destructive-foreground: var(--pd-destructive-foreground);
283
+ --font-mono: var(--pd-font-mono);
284
+ --font-sans: var(--pd-font-sans);
285
+ --font-size-2xl: var(--pd-font-size-2xl);
286
+ --font-size-3xl: var(--pd-font-size-3xl);
287
+ --font-size-4xl: var(--pd-font-size-4xl);
288
+ --font-size-5xl: var(--pd-font-size-5xl);
289
+ --font-size-base: var(--pd-font-size-base);
290
+ --font-size-lg: var(--pd-font-size-lg);
291
+ --font-size-sm: var(--pd-font-size-sm);
292
+ --font-size-xl: var(--pd-font-size-xl);
293
+ --font-size-xs: var(--pd-font-size-xs);
294
+ --font-weight-bold: var(--pd-font-weight-bold);
295
+ --font-weight-medium: var(--pd-font-weight-medium);
296
+ --font-weight-normal: var(--pd-font-weight-normal);
297
+ --font-weight-semibold: var(--pd-font-weight-semibold);
298
+ --foreground: var(--pd-foreground);
299
+ --input: var(--pd-input);
300
+ --intent-danger: var(--pd-intent-danger);
301
+ --intent-danger-active: var(--pd-intent-danger-active);
302
+ --intent-danger-bg: var(--pd-intent-danger-bg);
303
+ --intent-danger-bg-active: var(--pd-intent-danger-bg-active);
304
+ --intent-danger-bg-hover: var(--pd-intent-danger-bg-hover);
305
+ --intent-danger-border: var(--pd-intent-danger-border);
306
+ --intent-danger-hover: var(--pd-intent-danger-hover);
307
+ --intent-danger-text: var(--pd-intent-danger-text);
308
+ --intent-neutral: var(--pd-intent-neutral);
309
+ --intent-neutral-active: var(--pd-intent-neutral-active);
310
+ --intent-neutral-bg: var(--pd-intent-neutral-bg);
311
+ --intent-neutral-bg-active: var(--pd-intent-neutral-bg-active);
312
+ --intent-neutral-bg-hover: var(--pd-intent-neutral-bg-hover);
313
+ --intent-neutral-border: var(--pd-intent-neutral-border);
314
+ --intent-neutral-hover: var(--pd-intent-neutral-hover);
315
+ --intent-neutral-text: var(--pd-intent-neutral-text);
316
+ --intent-primary: var(--pd-intent-primary);
317
+ --intent-primary-active: var(--pd-intent-primary-active);
318
+ --intent-primary-bg: var(--pd-intent-primary-bg);
319
+ --intent-primary-bg-active: var(--pd-intent-primary-bg-active);
320
+ --intent-primary-bg-hover: var(--pd-intent-primary-bg-hover);
321
+ --intent-primary-border: var(--pd-intent-primary-border);
322
+ --intent-primary-hover: var(--pd-intent-primary-hover);
323
+ --intent-primary-text: var(--pd-intent-primary-text);
324
+ --intent-success: var(--pd-intent-success);
325
+ --intent-success-active: var(--pd-intent-success-active);
326
+ --intent-success-bg: var(--pd-intent-success-bg);
327
+ --intent-success-bg-active: var(--pd-intent-success-bg-active);
328
+ --intent-success-bg-hover: var(--pd-intent-success-bg-hover);
329
+ --intent-success-border: var(--pd-intent-success-border);
330
+ --intent-success-hover: var(--pd-intent-success-hover);
331
+ --intent-success-text: var(--pd-intent-success-text);
332
+ --intent-warning: var(--pd-intent-warning);
333
+ --intent-warning-active: var(--pd-intent-warning-active);
334
+ --intent-warning-bg: var(--pd-intent-warning-bg);
335
+ --intent-warning-bg-active: var(--pd-intent-warning-bg-active);
336
+ --intent-warning-bg-hover: var(--pd-intent-warning-bg-hover);
337
+ --intent-warning-border: var(--pd-intent-warning-border);
338
+ --intent-warning-hover: var(--pd-intent-warning-hover);
339
+ --intent-warning-text: var(--pd-intent-warning-text);
340
+ --line-height-normal: var(--pd-line-height-normal);
341
+ --line-height-relaxed: var(--pd-line-height-relaxed);
342
+ --line-height-tight: var(--pd-line-height-tight);
343
+ --muted: var(--pd-muted);
344
+ --muted-foreground: var(--pd-muted-foreground);
345
+ --popover: var(--pd-popover);
346
+ --popover-foreground: var(--pd-popover-foreground);
347
+ --primary: var(--pd-primary);
348
+ --primary-foreground: var(--pd-primary-foreground);
349
+ --radius: var(--pd-radius);
350
+ --radius-2xl: var(--pd-radius-2xl);
351
+ --radius-3xl: var(--pd-radius-3xl);
352
+ --radius-base: var(--pd-radius-base);
353
+ --radius-full: var(--pd-radius-full);
354
+ --radius-lg: var(--pd-radius-lg);
355
+ --radius-md: var(--pd-radius-md);
356
+ --radius-none: var(--pd-radius-none);
357
+ --radius-sm: var(--pd-radius-sm);
358
+ --radius-xl: var(--pd-radius-xl);
359
+ --ring: var(--pd-ring);
360
+ --secondary: var(--pd-secondary);
361
+ --secondary-foreground: var(--pd-secondary-foreground);
362
+ --shadow-2xl: var(--pd-shadow-2xl);
363
+ --shadow-base: var(--pd-shadow-base);
364
+ --shadow-inner: var(--pd-shadow-inner);
365
+ --shadow-lg: var(--pd-shadow-lg);
366
+ --shadow-md: var(--pd-shadow-md);
367
+ --shadow-none: var(--pd-shadow-none);
368
+ --shadow-sm: var(--pd-shadow-sm);
369
+ --shadow-xl: var(--pd-shadow-xl);
370
+ --spacing-0: var(--pd-spacing-0);
371
+ --spacing-1: var(--pd-spacing-1);
372
+ --spacing-10: var(--pd-spacing-10);
373
+ --spacing-12: var(--pd-spacing-12);
374
+ --spacing-16: var(--pd-spacing-16);
375
+ --spacing-2: var(--pd-spacing-2);
376
+ --spacing-20: var(--pd-spacing-20);
377
+ --spacing-24: var(--pd-spacing-24);
378
+ --spacing-3: var(--pd-spacing-3);
379
+ --spacing-4: var(--pd-spacing-4);
380
+ --spacing-5: var(--pd-spacing-5);
381
+ --spacing-6: var(--pd-spacing-6);
382
+ --spacing-8: var(--pd-spacing-8);
383
+ --surface-base: var(--pd-surface-base);
384
+ --surface-base-border: var(--pd-surface-base-border);
385
+ --surface-elevated: var(--pd-surface-elevated);
386
+ --surface-elevated-border: var(--pd-surface-elevated-border);
387
+ --surface-overlay: var(--pd-surface-overlay);
388
+ --text-body: var(--pd-text-body);
389
+ --text-disabled: var(--pd-text-disabled);
390
+ --text-heading: var(--pd-text-heading);
391
+ --text-muted: var(--pd-text-muted);
392
+ --z-dropdown: var(--pd-z-dropdown);
393
+ --z-fixed: var(--pd-z-fixed);
394
+ --z-modal: var(--pd-z-modal);
395
+ --z-modal-backdrop: var(--pd-z-modal-backdrop);
396
+ --z-popover: var(--pd-z-popover);
397
+ --z-sticky: var(--pd-z-sticky);
398
+ --z-tooltip: var(--pd-z-tooltip);
399
+ }
400
+ .pd-root.pd-dark {
401
+ --pd-background: 240 10% 4%;
402
+ --pd-foreground: 240 5% 88%;
403
+ --pd-primary: 240 5% 88%;
404
+ --pd-primary-foreground: 240 10% 4%;
405
+ --pd-secondary: 240 10% 10%;
406
+ --pd-secondary-foreground: 240 5% 88%;
407
+ --pd-muted: 240 10% 10%;
408
+ --pd-muted-foreground: 240 7% 33%;
409
+ --pd-border: 240 7% 33%;
410
+ --pd-input: 240 7% 33%;
411
+ --pd-ring: 240 5% 52%;
412
+ --pd-accent: #17171C;
413
+ --pd-accent-foreground: #DFDFE2;
414
+ --pd-background-green: #00471A;
415
+ --pd-background-green-on-hover: #006625;
416
+ --pd-background-info: #00123D;
417
+ --pd-background-info-on-hover: #001E66;
418
+ --pd-background-invert: #FFFFFF;
419
+ --pd-background-invert-light: #DFDFE2;
420
+ --pd-background-low: #17171C;
421
+ --pd-background-low-on-hover: #2F2F37;
422
+ --pd-background-orange: #331500;
423
+ --pd-background-orange-on-hover: #5C2500;
424
+ --pd-background-primary: #09090B;
425
+ --pd-background-red: #2D060D;
426
+ --pd-background-red-on-hover: #4C0B17;
427
+ --pd-background-secondary: #17171C;
428
+ --pd-background-system: #09090B;
429
+ --pd-background-tertiary: #2F2F37;
430
+ --pd-background-yellow: #3D2600;
431
+ --pd-background-yellow-on-hover: #5C3A00;
432
+ --pd-border-blue: #709AFF;
433
+ --pd-border-blue-on-hover: #3772FF;
434
+ --pd-border-blue-subtle: #002680;
435
+ --pd-border-green: #00E052;
436
+ --pd-border-green-on-hover: #00B241;
437
+ --pd-border-green-subtle: #006625;
438
+ --pd-border-invert: #FFFFFF;
439
+ --pd-border-on-color: #09090B;
440
+ --pd-border-orange: #EC9C64;
441
+ --pd-border-orange-on-hover: #FF6800;
442
+ --pd-border-orange-subtle: #5C2500;
443
+ --pd-border-primary: #4E4E5A;
444
+ --pd-border-red: #E15C5C;
445
+ --pd-border-red-on-hover: #E12D4E;
446
+ --pd-border-red-subtle: #4C0B17;
447
+ --pd-border-secondary: #2F2F37;
448
+ --pd-border-subtle: #2F2F37;
449
+ --pd-border-yellow: #FFCA70;
450
+ --pd-border-yellow-on-hover: #FFAD22;
451
+ --pd-border-yellow-subtle: #5C3A00;
452
+ --pd-card: #17171C;
453
+ --pd-card-foreground: #DFDFE2;
454
+ --pd-color-black: #09090B;
455
+ --pd-color-white: #FFFFFF;
456
+ --pd-content-always-black: #09090B;
457
+ --pd-content-always-white: #FFFFFF;
458
+ --pd-content-blue: #709AFF;
459
+ --pd-content-blue-disabled: #002680;
460
+ --pd-content-blue-on-hover: #3772FF;
461
+ --pd-content-green: #00E052;
462
+ --pd-content-green-disabled: #008A32;
463
+ --pd-content-green-on-hover: #09FF63;
464
+ --pd-content-on-color: #09090B;
465
+ --pd-content-on-color-inverse: #FFFFFF;
466
+ --pd-content-orange: #EC9C64;
467
+ --pd-content-orange-disabled: #7A3200;
468
+ --pd-content-orange-on-hover: #FFC9A3;
469
+ --pd-content-primary: #DFDFE2;
470
+ --pd-content-red: #E15C5C;
471
+ --pd-content-red-disabled: #7D1225;
472
+ --pd-content-red-on-hover: #F6C1CA;
473
+ --pd-content-secondary: #7E7E8B;
474
+ --pd-content-subtle: #4E4E5A;
475
+ --pd-content-yellow: #FFCA70;
476
+ --pd-content-yellow-disabled: #7A4D00;
477
+ --pd-content-yellow-on-hover: #FFD999;
478
+ --pd-destructive: #E15C5C;
479
+ --pd-destructive-foreground: #FFFFFF;
480
+ --pd-font-mono:
293
481
  Gist Mono,
294
482
  Menlo,
295
483
  Monaco,
@@ -297,7 +485,7 @@
297
485
  Liberation Mono,
298
486
  Courier New,
299
487
  monospace;
300
- --font-sans:
488
+ --pd-font-sans:
301
489
  Gist,
302
490
  -apple-system,
303
491
  BlinkMacSystemFont,
@@ -307,129 +495,173 @@
307
495
  Ubuntu,
308
496
  Cantarell,
309
497
  sans-serif;
310
- --font-size-2xl: 1.5rem;
311
- --font-size-3xl: 1.875rem;
312
- --font-size-4xl: 2.25rem;
313
- --font-size-5xl: 3rem;
314
- --font-size-base: 1rem;
315
- --font-size-lg: 1.125rem;
316
- --font-size-sm: 0.875rem;
317
- --font-size-xl: 1.25rem;
318
- --font-size-xs: 0.75rem;
319
- --font-weight-bold: 700;
320
- --font-weight-medium: 500;
321
- --font-weight-normal: 400;
322
- --font-weight-semibold: 600;
323
- --foreground: #DFDFE2;
324
- --input: #4E4E5A;
325
- --intent-danger: #E15C5C;
326
- --intent-danger-active: #E12D4E;
327
- --intent-danger-bg: #2D060D;
328
- --intent-danger-bg-active: #4C0B17;
329
- --intent-danger-bg-hover: #4C0B17;
330
- --intent-danger-border: #E15C5C;
331
- --intent-danger-hover: #F6C1CA;
332
- --intent-danger-text: #E15C5C;
333
- --intent-neutral: #7E7E8B;
334
- --intent-neutral-active: #EDEDED;
335
- --intent-neutral-bg: #17171C;
336
- --intent-neutral-bg-active: #2F2F37;
337
- --intent-neutral-bg-hover: #2F2F37;
338
- --intent-neutral-border: #4E4E5A;
339
- --intent-neutral-hover: #DFDFE2;
340
- --intent-neutral-text: #DFDFE2;
341
- --intent-primary: #7E7E8B;
342
- --intent-primary-active: #EDEDED;
343
- --intent-primary-bg: #17171C;
344
- --intent-primary-bg-active: #2F2F37;
345
- --intent-primary-bg-hover: #2F2F37;
346
- --intent-primary-border: #4E4E5A;
347
- --intent-primary-hover: #DFDFE2;
348
- --intent-primary-text: #DFDFE2;
349
- --intent-success: #00E052;
350
- --intent-success-active: #00B241;
351
- --intent-success-bg: #00471A;
352
- --intent-success-bg-active: #008A32;
353
- --intent-success-bg-hover: #006625;
354
- --intent-success-border: #00E052;
355
- --intent-success-hover: #09FF63;
356
- --intent-success-text: #00E052;
357
- --intent-warning: #FFCA70;
358
- --intent-warning-active: #FFAD22;
359
- --intent-warning-bg: #3D2600;
360
- --intent-warning-bg-active: #5C3A00;
361
- --intent-warning-bg-hover: #5C3A00;
362
- --intent-warning-border: #FFCA70;
363
- --intent-warning-hover: #FFD999;
364
- --intent-warning-text: #FFCA70;
365
- --line-height-normal: 1.5;
366
- --line-height-relaxed: 1.75;
367
- --line-height-tight: 1.25;
368
- --muted: #17171C;
369
- --muted-foreground: #4E4E5A;
370
- --popover: #17171C;
371
- --popover-foreground: #DFDFE2;
372
- --primary: #7E7E8B;
373
- --primary-foreground: #FFFFFF;
374
- --radius: 0.375rem;
375
- --radius-2xl: 1rem;
376
- --radius-3xl: 1.5rem;
377
- --radius-base: 0.25rem;
378
- --radius-full: 9999px;
379
- --radius-lg: 0.5rem;
380
- --radius-md: 0.375rem;
381
- --radius-none: 0;
382
- --radius-sm: 0.125rem;
383
- --radius-xl: 0.75rem;
384
- --ring: #7E7E8B;
385
- --secondary: #17171C;
386
- --secondary-foreground: #DFDFE2;
387
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
388
- --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
389
- --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
390
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
391
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
392
- --shadow-none: none;
393
- --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
394
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
395
- --spacing-0: 0;
396
- --spacing-1: 0.25rem;
397
- --spacing-10: 2.5rem;
398
- --spacing-12: 3rem;
399
- --spacing-16: 4rem;
400
- --spacing-2: 0.5rem;
401
- --spacing-20: 5rem;
402
- --spacing-24: 6rem;
403
- --spacing-3: 0.75rem;
404
- --spacing-4: 1rem;
405
- --spacing-5: 1.25rem;
406
- --spacing-6: 1.5rem;
407
- --spacing-8: 2rem;
408
- --surface-base: #09090B;
409
- --surface-base-border: #4E4E5A;
410
- --surface-elevated: #17171C;
411
- --surface-elevated-border: #2F2F37;
412
- --surface-overlay: rgba(0, 0, 0, 0.7);
413
- --text-body: #DFDFE2;
414
- --text-disabled: #60606C;
415
- --text-heading: #DFDFE2;
416
- --text-muted: #4E4E5A;
417
- --z-dropdown: 1000;
418
- --z-fixed: 1030;
419
- --z-modal: 1050;
420
- --z-modal-backdrop: 1040;
421
- --z-popover: 1060;
422
- --z-sticky: 1020;
423
- --z-tooltip: 1070;
424
- }
425
- button:focus-visible,
426
- input:focus-visible,
427
- select:focus-visible,
428
- textarea:focus-visible {
429
- outline: 2px solid var(--intent-primary);
498
+ --pd-font-size2xl: 1.5rem;
499
+ --pd-font-size3xl: 1.875rem;
500
+ --pd-font-size4xl: 2.25rem;
501
+ --pd-font-size5xl: 3rem;
502
+ --pd-font-size-base: 1rem;
503
+ --pd-font-size-lg: 1.125rem;
504
+ --pd-font-size-sm: 0.875rem;
505
+ --pd-font-size-xl: 1.25rem;
506
+ --pd-font-size-xs: 0.75rem;
507
+ --pd-font-weight-bold: 700;
508
+ --pd-font-weight-medium: 500;
509
+ --pd-font-weight-normal: 400;
510
+ --pd-font-weight-semibold: 600;
511
+ --pd-input: #4E4E5A;
512
+ --pd-intent-danger: #E15C5C;
513
+ --pd-intent-danger-active: #E12D4E;
514
+ --pd-intent-danger-bg: #2D060D;
515
+ --pd-intent-danger-bg-active: #4C0B17;
516
+ --pd-intent-danger-bg-hover: #4C0B17;
517
+ --pd-intent-danger-border: #E15C5C;
518
+ --pd-intent-danger-hover: #F6C1CA;
519
+ --pd-intent-danger-text: #E15C5C;
520
+ --pd-intent-neutral: #7E7E8B;
521
+ --pd-intent-neutral-active: #EDEDED;
522
+ --pd-intent-neutral-bg: #17171C;
523
+ --pd-intent-neutral-bg-active: #2F2F37;
524
+ --pd-intent-neutral-bg-hover: #2F2F37;
525
+ --pd-intent-neutral-border: #4E4E5A;
526
+ --pd-intent-neutral-hover: #DFDFE2;
527
+ --pd-intent-neutral-text: #DFDFE2;
528
+ --pd-intent-primary: #7E7E8B;
529
+ --pd-intent-primary-active: #EDEDED;
530
+ --pd-intent-primary-bg: #17171C;
531
+ --pd-intent-primary-bg-active: #2F2F37;
532
+ --pd-intent-primary-bg-hover: #2F2F37;
533
+ --pd-intent-primary-border: #4E4E5A;
534
+ --pd-intent-primary-hover: #DFDFE2;
535
+ --pd-intent-primary-text: #DFDFE2;
536
+ --pd-intent-success: #00E052;
537
+ --pd-intent-success-active: #00B241;
538
+ --pd-intent-success-bg: #00471A;
539
+ --pd-intent-success-bg-active: #008A32;
540
+ --pd-intent-success-bg-hover: #006625;
541
+ --pd-intent-success-border: #00E052;
542
+ --pd-intent-success-hover: #09FF63;
543
+ --pd-intent-success-text: #00E052;
544
+ --pd-intent-warning: #FFCA70;
545
+ --pd-intent-warning-active: #FFAD22;
546
+ --pd-intent-warning-bg: #3D2600;
547
+ --pd-intent-warning-bg-active: #5C3A00;
548
+ --pd-intent-warning-bg-hover: #5C3A00;
549
+ --pd-intent-warning-border: #FFCA70;
550
+ --pd-intent-warning-hover: #FFD999;
551
+ --pd-intent-warning-text: #FFCA70;
552
+ --pd-line-height-normal: 1.5;
553
+ --pd-line-height-relaxed: 1.75;
554
+ --pd-line-height-tight: 1.25;
555
+ --pd-muted: #17171C;
556
+ --pd-muted-foreground: #4E4E5A;
557
+ --pd-popover: #17171C;
558
+ --pd-popover-foreground: #DFDFE2;
559
+ --pd-primary: #7E7E8B;
560
+ --pd-primary-foreground: #FFFFFF;
561
+ --pd-radius2xl: 1rem;
562
+ --pd-radius3xl: 1.5rem;
563
+ --pd-radius-base: 0.25rem;
564
+ --pd-radius-full: 9999px;
565
+ --pd-radius-lg: 0.5rem;
566
+ --pd-radius-md: 0.375rem;
567
+ --pd-radius-none: 0;
568
+ --pd-radius-sm: 0.125rem;
569
+ --pd-radius-xl: 0.75rem;
570
+ --pd-ring: #7E7E8B;
571
+ --pd-secondary: #17171C;
572
+ --pd-secondary-foreground: #DFDFE2;
573
+ --pd-shadow2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
574
+ --pd-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
575
+ --pd-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
576
+ --pd-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
577
+ --pd-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
578
+ --pd-shadow-none: none;
579
+ --pd-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
580
+ --pd-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
581
+ --pd-spacing0: 0;
582
+ --pd-spacing1: 0.25rem;
583
+ --pd-spacing10: 2.5rem;
584
+ --pd-spacing12: 3rem;
585
+ --pd-spacing16: 4rem;
586
+ --pd-spacing2: 0.5rem;
587
+ --pd-spacing20: 5rem;
588
+ --pd-spacing24: 6rem;
589
+ --pd-spacing3: 0.75rem;
590
+ --pd-spacing4: 1rem;
591
+ --pd-spacing5: 1.25rem;
592
+ --pd-spacing6: 1.5rem;
593
+ --pd-spacing8: 2rem;
594
+ --pd-surface-base: #09090B;
595
+ --pd-surface-base-border: #4E4E5A;
596
+ --pd-surface-elevated: #17171C;
597
+ --pd-surface-elevated-border: #2F2F37;
598
+ --pd-surface-overlay: rgba(0, 0, 0, 0.7);
599
+ --pd-text-body: #DFDFE2;
600
+ --pd-text-disabled: #60606C;
601
+ --pd-text-heading: #DFDFE2;
602
+ --pd-text-muted: #4E4E5A;
603
+ --pd-z-dropdown: 1000;
604
+ --pd-z-fixed: 1030;
605
+ --pd-z-modal: 1050;
606
+ --pd-z-modal-backdrop: 1040;
607
+ --pd-z-popover: 1060;
608
+ --pd-z-sticky: 1020;
609
+ --pd-z-tooltip: 1070;
610
+ }
611
+ .pd-root {
612
+ font-family: var(--pd-font-sans, Gist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
613
+ color: var(--pd-text-body, var(--pd-content-primary));
614
+ background: var(--pd-background-primary);
615
+ }
616
+ .pd-root button {
617
+ font-family: var(--pd-font-sans, Gist, sans-serif);
618
+ box-shadow: none !important;
619
+ -o-border-image: none !important;
620
+ border-image: none !important;
621
+ text-shadow: none !important;
622
+ }
623
+ .pd-root button[class*=pd-border] {
624
+ border-style: solid !important;
625
+ -o-border-image: none !important;
626
+ border-image: none !important;
627
+ box-shadow: none !important;
628
+ }
629
+ .pd-root input,
630
+ .pd-root textarea,
631
+ .pd-root select {
632
+ font: inherit;
633
+ color: inherit;
634
+ }
635
+ .pd-root button:disabled,
636
+ .pd-root button[aria-disabled=true] {
637
+ pointer-events: none !important;
638
+ cursor: not-allowed !important;
639
+ }
640
+ .pd-root button:disabled:hover,
641
+ .pd-root button[aria-disabled=true]:hover,
642
+ .pd-root button:disabled:active,
643
+ .pd-root button[aria-disabled=true]:active {
644
+ background-color: inherit !important;
645
+ color: inherit !important;
646
+ border-color: inherit !important;
647
+ transform: none !important;
648
+ opacity: inherit !important;
649
+ }
650
+ .pd-root button:focus-visible,
651
+ .pd-root input:focus-visible,
652
+ .pd-root select:focus-visible,
653
+ .pd-root textarea:focus-visible {
654
+ outline: 2px solid var(--pd-intent-primary, var(--pd-border-blue));
430
655
  outline-offset: 2px;
431
656
  }
432
- .sr-only {
657
+ .pd-root button:disabled:focus-visible,
658
+ .pd-root button[aria-disabled=true]:focus-visible {
659
+ outline: none !important;
660
+ }
661
+ .pd-root button[aria-busy=true][class*=pd-bg-transparent][class*="pd-bg-[var(--pd-background-tertiary)]"] {
662
+ background-color: var(--pd-background-tertiary) !important;
663
+ }
664
+ .pd-sr-only {
433
665
  position: absolute;
434
666
  width: 1px;
435
667
  height: 1px;
@@ -440,39 +672,451 @@ textarea:focus-visible {
440
672
  white-space: nowrap;
441
673
  border-width: 0;
442
674
  }
443
- .no-scrollbar::-webkit-scrollbar {
444
- display: none;
675
+ .pd-absolute {
676
+ position: absolute;
677
+ }
678
+ .pd-relative {
679
+ position: relative;
680
+ }
681
+ .pd-bottom-1 {
682
+ bottom: 0.25rem;
683
+ }
684
+ .pd-left-1\/2 {
685
+ left: 50%;
686
+ }
687
+ .pd-mx-auto {
688
+ margin-left: auto;
689
+ margin-right: auto;
690
+ }
691
+ .pd-ml-1\.5 {
692
+ margin-left: 0.375rem;
693
+ }
694
+ .pd-ml-2 {
695
+ margin-left: 0.5rem;
696
+ }
697
+ .pd-ml-2\.5 {
698
+ margin-left: 0.625rem;
699
+ }
700
+ .pd-mr-1\.5 {
701
+ margin-right: 0.375rem;
702
+ }
703
+ .pd-mr-2 {
704
+ margin-right: 0.5rem;
705
+ }
706
+ .pd-mr-2\.5 {
707
+ margin-right: 0.625rem;
708
+ }
709
+ .pd-flex {
710
+ display: flex;
711
+ }
712
+ .pd-inline-flex {
713
+ display: inline-flex;
714
+ }
715
+ .pd-grid {
716
+ display: grid;
717
+ }
718
+ .pd-h-10 {
719
+ height: 2.5rem;
720
+ }
721
+ .pd-h-12 {
722
+ height: 3rem;
723
+ }
724
+ .pd-h-3 {
725
+ height: 0.75rem;
726
+ }
727
+ .pd-h-4 {
728
+ height: 1rem;
729
+ }
730
+ .pd-h-5 {
731
+ height: 1.25rem;
732
+ }
733
+ .pd-h-8 {
734
+ height: 2rem;
735
+ }
736
+ .pd-min-h-\[100px\] {
737
+ min-height: 100px;
738
+ }
739
+ .pd-min-h-screen {
740
+ min-height: 100vh;
741
+ }
742
+ .pd-w-3 {
743
+ width: 0.75rem;
744
+ }
745
+ .pd-w-4 {
746
+ width: 1rem;
747
+ }
748
+ .pd-w-5 {
749
+ width: 1.25rem;
750
+ }
751
+ .pd-w-full {
752
+ width: 100%;
753
+ }
754
+ .pd-max-w-\[1400px\] {
755
+ max-width: 1400px;
756
+ }
757
+ .pd-max-w-md {
758
+ max-width: 28rem;
759
+ }
760
+ .pd--translate-x-1\/2 {
761
+ --tw-translate-x: -50%;
762
+ 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));
763
+ }
764
+ @keyframes pd-spin {
765
+ to {
766
+ transform: rotate(360deg);
767
+ }
768
+ }
769
+ .pd-animate-spin {
770
+ animation: pd-spin 1s linear infinite;
771
+ }
772
+ .pd-grid-cols-\[150px_repeat\(5\,1fr\)\] {
773
+ grid-template-columns: 150px repeat(5, 1fr);
774
+ }
775
+ .pd-flex-row {
776
+ flex-direction: row;
777
+ }
778
+ .pd-flex-col {
779
+ flex-direction: column;
780
+ }
781
+ .pd-flex-wrap {
782
+ flex-wrap: wrap;
783
+ }
784
+ .pd-items-start {
785
+ align-items: flex-start;
786
+ }
787
+ .pd-items-end {
788
+ align-items: flex-end;
789
+ }
790
+ .pd-items-center {
791
+ align-items: center;
792
+ }
793
+ .pd-justify-start {
794
+ justify-content: flex-start;
795
+ }
796
+ .pd-justify-end {
797
+ justify-content: flex-end;
798
+ }
799
+ .pd-justify-center {
800
+ justify-content: center;
801
+ }
802
+ .pd-justify-between {
803
+ justify-content: space-between;
804
+ }
805
+ .pd-gap-1 {
806
+ gap: 0.25rem;
807
+ }
808
+ .pd-gap-2 {
809
+ gap: 0.5rem;
810
+ }
811
+ .pd-gap-3 {
812
+ gap: 0.75rem;
813
+ }
814
+ .pd-gap-4 {
815
+ gap: 1rem;
816
+ }
817
+ .pd-gap-6 {
818
+ gap: 1.5rem;
819
+ }
820
+ .pd-gap-8 {
821
+ gap: 2rem;
822
+ }
823
+ .pd-gap-x-6 {
824
+ -moz-column-gap: 1.5rem;
825
+ column-gap: 1.5rem;
826
+ }
827
+ .pd-space-y-4 > :not([hidden]) ~ :not([hidden]) {
828
+ --tw-space-y-reverse: 0;
829
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
830
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
831
+ }
832
+ .pd-whitespace-nowrap {
833
+ white-space: nowrap;
834
+ }
835
+ .pd-rounded-\[var\(--pd-radius-base\)\] {
836
+ border-radius: var(--pd-radius-base);
837
+ }
838
+ .pd-rounded-full {
839
+ border-radius: 9999px;
840
+ }
841
+ .pd-rounded-lg {
842
+ border-radius: var(--pd-radius);
843
+ }
844
+ .pd-rounded-md {
845
+ border-radius: calc(var(--pd-radius) - 2px);
846
+ }
847
+ .pd-rounded-none {
848
+ border-radius: 0px;
849
+ }
850
+ .pd-rounded-sm {
851
+ border-radius: calc(var(--pd-radius) - 4px);
852
+ }
853
+ .pd-border {
854
+ border-width: 1px;
855
+ }
856
+ .pd-border-0 {
857
+ border-width: 0px;
858
+ }
859
+ .pd-border-\[var\(--pd-border-secondary\)\] {
860
+ border-color: var(--pd-border-secondary);
861
+ }
862
+ .pd-border-\[var\(--pd-intent-danger-border\)\] {
863
+ border-color: var(--pd-intent-danger-border);
445
864
  }
446
- .no-scrollbar {
447
- -ms-overflow-style: none;
448
- scrollbar-width: none;
865
+ .pd-border-\[var\(--pd-intent-neutral-border\)\] {
866
+ border-color: var(--pd-intent-neutral-border);
449
867
  }
450
- .backdrop-blur-sm {
451
- backdrop-filter: blur(4px);
868
+ .pd-border-\[var\(--pd-intent-success-border\)\] {
869
+ border-color: var(--pd-intent-success-border);
452
870
  }
453
- .backdrop-blur {
454
- backdrop-filter: blur(8px);
871
+ .pd-border-\[var\(--pd-intent-warning-border\)\] {
872
+ border-color: var(--pd-intent-warning-border);
455
873
  }
456
- .transition-all {
874
+ .\!pd-bg-\[var\(--pd-background-tertiary\)\] {
875
+ background-color: var(--pd-background-tertiary) !important;
876
+ }
877
+ .pd-bg-\[var\(--pd-background-invert\)\] {
878
+ background-color: var(--pd-background-invert);
879
+ }
880
+ .pd-bg-\[var\(--pd-background-primary\)\] {
881
+ background-color: var(--pd-background-primary);
882
+ }
883
+ .pd-bg-\[var\(--pd-background-red\)\] {
884
+ background-color: var(--pd-background-red);
885
+ }
886
+ .pd-bg-\[var\(--pd-background-tertiary\)\] {
887
+ background-color: var(--pd-background-tertiary);
888
+ }
889
+ .pd-bg-\[var\(--pd-intent-danger-bg\)\] {
890
+ background-color: var(--pd-intent-danger-bg);
891
+ }
892
+ .pd-bg-\[var\(--pd-intent-neutral-bg\)\] {
893
+ background-color: var(--pd-intent-neutral-bg);
894
+ }
895
+ .pd-bg-\[var\(--pd-intent-success-bg\)\] {
896
+ background-color: var(--pd-intent-success-bg);
897
+ }
898
+ .pd-bg-\[var\(--pd-intent-warning-bg\)\] {
899
+ background-color: var(--pd-intent-warning-bg);
900
+ }
901
+ .pd-bg-transparent {
902
+ background-color: transparent;
903
+ }
904
+ .pd-p-12 {
905
+ padding: 3rem;
906
+ }
907
+ .pd-p-5 {
908
+ padding: 1.25rem;
909
+ }
910
+ .pd-px-3 {
911
+ padding-left: 0.75rem;
912
+ padding-right: 0.75rem;
913
+ }
914
+ .pd-px-4 {
915
+ padding-left: 1rem;
916
+ padding-right: 1rem;
917
+ }
918
+ .pd-px-6 {
919
+ padding-left: 1.5rem;
920
+ padding-right: 1.5rem;
921
+ }
922
+ .pd-py-3 {
923
+ padding-top: 0.75rem;
924
+ padding-bottom: 0.75rem;
925
+ }
926
+ .pd-py-4 {
927
+ padding-top: 1rem;
928
+ padding-bottom: 1rem;
929
+ }
930
+ .pd-text-center {
931
+ text-align: center;
932
+ }
933
+ .pd-text-\[10px\] {
934
+ font-size: 10px;
935
+ }
936
+ .pd-text-base {
937
+ font-size: 1rem;
938
+ line-height: 1.5rem;
939
+ }
940
+ .pd-text-lg {
941
+ font-size: 1.125rem;
942
+ line-height: 1.75rem;
943
+ }
944
+ .pd-text-sm {
945
+ font-size: 0.875rem;
946
+ line-height: 1.25rem;
947
+ }
948
+ .pd-text-xs {
949
+ font-size: 0.75rem;
950
+ line-height: 1rem;
951
+ }
952
+ .pd-font-bold {
953
+ font-weight: 700;
954
+ }
955
+ .pd-font-medium {
956
+ font-weight: 500;
957
+ }
958
+ .pd-font-semibold {
959
+ font-weight: 600;
960
+ }
961
+ .pd-text-\[var\(--pd-content-on-color\)\] {
962
+ color: var(--pd-content-on-color);
963
+ }
964
+ .pd-text-\[var\(--pd-content-red\)\] {
965
+ color: var(--pd-content-red);
966
+ }
967
+ .pd-text-\[var\(--pd-content-secondary\)\] {
968
+ color: var(--pd-content-secondary);
969
+ }
970
+ .pd-text-\[var\(--pd-content-subtle\)\] {
971
+ color: var(--pd-content-subtle);
972
+ }
973
+ .pd-text-\[var\(--pd-destructive-foreground\)\] {
974
+ color: var(--pd-destructive-foreground);
975
+ }
976
+ .pd-text-\[var\(--pd-intent-danger-text\)\] {
977
+ color: var(--pd-intent-danger-text);
978
+ }
979
+ .pd-text-\[var\(--pd-intent-neutral-text\)\] {
980
+ color: var(--pd-intent-neutral-text);
981
+ }
982
+ .pd-text-\[var\(--pd-intent-success-text\)\] {
983
+ color: var(--pd-intent-success-text);
984
+ }
985
+ .pd-text-\[var\(--pd-intent-warning-text\)\] {
986
+ color: var(--pd-intent-warning-text);
987
+ }
988
+ .pd-shadow-none {
989
+ --tw-shadow: 0 0 #0000;
990
+ --tw-shadow-colored: 0 0 #0000;
991
+ box-shadow:
992
+ var(--tw-ring-offset-shadow, 0 0 #0000),
993
+ var(--tw-ring-shadow, 0 0 #0000),
994
+ var(--tw-shadow);
995
+ }
996
+ .pd-transition-all {
997
+ transition-property: all;
998
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
999
+ transition-duration: 150ms;
1000
+ }
1001
+ .pd-transition-colors {
1002
+ transition-property:
1003
+ color,
1004
+ background-color,
1005
+ border-color,
1006
+ text-decoration-color,
1007
+ fill,
1008
+ stroke;
1009
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1010
+ transition-duration: 150ms;
1011
+ }
1012
+ .pd-sr-only {
1013
+ position: absolute;
1014
+ width: 1px;
1015
+ height: 1px;
1016
+ padding: 0;
1017
+ margin: -1px;
1018
+ overflow: hidden;
1019
+ clip: rect(0, 0, 0, 0);
1020
+ white-space: nowrap;
1021
+ border-width: 0;
1022
+ }
1023
+ .pd-transition-all {
457
1024
  transition: all 0.15s ease-in-out;
458
1025
  }
459
- .transition-colors {
1026
+ .pd-transition-colors {
460
1027
  transition:
461
1028
  color 0.15s ease-in-out,
462
1029
  background-color 0.15s ease-in-out,
463
1030
  border-color 0.15s ease-in-out;
464
1031
  }
465
- .opacity-50 {
466
- opacity: 0.5;
1032
+ .pd-animate-spin {
1033
+ animation: pd-spin 1s linear infinite;
1034
+ }
1035
+ @keyframes pd-spin {
1036
+ from {
1037
+ transform: rotate(0deg);
1038
+ }
1039
+ to {
1040
+ transform: rotate(360deg);
1041
+ }
1042
+ }
1043
+ .pd-root button[class*=pd-border] {
1044
+ border-style: solid !important;
1045
+ -o-border-image: none !important;
1046
+ border-image: none !important;
1047
+ box-shadow: none !important;
1048
+ text-shadow: none !important;
1049
+ }
1050
+ .\[font-family\:var\(--pd-font-sans\,Gist\,sans-serif\)\] {
1051
+ font-family: var(--pd-font-sans,Gist,sans-serif);
1052
+ }
1053
+ .hover\:pd-bg-\[var\(--pd-background-invert-light\)\]:hover {
1054
+ background-color: var(--pd-background-invert-light);
1055
+ }
1056
+ .hover\:pd-bg-\[var\(--pd-background-low\)\]:hover {
1057
+ background-color: var(--pd-background-low);
1058
+ }
1059
+ .hover\:pd-bg-\[var\(--pd-background-red-on-hover\)\]:hover {
1060
+ background-color: var(--pd-background-red-on-hover);
1061
+ }
1062
+ .hover\:pd-bg-\[var\(--pd-intent-danger-bg\)\]:hover {
1063
+ background-color: var(--pd-intent-danger-bg);
1064
+ }
1065
+ .hover\:pd-bg-\[var\(--pd-intent-danger-bg-hover\)\]:hover {
1066
+ background-color: var(--pd-intent-danger-bg-hover);
1067
+ }
1068
+ .hover\:pd-bg-\[var\(--pd-intent-neutral-bg-hover\)\]:hover {
1069
+ background-color: var(--pd-intent-neutral-bg-hover);
1070
+ }
1071
+ .hover\:pd-bg-\[var\(--pd-intent-success-bg\)\]:hover {
1072
+ background-color: var(--pd-intent-success-bg);
1073
+ }
1074
+ .hover\:pd-bg-\[var\(--pd-intent-success-bg-hover\)\]:hover {
1075
+ background-color: var(--pd-intent-success-bg-hover);
1076
+ }
1077
+ .hover\:pd-bg-\[var\(--pd-intent-warning-bg\)\]:hover {
1078
+ background-color: var(--pd-intent-warning-bg);
1079
+ }
1080
+ .hover\:pd-bg-\[var\(--pd-intent-warning-bg-hover\)\]:hover {
1081
+ background-color: var(--pd-intent-warning-bg-hover);
1082
+ }
1083
+ .hover\:pd-text-\[var\(--pd-content-primary\)\]:hover {
1084
+ color: var(--pd-content-primary);
1085
+ }
1086
+ .hover\:pd-text-\[var\(--pd-content-red-on-hover\)\]:hover {
1087
+ color: var(--pd-content-red-on-hover);
1088
+ }
1089
+ .hover\:pd-text-\[var\(--pd-intent-danger-hover\)\]:hover {
1090
+ color: var(--pd-intent-danger-hover);
1091
+ }
1092
+ .hover\:pd-text-\[var\(--pd-intent-neutral-hover\)\]:hover {
1093
+ color: var(--pd-intent-neutral-hover);
1094
+ }
1095
+ .hover\:pd-text-\[var\(--pd-intent-success-hover\)\]:hover {
1096
+ color: var(--pd-intent-success-hover);
1097
+ }
1098
+ .hover\:pd-text-\[var\(--pd-intent-warning-hover\)\]:hover {
1099
+ color: var(--pd-intent-warning-hover);
1100
+ }
1101
+ .active\:pd-bg-\[var\(--pd-background-invert\)\]:active {
1102
+ background-color: var(--pd-background-invert);
1103
+ }
1104
+ .active\:pd-bg-\[var\(--pd-background-low-on-hover\)\]:active {
1105
+ background-color: var(--pd-background-low-on-hover);
1106
+ }
1107
+ .active\:pd-bg-\[var\(--pd-intent-danger-bg-active\)\]:active {
1108
+ background-color: var(--pd-intent-danger-bg-active);
1109
+ }
1110
+ .active\:pd-bg-\[var\(--pd-intent-neutral-bg-active\)\]:active {
1111
+ background-color: var(--pd-intent-neutral-bg-active);
467
1112
  }
468
- .opacity-60 {
469
- opacity: 0.6;
1113
+ .active\:pd-bg-\[var\(--pd-intent-success-bg-active\)\]:active {
1114
+ background-color: var(--pd-intent-success-bg-active);
470
1115
  }
471
- .opacity-80 {
472
- opacity: 0.8;
1116
+ .active\:pd-bg-\[var\(--pd-intent-warning-bg-active\)\]:active {
1117
+ background-color: var(--pd-intent-warning-bg-active);
473
1118
  }
474
- button {
475
- font-family: inherit;
476
- font-size: inherit;
1119
+ .active\:pd-text-\[var\(--pd-content-primary\)\]:active {
1120
+ color: var(--pd-content-primary);
477
1121
  }
478
1122
  /*# sourceMappingURL=index.css.map */