@kommon-lab/tokens 0.1.0 → 0.1.2
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 +143 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,143 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @kommon-lab/tokens
|
|
2
|
+
|
|
3
|
+
Design tokens for the Kommon Lab multi-brand design system.
|
|
4
|
+
CSS custom properties and JSON token files for 5 brands.
|
|
5
|
+
|
|
6
|
+
## Installation
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install @kommon-lab/tokens
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Usage
|
|
13
|
+
|
|
14
|
+
### CSS (recommended)
|
|
15
|
+
|
|
16
|
+
Import the CSS file for your brand in your project entry point:
|
|
17
|
+
|
|
18
|
+
```js
|
|
19
|
+
import '@kommon-lab/tokens/css/kiabi'
|
|
20
|
+
// or: beebs, kitchoun, ekstract, kiabi-home
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Then use the CSS custom properties anywhere in your styles:
|
|
24
|
+
|
|
25
|
+
```css
|
|
26
|
+
.button {
|
|
27
|
+
background-color: var(--color-bg-brand);
|
|
28
|
+
color: var(--color-fg-inverse);
|
|
29
|
+
border-radius: var(--border-radius-m);
|
|
30
|
+
padding: var(--space-s) var(--space-m);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
h1 {
|
|
34
|
+
font-size: var(--font-title-l-font-size);
|
|
35
|
+
line-height: var(--font-title-l-line-height);
|
|
36
|
+
font-weight: var(--font-title-l-font-weight);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### JSON tokens
|
|
41
|
+
|
|
42
|
+
For custom tooling, plugins or AI-assisted tools:
|
|
43
|
+
|
|
44
|
+
```js
|
|
45
|
+
import tokens from '@kommon-lab/tokens/tokens/kiabi_tokens.json'
|
|
46
|
+
import primitives from '@kommon-lab/tokens/tokens/colors_primitives.json'
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Available brands
|
|
50
|
+
|
|
51
|
+
| Brand | CSS import |
|
|
52
|
+
|---|---|
|
|
53
|
+
| Kiabi | `@kommon-lab/tokens/css/kiabi` |
|
|
54
|
+
| Beebs | `@kommon-lab/tokens/css/beebs` |
|
|
55
|
+
| Kitchoun | `@kommon-lab/tokens/css/kitchoun` |
|
|
56
|
+
| Ekstract | `@kommon-lab/tokens/css/ekstract` |
|
|
57
|
+
| Kiabi Home | `@kommon-lab/tokens/css/kiabi-home` |
|
|
58
|
+
|
|
59
|
+
## Token reference
|
|
60
|
+
|
|
61
|
+
All tokens are exposed as CSS custom properties on `:root`.
|
|
62
|
+
|
|
63
|
+
### Colors
|
|
64
|
+
|
|
65
|
+
| Token | Description |
|
|
66
|
+
|---|---|
|
|
67
|
+
| `--color-bg-brand` | Brand background color |
|
|
68
|
+
| `--color-bg-base` | Default page background |
|
|
69
|
+
| `--color-bg-alternate` | Alternate/subtle background |
|
|
70
|
+
| `--color-fg-brand` | Brand foreground (text, icons) |
|
|
71
|
+
| `--color-fg-neutral` | Default text color |
|
|
72
|
+
| `--color-fg-subtle` | Muted text color |
|
|
73
|
+
| `--color-fg-inverse` | Text on dark/brand backgrounds |
|
|
74
|
+
|
|
75
|
+
### Spacing
|
|
76
|
+
|
|
77
|
+
Semantic scale: `--space-xxxxs` → `--space-xxxxl`
|
|
78
|
+
Numeric scale: `--space-0`, `--space-25`, `--space-50` ... `--space-400`
|
|
79
|
+
|
|
80
|
+
### Sizing
|
|
81
|
+
|
|
82
|
+
Semantic scale: `--size-xxxs` → `--size-xxxl`
|
|
83
|
+
Numeric scale: `--size-0`, `--size-25`, `--size-50` ... `--size-500`
|
|
84
|
+
|
|
85
|
+
### Border
|
|
86
|
+
|
|
87
|
+
| Token | Values |
|
|
88
|
+
|---|---|
|
|
89
|
+
| `--border-radius-{scale}` | `none` `xs` `s` `m` `l` `xl` `pill` |
|
|
90
|
+
| `--border-width-thin` | |
|
|
91
|
+
| `--border-width-thick` | |
|
|
92
|
+
|
|
93
|
+
### Typography
|
|
94
|
+
|
|
95
|
+
Tokens follow the pattern `--font-{role}-{size}-{property}`.
|
|
96
|
+
|
|
97
|
+
| Role | Sizes | Scope |
|
|
98
|
+
|---|---|---|
|
|
99
|
+
| `body` | `xs` `s` `m` | All screens |
|
|
100
|
+
| `link` | `xs` `s` `m` | All screens |
|
|
101
|
+
| `display` | `m` `l` | Mobile-first, overrides at 768px |
|
|
102
|
+
| `title` | `xs` `s` `m` `l` | Mobile-first, overrides at 768px |
|
|
103
|
+
|
|
104
|
+
Each role/size exposes: `font-family`, `font-size`, `font-weight`, `line-height`, `letter-spacing`, `text-decoration`.
|
|
105
|
+
|
|
106
|
+
Bold variants are available for `body` and `link` with the `-bold` suffix:
|
|
107
|
+
|
|
108
|
+
```css
|
|
109
|
+
/* regular */
|
|
110
|
+
var(--font-body-m-font-size)
|
|
111
|
+
|
|
112
|
+
/* bold */
|
|
113
|
+
var(--font-body-m-bold-font-weight)
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
> **Responsive:** `display` and `title` tokens are defined mobile-first and automatically
|
|
117
|
+
> override at `min-width: 768px`. No extra configuration needed.
|
|
118
|
+
|
|
119
|
+
## Versioning
|
|
120
|
+
|
|
121
|
+
This package follows [Semantic Versioning](https://semver.org):
|
|
122
|
+
|
|
123
|
+
| Type | When | Impact |
|
|
124
|
+
|---|---|---|
|
|
125
|
+
| **PATCH** `0.1.x` | Bug fix, no token name change | Safe to update |
|
|
126
|
+
| **MINOR** `0.x.0` | New tokens or brands added | Safe to update |
|
|
127
|
+
| **MAJOR** `x.0.0` | Token renamed or removed | Review before updating |
|
|
128
|
+
|
|
129
|
+
The package is currently `0.x.x` — the token structure may still evolve.
|
|
130
|
+
|
|
131
|
+
## For maintainers
|
|
132
|
+
|
|
133
|
+
To publish a new version after a Figma update:
|
|
134
|
+
|
|
135
|
+
1. Drop the new exports into `figma-exports/`
|
|
136
|
+
2. Bump the version in `package.json`
|
|
137
|
+
3. Run:
|
|
138
|
+
|
|
139
|
+
```bash
|
|
140
|
+
npm publish --access public
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
The build (`transform` + `style-dictionary`) runs automatically before publishing.
|