@robosophy/tokens 0.0.1 → 0.0.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.
Files changed (7) hide show
  1. package/AGENTS.md +8 -0
  2. package/README.md +44 -0
  3. package/dist/ai-context.md +117 -0
  4. package/dist/cli.js +82 -0
  5. package/dist/tokens.html +746 -0
  6. package/dist/tokens.md +105 -0
  7. package/package.json +8 -1
package/AGENTS.md ADDED
@@ -0,0 +1,8 @@
1
+ # Robosophy Tokens Package Notes
2
+
3
+ - Use `dist/ai-context.md` for agent-facing token rules and inventory.
4
+ - Use `dist/tokens.md` or `dist/tokens.json` to inspect available tokens before creating UI styles.
5
+ - Import `@robosophy/tokens/tokens.css` before using Robosophy CSS variables.
6
+ - Public CSS tokens use the `--rs-` prefix.
7
+ - Do not hardcode hex colors when an equivalent Robosophy token exists.
8
+ - Prefer semantic tokens over primitive palette tokens for component styles.
package/README.md CHANGED
@@ -2,6 +2,14 @@
2
2
 
3
3
  Tokens de diseño de Robosophy.
4
4
 
5
+ ## Instalacion
6
+
7
+ ```sh
8
+ npm install @robosophy/tokens
9
+ ```
10
+
11
+ ## Uso
12
+
5
13
  ```ts
6
14
  import "@robosophy/tokens/tokens.css";
7
15
  import "@robosophy/tokens/tailwind.css";
@@ -9,4 +17,40 @@ import { tokens } from "@robosophy/tokens";
9
17
  import tokensJson from "@robosophy/tokens/tokens.json";
10
18
  ```
11
19
 
20
+ Los tokens CSS publicos usan el prefijo `--rs-`.
21
+
22
+ ```css
23
+ .button {
24
+ background: var(--rs-color-button-primary);
25
+ color: var(--rs-color-text-button-primary);
26
+ }
27
+ ```
28
+
29
+ ## Contexto para agentes de IA
30
+
31
+ El paquete publica contexto dentro de `node_modules/@robosophy/tokens`:
32
+
33
+ - `AGENTS.md`: reglas cortas para agentes.
34
+ - `dist/ai-context.md`: reglas de uso, imports y lista de tokens.
35
+ - `dist/tokens.md`: referencia en Markdown.
36
+ - `dist/tokens.json`: datos estructurados.
37
+
38
+ Para que Codex u otros agentes tengan instrucciones a nivel proyecto, ejecuta:
39
+
40
+ ```sh
41
+ npx robosophy-tokens init
42
+ ```
43
+
44
+ El comando crea o actualiza una seccion marcada en `AGENTS.md` sin sobrescribir otras instrucciones del proyecto.
45
+
46
+ ## Referencia visual
47
+
48
+ Despues de instalar el paquete, puedes abrir:
49
+
50
+ ```txt
51
+ node_modules/@robosophy/tokens/dist/tokens.html
52
+ ```
53
+
54
+ Tambien puedes consultar `@robosophy/tokens/tokens.md`, `@robosophy/tokens/ai-context.md` y `@robosophy/tokens/tokens.json`.
55
+
12
56
  La fuente de verdad está en `src/tokens.ts`. Los archivos de `dist/` son generados.
