@robosophy/tokens 0.0.2 → 0.0.3

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 (8) hide show
  1. package/AGENTS.md +2 -1
  2. package/README.md +11 -2
  3. package/dist/ai-context.md +15 -1
  4. package/dist/cli.js +2 -1
  5. package/dist/tailwind-preset.js +0 -12
  6. package/dist/tailwind.css +0 -17
  7. package/dist/tokens.md +1 -1
  8. 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";
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/tailwind-preset.js CHANGED
@@ -70,18 +70,6 @@ const preset = {
70
70
  "button-green-surface": "var(--rs-color-button-green-surface)",
71
71
  "button-yellow-surface": "var(--rs-color-button-yellow-surface)",
72
72
  "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
73
  "sidebar-background": "var(--rs-color-sidebar-background)",
86
74
  "sidebar-background-active": "var(--rs-color-sidebar-background-active)",
87
75
  "sidebar-background-hover": "var(--rs-color-sidebar-background-hover)",
package/dist/tailwind.css CHANGED
@@ -67,21 +67,4 @@
67
67
  --color-rs-button-green-surface: var(--rs-color-button-green-surface);
68
68
  --color-rs-button-yellow-surface: var(--rs-color-button-yellow-surface);
69
69
  --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
70
  }
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
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@robosophy/tokens",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
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
  }