@robosophy/tokens 1.0.14 → 1.1.0

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 (13) hide show
  1. package/AGENTS.md +10 -9
  2. package/README.md +85 -65
  3. package/dist/ai-context.md +32 -1
  4. package/dist/cli.js +83 -83
  5. package/dist/index.d.ts +24 -1
  6. package/dist/index.js +24 -1
  7. package/dist/tailwind-preset.js +23 -0
  8. package/dist/tailwind.css +23 -0
  9. package/dist/tokens.css +47 -1
  10. package/dist/tokens.html +163 -2
  11. package/dist/tokens.json +116 -1
  12. package/dist/tokens.md +24 -1
  13. package/package.json +47 -47
package/AGENTS.md CHANGED
@@ -1,9 +1,10 @@
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, unless the app imports `@robosophy/prime-theme/prime.css`.
6
- - In PrimeVue apps, import only `@robosophy/prime-theme/prime.css`; it already includes `@robosophy/tokens/tokens.css`.
7
- - Public CSS tokens use the `--rs-` prefix.
8
- - Do not hardcode hex colors when an equivalent Robosophy token exists.
9
- - Prefer semantic tokens over primitive palette tokens for component styles.
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, unless the app imports `@robosophy/prime-theme/prime.css`.
6
+ - In PrimeVue apps, import only `@robosophy/prime-theme/prime.css`; it already includes `@robosophy/tokens/tokens.css`.
7
+ - In PrimeReact apps, import `primereact/resources/themes/fluent-light/theme.css` first, then `@robosophy/prime-theme/prime.css`. PrimeReact 10 uses legacy CSS variables, not `@primeuix/themes` like Vue. Only `fluent-light` is compatible with Robosophy overrides.
8
+ - Public CSS tokens use the `--rs-` prefix.
9
+ - Do not hardcode hex colors when an equivalent Robosophy token exists.
10
+ - Prefer semantic tokens over primitive palette tokens for component styles.
package/README.md CHANGED
@@ -1,65 +1,85 @@
1
- # @robosophy/tokens
2
-
3
- Tokens de diseño de Robosophy.
4
-
5
- ## Instalacion
6
-
7
- ```sh
8
- npm install @robosophy/tokens
9
- ```
10
-
11
- ## Uso
12
-
13
- Importa `tokens.css` cuando el proyecto consume tokens directamente o usa componentes Robosophy sin `@robosophy/prime-theme`.
14
-
15
- ```ts
16
- import "@robosophy/tokens/tokens.css";
17
- import { tokens } from "@robosophy/tokens";
18
- import tokensJson from "@robosophy/tokens/tokens.json";
19
- ```
20
-
21
- Si la app usa `@robosophy/prime-theme`, importa solo `@robosophy/prime-theme/prime.css`: ese CSS ya importa `@robosophy/tokens/tokens.css`.
22
-
23
- Para Tailwind, agrega el artefacto de Tailwind ademas del CSS base que corresponda:
24
-
25
- ```ts
26
- import "@robosophy/tokens/tailwind.css";
27
- ```
28
-
29
- Los tokens CSS publicos usan el prefijo `--rs-`.
30
-
31
- ```css
32
- .button {
33
- background: var(--rs-color-button-primary);
34
- color: var(--rs-color-text-button-primary);
35
- }
36
- ```
37
-
38
- ## Contexto para agentes de IA
39
-
40
- El paquete publica contexto dentro de `node_modules/@robosophy/tokens`. Tambien queda disponible si el proyecto instala `@robosophy/prime-theme`, porque ese paquete depende de `@robosophy/tokens`.
41
-
42
- - `AGENTS.md`: reglas cortas para agentes.
43
- - `dist/ai-context.md`: reglas de uso, imports y lista de tokens.
44
- - `dist/tokens.md`: referencia en Markdown.
45
- - `dist/tokens.json`: datos estructurados.
46
-
47
- Para que Codex u otros agentes tengan instrucciones a nivel proyecto, ejecuta:
48
-
49
- ```sh
50
- npx robosophy-tokens init
51
- ```
52
-
53
- El comando crea o actualiza una seccion marcada en `AGENTS.md` sin sobrescribir otras instrucciones del proyecto.
54
-
55
- ## Referencia visual
56
-
57
- Despues de instalar el paquete, puedes abrir:
58
-
59
- ```txt
60
- node_modules/@robosophy/tokens/dist/tokens.html
61
- ```
62
-
63
- Tambien puedes consultar `@robosophy/tokens/tokens.md`, `@robosophy/tokens/ai-context.md` y `@robosophy/tokens/tokens.json`.
64
-
65
- La fuente de verdad está en `src/tokens.ts`. Los archivos de `dist/` son generados.
1
+ # @robosophy/tokens
2
+
3
+ Tokens de diseño de Robosophy.
4
+
5
+ ## Instalacion
6
+
7
+ ```sh
8
+ npm install @robosophy/tokens
9
+ ```
10
+
11
+ ## Uso
12
+
13
+ Importa `tokens.css` cuando el proyecto consume tokens directamente o usa componentes Robosophy sin `@robosophy/prime-theme`.
14
+
15
+ ```ts
16
+ import "@robosophy/tokens/tokens.css";
17
+ import { tokens } from "@robosophy/tokens";
18
+ import tokensJson from "@robosophy/tokens/tokens.json";
19
+ ```
20
+
21
+ Si la app usa `@robosophy/prime-theme`, importa solo `@robosophy/prime-theme/prime.css`: ese CSS ya importa `@robosophy/tokens/tokens.css`.
22
+
23
+ ## Breaking Changes
24
+
25
+ ### `color-green-500` actualizado (v1.0.15)
26
+
27
+ - **Antes:** `#4AE001`
28
+ - **Ahora:** `#4EAE01`
29
+ - **Razón:** Mejorar contraste y consistencia con la paleta de severidad.
30
+ - **Impacto:** Todos los componentes que usen `--rs-color-green-500` verán un cambio de color, incluyendo severity success, iconos de success, y cualquier referencia directa.
31
+
32
+ ### Apps con PrimeReact
33
+
34
+ PrimeReact 10 usa un sistema de temas CSS. Necesitas importar el tema `fluent-light` seguido de los overrides de Robosophy:
35
+
36
+ ```tsx
37
+ import "primereact/resources/themes/fluent-light/theme.css";
38
+ import "@robosophy/prime-theme/prime.css";
39
+ ```
40
+
41
+ El orden es crítico: el tema base proporciona los estilos estructurales, y `prime.css` de Robosophy aplica los tokens `--rs-*` a los componentes. Solo `fluent-light` es compatible con los overrides de Robosophy.
42
+
43
+ Para Tailwind, agrega el artefacto de Tailwind ademas del CSS base que corresponda:
44
+
45
+ ```ts
46
+ import "@robosophy/tokens/tailwind.css";
47
+ ```
48
+
49
+ Los tokens CSS publicos usan el prefijo `--rs-`.
50
+
51
+ ```css
52
+ .button {
53
+ background: var(--rs-color-button-primary);
54
+ color: var(--rs-color-text-button-primary);
55
+ }
56
+ ```
57
+
58
+ ## Contexto para agentes de IA
59
+
60
+ El paquete publica contexto dentro de `node_modules/@robosophy/tokens`. Tambien queda disponible si el proyecto instala `@robosophy/prime-theme`, porque ese paquete depende de `@robosophy/tokens`.
61
+
62
+ - `AGENTS.md`: reglas cortas para agentes.
63
+ - `dist/ai-context.md`: reglas de uso, imports y lista de tokens.
64
+ - `dist/tokens.md`: referencia en Markdown.
65
+ - `dist/tokens.json`: datos estructurados.
66
+
67
+ Para que Codex u otros agentes tengan instrucciones a nivel proyecto, ejecuta:
68
+
69
+ ```sh
70
+ npx robosophy-tokens init
71
+ ```
72
+
73
+ El comando crea o actualiza una seccion marcada en `AGENTS.md` sin sobrescribir otras instrucciones del proyecto.
74
+
75
+ ## Referencia visual
76
+
77
+ Despues de instalar el paquete, puedes abrir:
78
+
79
+ ```txt
80
+ node_modules/@robosophy/tokens/dist/tokens.html
81
+ ```
82
+
83
+ Tambien puedes consultar `@robosophy/tokens/tokens.md`, `@robosophy/tokens/ai-context.md` y `@robosophy/tokens/tokens.json`.
84
+
85
+ La fuente de verdad está en `src/tokens.ts`. Los archivos de `dist/` son generados.
package/dist/ai-context.md CHANGED
@@ -7,6 +7,7 @@ Use this file as the source of truth when generating UI code in projects that de
7
7
 
