@archetypeai/ds-lib-tokens 0.3.7 → 0.3.9
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 +23 -26
- package/package.json +12 -2
package/README.md
CHANGED
|
@@ -1,17 +1,6 @@
|
|
|
1
1
|
## @archetypeai/ds-lib-tokens
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
It provides:
|
|
6
|
-
|
|
7
|
-
- **Semantic OKLCH color tokens** (shadcn-style): background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring, chart colors (1-5), and sidebar colors
|
|
8
|
-
- **Light + dark mode CSS variables** via `.dark` class, using `@custom-variant dark (&:where(.dark, .dark *))`
|
|
9
|
-
- **Client theme variables** via `.client` and `.dark-client` classes
|
|
10
|
-
- **Base layer**: Semantic HTML element styles for consistent typography and borders
|
|
11
|
-
- **Typography**: Font-family stacks with system font fallbacks (install `@archetypeai/ds-lib-fonts-internal` separately for PP Neue Montreal)
|
|
12
|
-
- **Brand semantic tokens**: `atai-neutral`, `atai-good`, `atai-warning`, `atai-critical` for status-aware UI patterns
|
|
13
|
-
|
|
14
|
-
It also contains a `tokens.css` file with 8 custom OKLCH color palettes (atai-tangerine, atai-sunshine-yellow, atai-lime, atai-screen-green, atai-fire-red, atai-energy-pink, atai-cool-purple, atai-baby-blue), each with shades 50-950. These are automatically loaded via `theme.css`.
|
|
3
|
+
**Tailwind v4 theme** for the Archetype AI Design System. Provides semantic design tokens, color palettes, and base styles for use with the shadcn-svelte component registry.
|
|
15
4
|
|
|
16
5
|
---
|
|
17
6
|
|
|
@@ -21,8 +10,6 @@ It also contains a `tokens.css` file with 8 custom OKLCH color palettes (atai-ta
|
|
|
21
10
|
npm install @archetypeai/ds-lib-tokens tailwindcss
|
|
22
11
|
```
|
|
23
12
|
|
|
24
|
-
And configure npm to use the GitHub Package Registry for the `@archetypeai` scope (see the main repo `README.md`).
|
|
25
|
-
|
|
26
13
|
---
|
|
27
14
|
|
|
28
15
|
## Usage
|
|
@@ -30,23 +17,33 @@ And configure npm to use the GitHub Package Registry for the `@archetypeai` scop
|
|
|
30
17
|
Import the theme before Tailwind in your global CSS:
|
|
31
18
|
|
|
32
19
|
```css
|
|
33
|
-
@import '@archetypeai/ds-lib-fonts-internal'; /* optional
|
|
20
|
+
@import '@archetypeai/ds-lib-fonts-internal'; /* optional → PP Neue Montreal */
|
|
34
21
|
@import '@archetypeai/ds-lib-tokens/theme.css';
|
|
35
22
|
@import 'tailwindcss';
|
|
36
23
|
```
|
|
37
24
|
|
|
38
|
-
Without `@archetypeai/ds-lib-fonts-internal`, the theme falls back to system fonts (`system-ui`, `Courier New`).
|
|
39
|
-
|
|
40
|
-
Then use the semantic utilities in your markup:
|
|
41
|
-
|
|
42
25
|
```svelte
|
|
43
|
-
<div class="bg-background text-foreground p-md border-border rounded-lg">
|
|
26
|
+
<div class="bg-background text-foreground p-md border-border rounded-lg">
|
|
27
|
+
Hello world
|
|
28
|
+
</div>
|
|
44
29
|
```
|
|
45
30
|
|
|
46
|
-
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
## What's Included
|
|
47
34
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
35
|
+
| Feature | Details |
|
|
36
|
+
|---------|---------|
|
|
37
|
+
| **Semantic Tokens** | OKLCH CSS variables (shadcn-style): `background`, `foreground`, `card`, `popover`, `primary`, `secondary`, `muted`, `accent`, `destructive`, `border`, `input`, `ring`, `chart-1`–`5`, `sidebar`, `atai-neutral`, `atai-good`, `atai-warning`, `atai-critical`|
|
|
38
|
+
| **Brand Tokens** | 8 OKLCH palettes with shades 50–950: `atai-tangerine`, `atai-sunshine-yellow`, `atai-lime`, `atai-screen-green`, `atai-fire-red`, `atai-energy-pink`, `atai-cool-purple`, `atai-baby-blue` |
|
|
39
|
+
| **Dark mode** | `.dark` class via `@custom-variant dark (&:where(.dark, .dark *))` |
|
|
40
|
+
| **Client theme** | `.client` and `.dark-client` class variants |
|
|
41
|
+
| **Typography** | Font-family stacks with system fallbacks and semantic HTML base styles |
|
|
42
|
+
|
|
43
|
+
Brand tokens are defined in `tokens.css` and loaded automatically via `theme.css`.
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## Fonts
|
|
48
|
+
|
|
49
|
+
`@archetypeai/ds-lib-fonts-internal` is not yet published. Without it, the theme falls back to system fonts. Install it separately for PP Neue Montreal.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@archetypeai/ds-lib-tokens",
|
|
3
|
-
"version": "0.3.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.3.9",
|
|
4
|
+
"description": "Archetype AI Design System Tokens",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": "./theme.css",
|
|
@@ -22,6 +22,16 @@
|
|
|
22
22
|
"publishConfig": {
|
|
23
23
|
"registry": "https://registry.npmjs.org"
|
|
24
24
|
},
|
|
25
|
+
"keywords": [
|
|
26
|
+
"design-system",
|
|
27
|
+
"design-tokens",
|
|
28
|
+
"tailwindcss",
|
|
29
|
+
"css-variables",
|
|
30
|
+
"oklch",
|
|
31
|
+
"shadcn-svelte",
|
|
32
|
+
"archetypeai",
|
|
33
|
+
"physicalai"
|
|
34
|
+
],
|
|
25
35
|
"license": "MIT",
|
|
26
36
|
"peerDependencies": {
|
|
27
37
|
"tailwindcss": "^4.0.0"
|