@robosophy/tokens 1.0.13 → 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 (12) hide show
  1. package/AGENTS.md +1 -0
  2. package/README.md +20 -0
  3. package/dist/ai-context.md +33 -1
  4. package/dist/index.d.ts +25 -1
  5. package/dist/index.js +25 -1
  6. package/dist/tailwind-preset.js +24 -0
  7. package/dist/tailwind.css +24 -0
  8. package/dist/tokens.css +49 -1
  9. package/dist/tokens.html +170 -2
  10. package/dist/tokens.json +121 -1
  11. package/dist/tokens.md +25 -1
  12. package/package.json +2 -2
package/AGENTS.md CHANGED
@@ -4,6 +4,7 @@
4
4
  - Use `dist/tokens.md` or `dist/tokens.json` to inspect available tokens before creating UI styles.
5
5
  - Import `@robosophy/tokens/tokens.css` before using Robosophy CSS variables, unless the app imports `@robosophy/prime-theme/prime.css`.
6
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.
7
8
  - Public CSS tokens use the `--rs-` prefix.
8
9
  - Do not hardcode hex colors when an equivalent Robosophy token exists.
9
10
  - Prefer semantic tokens over primitive palette tokens for component styles.
package/README.md CHANGED
@@ -20,6 +20,26 @@ import tokensJson from "@robosophy/tokens/tokens.json";
20
20
 
21
21
  Si la app usa `@robosophy/prime-theme`, importa solo `@robosophy/prime-theme/prime.css`: ese CSS ya importa `@robosophy/tokens/tokens.css`.
22
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
+
23
43
  Para Tailwind, agrega el artefacto de Tailwind ademas del CSS base que corresponda:
24
44
 
25
45
  ```ts
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)`
@@ -100,6 +131,7 @@ import tokensJson from "@robosophy/tokens/tokens.json";
100
131
  - `--rs-color-text-button-tertiary-hover`: `var(--rs-color-blue-700)`
101
132
  - `--rs-color-icon-primary`: `var(--rs-color-blue-500)`
102
133
  - `--rs-color-icon-secondary`: `var(--rs-color-black-500)`
134
+ - `--rs-color-icon-disabled`: `var(--rs-color-gray-500)`
103
135
  - `--rs-color-icon-button-primary`: `var(--rs-color-white-500)`
104
136
  - `--rs-color-icon-button-secondary`: `var(--rs-color-gray-600)`
105
137
  - `--rs-color-icon-button-tertiary`: `var(--rs-color-blue-500)`
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)";
@@ -62,6 +85,7 @@ export declare const tokens: {
62
85
  readonly "color-text-button-tertiary-hover": "var(--rs-color-blue-700)";
63
86
  readonly "color-icon-primary": "var(--rs-color-blue-500)";
64
87
  readonly "color-icon-secondary": "var(--rs-color-black-500)";
88
+ readonly "color-icon-disabled": "var(--rs-color-gray-500)";
65
89
  readonly "color-icon-button-primary": "var(--rs-color-white-500)";
66
90
  readonly "color-icon-button-secondary": "var(--rs-color-gray-600)";
67
91
  readonly "color-icon-button-tertiary": "var(--rs-color-blue-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)",
@@ -62,6 +85,7 @@ export const tokens = {
62
85
  "color-text-button-tertiary-hover": "var(--rs-color-blue-700)",
63
86
  "color-icon-primary": "var(--rs-color-blue-500)",
64
87
  "color-icon-secondary": "var(--rs-color-black-500)",
88
+ "color-icon-disabled": "var(--rs-color-gray-500)",
65
89
  "color-icon-button-primary": "var(--rs-color-white-500)",
66
90
  "color-icon-button-secondary": "var(--rs-color-gray-600)",
67
91
  "color-icon-button-tertiary": "var(--rs-color-blue-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)",
@@ -65,6 +88,7 @@ const preset = {
65
88
  "text-button-tertiary-hover": "var(--rs-color-text-button-tertiary-hover)",
66
89
  "icon-primary": "var(--rs-color-icon-primary)",
67
90
  "icon-secondary": "var(--rs-color-icon-secondary)",
91
+ "icon-disabled": "var(--rs-color-icon-disabled)",
68
92
  "icon-button-primary": "var(--rs-color-icon-button-primary)",
69
93
  "icon-button-secondary": "var(--rs-color-icon-button-secondary)",
70
94
  "icon-button-tertiary": "var(--rs-color-icon-button-tertiary)",
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);
@@ -62,6 +85,7 @@
62
85
  --color-rs-text-button-tertiary-hover: var(--rs-color-text-button-tertiary-hover);
63
86
  --color-rs-icon-primary: var(--rs-color-icon-primary);
64
87
  --color-rs-icon-secondary: var(--rs-color-icon-secondary);
88
+ --color-rs-icon-disabled: var(--rs-color-icon-disabled);
65
89
  --color-rs-icon-button-primary: var(--rs-color-icon-button-primary);
66
90
  --color-rs-icon-button-secondary: var(--rs-color-icon-button-secondary);
67
91
  --color-rs-icon-button-tertiary: var(--rs-color-icon-button-tertiary);
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);
@@ -62,6 +85,7 @@
62
85
  --rs-color-text-button-tertiary-hover: var(--rs-color-blue-700);
63
86
  --rs-color-icon-primary: var(--rs-color-blue-500);
64
87
  --rs-color-icon-secondary: var(--rs-color-black-500);
88
+ --rs-color-icon-disabled: var(--rs-color-gray-500);
65
89
  --rs-color-icon-button-primary: var(--rs-color-white-500);
66
90
  --rs-color-icon-button-secondary: var(--rs-color-gray-600);
67
91
  --rs-color-icon-button-tertiary: var(--rs-color-blue-500);
@@ -141,6 +165,9 @@
141
165
  --color-gray-500: var(--rs-color-gray-500);
142
166
  --color-gray-600: var(--rs-color-gray-600);
143
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);
144
171
  --color-black-500: var(--rs-color-black-500);
