@robosophy/tokens 0.0.2 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/AGENTS.md +2 -1
  2. package/README.md +11 -2
  3. package/dist/ai-context.md +28 -3
  4. package/dist/cli.js +2 -1
  5. package/dist/index.d.ts +13 -2
  6. package/dist/index.js +13 -2
  7. package/dist/tailwind-preset.js +11 -12
  8. package/dist/tailwind.css +11 -17
  9. package/dist/tokens.css +24 -2
  10. package/dist/tokens.html +81 -4
  11. package/dist/tokens.json +62 -2
  12. package/dist/tokens.md +14 -3
  13. package/package.json +5 -2
package/AGENTS.md CHANGED
@@ -2,7 +2,8 @@
2
2
 
3
3
  - Use `dist/ai-context.md` for agent-facing token rules and inventory.
4
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.
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`.
6
7
  - Public CSS tokens use the `--rs-` prefix.
7
8
  - Do not hardcode hex colors when an equivalent Robosophy token exists.
8
9
  - Prefer semantic tokens over primitive palette tokens for component styles.
package/README.md CHANGED
@@ -10,13 +10,22 @@ npm install @robosophy/tokens
10
10
 
11
11
  ## Uso
12
12
 
13
+ Importa `tokens.css` cuando el proyecto consume tokens directamente o usa componentes Robosophy sin `@robosophy/prime-theme`.
14
+
13
15
  ```ts
14
16
  import "@robosophy/tokens/tokens.css";
15
- import "@robosophy/tokens/tailwind.css";
16
17
  import { tokens } from "@robosophy/tokens";
17
18
  import tokensJson from "@robosophy/tokens/tokens.json";
18
19
  ```
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
+
20
29
  Los tokens CSS publicos usan el prefijo `--rs-`.
21
30
 
22
31
  ```css
@@ -28,7 +37,7 @@ Los tokens CSS publicos usan el prefijo `--rs-`.
28
37
 
29
38
  ## Contexto para agentes de IA
30
39
 
31
- El paquete publica contexto dentro de `node_modules/@robosophy/tokens`:
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`.
32
41
 
33
42
  - `AGENTS.md`: reglas cortas para agentes.
34
43
  - `dist/ai-context.md`: reglas de uso, imports y lista de tokens.
package/dist/ai-context.md CHANGED
@@ -5,7 +5,8 @@ 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.
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`.
9
10
  - Use public CSS variables with the `--rs-` prefix.
10
11
  - Do not hardcode hex colors when an equivalent Robosophy token exists.
11
12
  - 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.
@@ -14,8 +15,21 @@ Use this file as the source of truth when generating UI code in projects that de
14
15
 
15
16
  ## Imports
16
17
 
18
+ Use the direct tokens import when the app does not use `@robosophy/prime-theme`:
19
+
17
20
  ```ts
18
21
  import "@robosophy/tokens/tokens.css";
22
+ ```
23
+
24
+ Use the Prime theme import in PrimeVue apps:
25
+
26
+ ```ts
27
+ import "@robosophy/prime-theme/prime.css";
28
+ ```
29
+
30
+ Optional token artifacts:
31
+
32
+ ```ts
19
33
  import "@robosophy/tokens/tailwind.css";
20
34
  import { tokens } from "@robosophy/tokens";
21
35
  import tokensJson from "@robosophy/tokens/tokens.json";
@@ -44,9 +58,15 @@ import tokensJson from "@robosophy/tokens/tokens.json";
44
58
  - `--rs-color-gray-100`: `#F6F6F6`
45
59
  - `--rs-color-gray-300`: `#EEEEEE`
46
60
  - `--rs-color-gray-500`: `#D1D1D1`
61
+ - `--rs-color-gray-600`: `#545454`
47
62
  - `--rs-color-gray-700`: `#909090`
48
63
  - `--rs-color-black-500`: `#000000`
49
64
  - `--rs-color-white-500`: `#FFFFFF`
65
+ - `--rs-color-project-pc`: `#014A9F` - Project brand color for Plan Comercial.
66
+ - `--rs-color-project-alta`: `#65AC1E` - Project brand color for Alta.
67
+ - `--rs-color-project-cc`: `#49A0D4` - Project brand color for Cuenta Corriente.
68
+ - `--rs-color-project-pog`: `#007C2F` - Project brand color for POG.
69
+ - `--rs-color-project-cyo`: `#49A0D4` - Project brand color for Cuenta y Orden.
50
70
  - `--rs-color-background`: `var(--rs-color-gray-100)`
51
71
  - `--rs-color-background-disabled`: `var(--rs-color-gray-100)`
52
72
  - `--rs-color-background-caution`: `var(--rs-color-yellow-100)`
@@ -63,13 +83,13 @@ import tokensJson from "@robosophy/tokens/tokens.json";
63
83
  - `--rs-color-text-placeholder`: `var(--rs-color-gray-500)`
64
84
  - `--rs-color-text-caution`: `var(--rs-color-yellow-500)`
65
85
  - `--rs-color-text-button-primary`: `var(--rs-color-white-500)`
66
- - `--rs-color-text-button-secondary`: `var(--rs-color-black-500)`
86
+ - `--rs-color-text-button-secondary`: `var(--rs-color-gray-600)`
67
87
  - `--rs-color-text-button-tertiary`: `var(--rs-color-blue-500)`
68
88
  - `--rs-color-text-button-tertiary-hover`: `var(--rs-color-blue-700)`
69
89
  - `--rs-color-icon-primary`: `var(--rs-color-blue-500)`
70
90
  - `--rs-color-icon-secondary`: `var(--rs-color-black-500)`
71
91
  - `--rs-color-icon-button-primary`: `var(--rs-color-white-500)`
