@zlecpl/tokens 0.0.0-stage → 1.0.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.
- package/README.md +112 -2
- package/build/css/variables.css +85 -0
- package/build/js/tokens.d.ts +119 -0
- package/build/js/tokens.js +120 -0
- package/build/scss/_tokens.scss +142 -0
- package/design-tokens.json +101 -0
- package/package.json +26 -4
package/README.md
CHANGED
|
@@ -1,3 +1,113 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Zlec.pl Design Tokens
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Źródło prawdy dla kolorów, spacingów, typografii i cieni aplikacji Zlec.pl.
|
|
4
|
+
Tokeny tworzone w Penpot (plugin Penpot Tokens) i eksportowane do W3C Design Tokens JSON.
|
|
5
|
+
|
|
6
|
+
## Instalacja
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install zlecpl-tokens
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Struktura
|
|
13
|
+
|
|
14
|
+
```
|
|
15
|
+
design-tokens.json ← Źródło (W3C format, edytuj w Penpot)
|
|
16
|
+
scripts/build.js ← skrypt budujący (pure Node.js)
|
|
17
|
+
build/
|
|
18
|
+
css/variables.css ← CSS Custom Properties (:root + dark mode)
|
|
19
|
+
scss/_tokens.scss ← SCSS variables, map, function, mixin
|
|
20
|
+
js/tokens.js ← ES6 named exports
|
|
21
|
+
js/tokens.d.ts ← TypeScript declarations
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Użycie CSS
|
|
25
|
+
|
|
26
|
+
```css
|
|
27
|
+
/* import przez package exports */
|
|
28
|
+
@import 'zlecpl-tokens/css';
|
|
29
|
+
|
|
30
|
+
/* lub bezpośrednio */
|
|
31
|
+
@import 'zlecpl-tokens/build/css/variables.css';
|
|
32
|
+
|
|
33
|
+
/* Użycie */
|
|
34
|
+
.btn-primary {
|
|
35
|
+
background: var(--zlec-brand-primary);
|
|
36
|
+
border-radius: var(--zlec-radius-full);
|
|
37
|
+
padding: var(--zlec-spacing-md) var(--zlec-spacing-xl);
|
|
38
|
+
font-size: var(--zlec-type-size-base);
|
|
39
|
+
font-weight: var(--zlec-type-weight-semibold);
|
|
40
|
+
box-shadow: var(--zlec-shadow-sm);
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Dark mode działa automatycznie przez `@media (prefers-color-scheme: dark)`
|
|
45
|
+
oraz atrybut `[data-theme="dark"]` na elemencie root.
|
|
46
|
+
|
|
47
|
+
## Użycie SCSS
|
|
48
|
+
|
|
49
|
+
```scss
|
|
50
|
+
// import przez package exports
|
|
51
|
+
@use 'zlecpl-tokens/scss' as *;
|
|
52
|
+
|
|
53
|
+
// lub bezpośrednio
|
|
54
|
+
@use 'zlecpl-tokens/build/scss/tokens' as *;
|
|
55
|
+
|
|
56
|
+
// Zmienne SCSS
|
|
57
|
+
.btn-primary {
|
|
58
|
+
background: $zlec-brand-primary;
|
|
59
|
+
border-radius: $zlec-radius-full;
|
|
60
|
+
padding: $zlec-spacing-md $zlec-spacing-xl;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// Funkcja pomocnicza (dostęp przez mapę)
|
|
64
|
+
.link {
|
|
65
|
+
color: zlec-token('brand-primary');
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// Mixin dark mode
|
|
69
|
+
@include zlec-dark-mode {
|
|
70
|
+
.card {
|
|
71
|
+
background: $zlec-dark-surface-bg;
|
|
72
|
+
color: $zlec-dark-text-primary;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Użycie JS / TypeScript
|
|
78
|
+
|
|
79
|
+
```ts
|
|
80
|
+
import { color, spacing, typography, shadow, tokens } from 'zlecpl-tokens';
|
|
81
|
+
|
|
82
|
+
// Pojedyncze wartości
|
|
83
|
+
const primary = color.brand.primary; // '#E8470A'
|
|
84
|
+
const gap = spacing.lg; // '16px'
|
|
85
|
+
const font = typography.size.base; // '16px'
|
|
86
|
+
|
|
87
|
+
// Wszystko naraz
|
|
88
|
+
console.log(tokens.shadow.md); // '0 4px 12px rgba(0,0,0,0.12)'
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Regeneracja po zmianie tokenów w Penpot
|
|
92
|
+
|
|
93
|
+
1. W Penpot → zakładka **TOKENS** → **TOOLS** → **Eksportuj** → pobierz JSON
|
|
94
|
+
2. Zastąp `design-tokens.json` nowym plikiem
|
|
95
|
+
3. Commit na `main` — CI zbuduje i skomituje pliki `build/` automatycznie
|
|
96
|
+
|
|
97
|
+
Lokalnie:
|
|
98
|
+
|
|
99
|
+
```bash
|
|
100
|
+
node scripts/build.js
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Publikacja nowej wersji na npm
|
|
104
|
+
|
|
105
|
+
1. Zaktualizuj `version` w `package.json`
|
|
106
|
+
2. Utwórz i wypchnij tag:
|
|
107
|
+
|
|
108
|
+
```bash
|
|
109
|
+
git tag v1.1.0
|
|
110
|
+
git push origin v1.1.0
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
GitHub Actions automatycznie opublikuje pakiet na npm (wymaga ustawionego sekretu `NPM_TOKEN`).
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/* Wygenerowane przez scripts/build.js — nie edytować ręcznie */
|
|
2
|
+
/* Zlec.pl Design Tokens v1.0.0 */
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
--zlec-brand-primary: #E8470A;
|
|
6
|
+
--zlec-brand-dark: #C53A08;
|
|
7
|
+
--zlec-brand-tint: rgba(232,71,10,0.12);
|
|
8
|
+
--zlec-navy-base: #1A2B4A;
|
|
9
|
+
--zlec-navy-mid: #2D4066;
|
|
10
|
+
--zlec-navy-light: #3D5280;
|
|
11
|
+
--zlec-surface-bg: #F4F5F8;
|
|
12
|
+
--zlec-surface-card: #FFFFFF;
|
|
13
|
+
--zlec-surface-elevated: #F0F1F5;
|
|
14
|
+
--zlec-text-primary: #1A2B4A;
|
|
15
|
+
--zlec-text-secondary: #64748B;
|
|
16
|
+
--zlec-text-tertiary: #94A3B8;
|
|
17
|
+
--zlec-border-default: rgba(0,0,0,0.08);
|
|
18
|
+
--zlec-status-success: #10B981;
|
|
19
|
+
--zlec-status-success-tint: rgba(16,185,129,0.12);
|
|
20
|
+
--zlec-status-warning: #F59E0B;
|
|
21
|
+
--zlec-status-warning-tint: rgba(245,158,11,0.12);
|
|
22
|
+
--zlec-status-error: #EF4444;
|
|
23
|
+
--zlec-status-error-tint: rgba(239,68,68,0.12);
|
|
24
|
+
--zlec-status-info: #8B5CF6;
|
|
25
|
+
--zlec-status-info-tint: rgba(139,92,246,0.12);
|
|
26
|
+
--zlec-radius-sm: 8px;
|
|
27
|
+
--zlec-radius-md: 12px;
|
|
28
|
+
--zlec-radius-lg: 16px;
|
|
29
|
+
--zlec-radius-xl: 20px;
|
|
30
|
+
--zlec-radius-full: 999px;
|
|
31
|
+
--zlec-spacing-xs: 4px;
|
|
32
|
+
--zlec-spacing-sm: 8px;
|
|
33
|
+
--zlec-spacing-md: 12px;
|
|
34
|
+
--zlec-spacing-lg: 16px;
|
|
35
|
+
--zlec-spacing-xl: 24px;
|
|
36
|
+
--zlec-spacing-2xl: 32px;
|
|
37
|
+
--zlec-type-family-base: Plus Jakarta Sans, system-ui, sans-serif;
|
|
38
|
+
--zlec-type-size-xs: 11px;
|
|
39
|
+
--zlec-type-size-sm: 13px;
|
|
40
|
+
--zlec-type-size-base: 15px;
|
|
41
|
+
--zlec-type-size-lg: 17px;
|
|
42
|
+
--zlec-type-size-xl: 20px;
|
|
43
|
+
--zlec-type-size-2xl: 24px;
|
|
44
|
+
--zlec-type-size-3xl: 30px;
|
|
45
|
+
--zlec-type-weight-regular: 400;
|
|
46
|
+
--zlec-type-weight-medium: 500;
|
|
47
|
+
--zlec-type-weight-semibold: 600;
|
|
48
|
+
--zlec-type-weight-bold: 700;
|
|
49
|
+
--zlec-type-lineHeight-tight: 1.2;
|
|
50
|
+
--zlec-type-lineHeight-normal: 1.5;
|
|
51
|
+
--zlec-type-lineHeight-loose: 1.7;
|
|
52
|
+
--zlec-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
|
|
53
|
+
--zlec-shadow-md: 0 4px 12px rgba(0,0,0,0.12);
|
|
54
|
+
--zlec-shadow-lg: 0 8px 24px rgba(0,0,0,0.18);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Dark mode — automatyczne przełączanie systemowe */
|
|
58
|
+
@media (prefers-color-scheme: dark) {
|
|
59
|
+
:root {
|
|
60
|
+
--zlec-surface-bg: #0F1720;
|
|
61
|
+
--zlec-surface-card: #1A2535;
|
|
62
|
+
--zlec-surface-elevated: #222F42;
|
|
63
|
+
--zlec-text-primary: #E8EDF5;
|
|
64
|
+
--zlec-text-secondary: #8BA3C0;
|
|
65
|
+
--zlec-text-tertiary: #4A6280;
|
|
66
|
+
--zlec-border-default: rgba(255,255,255,0.08);
|
|
67
|
+
--zlec-navy-base: #0D1829;
|
|
68
|
+
--zlec-navy-mid: #1A2B4A;
|
|
69
|
+
--zlec-navy-light: #2D4066;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Dark mode — ręczne przełączanie przez atrybut data-theme="dark" */
|
|
74
|
+
[data-theme="dark"] {
|
|
75
|
+
--zlec-surface-bg: #0F1720;
|
|
76
|
+
--zlec-surface-card: #1A2535;
|
|
77
|
+
--zlec-surface-elevated: #222F42;
|
|
78
|
+
--zlec-text-primary: #E8EDF5;
|
|
79
|
+
--zlec-text-secondary: #8BA3C0;
|
|
80
|
+
--zlec-text-tertiary: #4A6280;
|
|
81
|
+
--zlec-border-default: rgba(255,255,255,0.08);
|
|
82
|
+
--zlec-navy-base: #0D1829;
|
|
83
|
+
--zlec-navy-mid: #1A2B4A;
|
|
84
|
+
--zlec-navy-light: #2D4066;
|
|
85
|
+
}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
// Wygenerowane przez scripts/build.js — nie edytować ręcznie
|
|
2
|
+
// Zlec.pl Design Tokens v1.0.0 — TypeScript declarations
|
|
3
|
+
|
|
4
|
+
export declare const color: {
|
|
5
|
+
brand: {
|
|
6
|
+
primary: string;
|
|
7
|
+
dark: string;
|
|
8
|
+
tint: string;
|
|
9
|
+
};
|
|
10
|
+
navy: {
|
|
11
|
+
base: string;
|
|
12
|
+
mid: string;
|
|
13
|
+
light: string;
|
|
14
|
+
};
|
|
15
|
+
surface: {
|
|
16
|
+
bg: string;
|
|
17
|
+
card: string;
|
|
18
|
+
elevated: string;
|
|
19
|
+
};
|
|
20
|
+
text: {
|
|
21
|
+
primary: string;
|
|
22
|
+
secondary: string;
|
|
23
|
+
tertiary: string;
|
|
24
|
+
};
|
|
25
|
+
border: {
|
|
26
|
+
default: string;
|
|
27
|
+
};
|
|
28
|
+
status: {
|
|
29
|
+
success: string;
|
|
30
|
+
'success-tint': string;
|
|
31
|
+
warning: string;
|
|
32
|
+
'warning-tint': string;
|
|
33
|
+
error: string;
|
|
34
|
+
'error-tint': string;
|
|
35
|
+
info: string;
|
|
36
|
+
'info-tint': string;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export declare const radius: {
|
|
41
|
+
sm: string;
|
|
42
|
+
md: string;
|
|
43
|
+
lg: string;
|
|
44
|
+
xl: string;
|
|
45
|
+
full: string;
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export declare const spacing: {
|
|
49
|
+
xs: string;
|
|
50
|
+
sm: string;
|
|
51
|
+
md: string;
|
|
52
|
+
lg: string;
|
|
53
|
+
xl: string;
|
|
54
|
+
'2xl': string;
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export declare const typography: {
|
|
58
|
+
family: {
|
|
59
|
+
base: string;
|
|
60
|
+
};
|
|
61
|
+
size: {
|
|
62
|
+
xs: string;
|
|
63
|
+
sm: string;
|
|
64
|
+
base: string;
|
|
65
|
+
lg: string;
|
|
66
|
+
xl: string;
|
|
67
|
+
'2xl': string;
|
|
68
|
+
'3xl': string;
|
|
69
|
+
};
|
|
70
|
+
weight: {
|
|
71
|
+
regular: string;
|
|
72
|
+
medium: string;
|
|
73
|
+
semibold: string;
|
|
74
|
+
bold: string;
|
|
75
|
+
};
|
|
76
|
+
lineHeight: {
|
|
77
|
+
tight: string;
|
|
78
|
+
normal: string;
|
|
79
|
+
loose: string;
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
export declare const shadow: {
|
|
84
|
+
sm: string;
|
|
85
|
+
md: string;
|
|
86
|
+
lg: string;
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
export declare const darkTokens: {
|
|
90
|
+
surface: {
|
|
91
|
+
bg: string;
|
|
92
|
+
card: string;
|
|
93
|
+
elevated: string;
|
|
94
|
+
};
|
|
95
|
+
text: {
|
|
96
|
+
primary: string;
|
|
97
|
+
secondary: string;
|
|
98
|
+
tertiary: string;
|
|
99
|
+
};
|
|
100
|
+
border: {
|
|
101
|
+
default: string;
|
|
102
|
+
};
|
|
103
|
+
navy: {
|
|
104
|
+
base: string;
|
|
105
|
+
mid: string;
|
|
106
|
+
light: string;
|
|
107
|
+
};
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
export declare const tokens: {
|
|
111
|
+
color: typeof color;
|
|
112
|
+
radius: typeof radius;
|
|
113
|
+
spacing: typeof spacing;
|
|
114
|
+
typography: typeof typography;
|
|
115
|
+
shadow: typeof shadow;
|
|
116
|
+
dark: typeof darkTokens;
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
export default tokens;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
// Wygenerowane przez scripts/build.js — nie edytować ręcznie
|
|
2
|
+
// Zlec.pl Design Tokens v1.0.0
|
|
3
|
+
|
|
4
|
+
export const color = {
|
|
5
|
+
"brand": {
|
|
6
|
+
"primary": "#E8470A",
|
|
7
|
+
"dark": "#C53A08",
|
|
8
|
+
"tint": "rgba(232,71,10,0.12)"
|
|
9
|
+
},
|
|
10
|
+
"navy": {
|
|
11
|
+
"base": "#1A2B4A",
|
|
12
|
+
"mid": "#2D4066",
|
|
13
|
+
"light": "#3D5280"
|
|
14
|
+
},
|
|
15
|
+
"surface": {
|
|
16
|
+
"bg": "#F4F5F8",
|
|
17
|
+
"card": "#FFFFFF",
|
|
18
|
+
"elevated": "#F0F1F5"
|
|
19
|
+
},
|
|
20
|
+
"text": {
|
|
21
|
+
"primary": "#1A2B4A",
|
|
22
|
+
"secondary": "#64748B",
|
|
23
|
+
"tertiary": "#94A3B8"
|
|
24
|
+
},
|
|
25
|
+
"border": {
|
|
26
|
+
"default": "rgba(0,0,0,0.08)"
|
|
27
|
+
},
|
|
28
|
+
"status": {
|
|
29
|
+
"success": "#10B981",
|
|
30
|
+
"success-tint": "rgba(16,185,129,0.12)",
|
|
31
|
+
"warning": "#F59E0B",
|
|
32
|
+
"warning-tint": "rgba(245,158,11,0.12)",
|
|
33
|
+
"error": "#EF4444",
|
|
34
|
+
"error-tint": "rgba(239,68,68,0.12)",
|
|
35
|
+
"info": "#8B5CF6",
|
|
36
|
+
"info-tint": "rgba(139,92,246,0.12)"
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export const radius = {
|
|
41
|
+
"sm": "8px",
|
|
42
|
+
"md": "12px",
|
|
43
|
+
"lg": "16px",
|
|
44
|
+
"xl": "20px",
|
|
45
|
+
"full": "999px"
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export const spacing = {
|
|
49
|
+
"xs": "4px",
|
|
50
|
+
"sm": "8px",
|
|
51
|
+
"md": "12px",
|
|
52
|
+
"lg": "16px",
|
|
53
|
+
"xl": "24px",
|
|
54
|
+
"2xl": "32px"
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export const typography = {
|
|
58
|
+
"family": {
|
|
59
|
+
"base": "Plus Jakarta Sans, system-ui, sans-serif"
|
|
60
|
+
},
|
|
61
|
+
"size": {
|
|
62
|
+
"xs": "11px",
|
|
63
|
+
"sm": "13px",
|
|
64
|
+
"base": "15px",
|
|
65
|
+
"lg": "17px",
|
|
66
|
+
"xl": "20px",
|
|
67
|
+
"2xl": "24px",
|
|
68
|
+
"3xl": "30px"
|
|
69
|
+
},
|
|
70
|
+
"weight": {
|
|
71
|
+
"regular": "400",
|
|
72
|
+
"medium": "500",
|
|
73
|
+
"semibold": "600",
|
|
74
|
+
"bold": "700"
|
|
75
|
+
},
|
|
76
|
+
"lineHeight": {
|
|
77
|
+
"tight": "1.2",
|
|
78
|
+
"normal": "1.5",
|
|
79
|
+
"loose": "1.7"
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
export const shadow = {
|
|
84
|
+
"sm": "0 1px 3px rgba(0,0,0,0.08)",
|
|
85
|
+
"md": "0 4px 12px rgba(0,0,0,0.12)",
|
|
86
|
+
"lg": "0 8px 24px rgba(0,0,0,0.18)"
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
export const darkTokens = {
|
|
90
|
+
"surface": {
|
|
91
|
+
"bg": "#0F1720",
|
|
92
|
+
"card": "#1A2535",
|
|
93
|
+
"elevated": "#222F42"
|
|
94
|
+
},
|
|
95
|
+
"text": {
|
|
96
|
+
"primary": "#E8EDF5",
|
|
97
|
+
"secondary": "#8BA3C0",
|
|
98
|
+
"tertiary": "#4A6280"
|
|
99
|
+
},
|
|
100
|
+
"border": {
|
|
101
|
+
"default": "rgba(255,255,255,0.08)"
|
|
102
|
+
},
|
|
103
|
+
"navy": {
|
|
104
|
+
"base": "#0D1829",
|
|
105
|
+
"mid": "#1A2B4A",
|
|
106
|
+
"light": "#2D4066"
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
/** Wszystkie tokeny w jednym obiekcie */
|
|
111
|
+
export const tokens = {
|
|
112
|
+
color,
|
|
113
|
+
radius,
|
|
114
|
+
spacing,
|
|
115
|
+
typography,
|
|
116
|
+
shadow,
|
|
117
|
+
dark: darkTokens,
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
export default tokens;
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
// Wygenerowane przez scripts/build.js — nie edytować ręcznie
|
|
2
|
+
// Zlec.pl Design Tokens v1.0.0 — SCSS Variables
|
|
3
|
+
|
|
4
|
+
// ── Light mode variables ──────────────────────────────────────────────────────
|
|
5
|
+
$zlec-brand-primary: #E8470A !default;
|
|
6
|
+
$zlec-brand-dark: #C53A08 !default;
|
|
7
|
+
$zlec-brand-tint: rgba(232,71,10,0.12) !default;
|
|
8
|
+
$zlec-navy-base: #1A2B4A !default;
|
|
9
|
+
$zlec-navy-mid: #2D4066 !default;
|
|
10
|
+
$zlec-navy-light: #3D5280 !default;
|
|
11
|
+
$zlec-surface-bg: #F4F5F8 !default;
|
|
12
|
+
$zlec-surface-card: #FFFFFF !default;
|
|
13
|
+
$zlec-surface-elevated: #F0F1F5 !default;
|
|
14
|
+
$zlec-text-primary: #1A2B4A !default;
|
|
15
|
+
$zlec-text-secondary: #64748B !default;
|
|
16
|
+
$zlec-text-tertiary: #94A3B8 !default;
|
|
17
|
+
$zlec-border-default: rgba(0,0,0,0.08) !default;
|
|
18
|
+
$zlec-status-success: #10B981 !default;
|
|
19
|
+
$zlec-status-success-tint: rgba(16,185,129,0.12) !default;
|
|
20
|
+
$zlec-status-warning: #F59E0B !default;
|
|
21
|
+
$zlec-status-warning-tint: rgba(245,158,11,0.12) !default;
|
|
22
|
+
$zlec-status-error: #EF4444 !default;
|
|
23
|
+
$zlec-status-error-tint: rgba(239,68,68,0.12) !default;
|
|
24
|
+
$zlec-status-info: #8B5CF6 !default;
|
|
25
|
+
$zlec-status-info-tint: rgba(139,92,246,0.12) !default;
|
|
26
|
+
$zlec-radius-sm: 8px !default;
|
|
27
|
+
$zlec-radius-md: 12px !default;
|
|
28
|
+
$zlec-radius-lg: 16px !default;
|
|
29
|
+
$zlec-radius-xl: 20px !default;
|
|
30
|
+
$zlec-radius-full: 999px !default;
|
|
31
|
+
$zlec-spacing-xs: 4px !default;
|
|
32
|
+
$zlec-spacing-sm: 8px !default;
|
|
33
|
+
$zlec-spacing-md: 12px !default;
|
|
34
|
+
$zlec-spacing-lg: 16px !default;
|
|
35
|
+
$zlec-spacing-xl: 24px !default;
|
|
36
|
+
$zlec-spacing-2xl: 32px !default;
|
|
37
|
+
$zlec-type-family-base: Plus Jakarta Sans, system-ui, sans-serif !default;
|
|
38
|
+
$zlec-type-size-xs: 11px !default;
|
|
39
|
+
$zlec-type-size-sm: 13px !default;
|
|
40
|
+
$zlec-type-size-base: 15px !default;
|
|
41
|
+
$zlec-type-size-lg: 17px !default;
|
|
42
|
+
$zlec-type-size-xl: 20px !default;
|
|
43
|
+
$zlec-type-size-2xl: 24px !default;
|
|
44
|
+
$zlec-type-size-3xl: 30px !default;
|
|
45
|
+
$zlec-type-weight-regular: 400 !default;
|
|
46
|
+
$zlec-type-weight-medium: 500 !default;
|
|
47
|
+
$zlec-type-weight-semibold: 600 !default;
|
|
48
|
+
$zlec-type-weight-bold: 700 !default;
|
|
49
|
+
$zlec-type-lineHeight-tight: 1.2 !default;
|
|
50
|
+
$zlec-type-lineHeight-normal: 1.5 !default;
|
|
51
|
+
$zlec-type-lineHeight-loose: 1.7 !default;
|
|
52
|
+
$zlec-shadow-sm: 0 1px 3px rgba(0,0,0,0.08) !default;
|
|
53
|
+
$zlec-shadow-md: 0 4px 12px rgba(0,0,0,0.12) !default;
|
|
54
|
+
$zlec-shadow-lg: 0 8px 24px rgba(0,0,0,0.18) !default;
|
|
55
|
+
|
|
56
|
+
// ── Dark mode variables ───────────────────────────────────────────────────────
|
|
57
|
+
$zlec-dark-surface-bg: #0F1720 !default;
|
|
58
|
+
$zlec-dark-surface-card: #1A2535 !default;
|
|
59
|
+
$zlec-dark-surface-elevated: #222F42 !default;
|
|
60
|
+
$zlec-dark-text-primary: #E8EDF5 !default;
|
|
61
|
+
$zlec-dark-text-secondary: #8BA3C0 !default;
|
|
62
|
+
$zlec-dark-text-tertiary: #4A6280 !default;
|
|
63
|
+
$zlec-dark-border-default: rgba(255,255,255,0.08) !default;
|
|
64
|
+
$zlec-dark-navy-base: #0D1829 !default;
|
|
65
|
+
$zlec-dark-navy-mid: #1A2B4A !default;
|
|
66
|
+
$zlec-dark-navy-light: #2D4066 !default;
|
|
67
|
+
|
|
68
|
+
// ── Token map (dla sass:map / map.get) ───────────────────────────────────────
|
|
69
|
+
$zlec-tokens: (
|
|
70
|
+
'brand-primary': "#E8470A",
|
|
71
|
+
'brand-dark': "#C53A08",
|
|
72
|
+
'brand-tint': "rgba(232,71,10,0.12)",
|
|
73
|
+
'navy-base': "#1A2B4A",
|
|
74
|
+
'navy-mid': "#2D4066",
|
|
75
|
+
'navy-light': "#3D5280",
|
|
76
|
+
'surface-bg': "#F4F5F8",
|
|
77
|
+
'surface-card': "#FFFFFF",
|
|
78
|
+
'surface-elevated': "#F0F1F5",
|
|
79
|
+
'text-primary': "#1A2B4A",
|
|
80
|
+
'text-secondary': "#64748B",
|
|
81
|
+
'text-tertiary': "#94A3B8",
|
|
82
|
+
'border-default': "rgba(0,0,0,0.08)",
|
|
83
|
+
'status-success': "#10B981",
|
|
84
|
+
'status-success-tint': "rgba(16,185,129,0.12)",
|
|
85
|
+
'status-warning': "#F59E0B",
|
|
86
|
+
'status-warning-tint': "rgba(245,158,11,0.12)",
|
|
87
|
+
'status-error': "#EF4444",
|
|
88
|
+
'status-error-tint': "rgba(239,68,68,0.12)",
|
|
89
|
+
'status-info': "#8B5CF6",
|
|
90
|
+
'status-info-tint': "rgba(139,92,246,0.12)",
|
|
91
|
+
'radius-sm': "8px",
|
|
92
|
+
'radius-md': "12px",
|
|
93
|
+
'radius-lg': "16px",
|
|
94
|
+
'radius-xl': "20px",
|
|
95
|
+
'radius-full': "999px",
|
|
96
|
+
'spacing-xs': "4px",
|
|
97
|
+
'spacing-sm': "8px",
|
|
98
|
+
'spacing-md': "12px",
|
|
99
|
+
'spacing-lg': "16px",
|
|
100
|
+
'spacing-xl': "24px",
|
|
101
|
+
'spacing-2xl': "32px",
|
|
102
|
+
'type-family-base': "Plus Jakarta Sans, system-ui, sans-serif",
|
|
103
|
+
'type-size-xs': "11px",
|
|
104
|
+
'type-size-sm': "13px",
|
|
105
|
+
'type-size-base': "15px",
|
|
106
|
+
'type-size-lg': "17px",
|
|
107
|
+
'type-size-xl': "20px",
|
|
108
|
+
'type-size-2xl': "24px",
|
|
109
|
+
'type-size-3xl': "30px",
|
|
110
|
+
'type-weight-regular': "400",
|
|
111
|
+
'type-weight-medium': "500",
|
|
112
|
+
'type-weight-semibold': "600",
|
|
113
|
+
'type-weight-bold': "700",
|
|
114
|
+
'type-lineHeight-tight': "1.2",
|
|
115
|
+
'type-lineHeight-normal': "1.5",
|
|
116
|
+
'type-lineHeight-loose': "1.7",
|
|
117
|
+
'shadow-sm': "0 1px 3px rgba(0,0,0,0.08)",
|
|
118
|
+
'shadow-md': "0 4px 12px rgba(0,0,0,0.12)",
|
|
119
|
+
'shadow-lg': "0 8px 24px rgba(0,0,0,0.18)",
|
|
120
|
+
);
|
|
121
|
+
|
|
122
|
+
// ── Helper function ───────────────────────────────────────────────────────────
|
|
123
|
+
// Użycie: color: zlec-token('brand-primary');
|
|
124
|
+
@use 'sass:map' as _map;
|
|
125
|
+
@function zlec-token($key) {
|
|
126
|
+
@return _map.get($zlec-tokens, $key);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// ── Dark mode mixin ───────────────────────────────────────────────────────────
|
|
130
|
+
// Użycie: [data-theme="dark"] { @include zlec-dark-mode; }
|
|
131
|
+
@mixin zlec-dark-mode {
|
|
132
|
+
$zlec-surface-bg: #0F1720;
|
|
133
|
+
$zlec-surface-card: #1A2535;
|
|
134
|
+
$zlec-surface-elevated: #222F42;
|
|
135
|
+
$zlec-text-primary: #E8EDF5;
|
|
136
|
+
$zlec-text-secondary: #8BA3C0;
|
|
137
|
+
$zlec-text-tertiary: #4A6280;
|
|
138
|
+
$zlec-border-default: rgba(255,255,255,0.08);
|
|
139
|
+
$zlec-navy-base: #0D1829;
|
|
140
|
+
$zlec-navy-mid: #1A2B4A;
|
|
141
|
+
$zlec-navy-light: #2D4066;
|
|
142
|
+
}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://design-tokens.org/schema.json",
|
|
3
|
+
"brand": {
|
|
4
|
+
"primary": { "$value": "#E8470A", "$type": "color", "$description": "Kolor marki - CTA, akcenty" },
|
|
5
|
+
"dark": { "$value": "#C53A08", "$type": "color", "$description": "Hover/pressed dla brand primary" },
|
|
6
|
+
"tint": { "$value": "rgba(232,71,10,0.12)", "$type": "color", "$description": "Tlo kart z akcentem marki" }
|
|
7
|
+
},
|
|
8
|
+
"navy": {
|
|
9
|
+
"base": { "$value": "#1A2B4A", "$type": "color", "$description": "Kolor glowny tekstu (light), tlo statusbara" },
|
|
10
|
+
"mid": { "$value": "#2D4066", "$type": "color", "$description": "Karty, tla sekcji (light)" },
|
|
11
|
+
"light": { "$value": "#3D5280", "$type": "color", "$description": "Ikony, obramowania (light)" }
|
|
12
|
+
},
|
|
13
|
+
"surface": {
|
|
14
|
+
"bg": { "$value": "#F4F5F8", "$type": "color", "$description": "Tlo strony (light)" },
|
|
15
|
+
"card": { "$value": "#FFFFFF", "$type": "color", "$description": "Karty, inputy (light)" },
|
|
16
|
+
"elevated": { "$value": "#F0F1F5", "$type": "color", "$description": "Tlo elementow wzniesionych (light)" }
|
|
17
|
+
},
|
|
18
|
+
"text": {
|
|
19
|
+
"primary": { "$value": "#1A2B4A", "$type": "color" },
|
|
20
|
+
"secondary": { "$value": "#64748B", "$type": "color" },
|
|
21
|
+
"tertiary": { "$value": "#94A3B8", "$type": "color" }
|
|
22
|
+
},
|
|
23
|
+
"border": {
|
|
24
|
+
"default": { "$value": "rgba(0,0,0,0.08)", "$type": "color" }
|
|
25
|
+
},
|
|
26
|
+
"status": {
|
|
27
|
+
"success": { "$value": "#10B981", "$type": "color" },
|
|
28
|
+
"success-tint": { "$value": "rgba(16,185,129,0.12)", "$type": "color" },
|
|
29
|
+
"warning": { "$value": "#F59E0B", "$type": "color" },
|
|
30
|
+
"warning-tint": { "$value": "rgba(245,158,11,0.12)", "$type": "color" },
|
|
31
|
+
"error": { "$value": "#EF4444", "$type": "color" },
|
|
32
|
+
"error-tint": { "$value": "rgba(239,68,68,0.12)", "$type": "color" },
|
|
33
|
+
"info": { "$value": "#8B5CF6", "$type": "color" },
|
|
34
|
+
"info-tint": { "$value": "rgba(139,92,246,0.12)", "$type": "color" }
|
|
35
|
+
},
|
|
36
|
+
"radius": {
|
|
37
|
+
"sm": { "$value": "8px", "$type": "dimension", "$description": "Chips, badges, inputy" },
|
|
38
|
+
"md": { "$value": "12px", "$type": "dimension", "$description": "Karty wewnetrzne" },
|
|
39
|
+
"lg": { "$value": "16px", "$type": "dimension", "$description": "Karty glowne" },
|
|
40
|
+
"xl": { "$value": "20px", "$type": "dimension", "$description": "Bottom sheets, overlaye" },
|
|
41
|
+
"full": { "$value": "999px", "$type": "dimension", "$description": "Przyciski pill, avatary" }
|
|
42
|
+
},
|
|
43
|
+
"spacing": {
|
|
44
|
+
"xs": { "$value": "4px", "$type": "dimension" },
|
|
45
|
+
"sm": { "$value": "8px", "$type": "dimension" },
|
|
46
|
+
"md": { "$value": "12px", "$type": "dimension" },
|
|
47
|
+
"lg": { "$value": "16px", "$type": "dimension" },
|
|
48
|
+
"xl": { "$value": "24px", "$type": "dimension" },
|
|
49
|
+
"2xl": { "$value": "32px", "$type": "dimension" }
|
|
50
|
+
},
|
|
51
|
+
"type": {
|
|
52
|
+
"family": {
|
|
53
|
+
"base": { "$value": "Plus Jakarta Sans, system-ui, sans-serif", "$type": "fontFamily" }
|
|
54
|
+
},
|
|
55
|
+
"size": {
|
|
56
|
+
"xs": { "$value": "11px", "$type": "dimension", "$description": "Etykiety, badges" },
|
|
57
|
+
"sm": { "$value": "13px", "$type": "dimension", "$description": "Napisy wtorne" },
|
|
58
|
+
"base": { "$value": "15px", "$type": "dimension", "$description": "Tresc glowna" },
|
|
59
|
+
"lg": { "$value": "17px", "$type": "dimension", "$description": "Naglowki kart" },
|
|
60
|
+
"xl": { "$value": "20px", "$type": "dimension", "$description": "Tytuly sekcji" },
|
|
61
|
+
"2xl": { "$value": "24px", "$type": "dimension", "$description": "H2, kwoty" },
|
|
62
|
+
"3xl": { "$value": "30px", "$type": "dimension", "$description": "H1" }
|
|
63
|
+
},
|
|
64
|
+
"weight": {
|
|
65
|
+
"regular": { "$value": "400", "$type": "fontWeight" },
|
|
66
|
+
"medium": { "$value": "500", "$type": "fontWeight" },
|
|
67
|
+
"semibold": { "$value": "600", "$type": "fontWeight" },
|
|
68
|
+
"bold": { "$value": "700", "$type": "fontWeight" }
|
|
69
|
+
},
|
|
70
|
+
"lineHeight": {
|
|
71
|
+
"tight": { "$value": "1.2", "$type": "number", "$description": "Naglowki" },
|
|
72
|
+
"normal": { "$value": "1.5", "$type": "number", "$description": "Tresc" },
|
|
73
|
+
"loose": { "$value": "1.7", "$type": "number", "$description": "Dlugie opisy" }
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
"shadow": {
|
|
77
|
+
"sm": { "$value": "0 1px 3px rgba(0,0,0,0.08)", "$type": "shadow" },
|
|
78
|
+
"md": { "$value": "0 4px 12px rgba(0,0,0,0.12)", "$type": "shadow" },
|
|
79
|
+
"lg": { "$value": "0 8px 24px rgba(0,0,0,0.18)", "$type": "shadow" }
|
|
80
|
+
},
|
|
81
|
+
"dark": {
|
|
82
|
+
"surface": {
|
|
83
|
+
"bg": { "$value": "#0F1720", "$type": "color" },
|
|
84
|
+
"card": { "$value": "#1A2535", "$type": "color" },
|
|
85
|
+
"elevated": { "$value": "#222F42", "$type": "color" }
|
|
86
|
+
},
|
|
87
|
+
"text": {
|
|
88
|
+
"primary": { "$value": "#E8EDF5", "$type": "color" },
|
|
89
|
+
"secondary": { "$value": "#8BA3C0", "$type": "color" },
|
|
90
|
+
"tertiary": { "$value": "#4A6280", "$type": "color" }
|
|
91
|
+
},
|
|
92
|
+
"border": {
|
|
93
|
+
"default": { "$value": "rgba(255,255,255,0.08)", "$type": "color" }
|
|
94
|
+
},
|
|
95
|
+
"navy": {
|
|
96
|
+
"base": { "$value": "#0D1829", "$type": "color" },
|
|
97
|
+
"mid": { "$value": "#1A2B4A", "$type": "color" },
|
|
98
|
+
"light": { "$value": "#2D4066", "$type": "color" }
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,28 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zlecpl/tokens",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Design tokens dla Zlec.pl — kolory, typografia, spacing, cienie",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "build/js/tokens.js",
|
|
7
|
+
"types": "build/js/tokens.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./build/js/tokens.d.ts",
|
|
11
|
+
"import": "./build/js/tokens.js"
|
|
12
|
+
},
|
|
13
|
+
"./css": "./build/css/variables.css",
|
|
14
|
+
"./scss": "./build/scss/_tokens.scss"
|
|
15
|
+
},
|
|
16
|
+
"scripts": {
|
|
17
|
+
"build": "node scripts/build.js"
|
|
18
|
+
},
|
|
19
|
+
"files": [
|
|
20
|
+
"build/",
|
|
21
|
+
"design-tokens.json"
|
|
22
|
+
],
|
|
23
|
+
"publishConfig": {
|
|
24
|
+
"access": "public"
|
|
25
|
+
},
|
|
26
|
+
"keywords": ["design-tokens", "zlecpl", "css-variables"],
|
|
27
|
+
"license": "MIT"
|
|
28
|
+
}
|