145
172
  --color-white-500: var(--rs-color-white-500);
146
173
  --color-project-pc: var(--rs-color-project-pc);
@@ -153,6 +180,26 @@
153
180
  --color-background-disabled: var(--rs-color-background-disabled);
154
181
  --color-background-caution: var(--rs-color-background-caution);
155
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);
156
203
  --color-surface-primary: var(--rs-color-surface-primary);
157
204
  --color-surface-tertiary: var(--rs-color-surface-tertiary);
158
205
  --color-surface-bg-primary: var(--rs-color-surface-bg-primary);
@@ -179,6 +226,7 @@
179
226
  --color-text-button-tertiary-hover: var(--rs-color-text-button-tertiary-hover);
180
227
  --color-icon-primary: var(--rs-color-icon-primary);
181
228
  --color-icon-secondary: var(--rs-color-icon-secondary);
229
+ --color-icon-disabled: var(--rs-color-icon-disabled);
182
230
  --color-icon-button-primary: var(--rs-color-icon-button-primary);
183
231
  --color-icon-button-secondary: var(--rs-color-icon-button-secondary);
184
232
  --color-icon-button-tertiary: var(--rs-color-icon-button-tertiary);
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);
@@ -69,6 +92,7 @@
69
92
  --rs-color-text-button-tertiary-hover: var(--rs-color-blue-700);
70
93
  --rs-color-icon-primary: var(--rs-color-blue-500);
71
94
  --rs-color-icon-secondary: var(--rs-color-black-500);
95
+ --rs-color-icon-disabled: var(--rs-color-gray-500);
72
96
  --rs-color-icon-button-primary: var(--rs-color-white-500);
73
97
  --rs-color-icon-button-secondary: var(--rs-color-gray-600);
74
98
  --rs-color-icon-button-tertiary: var(--rs-color-blue-500);
@@ -276,7 +300,7 @@
276
300
  <tr>
277
301
  <td><span class="swatch" style="background: var(--rs-color-green-500);"></span><code>color-green-500</code></td>
278
302
  <td><code>--rs-color-green-500</code></td>
279
- <td><code>#4AE001</code></td>
303
+ <td><code>#4EAE01</code></td>
280
304
  <td></td>
281
305
  </tr>
282
306
  <tr>
@@ -387,6 +411,24 @@
387
411
  <td><code>#909090</code></td>
388
412
  <td></td>
389
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>
390
432
  <tr>
391
433
  <td><span class="swatch" style="background: var(--rs-color-black-500);"></span><code>color-black-500</code></td>
392
434
  <td><code>--rs-color-black-500</code></td>
@@ -453,6 +495,126 @@
453
495
  <td><code>var(--rs-color-blue-100)</code></td>
454
496
  <td></td>
455
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>
456
618
  <tr>
457
619
  <td><span class="swatch" style="background: var(--rs-color-surface-primary);"></span><code>color-surface-primary</code></td>
458
620
  <td><code>--rs-color-surface-primary</code></td>
@@ -609,6 +771,12 @@
609
771
  <td><code>var(--rs-color-black-500)</code></td>
610
772
  <td></td>
611
773
  </tr>
774
+ <tr>
775
+ <td><span class="swatch" style="background: var(--rs-color-icon-disabled);"></span><code>color-icon-disabled</code></td>
776
+ <td><code>--rs-color-icon-disabled</code></td>
777
+ <td><code>var(--rs-color-gray-500)</code></td>
778
+ <td></td>
779
+ </tr>
612
780
  <tr>
613
781
  <td><span class="swatch" style="background: var(--rs-color-icon-button-primary);"></span><code>color-icon-button-primary</code></td>
614
782
  <td><code>--rs-color-icon-button-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)",
@@ -317,6 +432,11 @@
317
432
  "value": "var(--rs-color-black-500)",
318
433
  "type": "color"
319
434
  },
435
+ "color-icon-disabled": {
436
+ "cssVariable": "--rs-color-icon-disabled",
437
+ "value": "var(--rs-color-gray-500)",
438
+ "type": "color"
439
+ },
320
440
  "color-icon-button-primary": {
321
441
  "cssVariable": "--rs-color-icon-button-primary",
322
442
  "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)` | |
@@ -70,6 +93,7 @@ Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.cs
70
93
  | `color-text-button-tertiary-hover` | `--rs-color-text-button-tertiary-hover` | `var(--rs-color-blue-700)` | |
71
94
  | `color-icon-primary` | `--rs-color-icon-primary` | `var(--rs-color-blue-500)` | |
72
95
  | `color-icon-secondary` | `--rs-color-icon-secondary` | `var(--rs-color-black-500)` | |
96
+ | `color-icon-disabled` | `--rs-color-icon-disabled` | `var(--rs-color-gray-500)` | |
73
97
  | `color-icon-button-primary` | `--rs-color-icon-button-primary` | `var(--rs-color-white-500)` | |
74
98
  | `color-icon-button-secondary` | `--rs-color-icon-button-secondary` | `var(--rs-color-gray-600)` | |
75
99
  | `color-icon-button-tertiary` | `--rs-color-icon-button-tertiary` | `var(--rs-color-blue-500)` | |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@robosophy/tokens",
3
- "version": "1.0.13",
3
+ "version": "1.1.0",
4
4
  "private": false,
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
@@ -45,4 +45,4 @@
45
45
  "tsup": "^8.5.0",
46
46
  "typescript": "^5.9.3"
47
47
  }
48
- }
48
+ }