72
- - `--rs-color-icon-button-secondary`: `var(--rs-color-black-500)`
92
+ - `--rs-color-icon-button-secondary`: `var(--rs-color-gray-600)`
73
93
  - `--rs-color-icon-button-tertiary`: `var(--rs-color-blue-500)`
74
94
  - `--rs-color-icon-input`: `var(--rs-color-black-500)`
75
95
  - `--rs-color-icon-brand-blue`: `var(--rs-color-blue-500)`
@@ -77,6 +97,11 @@ import tokensJson from "@robosophy/tokens/tokens.json";
77
97
  - `--rs-color-icon-brand-yellow`: `var(--rs-color-yellow-500)`
78
98
  - `--rs-color-icon-brand-red`: `var(--rs-color-red-500)`
79
99
  - `--rs-color-icon-brand-darkblue`: `var(--rs-color-darkblue-500)`
100
+ - `--rs-color-icon-project-pc`: `var(--rs-color-project-pc)`
101
+ - `--rs-color-icon-project-alta`: `var(--rs-color-project-alta)`
102
+ - `--rs-color-icon-project-cc`: `var(--rs-color-project-cc)`
103
+ - `--rs-color-icon-project-pog`: `var(--rs-color-project-pog)`
104
+ - `--rs-color-icon-project-cyo`: `var(--rs-color-project-cyo)`
80
105
  - `--rs-color-stroke-default`: `var(--rs-color-gray-500)`
81
106
  - `--rs-color-stroke-focused`: `var(--rs-color-blue-500)`
82
107
  - `--rs-color-stroke-disabled`: `var(--rs-color-gray-100)`
