@abhir9/pd-design-system 0.1.8 → 0.1.10
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/index.cjs +23 -18
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +272 -10
- package/dist/index.d.cts +28 -25
- package/dist/index.d.ts +28 -25
- package/dist/index.js +21 -19
- package/dist/index.js.map +1 -1
- package/dist/styles.css +317 -6
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1,16 +1,216 @@
|
|
|
1
1
|
@tailwind base;
|
|
2
2
|
@tailwind components;
|
|
3
3
|
@tailwind utilities;
|
|
4
|
+
/* Note: @tailwind utilities is required for @layer utilities to work, but won't generate utilities
|
|
5
|
+
since we don't use Tailwind utility classes in this CSS file. Consumer's Tailwind will generate utilities. */
|
|
4
6
|
|
|
5
7
|
@layer base {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
/**
|
|
9
|
+
* Light Mode (Default Theme)
|
|
10
|
+
* Source: src/tokens/semantic.ts -> borderTokens.light, contentTokens.light, backgroundTokens.light
|
|
11
|
+
*/
|
|
9
12
|
:root {
|
|
13
|
+
--accent: #EDEDED;
|
|
14
|
+
--accent-foreground: #17171C;
|
|
15
|
+
--background: #FFFFFF;
|
|
16
|
+
--background-green: #E0FFEC;
|
|
17
|
+
--background-green-on-hover: #BDFFD5;
|
|
18
|
+
--background-info: #EBF1FF;
|
|
19
|
+
--background-info-on-hover: #99B7FF;
|
|
20
|
+
--background-invert: #09090B;
|
|
21
|
+
--background-invert-light: #17171C;
|
|
22
|
+
--background-low: #EDEDED;
|
|
23
|
+
--background-low-on-hover: #DFDFE2;
|
|
24
|
+
--background-orange: #FFF3EB;
|
|
25
|
+
--background-orange-on-hover: #FFE1CC;
|
|
26
|
+
--background-primary: #FFFFFF;
|
|
27
|
+
--background-red: #FDF2F4;
|
|
28
|
+
--background-red-on-hover: #FADBE1;
|
|
29
|
+
--background-secondary: #EDEDED;
|
|
30
|
+
--background-system: #FAFAFA;
|
|
31
|
+
--background-tertiary: #DFDFE2;
|
|
32
|
+
--background-yellow: #FFF3EB;
|
|
33
|
+
--background-yellow-on-hover: #FFE1CC;
|
|
34
|
+
--border: #BEBEC1;
|
|
35
|
+
--border-blue: #3772FF;
|
|
36
|
+
--border-blue-on-hover: #003FD6;
|
|
37
|
+
--border-blue-subtle: #99B7FF;
|
|
38
|
+
--border-green: #00E052;
|
|
39
|
+
--border-green-on-hover: #00B241;
|
|
40
|
+
--border-green-subtle: #8AFFB5;
|
|
41
|
+
--border-invert: #09090B;
|
|
42
|
+
--border-on-color: #FFFFFF;
|
|
43
|
+
--border-orange: #D65700;
|
|
44
|
+
--border-orange-on-hover: #AD4700;
|
|
45
|
+
--border-orange-subtle: #FFC9A3;
|
|
46
|
+
--border-primary: #BEBEC1;
|
|
47
|
+
--border-red: #C41C3B;
|
|
48
|
+
--border-red-on-hover: #A11730;
|
|
49
|
+
--border-red-subtle: #F6C1CA;
|
|
50
|
+
--border-secondary: #DFDFE2;
|
|
51
|
+
--border-subtle: #DFDFE2;
|
|
52
|
+
--border-yellow: #F09700;
|
|
53
|
+
--border-yellow-on-hover: #D68700;
|
|
54
|
+
--border-yellow-subtle: #FFD999;
|
|
55
|
+
--card: #EDEDED;
|
|
56
|
+
--card-foreground: #17171C;
|
|
57
|
+
--color-black: #09090B;
|
|
58
|
+
--color-white: #FFFFFF;
|
|
59
|
+
--content-always-black: #09090B;
|
|
60
|
+
--content-always-white: #FFFFFF;
|
|
61
|
+
--content-blue: #3772FF;
|
|
62
|
+
--content-blue-disabled: #709AFF;
|
|
63
|
+
--content-blue-on-hover: #004BFF;
|
|
64
|
+
--content-green: #00B241;
|
|
65
|
+
--content-green-disabled: #5CFF98;
|
|
66
|
+
--content-green-on-hover: #00E052;
|
|
67
|
+
--content-on-color: #FFFFFF;
|
|
68
|
+
--content-on-color-inverse: #09090B;
|
|
69
|
+
--content-orange: #D65700;
|
|
70
|
+
--content-orange-disabled: #EC9C64;
|
|
71
|
+
--content-orange-on-hover: #AD4700;
|
|
72
|
+
--content-primary: #17171C;
|
|
73
|
+
--content-red: #C41C3B;
|
|
74
|
+
--content-red-disabled: #E15C5C;
|
|
75
|
+
--content-red-on-hover: #A11730;
|
|
76
|
+
--content-secondary: #60606C;
|
|
77
|
+
--content-subtle: #BEBEC1;
|
|
78
|
+
--content-yellow: #F09700;
|
|
79
|
+
--content-yellow-disabled: #FFCA70;
|
|
80
|
+
--content-yellow-on-hover: #D68700;
|
|
81
|
+
--destructive: #C41C3B;
|
|
82
|
+
--destructive-foreground: #FFFFFF;
|
|
83
|
+
--font-mono: Gist Mono, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
|
|
84
|
+
--font-sans: Gist, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
85
|
+
--font-size-2xl: 1.5rem;
|
|
86
|
+
--font-size-3xl: 1.875rem;
|
|
87
|
+
--font-size-4xl: 2.25rem;
|
|
88
|
+
--font-size-5xl: 3rem;
|
|
89
|
+
--font-size-base: 1rem;
|
|
90
|
+
--font-size-lg: 1.125rem;
|
|
91
|
+
--font-size-sm: 0.875rem;
|
|
92
|
+
--font-size-xl: 1.25rem;
|
|
93
|
+
--font-size-xs: 0.75rem;
|
|
94
|
+
--font-weight-bold: 700;
|
|
95
|
+
--font-weight-medium: 500;
|
|
96
|
+
--font-weight-normal: 400;
|
|
97
|
+
--font-weight-semibold: 600;
|
|
98
|
+
--foreground: #17171C;
|
|
99
|
+
--input: #BEBEC1;
|
|
100
|
+
--intent-danger: #C41C3B;
|
|
101
|
+
--intent-danger-active: #7D1225;
|
|
102
|
+
--intent-danger-bg: #FDF2F4;
|
|
103
|
+
--intent-danger-bg-active: #FADBE1;
|
|
104
|
+
--intent-danger-bg-hover: #FADBE1;
|
|
105
|
+
--intent-danger-border: #C41C3B;
|
|
106
|
+
--intent-danger-hover: #A11730;
|
|
107
|
+
--intent-danger-text: #C41C3B;
|
|
108
|
+
--intent-neutral: #60606C;
|
|
109
|
+
--intent-neutral-active: #2F2F37;
|
|
110
|
+
--intent-neutral-bg: #EDEDED;
|
|
111
|
+
--intent-neutral-bg-active: #DFDFE2;
|
|
112
|
+
--intent-neutral-bg-hover: #DFDFE2;
|
|
113
|
+
--intent-neutral-border: #BEBEC1;
|
|
114
|
+
--intent-neutral-hover: #4E4E5A;
|
|
115
|
+
--intent-neutral-text: #17171C;
|
|
116
|
+
--intent-primary: #60606C;
|
|
117
|
+
--intent-primary-active: #2F2F37;
|
|
118
|
+
--intent-primary-bg: #EDEDED;
|
|
119
|
+
--intent-primary-bg-active: #DFDFE2;
|
|
120
|
+
--intent-primary-bg-hover: #DFDFE2;
|
|
121
|
+
--intent-primary-border: #BEBEC1;
|
|
122
|
+
--intent-primary-hover: #4E4E5A;
|
|
123
|
+
--intent-primary-text: #17171C;
|
|
124
|
+
--intent-success: #00E052;
|
|
125
|
+
--intent-success-active: #008A32;
|
|
126
|
+
--intent-success-bg: #E0FFEC;
|
|
127
|
+
--intent-success-bg-active: #8AFFB5;
|
|
128
|
+
--intent-success-bg-hover: #BDFFD5;
|
|
129
|
+
--intent-success-border: #00E052;
|
|
130
|
+
--intent-success-hover: #00B241;
|
|
131
|
+
--intent-success-text: #00B241;
|
|
132
|
+
--intent-warning: #F09700;
|
|
133
|
+
--intent-warning-active: #7A4D00;
|
|
134
|
+
--intent-warning-bg: #FFF3EB;
|
|
135
|
+
--intent-warning-bg-active: #FFE8C2;
|
|
136
|
+
--intent-warning-bg-hover: #FFE1CC;
|
|
137
|
+
--intent-warning-border: #F09700;
|
|
138
|
+
--intent-warning-hover: #D68700;
|
|
139
|
+
--intent-warning-text: #F09700;
|
|
140
|
+
--line-height-normal: 1.5;
|
|
141
|
+
--line-height-relaxed: 1.75;
|
|
142
|
+
--line-height-tight: 1.25;
|
|
143
|
+
--muted: #EDEDED;
|
|
144
|
+
--muted-foreground: #BEBEC1;
|
|
145
|
+
--popover: #EDEDED;
|
|
146
|
+
--popover-foreground: #17171C;
|
|
147
|
+
--primary: #60606C;
|
|
148
|
+
--primary-foreground: #FFFFFF;
|
|
149
|
+
--radius: 0.375rem;
|
|
150
|
+
--radius-2xl: 1rem;
|
|
151
|
+
--radius-3xl: 1.5rem;
|
|
152
|
+
--radius-base: 0.25rem;
|
|
153
|
+
--radius-full: 9999px;
|
|
154
|
+
--radius-lg: 0.5rem;
|
|
155
|
+
--radius-md: 0.375rem;
|
|
156
|
+
--radius-none: 0;
|
|
157
|
+
--radius-sm: 0.125rem;
|
|
158
|
+
--radius-xl: 0.75rem;
|
|
159
|
+
--ring: #60606C;
|
|
160
|
+
--secondary: #EDEDED;
|
|
161
|
+
--secondary-foreground: #17171C;
|
|
162
|
+
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
163
|
+
--shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
164
|
+
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
|
165
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
166
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
167
|
+
--shadow-none: none;
|
|
168
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
169
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
170
|
+
--spacing-0: 0;
|
|
171
|
+
--spacing-1: 0.25rem;
|
|
172
|
+
--spacing-10: 2.5rem;
|
|
173
|
+
--spacing-12: 3rem;
|
|
174
|
+
--spacing-16: 4rem;
|
|
175
|
+
--spacing-2: 0.5rem;
|
|
176
|
+
--spacing-20: 5rem;
|
|
177
|
+
--spacing-24: 6rem;
|
|
178
|
+
--spacing-3: 0.75rem;
|
|
179
|
+
--spacing-4: 1rem;
|
|
180
|
+
--spacing-5: 1.25rem;
|
|
181
|
+
--spacing-6: 1.5rem;
|
|
182
|
+
--spacing-8: 2rem;
|
|
183
|
+
--surface-base: #FFFFFF;
|
|
184
|
+
--surface-base-border: #BEBEC1;
|
|
185
|
+
--surface-elevated: #EDEDED;
|
|
186
|
+
--surface-elevated-border: #DFDFE2;
|
|
187
|
+
--surface-overlay: rgba(0, 0, 0, 0.5);
|
|
188
|
+
--text-body: #17171C;
|
|
189
|
+
--text-disabled: #BEBEC1;
|
|
190
|
+
--text-heading: #17171C;
|
|
191
|
+
--text-muted: #BEBEC1;
|
|
192
|
+
--z-dropdown: 1000;
|
|
193
|
+
--z-fixed: 1030;
|
|
194
|
+
--z-modal: 1050;
|
|
195
|
+
--z-modal-backdrop: 1040;
|
|
196
|
+
--z-popover: 1060;
|
|
197
|
+
--z-sticky: 1020;
|
|
198
|
+
--z-tooltip: 1070;
|
|
199
|
+
|
|
200
|
+
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
|
|
201
|
+
color: var(--text-body);
|
|
202
|
+
background-color: var(--surface-base);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/**
|
|
206
|
+
* Dark Mode Theme
|
|
207
|
+
* Applied when .dark class is present on root element
|
|
208
|
+
* Source: src/tokens/semantic.ts -> borderTokens.dark, contentTokens.dark, backgroundTokens.dark
|
|
209
|
+
*/
|
|
210
|
+
.dark {
|
|
10
211
|
--accent: #17171C;
|
|
11
212
|
--accent-foreground: #DFDFE2;
|
|
12
213
|
--background: #09090B;
|
|
13
|
-
--background-base: #09090B;
|
|
14
214
|
--background-green: #00471A;
|
|
15
215
|
--background-green-on-hover: #006625;
|
|
16
216
|
--background-info: #00123D;
|
|
@@ -21,11 +221,11 @@
|
|
|
21
221
|
--background-low-on-hover: #2F2F37;
|
|
22
222
|
--background-orange: #331500;
|
|
23
223
|
--background-orange-on-hover: #5C2500;
|
|
24
|
-
--background-primary: #
|
|
25
|
-
--background-primary-on-hover: #001E66;
|
|
224
|
+
--background-primary: #09090B;
|
|
26
225
|
--background-red: #2D060D;
|
|
27
226
|
--background-red-on-hover: #4C0B17;
|
|
28
227
|
--background-secondary: #17171C;
|
|
228
|
+
--background-system: #09090B;
|
|
29
229
|
--background-tertiary: #2F2F37;
|
|
30
230
|
--background-yellow: #3D2600;
|
|
31
231
|
--background-yellow-on-hover: #5C3A00;
|
|
@@ -194,10 +394,6 @@
|
|
|
194
394
|
--z-popover: 1060;
|
|
195
395
|
--z-sticky: 1020;
|
|
196
396
|
--z-tooltip: 1070;
|
|
197
|
-
|
|
198
|
-
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
|
|
199
|
-
color: var(--text-body);
|
|
200
|
-
background-color: var(--surface-base);
|
|
201
397
|
}
|
|
202
398
|
|
|
203
399
|
* {
|
|
@@ -213,6 +409,54 @@
|
|
|
213
409
|
}
|
|
214
410
|
}
|
|
215
411
|
|
|
412
|
+
@layer base {
|
|
413
|
+
* {
|
|
414
|
+
border-color: var(--border-primary);
|
|
415
|
+
}
|
|
416
|
+
body {
|
|
417
|
+
background-color: var(--background-primary);
|
|
418
|
+
color: var(--content-primary);
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
/* Non-color global defaults derived from consumer app (safe subset) */
|
|
423
|
+
@layer base {
|
|
424
|
+
html {
|
|
425
|
+
font-size: 10px;
|
|
426
|
+
}
|
|
427
|
+
html, body {
|
|
428
|
+
height: 100vh;
|
|
429
|
+
min-height: 100vh;
|
|
430
|
+
width: 100vw;
|
|
431
|
+
min-width: 100vw;
|
|
432
|
+
margin: 0;
|
|
433
|
+
padding: 0;
|
|
434
|
+
}
|
|
435
|
+
body {
|
|
436
|
+
font-family: var(--font-sans);
|
|
437
|
+
-webkit-font-smoothing: antialiased;
|
|
438
|
+
-moz-osx-font-smoothing: grayscale;
|
|
439
|
+
}
|
|
440
|
+
*, ::before, ::after {
|
|
441
|
+
box-sizing: border-box;
|
|
442
|
+
border-width: 0;
|
|
443
|
+
}
|
|
444
|
+
:focus {
|
|
445
|
+
outline: 0 !important;
|
|
446
|
+
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
|
|
447
|
+
}
|
|
448
|
+
/* Autofill behavior */
|
|
449
|
+
input:-webkit-autofill,
|
|
450
|
+
input:-webkit-autofill:hover,
|
|
451
|
+
input:-webkit-autofill:focus,
|
|
452
|
+
input:-webkit-autofill:active {
|
|
453
|
+
background-color: transparent;
|
|
454
|
+
transition: background-color 5000s ease-in-out 0s;
|
|
455
|
+
-webkit-text-fill-color: var(--content-primary);
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
/* Utilities */
|
|
216
460
|
@layer utilities {
|
|
217
461
|
/* Screen reader only utility - visually hidden but accessible to assistive technologies */
|
|
218
462
|
.sr-only {
|
|
@@ -226,4 +470,22 @@
|
|
|
226
470
|
white-space: nowrap;
|
|
227
471
|
border-width: 0;
|
|
228
472
|
}
|
|
473
|
+
/* Hide scrollbar */
|
|
474
|
+
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
475
|
+
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
476
|
+
/* Backdrop blur helpers */
|
|
477
|
+
.backdrop-blur-sm { backdrop-filter: blur(4px); }
|
|
478
|
+
.backdrop-blur { backdrop-filter: blur(8px); }
|
|
479
|
+
/* Transition helpers */
|
|
480
|
+
.transition-all { transition: all 0.15s ease-in-out; }
|
|
481
|
+
.transition-colors { transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; }
|
|
482
|
+
/* Opacity helpers */
|
|
483
|
+
.opacity-50 { opacity: 0.5; }
|
|
484
|
+
.opacity-60 { opacity: 0.6; }
|
|
485
|
+
.opacity-80 { opacity: 0.8; }
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
/* Component-friendly defaults (non-color) */
|
|
489
|
+
@layer components {
|
|
490
|
+
button { font-family: inherit; font-size: inherit; }
|
|
229
491
|
}
|
package/dist/index.d.cts
CHANGED
|
@@ -8,6 +8,9 @@ declare const ADAPTER_TYPES: readonly ["shadcn", "material"];
|
|
|
8
8
|
type ThemeMode = typeof THEME_MODES[number];
|
|
9
9
|
type ThemeName = typeof THEME_NAMES[number];
|
|
10
10
|
type AdapterType = typeof ADAPTER_TYPES[number];
|
|
11
|
+
declare const DEFAULT_MODE: ThemeMode;
|
|
12
|
+
declare const DEFAULT_THEME: "base";
|
|
13
|
+
declare const DEFAULT_ADAPTER: "shadcn";
|
|
11
14
|
interface DesignSystemConfig {
|
|
12
15
|
adapter: AdapterType;
|
|
13
16
|
theme: ThemeName;
|
|
@@ -132,9 +135,8 @@ declare const contentTokens: {
|
|
|
132
135
|
*/
|
|
133
136
|
declare const backgroundTokens: {
|
|
134
137
|
readonly dark: {
|
|
135
|
-
readonly
|
|
136
|
-
readonly
|
|
137
|
-
readonly primaryOnHover: "#001E66";
|
|
138
|
+
readonly primary: "#09090B";
|
|
139
|
+
readonly system: "#09090B";
|
|
138
140
|
readonly secondary: "#17171C";
|
|
139
141
|
readonly tertiary: "#2F2F37";
|
|
140
142
|
readonly invert: "#FFFFFF";
|
|
@@ -151,11 +153,11 @@ declare const backgroundTokens: {
|
|
|
151
153
|
readonly lowOnHover: "#2F2F37";
|
|
152
154
|
readonly info: "#00123D";
|
|
153
155
|
readonly infoOnHover: "#001E66";
|
|
156
|
+
readonly base: "#09090B";
|
|
154
157
|
};
|
|
155
158
|
readonly light: {
|
|
156
|
-
readonly
|
|
157
|
-
readonly
|
|
158
|
-
readonly primaryOnHover: "#99B7FF";
|
|
159
|
+
readonly primary: "#FFFFFF";
|
|
160
|
+
readonly system: "#FAFAFA";
|
|
159
161
|
readonly secondary: "#EDEDED";
|
|
160
162
|
readonly tertiary: "#DFDFE2";
|
|
161
163
|
readonly invert: "#09090B";
|
|
@@ -172,6 +174,7 @@ declare const backgroundTokens: {
|
|
|
172
174
|
readonly lowOnHover: "#DFDFE2";
|
|
173
175
|
readonly info: "#EBF1FF";
|
|
174
176
|
readonly infoOnHover: "#99B7FF";
|
|
177
|
+
readonly base: "#FFFFFF";
|
|
175
178
|
};
|
|
176
179
|
};
|
|
177
180
|
declare const semanticTokens: {
|
|
@@ -273,9 +276,8 @@ declare const semanticTokens: {
|
|
|
273
276
|
};
|
|
274
277
|
readonly background: {
|
|
275
278
|
readonly dark: {
|
|
276
|
-
readonly
|
|
277
|
-
readonly
|
|
278
|
-
readonly primaryOnHover: "#001E66";
|
|
279
|
+
readonly primary: "#09090B";
|
|
280
|
+
readonly system: "#09090B";
|
|
279
281
|
readonly secondary: "#17171C";
|
|
280
282
|
readonly tertiary: "#2F2F37";
|
|
281
283
|
readonly invert: "#FFFFFF";
|
|
@@ -292,11 +294,11 @@ declare const semanticTokens: {
|
|
|
292
294
|
readonly lowOnHover: "#2F2F37";
|
|
293
295
|
readonly info: "#00123D";
|
|
294
296
|
readonly infoOnHover: "#001E66";
|
|
297
|
+
readonly base: "#09090B";
|
|
295
298
|
};
|
|
296
299
|
readonly light: {
|
|
297
|
-
readonly
|
|
298
|
-
readonly
|
|
299
|
-
readonly primaryOnHover: "#99B7FF";
|
|
300
|
+
readonly primary: "#FFFFFF";
|
|
301
|
+
readonly system: "#FAFAFA";
|
|
300
302
|
readonly secondary: "#EDEDED";
|
|
301
303
|
readonly tertiary: "#DFDFE2";
|
|
302
304
|
readonly invert: "#09090B";
|
|
@@ -313,6 +315,7 @@ declare const semanticTokens: {
|
|
|
313
315
|
readonly lowOnHover: "#DFDFE2";
|
|
314
316
|
readonly info: "#EBF1FF";
|
|
315
317
|
readonly infoOnHover: "#99B7FF";
|
|
318
|
+
readonly base: "#FFFFFF";
|
|
316
319
|
};
|
|
317
320
|
};
|
|
318
321
|
};
|
|
@@ -1033,9 +1036,8 @@ declare const tokens: {
|
|
|
1033
1036
|
};
|
|
1034
1037
|
readonly background: {
|
|
1035
1038
|
readonly dark: {
|
|
1036
|
-
readonly
|
|
1037
|
-
readonly
|
|
1038
|
-
readonly primaryOnHover: "#001E66";
|
|
1039
|
+
readonly primary: "#09090B";
|
|
1040
|
+
readonly system: "#09090B";
|
|
1039
1041
|
readonly secondary: "#17171C";
|
|
1040
1042
|
readonly tertiary: "#2F2F37";
|
|
1041
1043
|
readonly invert: "#FFFFFF";
|
|
@@ -1052,11 +1054,11 @@ declare const tokens: {
|
|
|
1052
1054
|
readonly lowOnHover: "#2F2F37";
|
|
1053
1055
|
readonly info: "#00123D";
|
|
1054
1056
|
readonly infoOnHover: "#001E66";
|
|
1057
|
+
readonly base: "#09090B";
|
|
1055
1058
|
};
|
|
1056
1059
|
readonly light: {
|
|
1057
|
-
readonly
|
|
1058
|
-
readonly
|
|
1059
|
-
readonly primaryOnHover: "#99B7FF";
|
|
1060
|
+
readonly primary: "#FFFFFF";
|
|
1061
|
+
readonly system: "#FAFAFA";
|
|
1060
1062
|
readonly secondary: "#EDEDED";
|
|
1061
1063
|
readonly tertiary: "#DFDFE2";
|
|
1062
1064
|
readonly invert: "#09090B";
|
|
@@ -1073,6 +1075,7 @@ declare const tokens: {
|
|
|
1073
1075
|
readonly lowOnHover: "#DFDFE2";
|
|
1074
1076
|
readonly info: "#EBF1FF";
|
|
1075
1077
|
readonly infoOnHover: "#99B7FF";
|
|
1078
|
+
readonly base: "#FFFFFF";
|
|
1076
1079
|
};
|
|
1077
1080
|
};
|
|
1078
1081
|
readonly all: {
|
|
@@ -1174,9 +1177,8 @@ declare const tokens: {
|
|
|
1174
1177
|
};
|
|
1175
1178
|
readonly background: {
|
|
1176
1179
|
readonly dark: {
|
|
1177
|
-
readonly
|
|
1178
|
-
readonly
|
|
1179
|
-
readonly primaryOnHover: "#001E66";
|
|
1180
|
+
readonly primary: "#09090B";
|
|
1181
|
+
readonly system: "#09090B";
|
|
1180
1182
|
readonly secondary: "#17171C";
|
|
1181
1183
|
readonly tertiary: "#2F2F37";
|
|
1182
1184
|
readonly invert: "#FFFFFF";
|
|
@@ -1193,11 +1195,11 @@ declare const tokens: {
|
|
|
1193
1195
|
readonly lowOnHover: "#2F2F37";
|
|
1194
1196
|
readonly info: "#00123D";
|
|
1195
1197
|
readonly infoOnHover: "#001E66";
|
|
1198
|
+
readonly base: "#09090B";
|
|
1196
1199
|
};
|
|
1197
1200
|
readonly light: {
|
|
1198
|
-
readonly
|
|
1199
|
-
readonly
|
|
1200
|
-
readonly primaryOnHover: "#99B7FF";
|
|
1201
|
+
readonly primary: "#FFFFFF";
|
|
1202
|
+
readonly system: "#FAFAFA";
|
|
1201
1203
|
readonly secondary: "#EDEDED";
|
|
1202
1204
|
readonly tertiary: "#DFDFE2";
|
|
1203
1205
|
readonly invert: "#09090B";
|
|
@@ -1214,6 +1216,7 @@ declare const tokens: {
|
|
|
1214
1216
|
readonly lowOnHover: "#DFDFE2";
|
|
1215
1217
|
readonly info: "#EBF1FF";
|
|
1216
1218
|
readonly infoOnHover: "#99B7FF";
|
|
1219
|
+
readonly base: "#FFFFFF";
|
|
1217
1220
|
};
|
|
1218
1221
|
};
|
|
1219
1222
|
};
|
|
@@ -1474,4 +1477,4 @@ declare function validateAccessibilityProps(props: AccessibilityProps, component
|
|
|
1474
1477
|
iconOnly?: boolean;
|
|
1475
1478
|
}): void;
|
|
1476
1479
|
|
|
1477
|
-
export { ADAPTER_TYPES, type AccessibilityProps, type AdapterType, BUTTON_TYPES, type BackgroundToken, type BorderToken, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonType, COLOR_SCALES, type ColorName, type ColorPrimitives, type ColorScale, type Colors, type ContentToken, type DesignSystemConfig, INPUT_TYPES, INTENTS, type InputType, type Intent, type LucideIconName, ORIENTATIONS, type Orientation, type Radius, SIZES, SURFACE_LEVELS, type SemanticToken, type SemanticTokens, type Shadows, type Size, type Spacing, type SurfaceLevel, THEME_MODES, THEME_NAMES, type Theme, type ThemeMode, type ThemeName, ThemeProvider, type ThemeProviderProps, type Tokens, type Typography, VARIANTS, type Variant, type ZIndex, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };
|
|
1480
|
+
export { ADAPTER_TYPES, type AccessibilityProps, type AdapterType, BUTTON_TYPES, type BackgroundToken, type BorderToken, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonType, COLOR_SCALES, type ColorName, type ColorPrimitives, type ColorScale, type Colors, type ContentToken, DEFAULT_ADAPTER, DEFAULT_MODE, DEFAULT_THEME, type DesignSystemConfig, INPUT_TYPES, INTENTS, type InputType, type Intent, type LucideIconName, ORIENTATIONS, type Orientation, type Radius, SIZES, SURFACE_LEVELS, type SemanticToken, type SemanticTokens, type Shadows, type Size, type Spacing, type SurfaceLevel, THEME_MODES, THEME_NAMES, type Theme, type ThemeMode, type ThemeName, ThemeProvider, type ThemeProviderProps, type Tokens, type Typography, VARIANTS, type Variant, type ZIndex, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,9 @@ declare const ADAPTER_TYPES: readonly ["shadcn", "material"];
|
|
|
8
8
|
type ThemeMode = typeof THEME_MODES[number];
|
|
9
9
|
type ThemeName = typeof THEME_NAMES[number];
|
|
10
10
|
type AdapterType = typeof ADAPTER_TYPES[number];
|
|
11
|
+
declare const DEFAULT_MODE: ThemeMode;
|
|
12
|
+
declare const DEFAULT_THEME: "base";
|
|
13
|
+
declare const DEFAULT_ADAPTER: "shadcn";
|
|
11
14
|
interface DesignSystemConfig {
|
|
12
15
|
adapter: AdapterType;
|
|
13
16
|
theme: ThemeName;
|
|
@@ -132,9 +135,8 @@ declare const contentTokens: {
|
|
|
132
135
|
*/
|
|
133
136
|
declare const backgroundTokens: {
|
|
134
137
|
readonly dark: {
|
|
135
|
-
readonly
|
|
136
|
-
readonly
|
|
137
|
-
readonly primaryOnHover: "#001E66";
|
|
138
|
+
readonly primary: "#09090B";
|
|
139
|
+
readonly system: "#09090B";
|
|
138
140
|
readonly secondary: "#17171C";
|
|
139
141
|
readonly tertiary: "#2F2F37";
|
|
140
142
|
readonly invert: "#FFFFFF";
|
|
@@ -151,11 +153,11 @@ declare const backgroundTokens: {
|
|
|
151
153
|
readonly lowOnHover: "#2F2F37";
|
|
152
154
|
readonly info: "#00123D";
|
|
153
155
|
readonly infoOnHover: "#001E66";
|
|
156
|
+
readonly base: "#09090B";
|
|
154
157
|
};
|
|
155
158
|
readonly light: {
|
|
156
|
-
readonly
|
|
157
|
-
readonly
|
|
158
|
-
readonly primaryOnHover: "#99B7FF";
|
|
159
|
+
readonly primary: "#FFFFFF";
|
|
160
|
+
readonly system: "#FAFAFA";
|
|
159
161
|
readonly secondary: "#EDEDED";
|
|
160
162
|
readonly tertiary: "#DFDFE2";
|
|
161
163
|
readonly invert: "#09090B";
|
|
@@ -172,6 +174,7 @@ declare const backgroundTokens: {
|
|
|
172
174
|
readonly lowOnHover: "#DFDFE2";
|
|
173
175
|
readonly info: "#EBF1FF";
|
|
174
176
|
readonly infoOnHover: "#99B7FF";
|
|
177
|
+
readonly base: "#FFFFFF";
|
|
175
178
|
};
|
|
176
179
|
};
|
|
177
180
|
declare const semanticTokens: {
|
|
@@ -273,9 +276,8 @@ declare const semanticTokens: {
|
|
|
273
276
|
};
|
|
274
277
|
readonly background: {
|
|
275
278
|
readonly dark: {
|
|
276
|
-
readonly
|
|
277
|
-
readonly
|
|
278
|
-
readonly primaryOnHover: "#001E66";
|
|
279
|
+
readonly primary: "#09090B";
|
|
280
|
+
readonly system: "#09090B";
|
|
279
281
|
readonly secondary: "#17171C";
|
|
280
282
|
readonly tertiary: "#2F2F37";
|
|
281
283
|
readonly invert: "#FFFFFF";
|
|
@@ -292,11 +294,11 @@ declare const semanticTokens: {
|
|
|
292
294
|
readonly lowOnHover: "#2F2F37";
|
|
293
295
|
readonly info: "#00123D";
|
|
294
296
|
readonly infoOnHover: "#001E66";
|
|
297
|
+
readonly base: "#09090B";
|
|
295
298
|
};
|
|
296
299
|
readonly light: {
|
|
297
|
-
readonly
|
|
298
|
-
readonly
|
|
299
|
-
readonly primaryOnHover: "#99B7FF";
|
|
300
|
+
readonly primary: "#FFFFFF";
|
|
301
|
+
readonly system: "#FAFAFA";
|
|
300
302
|
readonly secondary: "#EDEDED";
|
|
301
303
|
readonly tertiary: "#DFDFE2";
|
|
302
304
|
readonly invert: "#09090B";
|
|
@@ -313,6 +315,7 @@ declare const semanticTokens: {
|
|
|
313
315
|
readonly lowOnHover: "#DFDFE2";
|
|
314
316
|
readonly info: "#EBF1FF";
|
|
315
317
|
readonly infoOnHover: "#99B7FF";
|
|
318
|
+
readonly base: "#FFFFFF";
|
|
316
319
|
};
|
|
317
320
|
};
|
|
318
321
|
};
|
|
@@ -1033,9 +1036,8 @@ declare const tokens: {
|
|
|
1033
1036
|
};
|
|
1034
1037
|
readonly background: {
|
|
1035
1038
|
readonly dark: {
|
|
1036
|
-
readonly
|
|
1037
|
-
readonly
|
|
1038
|
-
readonly primaryOnHover: "#001E66";
|
|
1039
|
+
readonly primary: "#09090B";
|
|
1040
|
+
readonly system: "#09090B";
|
|
1039
1041
|
readonly secondary: "#17171C";
|
|
1040
1042
|
readonly tertiary: "#2F2F37";
|
|
1041
1043
|
readonly invert: "#FFFFFF";
|
|
@@ -1052,11 +1054,11 @@ declare const tokens: {
|
|
|
1052
1054
|
readonly lowOnHover: "#2F2F37";
|
|
1053
1055
|
readonly info: "#00123D";
|
|
1054
1056
|
readonly infoOnHover: "#001E66";
|
|
1057
|
+
readonly base: "#09090B";
|
|
1055
1058
|
};
|
|
1056
1059
|
readonly light: {
|
|
1057
|
-
readonly
|
|
1058
|
-
readonly
|
|
1059
|
-
readonly primaryOnHover: "#99B7FF";
|
|
1060
|
+
readonly primary: "#FFFFFF";
|
|
1061
|
+
readonly system: "#FAFAFA";
|
|
1060
1062
|
readonly secondary: "#EDEDED";
|
|
1061
1063
|
readonly tertiary: "#DFDFE2";
|
|
1062
1064
|
readonly invert: "#09090B";
|
|
@@ -1073,6 +1075,7 @@ declare const tokens: {
|
|
|
1073
1075
|
readonly lowOnHover: "#DFDFE2";
|
|
1074
1076
|
readonly info: "#EBF1FF";
|
|
1075
1077
|
readonly infoOnHover: "#99B7FF";
|
|
1078
|
+
readonly base: "#FFFFFF";
|
|
1076
1079
|
};
|
|
1077
1080
|
};
|
|
1078
1081
|
readonly all: {
|
|
@@ -1174,9 +1177,8 @@ declare const tokens: {
|
|
|
1174
1177
|
};
|
|
1175
1178
|
readonly background: {
|
|
1176
1179
|
readonly dark: {
|
|
1177
|
-
readonly
|
|
1178
|
-
readonly
|
|
1179
|
-
readonly primaryOnHover: "#001E66";
|
|
1180
|
+
readonly primary: "#09090B";
|
|
1181
|
+
readonly system: "#09090B";
|
|
1180
1182
|
readonly secondary: "#17171C";
|
|
1181
1183
|
readonly tertiary: "#2F2F37";
|
|
1182
1184
|
readonly invert: "#FFFFFF";
|
|
@@ -1193,11 +1195,11 @@ declare const tokens: {
|
|
|
1193
1195
|
readonly lowOnHover: "#2F2F37";
|
|
1194
1196
|
readonly info: "#00123D";
|
|
1195
1197
|
readonly infoOnHover: "#001E66";
|
|
1198
|
+
readonly base: "#09090B";
|
|
1196
1199
|
};
|
|
1197
1200
|
readonly light: {
|
|
1198
|
-
readonly
|
|
1199
|
-
readonly
|
|
1200
|
-
readonly primaryOnHover: "#99B7FF";
|
|
1201
|
+
readonly primary: "#FFFFFF";
|
|
1202
|
+
readonly system: "#FAFAFA";
|
|
1201
1203
|
readonly secondary: "#EDEDED";
|
|
1202
1204
|
readonly tertiary: "#DFDFE2";
|
|
1203
1205
|
readonly invert: "#09090B";
|
|
@@ -1214,6 +1216,7 @@ declare const tokens: {
|
|
|
1214
1216
|
readonly lowOnHover: "#DFDFE2";
|
|
1215
1217
|
readonly info: "#EBF1FF";
|
|
1216
1218
|
readonly infoOnHover: "#99B7FF";
|
|
1219
|
+
readonly base: "#FFFFFF";
|
|
1217
1220
|
};
|
|
1218
1221
|
};
|
|
1219
1222
|
};
|
|
@@ -1474,4 +1477,4 @@ declare function validateAccessibilityProps(props: AccessibilityProps, component
|
|
|
1474
1477
|
iconOnly?: boolean;
|
|
1475
1478
|
}): void;
|
|
1476
1479
|
|
|
1477
|
-
export { ADAPTER_TYPES, type AccessibilityProps, type AdapterType, BUTTON_TYPES, type BackgroundToken, type BorderToken, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonType, COLOR_SCALES, type ColorName, type ColorPrimitives, type ColorScale, type Colors, type ContentToken, type DesignSystemConfig, INPUT_TYPES, INTENTS, type InputType, type Intent, type LucideIconName, ORIENTATIONS, type Orientation, type Radius, SIZES, SURFACE_LEVELS, type SemanticToken, type SemanticTokens, type Shadows, type Size, type Spacing, type SurfaceLevel, THEME_MODES, THEME_NAMES, type Theme, type ThemeMode, type ThemeName, ThemeProvider, type ThemeProviderProps, type Tokens, type Typography, VARIANTS, type Variant, type ZIndex, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };
|
|
1480
|
+
export { ADAPTER_TYPES, type AccessibilityProps, type AdapterType, BUTTON_TYPES, type BackgroundToken, type BorderToken, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonType, COLOR_SCALES, type ColorName, type ColorPrimitives, type ColorScale, type Colors, type ContentToken, DEFAULT_ADAPTER, DEFAULT_MODE, DEFAULT_THEME, type DesignSystemConfig, INPUT_TYPES, INTENTS, type InputType, type Intent, type LucideIconName, ORIENTATIONS, type Orientation, type Radius, SIZES, SURFACE_LEVELS, type SemanticToken, type SemanticTokens, type Shadows, type Size, type Spacing, type SurfaceLevel, THEME_MODES, THEME_NAMES, type Theme, type ThemeMode, type ThemeName, ThemeProvider, type ThemeProviderProps, type Tokens, type Typography, VARIANTS, type Variant, type ZIndex, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };
|