8
8
  - Import `@robosophy/tokens/tokens.css` before using Robosophy CSS variables, unless the app imports `@robosophy/prime-theme/prime.css`.
9
9
  - In PrimeVue apps, import only `@robosophy/prime-theme/prime.css`; it already includes `@robosophy/tokens/tokens.css`.
10
+ - In PrimeReact apps, import `primereact/resources/themes/fluent-light/theme.css` first, then `@robosophy/prime-theme/prime.css`. PrimeReact 10 uses legacy CSS variables, not `@primeuix/themes` like Vue. Only `fluent-light` is compatible with Robosophy overrides.
10
11
  - Use public CSS variables with the `--rs-` prefix.
11
12
  - Do not hardcode hex colors when an equivalent Robosophy token exists.
12
13
  - 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.
@@ -27,6 +28,13 @@ Use the Prime theme import in PrimeVue apps:
27
28
  import "@robosophy/prime-theme/prime.css";
28
29
  ```
29
30
 
31
+ In PrimeReact apps, import the fluent-light theme first, then Robosophy overrides:
32
+
33
+ ```tsx
34
+ import "primereact/resources/themes/fluent-light/theme.css";
35
+ import "@robosophy/prime-theme/prime.css";
36
+ ```
37
+
30
38
  Optional token artifacts:
31
39
 
32
40
  ```ts
@@ -44,7 +52,7 @@ import tokensJson from "@robosophy/tokens/tokens.json";
44
52
  - `--rs-color-blue-500`: `#48A0D4`
45
53
  - `--rs-color-blue-700`: `#2A719B`
46
54
  - `--rs-color-green-100`: `#EDF7E6`
47
- - `--rs-color-green-500`: `#4AE001`
55
+ - `--rs-color-green-500`: `#4EAE01`
48
56
  - `--rs-color-green-700`: `#3A8501`
49
57
  - `--rs-color-navygreen-100`: `#E5F1EA`
50
58
  - `--rs-color-navygreen-500`: `#007C2F`
@@ -63,6 +71,9 @@ import tokensJson from "@robosophy/tokens/tokens.json";
63
71
  - `--rs-color-gray-500`: `#D1D1D1`
64
72
  - `--rs-color-gray-600`: `#545454`
65
73
  - `--rs-color-gray-700`: `#909090`
74
+ - `--rs-color-neutral-50`: `#FDFDFD`
75
+ - `--rs-color-neutral-100`: `#B0B0B0`
76
+ - `--rs-color-neutral-700`: `#A3A3A3`
66
77
  - `--rs-color-black-500`: `#000000`
67
78
  - `--rs-color-white-500`: `#FFFFFF`
68
79
  - `--rs-color-project-pc`: `#014A9F` - Project brand color for Plan Comercial.
@@ -74,6 +85,26 @@ import tokensJson from "@robosophy/tokens/tokens.json";
74
85
  - `--rs-color-background-disabled`: `var(--rs-color-gray-100)`
75
86
  - `--rs-color-background-caution`: `var(--rs-color-yellow-100)`
76
87
  - `--rs-color-background-info`: `var(--rs-color-blue-100)`
88
+ - `--rs-color-severity-success-background`: `var(--rs-color-green-100)`
89
+ - `--rs-color-severity-success-text`: `var(--rs-color-green-700)`
90
+ - `--rs-color-severity-success-icon`: `var(--rs-color-green-500)`
91
+ - `--rs-color-severity-success-border`: `var(--rs-color-green-500)`
92
+ - `--rs-color-severity-info-background`: `var(--rs-color-blue-100)`
93
+ - `--rs-color-severity-info-text`: `var(--rs-color-blue-700)`
94
+ - `--rs-color-severity-info-icon`: `var(--rs-color-blue-500)`
95
+ - `--rs-color-severity-info-border`: `var(--rs-color-blue-500)`
96
+ - `--rs-color-severity-warning-background`: `var(--rs-color-yellow-100)`
97
+ - `--rs-color-severity-warning-text`: `var(--rs-color-yellow-700)`
98
+ - `--rs-color-severity-warning-icon`: `var(--rs-color-yellow-500)`
99
+ - `--rs-color-severity-warning-border`: `var(--rs-color-yellow-500)`
100
+ - `--rs-color-severity-danger-background`: `var(--rs-color-red-100)`
101
+ - `--rs-color-severity-danger-text`: `var(--rs-color-red-700)`
102
+ - `--rs-color-severity-danger-icon`: `var(--rs-color-red-500)`
103
+ - `--rs-color-severity-danger-border`: `var(--rs-color-red-500)`
104
+ - `--rs-color-severity-secondary-background`: `var(--rs-color-gray-100)`
105
+ - `--rs-color-severity-secondary-text`: `var(--rs-color-gray-700)`
106
+ - `--rs-color-severity-secondary-icon`: `var(--rs-color-gray-600)`
107
+ - `--rs-color-severity-secondary-border`: `var(--rs-color-gray-500)`
77
108
  - `--rs-color-surface-primary`: `var(--rs-color-white-500)`
78
109
  - `--rs-color-surface-tertiary`: `var(--rs-color-black-500)`
79
110
  - `--rs-color-surface-bg-primary`: `var(--rs-color-white-500)`
