@konce-pt/tokens 0.7.0 → 0.7.5

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.
@@ -97,7 +97,15 @@
97
97
  --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);
98
98
  --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);
99
99
  --kpt-toolbar-height: 3.5rem;
100
+ --kpt-toolbar-height-compact: 3rem; /** Wysokość paska poniżej breakpointa sm. */
100
101
  --kpt-sidenav-width: 16rem;
102
+ --kpt-sidenav-rail-width: 4rem; /** Szerokość zwiniętej szyny ikon w kpt-app-shell. */
103
+ --kpt-map-popup-width: 20rem; /** Popup tekstowy (popupLayout='plain'). */
104
+ --kpt-map-popup-width-card: 26rem; /** Popup z kartą miejsca (popupLayout='card'). */
105
+ --kpt-map-popup-max-height: 32rem; /** Powyżej tej wysokości treść popupu się przewija. */
106
+ --kpt-map-search-width: 20rem; /** Szerokość pola wyszukiwania adresów. */
107
+ --kpt-map-search-panel-max-height: 18rem; /** Powyżej tej wysokości lista podpowiedzi się przewija. */
108
+ --kpt-map-marker-size: 2rem;
101
109
  --kpt-color-surface: var(--kpt-color-neutral-0);
102
110
  --kpt-color-surface-variant: var(--kpt-color-neutral-50);
103
111
  --kpt-color-surface-raised: var(--kpt-color-neutral-0);
@@ -151,6 +159,9 @@
151
159
  --kpt-card-radius: var(--kpt-radius-lg);
152
160
  --kpt-card-padding: var(--kpt-space-6);
153
161
  --kpt-card-shadow: var(--kpt-elevation-2);
162
+ --kpt-map-radius: var(--kpt-radius-lg);
163
+ --kpt-map-popup-shadow: var(--kpt-elevation-3);
164
+ --kpt-map-poi-media-radius: var(--kpt-radius-md);
154
165
  --kpt-table-radius: var(--kpt-radius-lg);
155
166
  --kpt-table-cell-padding: var(--kpt-space-3);
156
167
  --kpt-color-text: var(--kpt-color-on-surface);
@@ -188,6 +199,11 @@
188
199
  --kpt-sidenav-bg: var(--kpt-color-surface-variant);
189
200
  --kpt-sidenav-fg: var(--kpt-color-on-surface);
190
201
  --kpt-sidenav-border: var(--kpt-color-border);
202
+ --kpt-map-bg: var(--kpt-color-surface-sunken); /** Tło kontenera widoczne, zanim doładują się kafle. */
203
+ --kpt-map-border: var(--kpt-color-border);
204
+ --kpt-map-popup-bg: var(--kpt-color-surface-raised);
205
+ --kpt-map-poi-row-hover: var(--kpt-color-surface-hover); /** Podświetlenie wiersza kontaktu odsłaniające akcje. */
206
+ --kpt-map-cluster-bg: var(--kpt-color-primary); /** Domyślny kolor grupy przy clusterColorBy='none'. */
191
207
  --kpt-table-bg: var(--kpt-color-surface-raised);
192
208
  --kpt-table-fg: var(--kpt-color-on-surface);
193
209
  --kpt-table-border: var(--kpt-color-border);
@@ -195,4 +211,5 @@
195
211
  --kpt-table-header-fg: var(--kpt-color-on-surface-muted);
196
212
  --kpt-table-row-hover: var(--kpt-color-surface-variant);
197
213
  --kpt-table-row-selected: var(--kpt-color-muted);
214
+ --kpt-map-cluster-fg: var(--kpt-color-primary-contrast);
198
215
  }
@@ -186,10 +186,37 @@ export const KPT_TOOLBAR_BG: string;
186
186
  export const KPT_TOOLBAR_FG: string;
187
187
  export const KPT_TOOLBAR_BORDER: string;
188
188
  export const KPT_TOOLBAR_HEIGHT: string;
