@konce-pt/tokens 0.1.1 → 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.
Files changed (11) hide show
  1. package/README.md +40 -7
  2. package/dist/css/tokens.css +46 -1
  3. package/dist/css/tokens.d.ts +1 -0
  4. package/dist/css/tokens.dark.css +45 -0
  5. package/dist/css/tokens.dark.d.ts +1 -0
  6. package/dist/js/tokens.d.ts +45 -0
  7. package/dist/js/tokens.js +49 -2
  8. package/dist/registry/tokens.json +1744 -0
  9. package/dist/scss/_tokens.dark.scss +144 -0
  10. package/dist/scss/_tokens.scss +242 -2
  11. package/package.json +9 -3
package/dist/scss/_tokens.dark.scss ADDED
@@ -0,0 +1,144 @@
1
+ // Do not edit directly, this file was auto-generated.
2
+ // Użycie: @use '@konce-pt/tokens/scss' as t; @include t.kpt-dark-tokens;
3
+ @mixin kpt-dark-tokens {
4
+ [data-theme="dark"] {
5
+ --kpt-color-neutral-0: oklch(1 0 0);
6
+ --kpt-color-neutral-50: oklch(0.985 0 0);
7
+ --kpt-color-neutral-100: oklch(0.967 0.001 286);
8
+ --kpt-color-neutral-200: oklch(0.920 0.004 286);
9
+ --kpt-color-neutral-300: oklch(0.871 0.006 286);
10
+ --kpt-color-neutral-400: oklch(0.705 0.015 286);
11
+ --kpt-color-neutral-500: oklch(0.552 0.016 286);
12
+ --kpt-color-neutral-600: oklch(0.442 0.017 286);
13
+ --kpt-color-neutral-700: oklch(0.370 0.013 286);
14
+ --kpt-color-neutral-800: oklch(0.274 0.006 286);
15
+ --kpt-color-neutral-900: oklch(0.210 0.006 286);
16
+ --kpt-color-neutral-950: oklch(0.141 0.005 286);
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);
20
+ --kpt-color-red-500: oklch(0.637 0.208 25);
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);
26
+ --kpt-color-green-500: oklch(0.723 0.170 150);
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);
32
+ --kpt-color-amber-500: oklch(0.769 0.160 70);
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);
38
+ --kpt-color-blue-500: oklch(0.623 0.170 250);
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);
42
+ --kpt-color-overlay-scrim: oklch(0 0 0 / 0.6);
43
+ --kpt-space-0: 0;
44
+ --kpt-space-1: 0.25rem;
45
+ --kpt-space-2: 0.5rem;
46
+ --kpt-space-3: 0.75rem;
47
+ --kpt-space-4: 1rem;
48
+ --kpt-space-5: 1.25rem;
49
+ --kpt-space-6: 1.5rem;
50
+ --kpt-space-8: 2rem;
51
+ --kpt-space-10: 2.5rem;
52
+ --kpt-space-12: 3rem;
53
+ --kpt-space-16: 4rem;
54
+ --kpt-radius-none: 0;
55
+ --kpt-radius-sm: 0.25rem;
56
+ --kpt-radius-md: 0.5rem;
57
+ --kpt-radius-lg: 0.75rem;
58
+ --kpt-radius-xl: 1rem;
59
+ --kpt-radius-full: 9999px;
60
+ --kpt-border-width-thin: 1px;
61
+ --kpt-border-width-medium: 2px;
62
+ --kpt-z-base: 0;
63
+ --kpt-z-raised: 10;
64
+ --kpt-z-dropdown: 1000;
65
+ --kpt-z-overlay: 1100;
66
+ --kpt-z-modal: 1200;
67
+ --kpt-z-toast: 1300;
68
+ --kpt-motion-duration-fast: 120ms;
69
+ --kpt-motion-duration-base: 200ms;
70
+ --kpt-motion-duration-slow: 320ms;
71
+ --kpt-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
72
+ --kpt-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
73
+ --kpt-font-family-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
74
+ --kpt-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
75
+ --kpt-font-weight-regular: 400;
76
+ --kpt-font-weight-medium: 500;
77
+ --kpt-font-weight-semibold: 600;
78
+ --kpt-font-weight-bold: 700;
79
+ --kpt-font-size-xs: 0.75rem;
80
+ --kpt-font-size-sm: 0.875rem;
81
+ --kpt-font-size-md: 1rem;
82
+ --kpt-font-size-lg: 1.125rem;
83
+ --kpt-font-size-xl: 1.25rem;
84
+ --kpt-font-size-2xl: 1.5rem;
85
+ --kpt-font-size-3xl: 1.875rem;
86
+ --kpt-font-line-height-tight: 1.25;
87
+ --kpt-font-line-height-normal: 1.5;
88
+ --kpt-font-line-height-relaxed: 1.7;
89
+ --kpt-elevation-1: 0 1px 2px 0 oklch(0 0 0 / 0.5);
90
+ --kpt-elevation-2: 0 2px 6px -1px oklch(0 0 0 / 0.55), 0 1px 2px 0 oklch(0 0 0 / 0.4);
91
+ --kpt-elevation-3: 0 8px 16px -4px oklch(0 0 0 / 0.6), 0 2px 4px 0 oklch(0 0 0 / 0.4);
92
+ --kpt-elevation-4: 0 16px 28px -8px oklch(0 0 0 / 0.65), 0 4px 8px 0 oklch(0 0 0 / 0.45);
93
+ --kpt-color-surface: var(--kpt-color-neutral-950);
94
+ --kpt-color-surface-variant: var(--kpt-color-neutral-900);
95
+ --kpt-color-surface-raised: var(--kpt-color-neutral-900);
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);
99
+ --kpt-color-on-surface: var(--kpt-color-neutral-50);
100
+ --kpt-color-on-surface-muted: var(--kpt-color-neutral-400);
101
+ --kpt-color-text-subtle: var(--kpt-color-neutral-500);
102
+ --kpt-color-border: var(--kpt-color-neutral-800);
103
+ --kpt-color-border-strong: var(--kpt-color-neutral-700);
104
+ --kpt-color-primary: var(--kpt-color-neutral-100);
105
+ --kpt-color-primary-hover: var(--kpt-color-neutral-200);
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);
109
+ --kpt-color-on-primary: var(--kpt-color-neutral-900);
110
+ --kpt-color-muted: var(--kpt-color-neutral-800);
111
+ --kpt-color-muted-hover: var(--kpt-color-neutral-700);
112
+ --kpt-color-on-muted: var(--kpt-color-neutral-100);
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);
118
+ --kpt-color-on-danger: var(--kpt-color-neutral-950);
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);
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);
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);
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);
143
+ }
144
+ }
package/dist/scss/_tokens.scss CHANGED
@@ -1,6 +1,7 @@
1
-
2
1
  // Do not edit directly, this file was auto-generated.
