@konce-pt/tokens 0.8.5 → 0.9.1

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 +2 -2
  2. package/dist/css/tokens.css +25 -0
  3. package/dist/css/tokens.dark.css +0 -88
  4. package/dist/js/tokens.d.ts +26 -0
  5. package/dist/js/tokens.js +25 -0
  6. package/dist/registry/tokens.json +1549 -171
  7. package/dist/scss/_tokens.dark.scss +0 -88
  8. package/dist/scss/_tokens.scss +50 -0
  9. package/package.json +3 -2
package/dist/scss/_tokens.dark.scss CHANGED
@@ -2,95 +2,7 @@
2
2
  // Użycie: @use '@konce-pt/tokens/scss' as t; @include t.kpt-dark-tokens;
3
3
  @mixin kpt-dark-tokens {
4
4
  [data-theme="dark"] {
5
- --kpt-breakpoint-sm: 640px; /** Telefon w poziomie / mały tablet. */
6
- --kpt-breakpoint-md: 768px; /** Tablet. */
7
- --kpt-breakpoint-lg: 1024px; /** Mały desktop / tablet w poziomie. */
8
- --kpt-breakpoint-xl: 1280px; /** Desktop. */
9
- --kpt-breakpoint-2xl: 1536px; /** Szeroki desktop. */
10
- --kpt-color-neutral-0: oklch(1 0 0);
11
- --kpt-color-neutral-50: oklch(0.985 0 0);
12
- --kpt-color-neutral-100: oklch(0.967 0.001 286);
13
- --kpt-color-neutral-200: oklch(0.920 0.004 286);
14
- --kpt-color-neutral-300: oklch(0.871 0.006 286);
15
- --kpt-color-neutral-400: oklch(0.705 0.015 286);
16
- --kpt-color-neutral-500: oklch(0.552 0.016 286);
17
- --kpt-color-neutral-600: oklch(0.442 0.017 286);
18
- --kpt-color-neutral-700: oklch(0.370 0.013 286);
19
- --kpt-color-neutral-800: oklch(0.274 0.006 286);
20
- --kpt-color-neutral-900: oklch(0.210 0.006 286);
21
- --kpt-color-neutral-950: oklch(0.141 0.005 286);
22
- --kpt-color-neutral-1000: oklch(0 0 0);
23
- --kpt-color-red-50: oklch(0.971 0.013 25);
24
- --kpt-color-red-200: oklch(0.885 0.062 25);
25
- --kpt-color-red-500: oklch(0.637 0.208 25);
26
- --kpt-color-red-600: oklch(0.577 0.213 27);
27
- --kpt-color-red-700: oklch(0.505 0.190 27);
28
- --kpt-color-red-950: oklch(0.260 0.090 27);
29
- --kpt-color-green-50: oklch(0.975 0.030 150);
30
- --kpt-color-green-200: oklch(0.900 0.070 150);
31
- --kpt-color-green-500: oklch(0.723 0.170 150);
32
- --kpt-color-green-600: oklch(0.627 0.170 150);
33
- --kpt-color-green-700: oklch(0.530 0.150 150);
34
- --kpt-color-green-950: oklch(0.270 0.060 150);
35
- --kpt-color-amber-50: oklch(0.980 0.030 80);
36
- --kpt-color-amber-200: oklch(0.920 0.080 75);
37
- --kpt-color-amber-500: oklch(0.769 0.160 70);
38
- --kpt-color-amber-600: oklch(0.666 0.160 60);
39
- --kpt-color-amber-700: oklch(0.550 0.130 55);
40
- --kpt-color-amber-950: oklch(0.280 0.060 60);
41
- --kpt-color-blue-50: oklch(0.970 0.015 255);
42
- --kpt-color-blue-200: oklch(0.880 0.050 255);
43
- --kpt-color-blue-500: oklch(0.623 0.170 250);
44
- --kpt-color-blue-600: oklch(0.546 0.190 255);
45
- --kpt-color-blue-700: oklch(0.470 0.160 255);
46
- --kpt-color-blue-950: oklch(0.280 0.090 265);
47
5
  --kpt-color-overlay-scrim: oklch(0 0 0 / 0.6);
48
- --kpt-space-0: 0;
49
- --kpt-space-1: 0.25rem;
50
- --kpt-space-2: 0.5rem;
51
- --kpt-space-3: 0.75rem;
52
- --kpt-space-4: 1rem;
53
- --kpt-space-5: 1.25rem;
54
- --kpt-space-6: 1.5rem;
55
- --kpt-space-8: 2rem;
56
- --kpt-space-10: 2.5rem;
57
- --kpt-space-12: 3rem;
58
- --kpt-space-16: 4rem;
59
- --kpt-radius-none: 0;
60
- --kpt-radius-sm: 0.25rem;
61
- --kpt-radius-md: 0.5rem;
62
- --kpt-radius-lg: 0.75rem;
63
- --kpt-radius-xl: 1rem;
64
- --kpt-radius-full: 9999px;
65
- --kpt-border-width-thin: 1px;
66
- --kpt-border-width-medium: 2px;
67
- --kpt-z-base: 0;
68
- --kpt-z-raised: 10;
69
- --kpt-z-dropdown: 1000;
70
- --kpt-z-overlay: 1100;
71
- --kpt-z-modal: 1200;
72
- --kpt-z-toast: 1300;
73
- --kpt-motion-duration-fast: 120ms;
74
- --kpt-motion-duration-base: 200ms;
75
- --kpt-motion-duration-slow: 320ms;
76
- --kpt-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
77
- --kpt-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
78
- --kpt-font-family-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
79
- --kpt-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
80
- --kpt-font-weight-regular: 400;
81
- --kpt-font-weight-medium: 500;
82
- --kpt-font-weight-semibold: 600;
83
- --kpt-font-weight-bold: 700;
84
- --kpt-font-size-xs: 0.75rem;
85
- --kpt-font-size-sm: 0.875rem;
86
- --kpt-font-size-md: 1rem;
87
- --kpt-font-size-lg: 1.125rem;
88
- --kpt-font-size-xl: 1.25rem;
89
- --kpt-font-size-2xl: 1.5rem;
90
- --kpt-font-size-3xl: 1.875rem;
91
- --kpt-font-line-height-tight: 1.25;
92
- --kpt-font-line-height-normal: 1.5;
93
- --kpt-font-line-height-relaxed: 1.7;
94
6
  --kpt-elevation-1: 0 1px 2px 0 oklch(0 0 0 / 0.5);
95
7
  --kpt-elevation-2: 0 2px 6px -1px oklch(0 0 0 / 0.55), 0 1px 2px 0 oklch(0 0 0 / 0.4);
96
8
  --kpt-elevation-3: 0 8px 16px -4px oklch(0 0 0 / 0.6), 0 2px 4px 0 oklch(0 0 0 / 0.4);
package/dist/scss/_tokens.scss CHANGED
@@ -105,6 +105,7 @@ $kpt-map-popup-max-height: 32rem; // Powyżej tej wysokości treść popupu się
105
105
  $kpt-map-search-width: 20rem; // Szerokość pola wyszukiwania adresów.
106
106
  $kpt-map-search-panel-max-height: 18rem; // Powyżej tej wysokości lista podpowiedzi się przewija.
107
107
  $kpt-map-marker-size: 2rem;
108
+ $kpt-progress-buffer-opacity: 0.32; // Pasek bufora to ten sam kolor co pasek główny, tylko przygaszony.
108
109
  $kpt-color-surface: $kpt-color-neutral-0;
109
110
  $kpt-color-surface-variant: $kpt-color-neutral-50;
110
111
  $kpt-color-surface-raised: $kpt-color-neutral-0;
@@ -161,6 +162,10 @@ $kpt-card-shadow: $kpt-elevation-2;
161
162
  $kpt-map-radius: $kpt-radius-lg;
162
163
  $kpt-map-popup-shadow: $kpt-elevation-3;
163
164
  $kpt-map-poi-media-radius: $kpt-radius-md;
165
+ $kpt-progress-thickness-sm: $kpt-space-1;
166
+ $kpt-progress-thickness-md: $kpt-space-2;
167
+ $kpt-progress-thickness-lg: $kpt-space-3;
168
+ $kpt-progress-gap: $kpt-space-2;
164
169
  $kpt-table-radius: $kpt-radius-lg;
165
170
  $kpt-table-cell-padding: $kpt-space-3;
166
171
  $kpt-color-text: $kpt-color-on-surface;
@@ -179,6 +184,23 @@ $kpt-button-outline-fg: $kpt-color-on-surface;
179
184
  $kpt-button-outline-bg-hover: $kpt-color-muted;
180
185
  $kpt-button-text-fg: $kpt-color-on-surface;
181
186
  $kpt-button-text-bg-hover: $kpt-color-muted;
187
+ $kpt-button-elevated-bg: $kpt-color-surface-raised;
188
+ $kpt-button-elevated-fg: $kpt-color-on-surface;
189
+ $kpt-button-elevated-bg-hover: $kpt-color-muted;
190
+ $kpt-button-link-fg: $kpt-color-primary;
191
+ $kpt-button-link-fg-hover: $kpt-color-primary-hover;
192
+ $kpt-button-danger-bg: $kpt-color-danger;
193
+ $kpt-button-danger-fg: $kpt-color-danger-contrast;
194
+ $kpt-button-danger-bg-hover: $kpt-color-danger-hover;
195
+ $kpt-button-success-bg: $kpt-color-success;
196
+ $kpt-button-success-fg: $kpt-color-success-contrast;
197
+ $kpt-button-success-bg-hover: $kpt-color-success-hover;
198
+ $kpt-button-warning-bg: $kpt-color-warning;
199
+ $kpt-button-warning-fg: $kpt-color-warning-contrast;
200
+ $kpt-button-warning-bg-hover: $kpt-color-warning-hover;
201
+ $kpt-button-info-bg: $kpt-color-info;
202
+ $kpt-button-info-fg: $kpt-color-info-contrast;
203
+ $kpt-button-info-bg-hover: $kpt-color-info-hover;
182
204
  $kpt-form-field-bg: $kpt-color-surface;
183
205
  $kpt-form-field-text: $kpt-color-on-surface;
184
206
  $kpt-form-field-placeholder: $kpt-color-on-surface-muted;
@@ -203,6 +225,9 @@ $kpt-map-border: $kpt-color-border;
203
225
  $kpt-map-popup-bg: $kpt-color-surface-raised;
204
226
  $kpt-map-poi-row-hover: $kpt-color-surface-hover; // Podświetlenie wiersza kontaktu odsłaniające akcje.
205
227
  $kpt-map-cluster-bg: $kpt-color-primary; // Domyślny kolor grupy przy clusterColorBy='none'.
228
+ $kpt-progress-track-bg: $kpt-color-surface-variant;
229
+ $kpt-progress-label-fg: $kpt-color-on-surface-muted;
230
+ $kpt-progress-value-fg: $kpt-color-on-surface;
206
231
  $kpt-table-bg: $kpt-color-surface-raised;
207
232
  $kpt-table-fg: $kpt-color-on-surface;
208
233
  $kpt-table-border: $kpt-color-border;
@@ -319,6 +344,7 @@ $kpt-map-cluster-fg: $kpt-color-primary-contrast;
319
344
  --kpt-map-search-width: 20rem; /** Szerokość pola wyszukiwania adresów. */
320
345
  --kpt-map-search-panel-max-height: 18rem; /** Powyżej tej wysokości lista podpowiedzi się przewija. */
321
346
  --kpt-map-marker-size: 2rem;
347
+ --kpt-progress-buffer-opacity: 0.32; /** Pasek bufora to ten sam kolor co pasek główny, tylko przygaszony. */
322
348
  --kpt-color-surface: var(--kpt-color-neutral-0);
323
349
  --kpt-color-surface-variant: var(--kpt-color-neutral-50);
324
350
  --kpt-color-surface-raised: var(--kpt-color-neutral-0);
@@ -375,6 +401,10 @@ $kpt-map-cluster-fg: $kpt-color-primary-contrast;
375
401
  --kpt-map-radius: var(--kpt-radius-lg);
376
402
  --kpt-map-popup-shadow: var(--kpt-elevation-3);
377
403
  --kpt-map-poi-media-radius: var(--kpt-radius-md);
404
+ --kpt-progress-thickness-sm: var(--kpt-space-1);
405
+ --kpt-progress-thickness-md: var(--kpt-space-2);
406
+ --kpt-progress-thickness-lg: var(--kpt-space-3);
407
+ --kpt-progress-gap: var(--kpt-space-2);
378
408
  --kpt-table-radius: var(--kpt-radius-lg);
379
409
  --kpt-table-cell-padding: var(--kpt-space-3);
380
410
  --kpt-color-text: var(--kpt-color-on-surface);
@@ -393,6 +423,23 @@ $kpt-map-cluster-fg: $kpt-color-primary-contrast;
393
423
  --kpt-button-outline-bg-hover: var(--kpt-color-muted);
394
424
  --kpt-button-text-fg: var(--kpt-color-on-surface);
395
425
  --kpt-button-text-bg-hover: var(--kpt-color-muted);
426
+ --kpt-button-elevated-bg: var(--kpt-color-surface-raised);
427
+ --kpt-button-elevated-fg: var(--kpt-color-on-surface);
428
+ --kpt-button-elevated-bg-hover: var(--kpt-color-muted);
429
+ --kpt-button-link-fg: var(--kpt-color-primary);
430
+ --kpt-button-link-fg-hover: var(--kpt-color-primary-hover);
431
+ --kpt-button-danger-bg: var(--kpt-color-danger);
432
+ --kpt-button-danger-fg: var(--kpt-color-danger-contrast);
433
+ --kpt-button-danger-bg-hover: var(--kpt-color-danger-hover);
434
+ --kpt-button-success-bg: var(--kpt-color-success);
435
+ --kpt-button-success-fg: var(--kpt-color-success-contrast);
436
+ --kpt-button-success-bg-hover: var(--kpt-color-success-hover);
437
+ --kpt-button-warning-bg: var(--kpt-color-warning);
438
+ --kpt-button-warning-fg: var(--kpt-color-warning-contrast);
439
+ --kpt-button-warning-bg-hover: var(--kpt-color-warning-hover);
440
+ --kpt-button-info-bg: var(--kpt-color-info);
441
+ --kpt-button-info-fg: var(--kpt-color-info-contrast);
442
+ --kpt-button-info-bg-hover: var(--kpt-color-info-hover);
396
443
  --kpt-form-field-bg: var(--kpt-color-surface);
397
444
  --kpt-form-field-text: var(--kpt-color-on-surface);
398
445
  --kpt-form-field-placeholder: var(--kpt-color-on-surface-muted);
@@ -417,6 +464,9 @@ $kpt-map-cluster-fg: $kpt-color-primary-contrast;
417
464
  --kpt-map-popup-bg: var(--kpt-color-surface-raised);
418
465
  --kpt-map-poi-row-hover: var(--kpt-color-surface-hover); /** Podświetlenie wiersza kontaktu odsłaniające akcje. */
419
466
  --kpt-map-cluster-bg: var(--kpt-color-primary); /** Domyślny kolor grupy przy clusterColorBy='none'. */
467
+ --kpt-progress-track-bg: var(--kpt-color-surface-variant);
468
+ --kpt-progress-label-fg: var(--kpt-color-on-surface-muted);
469
+ --kpt-progress-value-fg: var(--kpt-color-on-surface);
420
470
  --kpt-table-bg: var(--kpt-color-surface-raised);
421
471
  --kpt-table-fg: var(--kpt-color-on-surface);
422
472
  --kpt-table-border: var(--kpt-color-border);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@konce-pt/tokens",
3
- "version": "0.8.5",
3
+ "version": "0.9.1",
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",
@@ -40,7 +40,8 @@
40
40
  "types": "./dist/css/tokens.dark.d.ts",
41
41
  "default": "./dist/css/tokens.dark.css"
42
42
  },
43
- "./scss": "./dist/scss/_tokens.scss"
43
+ "./scss": "./dist/scss/_tokens.scss",
44
+ "./registry": "./dist/registry/tokens.json"
44
45
  },
45
46
  "files": [
46
47
  "dist"