package/dist/cli.js CHANGED
@@ -10,7 +10,8 @@ const section = `${startMarker}
10
10
 
11
11
  This project uses \`@robosophy/tokens\`. When creating or editing UI:
12
12
 
13
- - Import \`@robosophy/tokens/tokens.css\` before using Robosophy CSS variables.
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\`.
14
15
  - Use public CSS variables with the \`--rs-\` prefix.
15
16
  - Do not hardcode hex colors when an equivalent Robosophy token exists.
16
17
  - Prefer semantic tokens over primitive palette tokens for component styles.
package/dist/index.d.ts CHANGED
@@ -19,9 +19,15 @@ export declare const tokens: {
19
19
  readonly "color-gray-100": "#F6F6F6";
20
20
  readonly "color-gray-300": "#EEEEEE";
21
21
  readonly "color-gray-500": "#D1D1D1";
22
+ readonly "color-gray-600": "#545454";
22
23
  readonly "color-gray-700": "#909090";
23
24
  readonly "color-black-500": "#000000";
24
25
  readonly "color-white-500": "#FFFFFF";
26
+ readonly "color-project-pc": "#014A9F";
27
+ readonly "color-project-alta": "#65AC1E";
28
+ readonly "color-project-cc": "#49A0D4";
29
+ readonly "color-project-pog": "#007C2F";
30
+ readonly "color-project-cyo": "#49A0D4";
25
31
  readonly "font-family": "'Inter', sans-serif";
26
32
  readonly "color-background": "var(--rs-color-gray-100)";
27
33
  readonly "color-background-disabled": "var(--rs-color-gray-100)";
@@ -39,13 +45,13 @@ export declare const tokens: {
39
45
  readonly "color-text-placeholder": "var(--rs-color-gray-500)";
40
46
  readonly "color-text-caution": "var(--rs-color-yellow-500)";
41
47
  readonly "color-text-button-primary": "var(--rs-color-white-500)";
42
- readonly "color-text-button-secondary": "var(--rs-color-black-500)";
48
+ readonly "color-text-button-secondary": "var(--rs-color-gray-600)";
43
49
  readonly "color-text-button-tertiary": "var(--rs-color-blue-500)";
44
50
  readonly "color-text-button-tertiary-hover": "var(--rs-color-blue-700)";
45
51
  readonly "color-icon-primary": "var(--rs-color-blue-500)";
46
52
  readonly "color-icon-secondary": "var(--rs-color-black-500)";
47
53
  readonly "color-icon-button-primary": "var(--rs-color-white-500)";
48
- readonly "color-icon-button-secondary": "var(--rs-color-black-500)";
54
+ readonly "color-icon-button-secondary": "var(--rs-color-gray-600)";
49
55
  readonly "color-icon-button-tertiary": "var(--rs-color-blue-500)";
50
56
  readonly "color-icon-input": "var(--rs-color-black-500)";
51
57
  readonly "color-icon-brand-blue": "var(--rs-color-blue-500)";
@@ -53,6 +59,11 @@ export declare const tokens: {
53
59
  readonly "color-icon-brand-yellow": "var(--rs-color-yellow-500)";
54
60
  readonly "color-icon-brand-red": "var(--rs-color-red-500)";
55
61
  readonly "color-icon-brand-darkblue": "var(--rs-color-darkblue-500)";
62
+ readonly "color-icon-project-pc": "var(--rs-color-project-pc)";
63
+ readonly "color-icon-project-alta": "var(--rs-color-project-alta)";
64
+ readonly "color-icon-project-cc": "var(--rs-color-project-cc)";
65
+ readonly "color-icon-project-pog": "var(--rs-color-project-pog)";
66
+ readonly "color-icon-project-cyo": "var(--rs-color-project-cyo)";
56
67
  readonly "color-stroke-default": "var(--rs-color-gray-500)";
57
68
  readonly "color-stroke-focused": "var(--rs-color-blue-500)";
58
69
  readonly "color-stroke-disabled": "var(--rs-color-gray-100)";
package/dist/index.js CHANGED
@@ -19,9 +19,15 @@ export const tokens = {
19
19
  "color-gray-100": "#F6F6F6",
20
20
  "color-gray-300": "#EEEEEE",
21
21
  "color-gray-500": "#D1D1D1",
22
+ "color-gray-600": "#545454",
22
23
  "color-gray-700": "#909090",
23
24
  "color-black-500": "#000000",
24
25
  "color-white-500": "#FFFFFF",
26
+ "color-project-pc": "#014A9F",
27
+ "color-project-alta": "#65AC1E",
28
+ "color-project-cc": "#49A0D4",
29
+ "color-project-pog": "#007C2F",
30
+ "color-project-cyo": "#49A0D4",
25
31
  "font-family": "'Inter', sans-serif",
26
32
  "color-background": "var(--rs-color-gray-100)",
27
33
  "color-background-disabled": "var(--rs-color-gray-100)",
@@ -39,13 +45,13 @@ export const tokens = {
39
45
  "color-text-placeholder": "var(--rs-color-gray-500)",
40
46
  "color-text-caution": "var(--rs-color-yellow-500)",
41
47
  "color-text-button-primary": "var(--rs-color-white-500)",
42
- "color-text-button-secondary": "var(--rs-color-black-500)",
48
+ "color-text-button-secondary": "var(--rs-color-gray-600)",
43
49
  "color-text-button-tertiary": "var(--rs-color-blue-500)",
44
50
  "color-text-button-tertiary-hover": "var(--rs-color-blue-700)",
45
51
  "color-icon-primary": "var(--rs-color-blue-500)",
46
52
  "color-icon-secondary": "var(--rs-color-black-500)",
47
53
  "color-icon-button-primary": "var(--rs-color-white-500)",
48
- "color-icon-button-secondary": "var(--rs-color-black-500)",
54
+ "color-icon-button-secondary": "var(--rs-color-gray-600)",
49
55
  "color-icon-button-tertiary": "var(--rs-color-blue-500)",
50
56
  "color-icon-input": "var(--rs-color-black-500)",
51
57
  "color-icon-brand-blue": "var(--rs-color-blue-500)",
@@ -53,6 +59,11 @@ export const tokens = {
53
59
  "color-icon-brand-yellow": "var(--rs-color-yellow-500)",
54
60
  "color-icon-brand-red": "var(--rs-color-red-500)",
55
61
  "color-icon-brand-darkblue": "var(--rs-color-darkblue-500)",
62
+ "color-icon-project-pc": "var(--rs-color-project-pc)",
63
+ "color-icon-project-alta": "var(--rs-color-project-alta)",
64
+ "color-icon-project-cc": "var(--rs-color-project-cc)",
65
+ "color-icon-project-pog": "var(--rs-color-project-pog)",
66
+ "color-icon-project-cyo": "var(--rs-color-project-cyo)",
56
67
  "color-stroke-default": "var(--rs-color-gray-500)",
57
68
  "color-stroke-focused": "var(--rs-color-blue-500)",
58
69
  "color-stroke-disabled": "var(--rs-color-gray-100)",
package/dist/tailwind-preset.js CHANGED
@@ -23,9 +23,15 @@ const preset = {
23
23
  "gray-100": "var(--rs-color-gray-100)",
24
24
  "gray-300": "var(--rs-color-gray-300)",
25
25
  "gray-500": "var(--rs-color-gray-500)",
26
+ "gray-600": "var(--rs-color-gray-600)",
26
27
  "gray-700": "var(--rs-color-gray-700)",
27
28
  "black-500": "var(--rs-color-black-500)",
28
29
  "white-500": "var(--rs-color-white-500)",
30
+ "project-pc": "var(--rs-color-project-pc)",
31
+ "project-alta": "var(--rs-color-project-alta)",
32
+ "project-cc": "var(--rs-color-project-cc)",
33
+ "project-pog": "var(--rs-color-project-pog)",
34
+ "project-cyo": "var(--rs-color-project-cyo)",
29
35
  "background": "var(--rs-color-background)",
30
36
  "background-disabled": "var(--rs-color-background-disabled)",
31
37
  "background-caution": "var(--rs-color-background-caution)",
@@ -56,6 +62,11 @@ const preset = {
56
62
  "icon-brand-yellow": "var(--rs-color-icon-brand-yellow)",
57
63
  "icon-brand-red": "var(--rs-color-icon-brand-red)",
58
64
  "icon-brand-darkblue": "var(--rs-color-icon-brand-darkblue)",
65
+ "icon-project-pc": "var(--rs-color-icon-project-pc)",
66
+ "icon-project-alta": "var(--rs-color-icon-project-alta)",
67
+ "icon-project-cc": "var(--rs-color-icon-project-cc)",
68
+ "icon-project-pog": "var(--rs-color-icon-project-pog)",
69
+ "icon-project-cyo": "var(--rs-color-icon-project-cyo)",
59
70
  "stroke-default": "var(--rs-color-stroke-default)",
60
71
  "stroke-focused": "var(--rs-color-stroke-focused)",
61
72
  "stroke-disabled": "var(--rs-color-stroke-disabled)",
@@ -70,18 +81,6 @@ const preset = {
70
81
  "button-green-surface": "var(--rs-color-button-green-surface)",
71
82
  "button-yellow-surface": "var(--rs-color-button-yellow-surface)",
72
83
  "button-red-surface": "var(--rs-color-button-red-surface)",
73
- "pill-bg-brand-blue": "var(--rs-pill-bg-brand-blue)",
74
- "pill-color-brand-blue": "var(--rs-pill-color-brand-blue)",
75
- "pill-bg-brand-navyblue": "var(--rs-pill-bg-brand-navyblue)",
76
- "pill-color-brand-navyblue": "var(--rs-pill-color-brand-navyblue)",
77
- "pill-bg-brand-green": "var(--rs-pill-bg-brand-green)",
78
- "pill-color-brand-green": "var(--rs-pill-color-brand-green)",
79
- "pill-bg-brand-navygreen": "var(--rs-pill-bg-brand-navygreen)",
80
- "pill-color-brand-navygreen": "var(--rs-pill-color-brand-navygreen)",
81
- "pill-bg-brand-red": "var(--rs-pill-bg-brand-red)",
82
- "pill-color-brand-red": "var(--rs-pill-color-brand-red)",
83
- "pill-bg-brand-yellow": "var(--rs-pill-bg-brand-yellow)",
84
- "pill-color-brand-yellow": "var(--rs-pill-color-brand-yellow)",
85
84
  "sidebar-background": "var(--rs-color-sidebar-background)",
86
85
  "sidebar-background-active": "var(--rs-color-sidebar-background-active)",
87
86
  "sidebar-background-hover": "var(--rs-color-sidebar-background-hover)",
package/dist/tailwind.css CHANGED
@@ -19,9 +19,15 @@
19
19
  --color-rs-gray-100: var(--rs-color-gray-100);
20
20
  --color-rs-gray-300: var(--rs-color-gray-300);
21
21
  --color-rs-gray-500: var(--rs-color-gray-500);
22
+ --color-rs-gray-600: var(--rs-color-gray-600);
22
23
  --color-rs-gray-700: var(--rs-color-gray-700);
23
24
  --color-rs-black-500: var(--rs-color-black-500);
24
25
  --color-rs-white-500: var(--rs-color-white-500);
26
+ --color-rs-project-pc: var(--rs-color-project-pc);
27
+ --color-rs-project-alta: var(--rs-color-project-alta);
28
+ --color-rs-project-cc: var(--rs-color-project-cc);
29
+ --color-rs-project-pog: var(--rs-color-project-pog);
30
+ --color-rs-project-cyo: var(--rs-color-project-cyo);
25
31
  --font-rs-sans: var(--rs-font-family);
26
32
  --color-rs-background: var(--rs-color-background);
27
33
  --color-rs-background-disabled: var(--rs-color-background-disabled);
@@ -53,6 +59,11 @@
53
59
  --color-rs-icon-brand-yellow: var(--rs-color-icon-brand-yellow);
54
60
  --color-rs-icon-brand-red: var(--rs-color-icon-brand-red);
55
61
  --color-rs-icon-brand-darkblue: var(--rs-color-icon-brand-darkblue);
62
+ --color-rs-icon-project-pc: var(--rs-color-icon-project-pc);
63
+ --color-rs-icon-project-alta: var(--rs-color-icon-project-alta);
64
+ --color-rs-icon-project-cc: var(--rs-color-icon-project-cc);
65
+ --color-rs-icon-project-pog: var(--rs-color-icon-project-pog);
66
+ --color-rs-icon-project-cyo: var(--rs-color-icon-project-cyo);
56
67
  --color-rs-stroke-default: var(--rs-color-stroke-default);
57
68
  --color-rs-stroke-focused: var(--rs-color-stroke-focused);
58
69
  --color-rs-stroke-disabled: var(--rs-color-stroke-disabled);
@@ -67,21 +78,4 @@
67
78
  --color-rs-button-green-surface: var(--rs-color-button-green-surface);
68
79
  --color-rs-button-yellow-surface: var(--rs-color-button-yellow-surface);
69
80
  --color-rs-button-red-surface: var(--rs-color-button-red-surface);
70
- --pill-bg-brand-blue: var(--rs-pill-bg-brand-blue);
71
- --pill-color-brand-blue: var(--rs-pill-color-brand-blue);
72
- --pill-bg-brand-navyblue: var(--rs-pill-bg-brand-navyblue);
73
- --pill-color-brand-navyblue: var(--rs-pill-color-brand-navyblue);
74
- --pill-bg-brand-green: var(--rs-pill-bg-brand-green);
75
- --pill-color-brand-green: var(--rs-pill-color-brand-green);
76
- --pill-bg-brand-navygreen: var(--rs-pill-bg-brand-navygreen);
77
- --pill-color-brand-navygreen: var(--rs-pill-color-brand-navygreen);
78
- --pill-bg-brand-red: var(--rs-pill-bg-brand-red);
79
- --pill-color-brand-red: var(--rs-pill-color-brand-red);
80
- --pill-bg-brand-yellow: var(--rs-pill-bg-brand-yellow);
81
- --pill-color-brand-yellow: var(--rs-pill-color-brand-yellow);
82
- --color-rs-sidebar-background: var(--rs-color-sidebar-background);
83
- --color-rs-sidebar-background-active: var(--rs-color-sidebar-background-active);
84
- --color-rs-sidebar-background-hover: var(--rs-color-sidebar-background-hover);
85
- --color-rs-sidebar-stroke: var(--rs-color-sidebar-stroke);
86
- --color-rs-sidebar-stroke-active: var(--rs-color-sidebar-stroke-active);
87
81
  }
package/dist/tokens.css CHANGED
@@ -19,9 +19,15 @@
19
19
  --rs-color-gray-100: #F6F6F6;
20
20
  --rs-color-gray-300: #EEEEEE;
21
21
  --rs-color-gray-500: #D1D1D1;
22
+ --rs-color-gray-600: #545454;
22
23
  --rs-color-gray-700: #909090;
23
24
  --rs-color-black-500: #000000;
24
25
  --rs-color-white-500: #FFFFFF;
26
+ --rs-color-project-pc: #014A9F;
27
+ --rs-color-project-alta: #65AC1E;
28
+ --rs-color-project-cc: #49A0D4;
29
+ --rs-color-project-pog: #007C2F;
30
+ --rs-color-project-cyo: #49A0D4;
25
31
  --rs-font-family: 'Inter', sans-serif;
26
32
  --rs-color-background: var(--rs-color-gray-100);
27
33
  --rs-color-background-disabled: var(--rs-color-gray-100);
@@ -39,13 +45,13 @@
39
45
  --rs-color-text-placeholder: var(--rs-color-gray-500);
40
46
  --rs-color-text-caution: var(--rs-color-yellow-500);
41
47
  --rs-color-text-button-primary: var(--rs-color-white-500);
42
- --rs-color-text-button-secondary: var(--rs-color-black-500);
48
+ --rs-color-text-button-secondary: var(--rs-color-gray-600);
43
49
  --rs-color-text-button-tertiary: var(--rs-color-blue-500);
44
50
  --rs-color-text-button-tertiary-hover: var(--rs-color-blue-700);
45
51
  --rs-color-icon-primary: var(--rs-color-blue-500);
46
52
  --rs-color-icon-secondary: var(--rs-color-black-500);
47
53
  --rs-color-icon-button-primary: var(--rs-color-white-500);
48
- --rs-color-icon-button-secondary: var(--rs-color-black-500);
54
+ --rs-color-icon-button-secondary: var(--rs-color-gray-600);
49
55
  --rs-color-icon-button-tertiary: var(--rs-color-blue-500);
50
56
  --rs-color-icon-input: var(--rs-color-black-500);
51
57
  --rs-color-icon-brand-blue: var(--rs-color-blue-500);
@@ -53,6 +59,11 @@
53
59
  --rs-color-icon-brand-yellow: var(--rs-color-yellow-500);
54
60
  --rs-color-icon-brand-red: var(--rs-color-red-500);
55
61
  --rs-color-icon-brand-darkblue: var(--rs-color-darkblue-500);
62
+ --rs-color-icon-project-pc: var(--rs-color-project-pc);
63
+ --rs-color-icon-project-alta: var(--rs-color-project-alta);
64
+ --rs-color-icon-project-cc: var(--rs-color-project-cc);
65
+ --rs-color-icon-project-pog: var(--rs-color-project-pog);
66
+ --rs-color-icon-project-cyo: var(--rs-color-project-cyo);
56
67
  --rs-color-stroke-default: var(--rs-color-gray-500);
57
68
  --rs-color-stroke-focused: var(--rs-color-blue-500);
58
69
  --rs-color-stroke-disabled: var(--rs-color-gray-100);
@@ -105,9 +116,15 @@
105
116
  --color-gray-100: var(--rs-color-gray-100);
106
117
  --color-gray-300: var(--rs-color-gray-300);
107
118
  --color-gray-500: var(--rs-color-gray-500);
119
+ --color-gray-600: var(--rs-color-gray-600);
108
120
  --color-gray-700: var(--rs-color-gray-700);
109
121
  --color-black-500: var(--rs-color-black-500);
110
122
  --color-white-500: var(--rs-color-white-500);
123
+ --color-project-pc: var(--rs-color-project-pc);
124
+ --color-project-alta: var(--rs-color-project-alta);
125
+ --color-project-cc: var(--rs-color-project-cc);
126
+ --color-project-pog: var(--rs-color-project-pog);
127
+ --color-project-cyo: var(--rs-color-project-cyo);
111
128
  --font-family: var(--rs-font-family);
112
129
  --color-background: var(--rs-color-background);
113
130
  --color-background-disabled: var(--rs-color-background-disabled);
@@ -139,6 +156,11 @@
139
156
  --color-icon-brand-yellow: var(--rs-color-icon-brand-yellow);
140
157
  --color-icon-brand-red: var(--rs-color-icon-brand-red);
141
158
  --color-icon-brand-darkblue: var(--rs-color-icon-brand-darkblue);
159
+ --color-icon-project-pc: var(--rs-color-icon-project-pc);
160
+ --color-icon-project-alta: var(--rs-color-icon-project-alta);
161
+ --color-icon-project-cc: var(--rs-color-icon-project-cc);
162
+ --color-icon-project-pog: var(--rs-color-icon-project-pog);
163
+ --color-icon-project-cyo: var(--rs-color-icon-project-cyo);
142
164
  --color-stroke-default: var(--rs-color-stroke-default);
143
165
  --color-stroke-focused: var(--rs-color-stroke-focused);
144
166
  --color-stroke-disabled: var(--rs-color-stroke-disabled);
package/dist/tokens.html CHANGED
@@ -26,9 +26,15 @@
26
26
  --rs-color-gray-100: #F6F6F6;
27
27
  --rs-color-gray-300: #EEEEEE;
28
28
  --rs-color-gray-500: #D1D1D1;
29
+ --rs-color-gray-600: #545454;
29
30
  --rs-color-gray-700: #909090;
30
31
  --rs-color-black-500: #000000;
31
32
  --rs-color-white-500: #FFFFFF;
33
+ --rs-color-project-pc: #014A9F;
34
+ --rs-color-project-alta: #65AC1E;
35
+ --rs-color-project-cc: #49A0D4;
36
+ --rs-color-project-pog: #007C2F;
37
+ --rs-color-project-cyo: #49A0D4;
32
38
  --rs-font-family: 'Inter', sans-serif;
33
39
  --rs-color-background: var(--rs-color-gray-100);
34
40
  --rs-color-background-disabled: var(--rs-color-gray-100);
@@ -46,13 +52,13 @@
46
52
  --rs-color-text-placeholder: var(--rs-color-gray-500);
47
53
  --rs-color-text-caution: var(--rs-color-yellow-500);
48
54
  --rs-color-text-button-primary: var(--rs-color-white-500);
49
- --rs-color-text-button-secondary: var(--rs-color-black-500);
55
+ --rs-color-text-button-secondary: var(--rs-color-gray-600);
50
56
  --rs-color-text-button-tertiary: var(--rs-color-blue-500);
51
57
  --rs-color-text-button-tertiary-hover: var(--rs-color-blue-700);
52
58
  --rs-color-icon-primary: var(--rs-color-blue-500);
53
59
  --rs-color-icon-secondary: var(--rs-color-black-500);
54
60
  --rs-color-icon-button-primary: var(--rs-color-white-500);
55
- --rs-color-icon-button-secondary: var(--rs-color-black-500);
61
+ --rs-color-icon-button-secondary: var(--rs-color-gray-600);
56
62
  --rs-color-icon-button-tertiary: var(--rs-color-blue-500);
57
63
  --rs-color-icon-input: var(--rs-color-black-500);
58
64
  --rs-color-icon-brand-blue: var(--rs-color-blue-500);
@@ -60,6 +66,11 @@
60
66
  --rs-color-icon-brand-yellow: var(--rs-color-yellow-500);
61
67
  --rs-color-icon-brand-red: var(--rs-color-red-500);
62
68
  --rs-color-icon-brand-darkblue: var(--rs-color-darkblue-500);
69
+ --rs-color-icon-project-pc: var(--rs-color-project-pc);
70
+ --rs-color-icon-project-alta: var(--rs-color-project-alta);
71
+ --rs-color-icon-project-cc: var(--rs-color-project-cc);
72
+ --rs-color-icon-project-pog: var(--rs-color-project-pog);
73
+ --rs-color-icon-project-cyo: var(--rs-color-project-cyo);
63
74
  --rs-color-stroke-default: var(--rs-color-gray-500);
64
75
  --rs-color-stroke-focused: var(--rs-color-blue-500);
65
76
  --rs-color-stroke-disabled: var(--rs-color-gray-100);
@@ -326,6 +337,12 @@
326
337
  <td><code>#D1D1D1</code></td>
327
338
  <td></td>
328
339
  </tr>
340
+ <tr>
341
+ <td><span class="swatch" style="background: var(--rs-color-gray-600);"></span><code>color-gray-600</code></td>
342
+ <td><code>--rs-color-gray-600</code></td>
343
+ <td><code>#545454</code></td>
344
+ <td></td>
345
+ </tr>
329
346
  <tr>
330
347
  <td><span class="swatch" style="background: var(--rs-color-gray-700);"></span><code>color-gray-700</code></td>
331
348
  <td><code>--rs-color-gray-700</code></td>
@@ -344,6 +361,36 @@
344
361
  <td><code>#FFFFFF</code></td>
345
362
  <td></td>
346
363
  </tr>
364
+ <tr>
365
+ <td><span class="swatch" style="background: var(--rs-color-project-pc);"></span><code>color-project-pc</code></td>
366
+ <td><code>--rs-color-project-pc</code></td>
367
+ <td><code>#014A9F</code></td>
368
+ <td>Project brand color for Plan Comercial.</td>
369
+ </tr>
370
+ <tr>
371
+ <td><span class="swatch" style="background: var(--rs-color-project-alta);"></span><code>color-project-alta</code></td>
372
+ <td><code>--rs-color-project-alta</code></td>
373
+ <td><code>#65AC1E</code></td>
374
+ <td>Project brand color for Alta.</td>
375
+ </tr>
376
+ <tr>
377
+ <td><span class="swatch" style="background: var(--rs-color-project-cc);"></span><code>color-project-cc</code></td>
378
+ <td><code>--rs-color-project-cc</code></td>
379
+ <td><code>#49A0D4</code></td>
380
+ <td>Project brand color for Cuenta Corriente.</td>
381
+ </tr>
382
+ <tr>
383
+ <td><span class="swatch" style="background: var(--rs-color-project-pog);"></span><code>color-project-pog</code></td>
384
+ <td><code>--rs-color-project-pog</code></td>
385
+ <td><code>#007C2F</code></td>
386
+ <td>Project brand color for POG.</td>
387
+ </tr>
388
+ <tr>
389
+ <td><span class="swatch" style="background: var(--rs-color-project-cyo);"></span><code>color-project-cyo</code></td>
390
+ <td><code>--rs-color-project-cyo</code></td>
391
+ <td><code>#49A0D4</code></td>
392
+ <td>Project brand color for Cuenta y Orden.</td>
393
+ </tr>
347
394
  <tr>
348
395
  <td><span class="swatch" style="background: var(--rs-color-background);"></span><code>color-background</code></td>
349
396
  <td><code>--rs-color-background</code></td>
@@ -443,7 +490,7 @@
443
490
  <tr>
444
491
  <td><span class="swatch" style="background: var(--rs-color-text-button-secondary);"></span><code>color-text-button-secondary</code></td>
445
492
  <td><code>--rs-color-text-button-secondary</code></td>
446
- <td><code>var(--rs-color-black-500)</code></td>
493
+ <td><code>var(--rs-color-gray-600)</code></td>
447
494
  <td></td>
448
495
  </tr>
449
496
  <tr>
@@ -479,7 +526,7 @@
479
526
  <tr>
480
527
  <td><span class="swatch" style="background: var(--rs-color-icon-button-secondary);"></span><code>color-icon-button-secondary</code></td>
481
528
  <td><code>--rs-color-icon-button-secondary</code></td>
482
- <td><code>var(--rs-color-black-500)</code></td>
529
+ <td><code>var(--rs-color-gray-600)</code></td>
483
530
  <td></td>
484
531
  </tr>
485
532
  <tr>
@@ -524,6 +571,36 @@
524
571
  <td><code>var(--rs-color-darkblue-500)</code></td>
525
572
  <td></td>
526
573
  </tr>
574
+ <tr>
575
+ <td><span class="swatch" style="background: var(--rs-color-icon-project-pc);"></span><code>color-icon-project-pc</code></td>
576
+ <td><code>--rs-color-icon-project-pc</code></td>
577
+ <td><code>var(--rs-color-project-pc)</code></td>
578
+ <td></td>
579
+ </tr>
580
+ <tr>
581
+ <td><span class="swatch" style="background: var(--rs-color-icon-project-alta);"></span><code>color-icon-project-alta</code></td>
582
+ <td><code>--rs-color-icon-project-alta</code></td>
583
+ <td><code>var(--rs-color-project-alta)</code></td>
584
+ <td></td>
585
+ </tr>
586
+ <tr>
587
+ <td><span class="swatch" style="background: var(--rs-color-icon-project-cc);"></span><code>color-icon-project-cc</code></td>
588
+ <td><code>--rs-color-icon-project-cc</code></td>
589
+ <td><code>var(--rs-color-project-cc)</code></td>
590
+ <td></td>
591
+ </tr>
592
+ <tr>
593
+ <td><span class="swatch" style="background: var(--rs-color-icon-project-pog);"></span><code>color-icon-project-pog</code></td>
594
+ <td><code>--rs-color-icon-project-pog</code></td>
595
+ <td><code>var(--rs-color-project-pog)</code></td>
596
+ <td></td>
597
+ </tr>
598
+ <tr>
599
+ <td><span class="swatch" style="background: var(--rs-color-icon-project-cyo);"></span><code>color-icon-project-cyo</code></td>
600
+ <td><code>--rs-color-icon-project-cyo</code></td>
601
+ <td><code>var(--rs-color-project-cyo)</code></td>
602
+ <td></td>
603
+ </tr>
527
604
  <tr>
528
605
  <td><span class="swatch" style="background: var(--rs-color-stroke-default);"></span><code>color-stroke-default</code></td>
529
606
  <td><code>--rs-color-stroke-default</code></td>
package/dist/tokens.json CHANGED
@@ -97,6 +97,11 @@
97
97
  "value": "#D1D1D1",
98
98
  "type": "color"
99
99
  },
100
+ "color-gray-600": {
101
+ "cssVariable": "--rs-color-gray-600",
102
+ "value": "#545454",
103
+ "type": "color"
104
+ },
100
105
  "color-gray-700": {
101
106
  "cssVariable": "--rs-color-gray-700",
102
107
  "value": "#909090",
@@ -112,6 +117,36 @@
112
117
  "value": "#FFFFFF",
113
118
  "type": "color"
114
119
  },
120
+ "color-project-pc": {
121
+ "cssVariable": "--rs-color-project-pc",
122
+ "value": "#014A9F",
123
+ "type": "color",
124
+ "description": "Project brand color for Plan Comercial."
125
+ },
126
+ "color-project-alta": {
127
+ "cssVariable": "--rs-color-project-alta",
128
+ "value": "#65AC1E",
129
+ "type": "color",
130
+ "description": "Project brand color for Alta."
131
+ },
132
+ "color-project-cc": {
133
+ "cssVariable": "--rs-color-project-cc",
134
+ "value": "#49A0D4",
135
+ "type": "color",
136
+ "description": "Project brand color for Cuenta Corriente."
137
+ },
138
+ "color-project-pog": {
139
+ "cssVariable": "--rs-color-project-pog",
140
+ "value": "#007C2F",
141
+ "type": "color",
142
+ "description": "Project brand color for POG."
143
+ },
144
+ "color-project-cyo": {
145
+ "cssVariable": "--rs-color-project-cyo",
146
+ "value": "#49A0D4",
147
+ "type": "color",
148
+ "description": "Project brand color for Cuenta y Orden."
149
+ },
115
150
  "font-family": {
116
151
  "cssVariable": "--rs-font-family",
117
152
  "value": "'Inter', sans-serif",
@@ -199,7 +234,7 @@
199
234
  },
200
235
  "color-text-button-secondary": {
201
236
  "cssVariable": "--rs-color-text-button-secondary",
202
- "value": "var(--rs-color-black-500)",
237
+ "value": "var(--rs-color-gray-600)",
203
238
  "type": "color"
204
239
  },
205
240
  "color-text-button-tertiary": {
@@ -229,7 +264,7 @@
229
264
  },
230
265
  "color-icon-button-secondary": {
231
266
  "cssVariable": "--rs-color-icon-button-secondary",
232
- "value": "var(--rs-color-black-500)",
267
+ "value": "var(--rs-color-gray-600)",
233
268
  "type": "color"
234
269
  },
235
270
  "color-icon-button-tertiary": {
@@ -267,6 +302,31 @@
267
302
  "value": "var(--rs-color-darkblue-500)",
268
303
  "type": "color"
269
304
  },
305
+ "color-icon-project-pc": {
306
+ "cssVariable": "--rs-color-icon-project-pc",
307
+ "value": "var(--rs-color-project-pc)",
308
+ "type": "color"
309
+ },
310
+ "color-icon-project-alta": {
311
+ "cssVariable": "--rs-color-icon-project-alta",
312
+ "value": "var(--rs-color-project-alta)",
313
+ "type": "color"
314
+ },
315
+ "color-icon-project-cc": {
316
+ "cssVariable": "--rs-color-icon-project-cc",
317
+ "value": "var(--rs-color-project-cc)",
318
+ "type": "color"
319
+ },
320
+ "color-icon-project-pog": {
321
+ "cssVariable": "--rs-color-icon-project-pog",
322
+ "value": "var(--rs-color-project-pog)",
323
+ "type": "color"
324
+ },
325
+ "color-icon-project-cyo": {
326
+ "cssVariable": "--rs-color-icon-project-cyo",
327
+ "value": "var(--rs-color-project-cyo)",
328
+ "type": "color"
329
+ },
270
330
  "color-stroke-default": {
271
331
  "cssVariable": "--rs-color-stroke-default",
272
332
  "value": "var(--rs-color-gray-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.
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
 
@@ -28,9 +28,15 @@ Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.cs
28
28
  | `color-gray-100` | `--rs-color-gray-100` | `#F6F6F6` | |