2
+ @forward 'tokens.dark';
3
3
 
4
+ // Zmienne SCSS (wartości tokenów, compile-time).
4
5
  $kpt-color-neutral-0: oklch(1 0 0);
5
6
  $kpt-color-neutral-50: oklch(0.985 0 0);
6
7
  $kpt-color-neutral-100: oklch(0.967 0.001 286);
@@ -14,14 +15,30 @@ $kpt-color-neutral-800: oklch(0.274 0.006 286);
14
15
  $kpt-color-neutral-900: oklch(0.210 0.006 286);
15
16
  $kpt-color-neutral-950: oklch(0.141 0.005 286);
16
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);
17
20
  $kpt-color-red-500: oklch(0.637 0.208 25);
18
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);
19
26
  $kpt-color-green-500: oklch(0.723 0.170 150);
20
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);
21
32
  $kpt-color-amber-500: oklch(0.769 0.160 70);
22
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);
23
38
  $kpt-color-blue-500: oklch(0.623 0.170 250);
24
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);
25
42
  $kpt-color-overlay-scrim: oklch(0.141 0.005 286 / 0.5);
26
43
  $kpt-space-0: 0;
27
44
  $kpt-space-1: 0.25rem;
@@ -79,23 +96,48 @@ $kpt-color-surface: $kpt-color-neutral-0;
79
96
  $kpt-color-surface-variant: $kpt-color-neutral-50;
80
97
  $kpt-color-surface-raised: $kpt-color-neutral-0;