189
+ /** Wysokość paska poniżej breakpointa sm. */
190
+ export const KPT_TOOLBAR_HEIGHT_COMPACT: string;
189
191
  export const KPT_SIDENAV_BG: string;
190
192
  export const KPT_SIDENAV_FG: string;
191
193
  export const KPT_SIDENAV_BORDER: string;
192
194
  export const KPT_SIDENAV_WIDTH: string;
195
+ /** Szerokość zwiniętej szyny ikon w kpt-app-shell. */
196
+ export const KPT_SIDENAV_RAIL_WIDTH: string;
197
+ /** Tło kontenera widoczne, zanim doładują się kafle. */
198
+ export const KPT_MAP_BG: string;
199
+ export const KPT_MAP_BORDER: string;
200
+ export const KPT_MAP_RADIUS: string;
201
+ export const KPT_MAP_POPUP_BG: string;
202
+ export const KPT_MAP_POPUP_SHADOW: string;
203
+ /** Popup tekstowy (popupLayout='plain'). */
204
+ export const KPT_MAP_POPUP_WIDTH: string;
205
+ /** Popup z kartą miejsca (popupLayout='card'). */
206
+ export const KPT_MAP_POPUP_WIDTH_CARD: string;
207
+ /** Powyżej tej wysokości treść popupu się przewija. */
208
+ export const KPT_MAP_POPUP_MAX_HEIGHT: string;
209
+ /** Szerokość pola wyszukiwania adresów. */
210
+ export const KPT_MAP_SEARCH_WIDTH: string;
211
+ /** Powyżej tej wysokości lista podpowiedzi się przewija. */
212
+ export const KPT_MAP_SEARCH_PANEL_MAX_HEIGHT: string;
213
+ export const KPT_MAP_POI_MEDIA_RADIUS: string;
214
+ /** Podświetlenie wiersza kontaktu odsłaniające akcje. */
215
+ export const KPT_MAP_POI_ROW_HOVER: string;
216
+ /** Domyślny kolor grupy przy clusterColorBy='none'. */
217
+ export const KPT_MAP_CLUSTER_BG: string;
218
+ export const KPT_MAP_CLUSTER_FG: string;
219
+ export const KPT_MAP_MARKER_SIZE: string;
193
220
  export const KPT_TABLE_BG: string;
194
221
  export const KPT_TABLE_FG: string;
195
222
  export const KPT_TABLE_BORDER: string;
package/dist/js/tokens.js CHANGED
@@ -189,10 +189,28 @@ export const KPT_TOOLBAR_BG = "oklch(1 0 0)";
189
189
  export const KPT_TOOLBAR_FG = "oklch(0.210 0.006 286)";
190
190
  export const KPT_TOOLBAR_BORDER = "oklch(0.920 0.004 286)";
191
191
  export const KPT_TOOLBAR_HEIGHT = "3.5rem";
192
+ export const KPT_TOOLBAR_HEIGHT_COMPACT = "3rem"; // Wysokość paska poniżej breakpointa sm.
192
193
  export const KPT_SIDENAV_BG = "oklch(0.985 0 0)";
193
194
  export const KPT_SIDENAV_FG = "oklch(0.210 0.006 286)";
194
195
  export const KPT_SIDENAV_BORDER = "oklch(0.920 0.004 286)";
195
196
  export const KPT_SIDENAV_WIDTH = "16rem";
