@konce-pt/tokens 0.5.0 → 0.6.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 +29 -0
  2. package/dist/css/tokens.css +5 -0
  3. package/dist/css/tokens.dark.css +5 -0
  4. package/dist/js/tokens.d.ts +10 -0
  5. package/dist/js/tokens.js +5 -0
  6. package/dist/registry/tokens.json +46 -1
  7. package/dist/scss/_tokens.dark.scss +5 -0
  8. package/dist/scss/_tokens.scss +10 -0
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -60,6 +60,30 @@ import { tokens } from '@konce-pt/tokens';
60
60
 
61
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`.
62
62
 
63
+ ## Breakpoints
64
+
65
+ Responsive breakpoints are primitives, so the whole library shares one contract:
66
+
67
+ | Token | Value |
68
+ | --- | --- |
69
+ | `--kpt-breakpoint-sm` | 640px |
70
+ | `--kpt-breakpoint-md` | 768px |
71
+ | `--kpt-breakpoint-lg` | 1024px |
72
+ | `--kpt-breakpoint-xl` | 1280px |
73
+ | `--kpt-breakpoint-2xl` | 1536px |
74
+
75
+ `@media` cannot read `var()`, so use the **SCSS** variant in queries and keep the custom
76
+ properties for documentation and reads from JavaScript:
77
+
78
+ ```scss
79
+ @use '@konce-pt/tokens/scss' as t;
80
+
81
+ @media (min-width: t.$kpt-breakpoint-md) { /* … */ }
82
+ ```
83
+
84
+ [`@konce-pt/grid`](https://www.npmjs.com/package/@konce-pt/grid) builds its whole layout
85
+ system on these tokens.
86
+
63
87
  ## Semantic layer & block allowlist
64
88
 
65
89
  The semantic tier covers surfaces (`surface`, `-raised|-sunken|-hover|-selected`), text (`on-surface`,
@@ -100,6 +124,11 @@ Framework-agnostyczny fundament [Koncept UI](https://www.npmjs.com/package/@konc
100
124
  @include t.kpt-dark-tokens; // [data-theme="dark"] { … }
101
125
  ```
102
126
 
127
+ **Breakpointy** — prymitywy wspólne dla całej biblioteki: `sm` 640px, `md` 768px, `lg` 1024px,
128
+ `xl` 1280px, `2xl` 1536px. W `@media` używaj wariantu SCSS (`t.$kpt-breakpoint-md`), bo `@media`
129
+ nie potrafi czytać `var()`; custom properties `--kpt-breakpoint-*` służą dokumentacji i odczytowi
130
+ z JavaScriptu. Na tych tokenach stoi cały `@konce-pt/grid`.
131
+
103
132
  Każdy token to własność `--kpt-*`, np. `var(--kpt-color-primary)`. Motyw ciemny pod `[data-theme="dark"]`.
104
133
 
105
134
  Licencja: [MIT](./LICENSE) © konce.pt
package/dist/css/tokens.css CHANGED
@@ -3,6 +3,11 @@
3
3
  */
4
4
 
