@robosophy/tokens 1.0.14 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/AGENTS.md +11 -9
  2. package/README.md +86 -65
  3. package/dist/ai-context.md +42 -6
  4. package/dist/cli.js +85 -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 +25 -2
  13. package/package.json +48 -48
package/AGENTS.md CHANGED
@@ -1,9 +1,11 @@
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`, which already includes the tokens.
6
+ - Prime Theme provides overrides in `prime-design`; the consuming app owns the layer order. Keep Prime's runtime/base styles first, Robosophy overrides after them, and app styles unlayered so they can override both.
7
+ - In PrimeVue apps, declare `@layer primevue, prime-base, prime-design;` in the app CSS before importing `@robosophy/prime-theme/prime.css`, and enable `theme.options.cssLayer` with name `primevue` and the same order.
8
+ - In PrimeReact apps, put `primereact/resources/themes/fluent-light/theme.css` in `prime-base` and import `@robosophy/prime-theme/prime.css` in `prime-design`. PrimeReact 10 uses legacy CSS variables, not `@primeuix/themes` like Vue. Only `fluent-light` is compatible with Robosophy overrides.
9
+ - Public CSS tokens use the `--rs-` prefix.
10
+ - Do not hardcode hex colors when an equivalent Robosophy token exists.
11
+ - Prefer semantic tokens over primitive palette tokens for component styles.
package/README.md CHANGED
@@ -1,65 +1,86 @@
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 `prime.css` desde el CSS de la app; ese archivo ya importa `@robosophy/tokens/tokens.css`. La app consumidora debe definir el orden de layers: estilos base/runtime de Prime primero, overrides de Robosophy en `prime-design` después y estilos propios sin layer para conservar la mayor prioridad. En PrimeVue, además, habilita `theme.options.cssLayer` con la misma configuración de layers de la app.
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. La app consumidora controla el orden de layers: el tema `fluent-light` va en `prime-base` y los overrides de Robosophy en `prime-design`:
35
+
36
+ ```css
37
+ @layer prime-base, prime-design;
38
+ @import "primereact/resources/themes/fluent-light/theme.css" layer(prime-base);
39
+ @import "@robosophy/prime-theme/prime.css" layer(prime-design);
40
+ ```
41
+
42
+ Los estilos propios de la app, sin layer, pueden sobrescribir ambos niveles. Solo `fluent-light` es compatible con los overrides de Robosophy.
43
+
44
+ Para Tailwind, agrega el artefacto de Tailwind ademas del CSS base que corresponda:
45
+
46
+ ```ts
47
+ import "@robosophy/tokens/tailwind.css";
48
+ ```
49
+
50
+ Los tokens CSS publicos usan el prefijo `--rs-`.
51
+
52
+ ```css
53
+ .button {
54
+ background: var(--rs-color-button-primary);
55
+ color: var(--rs-color-text-button-primary);
56
+ }
57
+ ```
58
+
59
+ ## Contexto para agentes de IA
60
+
61
+ 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`.
62
+
63
+ - `AGENTS.md`: reglas cortas para agentes.
64
+ - `dist/ai-context.md`: reglas de uso, imports y lista de tokens.
65
+ - `dist/tokens.md`: referencia en Markdown.
66
+ - `dist/tokens.json`: datos estructurados.
67
+
68
+ Para que Codex u otros agentes tengan instrucciones a nivel proyecto, ejecuta:
69
+
70
+ ```sh
71
+ npx robosophy-tokens init
72
+ ```
73
+
74
+ El comando crea o actualiza una seccion marcada en `AGENTS.md` sin sobrescribir otras instrucciones del proyecto.
75
+
76
+ ## Referencia visual
77
+
78
+ Despues de instalar el paquete, puedes abrir:
79
+
80
+ ```txt
81
+ node_modules/@robosophy/tokens/dist/tokens.html
82
+ ```
83
+
84
+ Tambien puedes consultar `@robosophy/tokens/tokens.md`, `@robosophy/tokens/ai-context.md` y `@robosophy/tokens/tokens.json`.
85
+
86
+ La fuente de verdad está en `src/tokens.ts`. Los archivos de `dist/` son generados.
package/dist/ai-context.md CHANGED
@@ -5,8 +5,10 @@ Use this file as the source of truth when generating UI code in projects that de
5
5
 
6
6
  ## Rules
7
7
 
