@konce-pt/tokens 0.1.2 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +12 -0
  2. package/dist/css/tokens.css +46 -1
  3. package/dist/css/tokens.dark.css +45 -0
  4. package/dist/js/tokens.d.ts +45 -0
  5. package/dist/js/tokens.js +49 -2
  6. package/dist/registry/tokens.json +1744 -0
  7. package/dist/scss/_tokens.dark.scss +45 -0
  8. package/dist/scss/_tokens.scss +92 -2
  9. package/package.json +1 -1
package/dist/scss/_tokens.dark.scss CHANGED
@@ -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-on-primary: $kpt-color-neutral-50;
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-on-primary: var(--kpt-color-neutral-50);
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@konce-pt/tokens",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "description": "Design tokens for Koncept UI — OKLCH palette, light/dark theme, built with Style Dictionary (CSS vars, SCSS, TS).",
5
5
  "license": "MIT",
6
6
  "author": "konce.pt",