81
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;
82
101
  $kpt-color-on-surface: $kpt-color-neutral-900;
83
102
  $kpt-color-on-surface-muted: $kpt-color-neutral-500;
103
+ $kpt-color-text-subtle: $kpt-color-neutral-400;
84
104
  $kpt-color-border: $kpt-color-neutral-200;
85
105
  $kpt-color-border-strong: $kpt-color-neutral-300;
86
106
  $kpt-color-primary: $kpt-color-neutral-900;
87
107
  $kpt-color-primary-hover: $kpt-color-neutral-800;
88
108
  $kpt-color-primary-active: $kpt-color-neutral-700;
89
- $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;
90
112
  $kpt-color-muted: $kpt-color-neutral-100;
91
113
  $kpt-color-muted-hover: $kpt-color-neutral-200;
92
114
  $kpt-color-on-muted: $kpt-color-neutral-800;
93
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;
94
120
  $kpt-color-on-danger: $kpt-color-neutral-0;
95
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;
96
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;
97
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;
98
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;
99
141
  $kpt-button-radius: $kpt-radius-md;
100
142
  $kpt-button-font-weight: $kpt-font-weight-medium;
101
143
  $kpt-button-gap: $kpt-space-2;
@@ -105,6 +147,10 @@ $kpt-card-padding: $kpt-space-6;
105
147
  $kpt-card-shadow: $kpt-elevation-2;
106
148
  $kpt-table-radius: $kpt-radius-lg;
107
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;
108
154
  $kpt-button-filled-bg: $kpt-color-primary;
109
155
  $kpt-button-filled-fg: $kpt-color-on-primary;
110
156
  $kpt-button-filled-bg-hover: $kpt-color-primary-hover;
@@ -143,3 +189,197 @@ $kpt-table-header-bg: $kpt-color-surface-variant;
143
189
  $kpt-table-header-fg: $kpt-color-on-surface-muted;
144
190
  $kpt-table-row-hover: $kpt-color-surface-variant;
145
191
  $kpt-table-row-selected: $kpt-color-muted;