8
- - Import `@robosophy/tokens/tokens.css` before using Robosophy CSS variables, unless the app imports `@robosophy/prime-theme/prime.css`.
9
- - In PrimeVue apps, import only `@robosophy/prime-theme/prime.css`; it already includes `@robosophy/tokens/tokens.css`.
8
+ - Import `@robosophy/tokens/tokens.css` before using Robosophy CSS variables, unless the app imports `@robosophy/prime-theme/prime.css`, which already includes it.
9
+ - Prime Theme places Robosophy overrides in `prime-design`; the consuming app owns the layer order. Keep Prime runtime/base styles first, Prime Theme overrides after them, and app styles unlayered so they can override both.
10
+ - In PrimeVue apps, declare `@layer primevue, prime-base, prime-design;` in app CSS before importing `@robosophy/prime-theme/prime.css`, and enable `theme.options.cssLayer` with name `primevue` and the same order.
11
+ - In PrimeReact apps, place `primereact/resources/themes/fluent-light/theme.css` in `prime-base` and import `@robosophy/prime-theme/prime.css` in `prime-design`. PrimeReact 10 uses legacy CSS variables, not `@primeuix/themes` like Vue. Only `fluent-light` is compatible with Robosophy overrides.
10
12
  - Use public CSS variables with the `--rs-` prefix.
11
13
  - Do not hardcode hex colors when an equivalent Robosophy token exists.
12
14
  - 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.
@@ -21,10 +23,21 @@ Use the direct tokens import when the app does not use `@robosophy/prime-theme`:
21
23
  import "@robosophy/tokens/tokens.css";
22
24
  ```
23
25
 
24
- Use the Prime theme import in PrimeVue apps:
26
+ In PrimeVue apps, the consuming app owns the layer order. Declare it before importing the Prime Theme CSS, then enable the matching runtime layer in PrimeVue:
25
27
 
26
- ```ts
27
- import "@robosophy/prime-theme/prime.css";
28
+ ```css
29
+ @layer primevue, prime-base, prime-design;
30
+ @import "@robosophy/prime-theme/prime.css";
31
+ ```
32
+
33
+ Then configure PrimeVue `theme.options.cssLayer` with name `primevue` and order `primevue, prime-base, prime-design`.
34
+
35
+ In PrimeReact apps, place the fluent-light theme in `prime-base` and import the Robosophy overrides after it:
36
+
37
+ ```css
38
+ @layer prime-base, prime-design;
39
+ @import "primereact/resources/themes/fluent-light/theme.css" layer(prime-base);
40
+ @import "@robosophy/prime-theme/prime.css" layer(prime-design);
28
41
  ```
29
42
 
30
43
  Optional token artifacts:
@@ -44,7 +57,7 @@ import tokensJson from "@robosophy/tokens/tokens.json";
44
57
  - `--rs-color-blue-500`: `#48A0D4`
45
58
  - `--rs-color-blue-700`: `#2A719B`
46
59
  - `--rs-color-green-100`: `#EDF7E6`
47
- - `--rs-color-green-500`: `#4AE001`
60
+ - `--rs-color-green-500`: `#4EAE01`
48
61
  - `--rs-color-green-700`: `#3A8501`
49
62
  - `--rs-color-navygreen-100`: `#E5F1EA`
50
63
  - `--rs-color-navygreen-500`: `#007C2F`
@@ -63,6 +76,9 @@ import tokensJson from "@robosophy/tokens/tokens.json";
63
76
  - `--rs-color-gray-500`: `#D1D1D1`
64
77
  - `--rs-color-gray-600`: `#545454`
65
78
  - `--rs-color-gray-700`: `#909090`
79
+ - `--rs-color-neutral-50`: `#FDFDFD`
80
+ - `--rs-color-neutral-100`: `#B0B0B0`
81
+ - `--rs-color-neutral-700`: `#A3A3A3`
66
82
  - `--rs-color-black-500`: `#000000`
67
83
  - `--rs-color-white-500`: `#FFFFFF`
68
84
  - `--rs-color-project-pc`: `#014A9F` - Project brand color for Plan Comercial.
@@ -74,6 +90,26 @@ import tokensJson from "@robosophy/tokens/tokens.json";
74
90
  - `--rs-color-background-disabled`: `var(--rs-color-gray-100)`
75
91
  - `--rs-color-background-caution`: `var(--rs-color-yellow-100)`
76
92
  - `--rs-color-background-info`: `var(--rs-color-blue-100)`
93
+ - `--rs-color-severity-success-background`: `var(--rs-color-green-100)`
94
+ - `--rs-color-severity-success-text`: `var(--rs-color-green-700)`
95
+ - `--rs-color-severity-success-icon`: `var(--rs-color-green-500)`
96
+ - `--rs-color-severity-success-border`: `var(--rs-color-green-500)`
97
+ - `--rs-color-severity-info-background`: `var(--rs-color-blue-100)`
98
+ - `--rs-color-severity-info-text`: `var(--rs-color-blue-700)`
99
+ - `--rs-color-severity-info-icon`: `var(--rs-color-blue-500)`
100
+ - `--rs-color-severity-info-border`: `var(--rs-color-blue-500)`
101
+ - `--rs-color-severity-warning-background`: `var(--rs-color-yellow-100)`
102
+ - `--rs-color-severity-warning-text`: `var(--rs-color-yellow-700)`
103
+ - `--rs-color-severity-warning-icon`: `var(--rs-color-yellow-500)`
104
+ - `--rs-color-severity-warning-border`: `var(--rs-color-yellow-500)`
105
+ - `--rs-color-severity-danger-background`: `var(--rs-color-red-100)`
106
+ - `--rs-color-severity-danger-text`: `var(--rs-color-red-700)`
107
+ - `--rs-color-severity-danger-icon`: `var(--rs-color-red-500)`
108
+ - `--rs-color-severity-danger-border`: `var(--rs-color-red-500)`
109
+ - `--rs-color-severity-secondary-background`: `var(--rs-color-gray-100)`
110
+ - `--rs-color-severity-secondary-text`: `var(--rs-color-gray-700)`
111
+ - `--rs-color-severity-secondary-icon`: `var(--rs-color-gray-600)`
112
+ - `--rs-color-severity-secondary-border`: `var(--rs-color-gray-500)`
77
113
  - `--rs-color-surface-primary`: `var(--rs-color-white-500)`