29
29
  | `color-gray-300` | `--rs-color-gray-300` | `#EEEEEE` | |
30
30
  | `color-gray-500` | `--rs-color-gray-500` | `#D1D1D1` | |
31
+ | `color-gray-600` | `--rs-color-gray-600` | `#545454` | |
31
32
  | `color-gray-700` | `--rs-color-gray-700` | `#909090` | |
32
33
  | `color-black-500` | `--rs-color-black-500` | `#000000` | |
33
34
  | `color-white-500` | `--rs-color-white-500` | `#FFFFFF` | |
35
+ | `color-project-pc` | `--rs-color-project-pc` | `#014A9F` | Project brand color for Plan Comercial. |
36
+ | `color-project-alta` | `--rs-color-project-alta` | `#65AC1E` | Project brand color for Alta. |
37
+ | `color-project-cc` | `--rs-color-project-cc` | `#49A0D4` | Project brand color for Cuenta Corriente. |
38
+ | `color-project-pog` | `--rs-color-project-pog` | `#007C2F` | Project brand color for POG. |
39
+ | `color-project-cyo` | `--rs-color-project-cyo` | `#49A0D4` | Project brand color for Cuenta y Orden. |
34
40
  | `color-background` | `--rs-color-background` | `var(--rs-color-gray-100)` | |