package/dist/ai-context.md ADDED
@@ -0,0 +1,117 @@
1
+ <!-- AUTO-GENERATED FILE. DO NOT EDIT MANUALLY. -->
2
+ # Robosophy tokens AI context
3
+
4
+ Use this file as the source of truth when generating UI code in projects that depend on `@robosophy/tokens`.
5
+
6
+ ## Rules
7
+
8
+ - Import `@robosophy/tokens/tokens.css` before using Robosophy CSS variables.
9
+ - Use public CSS variables with the `--rs-` prefix.
10
+ - Do not hardcode hex colors when an equivalent Robosophy token exists.
11
+ - Prefer semantic tokens such as `--rs-color-text-primary`, `--rs-color-background-info`, or `--rs-color-button-primary` over primitive palette tokens when styling components.
12
+ - Use primitive palette tokens like `--rs-color-blue-500` mainly for defining new semantic decisions or one-off brand accents.
13
+ - Keep React and Vue package dependencies outside `@robosophy/tokens`.
14
+
15
+ ## Imports
16
+
17
+ ```ts
18
+ import "@robosophy/tokens/tokens.css";
19
+ import "@robosophy/tokens/tailwind.css";
20
+ import { tokens } from "@robosophy/tokens";
21
+ import tokensJson from "@robosophy/tokens/tokens.json";
22
+ ```
23
+
24
+ ## Token inventory
25
+
26
+ ### Color tokens
27
+
28
+ - `--rs-color-blue-50`: `#F0F9FD`
29
+ - `--rs-color-blue-100`: `#E6F6FB`
30
+ - `--rs-color-blue-500`: `#48A0D4`
31
+ - `--rs-color-blue-700`: `#2A719B`
32
+ - `--rs-color-green-100`: `#EDF7E6`
33
+ - `--rs-color-green-500`: `#4EAE01`
34
+ - `--rs-color-navygreen-100`: `#E5F1EA`
35
+ - `--rs-color-navygreen-500`: `#007C2F`
36
+ - `--rs-color-yellow-100`: `#FFF4E6`
37
+ - `--rs-color-yellow-500`: `#FF9001`
38
+ - `--rs-color-red-100`: `#FFF0F1`
39
+ - `--rs-color-red-500`: `#D80115`
40
+ - `--rs-color-darkblue-100`: `#E5ECF5`
41
+ - `--rs-color-darkblue-500`: `#004A9F`
42
+ - `--rs-color-navyblue-100`: `var(--rs-color-darkblue-100)` - Backfilled legacy navyblue reference from the darkblue scale.
43
+ - `--rs-color-navyblue-500`: `var(--rs-color-darkblue-500)` - Backfilled legacy navyblue reference from the darkblue scale.
44
+ - `--rs-color-gray-100`: `#F6F6F6`
45
+ - `--rs-color-gray-300`: `#EEEEEE`
46
+ - `--rs-color-gray-500`: `#D1D1D1`
47
+ - `--rs-color-gray-700`: `#909090`
48
+ - `--rs-color-black-500`: `#000000`
49
+ - `--rs-color-white-500`: `#FFFFFF`
50
+ - `--rs-color-background`: `var(--rs-color-gray-100)`
51
+ - `--rs-color-background-disabled`: `var(--rs-color-gray-100)`
52
+ - `--rs-color-background-caution`: `var(--rs-color-yellow-100)`
53
+ - `--rs-color-background-info`: `var(--rs-color-blue-100)`
54
+ - `--rs-color-surface-primary`: `var(--rs-color-white-500)`
55
+ - `--rs-color-surface-tertiary`: `var(--rs-color-black-500)`
56
+ - `--rs-color-text-primary`: `var(--rs-color-black-500)`
57
+ - `--rs-color-text-secondary`: `var(--rs-color-gray-700)`
58
+ - `--rs-color-text-brand`: `var(--rs-color-blue-500)`
59
+ - `--rs-color-text-brand-blue`: `var(--rs-color-blue-500)`
60
+ - `--rs-color-text-brand-green`: `var(--rs-color-green-500)`
61
+ - `--rs-color-text-brand-yellow`: `var(--rs-color-yellow-500)`
62
+ - `--rs-color-text-brand-red`: `var(--rs-color-red-500)`
63
+ - `--rs-color-text-placeholder`: `var(--rs-color-gray-500)`
64
+ - `--rs-color-text-caution`: `var(--rs-color-yellow-500)`
65
+ - `--rs-color-text-button-primary`: `var(--rs-color-white-500)`
66
+ - `--rs-color-text-button-secondary`: `var(--rs-color-black-500)`
67
+ - `--rs-color-text-button-tertiary`: `var(--rs-color-blue-500)`
68
+ - `--rs-color-text-button-tertiary-hover`: `var(--rs-color-blue-700)`
69
+ - `--rs-color-icon-primary`: `var(--rs-color-blue-500)`
70
+ - `--rs-color-icon-secondary`: `var(--rs-color-black-500)`
71
+ - `--rs-color-icon-button-primary`: `var(--rs-color-white-500)`
72
+ - `--rs-color-icon-button-secondary`: `var(--rs-color-black-500)`
73
+ - `--rs-color-icon-button-tertiary`: `var(--rs-color-blue-500)`
74
+ - `--rs-color-icon-input`: `var(--rs-color-black-500)`
75
+ - `--rs-color-icon-brand-blue`: `var(--rs-color-blue-500)`
76
+ - `--rs-color-icon-brand-green`: `var(--rs-color-green-500)`
77
+ - `--rs-color-icon-brand-yellow`: `var(--rs-color-yellow-500)`
78
+ - `--rs-color-icon-brand-red`: `var(--rs-color-red-500)`
79
+ - `--rs-color-icon-brand-darkblue`: `var(--rs-color-darkblue-500)`
80
+ - `--rs-color-stroke-default`: `var(--rs-color-gray-500)`
81
+ - `--rs-color-stroke-focused`: `var(--rs-color-blue-500)`
82
+ - `--rs-color-stroke-disabled`: `var(--rs-color-gray-100)`
83
+ - `--rs-color-stroke-success`: `var(--rs-color-green-500)`
84
+ - `--rs-color-stroke-caution`: `var(--rs-color-yellow-500)`
85
+ - `--rs-color-stroke-error`: `var(--rs-color-red-500)`
86
+ - `--rs-color-button-primary`: `var(--rs-color-blue-500)`
87
+ - `--rs-color-button-primary-hover`: `var(--rs-color-blue-700)`
88
+ - `--rs-color-button-secondary`: `var(--rs-color-gray-500)`
89
+ - `--rs-color-button-secondary-hover`: `var(--rs-color-gray-700)`
90
+ - `--rs-color-button-blue-surface`: `var(--rs-color-blue-100)`
91
+ - `--rs-color-button-green-surface`: `var(--rs-color-green-100)`
92
+ - `--rs-color-button-yellow-surface`: `var(--rs-color-yellow-100)`
93
+ - `--rs-color-button-red-surface`: `var(--rs-color-red-100)`
94
+
95
+ ### Font tokens
96
+
97
+ - `--rs-font-family`: `'Inter', sans-serif`
98
+
99
+ ### Component tokens
100
+
101
+ - `--rs-pill-bg-brand-blue`: `var(--rs-color-blue-100)`
102
+ - `--rs-pill-color-brand-blue`: `var(--rs-color-blue-500)`
103
+ - `--rs-pill-bg-brand-navyblue`: `var(--rs-color-navyblue-100)` - Legacy token referenced an undefined navyblue scale.
104
+ - `--rs-pill-color-brand-navyblue`: `var(--rs-color-navyblue-500)` - Legacy token referenced an undefined navyblue scale.
105
+ - `--rs-pill-bg-brand-green`: `var(--rs-color-green-100)`
106
+ - `--rs-pill-color-brand-green`: `var(--rs-color-green-500)`
107
+ - `--rs-pill-bg-brand-navygreen`: `var(--rs-color-navygreen-100)`
108
+ - `--rs-pill-color-brand-navygreen`: `var(--rs-color-navygreen-500)`
109
+ - `--rs-pill-bg-brand-red`: `var(--rs-color-red-100)`
110
+ - `--rs-pill-color-brand-red`: `var(--rs-color-red-500)`
111
+ - `--rs-pill-bg-brand-yellow`: `var(--rs-color-yellow-100)`
112
+ - `--rs-pill-color-brand-yellow`: `var(--rs-color-yellow-500)`
113
+ - `--rs-color-sidebar-background`: `var(--rs-color-white-500)`
114
+ - `--rs-color-sidebar-background-active`: `var(--rs-color-blue-100)`
115
+ - `--rs-color-sidebar-background-hover`: `var(--rs-color-blue-100)`
116
+ - `--rs-color-sidebar-stroke`: `var(--rs-color-gray-100)`
117
+ - `--rs-color-sidebar-stroke-active`: `var(--rs-color-blue-500)`
package/dist/cli.js ADDED
@@ -0,0 +1,82 @@
1
+ #!/usr/bin/env node
2
+ import { readFile, writeFile } from "node:fs/promises";
3
+ import { resolve } from "node:path";
4
+
5
+ const startMarker = "<!-- robosophy-tokens:start -->";
6
+ const endMarker = "<!-- robosophy-tokens:end -->";
7
+
8
+ const section = `${startMarker}
9
+ ## Robosophy tokens
10
+
11
+ This project uses \`@robosophy/tokens\`. When creating or editing UI:
12
+
13
+ - Import \`@robosophy/tokens/tokens.css\` before using Robosophy CSS variables.
14
+ - Use public CSS variables with the \`--rs-\` prefix.
15
+ - Do not hardcode hex colors when an equivalent Robosophy token exists.
16
+ - Prefer semantic tokens over primitive palette tokens for component styles.
17
+ - Check the installed token context before inventing new design values.
18
+
19
+ Installed references:
20
+
21
+ - \`node_modules/@robosophy/tokens/dist/ai-context.md\`
22
+ - \`node_modules/@robosophy/tokens/dist/tokens.md\`
23
+ - \`node_modules/@robosophy/tokens/dist/tokens.json\`
24
+ ${endMarker}`;
25
+
26
+ function usage() {
27
+ return `Usage: robosophy-tokens init
28
+
29
+ Commands:
30
+ init Create or update the Robosophy section in AGENTS.md
31
+ `;
32
+ }
33
+
34
+ async function readText(path) {
35
+ try {
36
+ return await readFile(path, "utf8");
37
+ } catch (error) {
38
+ if (error && error.code === "ENOENT") {
39
+ return null;
40
+ }
41
+
42
+ throw error;
43
+ }
44
+ }
45
+
46
+ function updateAgentsContent(current) {
47
+ if (current === null) {
48
+ return `# Project instructions
49
+
50
+ ${section}
51
+ `;
52
+ }
53
+
54
+ const markerPattern = new RegExp(`${startMarker}[\\s\\S]*?${endMarker}`);
55
+
56
+ if (markerPattern.test(current)) {
57
+ return current.replace(markerPattern, section);
58
+ }
59
+
60
+ const trimmed = current.trimEnd();
61
+ const prefix = trimmed.length > 0 ? `${trimmed}\n\n` : "";
62
+
63
+ return `${prefix}${section}\n`;
64
+ }
65
+
66
+ async function init() {
67
+ const agentsPath = resolve(process.cwd(), "AGENTS.md");
68
+ const current = await readText(agentsPath);
69
+ const next = updateAgentsContent(current);
70
+
71
+ await writeFile(agentsPath, next);
72
+ console.log(current === null ? "Created AGENTS.md with Robosophy token context." : "Updated AGENTS.md with Robosophy token context.");
73
+ }
74
+
75
+ const [command] = process.argv.slice(2);
76
+
77
+ if (command === "init") {
78
+ await init();
79
+ } else {
80
+ console.error(usage());
81
+ process.exitCode = command === undefined || command === "--help" || command === "-h" ? 0 : 1;
82
+ }
package/dist/tokens.html ADDED
@@ -0,0 +1,746 @@
1
+ <!doctype html>
2
+ <!-- AUTO-GENERATED FILE. DO NOT EDIT MANUALLY. -->
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <title>Robosophy tokens</title>
8
+ <style>
9
+ :root {
10
+ --rs-color-blue-50: #F0F9FD;
11
+ --rs-color-blue-100: #E6F6FB;
12
+ --rs-color-blue-500: #48A0D4;
13
+ --rs-color-blue-700: #2A719B;
14
+ --rs-color-green-100: #EDF7E6;
15
+ --rs-color-green-500: #4EAE01;
16
+ --rs-color-navygreen-100: #E5F1EA;
17
+ --rs-color-navygreen-500: #007C2F;
18
+ --rs-color-yellow-100: #FFF4E6;
19
+ --rs-color-yellow-500: #FF9001;
20
+ --rs-color-red-100: #FFF0F1;
21
+ --rs-color-red-500: #D80115;
22
+ --rs-color-darkblue-100: #E5ECF5;
23
+ --rs-color-darkblue-500: #004A9F;
24
+ --rs-color-navyblue-100: var(--rs-color-darkblue-100);
25
+ --rs-color-navyblue-500: var(--rs-color-darkblue-500);
26
+ --rs-color-gray-100: #F6F6F6;
27
+ --rs-color-gray-300: #EEEEEE;
28
+ --rs-color-gray-500: #D1D1D1;
29
+ --rs-color-gray-700: #909090;
30
+ --rs-color-black-500: #000000;
31
+ --rs-color-white-500: #FFFFFF;
32
+ --rs-font-family: 'Inter', sans-serif;
33
+ --rs-color-background: var(--rs-color-gray-100);
34
+ --rs-color-background-disabled: var(--rs-color-gray-100);
35
+ --rs-color-background-caution: var(--rs-color-yellow-100);
36
+ --rs-color-background-info: var(--rs-color-blue-100);
37
+ --rs-color-surface-primary: var(--rs-color-white-500);
38
+ --rs-color-surface-tertiary: var(--rs-color-black-500);
39
+ --rs-color-text-primary: var(--rs-color-black-500);
40
+ --rs-color-text-secondary: var(--rs-color-gray-700);
41
+ --rs-color-text-brand: var(--rs-color-blue-500);
42
+ --rs-color-text-brand-blue: var(--rs-color-blue-500);
43
+ --rs-color-text-brand-green: var(--rs-color-green-500);
44
+ --rs-color-text-brand-yellow: var(--rs-color-yellow-500);
45
+ --rs-color-text-brand-red: var(--rs-color-red-500);
46
+ --rs-color-text-placeholder: var(--rs-color-gray-500);
47
+ --rs-color-text-caution: var(--rs-color-yellow-500);
48
+ --rs-color-text-button-primary: var(--rs-color-white-500);
49
+ --rs-color-text-button-secondary: var(--rs-color-black-500);
50
+ --rs-color-text-button-tertiary: var(--rs-color-blue-500);
51
+ --rs-color-text-button-tertiary-hover: var(--rs-color-blue-700);
52
+ --rs-color-icon-primary: var(--rs-color-blue-500);
53
+ --rs-color-icon-secondary: var(--rs-color-black-500);
54
+ --rs-color-icon-button-primary: var(--rs-color-white-500);
55
+ --rs-color-icon-button-secondary: var(--rs-color-black-500);
56
+ --rs-color-icon-button-tertiary: var(--rs-color-blue-500);
57
+ --rs-color-icon-input: var(--rs-color-black-500);
58
+ --rs-color-icon-brand-blue: var(--rs-color-blue-500);
59
+ --rs-color-icon-brand-green: var(--rs-color-green-500);
60
+ --rs-color-icon-brand-yellow: var(--rs-color-yellow-500);
61
+ --rs-color-icon-brand-red: var(--rs-color-red-500);
62
+ --rs-color-icon-brand-darkblue: var(--rs-color-darkblue-500);
63
+ --rs-color-stroke-default: var(--rs-color-gray-500);
64
+ --rs-color-stroke-focused: var(--rs-color-blue-500);
65
+ --rs-color-stroke-disabled: var(--rs-color-gray-100);
66
+ --rs-color-stroke-success: var(--rs-color-green-500);
67
+ --rs-color-stroke-caution: var(--rs-color-yellow-500);
68
+ --rs-color-stroke-error: var(--rs-color-red-500);
69
+ --rs-color-button-primary: var(--rs-color-blue-500);
70
+ --rs-color-button-primary-hover: var(--rs-color-blue-700);
71
+ --rs-color-button-secondary: var(--rs-color-gray-500);
72
+ --rs-color-button-secondary-hover: var(--rs-color-gray-700);
73
+ --rs-color-button-blue-surface: var(--rs-color-blue-100);
74
+ --rs-color-button-green-surface: var(--rs-color-green-100);
75
+ --rs-color-button-yellow-surface: var(--rs-color-yellow-100);
76
+ --rs-color-button-red-surface: var(--rs-color-red-100);
77
+ --rs-pill-bg-brand-blue: var(--rs-color-blue-100);
78
+ --rs-pill-color-brand-blue: var(--rs-color-blue-500);
79
+ --rs-pill-bg-brand-navyblue: var(--rs-color-navyblue-100);
80
+ --rs-pill-color-brand-navyblue: var(--rs-color-navyblue-500);
81
+ --rs-pill-bg-brand-green: var(--rs-color-green-100);
82
+ --rs-pill-color-brand-green: var(--rs-color-green-500);
83
+ --rs-pill-bg-brand-navygreen: var(--rs-color-navygreen-100);
84
+ --rs-pill-color-brand-navygreen: var(--rs-color-navygreen-500);
85
+ --rs-pill-bg-brand-red: var(--rs-color-red-100);
86
+ --rs-pill-color-brand-red: var(--rs-color-red-500);
87
+ --rs-pill-bg-brand-yellow: var(--rs-color-yellow-100);
88
+ --rs-pill-color-brand-yellow: var(--rs-color-yellow-500);
89
+ --rs-color-sidebar-background: var(--rs-color-white-500);
90
+ --rs-color-sidebar-background-active: var(--rs-color-blue-100);
91
+ --rs-color-sidebar-background-hover: var(--rs-color-blue-100);
92
+ --rs-color-sidebar-stroke: var(--rs-color-gray-100);
93
+ --rs-color-sidebar-stroke-active: var(--rs-color-blue-500);
94
+ --page-background: #f7f8fa;
95
+ --page-surface: #ffffff;
96
+ --page-text: #1f2933;
97
+ --page-muted: #667085;
98
+ --page-border: #d9dee7;
99
+ }
100
+
101
+ * {
102
+ box-sizing: border-box;
103
+ }
104
+
105
+ body {
106
+ margin: 0;
107
+ background: var(--page-background);
108
+ color: var(--page-text);
109
+ font-family: var(--rs-font-family);
110
+ line-height: 1.5;
111
+ }
112
+
113
+ header,
114
+ main {
115
+ width: min(1120px, calc(100% - 32px));
116
+ margin: 0 auto;
117
+ }
118
+
119
+ header {
120
+ padding: 48px 0 24px;
121
+ }
122
+
123
+ h1 {
124
+ margin: 0 0 12px;
125
+ font-size: 32px;
126
+ line-height: 1.15;
127
+ }
128
+
129
+ p {
130
+ margin: 0;
131
+ color: var(--page-muted);
132
+ }
133
+
134
+ section {
135
+ margin: 24px 0;
136
+ }
137
+
138
+ h2 {
139
+ margin: 0 0 12px;
140
+ font-size: 20px;
141
+ }
142
+
143
+ table {
144
+ width: 100%;
145
+ border-collapse: collapse;
146
+ background: var(--page-surface);
147
+ border: 1px solid var(--page-border);
148
+ }
149
+
150
+ th,
151
+ td {
152
+ padding: 12px;
153
+ border-bottom: 1px solid var(--page-border);
154
+ text-align: left;
155
+ vertical-align: middle;
156
+ }
157
+
158
+ th {
159
+ color: var(--page-muted);
160
+ font-size: 13px;
161
+ font-weight: 600;
162
+ }
163
+
164
+ code {
165
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
166
+ font-size: 13px;
167
+ }
168
+
169
+ .swatch {
170
+ display: inline-block;
171
+ width: 28px;
172
+ height: 28px;
173
+ margin-right: 10px;
174
+ border: 1px solid var(--page-border);
175
+ vertical-align: middle;
176
+ }
177
+
178
+ @media (max-width: 760px) {
179
+ table,
180
+ thead,
181
+ tbody,
182
+ tr,
183
+ th,
184
+ td {
185
+ display: block;
186
+ }
187
+
188
+ thead {
189
+ display: none;
190
+ }
191
+
192
+ tr {
193
+ border-bottom: 1px solid var(--page-border);
194
+ }
195
+
196
+ td {
197
+ border-bottom: 0;
198
+ }
199
+ }
200
+ </style>
201
+ </head>
202
+ <body>
203
+ <header>
204
+ <h1>Robosophy tokens</h1>
205
+ <p>Generated from <code>packages/tokens/src/tokens.ts</code>. Public CSS variables use the <code>--rs-</code> prefix.</p>
206
+ </header>
207
+ <main>
208
+ <section id="color">
209
+ <h2>Color tokens</h2>
210
+ <table>
211
+ <thead>
212
+ <tr><th>Token</th><th>CSS variable</th><th>Value</th><th>Description</th></tr>
213
+ </thead>
214
+ <tbody>
215
+ <tr>
216
+ <td><span class="swatch" style="background: var(--rs-color-blue-50);"></span><code>color-blue-50</code></td>
217
+ <td><code>--rs-color-blue-50</code></td>
218
+ <td><code>#F0F9FD</code></td>
219
+ <td></td>
220
+ </tr>
221
+ <tr>
222
+ <td><span class="swatch" style="background: var(--rs-color-blue-100);"></span><code>color-blue-100</code></td>
223
+ <td><code>--rs-color-blue-100</code></td>
224
+ <td><code>#E6F6FB</code></td>
225
+ <td></td>
226
+ </tr>
227
+ <tr>
228
+ <td><span class="swatch" style="background: var(--rs-color-blue-500);"></span><code>color-blue-500</code></td>
229
+ <td><code>--rs-color-blue-500</code></td>
230
+ <td><code>#48A0D4</code></td>
231
+ <td></td>
232
+ </tr>
233
+ <tr>
234
+ <td><span class="swatch" style="background: var(--rs-color-blue-700);"></span><code>color-blue-700</code></td>
235
+ <td><code>--rs-color-blue-700</code></td>
236
+ <td><code>#2A719B</code></td>
237
+ <td></td>
238
+ </tr>
239
+ <tr>
240
+ <td><span class="swatch" style="background: var(--rs-color-green-100);"></span><code>color-green-100</code></td>
241
+ <td><code>--rs-color-green-100</code></td>
242
+ <td><code>#EDF7E6</code></td>
243
+ <td></td>
244
+ </tr>
245
+ <tr>
246
+ <td><span class="swatch" style="background: var(--rs-color-green-500);"></span><code>color-green-500</code></td>
247
+ <td><code>--rs-color-green-500</code></td>
248
+ <td><code>#4EAE01</code></td>
249
+ <td></td>
250
+ </tr>
251
+ <tr>
252
+ <td><span class="swatch" style="background: var(--rs-color-navygreen-100);"></span><code>color-navygreen-100</code></td>
253
+ <td><code>--rs-color-navygreen-100</code></td>
254
+ <td><code>#E5F1EA</code></td>
255
+ <td></td>
256
+ </tr>
257
+ <tr>
258
+ <td><span class="swatch" style="background: var(--rs-color-navygreen-500);"></span><code>color-navygreen-500</code></td>
259
+ <td><code>--rs-color-navygreen-500</code></td>
260
+ <td><code>#007C2F</code></td>
261
+ <td></td>
262
+ </tr>
263
+ <tr>
264
+ <td><span class="swatch" style="background: var(--rs-color-yellow-100);"></span><code>color-yellow-100</code></td>
265
+ <td><code>--rs-color-yellow-100</code></td>
266
+ <td><code>#FFF4E6</code></td>
267
+ <td></td>
268
+ </tr>
269
+ <tr>
270
+ <td><span class="swatch" style="background: var(--rs-color-yellow-500);"></span><code>color-yellow-500</code></td>
271
+ <td><code>--rs-color-yellow-500</code></td>
272
+ <td><code>#FF9001</code></td>
273
+ <td></td>
274
+ </tr>
275
+ <tr>
276
+ <td><span class="swatch" style="background: var(--rs-color-red-100);"></span><code>color-red-100</code></td>
277
+ <td><code>--rs-color-red-100</code></td>
278
+ <td><code>#FFF0F1</code></td>
279
+ <td></td>
280
+ </tr>
281
+ <tr>
282
+ <td><span class="swatch" style="background: var(--rs-color-red-500);"></span><code>color-red-500</code></td>
283
+ <td><code>--rs-color-red-500</code></td>
284
+ <td><code>#D80115</code></td>
285
+ <td></td>
286
+ </tr>
287
+ <tr>
288
+ <td><span class="swatch" style="background: var(--rs-color-darkblue-100);"></span><code>color-darkblue-100</code></td>
289
+ <td><code>--rs-color-darkblue-100</code></td>
290
+ <td><code>#E5ECF5</code></td>
291
+ <td></td>
292
+ </tr>
293
+ <tr>
294
+ <td><span class="swatch" style="background: var(--rs-color-darkblue-500);"></span><code>color-darkblue-500</code></td>
295
+ <td><code>--rs-color-darkblue-500</code></td>
296
+ <td><code>#004A9F</code></td>
297
+ <td></td>
298
+ </tr>
299
+ <tr>
300
+ <td><span class="swatch" style="background: var(--rs-color-navyblue-100);"></span><code>color-navyblue-100</code></td>
301
+ <td><code>--rs-color-navyblue-100</code></td>
302
+ <td><code>var(--rs-color-darkblue-100)</code></td>
303
+ <td>Backfilled legacy navyblue reference from the darkblue scale.</td>
304
+ </tr>
305
+ <tr>
306
+ <td><span class="swatch" style="background: var(--rs-color-navyblue-500);"></span><code>color-navyblue-500</code></td>
307
+ <td><code>--rs-color-navyblue-500</code></td>
308
+ <td><code>var(--rs-color-darkblue-500)</code></td>
309
+ <td>Backfilled legacy navyblue reference from the darkblue scale.</td>
310
+ </tr>
311
+ <tr>
312
+ <td><span class="swatch" style="background: var(--rs-color-gray-100);"></span><code>color-gray-100</code></td>
313
+ <td><code>--rs-color-gray-100</code></td>
314
+ <td><code>#F6F6F6</code></td>
315
+ <td></td>
316
+ </tr>
317
+ <tr>
318
+ <td><span class="swatch" style="background: var(--rs-color-gray-300);"></span><code>color-gray-300</code></td>
319
+ <td><code>--rs-color-gray-300</code></td>
320
+ <td><code>#EEEEEE</code></td>
321
+ <td></td>
322
+ </tr>
323
+ <tr>
324
+ <td><span class="swatch" style="background: var(--rs-color-gray-500);"></span><code>color-gray-500</code></td>
325
+ <td><code>--rs-color-gray-500</code></td>
326
+ <td><code>#D1D1D1</code></td>
327
+ <td></td>
328
+ </tr>
329
+ <tr>
330
+ <td><span class="swatch" style="background: var(--rs-color-gray-700);"></span><code>color-gray-700</code></td>
331
+ <td><code>--rs-color-gray-700</code></td>
332
+ <td><code>#909090</code></td>
333
+ <td></td>
334
+ </tr>
335
+ <tr>
336
+ <td><span class="swatch" style="background: var(--rs-color-black-500);"></span><code>color-black-500</code></td>
337
+ <td><code>--rs-color-black-500</code></td>
338
+ <td><code>#000000</code></td>
339
+ <td></td>
340
+ </tr>
341
+ <tr>
342
+ <td><span class="swatch" style="background: var(--rs-color-white-500);"></span><code>color-white-500</code></td>
343
+ <td><code>--rs-color-white-500</code></td>
344
+ <td><code>#FFFFFF</code></td>
345
+ <td></td>
346
+ </tr>
347
+ <tr>
348
+ <td><span class="swatch" style="background: var(--rs-color-background);"></span><code>color-background</code></td>
349
+ <td><code>--rs-color-background</code></td>
350
+ <td><code>var(--rs-color-gray-100)</code></td>
351
+ <td></td>
352
+ </tr>
353
+ <tr>
354
+ <td><span class="swatch" style="background: var(--rs-color-background-disabled);"></span><code>color-background-disabled</code></td>
355
+ <td><code>--rs-color-background-disabled</code></td>
356
+ <td><code>var(--rs-color-gray-100)</code></td>
357
+ <td></td>
358
+ </tr>
359
+ <tr>
360
+ <td><span class="swatch" style="background: var(--rs-color-background-caution);"></span><code>color-background-caution</code></td>
361
+ <td><code>--rs-color-background-caution</code></td>
362
+ <td><code>var(--rs-color-yellow-100)</code></td>
363
+ <td></td>
364
+ </tr>
365
+ <tr>
366
+ <td><span class="swatch" style="background: var(--rs-color-background-info);"></span><code>color-background-info</code></td>
367
+ <td><code>--rs-color-background-info</code></td>
368
+ <td><code>var(--rs-color-blue-100)</code></td>
369
+ <td></td>
370
+ </tr>
371
+ <tr>
372
+ <td><span class="swatch" style="background: var(--rs-color-surface-primary);"></span><code>color-surface-primary</code></td>
373
+ <td><code>--rs-color-surface-primary</code></td>
374
+ <td><code>var(--rs-color-white-500)</code></td>
375
+ <td></td>
376
+ </tr>
377
+ <tr>
378
+ <td><span class="swatch" style="background: var(--rs-color-surface-tertiary);"></span><code>color-surface-tertiary</code></td>
379
+ <td><code>--rs-color-surface-tertiary</code></td>
380
+ <td><code>var(--rs-color-black-500)</code></td>
381
+ <td></td>
382
+ </tr>
383
+ <tr>
384
+ <td><span class="swatch" style="background: var(--rs-color-text-primary);"></span><code>color-text-primary</code></td>
385
+ <td><code>--rs-color-text-primary</code></td>
386
+ <td><code>var(--rs-color-black-500)</code></td>
387
+ <td></td>
388
+ </tr>
389
+ <tr>
390
+ <td><span class="swatch" style="background: var(--rs-color-text-secondary);"></span><code>color-text-secondary</code></td>
391
+ <td><code>--rs-color-text-secondary</code></td>
392
+ <td><code>var(--rs-color-gray-700)</code></td>
393
+ <td></td>
394
+ </tr>
395
+ <tr>
396
+ <td><span class="swatch" style="background: var(--rs-color-text-brand);"></span><code>color-text-brand</code></td>
397
+ <td><code>--rs-color-text-brand</code></td>
398
+ <td><code>var(--rs-color-blue-500)</code></td>
399
+ <td></td>
400
+ </tr>
401
+ <tr>
402
+ <td><span class="swatch" style="background: var(--rs-color-text-brand-blue);"></span><code>color-text-brand-blue</code></td>
403
+ <td><code>--rs-color-text-brand-blue</code></td>
404
+ <td><code>var(--rs-color-blue-500)</code></td>
405
+ <td></td>
406
+ </tr>
407
+ <tr>
408
+ <td><span class="swatch" style="background: var(--rs-color-text-brand-green);"></span><code>color-text-brand-green</code></td>
409
+ <td><code>--rs-color-text-brand-green</code></td>
410
+ <td><code>var(--rs-color-green-500)</code></td>
411
+ <td></td>
412
+ </tr>
413
+ <tr>
414
+ <td><span class="swatch" style="background: var(--rs-color-text-brand-yellow);"></span><code>color-text-brand-yellow</code></td>
415
+ <td><code>--rs-color-text-brand-yellow</code></td>
416
+ <td><code>var(--rs-color-yellow-500)</code></td>
417
+ <td></td>
418
+ </tr>
419
+ <tr>
420
+ <td><span class="swatch" style="background: var(--rs-color-text-brand-red);"></span><code>color-text-brand-red</code></td>
421
+ <td><code>--rs-color-text-brand-red</code></td>
422
+ <td><code>var(--rs-color-red-500)</code></td>
423
+ <td></td>
424
+ </tr>
425
+ <tr>
426
+ <td><span class="swatch" style="background: var(--rs-color-text-placeholder);"></span><code>color-text-placeholder</code></td>
427
+ <td><code>--rs-color-text-placeholder</code></td>
428
+ <td><code>var(--rs-color-gray-500)</code></td>
429
+ <td></td>
430
+ </tr>
431
+ <tr>
432
+ <td><span class="swatch" style="background: var(--rs-color-text-caution);"></span><code>color-text-caution</code></td>
433
+ <td><code>--rs-color-text-caution</code></td>
434
+ <td><code>var(--rs-color-yellow-500)</code></td>
435
+ <td></td>
436
+ </tr>
437
+ <tr>
438
+ <td><span class="swatch" style="background: var(--rs-color-text-button-primary);"></span><code>color-text-button-primary</code></td>
439
+ <td><code>--rs-color-text-button-primary</code></td>
440
+ <td><code>var(--rs-color-white-500)</code></td>
441
+ <td></td>
442
+ </tr>
443
+ <tr>
444
+ <td><span class="swatch" style="background: var(--rs-color-text-button-secondary);"></span><code>color-text-button-secondary</code></td>
445
+ <td><code>--rs-color-text-button-secondary</code></td>
446
+ <td><code>var(--rs-color-black-500)</code></td>
447
+ <td></td>
448
+ </tr>
449
+ <tr>
450
+ <td><span class="swatch" style="background: var(--rs-color-text-button-tertiary);"></span><code>color-text-button-tertiary</code></td>
451
+ <td><code>--rs-color-text-button-tertiary</code></td>
452
+ <td><code>var(--rs-color-blue-500)</code></td>
453
+ <td></td>
454
+ </tr>
455
+ <tr>
456
+ <td><span class="swatch" style="background: var(--rs-color-text-button-tertiary-hover);"></span><code>color-text-button-tertiary-hover</code></td>
457
+ <td><code>--rs-color-text-button-tertiary-hover</code></td>
458
+ <td><code>var(--rs-color-blue-700)</code></td>
459
+ <td></td>
460
+ </tr>
461
+ <tr>
462
+ <td><span class="swatch" style="background: var(--rs-color-icon-primary);"></span><code>color-icon-primary</code></td>
463
+ <td><code>--rs-color-icon-primary</code></td>
464
+ <td><code>var(--rs-color-blue-500)</code></td>
465
+ <td></td>
466
+ </tr>
467
+ <tr>
468
+ <td><span class="swatch" style="background: var(--rs-color-icon-secondary);"></span><code>color-icon-secondary</code></td>
469
+ <td><code>--rs-color-icon-secondary</code></td>
470
+ <td><code>var(--rs-color-black-500)</code></td>
471
+ <td></td>
472
+ </tr>
473
+ <tr>
474
+ <td><span class="swatch" style="background: var(--rs-color-icon-button-primary);"></span><code>color-icon-button-primary</code></td>
475
+ <td><code>--rs-color-icon-button-primary</code></td>
476
+ <td><code>var(--rs-color-white-500)</code></td>
477
+ <td></td>
478
+ </tr>
479
+ <tr>
480
+ <td><span class="swatch" style="background: var(--rs-color-icon-button-secondary);"></span><code>color-icon-button-secondary</code></td>
481
+ <td><code>--rs-color-icon-button-secondary</code></td>
482
+ <td><code>var(--rs-color-black-500)</code></td>
483
+ <td></td>
484
+ </tr>
485
+ <tr>
486
+ <td><span class="swatch" style="background: var(--rs-color-icon-button-tertiary);"></span><code>color-icon-button-tertiary</code></td>
487
+ <td><code>--rs-color-icon-button-tertiary</code></td>
488
+ <td><code>var(--rs-color-blue-500)</code></td>
489
+ <td></td>
490
+ </tr>
491
+ <tr>
492
+ <td><span class="swatch" style="background: var(--rs-color-icon-input);"></span><code>color-icon-input</code></td>
493
+ <td><code>--rs-color-icon-input</code></td>
494
+ <td><code>var(--rs-color-black-500)</code></td>
495
+ <td></td>
496
+ </tr>
497
+ <tr>
498
+ <td><span class="swatch" style="background: var(--rs-color-icon-brand-blue);"></span><code>color-icon-brand-blue</code></td>
499
+ <td><code>--rs-color-icon-brand-blue</code></td>
500
+ <td><code>var(--rs-color-blue-500)</code></td>
501
+ <td></td>
502
+ </tr>
503
+ <tr>
504
+ <td><span class="swatch" style="background: var(--rs-color-icon-brand-green);"></span><code>color-icon-brand-green</code></td>
505
+ <td><code>--rs-color-icon-brand-green</code></td>
506
+ <td><code>var(--rs-color-green-500)</code></td>
507
+ <td></td>
508
+ </tr>
509
+ <tr>
510
+ <td><span class="swatch" style="background: var(--rs-color-icon-brand-yellow);"></span><code>color-icon-brand-yellow</code></td>
511
+ <td><code>--rs-color-icon-brand-yellow</code></td>
512
+ <td><code>var(--rs-color-yellow-500)</code></td>
513
+ <td></td>
514
+ </tr>
515
+ <tr>
516
+ <td><span class="swatch" style="background: var(--rs-color-icon-brand-red);"></span><code>color-icon-brand-red</code></td>
517
+ <td><code>--rs-color-icon-brand-red</code></td>
518
+ <td><code>var(--rs-color-red-500)</code></td>
519
+ <td></td>
520
+ </tr>
521
+ <tr>
522
+ <td><span class="swatch" style="background: var(--rs-color-icon-brand-darkblue);"></span><code>color-icon-brand-darkblue</code></td>
523
+ <td><code>--rs-color-icon-brand-darkblue</code></td>
524
+ <td><code>var(--rs-color-darkblue-500)</code></td>
525
+ <td></td>
526
+ </tr>
527
+ <tr>
528
+ <td><span class="swatch" style="background: var(--rs-color-stroke-default);"></span><code>color-stroke-default</code></td>
529
+ <td><code>--rs-color-stroke-default</code></td>
530
+ <td><code>var(--rs-color-gray-500)</code></td>
531
+ <td></td>
532
+ </tr>
533
+ <tr>
534
+ <td><span class="swatch" style="background: var(--rs-color-stroke-focused);"></span><code>color-stroke-focused</code></td>
535
+ <td><code>--rs-color-stroke-focused</code></td>
536
+ <td><code>var(--rs-color-blue-500)</code></td>
537
+ <td></td>
538
+ </tr>
539
+ <tr>
540
+ <td><span class="swatch" style="background: var(--rs-color-stroke-disabled);"></span><code>color-stroke-disabled</code></td>
541
+ <td><code>--rs-color-stroke-disabled</code></td>
542
+ <td><code>var(--rs-color-gray-100)</code></td>
543
+ <td></td>
544
+ </tr>
545
+ <tr>
546
+ <td><span class="swatch" style="background: var(--rs-color-stroke-success);"></span><code>color-stroke-success</code></td>
547
+ <td><code>--rs-color-stroke-success</code></td>
548
+ <td><code>var(--rs-color-green-500)</code></td>
549
+ <td></td>
550
+ </tr>
551
+ <tr>
552
+ <td><span class="swatch" style="background: var(--rs-color-stroke-caution);"></span><code>color-stroke-caution</code></td>
553
+ <td><code>--rs-color-stroke-caution</code></td>
554
+ <td><code>var(--rs-color-yellow-500)</code></td>
555
+ <td></td>
556
+ </tr>
557
+ <tr>
558
+ <td><span class="swatch" style="background: var(--rs-color-stroke-error);"></span><code>color-stroke-error</code></td>
559
+ <td><code>--rs-color-stroke-error</code></td>
560
+ <td><code>var(--rs-color-red-500)</code></td>
561
+ <td></td>
562
+ </tr>
563
+ <tr>
564
+ <td><span class="swatch" style="background: var(--rs-color-button-primary);"></span><code>color-button-primary</code></td>
565
+ <td><code>--rs-color-button-primary</code></td>
566
+ <td><code>var(--rs-color-blue-500)</code></td>
567
+ <td></td>
568
+ </tr>
569
+ <tr>
570
+ <td><span class="swatch" style="background: var(--rs-color-button-primary-hover);"></span><code>color-button-primary-hover</code></td>
571
+ <td><code>--rs-color-button-primary-hover</code></td>
572
+ <td><code>var(--rs-color-blue-700)</code></td>
573
+ <td></td>
574
+ </tr>
575
+ <tr>
576
+ <td><span class="swatch" style="background: var(--rs-color-button-secondary);"></span><code>color-button-secondary</code></td>
577
+ <td><code>--rs-color-button-secondary</code></td>
578
+ <td><code>var(--rs-color-gray-500)</code></td>
579
+ <td></td>
580
+ </tr>
581
+ <tr>
582
+ <td><span class="swatch" style="background: var(--rs-color-button-secondary-hover);"></span><code>color-button-secondary-hover</code></td>
583
+ <td><code>--rs-color-button-secondary-hover</code></td>
584
+ <td><code>var(--rs-color-gray-700)</code></td>
585
+ <td></td>
586
+ </tr>
587
+ <tr>
588
+ <td><span class="swatch" style="background: var(--rs-color-button-blue-surface);"></span><code>color-button-blue-surface</code></td>
589
+ <td><code>--rs-color-button-blue-surface</code></td>
590
+ <td><code>var(--rs-color-blue-100)</code></td>
591
+ <td></td>
592
+ </tr>
593
+ <tr>
594
+ <td><span class="swatch" style="background: var(--rs-color-button-green-surface);"></span><code>color-button-green-surface</code></td>
595
+ <td><code>--rs-color-button-green-surface</code></td>
596
+ <td><code>var(--rs-color-green-100)</code></td>
597
+ <td></td>
598
+ </tr>
599
+ <tr>
600
+ <td><span class="swatch" style="background: var(--rs-color-button-yellow-surface);"></span><code>color-button-yellow-surface</code></td>
601
+ <td><code>--rs-color-button-yellow-surface</code></td>
602
+ <td><code>var(--rs-color-yellow-100)</code></td>
603
+ <td></td>
604
+ </tr>
605
+ <tr>
606
+ <td><span class="swatch" style="background: var(--rs-color-button-red-surface);"></span><code>color-button-red-surface</code></td>
607
+ <td><code>--rs-color-button-red-surface</code></td>
608
+ <td><code>var(--rs-color-red-100)</code></td>
609
+ <td></td>
610
+ </tr>
611
+ </tbody>
612
+ </table>
613
+ </section>
614
+
615
+ <section id="font">
616
+ <h2>Font tokens</h2>
617
+ <table>
618
+ <thead>
619
+ <tr><th>Token</th><th>CSS variable</th><th>Value</th><th>Description</th></tr>
620
+ </thead>
621
+ <tbody>
622
+ <tr>
623
+ <td><code>font-family</code></td>
624
+ <td><code>--rs-font-family</code></td>
625
+ <td><code>'Inter', sans-serif</code></td>
626
+ <td></td>
627
+ </tr>
628
+ </tbody>
629
+ </table>
630
+ </section>
631
+
632
+ <section id="component">
633
+ <h2>Component tokens</h2>
634
+ <table>
635
+ <thead>
636
+ <tr><th>Token</th><th>CSS variable</th><th>Value</th><th>Description</th></tr>
637
+ </thead>
638
+ <tbody>
639
+ <tr>
640
+ <td><span class="swatch" style="background: var(--rs-pill-bg-brand-blue);"></span><code>pill-bg-brand-blue</code></td>
641
+ <td><code>--rs-pill-bg-brand-blue</code></td>
642
+ <td><code>var(--rs-color-blue-100)</code></td>
643
+ <td></td>
644
+ </tr>
645
+ <tr>
646
+ <td><span class="swatch" style="background: var(--rs-pill-color-brand-blue);"></span><code>pill-color-brand-blue</code></td>
647
+ <td><code>--rs-pill-color-brand-blue</code></td>
648
+ <td><code>var(--rs-color-blue-500)</code></td>
649
+ <td></td>
650
+ </tr>
651
+ <tr>
652
+ <td><span class="swatch" style="background: var(--rs-pill-bg-brand-navyblue);"></span><code>pill-bg-brand-navyblue</code></td>
653
+ <td><code>--rs-pill-bg-brand-navyblue</code></td>
654
+ <td><code>var(--rs-color-navyblue-100)</code></td>
655
+ <td>Legacy token referenced an undefined navyblue scale.</td>
656
+ </tr>
657
+ <tr>
658
+ <td><span class="swatch" style="background: var(--rs-pill-color-brand-navyblue);"></span><code>pill-color-brand-navyblue</code></td>
659
+ <td><code>--rs-pill-color-brand-navyblue</code></td>
660
+ <td><code>var(--rs-color-navyblue-500)</code></td>
661
+ <td>Legacy token referenced an undefined navyblue scale.</td>
662
+ </tr>
663
+ <tr>
664
+ <td><span class="swatch" style="background: var(--rs-pill-bg-brand-green);"></span><code>pill-bg-brand-green</code></td>
665
+ <td><code>--rs-pill-bg-brand-green</code></td>
666
+ <td><code>var(--rs-color-green-100)</code></td>
667
+ <td></td>
668
+ </tr>
669
+ <tr>
670
+ <td><span class="swatch" style="background: var(--rs-pill-color-brand-green);"></span><code>pill-color-brand-green</code></td>
671
+ <td><code>--rs-pill-color-brand-green</code></td>
672
+ <td><code>var(--rs-color-green-500)</code></td>
673
+ <td></td>
674
+ </tr>
675
+ <tr>
676
+ <td><span class="swatch" style="background: var(--rs-pill-bg-brand-navygreen);"></span><code>pill-bg-brand-navygreen</code></td>
677
+ <td><code>--rs-pill-bg-brand-navygreen</code></td>
678
+ <td><code>var(--rs-color-navygreen-100)</code></td>
679
+ <td></td>
680
+ </tr>
681
+ <tr>
682
+ <td><span class="swatch" style="background: var(--rs-pill-color-brand-navygreen);"></span><code>pill-color-brand-navygreen</code></td>
683
+ <td><code>--rs-pill-color-brand-navygreen</code></td>
684
+ <td><code>var(--rs-color-navygreen-500)</code></td>
685
+ <td></td>
686
+ </tr>
687
+ <tr>
688
+ <td><span class="swatch" style="background: var(--rs-pill-bg-brand-red);"></span><code>pill-bg-brand-red</code></td>
689
+ <td><code>--rs-pill-bg-brand-red</code></td>
690
+ <td><code>var(--rs-color-red-100)</code></td>
691
+ <td></td>
692
+ </tr>
693
+ <tr>
694
+ <td><span class="swatch" style="background: var(--rs-pill-color-brand-red);"></span><code>pill-color-brand-red</code></td>
695
+ <td><code>--rs-pill-color-brand-red</code></td>
696
+ <td><code>var(--rs-color-red-500)</code></td>
697
+ <td></td>
698
+ </tr>
699
+ <tr>
700
+ <td><span class="swatch" style="background: var(--rs-pill-bg-brand-yellow);"></span><code>pill-bg-brand-yellow</code></td>
701
+ <td><code>--rs-pill-bg-brand-yellow</code></td>
702
+ <td><code>var(--rs-color-yellow-100)</code></td>
703
+ <td></td>
704
+ </tr>
705
+ <tr>
706
+ <td><span class="swatch" style="background: var(--rs-pill-color-brand-yellow);"></span><code>pill-color-brand-yellow</code></td>
707
+ <td><code>--rs-pill-color-brand-yellow</code></td>
708
+ <td><code>var(--rs-color-yellow-500)</code></td>
709
+ <td></td>
710
+ </tr>
711
+ <tr>
712
+ <td><span class="swatch" style="background: var(--rs-color-sidebar-background);"></span><code>color-sidebar-background</code></td>
713
+ <td><code>--rs-color-sidebar-background</code></td>
714
+ <td><code>var(--rs-color-white-500)</code></td>
715
+ <td></td>
716
+ </tr>
717
+ <tr>
718
+ <td><span class="swatch" style="background: var(--rs-color-sidebar-background-active);"></span><code>color-sidebar-background-active</code></td>
719
+ <td><code>--rs-color-sidebar-background-active</code></td>
720
+ <td><code>var(--rs-color-blue-100)</code></td>
721
+ <td></td>
722
+ </tr>
723
+ <tr>
724
+ <td><span class="swatch" style="background: var(--rs-color-sidebar-background-hover);"></span><code>color-sidebar-background-hover</code></td>
725
+ <td><code>--rs-color-sidebar-background-hover</code></td>
726
+ <td><code>var(--rs-color-blue-100)</code></td>
727
+ <td></td>
728
+ </tr>
729
+ <tr>
730
+ <td><span class="swatch" style="background: var(--rs-color-sidebar-stroke);"></span><code>color-sidebar-stroke</code></td>
731
+ <td><code>--rs-color-sidebar-stroke</code></td>
732
+ <td><code>var(--rs-color-gray-100)</code></td>
733
+ <td></td>
734
+ </tr>
735
+ <tr>
736
+ <td><span class="swatch" style="background: var(--rs-color-sidebar-stroke-active);"></span><code>color-sidebar-stroke-active</code></td>
737
+ <td><code>--rs-color-sidebar-stroke-active</code></td>
738
+ <td><code>var(--rs-color-blue-500)</code></td>
739
+ <td></td>
740
+ </tr>
741
+ </tbody>
742
+ </table>
743
+ </section>
744
+ </main>
745
+ </body>
746
+ </html>
package/dist/tokens.md ADDED
@@ -0,0 +1,105 @@
1
+ <!-- AUTO-GENERATED FILE. DO NOT EDIT MANUALLY. -->
2
+ # Robosophy tokens
3
+
4
+ Generated from `packages/tokens/src/tokens.ts`.
5
+
6
+ Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.css` before using them.
7
+
8
+ ## Color tokens
9
+
10
+ | Token | CSS variable | Value | Description |
11
+ | --- | --- | --- | --- |
12
+ | `color-blue-50` | `--rs-color-blue-50` | `#F0F9FD` | |
13
+ | `color-blue-100` | `--rs-color-blue-100` | `#E6F6FB` | |
14
+ | `color-blue-500` | `--rs-color-blue-500` | `#48A0D4` | |
15
+ | `color-blue-700` | `--rs-color-blue-700` | `#2A719B` | |
16
+ | `color-green-100` | `--rs-color-green-100` | `#EDF7E6` | |
17
+ | `color-green-500` | `--rs-color-green-500` | `#4EAE01` | |
18
+ | `color-navygreen-100` | `--rs-color-navygreen-100` | `#E5F1EA` | |
19
+ | `color-navygreen-500` | `--rs-color-navygreen-500` | `#007C2F` | |
20
+ | `color-yellow-100` | `--rs-color-yellow-100` | `#FFF4E6` | |
21
+ | `color-yellow-500` | `--rs-color-yellow-500` | `#FF9001` | |
22
+ | `color-red-100` | `--rs-color-red-100` | `#FFF0F1` | |
23
+ | `color-red-500` | `--rs-color-red-500` | `#D80115` | |
24
+ | `color-darkblue-100` | `--rs-color-darkblue-100` | `#E5ECF5` | |
25
+ | `color-darkblue-500` | `--rs-color-darkblue-500` | `#004A9F` | |
26
+ | `color-navyblue-100` | `--rs-color-navyblue-100` | `var(--rs-color-darkblue-100)` | Backfilled legacy navyblue reference from the darkblue scale. |
27
+ | `color-navyblue-500` | `--rs-color-navyblue-500` | `var(--rs-color-darkblue-500)` | Backfilled legacy navyblue reference from the darkblue scale. |
28
+ | `color-gray-100` | `--rs-color-gray-100` | `#F6F6F6` | |
29
+ | `color-gray-300` | `--rs-color-gray-300` | `#EEEEEE` | |
30
+ | `color-gray-500` | `--rs-color-gray-500` | `#D1D1D1` | |
31
+ | `color-gray-700` | `--rs-color-gray-700` | `#909090` | |
32
+ | `color-black-500` | `--rs-color-black-500` | `#000000` | |
33
+ | `color-white-500` | `--rs-color-white-500` | `#FFFFFF` | |
34
+ | `color-background` | `--rs-color-background` | `var(--rs-color-gray-100)` | |
35
+ | `color-background-disabled` | `--rs-color-background-disabled` | `var(--rs-color-gray-100)` | |
36
+ | `color-background-caution` | `--rs-color-background-caution` | `var(--rs-color-yellow-100)` | |
37
+ | `color-background-info` | `--rs-color-background-info` | `var(--rs-color-blue-100)` | |
38
+ | `color-surface-primary` | `--rs-color-surface-primary` | `var(--rs-color-white-500)` | |
39
+ | `color-surface-tertiary` | `--rs-color-surface-tertiary` | `var(--rs-color-black-500)` | |
40
+ | `color-text-primary` | `--rs-color-text-primary` | `var(--rs-color-black-500)` | |
41
+ | `color-text-secondary` | `--rs-color-text-secondary` | `var(--rs-color-gray-700)` | |
42
+ | `color-text-brand` | `--rs-color-text-brand` | `var(--rs-color-blue-500)` | |
43
+ | `color-text-brand-blue` | `--rs-color-text-brand-blue` | `var(--rs-color-blue-500)` | |
44
+ | `color-text-brand-green` | `--rs-color-text-brand-green` | `var(--rs-color-green-500)` | |
45
+ | `color-text-brand-yellow` | `--rs-color-text-brand-yellow` | `var(--rs-color-yellow-500)` | |
46
+ | `color-text-brand-red` | `--rs-color-text-brand-red` | `var(--rs-color-red-500)` | |
47
+ | `color-text-placeholder` | `--rs-color-text-placeholder` | `var(--rs-color-gray-500)` | |
48
+ | `color-text-caution` | `--rs-color-text-caution` | `var(--rs-color-yellow-500)` | |
49
+ | `color-text-button-primary` | `--rs-color-text-button-primary` | `var(--rs-color-white-500)` | |
50
+ | `color-text-button-secondary` | `--rs-color-text-button-secondary` | `var(--rs-color-black-500)` | |
51
+ | `color-text-button-tertiary` | `--rs-color-text-button-tertiary` | `var(--rs-color-blue-500)` | |
52
+ | `color-text-button-tertiary-hover` | `--rs-color-text-button-tertiary-hover` | `var(--rs-color-blue-700)` | |
53
+ | `color-icon-primary` | `--rs-color-icon-primary` | `var(--rs-color-blue-500)` | |
54
+ | `color-icon-secondary` | `--rs-color-icon-secondary` | `var(--rs-color-black-500)` | |
55
+ | `color-icon-button-primary` | `--rs-color-icon-button-primary` | `var(--rs-color-white-500)` | |
56
+ | `color-icon-button-secondary` | `--rs-color-icon-button-secondary` | `var(--rs-color-black-500)` | |
57
+ | `color-icon-button-tertiary` | `--rs-color-icon-button-tertiary` | `var(--rs-color-blue-500)` | |
58
+ | `color-icon-input` | `--rs-color-icon-input` | `var(--rs-color-black-500)` | |
59
+ | `color-icon-brand-blue` | `--rs-color-icon-brand-blue` | `var(--rs-color-blue-500)` | |
60
+ | `color-icon-brand-green` | `--rs-color-icon-brand-green` | `var(--rs-color-green-500)` | |
61
+ | `color-icon-brand-yellow` | `--rs-color-icon-brand-yellow` | `var(--rs-color-yellow-500)` | |
62
+ | `color-icon-brand-red` | `--rs-color-icon-brand-red` | `var(--rs-color-red-500)` | |
63
+ | `color-icon-brand-darkblue` | `--rs-color-icon-brand-darkblue` | `var(--rs-color-darkblue-500)` | |
64
+ | `color-stroke-default` | `--rs-color-stroke-default` | `var(--rs-color-gray-500)` | |
65
+ | `color-stroke-focused` | `--rs-color-stroke-focused` | `var(--rs-color-blue-500)` | |
66
+ | `color-stroke-disabled` | `--rs-color-stroke-disabled` | `var(--rs-color-gray-100)` | |
67
+ | `color-stroke-success` | `--rs-color-stroke-success` | `var(--rs-color-green-500)` | |
68
+ | `color-stroke-caution` | `--rs-color-stroke-caution` | `var(--rs-color-yellow-500)` | |
69
+ | `color-stroke-error` | `--rs-color-stroke-error` | `var(--rs-color-red-500)` | |
70
+ | `color-button-primary` | `--rs-color-button-primary` | `var(--rs-color-blue-500)` | |
71
+ | `color-button-primary-hover` | `--rs-color-button-primary-hover` | `var(--rs-color-blue-700)` | |
72
+ | `color-button-secondary` | `--rs-color-button-secondary` | `var(--rs-color-gray-500)` | |
73
+ | `color-button-secondary-hover` | `--rs-color-button-secondary-hover` | `var(--rs-color-gray-700)` | |
74
+ | `color-button-blue-surface` | `--rs-color-button-blue-surface` | `var(--rs-color-blue-100)` | |
75
+ | `color-button-green-surface` | `--rs-color-button-green-surface` | `var(--rs-color-green-100)` | |
76
+ | `color-button-yellow-surface` | `--rs-color-button-yellow-surface` | `var(--rs-color-yellow-100)` | |
77
+ | `color-button-red-surface` | `--rs-color-button-red-surface` | `var(--rs-color-red-100)` | |
78
+
79
+ ## Font tokens
80
+
81
+ | Token | CSS variable | Value | Description |
82
+ | --- | --- | --- | --- |
83
+ | `font-family` | `--rs-font-family` | `'Inter', sans-serif` | |
84
+
85
+ ## Component tokens
86
+
87
+ | Token | CSS variable | Value | Description |
88
+ | --- | --- | --- | --- |
89
+ | `pill-bg-brand-blue` | `--rs-pill-bg-brand-blue` | `var(--rs-color-blue-100)` | |
90
+ | `pill-color-brand-blue` | `--rs-pill-color-brand-blue` | `var(--rs-color-blue-500)` | |
91
+ | `pill-bg-brand-navyblue` | `--rs-pill-bg-brand-navyblue` | `var(--rs-color-navyblue-100)` | Legacy token referenced an undefined navyblue scale. |
92
+ | `pill-color-brand-navyblue` | `--rs-pill-color-brand-navyblue` | `var(--rs-color-navyblue-500)` | Legacy token referenced an undefined navyblue scale. |
93
+ | `pill-bg-brand-green` | `--rs-pill-bg-brand-green` | `var(--rs-color-green-100)` | |
94
+ | `pill-color-brand-green` | `--rs-pill-color-brand-green` | `var(--rs-color-green-500)` | |
95
+ | `pill-bg-brand-navygreen` | `--rs-pill-bg-brand-navygreen` | `var(--rs-color-navygreen-100)` | |
96
+ | `pill-color-brand-navygreen` | `--rs-pill-color-brand-navygreen` | `var(--rs-color-navygreen-500)` | |
97
+ | `pill-bg-brand-red` | `--rs-pill-bg-brand-red` | `var(--rs-color-red-100)` | |
98
+ | `pill-color-brand-red` | `--rs-pill-color-brand-red` | `var(--rs-color-red-500)` | |
99
+ | `pill-bg-brand-yellow` | `--rs-pill-bg-brand-yellow` | `var(--rs-color-yellow-100)` | |
100
+ | `pill-color-brand-yellow` | `--rs-pill-color-brand-yellow` | `var(--rs-color-yellow-500)` | |
101
+ | `color-sidebar-background` | `--rs-color-sidebar-background` | `var(--rs-color-white-500)` | |
102
+ | `color-sidebar-background-active` | `--rs-color-sidebar-background-active` | `var(--rs-color-blue-100)` | |
103
+ | `color-sidebar-background-hover` | `--rs-color-sidebar-background-hover` | `var(--rs-color-blue-100)` | |
104
+ | `color-sidebar-stroke` | `--rs-color-sidebar-stroke` | `var(--rs-color-gray-100)` | |
105
+ | `color-sidebar-stroke-active` | `--rs-color-sidebar-stroke-active` | `var(--rs-color-blue-500)` | |
package/package.json CHANGED
@@ -1,11 +1,14 @@
1
1
  {
2
2
  "name": "@robosophy/tokens",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "private": false,
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
7
7
  "main": "./dist/index.js",
8
8
  "types": "./dist/index.d.ts",
9
+ "bin": {
10
+ "robosophy-tokens": "./dist/cli.js"
11
+ },
9
12
  "exports": {
10
13
  ".": {
11
14
  "types": "./dist/index.d.ts",
@@ -14,12 +17,16 @@
14
17
  "./tokens.css": "./dist/tokens.css",
15
18
  "./tailwind.css": "./dist/tailwind.css",
16
19
  "./tokens.json": "./dist/tokens.json",
20
+ "./tokens.md": "./dist/tokens.md",
21
+ "./tokens.html": "./dist/tokens.html",
22
+ "./ai-context.md": "./dist/ai-context.md",
17
23
  "./tailwind-preset": {
18
24
  "types": "./dist/tailwind-preset.d.ts",
19
25
  "default": "./dist/tailwind-preset.js"
20
26
  }
21
27
  },
22
28
  "files": [
29
+ "AGENTS.md",
23
30
  "dist",
24
31
  "README.md",
25
32
  "package.json"