192
+
193
+ // Custom properties w runtime (light + komponenty).
194
+ // Użycie: @use '@konce-pt/tokens/scss' as t; @include t.kpt-root-tokens;
195
+ @mixin kpt-root-tokens {
196
+ :root {
197
+ --kpt-color-neutral-0: oklch(1 0 0);
198
+ --kpt-color-neutral-50: oklch(0.985 0 0);
199
+ --kpt-color-neutral-100: oklch(0.967 0.001 286);
200
+ --kpt-color-neutral-200: oklch(0.920 0.004 286);
201
+ --kpt-color-neutral-300: oklch(0.871 0.006 286);
202
+ --kpt-color-neutral-400: oklch(0.705 0.015 286);
203
+ --kpt-color-neutral-500: oklch(0.552 0.016 286);
204
+ --kpt-color-neutral-600: oklch(0.442 0.017 286);
205
+ --kpt-color-neutral-700: oklch(0.370 0.013 286);
206
+ --kpt-color-neutral-800: oklch(0.274 0.006 286);
207
+ --kpt-color-neutral-900: oklch(0.210 0.006 286);
208
+ --kpt-color-neutral-950: oklch(0.141 0.005 286);
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);
212
+ --kpt-color-red-500: oklch(0.637 0.208 25);
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);
218
+ --kpt-color-green-500: oklch(0.723 0.170 150);
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);
224
+ --kpt-color-amber-500: oklch(0.769 0.160 70);
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);
230
+ --kpt-color-blue-500: oklch(0.623 0.170 250);
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);
234
+ --kpt-color-overlay-scrim: oklch(0.141 0.005 286 / 0.5);
235
+ --kpt-space-0: 0;
236
+ --kpt-space-1: 0.25rem;
237
+ --kpt-space-2: 0.5rem;
238
+ --kpt-space-3: 0.75rem;
239
+ --kpt-space-4: 1rem;
240
+ --kpt-space-5: 1.25rem;
241
+ --kpt-space-6: 1.5rem;
242
+ --kpt-space-8: 2rem;
243
+ --kpt-space-10: 2.5rem;
244
+ --kpt-space-12: 3rem;
245
+ --kpt-space-16: 4rem;
246
+ --kpt-radius-none: 0;
247
+ --kpt-radius-sm: 0.25rem;
248
+ --kpt-radius-md: 0.5rem;
249
+ --kpt-radius-lg: 0.75rem;
250
+ --kpt-radius-xl: 1rem;
251
+ --kpt-radius-full: 9999px;
252
+ --kpt-border-width-thin: 1px;
253
+ --kpt-border-width-medium: 2px;
254
+ --kpt-z-base: 0;
255
+ --kpt-z-raised: 10;
256
+ --kpt-z-dropdown: 1000;
257
+ --kpt-z-overlay: 1100;
258
+ --kpt-z-modal: 1200;
259
+ --kpt-z-toast: 1300;
260
+ --kpt-motion-duration-fast: 120ms;
261
+ --kpt-motion-duration-base: 200ms;
262
+ --kpt-motion-duration-slow: 320ms;
263
+ --kpt-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
264
+ --kpt-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
265
+ --kpt-font-family-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
266
+ --kpt-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
267
+ --kpt-font-weight-regular: 400;
268
+ --kpt-font-weight-medium: 500;
269
+ --kpt-font-weight-semibold: 600;
270
+ --kpt-font-weight-bold: 700;
271
+ --kpt-font-size-xs: 0.75rem;
272
+ --kpt-font-size-sm: 0.875rem;
273
+ --kpt-font-size-md: 1rem;
274
+ --kpt-font-size-lg: 1.125rem;
275
+ --kpt-font-size-xl: 1.25rem;
276
+ --kpt-font-size-2xl: 1.5rem;
277
+ --kpt-font-size-3xl: 1.875rem;
278
+ --kpt-font-line-height-tight: 1.25;
279
+ --kpt-font-line-height-normal: 1.5;
280
+ --kpt-font-line-height-relaxed: 1.7;
281
+ --kpt-elevation-1: 0 1px 2px 0 oklch(0.141 0.005 286 / 0.08);
282
+ --kpt-elevation-2: 0 2px 6px -1px oklch(0.141 0.005 286 / 0.10), 0 1px 2px 0 oklch(0.141 0.005 286 / 0.06);
283
+ --kpt-elevation-3: 0 8px 16px -4px oklch(0.141 0.005 286 / 0.12), 0 2px 4px 0 oklch(0.141 0.005 286 / 0.06);
284
+ --kpt-elevation-4: 0 16px 28px -8px oklch(0.141 0.005 286 / 0.16), 0 4px 8px 0 oklch(0.141 0.005 286 / 0.08);
285
+ --kpt-toolbar-height: 3.5rem;
286
+ --kpt-sidenav-width: 16rem;
287
+ --kpt-color-surface: var(--kpt-color-neutral-0);
288
+ --kpt-color-surface-variant: var(--kpt-color-neutral-50);
289
+ --kpt-color-surface-raised: var(--kpt-color-neutral-0);
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);
293
+ --kpt-color-on-surface: var(--kpt-color-neutral-900);
294
+ --kpt-color-on-surface-muted: var(--kpt-color-neutral-500);
295
+ --kpt-color-text-subtle: var(--kpt-color-neutral-400);
296
+ --kpt-color-border: var(--kpt-color-neutral-200);
297
+ --kpt-color-border-strong: var(--kpt-color-neutral-300);
298
+ --kpt-color-primary: var(--kpt-color-neutral-900);
299
+ --kpt-color-primary-hover: var(--kpt-color-neutral-800);
300
+ --kpt-color-primary-active: var(--kpt-color-neutral-700);
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);
304
+ --kpt-color-muted: var(--kpt-color-neutral-100);
305
+ --kpt-color-muted-hover: var(--kpt-color-neutral-200);
306
+ --kpt-color-on-muted: var(--kpt-color-neutral-800);
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);
312
+ --kpt-color-on-danger: var(--kpt-color-neutral-0);
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);
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);
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);
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);
333
+ --kpt-button-radius: var(--kpt-radius-md);
334
+ --kpt-button-font-weight: var(--kpt-font-weight-medium);
335
+ --kpt-button-gap: var(--kpt-space-2);
336
+ --kpt-form-field-radius: var(--kpt-radius-md);
337
+ --kpt-card-radius: var(--kpt-radius-lg);
338
+ --kpt-card-padding: var(--kpt-space-6);
339
+ --kpt-card-shadow: var(--kpt-elevation-2);
340
+ --kpt-table-radius: var(--kpt-radius-lg);
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);
346
+ --kpt-button-filled-bg: var(--kpt-color-primary);
347
+ --kpt-button-filled-fg: var(--kpt-color-on-primary);
348
+ --kpt-button-filled-bg-hover: var(--kpt-color-primary-hover);
349
+ --kpt-button-filled-bg-active: var(--kpt-color-primary-active);
350
+ --kpt-button-tonal-bg: var(--kpt-color-muted);
351
+ --kpt-button-tonal-fg: var(--kpt-color-on-muted);
352
+ --kpt-button-tonal-bg-hover: var(--kpt-color-muted-hover);
353
+ --kpt-button-outline-border: var(--kpt-color-border-strong);
354
+ --kpt-button-outline-fg: var(--kpt-color-on-surface);
355
+ --kpt-button-outline-bg-hover: var(--kpt-color-muted);
356
+ --kpt-button-text-fg: var(--kpt-color-on-surface);
357
+ --kpt-button-text-bg-hover: var(--kpt-color-muted);
358
+ --kpt-form-field-bg: var(--kpt-color-surface);
359
+ --kpt-form-field-text: var(--kpt-color-on-surface);
360
+ --kpt-form-field-placeholder: var(--kpt-color-on-surface-muted);
361
+ --kpt-form-field-label: var(--kpt-color-on-surface);
362
+ --kpt-form-field-hint: var(--kpt-color-on-surface-muted);
363
+ --kpt-form-field-border: var(--kpt-color-border-strong);
364
+ --kpt-form-field-border-hover: var(--kpt-color-on-surface-muted);
365
+ --kpt-form-field-border-focus: var(--kpt-color-focus-ring);
366
+ --kpt-form-field-border-error: var(--kpt-color-danger);
367
+ --kpt-form-field-error: var(--kpt-color-danger);
368
+ --kpt-card-bg: var(--kpt-color-surface-raised);
369
+ --kpt-card-fg: var(--kpt-color-on-surface);
370
+ --kpt-card-border: var(--kpt-color-border);
371
+ --kpt-toolbar-bg: var(--kpt-color-surface-raised);
372
+ --kpt-toolbar-fg: var(--kpt-color-on-surface);
373
+ --kpt-toolbar-border: var(--kpt-color-border);
374
+ --kpt-sidenav-bg: var(--kpt-color-surface-variant);
375
+ --kpt-sidenav-fg: var(--kpt-color-on-surface);
376
+ --kpt-sidenav-border: var(--kpt-color-border);
377
+ --kpt-table-bg: var(--kpt-color-surface-raised);
378
+ --kpt-table-fg: var(--kpt-color-on-surface);
379
+ --kpt-table-border: var(--kpt-color-border);
380
+ --kpt-table-header-bg: var(--kpt-color-surface-variant);
381
+ --kpt-table-header-fg: var(--kpt-color-on-surface-muted);
382
+ --kpt-table-row-hover: var(--kpt-color-surface-variant);
383
+ --kpt-table-row-selected: var(--kpt-color-muted);
384
+ }
385
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@konce-pt/tokens",
3
- "version": "0.1.1",
3
+ "version": "0.2.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",
@@ -32,8 +32,14 @@
32
32
  "types": "./dist/js/tokens.d.ts",
33
33
  "default": "./dist/js/tokens.js"
34
34
  },
35
- "./css": "./dist/css/tokens.css",
36
- "./css/dark": "./dist/css/tokens.dark.css",
35
+ "./css": {
36
+ "types": "./dist/css/tokens.d.ts",
37
+ "default": "./dist/css/tokens.css"
38
+ },
39
+ "./css/dark": {
40
+ "types": "./dist/css/tokens.dark.d.ts",
41
+ "default": "./dist/css/tokens.dark.css"
42
+ },
37
43
  "./scss": "./dist/scss/_tokens.scss"
38
44
  },
39
45
  "files": [