35
41
  | `color-background-disabled` | `--rs-color-background-disabled` | `var(--rs-color-gray-100)` | |
36
42
  | `color-background-caution` | `--rs-color-background-caution` | `var(--rs-color-yellow-100)` | |
@@ -47,13 +53,13 @@ Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.cs
47
53
  | `color-text-placeholder` | `--rs-color-text-placeholder` | `var(--rs-color-gray-500)` | |
48
54
  | `color-text-caution` | `--rs-color-text-caution` | `var(--rs-color-yellow-500)` | |
49
55
  | `color-text-button-primary` | `--rs-color-text-button-primary` | `var(--rs-color-white-500)` | |
50
- | `color-text-button-secondary` | `--rs-color-text-button-secondary` | `var(--rs-color-black-500)` | |
56
+ | `color-text-button-secondary` | `--rs-color-text-button-secondary` | `var(--rs-color-gray-600)` | |
51
57
  | `color-text-button-tertiary` | `--rs-color-text-button-tertiary` | `var(--rs-color-blue-500)` | |
52
58
  | `color-text-button-tertiary-hover` | `--rs-color-text-button-tertiary-hover` | `var(--rs-color-blue-700)` | |
53
59
  | `color-icon-primary` | `--rs-color-icon-primary` | `var(--rs-color-blue-500)` | |