5
5
  :root {
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. */
6
11
  --kpt-color-neutral-0: oklch(1 0 0);
7
12
  --kpt-color-neutral-50: oklch(0.985 0 0);
8
13
  --kpt-color-neutral-100: oklch(0.967 0.001 286);
package/dist/css/tokens.dark.css CHANGED
@@ -3,6 +3,11 @@
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. */
6
11
  --kpt-color-neutral-0: oklch(1 0 0);
7
12
  --kpt-color-neutral-50: oklch(0.985 0 0);
8
13
  --kpt-color-neutral-100: oklch(0.967 0.001 286);
package/dist/js/tokens.d.ts CHANGED
@@ -2,6 +2,16 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
+ /** Telefon w poziomie / mały tablet. */
6
+ export const KPT_BREAKPOINT_SM: string;
7
+ /** Tablet. */
8
+ export const KPT_BREAKPOINT_MD: string;
9
+ /** Mały desktop / tablet w poziomie. */
10
+ export const KPT_BREAKPOINT_LG: string;
11
+ /** Desktop. */
12
+ export const KPT_BREAKPOINT_XL: string;
13
+ /** Szeroki desktop. */
14
+ export const KPT_BREAKPOINT_2XL: string;
5
15
  export const KPT_COLOR_NEUTRAL_0: string;
6
16
  export const KPT_COLOR_NEUTRAL_50: string;
7
17
  export const KPT_COLOR_NEUTRAL_100: string;
package/dist/js/tokens.js CHANGED
@@ -2,6 +2,11 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
+ export const KPT_BREAKPOINT_SM = "640px"; // Telefon w poziomie / mały tablet.
6
+ export const KPT_BREAKPOINT_MD = "768px"; // Tablet.
7
+ export const KPT_BREAKPOINT_LG = "1024px"; // Mały desktop / tablet w poziomie.
8
+ export const KPT_BREAKPOINT_XL = "1280px"; // Desktop.
9
+ export const KPT_BREAKPOINT_2XL = "1536px"; // Szeroki desktop.
5
10
  export const KPT_COLOR_NEUTRAL_0 = "oklch(1 0 0)";
6
11
  export const KPT_COLOR_NEUTRAL_50 = "oklch(0.985 0 0)";
7
12
  export const KPT_COLOR_NEUTRAL_100 = "oklch(0.967 0.001 286)";
package/dist/registry/tokens.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 1,
3
- "generatedAt": "2026-08-21T20:58:49.355Z",
3
+ "generatedAt": "2026-08-23T16:20:56.668Z",
4
4
  "tokens": [
5
5
  {
6
6
  "name": "--kpt-border-width-medium",
@@ -20,6 +20,51 @@
20
20
  "layer": "primitive",
21
21
  "blockUsable": true
22
22
  },
23
+ {
24
+ "name": "--kpt-breakpoint-2xl",
25
+ "value": {
26
+ "light": "1536px",
27
+ "dark": "1536px"
28
+ },
29
+ "layer": "primitive",
30
+ "blockUsable": true
31
+ },
32
+ {
33
+ "name": "--kpt-breakpoint-lg",
34
+ "value": {
35
+ "light": "1024px",
36
+ "dark": "1024px"
37
+ },
38
+ "layer": "primitive",
39
+ "blockUsable": true
40
+ },
41
+ {
42
+ "name": "--kpt-breakpoint-md",
43
+ "value": {
44
+ "light": "768px",
45
+ "dark": "768px"
46
+ },
47
+ "layer": "primitive",
48
+ "blockUsable": true
49
+ },
50
+ {
51
+ "name": "--kpt-breakpoint-sm",
52
+ "value": {
53
+ "light": "640px",
54
+ "dark": "640px"
55
+ },
56
+ "layer": "primitive",
57
+ "blockUsable": true
58
+ },
59
+ {
60
+ "name": "--kpt-breakpoint-xl",
61
+ "value": {
62
+ "light": "1280px",
63
+ "dark": "1280px"
64
+ },
65
+ "layer": "primitive",
66
+ "blockUsable": true
67
+ },
23
68
  {
24
69
  "name": "--kpt-button-filled-bg",
25
70
  "value": {
package/dist/scss/_tokens.dark.scss CHANGED
@@ -2,6 +2,11 @@
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. */
5
10
  --kpt-color-neutral-0: oklch(1 0 0);
6
11
  --kpt-color-neutral-50: oklch(0.985 0 0);
7
12
  --kpt-color-neutral-100: oklch(0.967 0.001 286);
package/dist/scss/_tokens.scss CHANGED
@@ -2,6 +2,11 @@
2
2
  @forward 'tokens.dark';
3
3
 
4
4
  // Zmienne SCSS (wartości tokenów, compile-time).
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.
5
10
  $kpt-color-neutral-0: oklch(1 0 0);
6
11
  $kpt-color-neutral-50: oklch(0.985 0 0);
7
12
  $kpt-color-neutral-100: oklch(0.967 0.001 286);
@@ -194,6 +199,11 @@ $kpt-table-row-selected: $kpt-color-muted;
194
199
  // Użycie: @use '@konce-pt/tokens/scss' as t; @include t.kpt-root-tokens;
195
200
  @mixin kpt-root-tokens {
196
201
  :root {
202
+ --kpt-breakpoint-sm: 640px; /** Telefon w poziomie / mały tablet. */
203
+ --kpt-breakpoint-md: 768px; /** Tablet. */
204
+ --kpt-breakpoint-lg: 1024px; /** Mały desktop / tablet w poziomie. */
205
+ --kpt-breakpoint-xl: 1280px; /** Desktop. */
206
+ --kpt-breakpoint-2xl: 1536px; /** Szeroki desktop. */
197
207
  --kpt-color-neutral-0: oklch(1 0 0);
198
208
  --kpt-color-neutral-50: oklch(0.985 0 0);
199
209
  --kpt-color-neutral-100: oklch(0.967 0.001 286);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@konce-pt/tokens",
3
- "version": "0.5.0",
3
+ "version": "0.6.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",