@tlglobal/tokens 2.0.0 → 2.0.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.
- package/README.md +98 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# @tlglobal/tokens
|
|
2
|
+
|
|
3
|
+
Design tokens for TuringLab products — CSS custom properties for color, type, spacing, radius and
|
|
4
|
+
shadow, plus brand logo assets. Pure CSS: no build step, no React dependency. Usable from any
|
|
5
|
+
surface (React, plain HTML, email templates, a marketing site).
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
pnpm add @tlglobal/tokens
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
**Plain CSS / HTML** — import everything:
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import "@tlglobal/tokens/css";
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```html
|
|
22
|
+
<link rel="stylesheet" href="node_modules/@tlglobal/tokens/css/index.css" />
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
**Tailwind v4** — pull tokens in as theme values so `bg-accent`, `text-text-primary` etc. work as
|
|
26
|
+
utilities:
|
|
27
|
+
|
|
28
|
+
```css
|
|
29
|
+
@import "tailwindcss";
|
|
30
|
+
@import "@tlglobal/tokens/tailwind-theme.css";
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
**A single category**, if you don't want the full set:
|
|
34
|
+
|
|
35
|
+
```css
|
|
36
|
+
@import "@tlglobal/tokens/css/colors.css";
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Available files: `fonts.css`, `colors.css`, `colors-dark.css`, `typography.css`, `spacing.css`,
|
|
40
|
+
`radius.css`, `shadow.css`, `tailwind-theme.css` (all under `css/`, or import `css` for everything).
|
|
41
|
+
|
|
42
|
+
## Dark mode
|
|
43
|
+
|
|
44
|
+
Tokens redefine themselves under `[data-theme="dark"]`. Set the attribute on `<html>` (or any
|
|
45
|
+
ancestor) to flip every token — and every component built on them — to dark mode:
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<html data-theme="dark">
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
No class-based toggle (`class="dark"`) — omitting the attribute entirely means light mode.
|
|
52
|
+
|
|
53
|
+
## Semantic vs. raw tokens
|
|
54
|
+
|
|
55
|
+
Prefer semantic names — they flip between light/dark, raw palette values don't:
|
|
56
|
+
|
|
57
|
+
```css
|
|
58
|
+
/* Use these */
|
|
59
|
+
var(--bg-page) var(--bg-surface) var(--bg-surface-hover)
|
|
60
|
+
var(--text-primary) var(--text-secondary) var(--text-muted) var(--text-inverse)
|
|
61
|
+
var(--border-default) var(--border-strong) var(--border-focus)
|
|
62
|
+
var(--accent) var(--accent-hover) var(--accent-active)
|
|
63
|
+
|
|
64
|
+
/* Not these, unless you specifically want a fixed color in both themes */
|
|
65
|
+
var(--neutral-100) var(--accent-500)
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Brand assets
|
|
69
|
+
|
|
70
|
+
Logo files ship under `assets/`:
|
|
71
|
+
|
|
72
|
+
```js
|
|
73
|
+
import logo from "@tlglobal/tokens/assets/logo-full.png";
|
|
74
|
+
import logoDark from "@tlglobal/tokens/assets/logo-full-dark.png";
|
|
75
|
+
import mark from "@tlglobal/tokens/assets/logo-mark.png";
|
|
76
|
+
import markDark from "@tlglobal/tokens/assets/logo-mark-dark.png";
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## For AI agents (Claude, Cursor, etc.)
|
|
80
|
+
|
|
81
|
+
This package has no JS API — it's CSS custom properties. The full, current list of variable names
|
|
82
|
+
is always accurate straight from source, since nothing here is generated or renamed silently:
|
|
83
|
+
|
|
84
|
+
- `node_modules/@tlglobal/tokens/src/css/colors.css` and `colors-dark.css` — color tokens
|
|
85
|
+
- `node_modules/@tlglobal/tokens/src/css/typography.css`, `spacing.css`, `radius.css`, `shadow.css` — the rest
|
|
86
|
+
|
|
87
|
+
Read those directly for the exact current variable names rather than guessing — a name outside
|
|
88
|
+
those files doesn't exist. If [`@tlglobal/ui`](https://www.npmjs.com/package/@tlglobal/ui) is also
|
|
89
|
+
installed, its `AI_INVENTORY.md` documents the same tokens as Tailwind utility class names.
|
|
90
|
+
|
|
91
|
+
## Links
|
|
92
|
+
|
|
93
|
+
- [`@tlglobal/ui`](https://www.npmjs.com/package/@tlglobal/ui) — components themed against these tokens
|
|
94
|
+
- [Source](https://github.com/turinglabglobal/Atoms)
|
|
95
|
+
|
|
96
|
+
## License
|
|
97
|
+
|
|
98
|
+
Apache-2.0
|