@konce-pt/tokens 0.8.3 → 0.9.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 +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/README.md CHANGED
@@ -55,10 +55,10 @@ import '@konce-pt/tokens/css/dark';
55
55
  **TypeScript constants**:
56
56
 
57
57
  ```ts
58
- import { tokens } from '@konce-pt/tokens';
58
+ import { KPT_COLOR_PRIMARY, KPT_SPACE_4 } from '@konce-pt/tokens';
59
59
  ```
60
60
 
61
- Every token is a `--kpt-*` custom property, e.g. `var(--kpt-color-primary)`, `var(--kpt-space-4)`, `var(--kpt-radius-md)`. Dark theme activates under `[data-theme="dark"]` or `prefers-color-scheme: dark`.
61
+ Every token is a `--kpt-*` custom property, e.g. `var(--kpt-color-primary)`, `var(--kpt-space-4)`, `var(--kpt-radius-md)`. Dark theme activates under `[data-theme="dark"]` on the root element; the library does not read `prefers-color-scheme` itself, so wire that up in the application if you want it to follow the OS.
62
62
 
63
63
  ## Breakpoints
64
64
 
package/dist/css/tokens.css CHANGED
@@ -106,6 +106,7 @@
106
106
  --kpt-map-search-width: 20rem; /** Szerokość pola wyszukiwania adresów. */
107
107
  --kpt-map-search-panel-max-height: 18rem; /** Powyżej tej wysokości lista podpowiedzi się przewija. */
108
108
  --kpt-map-marker-size: 2rem;
109
+ --kpt-progress-buffer-opacity: 0.32; /** Pasek bufora to ten sam kolor co pasek główny, tylko przygaszony. */
109
110
  --kpt-color-surface: var(--kpt-color-neutral-0);
110
111
  --kpt-color-surface-variant: var(--kpt-color-neutral-50);
111
112
  --kpt-color-surface-raised: var(--kpt-color-neutral-0);
@@ -162,6 +163,10 @@
162
163
  --kpt-map-radius: var(--kpt-radius-lg);
163
164
  --kpt-map-popup-shadow: var(--kpt-elevation-3);
164
165
  --kpt-map-poi-media-radius: var(--kpt-radius-md);
166
+ --kpt-progress-thickness-sm: var(--kpt-space-1);
167
+ --kpt-progress-thickness-md: var(--kpt-space-2);
168
+ --kpt-progress-thickness-lg: var(--kpt-space-3);
169
+ --kpt-progress-gap: var(--kpt-space-2);
165
170
  --kpt-table-radius: var(--kpt-radius-lg);
166
171
  --kpt-table-cell-padding: var(--kpt-space-3);
167
172
  --kpt-color-text: var(--kpt-color-on-surface);
@@ -180,6 +185,23 @@
180
185
  --kpt-button-outline-bg-hover: var(--kpt-color-muted);
181
186
  --kpt-button-text-fg: var(--kpt-color-on-surface);
182
187
  --kpt-button-text-bg-hover: var(--kpt-color-muted);
188
+ --kpt-button-elevated-bg: var(--kpt-color-surface-raised);
189
+ --kpt-button-elevated-fg: var(--kpt-color-on-surface);
190
+ --kpt-button-elevated-bg-hover: var(--kpt-color-muted);
191
+ --kpt-button-link-fg: var(--kpt-color-primary);
192
+ --kpt-button-link-fg-hover: var(--kpt-color-primary-hover);
193
+ --kpt-button-danger-bg: var(--kpt-color-danger);
194
+ --kpt-button-danger-fg: var(--kpt-color-danger-contrast);
195
+ --kpt-button-danger-bg-hover: var(--kpt-color-danger-hover);
196
+ --kpt-button-success-bg: var(--kpt-color-success);
197
+ --kpt-button-success-fg: var(--kpt-color-success-contrast);
198
+ --kpt-button-success-bg-hover: var(--kpt-color-success-hover);
199
+ --kpt-button-warning-bg: var(--kpt-color-warning);
200
+ --kpt-button-warning-fg: var(--kpt-color-warning-contrast);
201
+ --kpt-button-warning-bg-hover: var(--kpt-color-warning-hover);
202
+ --kpt-button-info-bg: var(--kpt-color-info);
203
+ --kpt-button-info-fg: var(--kpt-color-info-contrast);
204
+ --kpt-button-info-bg-hover: var(--kpt-color-info-hover);
183
205
  --kpt-form-field-bg: var(--kpt-color-surface);
184
206
  --kpt-form-field-text: var(--kpt-color-on-surface);
185
207
  --kpt-form-field-placeholder: var(--kpt-color-on-surface-muted);