package/dist/cli.js CHANGED
@@ -1,83 +1,83 @@
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, unless the app imports \`@robosophy/prime-theme/prime.css\`.
14
- - In PrimeVue apps, import only \`@robosophy/prime-theme/prime.css\`; it already includes \`@robosophy/tokens/tokens.css\`.
15
- - Use public CSS variables with the \`--rs-\` prefix.
16
- - Do not hardcode hex colors when an equivalent Robosophy token exists.
17
- - Prefer semantic tokens over primitive palette tokens for component styles.
18
- - Check the installed token context before inventing new design values.
19
-
20
- Installed references:
21
-
22
- - \`node_modules/@robosophy/tokens/dist/ai-context.md\`
23
- - \`node_modules/@robosophy/tokens/dist/tokens.md\`
24
- - \`node_modules/@robosophy/tokens/dist/tokens.json\`
25
- ${endMarker}`;
26
-
27
- function usage() {
28
- return `Usage: robosophy-tokens init
29
-
30
- Commands:
31
- init Create or update the Robosophy section in AGENTS.md
32
- `;
33
- }
34
-
35
- async function readText(path) {
36
- try {
37
- return await readFile(path, "utf8");
38
- } catch (error) {
39
- if (error && error.code === "ENOENT") {
40
- return null;
41
- }
42
-
43
- throw error;
44
- }
45
- }
46
-
47
- function updateAgentsContent(current) {
48
- if (current === null) {
49
- return `# Project instructions
50
-
51
- ${section}
52
- `;
53
- }
54
-
55
- const markerPattern = new RegExp(`${startMarker}[\\s\\S]*?${endMarker}`);
56
-
57
- if (markerPattern.test(current)) {
58
- return current.replace(markerPattern, section);
59
- }
60
-
61
- const trimmed = current.trimEnd();
62
- const prefix = trimmed.length > 0 ? `${trimmed}\n\n` : "";
63
-
64
- return `${prefix}${section}\n`;
65
- }
66
-
67
- async function init() {
68
- const agentsPath = resolve(process.cwd(), "AGENTS.md");
69
- const current = await readText(agentsPath);
70
- const next = updateAgentsContent(current);
71
-
72
- await writeFile(agentsPath, next);
73
- console.log(current === null ? "Created AGENTS.md with Robosophy token context." : "Updated AGENTS.md with Robosophy token context.");
74
- }
75
-
76
- const [command] = process.argv.slice(2);
77
-
78
- if (command === "init") {
79
- await init();
80
- } else {
81
- console.error(usage());
82
- process.exitCode = command === undefined || command === "--help" || command === "-h" ? 0 : 1;
83
- }
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, unless the app imports \`@robosophy/prime-theme/prime.css\`.
14
+ - In PrimeVue apps, import only \`@robosophy/prime-theme/prime.css\`; it already includes \`@robosophy/tokens/tokens.css\`.
15
+ - Use public CSS variables with the \`--rs-\` prefix.
16
+ - Do not hardcode hex colors when an equivalent Robosophy token exists.
17
+ - Prefer semantic tokens over primitive palette tokens for component styles.
18
+ - Check the installed token context before inventing new design values.
19
+
20
+ Installed references:
21
+
22
+ - \`node_modules/@robosophy/tokens/dist/ai-context.md\`
23
+ - \`node_modules/@robosophy/tokens/dist/tokens.md\`
24
+ - \`node_modules/@robosophy/tokens/dist/tokens.json\`
25
+ ${endMarker}`;
26
+
27
+ function usage() {
28
+ return `Usage: robosophy-tokens init
29
+
30
+ Commands:
31
+ init Create or update the Robosophy section in AGENTS.md
32
+ `;
33
+ }
34
+
35
+ async function readText(path) {
36
+ try {
37
+ return await readFile(path, "utf8");
38
+ } catch (error) {
39
+ if (error && error.code === "ENOENT") {
40
+ return null;
41
+ }
42
+
43
+ throw error;
44
+ }
45
+ }
46
+
47
+ function updateAgentsContent(current) {
48
+ if (current === null) {
49
+ return `# Project instructions
50
+
51
+ ${section}
52
+ `;
53
+ }
54
+
55
+ const markerPattern = new RegExp(`${startMarker}[\\s\\S]*?${endMarker}`);
56
+
57
+ if (markerPattern.test(current)) {
58
+ return current.replace(markerPattern, section);
59
+ }
60
+
61
+ const trimmed = current.trimEnd();
62
+ const prefix = trimmed.length > 0 ? `${trimmed}\n\n` : "";
63
+
64
+ return `${prefix}${section}\n`;
65
+ }
66
+
67
+ async function init() {
68
+ const agentsPath = resolve(process.cwd(), "AGENTS.md");
69
+ const current = await readText(agentsPath);
70
+ const next = updateAgentsContent(current);
71
+
72
+ await writeFile(agentsPath, next);
73
+ console.log(current === null ? "Created AGENTS.md with Robosophy token context." : "Updated AGENTS.md with Robosophy token context.");
74
+ }
75
+
76
+ const [command] = process.argv.slice(2);
77
+
78
+ if (command === "init") {
79
+ await init();
80
+ } else {
81
+ console.error(usage());
82
+ process.exitCode = command === undefined || command === "--help" || command === "-h" ? 0 : 1;
83
+ }
package/dist/index.d.ts CHANGED
@@ -5,7 +5,7 @@ export declare const tokens: {
5
5
  readonly "color-blue-500": "#48A0D4";
6
6
  readonly "color-blue-700": "#2A719B";
7
7
  readonly "color-green-100": "#EDF7E6";
8
- readonly "color-green-500": "#4AE001";
8
+ readonly "color-green-500": "#4EAE01";
9
9
  readonly "color-green-700": "#3A8501";
10
10
  readonly "color-navygreen-100": "#E5F1EA";
11
11
  readonly "color-navygreen-500": "#007C2F";
@@ -24,6 +24,9 @@ export declare const tokens: {
24
24
  readonly "color-gray-500": "#D1D1D1";
25
25
  readonly "color-gray-600": "#545454";
26
26
  readonly "color-gray-700": "#909090";
27
+ readonly "color-neutral-50": "#FDFDFD";
28
+ readonly "color-neutral-100": "#B0B0B0";
29
+ readonly "color-neutral-700": "#A3A3A3";
27
30
  readonly "color-black-500": "#000000";
28
31
  readonly "color-white-500": "#FFFFFF";
29
32
  readonly "color-project-pc": "#014A9F";
@@ -36,6 +39,26 @@ export declare const tokens: {
36
39
  readonly "color-background-disabled": "var(--rs-color-gray-100)";
37
40
  readonly "color-background-caution": "var(--rs-color-yellow-100)";
38
41
  readonly "color-background-info": "var(--rs-color-blue-100)";
42
+ readonly "color-severity-success-background": "var(--rs-color-green-100)";
43
+ readonly "color-severity-success-text": "var(--rs-color-green-700)";
44
+ readonly "color-severity-success-icon": "var(--rs-color-green-500)";
45
+ readonly "color-severity-success-border": "var(--rs-color-green-500)";
46
+ readonly "color-severity-info-background": "var(--rs-color-blue-100)";
47
+ readonly "color-severity-info-text": "var(--rs-color-blue-700)";
48
+ readonly "color-severity-info-icon": "var(--rs-color-blue-500)";
49
+ readonly "color-severity-info-border": "var(--rs-color-blue-500)";
50
+ readonly "color-severity-warning-background": "var(--rs-color-yellow-100)";
51
+ readonly "color-severity-warning-text": "var(--rs-color-yellow-700)";
52
+ readonly "color-severity-warning-icon": "var(--rs-color-yellow-500)";
53
+ readonly "color-severity-warning-border": "var(--rs-color-yellow-500)";
54
+ readonly "color-severity-danger-background": "var(--rs-color-red-100)";
55
+ readonly "color-severity-danger-text": "var(--rs-color-red-700)";
56
+ readonly "color-severity-danger-icon": "var(--rs-color-red-500)";
57
+ readonly "color-severity-danger-border": "var(--rs-color-red-500)";
58
+ readonly "color-severity-secondary-background": "var(--rs-color-gray-100)";
59
+ readonly "color-severity-secondary-text": "var(--rs-color-gray-700)";
60
+ readonly "color-severity-secondary-icon": "var(--rs-color-gray-600)";
61
+ readonly "color-severity-secondary-border": "var(--rs-color-gray-500)";
39
62
  readonly "color-surface-primary": "var(--rs-color-white-500)";
40
63
  readonly "color-surface-tertiary": "var(--rs-color-black-500)";
41
64
  readonly "color-surface-bg-primary": "var(--rs-color-white-500)";
package/dist/index.js CHANGED
@@ -5,7 +5,7 @@ export const tokens = {
5
5
  "color-blue-500": "#48A0D4",
6
6
  "color-blue-700": "#2A719B",
7
7
  "color-green-100": "#EDF7E6",
8
- "color-green-500": "#4AE001",
8
+ "color-green-500": "#4EAE01",
9
9
  "color-green-700": "#3A8501",
10
10
  "color-navygreen-100": "#E5F1EA",
11
11
  "color-navygreen-500": "#007C2F",
@@ -24,6 +24,9 @@ export const tokens = {
24
24
  "color-gray-500": "#D1D1D1",
25
25
  "color-gray-600": "#545454",
26
26
  "color-gray-700": "#909090",
27
+ "color-neutral-50": "#FDFDFD",
28
+ "color-neutral-100": "#B0B0B0",
29
+ "color-neutral-700": "#A3A3A3",
27
30
  "color-black-500": "#000000",
28
31
  "color-white-500": "#FFFFFF",
29
32
  "color-project-pc": "#014A9F",
@@ -36,6 +39,26 @@ export const tokens = {
36
39
  "color-background-disabled": "var(--rs-color-gray-100)",
37
40
  "color-background-caution": "var(--rs-color-yellow-100)",
38
41
  "color-background-info": "var(--rs-color-blue-100)",
42
+ "color-severity-success-background": "var(--rs-color-green-100)",
43
+ "color-severity-success-text": "var(--rs-color-green-700)",
44
+ "color-severity-success-icon": "var(--rs-color-green-500)",
45
+ "color-severity-success-border": "var(--rs-color-green-500)",
46
+ "color-severity-info-background": "var(--rs-color-blue-100)",
47
+ "color-severity-info-text": "var(--rs-color-blue-700)",
48
+ "color-severity-info-icon": "var(--rs-color-blue-500)",
49
+ "color-severity-info-border": "var(--rs-color-blue-500)",
50
+ "color-severity-warning-background": "var(--rs-color-yellow-100)",
51
+ "color-severity-warning-text": "var(--rs-color-yellow-700)",
52
+ "color-severity-warning-icon": "var(--rs-color-yellow-500)",
53
+ "color-severity-warning-border": "var(--rs-color-yellow-500)",
54
+ "color-severity-danger-background": "var(--rs-color-red-100)",
55
+ "color-severity-danger-text": "var(--rs-color-red-700)",
56
+ "color-severity-danger-icon": "var(--rs-color-red-500)",
57
+ "color-severity-danger-border": "var(--rs-color-red-500)",
58
+ "color-severity-secondary-background": "var(--rs-color-gray-100)",
59
+ "color-severity-secondary-text": "var(--rs-color-gray-700)",
60
+ "color-severity-secondary-icon": "var(--rs-color-gray-600)",
61
+ "color-severity-secondary-border": "var(--rs-color-gray-500)",
39
62
  "color-surface-primary": "var(--rs-color-white-500)",
40
63
  "color-surface-tertiary": "var(--rs-color-black-500)",
41
64
  "color-surface-bg-primary": "var(--rs-color-white-500)",
package/dist/tailwind-preset.js CHANGED
@@ -28,6 +28,9 @@ const preset = {
28
28
  "gray-500": "var(--rs-color-gray-500)",
29
29
  "gray-600": "var(--rs-color-gray-600)",
30
30
  "gray-700": "var(--rs-color-gray-700)",
31
+ "neutral-50": "var(--rs-color-neutral-50)",
32
+ "neutral-100": "var(--rs-color-neutral-100)",
33
+ "neutral-700": "var(--rs-color-neutral-700)",
31
34
  "black-500": "var(--rs-color-black-500)",
32
35
  "white-500": "var(--rs-color-white-500)",
33
36
  "project-pc": "var(--rs-color-project-pc)",
@@ -39,6 +42,26 @@ const preset = {
39
42
  "background-disabled": "var(--rs-color-background-disabled)",
40
43
  "background-caution": "var(--rs-color-background-caution)",
41
44
  "background-info": "var(--rs-color-background-info)",
45
+ "severity-success-background": "var(--rs-color-severity-success-background)",
46
+ "severity-success-text": "var(--rs-color-severity-success-text)",
47
+ "severity-success-icon": "var(--rs-color-severity-success-icon)",
48
+ "severity-success-border": "var(--rs-color-severity-success-border)",
49
+ "severity-info-background": "var(--rs-color-severity-info-background)",
50
+ "severity-info-text": "var(--rs-color-severity-info-text)",
51
+ "severity-info-icon": "var(--rs-color-severity-info-icon)",
52
+ "severity-info-border": "var(--rs-color-severity-info-border)",
53
+ "severity-warning-background": "var(--rs-color-severity-warning-background)",
54
+ "severity-warning-text": "var(--rs-color-severity-warning-text)",
55
+ "severity-warning-icon": "var(--rs-color-severity-warning-icon)",
56
+ "severity-warning-border": "var(--rs-color-severity-warning-border)",
57
+ "severity-danger-background": "var(--rs-color-severity-danger-background)",
58
+ "severity-danger-text": "var(--rs-color-severity-danger-text)",
59
+ "severity-danger-icon": "var(--rs-color-severity-danger-icon)",
60
+ "severity-danger-border": "var(--rs-color-severity-danger-border)",
61
+ "severity-secondary-background": "var(--rs-color-severity-secondary-background)",
62
+ "severity-secondary-text": "var(--rs-color-severity-secondary-text)",
63
+ "severity-secondary-icon": "var(--rs-color-severity-secondary-icon)",
64
+ "severity-secondary-border": "var(--rs-color-severity-secondary-border)",
42
65
  "surface-primary": "var(--rs-color-surface-primary)",
43
66
  "surface-tertiary": "var(--rs-color-surface-tertiary)",
44
67
  "surface-bg-primary": "var(--rs-color-surface-bg-primary)",
package/dist/tailwind.css CHANGED
@@ -24,6 +24,9 @@
24
24
  --color-rs-gray-500: var(--rs-color-gray-500);
25
25
  --color-rs-gray-600: var(--rs-color-gray-600);
26
26
  --color-rs-gray-700: var(--rs-color-gray-700);
27
+ --color-rs-neutral-50: var(--rs-color-neutral-50);
28
+ --color-rs-neutral-100: var(--rs-color-neutral-100);
29
+ --color-rs-neutral-700: var(--rs-color-neutral-700);
27
30
  --color-rs-black-500: var(--rs-color-black-500);
28
31
  --color-rs-white-500: var(--rs-color-white-500);
29
32
  --color-rs-project-pc: var(--rs-color-project-pc);
@@ -36,6 +39,26 @@
36
39
  --color-rs-background-disabled: var(--rs-color-background-disabled);
37
40
  --color-rs-background-caution: var(--rs-color-background-caution);
38
41
  --color-rs-background-info: var(--rs-color-background-info);
42
+ --color-rs-severity-success-background: var(--rs-color-severity-success-background);
43
+ --color-rs-severity-success-text: var(--rs-color-severity-success-text);
44
+ --color-rs-severity-success-icon: var(--rs-color-severity-success-icon);
45
+ --color-rs-severity-success-border: var(--rs-color-severity-success-border);
46
+ --color-rs-severity-info-background: var(--rs-color-severity-info-background);
47
+ --color-rs-severity-info-text: var(--rs-color-severity-info-text);
48
+ --color-rs-severity-info-icon: var(--rs-color-severity-info-icon);
49
+ --color-rs-severity-info-border: var(--rs-color-severity-info-border);
50
+ --color-rs-severity-warning-background: var(--rs-color-severity-warning-background);
51
+ --color-rs-severity-warning-text: var(--rs-color-severity-warning-text);
52
+ --color-rs-severity-warning-icon: var(--rs-color-severity-warning-icon);
53
+ --color-rs-severity-warning-border: var(--rs-color-severity-warning-border);
54
+ --color-rs-severity-danger-background: var(--rs-color-severity-danger-background);
55
+ --color-rs-severity-danger-text: var(--rs-color-severity-danger-text);
56
+ --color-rs-severity-danger-icon: var(--rs-color-severity-danger-icon);
57
+ --color-rs-severity-danger-border: var(--rs-color-severity-danger-border);
58
+ --color-rs-severity-secondary-background: var(--rs-color-severity-secondary-background);
59
+ --color-rs-severity-secondary-text: var(--rs-color-severity-secondary-text);
60
+ --color-rs-severity-secondary-icon: var(--rs-color-severity-secondary-icon);
61
+ --color-rs-severity-secondary-border: var(--rs-color-severity-secondary-border);
39
62
  --color-rs-surface-primary: var(--rs-color-surface-primary);
40
63
  --color-rs-surface-tertiary: var(--rs-color-surface-tertiary);
41
64
  --color-rs-surface-bg-primary: var(--rs-color-surface-bg-primary);
package/dist/tokens.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --rs-color-blue-500: #48A0D4;
6
6
  --rs-color-blue-700: #2A719B;
7
7
  --rs-color-green-100: #EDF7E6;
8
- --rs-color-green-500: #4AE001;
8
+ --rs-color-green-500: #4EAE01;
9
9
  --rs-color-green-700: #3A8501;
10
10
  --rs-color-navygreen-100: #E5F1EA;
11
11
  --rs-color-navygreen-500: #007C2F;
@@ -24,6 +24,9 @@
24
24
  --rs-color-gray-500: #D1D1D1;
25
25
  --rs-color-gray-600: #545454;
26
26
  --rs-color-gray-700: #909090;
27
+ --rs-color-neutral-50: #FDFDFD;
28
+ --rs-color-neutral-100: #B0B0B0;
29
+ --rs-color-neutral-700: #A3A3A3;
27
30
  --rs-color-black-500: #000000;
28
31
  --rs-color-white-500: #FFFFFF;
29
32
  --rs-color-project-pc: #014A9F;
@@ -36,6 +39,26 @@
36
39
  --rs-color-background-disabled: var(--rs-color-gray-100);
37
40
  --rs-color-background-caution: var(--rs-color-yellow-100);
38
41
  --rs-color-background-info: var(--rs-color-blue-100);
42
+ --rs-color-severity-success-background: var(--rs-color-green-100);
43
+ --rs-color-severity-success-text: var(--rs-color-green-700);
44
+ --rs-color-severity-success-icon: var(--rs-color-green-500);
45
+ --rs-color-severity-success-border: var(--rs-color-green-500);
46
+ --rs-color-severity-info-background: var(--rs-color-blue-100);
47
+ --rs-color-severity-info-text: var(--rs-color-blue-700);
48
+ --rs-color-severity-info-icon: var(--rs-color-blue-500);
49
+ --rs-color-severity-info-border: var(--rs-color-blue-500);
50
+ --rs-color-severity-warning-background: var(--rs-color-yellow-100);
51
+ --rs-color-severity-warning-text: var(--rs-color-yellow-700);
52
+ --rs-color-severity-warning-icon: var(--rs-color-yellow-500);
53
+ --rs-color-severity-warning-border: var(--rs-color-yellow-500);
54
+ --rs-color-severity-danger-background: var(--rs-color-red-100);
55
+ --rs-color-severity-danger-text: var(--rs-color-red-700);
56
+ --rs-color-severity-danger-icon: var(--rs-color-red-500);
57
+ --rs-color-severity-danger-border: var(--rs-color-red-500);
58
+ --rs-color-severity-secondary-background: var(--rs-color-gray-100);
59
+ --rs-color-severity-secondary-text: var(--rs-color-gray-700);
60
+ --rs-color-severity-secondary-icon: var(--rs-color-gray-600);
61
+ --rs-color-severity-secondary-border: var(--rs-color-gray-500);
39
62
  --rs-color-surface-primary: var(--rs-color-white-500);
40
63
  --rs-color-surface-tertiary: var(--rs-color-black-500);
41
64
  --rs-color-surface-bg-primary: var(--rs-color-white-500);
@@ -142,6 +165,9 @@
142
165
  --color-gray-500: var(--rs-color-gray-500);
143
166
  --color-gray-600: var(--rs-color-gray-600);
144
167
  --color-gray-700: var(--rs-color-gray-700);
168
+ --color-neutral-50: var(--rs-color-neutral-50);
169
+ --color-neutral-100: var(--rs-color-neutral-100);
170
+ --color-neutral-700: var(--rs-color-neutral-700);
145
171
  --color-black-500: var(--rs-color-black-500);
146
172
  --color-white-500: var(--rs-color-white-500);
147
173
  --color-project-pc: var(--rs-color-project-pc);
@@ -154,6 +180,26 @@
154
180
  --color-background-disabled: var(--rs-color-background-disabled);
155
181
  --color-background-caution: var(--rs-color-background-caution);
156
182
  --color-background-info: var(--rs-color-background-info);
183
+ --color-severity-success-background: var(--rs-color-severity-success-background);
184
+ --color-severity-success-text: var(--rs-color-severity-success-text);
185
+ --color-severity-success-icon: var(--rs-color-severity-success-icon);
186
+ --color-severity-success-border: var(--rs-color-severity-success-border);
187
+ --color-severity-info-background: var(--rs-color-severity-info-background);
188
+ --color-severity-info-text: var(--rs-color-severity-info-text);
189
+ --color-severity-info-icon: var(--rs-color-severity-info-icon);
190
+ --color-severity-info-border: var(--rs-color-severity-info-border);
191
+ --color-severity-warning-background: var(--rs-color-severity-warning-background);
192
+ --color-severity-warning-text: var(--rs-color-severity-warning-text);
193
+ --color-severity-warning-icon: var(--rs-color-severity-warning-icon);
194
+ --color-severity-warning-border: var(--rs-color-severity-warning-border);
195
+ --color-severity-danger-background: var(--rs-color-severity-danger-background);
196
+ --color-severity-danger-text: var(--rs-color-severity-danger-text);
197
+ --color-severity-danger-icon: var(--rs-color-severity-danger-icon);
198
+ --color-severity-danger-border: var(--rs-color-severity-danger-border);
199
+ --color-severity-secondary-background: var(--rs-color-severity-secondary-background);
200
+ --color-severity-secondary-text: var(--rs-color-severity-secondary-text);
201
+ --color-severity-secondary-icon: var(--rs-color-severity-secondary-icon);
202
+ --color-severity-secondary-border: var(--rs-color-severity-secondary-border);
157
203
  --color-surface-primary: var(--rs-color-surface-primary);
158
204
  --color-surface-tertiary: var(--rs-color-surface-tertiary);
159
205
  --color-surface-bg-primary: var(--rs-color-surface-bg-primary);
package/dist/tokens.html CHANGED
@@ -12,7 +12,7 @@
12
12
  --rs-color-blue-500: #48A0D4;
13
13
  --rs-color-blue-700: #2A719B;
14
14
  --rs-color-green-100: #EDF7E6;
15
- --rs-color-green-500: #4AE001;
15
+ --rs-color-green-500: #4EAE01;
16
16
  --rs-color-green-700: #3A8501;
17
17
  --rs-color-navygreen-100: #E5F1EA;
18
18
  --rs-color-navygreen-500: #007C2F;
@@ -31,6 +31,9 @@
31
31
  --rs-color-gray-500: #D1D1D1;
32
32
  --rs-color-gray-600: #545454;
33
33
  --rs-color-gray-700: #909090;
34
+ --rs-color-neutral-50: #FDFDFD;
35
+ --rs-color-neutral-100: #B0B0B0;
36
+ --rs-color-neutral-700: #A3A3A3;
34
37
  --rs-color-black-500: #000000;
35
38
  --rs-color-white-500: #FFFFFF;
36
39
  --rs-color-project-pc: #014A9F;
@@ -43,6 +46,26 @@
43
46
  --rs-color-background-disabled: var(--rs-color-gray-100);
44
47
  --rs-color-background-caution: var(--rs-color-yellow-100);
45
48
  --rs-color-background-info: var(--rs-color-blue-100);
49
+ --rs-color-severity-success-background: var(--rs-color-green-100);
50
+ --rs-color-severity-success-text: var(--rs-color-green-700);
51
+ --rs-color-severity-success-icon: var(--rs-color-green-500);
52
+ --rs-color-severity-success-border: var(--rs-color-green-500);
53
+ --rs-color-severity-info-background: var(--rs-color-blue-100);
54
+ --rs-color-severity-info-text: var(--rs-color-blue-700);
55
+ --rs-color-severity-info-icon: var(--rs-color-blue-500);
56
+ --rs-color-severity-info-border: var(--rs-color-blue-500);
57
+ --rs-color-severity-warning-background: var(--rs-color-yellow-100);
58
+ --rs-color-severity-warning-text: var(--rs-color-yellow-700);
59
+ --rs-color-severity-warning-icon: var(--rs-color-yellow-500);
60
+ --rs-color-severity-warning-border: var(--rs-color-yellow-500);
61
+ --rs-color-severity-danger-background: var(--rs-color-red-100);
62
+ --rs-color-severity-danger-text: var(--rs-color-red-700);
63
+ --rs-color-severity-danger-icon: var(--rs-color-red-500);
64
+ --rs-color-severity-danger-border: var(--rs-color-red-500);
65
+ --rs-color-severity-secondary-background: var(--rs-color-gray-100);
66
+ --rs-color-severity-secondary-text: var(--rs-color-gray-700);
67
+ --rs-color-severity-secondary-icon: var(--rs-color-gray-600);
68
+ --rs-color-severity-secondary-border: var(--rs-color-gray-500);
46
69
  --rs-color-surface-primary: var(--rs-color-white-500);
47
70
  --rs-color-surface-tertiary: var(--rs-color-black-500);
48
71
  --rs-color-surface-bg-primary: var(--rs-color-white-500);
@@ -277,7 +300,7 @@
277
300
  <tr>
278
301
  <td><span class="swatch" style="background: var(--rs-color-green-500);"></span><code>color-green-500</code></td>
279
302
  <td><code>--rs-color-green-500</code></td>
280
- <td><code>#4AE001</code></td>
303
+ <td><code>#4EAE01</code></td>
281
304
  <td></td>
282
305
  </tr>
283
306
  <tr>
@@ -388,6 +411,24 @@
388
411
  <td><code>#909090</code></td>
389
412
  <td></td>
390
413
  </tr>
414
+ <tr>
415
+ <td><span class="swatch" style="background: var(--rs-color-neutral-50);"></span><code>color-neutral-50</code></td>
416
+ <td><code>--rs-color-neutral-50</code></td>
417
+ <td><code>#FDFDFD</code></td>
418
+ <td></td>
419
+ </tr>
420
+ <tr>
421
+ <td><span class="swatch" style="background: var(--rs-color-neutral-100);"></span><code>color-neutral-100</code></td>
422
+ <td><code>--rs-color-neutral-100</code></td>
423
+ <td><code>#B0B0B0</code></td>
424
+ <td></td>
425
+ </tr>
426
+ <tr>
427
+ <td><span class="swatch" style="background: var(--rs-color-neutral-700);"></span><code>color-neutral-700</code></td>
428
+ <td><code>--rs-color-neutral-700</code></td>
429
+ <td><code>#A3A3A3</code></td>
430
+ <td></td>
431
+ </tr>
391
432
  <tr>
392
433
  <td><span class="swatch" style="background: var(--rs-color-black-500);"></span><code>color-black-500</code></td>
393
434
  <td><code>--rs-color-black-500</code></td>
@@ -454,6 +495,126 @@
454
495
  <td><code>var(--rs-color-blue-100)</code></td>
455
496
  <td></td>
456
497
  </tr>
498
+ <tr>
499
+ <td><span class="swatch" style="background: var(--rs-color-severity-success-background);"></span><code>color-severity-success-background</code></td>
500
+ <td><code>--rs-color-severity-success-background</code></td>
501
+ <td><code>var(--rs-color-green-100)</code></td>
502
+ <td></td>
503
+ </tr>
504
+ <tr>
505
+ <td><span class="swatch" style="background: var(--rs-color-severity-success-text);"></span><code>color-severity-success-text</code></td>
506
+ <td><code>--rs-color-severity-success-text</code></td>
507
+ <td><code>var(--rs-color-green-700)</code></td>
508
+ <td></td>
509
+ </tr>
510
+ <tr>
511
+ <td><span class="swatch" style="background: var(--rs-color-severity-success-icon);"></span><code>color-severity-success-icon</code></td>
512
+ <td><code>--rs-color-severity-success-icon</code></td>
513
+ <td><code>var(--rs-color-green-500)</code></td>
514
+ <td></td>
515
+ </tr>
516
+ <tr>
517
+ <td><span class="swatch" style="background: var(--rs-color-severity-success-border);"></span><code>color-severity-success-border</code></td>
518
+ <td><code>--rs-color-severity-success-border</code></td>
519
+ <td><code>var(--rs-color-green-500)</code></td>
520
+ <td></td>
521
+ </tr>
522
+ <tr>
523
+ <td><span class="swatch" style="background: var(--rs-color-severity-info-background);"></span><code>color-severity-info-background</code></td>
524
+ <td><code>--rs-color-severity-info-background</code></td>
525
+ <td><code>var(--rs-color-blue-100)</code></td>
526
+ <td></td>
527
+ </tr>
528
+ <tr>
529
+ <td><span class="swatch" style="background: var(--rs-color-severity-info-text);"></span><code>color-severity-info-text</code></td>
530
+ <td><code>--rs-color-severity-info-text</code></td>
531
+ <td><code>var(--rs-color-blue-700)</code></td>
532
+ <td></td>
533
+ </tr>
534
+ <tr>
535
+ <td><span class="swatch" style="background: var(--rs-color-severity-info-icon);"></span><code>color-severity-info-icon</code></td>
536
+ <td><code>--rs-color-severity-info-icon</code></td>
537
+ <td><code>var(--rs-color-blue-500)</code></td>
538
+ <td></td>
539
+ </tr>
540
+ <tr>
541
+ <td><span class="swatch" style="background: var(--rs-color-severity-info-border);"></span><code>color-severity-info-border</code></td>
542
+ <td><code>--rs-color-severity-info-border</code></td>
543
+ <td><code>var(--rs-color-blue-500)</code></td>
544
+ <td></td>
545
+ </tr>
546
+ <tr>
547
+ <td><span class="swatch" style="background: var(--rs-color-severity-warning-background);"></span><code>color-severity-warning-background</code></td>
548
+ <td><code>--rs-color-severity-warning-background</code></td>
549
+ <td><code>var(--rs-color-yellow-100)</code></td>
550
+ <td></td>
551
+ </tr>
552
+ <tr>
553
+ <td><span class="swatch" style="background: var(--rs-color-severity-warning-text);"></span><code>color-severity-warning-text</code></td>
554
+ <td><code>--rs-color-severity-warning-text</code></td>
555
+ <td><code>var(--rs-color-yellow-700)</code></td>
556
+ <td></td>
557
+ </tr>
558
+ <tr>
559
+ <td><span class="swatch" style="background: var(--rs-color-severity-warning-icon);"></span><code>color-severity-warning-icon</code></td>
560
+ <td><code>--rs-color-severity-warning-icon</code></td>
561
+ <td><code>var(--rs-color-yellow-500)</code></td>
562
+ <td></td>
563
+ </tr>
564
+ <tr>
565
+ <td><span class="swatch" style="background: var(--rs-color-severity-warning-border);"></span><code>color-severity-warning-border</code></td>
566
+ <td><code>--rs-color-severity-warning-border</code></td>
567
+ <td><code>var(--rs-color-yellow-500)</code></td>
568
+ <td></td>
569
+ </tr>
570
+ <tr>
571
+ <td><span class="swatch" style="background: var(--rs-color-severity-danger-background);"></span><code>color-severity-danger-background</code></td>
572
+ <td><code>--rs-color-severity-danger-background</code></td>
573
+ <td><code>var(--rs-color-red-100)</code></td>
574
+ <td></td>
575
+ </tr>
576
+ <tr>
577
+ <td><span class="swatch" style="background: var(--rs-color-severity-danger-text);"></span><code>color-severity-danger-text</code></td>
578
+ <td><code>--rs-color-severity-danger-text</code></td>
579
+ <td><code>var(--rs-color-red-700)</code></td>
580
+ <td></td>
581
+ </tr>
582
+ <tr>
583
+ <td><span class="swatch" style="background: var(--rs-color-severity-danger-icon);"></span><code>color-severity-danger-icon</code></td>
584
+ <td><code>--rs-color-severity-danger-icon</code></td>
585
+ <td><code>var(--rs-color-red-500)</code></td>
586
+ <td></td>
587
+ </tr>
588
+ <tr>
589
+ <td><span class="swatch" style="background: var(--rs-color-severity-danger-border);"></span><code>color-severity-danger-border</code></td>
590
+ <td><code>--rs-color-severity-danger-border</code></td>
591
+ <td><code>var(--rs-color-red-500)</code></td>
592
+ <td></td>
593
+ </tr>
594
+ <tr>
595
+ <td><span class="swatch" style="background: var(--rs-color-severity-secondary-background);"></span><code>color-severity-secondary-background</code></td>
596
+ <td><code>--rs-color-severity-secondary-background</code></td>
597
+ <td><code>var(--rs-color-gray-100)</code></td>
598
+ <td></td>
599
+ </tr>
600
+ <tr>
601
+ <td><span class="swatch" style="background: var(--rs-color-severity-secondary-text);"></span><code>color-severity-secondary-text</code></td>
602
+ <td><code>--rs-color-severity-secondary-text</code></td>
603
+ <td><code>var(--rs-color-gray-700)</code></td>
604
+ <td></td>
605
+ </tr>
606
+ <tr>
607
+ <td><span class="swatch" style="background: var(--rs-color-severity-secondary-icon);"></span><code>color-severity-secondary-icon</code></td>
608
+ <td><code>--rs-color-severity-secondary-icon</code></td>
609
+ <td><code>var(--rs-color-gray-600)</code></td>
610
+ <td></td>
611
+ </tr>
612
+ <tr>
613
+ <td><span class="swatch" style="background: var(--rs-color-severity-secondary-border);"></span><code>color-severity-secondary-border</code></td>
614
+ <td><code>--rs-color-severity-secondary-border</code></td>
615
+ <td><code>var(--rs-color-gray-500)</code></td>
616
+ <td></td>
617
+ </tr>
457
618
  <tr>
458
619
  <td><span class="swatch" style="background: var(--rs-color-surface-primary);"></span><code>color-surface-primary</code></td>
459
620
  <td><code>--rs-color-surface-primary</code></td>
package/dist/tokens.json CHANGED
@@ -27,7 +27,7 @@
27
27
  },
28
28
  "color-green-500": {
29
29
  "cssVariable": "--rs-color-green-500",
30
- "value": "#4AE001",
30
+ "value": "#4EAE01",
31
31
  "type": "color"
32
32
  },
33
33
  "color-green-700": {
@@ -122,6 +122,21 @@
122
122
  "value": "#909090",
123
123
  "type": "color"
124
124
  },
125
+ "color-neutral-50": {
126
+ "cssVariable": "--rs-color-neutral-50",
127
+ "value": "#FDFDFD",
128
+ "type": "color"
129
+ },
130
+ "color-neutral-100": {
131
+ "cssVariable": "--rs-color-neutral-100",
132
+ "value": "#B0B0B0",
133
+ "type": "color"
134
+ },
135
+ "color-neutral-700": {
136
+ "cssVariable": "--rs-color-neutral-700",
137
+ "value": "#A3A3A3",
138
+ "type": "color"
139
+ },
125
140
  "color-black-500": {
126
141
  "cssVariable": "--rs-color-black-500",
127
142
  "value": "#000000",
@@ -187,6 +202,106 @@
187
202
  "value": "var(--rs-color-blue-100)",
188
203
  "type": "color"
189
204
  },
205
+ "color-severity-success-background": {
206
+ "cssVariable": "--rs-color-severity-success-background",
207
+ "value": "var(--rs-color-green-100)",
208
+ "type": "color"
209
+ },
210
+ "color-severity-success-text": {
211
+ "cssVariable": "--rs-color-severity-success-text",
212
+ "value": "var(--rs-color-green-700)",
213
+ "type": "color"
214
+ },
215
+ "color-severity-success-icon": {
216
+ "cssVariable": "--rs-color-severity-success-icon",
217
+ "value": "var(--rs-color-green-500)",
218
+ "type": "color"
219
+ },
220
+ "color-severity-success-border": {
221
+ "cssVariable": "--rs-color-severity-success-border",
222
+ "value": "var(--rs-color-green-500)",
223
+ "type": "color"
224
+ },
225
+ "color-severity-info-background": {
226
+ "cssVariable": "--rs-color-severity-info-background",
227
+ "value": "var(--rs-color-blue-100)",
228
+ "type": "color"
229
+ },
230
+ "color-severity-info-text": {
231
+ "cssVariable": "--rs-color-severity-info-text",
232
+ "value": "var(--rs-color-blue-700)",
233
+ "type": "color"
234
+ },
235
+ "color-severity-info-icon": {
236
+ "cssVariable": "--rs-color-severity-info-icon",
237
+ "value": "var(--rs-color-blue-500)",
238
+ "type": "color"
239
+ },
240
+ "color-severity-info-border": {
241
+ "cssVariable": "--rs-color-severity-info-border",
242
+ "value": "var(--rs-color-blue-500)",
243
+ "type": "color"
244
+ },
245
+ "color-severity-warning-background": {
246
+ "cssVariable": "--rs-color-severity-warning-background",
247
+ "value": "var(--rs-color-yellow-100)",
248
+ "type": "color"
249
+ },
250
+ "color-severity-warning-text": {
251
+ "cssVariable": "--rs-color-severity-warning-text",
252
+ "value": "var(--rs-color-yellow-700)",
253
+ "type": "color"
254
+ },
255
+ "color-severity-warning-icon": {
256
+ "cssVariable": "--rs-color-severity-warning-icon",
257
+ "value": "var(--rs-color-yellow-500)",
258
+ "type": "color"
259
+ },
260
+ "color-severity-warning-border": {
261
+ "cssVariable": "--rs-color-severity-warning-border",
262
+ "value": "var(--rs-color-yellow-500)",
263
+ "type": "color"
264
+ },
265
+ "color-severity-danger-background": {
266
+ "cssVariable": "--rs-color-severity-danger-background",
267
+ "value": "var(--rs-color-red-100)",
268
+ "type": "color"
269
+ },
270
+ "color-severity-danger-text": {
271
+ "cssVariable": "--rs-color-severity-danger-text",
272
+ "value": "var(--rs-color-red-700)",
273
+ "type": "color"
274
+ },
275
+ "color-severity-danger-icon": {
276
+ "cssVariable": "--rs-color-severity-danger-icon",
277
+ "value": "var(--rs-color-red-500)",
278
+ "type": "color"
279
+ },
280
+ "color-severity-danger-border": {
281
+ "cssVariable": "--rs-color-severity-danger-border",
282
+ "value": "var(--rs-color-red-500)",
283
+ "type": "color"
284
+ },
285
+ "color-severity-secondary-background": {
286
+ "cssVariable": "--rs-color-severity-secondary-background",
287
+ "value": "var(--rs-color-gray-100)",
288
+ "type": "color"
289
+ },
290
+ "color-severity-secondary-text": {
291
+ "cssVariable": "--rs-color-severity-secondary-text",
292
+ "value": "var(--rs-color-gray-700)",
293
+ "type": "color"
294
+ },
295
+ "color-severity-secondary-icon": {
296
+ "cssVariable": "--rs-color-severity-secondary-icon",
297
+ "value": "var(--rs-color-gray-600)",
298
+ "type": "color"
299
+ },
300
+ "color-severity-secondary-border": {
301
+ "cssVariable": "--rs-color-severity-secondary-border",
302
+ "value": "var(--rs-color-gray-500)",
303
+ "type": "color"
304
+ },
190
305
  "color-surface-primary": {
191
306
  "cssVariable": "--rs-color-surface-primary",
192
307
  "value": "var(--rs-color-white-500)",
package/dist/tokens.md CHANGED
@@ -14,7 +14,7 @@ Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.cs
14
14
  | `color-blue-500` | `--rs-color-blue-500` | `#48A0D4` | |
15
15
  | `color-blue-700` | `--rs-color-blue-700` | `#2A719B` | |
16
16
  | `color-green-100` | `--rs-color-green-100` | `#EDF7E6` | |
17
- | `color-green-500` | `--rs-color-green-500` | `#4AE001` | |
17
+ | `color-green-500` | `--rs-color-green-500` | `#4EAE01` | |
18
18
  | `color-green-700` | `--rs-color-green-700` | `#3A8501` | |
19
19
  | `color-navygreen-100` | `--rs-color-navygreen-100` | `#E5F1EA` | |
20
20
  | `color-navygreen-500` | `--rs-color-navygreen-500` | `#007C2F` | |
@@ -33,6 +33,9 @@ Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.cs
33
33
  | `color-gray-500` | `--rs-color-gray-500` | `#D1D1D1` | |
34
34
  | `color-gray-600` | `--rs-color-gray-600` | `#545454` | |
35
35
  | `color-gray-700` | `--rs-color-gray-700` | `#909090` | |
36
+ | `color-neutral-50` | `--rs-color-neutral-50` | `#FDFDFD` | |
37
+ | `color-neutral-100` | `--rs-color-neutral-100` | `#B0B0B0` | |
38
+ | `color-neutral-700` | `--rs-color-neutral-700` | `#A3A3A3` | |
36
39
  | `color-black-500` | `--rs-color-black-500` | `#000000` | |
37
40
  | `color-white-500` | `--rs-color-white-500` | `#FFFFFF` | |
38
41
  | `color-project-pc` | `--rs-color-project-pc` | `#014A9F` | Project brand color for Plan Comercial. |
@@ -44,6 +47,26 @@ Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.cs
44
47
  | `color-background-disabled` | `--rs-color-background-disabled` | `var(--rs-color-gray-100)` | |
45
48
  | `color-background-caution` | `--rs-color-background-caution` | `var(--rs-color-yellow-100)` | |
46
49
  | `color-background-info` | `--rs-color-background-info` | `var(--rs-color-blue-100)` | |
50
+ | `color-severity-success-background` | `--rs-color-severity-success-background` | `var(--rs-color-green-100)` | |
51
+ | `color-severity-success-text` | `--rs-color-severity-success-text` | `var(--rs-color-green-700)` | |
52
+ | `color-severity-success-icon` | `--rs-color-severity-success-icon` | `var(--rs-color-green-500)` | |
53
+ | `color-severity-success-border` | `--rs-color-severity-success-border` | `var(--rs-color-green-500)` | |
54
+ | `color-severity-info-background` | `--rs-color-severity-info-background` | `var(--rs-color-blue-100)` | |
55
+ | `color-severity-info-text` | `--rs-color-severity-info-text` | `var(--rs-color-blue-700)` | |
56
+ | `color-severity-info-icon` | `--rs-color-severity-info-icon` | `var(--rs-color-blue-500)` | |
57
+ | `color-severity-info-border` | `--rs-color-severity-info-border` | `var(--rs-color-blue-500)` | |
58
+ | `color-severity-warning-background` | `--rs-color-severity-warning-background` | `var(--rs-color-yellow-100)` | |
59
+ | `color-severity-warning-text` | `--rs-color-severity-warning-text` | `var(--rs-color-yellow-700)` | |
60
+ | `color-severity-warning-icon` | `--rs-color-severity-warning-icon` | `var(--rs-color-yellow-500)` | |
61
+ | `color-severity-warning-border` | `--rs-color-severity-warning-border` | `var(--rs-color-yellow-500)` | |
62
+ | `color-severity-danger-background` | `--rs-color-severity-danger-background` | `var(--rs-color-red-100)` | |
63
+ | `color-severity-danger-text` | `--rs-color-severity-danger-text` | `var(--rs-color-red-700)` | |
64
+ | `color-severity-danger-icon` | `--rs-color-severity-danger-icon` | `var(--rs-color-red-500)` | |
65
+ | `color-severity-danger-border` | `--rs-color-severity-danger-border` | `var(--rs-color-red-500)` | |
66
+ | `color-severity-secondary-background` | `--rs-color-severity-secondary-background` | `var(--rs-color-gray-100)` | |
67
+ | `color-severity-secondary-text` | `--rs-color-severity-secondary-text` | `var(--rs-color-gray-700)` | |
68
+ | `color-severity-secondary-icon` | `--rs-color-severity-secondary-icon` | `var(--rs-color-gray-600)` | |
69
+ | `color-severity-secondary-border` | `--rs-color-severity-secondary-border` | `var(--rs-color-gray-500)` | |
47
70
  | `color-surface-primary` | `--rs-color-surface-primary` | `var(--rs-color-white-500)` | |
48
71
  | `color-surface-tertiary` | `--rs-color-surface-tertiary` | `var(--rs-color-black-500)` | |
49
72
  | `color-surface-bg-primary` | `--rs-color-surface-bg-primary` | `var(--rs-color-white-500)` | |
package/package.json CHANGED
@@ -1,48 +1,48 @@
1
- {
2
- "name": "@robosophy/tokens",
3
- "version": "1.0.14",
4
- "private": false,
5
- "license": "UNLICENSED",
6
- "type": "module",
7
- "main": "./dist/index.js",
8
- "types": "./dist/index.d.ts",
9
- "bin": {
10
- "robosophy-tokens": "./dist/cli.js"
11
- },
12
- "exports": {
13
- ".": {
14
- "types": "./dist/index.d.ts",
15
- "default": "./dist/index.js"
16
- },
17
- "./tokens.css": "./dist/tokens.css",
18
- "./tailwind.css": "./dist/tailwind.css",
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",
23
- "./tailwind-preset": {
24
- "types": "./dist/tailwind-preset.d.ts",
25
- "default": "./dist/tailwind-preset.js"
26
- }
27
- },
28
- "files": [
29
- "AGENTS.md",
30
- "dist",
31
- "README.md",
32
- "package.json"
33
- ],
34
- "sideEffects": [
35
- "**/*.css"
36
- ],
37
- "scripts": {
38
- "prepublishOnly": "npm run build",
39
- "build": "tsup scripts/build-tokens.ts --format esm --platform node --out-dir .build --clean && node .build/build-tokens.js && rimraf .build",
40
- "test": "node --test scripts/*.test.mjs"
41
- },
42
- "devDependencies": {
43
- "@types/node": "^24.10.1",
44
- "rimraf": "^6.0.1",
45
- "tsup": "^8.5.0",
46
- "typescript": "^5.9.3"
47
- }
1
+ {
2
+ "name": "@robosophy/tokens",
3
+ "version": "1.1.0",
4
+ "private": false,
5
+ "license": "UNLICENSED",
6
+ "type": "module",
7
+ "main": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "bin": {
10
+ "robosophy-tokens": "./dist/cli.js"
11
+ },
12
+ "exports": {
13
+ ".": {
14
+ "types": "./dist/index.d.ts",
15
+ "default": "./dist/index.js"
16
+ },
17
+ "./tokens.css": "./dist/tokens.css",
18
+ "./tailwind.css": "./dist/tailwind.css",
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",
23
+ "./tailwind-preset": {
24
+ "types": "./dist/tailwind-preset.d.ts",
25
+ "default": "./dist/tailwind-preset.js"
26
+ }
27
+ },
28
+ "files": [
29
+ "AGENTS.md",
30
+ "dist",
31
+ "README.md",
32
+ "package.json"
33
+ ],
34
+ "sideEffects": [
35
+ "**/*.css"
36
+ ],
37
+ "scripts": {
38
+ "prepublishOnly": "npm run build",
39
+ "build": "tsup scripts/build-tokens.ts --format esm --platform node --out-dir .build --clean && node .build/build-tokens.js && rimraf .build",
40
+ "test": "node --test scripts/*.test.mjs"
41
+ },
42
+ "devDependencies": {
43
+ "@types/node": "^24.10.1",
44
+ "rimraf": "^6.0.1",
45
+ "tsup": "^8.5.0",
46
+ "typescript": "^5.9.3"
47
+ }
48
48
  }