54
60
  | `color-icon-secondary` | `--rs-color-icon-secondary` | `var(--rs-color-black-500)` | |
55
61
  | `color-icon-button-primary` | `--rs-color-icon-button-primary` | `var(--rs-color-white-500)` | |
56
- | `color-icon-button-secondary` | `--rs-color-icon-button-secondary` | `var(--rs-color-black-500)` | |
62
+ | `color-icon-button-secondary` | `--rs-color-icon-button-secondary` | `var(--rs-color-gray-600)` | |
57
63
  | `color-icon-button-tertiary` | `--rs-color-icon-button-tertiary` | `var(--rs-color-blue-500)` | |
58
64
  | `color-icon-input` | `--rs-color-icon-input` | `var(--rs-color-black-500)` | |
59
65
  | `color-icon-brand-blue` | `--rs-color-icon-brand-blue` | `var(--rs-color-blue-500)` | |
@@ -61,6 +67,11 @@ Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.cs
61
67
  | `color-icon-brand-yellow` | `--rs-color-icon-brand-yellow` | `var(--rs-color-yellow-500)` | |
62
68
  | `color-icon-brand-red` | `--rs-color-icon-brand-red` | `var(--rs-color-red-500)` | |
63
69
  | `color-icon-brand-darkblue` | `--rs-color-icon-brand-darkblue` | `var(--rs-color-darkblue-500)` | |