@@ -204,6 +226,9 @@
204
226
  --kpt-map-popup-bg: var(--kpt-color-surface-raised);
205
227
  --kpt-map-poi-row-hover: var(--kpt-color-surface-hover); /** Podświetlenie wiersza kontaktu odsłaniające akcje. */
206
228
  --kpt-map-cluster-bg: var(--kpt-color-primary); /** Domyślny kolor grupy przy clusterColorBy='none'. */
229
+ --kpt-progress-track-bg: var(--kpt-color-surface-variant);
230
+ --kpt-progress-label-fg: var(--kpt-color-on-surface-muted);
231
+ --kpt-progress-value-fg: var(--kpt-color-on-surface);
207
232
  --kpt-table-bg: var(--kpt-color-surface-raised);
208
233
  --kpt-table-fg: var(--kpt-color-on-surface);
209
234
  --kpt-table-border: var(--kpt-color-border);
package/dist/css/tokens.dark.css CHANGED
@@ -3,95 +3,7 @@
3
3
  */
4
4
 
5
5
  [data-theme="dark"] {
6
- --kpt-breakpoint-sm: 640px; /** Telefon w poziomie / mały tablet. */
7
- --kpt-breakpoint-md: 768px; /** Tablet. */
8
- --kpt-breakpoint-lg: 1024px; /** Mały desktop / tablet w poziomie. */
9
- --kpt-breakpoint-xl: 1280px; /** Desktop. */
10
- --kpt-breakpoint-2xl: 1536px; /** Szeroki desktop. */
11
- --kpt-color-neutral-0: oklch(1 0 0);
12
- --kpt-color-neutral-50: oklch(0.985 0 0);
13
- --kpt-color-neutral-100: oklch(0.967 0.001 286);
14
- --kpt-color-neutral-200: oklch(0.920 0.004 286);
15
- --kpt-color-neutral-300: oklch(0.871 0.006 286);
16
- --kpt-color-neutral-400: oklch(0.705 0.015 286);
17
- --kpt-color-neutral-500: oklch(0.552 0.016 286);
18
- --kpt-color-neutral-600: oklch(0.442 0.017 286);
19
- --kpt-color-neutral-700: oklch(0.370 0.013 286);
20
- --kpt-color-neutral-800: oklch(0.274 0.006 286);
21
- --kpt-color-neutral-900: oklch(0.210 0.006 286);
22
- --kpt-color-neutral-950: oklch(0.141 0.005 286);
23
- --kpt-color-neutral-1000: oklch(0 0 0);
24
- --kpt-color-red-50: oklch(0.971 0.013 25);
25
- --kpt-color-red-200: oklch(0.885 0.062 25);
26
- --kpt-color-red-500: oklch(0.637 0.208 25);
27
- --kpt-color-red-600: oklch(0.577 0.213 27);
28
- --kpt-color-red-700: oklch(0.505 0.190 27);
29
- --kpt-color-red-950: oklch(0.260 0.090 27);
30
- --kpt-color-green-50: oklch(0.975 0.030 150);
31
- --kpt-color-green-200: oklch(0.900 0.070 150);
32
- --kpt-color-green-500: oklch(0.723 0.170 150);
33
- --kpt-color-green-600: oklch(0.627 0.170 150);
34
- --kpt-color-green-700: oklch(0.530 0.150 150);
35
- --kpt-color-green-950: oklch(0.270 0.060 150);
36
- --kpt-color-amber-50: oklch(0.980 0.030 80);
37
- --kpt-color-amber-200: oklch(0.920 0.080 75);
38
- --kpt-color-amber-500: oklch(0.769 0.160 70);
39
- --kpt-color-amber-600: oklch(0.666 0.160 60);
40
- --kpt-color-amber-700: oklch(0.550 0.130 55);
41
- --kpt-color-amber-950: oklch(0.280 0.060 60);
42
- --kpt-color-blue-50: oklch(0.970 0.015 255);
43
- --kpt-color-blue-200: oklch(0.880 0.050 255);
44
- --kpt-color-blue-500: oklch(0.623 0.170 250);
45
- --kpt-color-blue-600: oklch(0.546 0.190 255);
46
- --kpt-color-blue-700: oklch(0.470 0.160 255);
47
- --kpt-color-blue-950: oklch(0.280 0.090 265);
48
6
  --kpt-color-overlay-scrim: oklch(0 0 0 / 0.6);
49
- --kpt-space-0: 0;
50
- --kpt-space-1: 0.25rem;
51
- --kpt-space-2: 0.5rem;
52
- --kpt-space-3: 0.75rem;
53
- --kpt-space-4: 1rem;
54
- --kpt-space-5: 1.25rem;
55
- --kpt-space-6: 1.5rem;
56
- --kpt-space-8: 2rem;
57
- --kpt-space-10: 2.5rem;
58
- --kpt-space-12: 3rem;
59
- --kpt-space-16: 4rem;
60
- --kpt-radius-none: 0;
61
- --kpt-radius-sm: 0.25rem;
62
- --kpt-radius-md: 0.5rem;
63
- --kpt-radius-lg: 0.75rem;
64
- --kpt-radius-xl: 1rem;
65
- --kpt-radius-full: 9999px;
66
- --kpt-border-width-thin: 1px;
67
- --kpt-border-width-medium: 2px;
68
- --kpt-z-base: 0;
69
- --kpt-z-raised: 10;
70
- --kpt-z-dropdown: 1000;
71
- --kpt-z-overlay: 1100;
72
- --kpt-z-modal: 1200;
73
- --kpt-z-toast: 1300;
74
- --kpt-motion-duration-fast: 120ms;
75
- --kpt-motion-duration-base: 200ms;
76
- --kpt-motion-duration-slow: 320ms;
77
- --kpt-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
78
- --kpt-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
79
- --kpt-font-family-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
80
- --kpt-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
81
- --kpt-font-weight-regular: 400;
82
- --kpt-font-weight-medium: 500;
83
- --kpt-font-weight-semibold: 600;
84
- --kpt-font-weight-bold: 700;
85
- --kpt-font-size-xs: 0.75rem;
86
- --kpt-font-size-sm: 0.875rem;
87
- --kpt-font-size-md: 1rem;
88
- --kpt-font-size-lg: 1.125rem;
89
- --kpt-font-size-xl: 1.25rem;
90
- --kpt-font-size-2xl: 1.5rem;
91
- --kpt-font-size-3xl: 1.875rem;
92
- --kpt-font-line-height-tight: 1.25;
93
- --kpt-font-line-height-normal: 1.5;
94
- --kpt-font-line-height-relaxed: 1.7;
95
7
  --kpt-elevation-1: 0 1px 2px 0 oklch(0 0 0 / 0.5);
96
8
  --kpt-elevation-2: 0 2px 6px -1px oklch(0 0 0 / 0.55), 0 1px 2px 0 oklch(0 0 0 / 0.4);
97
9
  --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/js/tokens.d.ts CHANGED
@@ -165,6 +165,23 @@ export const KPT_BUTTON_OUTLINE_FG: string;
165
165
  export const KPT_BUTTON_OUTLINE_BG_HOVER: string;
166
166
  export const KPT_BUTTON_TEXT_FG: string;
167
167
  export const KPT_BUTTON_TEXT_BG_HOVER: string;
168
+ export const KPT_BUTTON_ELEVATED_BG: string;
169
+ export const KPT_BUTTON_ELEVATED_FG: string;
170
+ export const KPT_BUTTON_ELEVATED_BG_HOVER: string;
171
+ export const KPT_BUTTON_LINK_FG: string;
172
+ export const KPT_BUTTON_LINK_FG_HOVER: string;
173
+ export const KPT_BUTTON_DANGER_BG: string;
174
+ export const KPT_BUTTON_DANGER_FG: string;
175
+ export const KPT_BUTTON_DANGER_BG_HOVER: string;
176
+ export const KPT_BUTTON_SUCCESS_BG: string;
177
+ export const KPT_BUTTON_SUCCESS_FG: string;
178
+ export const KPT_BUTTON_SUCCESS_BG_HOVER: string;
179
+ export const KPT_BUTTON_WARNING_BG: string;
180
+ export const KPT_BUTTON_WARNING_FG: string;
181
+ export const KPT_BUTTON_WARNING_BG_HOVER: string;
182
+ export const KPT_BUTTON_INFO_BG: string;
183
+ export const KPT_BUTTON_INFO_FG: string;
184
+ export const KPT_BUTTON_INFO_BG_HOVER: string;
168
185
  export const KPT_FORM_FIELD_RADIUS: string;
169
186
  export const KPT_FORM_FIELD_BG: string;
170
187
  export const KPT_FORM_FIELD_TEXT: string;
@@ -217,6 +234,15 @@ export const KPT_MAP_POI_ROW_HOVER: string;
217
234
  export const KPT_MAP_CLUSTER_BG: string;
218
235
  export const KPT_MAP_CLUSTER_FG: string;
219
236
  export const KPT_MAP_MARKER_SIZE: string;
237
+ export const KPT_PROGRESS_TRACK_BG: string;
238
+ export const KPT_PROGRESS_THICKNESS_SM: string;
239
+ export const KPT_PROGRESS_THICKNESS_MD: string;
240
+ export const KPT_PROGRESS_THICKNESS_LG: string;
241
+ /** Pasek bufora to ten sam kolor co pasek główny, tylko przygaszony. */
242
+ export const KPT_PROGRESS_BUFFER_OPACITY: string;
243
+ export const KPT_PROGRESS_LABEL_FG: string;
244
+ export const KPT_PROGRESS_VALUE_FG: string;
245
+ export const KPT_PROGRESS_GAP: string;
220
246
  export const KPT_TABLE_BG: string;
221
247
  export const KPT_TABLE_FG: string;
222
248
  export const KPT_TABLE_BORDER: string;
package/dist/js/tokens.js CHANGED
@@ -167,6 +167,23 @@ export const KPT_BUTTON_OUTLINE_FG = "oklch(0.210 0.006 286)";
167
167
  export const KPT_BUTTON_OUTLINE_BG_HOVER = "oklch(0.967 0.001 286)";
168
168
  export const KPT_BUTTON_TEXT_FG = "oklch(0.210 0.006 286)";
169
169
  export const KPT_BUTTON_TEXT_BG_HOVER = "oklch(0.967 0.001 286)";
170
+ export const KPT_BUTTON_ELEVATED_BG = "oklch(1 0 0)";
171
+ export const KPT_BUTTON_ELEVATED_FG = "oklch(0.210 0.006 286)";
172
+ export const KPT_BUTTON_ELEVATED_BG_HOVER = "oklch(0.967 0.001 286)";
173
+ export const KPT_BUTTON_LINK_FG = "oklch(0.210 0.006 286)";
174
+ export const KPT_BUTTON_LINK_FG_HOVER = "oklch(0.274 0.006 286)";
175
+ export const KPT_BUTTON_DANGER_BG = "oklch(0.577 0.213 27)";
176
+ export const KPT_BUTTON_DANGER_FG = "oklch(1 0 0)";
177
+ export const KPT_BUTTON_DANGER_BG_HOVER = "oklch(0.505 0.190 27)";
178
+ export const KPT_BUTTON_SUCCESS_BG = "oklch(0.627 0.170 150)";
179
+ export const KPT_BUTTON_SUCCESS_FG = "oklch(1 0 0)";
180
+ export const KPT_BUTTON_SUCCESS_BG_HOVER = "oklch(0.530 0.150 150)";
181
+ export const KPT_BUTTON_WARNING_BG = "oklch(0.666 0.160 60)";
182
+ export const KPT_BUTTON_WARNING_FG = "oklch(1 0 0)";
183
+ export const KPT_BUTTON_WARNING_BG_HOVER = "oklch(0.550 0.130 55)";
184
+ export const KPT_BUTTON_INFO_BG = "oklch(0.546 0.190 255)";
185
+ export const KPT_BUTTON_INFO_FG = "oklch(1 0 0)";
186
+ export const KPT_BUTTON_INFO_BG_HOVER = "oklch(0.470 0.160 255)";
170
187
  export const KPT_FORM_FIELD_RADIUS = "0.5rem";
171
188
  export const KPT_FORM_FIELD_BG = "oklch(1 0 0)";
172
189
  export const KPT_FORM_FIELD_TEXT = "oklch(0.210 0.006 286)";
@@ -211,6 +228,14 @@ export const KPT_MAP_POI_ROW_HOVER = "oklch(0.985 0 0)"; // Podświetlenie wiers
211
228
  export const KPT_MAP_CLUSTER_BG = "oklch(0.210 0.006 286)"; // Domyślny kolor grupy przy clusterColorBy='none'.
212
229
  export const KPT_MAP_CLUSTER_FG = "oklch(1 0 0)";
213
230
  export const KPT_MAP_MARKER_SIZE = "2rem";
231
+ export const KPT_PROGRESS_TRACK_BG = "oklch(0.985 0 0)";
232
+ export const KPT_PROGRESS_THICKNESS_SM = "0.25rem";
233
+ export const KPT_PROGRESS_THICKNESS_MD = "0.5rem";
234
+ export const KPT_PROGRESS_THICKNESS_LG = "0.75rem";
235
+ export const KPT_PROGRESS_BUFFER_OPACITY = "0.32"; // Pasek bufora to ten sam kolor co pasek główny, tylko przygaszony.
236
+ export const KPT_PROGRESS_LABEL_FG = "oklch(0.552 0.016 286)";
237
+ export const KPT_PROGRESS_VALUE_FG = "oklch(0.210 0.006 286)";
238
+ export const KPT_PROGRESS_GAP = "0.5rem";
214
239
  export const KPT_TABLE_BG = "oklch(1 0 0)";
215
240
  export const KPT_TABLE_FG = "oklch(0.210 0.006 286)";
216
241
  export const KPT_TABLE_BORDER = "oklch(0.920 0.004 286)";