78
114
  - `--rs-color-surface-tertiary`: `var(--rs-color-black-500)`
79
115
  - `--rs-color-surface-bg-primary`: `var(--rs-color-white-500)`
package/dist/cli.js CHANGED
@@ -1,83 +1,85 @@
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\`, which already includes it.
14
+ - Prime Theme places Robosophy overrides in \`prime-design\`; the consuming app owns the layer order. Keep Prime runtime/base styles first, Prime Theme overrides after them, and app styles unlayered so they can override both.
15
+ - In PrimeVue apps, declare \`@layer primevue, prime-base, prime-design;\` in app CSS before importing \`@robosophy/prime-theme/prime.css\`, and enable \`theme.options.cssLayer\` with name \`primevue\` and the same order.
16
+ - In PrimeReact apps, place \`primereact/resources/themes/fluent-light/theme.css\` in \`prime-base\` and import \`@robosophy/prime-theme/prime.css\` in \`prime-design\`. PrimeReact 10 uses legacy CSS variables, not \`@primeuix/themes\` like Vue. Only \`fluent-light\` is compatible with Robosophy overrides.
17
+ - Use public CSS variables with the \`--rs-\` prefix.
18
+ - Do not hardcode hex colors when an equivalent Robosophy token exists.
19
+ - Prefer semantic tokens over primitive palette tokens for component styles.
20
+ - Check the installed token context before inventing new design values.
21
+
22
+ Installed references:
23
+
24
+ - \`node_modules/@robosophy/tokens/dist/ai-context.md\`
25
+ - \`node_modules/@robosophy/tokens/dist/tokens.md\`
26
+ - \`node_modules/@robosophy/tokens/dist/tokens.json\`
27
+ ${endMarker}`;
28
+
29
+ function usage() {
30
+ return `Usage: robosophy-tokens init
31
+
32
+ Commands:
33
+ init Create or update the Robosophy section in AGENTS.md
34
+ `;
35
+ }
36
+
37
+ async function readText(path) {
38
+ try {
39
+ return await readFile(path, "utf8");
40
+ } catch (error) {
41
+ if (error && error.code === "ENOENT") {
42
+ return null;
43
+ }
44
+
45
+ throw error;
46
+ }
47
+ }
48
+
49
+ function updateAgentsContent(current) {
50
+ if (current === null) {
51
+ return `# Project instructions
52
+
53
+ ${section}
54
+ `;
55
+ }
56
+
57
+ const markerPattern = new RegExp(`${startMarker}[\\s\\S]*?${endMarker}`);
58
+
59
+ if (markerPattern.test(current)) {
60
+ return current.replace(markerPattern, section);
61
+ }
62
+
63
+ const trimmed = current.trimEnd();
64
+ const prefix = trimmed.length > 0 ? `${trimmed}\n\n` : "";
65
+
66
+ return `${prefix}${section}\n`;
67
+ }
68
+
69
+ async function init() {
70
+ const agentsPath = resolve(process.cwd(), "AGENTS.md");
71
+ const current = await readText(agentsPath);
72
+ const next = updateAgentsContent(current);
73
+
74
+ await writeFile(agentsPath, next);
75
+ console.log(current === null ? "Created AGENTS.md with Robosophy token context." : "Updated AGENTS.md with Robosophy token context.");
76
+ }
77
+
78
+ const [command] = process.argv.slice(2);
79
+
80
+ if (command === "init") {
81
+ await init();
82
+ } else {
83
+ console.error(usage());
84
+ process.exitCode = command === undefined || command === "--help" || command === "-h" ? 0 : 1;
85
+ }
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
@@ -3,7 +3,7 @@
3
3
 
4
4
  Generated from `packages/tokens/src/tokens.ts`.
5
5
 
6
- Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.css` before using them, unless the app imports `@robosophy/prime-theme/prime.css` which already includes it.
6
+ Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.css` before using them, unless the app imports `@robosophy/prime-theme/prime.css`, which already includes it.
7
7
 
8
8
  ## Color tokens
9
9
 
@@ -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
- }
48
- }
1
+ {
2
+ "name": "@robosophy/tokens",
3
+ "version": "1.1.1",
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
+ }