197
+ export const KPT_SIDENAV_RAIL_WIDTH = "4rem"; // Szerokość zwiniętej szyny ikon w kpt-app-shell.
198
+ export const KPT_MAP_BG = "oklch(0.967 0.001 286)"; // Tło kontenera widoczne, zanim doładują się kafle.
199
+ export const KPT_MAP_BORDER = "oklch(0.920 0.004 286)";
200
+ export const KPT_MAP_RADIUS = "0.75rem";
201
+ export const KPT_MAP_POPUP_BG = "oklch(1 0 0)";
202
+ export const KPT_MAP_POPUP_SHADOW =
203
+ "0 8px 16px -4px oklch(0.141 0.005 286 / 0.12), 0 2px 4px 0 oklch(0.141 0.005 286 / 0.06)";
204
+ export const KPT_MAP_POPUP_WIDTH = "20rem"; // Popup tekstowy (popupLayout='plain').
205
+ export const KPT_MAP_POPUP_WIDTH_CARD = "26rem"; // Popup z kartą miejsca (popupLayout='card').
206
+ export const KPT_MAP_POPUP_MAX_HEIGHT = "32rem"; // Powyżej tej wysokości treść popupu się przewija.
207
+ export const KPT_MAP_SEARCH_WIDTH = "20rem"; // Szerokość pola wyszukiwania adresów.
208
+ export const KPT_MAP_SEARCH_PANEL_MAX_HEIGHT = "18rem"; // Powyżej tej wysokości lista podpowiedzi się przewija.
209
+ export const KPT_MAP_POI_MEDIA_RADIUS = "0.5rem";
210
+ export const KPT_MAP_POI_ROW_HOVER = "oklch(0.985 0 0)"; // Podświetlenie wiersza kontaktu odsłaniające akcje.
211
+ export const KPT_MAP_CLUSTER_BG = "oklch(0.210 0.006 286)"; // Domyślny kolor grupy przy clusterColorBy='none'.
212
+ export const KPT_MAP_CLUSTER_FG = "oklch(1 0 0)";
213
+ export const KPT_MAP_MARKER_SIZE = "2rem";
196
214
  export const KPT_TABLE_BG = "oklch(1 0 0)";
197
215
  export const KPT_TABLE_FG = "oklch(0.210 0.006 286)";
