@oneli8/tokens 1.0.0-beta.4 → 1.0.0-beta.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.
- package/README.md +34 -15
- package/ai-context.json +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @oneli8/tokens
|
|
2
2
|
|
|
3
|
-
OneLi8 Design System
|
|
3
|
+
OneLi8 Design System, design tokens compiled from Figma.
|
|
4
4
|
|
|
5
5
|
```sh
|
|
6
6
|
npm install @oneli8/tokens
|
|
@@ -12,13 +12,13 @@ import { tokens } from '@oneli8/tokens'; // flat { 'color-text-primary': '#1518
|
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
Every value is generated from `src/tokens.json`, which is verified against the
|
|
15
|
-
Figma file rather than hand
|
|
15
|
+
Figma file rather than maintained by hand. Do not edit `dist/`, edit the source and
|
|
16
16
|
rebuild.
|
|
17
17
|
|
|
18
18
|
## What the vocabulary contains
|
|
19
19
|
|
|
20
20
|
99 colour primitives across 9 ramps, 68 semantic colour roles, 45 Gem material
|
|
21
|
-
roles, 27 control
|
|
21
|
+
roles, 27 control material roles, a 3px atomic dimension scale, 9 radii, 9
|
|
22
22
|
composite typography roles and 5 elevations.
|
|
23
23
|
|
|
24
24
|
Two rules matter when consuming it:
|
|
@@ -27,18 +27,18 @@ Two rules matter when consuming it:
|
|
|
27
27
|
`color-actionprimary-default` is a decision. Primitives are hidden from Figma
|
|
28
28
|
pickers for the same reason.
|
|
29
29
|
- **Use the `.ol8-type-<role>` class, not individual font variables.** Typography
|
|
30
|
-
is composite in Figma
|
|
31
|
-
tracking
|
|
30
|
+
is composite in Figma, a role bundles family, size, line height, weight and
|
|
31
|
+
tracking, and the class applies all of them together.
|
|
32
32
|
|
|
33
33
|
## Entry points
|
|
34
34
|
|
|
35
35
|
| Import | What it gives you |
|
|
36
36
|
|---|---|
|
|
37
|
-
| `@oneli8/tokens` | flat `{ name: value }` map, with a literal
|
|
37
|
+
| `@oneli8/tokens` | flat `{ name: value }` map, with a literal union key type |
|
|
38
38
|
| `@oneli8/tokens/css` | the custom properties and `.ol8-type-*` classes |
|
|
39
39
|
| `@oneli8/tokens/tailwind` | Tailwind v3 preset |
|
|
40
40
|
| `@oneli8/tokens/tailwind.css` | Tailwind v4 `@theme` bridge |
|
|
41
|
-
| `@oneli8/tokens/figma` | round
|
|
41
|
+
| `@oneli8/tokens/figma` | round trip payload: collections, theme modes, type and elevation styles |
|
|
42
42
|
| `@oneli8/tokens/status` | component maturity records |
|
|
43
43
|
| `@oneli8/tokens/source` | the editable `tokens.json` |
|
|
44
44
|
|
|
@@ -62,17 +62,36 @@ primary family; it does not bake a blue at build time.
|
|
|
62
62
|
The JS map is the exception: it holds resolved literals, because code that reads
|
|
63
63
|
it wants an actual colour, not a `var()` string.
|
|
64
64
|
|
|
65
|
+
## Why this exists
|
|
66
|
+
|
|
67
|
+
OneLi8 means One Light. It was created by Akshay Dhore, intended for broad human
|
|
68
|
+
benefit and conceived as service to Guruji Shrii Arnav, whose teachings inspire
|
|
69
|
+
it. Service, clarity, harmony, proportion, restraint and evolution guide its
|
|
70
|
+
decisions. `PRINCIPLES.md` ships inside this package and sets them out in full.
|
|
71
|
+
|
|
72
|
+
The practical intention: most design systems hand you components and hope you
|
|
73
|
+
stay inside them. This one hands you the reasoning too, so when you need
|
|
74
|
+
something it does not ship you can build it and have it still belong.
|
|
75
|
+
|
|
65
76
|
## Naming
|
|
66
77
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
`
|
|
78
|
+
The structure is borrowed from Sanskrit grammar rather than a CSS convention.
|
|
79
|
+
|
|
80
|
+
**A compound naming one thing is one word.** `actionprimary` is not action plus
|
|
81
|
+
primary, it is a single role. `cutedge` is one feature of the Gem material.
|
|
82
|
+
|
|
83
|
+
**A qualifier stays separate from what it qualifies.** In
|
|
84
|
+
`--ol8-material-control-gem--primary-hover-start`, `hover` is a state applied to
|
|
85
|
+
`start`, so it keeps its hyphen. That is why `disabledcontent` is joined and
|
|
86
|
+
`hover-start` is not.
|
|
87
|
+
|
|
88
|
+
Hyphens separate levels of the hierarchy, never words inside a level. The words
|
|
89
|
+
themselves stay readable: no abbreviations and no truncation.
|
|
71
90
|
|
|
72
91
|
## Theming
|
|
73
92
|
|
|
74
|
-
Three independent axes, each an attribute. They compose
|
|
75
|
-
get both; there is no Cartesian product of pre
|
|
93
|
+
Three independent axes, each an attribute. They compose, set two at once and you
|
|
94
|
+
get both; there is no Cartesian product of pre baked modes.
|
|
76
95
|
|
|
77
96
|
```html
|
|
78
97
|
<html data-ol8-color-scheme="dark" data-ol8-primary="orange">
|
|
@@ -92,9 +111,9 @@ primitive, or your UI will not follow the theme.
|
|
|
92
111
|
Not yet ported from the Figma theme source: the `typographyViewport` axis
|
|
93
112
|
(`medium` / `expanded`), which needs `font.size.090`, `font.line.096` and a
|
|
94
113
|
`font.tracking.*` scale this tree has never synced; dark overrides for the five
|
|
95
|
-
`elevation-*` composites; and dark link
|
|
114
|
+
`elevation-*` composites; and dark link state and icon button surface roles,
|
|
96
115
|
which have no token in this vocabulary yet.
|
|
97
116
|
|
|
98
117
|
## Licence
|
|
99
118
|
|
|
100
|
-
Apache
|
|
119
|
+
Apache 2.0. Created by Akshay Dhore. See `LICENSE` and `NOTICE`.
|
package/ai-context.json
CHANGED
package/package.json
CHANGED