@konce-pt/tokens 0.1.2 → 0.2.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.
- package/dist/css/tokens.css +46 -1
- package/dist/css/tokens.dark.css +45 -0
- package/dist/js/tokens.d.ts +45 -0
- package/dist/js/tokens.js +49 -2
- package/dist/registry/tokens.json +1744 -0
- package/dist/scss/_tokens.dark.scss +45 -0
- package/dist/scss/_tokens.scss +92 -2
- package/package.json +1 -1
|
@@ -15,14 +15,30 @@
|
|
|
15
15
|
--kpt-color-neutral-900: oklch(0.210 0.006 286);
|
|
16
16
|
--kpt-color-neutral-950: oklch(0.141 0.005 286);
|
|
17
17
|
--kpt-color-neutral-1000: oklch(0 0 0);
|
|
18
|
+
--kpt-color-red-50: oklch(0.971 0.013 25);
|
|
19
|
+
--kpt-color-red-200: oklch(0.885 0.062 25);
|
|
18
20
|
--kpt-color-red-500: oklch(0.637 0.208 25);
|
|
19
21
|
--kpt-color-red-600: oklch(0.577 0.213 27);
|
|
22
|
+
--kpt-color-red-700: oklch(0.505 0.190 27);
|
|
23
|
+
--kpt-color-red-950: oklch(0.260 0.090 27);
|
|
24
|
+
--kpt-color-green-50: oklch(0.975 0.030 150);
|
|
25
|
+
--kpt-color-green-200: oklch(0.900 0.070 150);
|
|
20
26
|
--kpt-color-green-500: oklch(0.723 0.170 150);
|
|
21
27
|
--kpt-color-green-600: oklch(0.627 0.170 150);
|
|
28
|
+
--kpt-color-green-700: oklch(0.530 0.150 150);
|
|
29
|
+
--kpt-color-green-950: oklch(0.270 0.060 150);
|
|
30
|
+
--kpt-color-amber-50: oklch(0.980 0.030 80);
|
|
31
|
+
--kpt-color-amber-200: oklch(0.920 0.080 75);
|
|
22
32
|
--kpt-color-amber-500: oklch(0.769 0.160 70);
|
|
23
33
|
--kpt-color-amber-600: oklch(0.666 0.160 60);
|
|
34
|
+
--kpt-color-amber-700: oklch(0.550 0.130 55);
|
|
35
|
+
--kpt-color-amber-950: oklch(0.280 0.060 60);
|
|
36
|
+
--kpt-color-blue-50: oklch(0.970 0.015 255);
|
|
37
|
+
--kpt-color-blue-200: oklch(0.880 0.050 255);
|
|
24
38
|
--kpt-color-blue-500: oklch(0.623 0.170 250);
|
|
25
39
|
--kpt-color-blue-600: oklch(0.546 0.190 255);
|
|
40
|
+
--kpt-color-blue-700: oklch(0.470 0.160 255);
|
|
41
|
+
--kpt-color-blue-950: oklch(0.280 0.090 265);
|
|
26
42
|
--kpt-color-overlay-scrim: oklch(0 0 0 / 0.6);
|
|
27
43
|
--kpt-space-0: 0;
|
|
28
44
|
--kpt-space-1: 0.25rem;
|
|
@@ -78,22 +94,51 @@
|
|
|
78
94
|
--kpt-color-surface-variant: var(--kpt-color-neutral-900);
|
|
79
95
|
--kpt-color-surface-raised: var(--kpt-color-neutral-900);
|
|
80
96
|
--kpt-color-surface-sunken: var(--kpt-color-neutral-1000);
|
|
97
|
+
--kpt-color-surface-hover: var(--kpt-color-neutral-900);
|
|
98
|
+
--kpt-color-surface-selected: var(--kpt-color-neutral-800);
|
|
81
99
|
--kpt-color-on-surface: var(--kpt-color-neutral-50);
|
|
82
100
|
--kpt-color-on-surface-muted: var(--kpt-color-neutral-400);
|
|
101
|
+
--kpt-color-text-subtle: var(--kpt-color-neutral-500);
|
|
83
102
|
--kpt-color-border: var(--kpt-color-neutral-800);
|
|
84
103
|
--kpt-color-border-strong: var(--kpt-color-neutral-700);
|
|
85
104
|
--kpt-color-primary: var(--kpt-color-neutral-100);
|
|
86
105
|
--kpt-color-primary-hover: var(--kpt-color-neutral-200);
|
|
87
106
|
--kpt-color-primary-active: var(--kpt-color-neutral-300);
|
|
107
|
+
--kpt-color-primary-subtle: var(--kpt-color-neutral-800);
|
|
108
|
+
--kpt-color-primary-border: var(--kpt-color-neutral-700);
|
|
88
109
|
--kpt-color-on-primary: var(--kpt-color-neutral-900);
|
|
89
110
|
--kpt-color-muted: var(--kpt-color-neutral-800);
|
|
90
111
|
--kpt-color-muted-hover: var(--kpt-color-neutral-700);
|
|
91
112
|
--kpt-color-on-muted: var(--kpt-color-neutral-100);
|
|
92
113
|
--kpt-color-danger: var(--kpt-color-red-500);
|
|
114
|
+
--kpt-color-danger-hover: var(--kpt-color-red-600);
|
|
115
|
+
--kpt-color-danger-contrast: var(--kpt-color-neutral-950);
|
|
116
|
+
--kpt-color-danger-subtle: var(--kpt-color-red-950);
|
|
117
|
+
--kpt-color-danger-border: var(--kpt-color-red-700);
|
|
93
118
|
--kpt-color-on-danger: var(--kpt-color-neutral-950);
|
|
94
119
|
--kpt-color-success: var(--kpt-color-green-500);
|
|
120
|
+
--kpt-color-success-hover: var(--kpt-color-green-600);
|
|
121
|
+
--kpt-color-success-contrast: var(--kpt-color-neutral-950);
|
|
122
|
+
--kpt-color-success-subtle: var(--kpt-color-green-950);
|
|
123
|
+
--kpt-color-success-border: var(--kpt-color-green-700);
|
|
95
124
|
--kpt-color-warning: var(--kpt-color-amber-500);
|
|
125
|
+
--kpt-color-warning-hover: var(--kpt-color-amber-600);
|
|
126
|
+
--kpt-color-warning-contrast: var(--kpt-color-neutral-950);
|
|
127
|
+
--kpt-color-warning-subtle: var(--kpt-color-amber-950);
|
|
128
|
+
--kpt-color-warning-border: var(--kpt-color-amber-700);
|
|
96
129
|
--kpt-color-info: var(--kpt-color-blue-500);
|
|
130
|
+
--kpt-color-info-hover: var(--kpt-color-blue-600);
|
|
131
|
+
--kpt-color-info-contrast: var(--kpt-color-neutral-950);
|
|
132
|
+
--kpt-color-info-subtle: var(--kpt-color-blue-950);
|
|
133
|
+
--kpt-color-info-border: var(--kpt-color-blue-700);
|
|
97
134
|
--kpt-color-focus-ring: var(--kpt-color-neutral-100);
|
|
135
|
+
--kpt-color-overlay: var(--kpt-color-overlay-scrim);
|
|
136
|
+
--kpt-shadow-sm: var(--kpt-elevation-1);
|
|
137
|
+
--kpt-shadow-md: var(--kpt-elevation-2);
|
|
138
|
+
--kpt-shadow-lg: var(--kpt-elevation-3);
|
|
139
|
+
--kpt-color-text: var(--kpt-color-on-surface);
|
|
140
|
+
--kpt-color-text-muted: var(--kpt-color-on-surface-muted);
|
|
141
|
+
--kpt-color-text-inverse: var(--kpt-color-on-primary);
|
|
142
|
+
--kpt-color-primary-contrast: var(--kpt-color-on-primary);
|
|
98
143
|
}
|
|
99
144
|
}
|
package/dist/scss/_tokens.scss
CHANGED
|
@@ -15,14 +15,30 @@ $kpt-color-neutral-800: oklch(0.274 0.006 286);
|
|
|
15
15
|
$kpt-color-neutral-900: oklch(0.210 0.006 286);
|
|
16
16
|
$kpt-color-neutral-950: oklch(0.141 0.005 286);
|
|
17
17
|
$kpt-color-neutral-1000: oklch(0 0 0);
|
|
18
|
+
$kpt-color-red-50: oklch(0.971 0.013 25);
|
|
19
|
+
$kpt-color-red-200: oklch(0.885 0.062 25);
|
|
18
20
|
$kpt-color-red-500: oklch(0.637 0.208 25);
|
|
19
21
|
$kpt-color-red-600: oklch(0.577 0.213 27);
|
|
22
|
+
$kpt-color-red-700: oklch(0.505 0.190 27);
|
|
23
|
+
$kpt-color-red-950: oklch(0.260 0.090 27);
|
|
24
|
+
$kpt-color-green-50: oklch(0.975 0.030 150);
|
|
25
|
+
$kpt-color-green-200: oklch(0.900 0.070 150);
|
|
20
26
|
$kpt-color-green-500: oklch(0.723 0.170 150);
|
|
21
27
|
$kpt-color-green-600: oklch(0.627 0.170 150);
|
|
28
|
+
$kpt-color-green-700: oklch(0.530 0.150 150);
|
|
29
|
+
$kpt-color-green-950: oklch(0.270 0.060 150);
|
|
30
|
+
$kpt-color-amber-50: oklch(0.980 0.030 80);
|
|
31
|
+
$kpt-color-amber-200: oklch(0.920 0.080 75);
|
|
22
32
|
$kpt-color-amber-500: oklch(0.769 0.160 70);
|
|
23
33
|
$kpt-color-amber-600: oklch(0.666 0.160 60);
|
|
34
|
+
$kpt-color-amber-700: oklch(0.550 0.130 55);
|
|
35
|
+
$kpt-color-amber-950: oklch(0.280 0.060 60);
|
|
36
|
+
$kpt-color-blue-50: oklch(0.970 0.015 255);
|
|
37
|
+
$kpt-color-blue-200: oklch(0.880 0.050 255);
|
|
24
38
|
$kpt-color-blue-500: oklch(0.623 0.170 250);
|
|
25
39
|
$kpt-color-blue-600: oklch(0.546 0.190 255);
|
|
40
|
+
$kpt-color-blue-700: oklch(0.470 0.160 255);
|
|
41
|
+
$kpt-color-blue-950: oklch(0.280 0.090 265);
|
|
26
42
|
$kpt-color-overlay-scrim: oklch(0.141 0.005 286 / 0.5);
|
|
27
43
|
$kpt-space-0: 0;
|
|
28
44
|
$kpt-space-1: 0.25rem;
|
|
@@ -80,23 +96,48 @@ $kpt-color-surface: $kpt-color-neutral-0;
|
|
|
80
96
|
$kpt-color-surface-variant: $kpt-color-neutral-50;
|
|
81
97
|
$kpt-color-surface-raised: $kpt-color-neutral-0;
|
|
82
98
|
$kpt-color-surface-sunken: $kpt-color-neutral-100;
|
|
99
|
+
$kpt-color-surface-hover: $kpt-color-neutral-50;
|
|
100
|
+
$kpt-color-surface-selected: $kpt-color-neutral-100;
|
|
83
101
|
$kpt-color-on-surface: $kpt-color-neutral-900;
|
|
84
102
|
$kpt-color-on-surface-muted: $kpt-color-neutral-500;
|
|
103
|
+
$kpt-color-text-subtle: $kpt-color-neutral-400;
|
|
85
104
|
$kpt-color-border: $kpt-color-neutral-200;
|
|
86
105
|
$kpt-color-border-strong: $kpt-color-neutral-300;
|
|
87
106
|
$kpt-color-primary: $kpt-color-neutral-900;
|
|
88
107
|
$kpt-color-primary-hover: $kpt-color-neutral-800;
|
|
89
108
|
$kpt-color-primary-active: $kpt-color-neutral-700;
|
|
90
|
-
$kpt-color-
|
|
109
|
+
$kpt-color-primary-subtle: $kpt-color-neutral-100;
|
|
110
|
+
$kpt-color-primary-border: $kpt-color-neutral-300;
|
|
111
|
+
$kpt-color-on-primary: $kpt-color-neutral-0;
|
|
91
112
|
$kpt-color-muted: $kpt-color-neutral-100;
|
|
92
113
|
$kpt-color-muted-hover: $kpt-color-neutral-200;
|
|
93
114
|
$kpt-color-on-muted: $kpt-color-neutral-800;
|
|
94
115
|
$kpt-color-danger: $kpt-color-red-600;
|
|
116
|
+
$kpt-color-danger-hover: $kpt-color-red-700;
|
|
117
|
+
$kpt-color-danger-contrast: $kpt-color-neutral-0;
|
|
118
|
+
$kpt-color-danger-subtle: $kpt-color-red-50;
|
|
119
|
+
$kpt-color-danger-border: $kpt-color-red-200;
|
|
95
120
|
$kpt-color-on-danger: $kpt-color-neutral-0;
|
|
96
121
|
$kpt-color-success: $kpt-color-green-600;
|
|
122
|
+
$kpt-color-success-hover: $kpt-color-green-700;
|
|
123
|
+
$kpt-color-success-contrast: $kpt-color-neutral-0;
|
|
124
|
+
$kpt-color-success-subtle: $kpt-color-green-50;
|
|
125
|
+
$kpt-color-success-border: $kpt-color-green-200;
|
|
97
126
|
$kpt-color-warning: $kpt-color-amber-600;
|
|
127
|
+
$kpt-color-warning-hover: $kpt-color-amber-700;
|
|
128
|
+
$kpt-color-warning-contrast: $kpt-color-neutral-0;
|
|
129
|
+
$kpt-color-warning-subtle: $kpt-color-amber-50;
|
|
130
|
+
$kpt-color-warning-border: $kpt-color-amber-200;
|
|
98
131
|
$kpt-color-info: $kpt-color-blue-600;
|
|
132
|
+
$kpt-color-info-hover: $kpt-color-blue-700;
|
|
133
|
+
$kpt-color-info-contrast: $kpt-color-neutral-0;
|
|
134
|
+
$kpt-color-info-subtle: $kpt-color-blue-50;
|
|
135
|
+
$kpt-color-info-border: $kpt-color-blue-200;
|
|
99
136
|
$kpt-color-focus-ring: $kpt-color-neutral-900;
|
|
137
|
+
$kpt-color-overlay: $kpt-color-overlay-scrim;
|
|
138
|
+
$kpt-shadow-sm: $kpt-elevation-1;
|
|
139
|
+
$kpt-shadow-md: $kpt-elevation-2;
|
|
140
|
+
$kpt-shadow-lg: $kpt-elevation-3;
|
|
100
141
|
$kpt-button-radius: $kpt-radius-md;
|
|
101
142
|
$kpt-button-font-weight: $kpt-font-weight-medium;
|
|
102
143
|
$kpt-button-gap: $kpt-space-2;
|
|
@@ -106,6 +147,10 @@ $kpt-card-padding: $kpt-space-6;
|
|
|
106
147
|
$kpt-card-shadow: $kpt-elevation-2;
|
|
107
148
|
$kpt-table-radius: $kpt-radius-lg;
|
|
108
149
|
$kpt-table-cell-padding: $kpt-space-3;
|
|
150
|
+
$kpt-color-text: $kpt-color-on-surface;
|
|
151
|
+
$kpt-color-text-muted: $kpt-color-on-surface-muted;
|
|
152
|
+
$kpt-color-text-inverse: $kpt-color-on-primary;
|
|
153
|
+
$kpt-color-primary-contrast: $kpt-color-on-primary;
|
|
109
154
|
$kpt-button-filled-bg: $kpt-color-primary;
|
|
110
155
|
$kpt-button-filled-fg: $kpt-color-on-primary;
|
|
111
156
|
$kpt-button-filled-bg-hover: $kpt-color-primary-hover;
|
|
@@ -162,14 +207,30 @@ $kpt-table-row-selected: $kpt-color-muted;
|
|
|
162
207
|
--kpt-color-neutral-900: oklch(0.210 0.006 286);
|
|
163
208
|
--kpt-color-neutral-950: oklch(0.141 0.005 286);
|
|
164
209
|
--kpt-color-neutral-1000: oklch(0 0 0);
|
|
210
|
+
--kpt-color-red-50: oklch(0.971 0.013 25);
|
|
211
|
+
--kpt-color-red-200: oklch(0.885 0.062 25);
|
|
165
212
|
--kpt-color-red-500: oklch(0.637 0.208 25);
|
|
166
213
|
--kpt-color-red-600: oklch(0.577 0.213 27);
|
|
214
|
+
--kpt-color-red-700: oklch(0.505 0.190 27);
|
|
215
|
+
--kpt-color-red-950: oklch(0.260 0.090 27);
|
|
216
|
+
--kpt-color-green-50: oklch(0.975 0.030 150);
|
|
217
|
+
--kpt-color-green-200: oklch(0.900 0.070 150);
|
|
167
218
|
--kpt-color-green-500: oklch(0.723 0.170 150);
|
|
168
219
|
--kpt-color-green-600: oklch(0.627 0.170 150);
|
|
220
|
+
--kpt-color-green-700: oklch(0.530 0.150 150);
|
|
221
|
+
--kpt-color-green-950: oklch(0.270 0.060 150);
|
|
222
|
+
--kpt-color-amber-50: oklch(0.980 0.030 80);
|
|
223
|
+
--kpt-color-amber-200: oklch(0.920 0.080 75);
|
|
169
224
|
--kpt-color-amber-500: oklch(0.769 0.160 70);
|
|
170
225
|
--kpt-color-amber-600: oklch(0.666 0.160 60);
|
|
226
|
+
--kpt-color-amber-700: oklch(0.550 0.130 55);
|
|
227
|
+
--kpt-color-amber-950: oklch(0.280 0.060 60);
|
|
228
|
+
--kpt-color-blue-50: oklch(0.970 0.015 255);
|
|
229
|
+
--kpt-color-blue-200: oklch(0.880 0.050 255);
|
|
171
230
|
--kpt-color-blue-500: oklch(0.623 0.170 250);
|
|
172
231
|
--kpt-color-blue-600: oklch(0.546 0.190 255);
|
|
232
|
+
--kpt-color-blue-700: oklch(0.470 0.160 255);
|
|
233
|
+
--kpt-color-blue-950: oklch(0.280 0.090 265);
|
|
173
234
|
--kpt-color-overlay-scrim: oklch(0.141 0.005 286 / 0.5);
|
|
174
235
|
--kpt-space-0: 0;
|
|
175
236
|
--kpt-space-1: 0.25rem;
|
|
@@ -227,23 +288,48 @@ $kpt-table-row-selected: $kpt-color-muted;
|
|
|
227
288
|
--kpt-color-surface-variant: var(--kpt-color-neutral-50);
|
|
228
289
|
--kpt-color-surface-raised: var(--kpt-color-neutral-0);
|
|
229
290
|
--kpt-color-surface-sunken: var(--kpt-color-neutral-100);
|
|
291
|
+
--kpt-color-surface-hover: var(--kpt-color-neutral-50);
|
|
292
|
+
--kpt-color-surface-selected: var(--kpt-color-neutral-100);
|
|
230
293
|
--kpt-color-on-surface: var(--kpt-color-neutral-900);
|
|
231
294
|
--kpt-color-on-surface-muted: var(--kpt-color-neutral-500);
|
|
295
|
+
--kpt-color-text-subtle: var(--kpt-color-neutral-400);
|
|
232
296
|
--kpt-color-border: var(--kpt-color-neutral-200);
|
|
233
297
|
--kpt-color-border-strong: var(--kpt-color-neutral-300);
|
|
234
298
|
--kpt-color-primary: var(--kpt-color-neutral-900);
|
|
235
299
|
--kpt-color-primary-hover: var(--kpt-color-neutral-800);
|
|
236
300
|
--kpt-color-primary-active: var(--kpt-color-neutral-700);
|
|
237
|
-
--kpt-color-
|
|
301
|
+
--kpt-color-primary-subtle: var(--kpt-color-neutral-100);
|
|
302
|
+
--kpt-color-primary-border: var(--kpt-color-neutral-300);
|
|
303
|
+
--kpt-color-on-primary: var(--kpt-color-neutral-0);
|
|
238
304
|
--kpt-color-muted: var(--kpt-color-neutral-100);
|
|
239
305
|
--kpt-color-muted-hover: var(--kpt-color-neutral-200);
|
|
240
306
|
--kpt-color-on-muted: var(--kpt-color-neutral-800);
|
|
241
307
|
--kpt-color-danger: var(--kpt-color-red-600);
|
|
308
|
+
--kpt-color-danger-hover: var(--kpt-color-red-700);
|
|
309
|
+
--kpt-color-danger-contrast: var(--kpt-color-neutral-0);
|
|
310
|
+
--kpt-color-danger-subtle: var(--kpt-color-red-50);
|
|
311
|
+
--kpt-color-danger-border: var(--kpt-color-red-200);
|
|
242
312
|
--kpt-color-on-danger: var(--kpt-color-neutral-0);
|
|
243
313
|
--kpt-color-success: var(--kpt-color-green-600);
|
|
314
|
+
--kpt-color-success-hover: var(--kpt-color-green-700);
|
|
315
|
+
--kpt-color-success-contrast: var(--kpt-color-neutral-0);
|
|
316
|
+
--kpt-color-success-subtle: var(--kpt-color-green-50);
|
|
317
|
+
--kpt-color-success-border: var(--kpt-color-green-200);
|
|
244
318
|
--kpt-color-warning: var(--kpt-color-amber-600);
|
|
319
|
+
--kpt-color-warning-hover: var(--kpt-color-amber-700);
|
|
320
|
+
--kpt-color-warning-contrast: var(--kpt-color-neutral-0);
|
|
321
|
+
--kpt-color-warning-subtle: var(--kpt-color-amber-50);
|
|
322
|
+
--kpt-color-warning-border: var(--kpt-color-amber-200);
|
|
245
323
|
--kpt-color-info: var(--kpt-color-blue-600);
|
|
324
|
+
--kpt-color-info-hover: var(--kpt-color-blue-700);
|
|
325
|
+
--kpt-color-info-contrast: var(--kpt-color-neutral-0);
|
|
326
|
+
--kpt-color-info-subtle: var(--kpt-color-blue-50);
|
|
327
|
+
--kpt-color-info-border: var(--kpt-color-blue-200);
|
|
246
328
|
--kpt-color-focus-ring: var(--kpt-color-neutral-900);
|
|
329
|
+
--kpt-color-overlay: var(--kpt-color-overlay-scrim);
|
|
330
|
+
--kpt-shadow-sm: var(--kpt-elevation-1);
|
|
331
|
+
--kpt-shadow-md: var(--kpt-elevation-2);
|
|
332
|
+
--kpt-shadow-lg: var(--kpt-elevation-3);
|
|
247
333
|
--kpt-button-radius: var(--kpt-radius-md);
|
|
248
334
|
--kpt-button-font-weight: var(--kpt-font-weight-medium);
|
|
249
335
|
--kpt-button-gap: var(--kpt-space-2);
|
|
@@ -253,6 +339,10 @@ $kpt-table-row-selected: $kpt-color-muted;
|
|
|
253
339
|
--kpt-card-shadow: var(--kpt-elevation-2);
|
|
254
340
|
--kpt-table-radius: var(--kpt-radius-lg);
|
|
255
341
|
--kpt-table-cell-padding: var(--kpt-space-3);
|
|
342
|
+
--kpt-color-text: var(--kpt-color-on-surface);
|
|
343
|
+
--kpt-color-text-muted: var(--kpt-color-on-surface-muted);
|
|
344
|
+
--kpt-color-text-inverse: var(--kpt-color-on-primary);
|
|
345
|
+
--kpt-color-primary-contrast: var(--kpt-color-on-primary);
|
|
256
346
|
--kpt-button-filled-bg: var(--kpt-color-primary);
|
|
257
347
|
--kpt-button-filled-fg: var(--kpt-color-on-primary);
|
|
258
348
|
--kpt-button-filled-bg-hover: var(--kpt-color-primary-hover);
|
package/package.json
CHANGED