198
216
  export const KPT_TABLE_BORDER = "oklch(0.920 0.004 286)";
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 1,
3
- "generatedAt": "2026-08-24T23:06:20.086Z",
3
+ "generatedAt": "2026-08-27T11:15:22.608Z",
4
4
  "tokens": [
5
5
  {
6
6
  "name": "--kpt-border-width-medium",
@@ -1350,6 +1350,141 @@
1350
1350
  "layer": "component",
1351
1351
  "blockUsable": false
1352
1352
  },
1353
+ {
1354
+ "name": "--kpt-map-bg",
1355
+ "value": {
1356
+ "light": "oklch(0.967 0.001 286)",
1357
+ "dark": "oklch(0.967 0.001 286)"
1358
+ },
1359
+ "layer": "component",
1360
+ "blockUsable": false
1361
+ },
1362
+ {
1363
+ "name": "--kpt-map-border",
1364
+ "value": {
1365
+ "light": "oklch(0.920 0.004 286)",
1366
+ "dark": "oklch(0.920 0.004 286)"
1367
+ },
1368
+ "layer": "component",
1369
+ "blockUsable": false
1370
+ },
1371
+ {
1372
+ "name": "--kpt-map-cluster-bg",
1373
+ "value": {
1374
+ "light": "oklch(0.210 0.006 286)",
1375
+ "dark": "oklch(0.210 0.006 286)"
1376
+ },
1377
+ "layer": "component",
1378
+ "blockUsable": false
1379
+ },
1380
+ {
1381
+ "name": "--kpt-map-cluster-fg",
1382
+ "value": {
1383
+ "light": "oklch(1 0 0)",
1384
+ "dark": "oklch(1 0 0)"
1385
+ },
1386
+ "layer": "component",
1387
+ "blockUsable": false
1388
+ },
1389
+ {
1390
+ "name": "--kpt-map-marker-size",
1391
+ "value": {
1392
+ "light": "2rem",
1393
+ "dark": "2rem"
1394
+ },
1395
+ "layer": "component",
1396
+ "blockUsable": false
1397
+ },
1398
+ {
1399
+ "name": "--kpt-map-poi-media-radius",
1400
+ "value": {
1401
+ "light": "0.5rem",
1402
+ "dark": "0.5rem"
1403
+ },
1404
+ "layer": "component",
1405
+ "blockUsable": false
1406
+ },
1407
+ {
1408
+ "name": "--kpt-map-poi-row-hover",
1409
+ "value": {
1410
+ "light": "oklch(0.985 0 0)",
1411
+ "dark": "oklch(0.985 0 0)"
1412
+ },
1413
+ "layer": "component",
1414
+ "blockUsable": false
1415
+ },
1416
+ {
1417
+ "name": "--kpt-map-popup-bg",
1418
+ "value": {
1419
+ "light": "oklch(1 0 0)",
1420
+ "dark": "oklch(1 0 0)"
1421
+ },
1422
+ "layer": "component",
1423
+ "blockUsable": false
1424
+ },
1425
+ {
1426
+ "name": "--kpt-map-popup-max-height",
1427
+ "value": {
1428
+ "light": "32rem",
1429
+ "dark": "32rem"
1430
+ },
1431
+ "layer": "component",
1432
+ "blockUsable": false
1433
+ },
1434
+ {
1435
+ "name": "--kpt-map-popup-shadow",
1436
+ "value": {
1437
+ "light": "0 8px 16px -4px oklch(0.141 0.005 286 / 0.12), 0 2px 4px 0 oklch(0.141 0.005 286 / 0.06)",
1438
+ "dark": "0 8px 16px -4px oklch(0.141 0.005 286 / 0.12), 0 2px 4px 0 oklch(0.141 0.005 286 / 0.06)"
1439
+ },
1440
+ "layer": "component",
1441
+ "blockUsable": false
1442
+ },
1443
+ {
1444
+ "name": "--kpt-map-popup-width",
1445
+ "value": {
1446
+ "light": "20rem",
1447
+ "dark": "20rem"
1448
+ },
1449
+ "layer": "component",
1450
+ "blockUsable": false
1451
+ },
1452
+ {
1453
+ "name": "--kpt-map-popup-width-card",
1454
+ "value": {
1455
+ "light": "26rem",
1456
+ "dark": "26rem"
1457
+ },
1458
+ "layer": "component",
1459
+ "blockUsable": false
1460
+ },
1461
+ {
1462
+ "name": "--kpt-map-radius",
1463
+ "value": {
1464
+ "light": "0.75rem",
1465
+ "dark": "0.75rem"
1466
+ },
1467
+ "layer": "component",
1468
+ "blockUsable": false
1469
+ },
1470
+ {
1471
+ "name": "--kpt-map-search-panel-max-height",
1472
+ "value": {
1473
+ "light": "18rem",
1474
+ "dark": "18rem"
1475
+ },
1476
+ "layer": "component",
1477
+ "blockUsable": false
1478
+ },
1479
+ {
1480
+ "name": "--kpt-map-search-width",
1481
+ "value": {
1482
+ "light": "20rem",
1483
+ "dark": "20rem"
1484
+ },
1485
+ "layer": "component",
1486
+ "blockUsable": false
1487
+ },
1353
1488
  {
1354
1489
  "name": "--kpt-motion-duration-base",
1355
1490
  "value": {
@@ -1506,6 +1641,15 @@
1506
1641
  "layer": "component",
1507
1642
  "blockUsable": false
1508
1643
  },
1644
+ {
1645
+ "name": "--kpt-sidenav-rail-width",
1646
+ "value": {
1647
+ "light": "4rem",
1648
+ "dark": "4rem"
1649
+ },
1650
+ "layer": "component",
1651
+ "blockUsable": false
1652
+ },
1509
1653
  {
1510
1654
  "name": "--kpt-sidenav-width",
1511
1655
  "value": {
@@ -1731,6 +1875,15 @@
1731
1875
  "layer": "component",
1732
1876
  "blockUsable": false
1733
1877
  },
1878
+ {
1879
+ "name": "--kpt-toolbar-height-compact",
1880
+ "value": {
1881
+ "light": "3rem",
1882
+ "dark": "3rem"
1883
+ },
1884
+ "layer": "component",
1885
+ "blockUsable": false
1886
+ },
1734
1887
  {
1735
1888
  "name": "--kpt-z-base",
1736
1889
  "value": {
@@ -96,7 +96,15 @@ $kpt-elevation-2: 0 2px 6px -1px oklch(0.141 0.005 286 / 0.10), 0 1px 2px 0 oklc
96
96
  $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);
97
97
  $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);
98
98
  $kpt-toolbar-height: 3.5rem;
99
+ $kpt-toolbar-height-compact: 3rem; // Wysokość paska poniżej breakpointa sm.
99
100
  $kpt-sidenav-width: 16rem;
101
+ $kpt-sidenav-rail-width: 4rem; // Szerokość zwiniętej szyny ikon w kpt-app-shell.
102
+ $kpt-map-popup-width: 20rem; // Popup tekstowy (popupLayout='plain').
103
+ $kpt-map-popup-width-card: 26rem; // Popup z kartą miejsca (popupLayout='card').
104
+ $kpt-map-popup-max-height: 32rem; // Powyżej tej wysokości treść popupu się przewija.
105
+ $kpt-map-search-width: 20rem; // Szerokość pola wyszukiwania adresów.
106
+ $kpt-map-search-panel-max-height: 18rem; // Powyżej tej wysokości lista podpowiedzi się przewija.
107
+ $kpt-map-marker-size: 2rem;
100
108
  $kpt-color-surface: $kpt-color-neutral-0;
101
109
  $kpt-color-surface-variant: $kpt-color-neutral-50;
102
110
  $kpt-color-surface-raised: $kpt-color-neutral-0;
@@ -150,6 +158,9 @@ $kpt-form-field-radius: $kpt-radius-md;
150
158
  $kpt-card-radius: $kpt-radius-lg;
151
159
  $kpt-card-padding: $kpt-space-6;
152
160
  $kpt-card-shadow: $kpt-elevation-2;
161
+ $kpt-map-radius: $kpt-radius-lg;
162
+ $kpt-map-popup-shadow: $kpt-elevation-3;
163
+ $kpt-map-poi-media-radius: $kpt-radius-md;
153
164
  $kpt-table-radius: $kpt-radius-lg;
154
165
  $kpt-table-cell-padding: $kpt-space-3;
155
166
  $kpt-color-text: $kpt-color-on-surface;
@@ -187,6 +198,11 @@ $kpt-toolbar-border: $kpt-color-border;
187
198
  $kpt-sidenav-bg: $kpt-color-surface-variant;
188
199
  $kpt-sidenav-fg: $kpt-color-on-surface;
189
200
  $kpt-sidenav-border: $kpt-color-border;
201
+ $kpt-map-bg: $kpt-color-surface-sunken; // Tło kontenera widoczne, zanim doładują się kafle.
202
+ $kpt-map-border: $kpt-color-border;
203
+ $kpt-map-popup-bg: $kpt-color-surface-raised;
204
+ $kpt-map-poi-row-hover: $kpt-color-surface-hover; // Podświetlenie wiersza kontaktu odsłaniające akcje.
205
+ $kpt-map-cluster-bg: $kpt-color-primary; // Domyślny kolor grupy przy clusterColorBy='none'.
190
206
  $kpt-table-bg: $kpt-color-surface-raised;
191
207
  $kpt-table-fg: $kpt-color-on-surface;
192
208
  $kpt-table-border: $kpt-color-border;
@@ -194,6 +210,7 @@ $kpt-table-header-bg: $kpt-color-surface-variant;
194
210
  $kpt-table-header-fg: $kpt-color-on-surface-muted;
195
211
  $kpt-table-row-hover: $kpt-color-surface-variant;
196
212
  $kpt-table-row-selected: $kpt-color-muted;
213
+ $kpt-map-cluster-fg: $kpt-color-primary-contrast;
197
214
 
198
215
  // Custom properties w runtime (light + komponenty).
199
216
  // Użycie: @use '@konce-pt/tokens/scss' as t; @include t.kpt-root-tokens;
@@ -293,7 +310,15 @@ $kpt-table-row-selected: $kpt-color-muted;
293
310
  --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);
294
311
  --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);
295
312
  --kpt-toolbar-height: 3.5rem;
313
+ --kpt-toolbar-height-compact: 3rem; /** Wysokość paska poniżej breakpointa sm. */
296
314
  --kpt-sidenav-width: 16rem;
315
+ --kpt-sidenav-rail-width: 4rem; /** Szerokość zwiniętej szyny ikon w kpt-app-shell. */
316
+ --kpt-map-popup-width: 20rem; /** Popup tekstowy (popupLayout='plain'). */
317
+ --kpt-map-popup-width-card: 26rem; /** Popup z kartą miejsca (popupLayout='card'). */
318
+ --kpt-map-popup-max-height: 32rem; /** Powyżej tej wysokości treść popupu się przewija. */
319
+ --kpt-map-search-width: 20rem; /** Szerokość pola wyszukiwania adresów. */
320
+ --kpt-map-search-panel-max-height: 18rem; /** Powyżej tej wysokości lista podpowiedzi się przewija. */
321
+ --kpt-map-marker-size: 2rem;
297
322
  --kpt-color-surface: var(--kpt-color-neutral-0);
298
323
  --kpt-color-surface-variant: var(--kpt-color-neutral-50);
299
324
  --kpt-color-surface-raised: var(--kpt-color-neutral-0);
@@ -347,6 +372,9 @@ $kpt-table-row-selected: $kpt-color-muted;
347
372
  --kpt-card-radius: var(--kpt-radius-lg);
348
373
  --kpt-card-padding: var(--kpt-space-6);
349
374
  --kpt-card-shadow: var(--kpt-elevation-2);
375
+ --kpt-map-radius: var(--kpt-radius-lg);
376
+ --kpt-map-popup-shadow: var(--kpt-elevation-3);
377
+ --kpt-map-poi-media-radius: var(--kpt-radius-md);
350
378
  --kpt-table-radius: var(--kpt-radius-lg);
351
379
  --kpt-table-cell-padding: var(--kpt-space-3);
352
380
  --kpt-color-text: var(--kpt-color-on-surface);
@@ -384,6 +412,11 @@ $kpt-table-row-selected: $kpt-color-muted;
384
412
  --kpt-sidenav-bg: var(--kpt-color-surface-variant);
385
413
  --kpt-sidenav-fg: var(--kpt-color-on-surface);
386
414
  --kpt-sidenav-border: var(--kpt-color-border);
415
+ --kpt-map-bg: var(--kpt-color-surface-sunken); /** Tło kontenera widoczne, zanim doładują się kafle. */
416
+ --kpt-map-border: var(--kpt-color-border);
417
+ --kpt-map-popup-bg: var(--kpt-color-surface-raised);
418
+ --kpt-map-poi-row-hover: var(--kpt-color-surface-hover); /** Podświetlenie wiersza kontaktu odsłaniające akcje. */
419
+ --kpt-map-cluster-bg: var(--kpt-color-primary); /** Domyślny kolor grupy przy clusterColorBy='none'. */
387
420
  --kpt-table-bg: var(--kpt-color-surface-raised);
388
421
  --kpt-table-fg: var(--kpt-color-on-surface);
389
422
  --kpt-table-border: var(--kpt-color-border);
@@ -391,5 +424,6 @@ $kpt-table-row-selected: $kpt-color-muted;
391
424
  --kpt-table-header-fg: var(--kpt-color-on-surface-muted);
392
425
  --kpt-table-row-hover: var(--kpt-color-surface-variant);
393
426
  --kpt-table-row-selected: var(--kpt-color-muted);
427
+ --kpt-map-cluster-fg: var(--kpt-color-primary-contrast);
394
428
  }
395
429
  }
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@konce-pt/tokens",
3
- "version": "0.7.0",
3
+ "version": "0.7.5",
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",
7
- "homepage": "https://gitlab.com/konce-pt/koncept-ui#readme",
7
+ "homepage": "https://ui.konce.pt/",
8
8
  "repository": {
9
9
  "type": "git",
10
10
  "url": "git+https://gitlab.com/konce-pt/koncept-ui.git",