70
+ | `color-icon-project-pc` | `--rs-color-icon-project-pc` | `var(--rs-color-project-pc)` | |
71
+ | `color-icon-project-alta` | `--rs-color-icon-project-alta` | `var(--rs-color-project-alta)` | |
72
+ | `color-icon-project-cc` | `--rs-color-icon-project-cc` | `var(--rs-color-project-cc)` | |
73
+ | `color-icon-project-pog` | `--rs-color-icon-project-pog` | `var(--rs-color-project-pog)` | |
74
+ | `color-icon-project-cyo` | `--rs-color-icon-project-cyo` | `var(--rs-color-project-cyo)` | |
64
75
  | `color-stroke-default` | `--rs-color-stroke-default` | `var(--rs-color-gray-500)` | |
65
76
  | `color-stroke-focused` | `--rs-color-stroke-focused` | `var(--rs-color-blue-500)` | |
66
77
  | `color-stroke-disabled` | `--rs-color-stroke-disabled` | `var(--rs-color-gray-100)` | |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@robosophy/tokens",
3
- "version": "0.0.2",
3
+ "version": "1.0.0",
4
4
  "private": false,
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
@@ -35,9 +35,12 @@
35
35
  "**/*.css"
36
36
  ],
37
37
  "scripts": {
38
- "build": "tsup scripts/build-tokens.ts --format esm --platform node --out-dir .build --clean && node .build/build-tokens.js && rm -rf .build"
38
+ "build": "tsup scripts/build-tokens.ts --format esm --platform node --out-dir .build --clean && node .build/build-tokens.js && rimraf .build",
39
+ "test": "node --test scripts/*.test.mjs"
39
40
  },
40
41
  "devDependencies": {
42
+ "@types/node": "^24.10.1",
43
+ "rimraf": "^6.0.1",
41
44
  "tsup": "^8.5.0",
42
45
  "typescript": "^5.9.3"
43
46
  }