@archetypeai/ds-lib-tokens 0.3.7

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.
Files changed (5) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +52 -0
  3. package/package.json +29 -0
  4. package/theme.css +205 -0
  5. package/tokens.css +111 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Archetype AI
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,52 @@
1
+ ## @archetypeai/ds-lib-tokens
2
+
3
+ `@archetypeai/ds-lib-tokens` is the **Tailwind v4 theme layer** for the Archetype AI design system. It is the currently recommended way to use the design system in conjunction with the ShadCN-Svelte registry.
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`.
15
+
16
+ ---
17
+
18
+ ## Install
19
+
20
+ ```bash
21
+ npm install @archetypeai/ds-lib-tokens tailwindcss
22
+ ```
23
+
24
+ And configure npm to use the GitHub Package Registry for the `@archetypeai` scope (see the main repo `README.md`).
25
+
26
+ ---
27
+
28
+ ## Usage
29
+
30
+ Import the theme before Tailwind in your global CSS:
31
+
32
+ ```css
33
+ @import '@archetypeai/ds-lib-fonts-internal'; /* optional — PP Neue Montreal custom fonts */
34
+ @import '@archetypeai/ds-lib-tokens/theme.css';
35
+ @import 'tailwindcss';
36
+ ```
37
+
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
+ ```svelte
43
+ <div class="bg-background text-foreground p-md border-border rounded-lg">Hello world</div>
44
+ ```
45
+
46
+ Dark mode is controlled via the `dark` class on the root element, compatible with typical Tailwind dark-mode setups:
47
+
48
+ ```html
49
+ <html class="dark">
50
+ <!-- ... -->
51
+ </html>
52
+ ```
package/package.json ADDED
@@ -0,0 +1,29 @@
1
+ {
2
+ "name": "@archetypeai/ds-lib-tokens",
3
+ "version": "0.3.7",
4
+ "description": "Tokens for Archetype AI Design System",
5
+ "type": "module",
6
+ "exports": {
7
+ ".": "./theme.css",
8
+ "./theme.css": "./theme.css",
9
+ "./tokens.css": "./tokens.css"
10
+ },
11
+ "files": [
12
+ "theme.css",
13
+ "tokens.css"
14
+ ],
15
+ "scripts": {
16
+ "build": "rm -rf dist && mkdir -p dist && cp theme.css tokens.css package.json LICENSE dist/ && cp ../docs/DS-LIB-TOKENS.md dist/README.md"
17
+ },
18
+ "repository": {
19
+ "type": "git",
20
+ "url": "git+https://github.com/archetypeai/design-system.git"
21
+ },
22
+ "publishConfig": {
23
+ "registry": "https://registry.npmjs.org"
24
+ },
25
+ "license": "MIT",
26
+ "peerDependencies": {
27
+ "tailwindcss": "^4.0.0"
28
+ }
29
+ }
package/theme.css ADDED
@@ -0,0 +1,205 @@
1
+ /*
2
+ Tailwind v4 Archetype AI Theme
3
+ https://tailwindcss.com/docs/theme
4
+ */
5
+
6
+ @import 'tailwindcss';
7
+ @import './tokens.css';
8
+
9
+ @custom-variant dark (&:where(.dark, .dark *));
10
+
11
+ /* Semantic Tokens */
12
+ :root {
13
+ /* shadcn-svelte specific semantic tokens*/
14
+ --radius: 0.1rem;
15
+ --background: oklch(1 0 0);
16
+ --foreground: oklch(0.141 0.005 285.823);
17
+ --card: oklch(0.99 0 0);
18
+ --card-foreground: oklch(0.141 0.005 285.823);
19
+ --popover: oklch(1 0 0);
20
+ --popover-foreground: oklch(0.141 0.005 285.823);
21
+ --primary: oklch(0.21 0.006 285.885);
22
+ --primary-foreground: oklch(0.985 0 0);
23
+ --secondary: oklch(0.967 0.001 286.375);
24
+ --secondary-foreground: oklch(0.21 0.006 285.885);
25
+ --muted: oklch(0.967 0.001 286.375);
26
+ --muted-foreground: oklch(0.552 0.016 285.938);
27
+ --accent: oklch(0.967 0.001 286.375);
28
+ --accent-foreground: oklch(0.21 0.006 285.885);
29
+ --destructive: var(--color-atai-fire-red-500);
30
+ --border: oklch(0.92 0.004 286.32);
31
+ --input: oklch(0.92 0.004 286.32);
32
+ --ring: oklch(0.705 0.015 286.067);
33
+ --chart-1: var(--color-atai-cool-purple-500);
34
+ --chart-2: var(--color-atai-fire-red-500);
35
+ --chart-3: var(--color-atai-sunshine-yellow-500);
36
+ --chart-4: var(--color-atai-baby-blue-800);
37
+ --chart-5: var(--color-atai-energy-pink-600);
38
+ --sidebar: oklch(0.985 0 0);
39
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
40
+ --sidebar-primary: var(--color-atai-baby-blue-800);
41
+ --sidebar-primary-foreground: oklch(0.985 0 0);
42
+ --sidebar-accent: oklch(0.967 0.001 286.375);
43
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
44
+ --sidebar-border: oklch(0.92 0.004 286.32);
45
+ --sidebar-ring: oklch(0.705 0.015 286.067);
46
+ /* Archetype AI specific semantic tokens*/
47
+ --atai-neutral: var(--color-atai-baby-blue-300);
48
+ --atai-good: var(--color-atai-screen-green-200);
49
+ --atai-warning: var(--color-atai-sunshine-yellow-50);
50
+ --atai-critical: var(--color-atai-fire-red-500);
51
+ }
52
+
53
+ /* Semantic Tokens Dark Mode Overrides */
54
+ .dark {
55
+ /* shadcn-svelte specific semantic tokens*/
56
+ --background: oklch(0.141 0.005 285.823);
57
+ --foreground: oklch(0.985 0 0);
58
+ --card: oklch(0.21 0.006 285.885);
59
+ --card-foreground: oklch(0.985 0 0);
60
+ --popover: oklch(0.21 0.006 285.885);
61
+ --popover-foreground: oklch(0.985 0 0);
62
+ --primary: oklch(0.92 0.004 286.32);
63
+ --primary-foreground: oklch(0.21 0.006 285.885);
64
+ --secondary: oklch(0.274 0.006 286.033);
65
+ --secondary-foreground: oklch(0.985 0 0);
66
+ --muted: oklch(0.274 0.006 286.033);
67
+ --muted-foreground: oklch(0.705 0.015 286.067);
68
+ --accent: oklch(0.274 0.006 286.033);
69
+ --accent-foreground: oklch(0.985 0 0);
70
+ --destructive: var(--color-atai-fire-red-500);
71
+ --border: oklch(1 0 0 / 10%);
72
+ --input: oklch(1 0 0 / 15%);
73
+ --ring: oklch(0.552 0.016 285.938);
74
+ --chart-1: var(--color-atai-cool-purple-500);
75
+ --chart-2: var(--color-atai-fire-red-500);
76
+ --chart-3: var(--color-atai-sunshine-yellow-500);
77
+ --chart-4: var(--color-atai-baby-blue-800);
78
+ --chart-5: var(--color-atai-energy-pink-600);
79
+ --sidebar: oklch(0.21 0.006 285.885);
80
+ --sidebar-foreground: oklch(0.985 0 0);
81
+ --sidebar-primary: var(--color-atai-baby-blue-800);
82
+ --sidebar-primary-foreground: oklch(0.985 0 0);
83
+ --sidebar-accent: oklch(0.274 0.006 286.033);
84
+ --sidebar-accent-foreground: oklch(0.985 0 0);
85
+ --sidebar-border: oklch(1 0 0 / 10%);
86
+ --sidebar-ring: oklch(0.552 0.016 285.938);
87
+ /* Archetype AI specific semantic tokens*/
88
+ --atai-neutral: var(--color-atai-baby-blue-300);
89
+ --atai-good: var(--color-atai-screen-green-200);
90
+ --atai-warning: var(--color-atai-sunshine-yellow-100);
91
+ --atai-critical: var(--color-atai-fire-red-500);
92
+ }
93
+
94
+ /* Client Theme Overrides*/
95
+ .client {
96
+ }
97
+
98
+ /* Client Dark Theme Overrides*/
99
+ .dark-client {
100
+ }
101
+
102
+ /* Tailwind Theme */
103
+ @theme {
104
+ --font-sans: 'PP Neue Montreal', system-ui, -apple-system, sans-serif;
105
+ --font-mono: 'PP Neue Montreal Mono', 'Courier New', monospace;
106
+ --radius-sm: calc(var(--radius) - 0.125rem);
107
+ --radius-md: var(--radius);
108
+ --radius-lg: calc(var(--radius) + 0.125rem);
109
+ --radius-full: 9999px;
110
+ --spacing-xs: 0.25rem;
111
+ --spacing-sm: 0.5rem;
112
+ --spacing-md: 0.75rem;
113
+ --spacing-lg: 1rem;
114
+ --spacing-xl: 1.5rem;
115
+ --color-background: var(--background);
116
+ --color-foreground: var(--foreground);
117
+ --color-card: var(--card);
118
+ --color-card-foreground: var(--card-foreground);
119
+ --color-popover: var(--popover);
120
+ --color-popover-foreground: var(--popover-foreground);
121
+ --color-primary: var(--primary);
122
+ --color-primary-foreground: var(--primary-foreground);
123
+ --color-secondary: var(--secondary);
124
+ --color-secondary-foreground: var(--secondary-foreground);
125
+ --color-muted: var(--muted);
126
+ --color-muted-foreground: var(--muted-foreground);
127
+ --color-accent: var(--accent);
128
+ --color-accent-foreground: var(--accent-foreground);
129
+ --color-destructive: var(--destructive);
130
+ --color-border: var(--border);
131
+ --color-input: var(--input);
132
+ --color-ring: var(--ring);
133
+ --color-chart-1: var(--chart-1);
134
+ --color-chart-2: var(--chart-2);
135
+ --color-chart-3: var(--chart-3);
136
+ --color-chart-4: var(--chart-4);
137
+ --color-chart-5: var(--chart-5);
138
+ --color-sidebar: var(--sidebar);
139
+ --color-sidebar-foreground: var(--sidebar-foreground);
140
+ --color-sidebar-primary: var(--sidebar-primary);
141
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
142
+ --color-sidebar-accent: var(--sidebar-accent);
143
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
144
+ --color-sidebar-border: var(--sidebar-border);
145
+ --color-sidebar-ring: var(--sidebar-ring);
146
+ --color-atai-neutral: var(--atai-neutral);
147
+ --color-atai-good: var(--atai-good);
148
+ --color-atai-warning: var(--atai-warning);
149
+ --color-atai-critical: var(--atai-critical);
150
+ }
151
+
152
+ /* Base Styles & Semantic HTML Elements */
153
+ @layer base {
154
+ * {
155
+ @apply border-border;
156
+ }
157
+ body {
158
+ @apply bg-background text-foreground font-sans;
159
+ }
160
+ h1 {
161
+ @apply text-primary text-7xl leading-normal font-normal tracking-tighter capitalize;
162
+ }
163
+ h2 {
164
+ @apply text-primary text-4xl leading-tight font-normal tracking-tight;
165
+ }
166
+ h3 {
167
+ @apply text-primary text-3xl leading-normal font-normal tracking-tight;
168
+ }
169
+ h4 {
170
+ @apply text-muted-foreground text-2xl leading-tight font-normal tracking-tight;
171
+ }
172
+ h5 {
173
+ @apply text-muted-foreground text-lg leading-tight font-normal tracking-tight uppercase;
174
+ }
175
+ h6 {
176
+ @apply text-muted-foreground text-base leading-tight font-normal tracking-tight;
177
+ }
178
+ p {
179
+ @apply text-primary text-sm leading-tight tracking-normal;
180
+ }
181
+ small {
182
+ @apply text-primary text-xs leading-tight tracking-normal;
183
+ }
184
+ span {
185
+ @apply text-muted-foreground font-mono text-xs uppercase;
186
+ }
187
+ strong {
188
+ @apply text-primary text-sm leading-relaxed font-medium;
189
+ }
190
+ em {
191
+ @apply text-primary text-sm italic;
192
+ }
193
+ label {
194
+ @apply text-primary text-xs;
195
+ }
196
+ a {
197
+ @apply text-primary cursor-pointer text-sm underline;
198
+ }
199
+ code {
200
+ @apply font-mono text-sm leading-relaxed;
201
+ }
202
+ blockquote {
203
+ @apply border-s-2 ps-6 text-sm italic;
204
+ }
205
+ }
package/tokens.css ADDED
@@ -0,0 +1,111 @@
1
+ /*
2
+ Archetype AI Color Palettes
3
+ Custom brand colors in OKLCH, registered as Tailwind v4 theme tokens.
4
+ Usage: bg-atai-tangerine-500, text-atai-fire-red-600, border-atai-baby-blue-300, etc.
5
+ */
6
+
7
+ @theme {
8
+ /* Tangerine */
9
+ --color-atai-tangerine-50: oklch(0.95 0.032 85.144);
10
+ --color-atai-tangerine-100: oklch(0.894 0.07 85.144);
11
+ --color-atai-tangerine-200: oklch(0.838 0.104 85.144);
12
+ --color-atai-tangerine-300: oklch(0.782 0.097 85.144);
13
+ --color-atai-tangerine-400: oklch(0.726 0.09 85.144);
14
+ --color-atai-tangerine-500: oklch(0.67 0.083 85.144);
15
+ --color-atai-tangerine-600: oklch(0.614 0.076 85.144);
16
+ --color-atai-tangerine-700: oklch(0.558 0.069 85.144);
17
+ --color-atai-tangerine-800: oklch(0.502 0.062 85.144);
18
+ --color-atai-tangerine-900: oklch(0.446 0.055 85.144);
19
+ --color-atai-tangerine-950: oklch(0.39 0.048 85.144);
20
+
21
+ /* Sunshine Yellow */
22
+ --color-atai-sunshine-yellow-50: oklch(0.95 0.18 110.904);
23
+ --color-atai-sunshine-yellow-100: oklch(0.886 0.168 110.904);
24
+ --color-atai-sunshine-yellow-200: oklch(0.822 0.156 110.904);
25
+ --color-atai-sunshine-yellow-300: oklch(0.758 0.144 110.904);
26
+ --color-atai-sunshine-yellow-400: oklch(0.694 0.132 110.904);
27
+ --color-atai-sunshine-yellow-500: oklch(0.63 0.12 110.904);
28
+ --color-atai-sunshine-yellow-600: oklch(0.566 0.107 110.904);
29
+ --color-atai-sunshine-yellow-700: oklch(0.502 0.095 110.904);
30
+ --color-atai-sunshine-yellow-800: oklch(0.438 0.083 110.904);
31
+ --color-atai-sunshine-yellow-900: oklch(0.374 0.071 110.904);
32
+ --color-atai-sunshine-yellow-950: oklch(0.31 0.059 110.904);
33
+
34
+ /* Lime */
35
+ --color-atai-lime-50: oklch(0.95 0.146 123.573);
36
+ --color-atai-lime-100: oklch(0.91 0.225 123.573);
37
+ --color-atai-lime-200: oklch(0.87 0.215 123.573);
38
+ --color-atai-lime-300: oklch(0.83 0.205 123.573);
39
+ --color-atai-lime-400: oklch(0.79 0.195 123.573);
40
+ --color-atai-lime-500: oklch(0.75 0.185 123.573);
41
+ --color-atai-lime-600: oklch(0.71 0.175 123.573);
42
+ --color-atai-lime-700: oklch(0.67 0.165 123.573);
43
+ --color-atai-lime-800: oklch(0.63 0.156 123.573);
44
+ --color-atai-lime-900: oklch(0.59 0.146 123.573);
45
+ --color-atai-lime-950: oklch(0.55 0.136 123.573);
46
+
47
+ /* Screen Green */
48
+ --color-atai-screen-green-50: oklch(0.95 0.073 146.907);
49
+ --color-atai-screen-green-100: oklch(0.886 0.189 146.907);
50
+ --color-atai-screen-green-200: oklch(0.822 0.208 146.907);
51
+ --color-atai-screen-green-300: oklch(0.758 0.192 146.907);
52
+ --color-atai-screen-green-400: oklch(0.694 0.176 146.907);
53
+ --color-atai-screen-green-500: oklch(0.63 0.159 146.907);
54
+ --color-atai-screen-green-600: oklch(0.566 0.143 146.907);
55
+ --color-atai-screen-green-700: oklch(0.502 0.127 146.907);
56
+ --color-atai-screen-green-800: oklch(0.438 0.111 146.907);
57
+ --color-atai-screen-green-900: oklch(0.374 0.095 146.907);
58
+ --color-atai-screen-green-950: oklch(0.31 0.078 146.907);
59
+
60
+ /* Fire Red */
61
+ --color-atai-fire-red-50: oklch(0.95 0.022 25.595);
62
+ --color-atai-fire-red-100: oklch(0.888 0.051 25.595);
63
+ --color-atai-fire-red-200: oklch(0.827 0.084 25.595);
64
+ --color-atai-fire-red-300: oklch(0.765 0.122 25.595);
65
+ --color-atai-fire-red-400: oklch(0.703 0.165 25.595);
66
+ --color-atai-fire-red-500: oklch(0.641 0.214 25.595);
67
+ --color-atai-fire-red-600: oklch(0.58 0.206 25.595);
68
+ --color-atai-fire-red-700: oklch(0.518 0.184 25.595);
69
+ --color-atai-fire-red-800: oklch(0.456 0.162 25.595);
70
+ --color-atai-fire-red-900: oklch(0.395 0.14 25.595);
71
+ --color-atai-fire-red-950: oklch(0.333 0.118 25.595);
72
+
73
+ /* Energy Pink */
74
+ --color-atai-energy-pink-50: oklch(0.95 0.021 5.943);
75
+ --color-atai-energy-pink-100: oklch(0.892 0.049 5.943);
76
+ --color-atai-energy-pink-200: oklch(0.834 0.079 5.943);
77
+ --color-atai-energy-pink-300: oklch(0.776 0.113 5.943);
78
+ --color-atai-energy-pink-400: oklch(0.719 0.152 5.943);
79
+ --color-atai-energy-pink-500: oklch(0.661 0.197 5.943);
80
+ --color-atai-energy-pink-600: oklch(0.603 0.2 5.943);
81
+ --color-atai-energy-pink-700: oklch(0.545 0.18 5.943);
82
+ --color-atai-energy-pink-800: oklch(0.487 0.161 5.943);
83
+ --color-atai-energy-pink-900: oklch(0.429 0.142 5.943);
84
+ --color-atai-energy-pink-950: oklch(0.372 0.123 5.943);
85
+
86
+ /* Cool Purple */
87
+ --color-atai-cool-purple-50: oklch(0.95 0.023 299.333);
88
+ --color-atai-cool-purple-100: oklch(0.892 0.051 299.333);
89
+ --color-atai-cool-purple-200: oklch(0.834 0.08 299.333);
90
+ --color-atai-cool-purple-300: oklch(0.776 0.111 299.333);
91
+ --color-atai-cool-purple-400: oklch(0.718 0.143 299.333);
92
+ --color-atai-cool-purple-500: oklch(0.66 0.177 299.333);
93
+ --color-atai-cool-purple-600: oklch(0.602 0.212 299.333);
94
+ --color-atai-cool-purple-700: oklch(0.544 0.243 299.333);
95
+ --color-atai-cool-purple-800: oklch(0.486 0.217 299.333);
96
+ --color-atai-cool-purple-900: oklch(0.428 0.191 299.333);
97
+ --color-atai-cool-purple-950: oklch(0.37 0.165 299.333);
98
+
99
+ /* Baby Blue */
100
+ --color-atai-baby-blue-50: oklch(0.95 0.021 250.497);
101
+ --color-atai-baby-blue-100: oklch(0.898 0.043 250.497);
102
+ --color-atai-baby-blue-200: oklch(0.846 0.066 250.497);
103
+ --color-atai-baby-blue-300: oklch(0.794 0.091 250.497);
104
+ --color-atai-baby-blue-400: oklch(0.742 0.116 250.497);
105
+ --color-atai-baby-blue-500: oklch(0.69 0.142 250.497);
106
+ --color-atai-baby-blue-600: oklch(0.638 0.154 250.497);
107
+ --color-atai-baby-blue-700: oklch(0.586 0.141 250.497);
108
+ --color-atai-baby-blue-800: oklch(0.534 0.129 250.497);
109
+ --color-atai-baby-blue-900: oklch(0.482 0.116 250.497);
110
+ --color-atai-baby-blue-950: oklch(0.43 0.104 250.497);
111
+ }