@robosophy/tokens 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/AGENTS.md +4 -3
  2. package/README.md +7 -6
  3. package/dist/ai-context.md +15 -10
  4. package/dist/cli.js +4 -2
  5. package/dist/tokens.md +1 -1
  6. package/package.json +2 -2
package/AGENTS.md CHANGED
@@ -2,9 +2,10 @@
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, unless the app imports `@robosophy/prime-theme/prime.css`.
6
- - In PrimeVue apps, import only `@robosophy/prime-theme/prime.css`; it already includes `@robosophy/tokens/tokens.css`.
7
- - In PrimeReact apps, import `primereact/resources/themes/fluent-light/theme.css` first, then `@robosophy/prime-theme/prime.css`. PrimeReact 10 uses legacy CSS variables, not `@primeuix/themes` like Vue. Only `fluent-light` is compatible with Robosophy overrides.
5
+ - Import `@robosophy/tokens/tokens.css` before using Robosophy CSS variables, unless the app imports `@robosophy/prime-theme/prime.css`, which already includes the tokens.
6
+ - Prime Theme provides overrides in `prime-design`; the consuming app owns the layer order. Keep Prime's runtime/base styles first, Robosophy overrides after them, and app styles unlayered so they can override both.
7
+ - In PrimeVue apps, declare `@layer primevue, prime-base, prime-design;` in the app CSS before importing `@robosophy/prime-theme/prime.css`, and enable `theme.options.cssLayer` with name `primevue` and the same order.
8
+ - In PrimeReact apps, put `primereact/resources/themes/fluent-light/theme.css` in `prime-base` and import `@robosophy/prime-theme/prime.css` in `prime-design`. PrimeReact 10 uses legacy CSS variables, not `@primeuix/themes` like Vue. Only `fluent-light` is compatible with Robosophy overrides.
8
9
  - Public CSS tokens use the `--rs-` prefix.
9
10
  - Do not hardcode hex colors when an equivalent Robosophy token exists.
10
11
  - Prefer semantic tokens over primitive palette tokens for component styles.
package/README.md CHANGED
@@ -18,7 +18,7 @@ import { tokens } from "@robosophy/tokens";
18
18
  import tokensJson from "@robosophy/tokens/tokens.json";
19
19
  ```
20
20
 
21
- Si la app usa `@robosophy/prime-theme`, importa solo `@robosophy/prime-theme/prime.css`: ese CSS ya importa `@robosophy/tokens/tokens.css`.
21
+ Si la app usa `@robosophy/prime-theme`, importa `prime.css` desde el CSS de la app; ese archivo ya importa `@robosophy/tokens/tokens.css`. La app consumidora debe definir el orden de layers: estilos base/runtime de Prime primero, overrides de Robosophy en `prime-design` después y estilos propios sin layer para conservar la mayor prioridad. En PrimeVue, además, habilita `theme.options.cssLayer` con la misma configuración de layers de la app.
22
22
 
23
23
  ## Breaking Changes
24
24
 
@@ -31,14 +31,15 @@ Si la app usa `@robosophy/prime-theme`, importa solo `@robosophy/prime-theme/pri
31
31
 
32
32
  ### Apps con PrimeReact
33
33
 
34
- PrimeReact 10 usa un sistema de temas CSS. Necesitas importar el tema `fluent-light` seguido de los overrides de Robosophy:
34
+ PrimeReact 10 usa un sistema de temas CSS. La app consumidora controla el orden de layers: el tema `fluent-light` va en `prime-base` y los overrides de Robosophy en `prime-design`:
35
35
 
36
- ```tsx
37
- import "primereact/resources/themes/fluent-light/theme.css";
38
- import "@robosophy/prime-theme/prime.css";
36
+ ```css
37
+ @layer prime-base, prime-design;
38
+ @import "primereact/resources/themes/fluent-light/theme.css" layer(prime-base);
39
+ @import "@robosophy/prime-theme/prime.css" layer(prime-design);
39
40
  ```
40
41
 
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
+ Los estilos propios de la app, sin layer, pueden sobrescribir ambos niveles. Solo `fluent-light` es compatible con los overrides de Robosophy.
42
43
 
43
44
  Para Tailwind, agrega el artefacto de Tailwind ademas del CSS base que corresponda:
44
45
 
package/dist/ai-context.md CHANGED
@@ -5,9 +5,10 @@ Use this file as the source of truth when generating UI code in projects that de
5
5
 
6
6
  ## Rules
7
7
 
8
- - Import `@robosophy/tokens/tokens.css` before using Robosophy CSS variables, unless the app imports `@robosophy/prime-theme/prime.css`.
9
- - In PrimeVue apps, import only `@robosophy/prime-theme/prime.css`; it already includes `@robosophy/tokens/tokens.css`.
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.
8
+ - Import `@robosophy/tokens/tokens.css` before using Robosophy CSS variables, unless the app imports `@robosophy/prime-theme/prime.css`, which already includes it.
9
+ - Prime Theme places Robosophy overrides in `prime-design`; the consuming app owns the layer order. Keep Prime runtime/base styles first, Prime Theme overrides after them, and app styles unlayered so they can override both.
10
+ - In PrimeVue apps, declare `@layer primevue, prime-base, prime-design;` in app CSS before importing `@robosophy/prime-theme/prime.css`, and enable `theme.options.cssLayer` with name `primevue` and the same order.
11
+ - In PrimeReact apps, place `primereact/resources/themes/fluent-light/theme.css` in `prime-base` and import `@robosophy/prime-theme/prime.css` in `prime-design`. PrimeReact 10 uses legacy CSS variables, not `@primeuix/themes` like Vue. Only `fluent-light` is compatible with Robosophy overrides.
11
12
  - Use public CSS variables with the `--rs-` prefix.
12
13
  - Do not hardcode hex colors when an equivalent Robosophy token exists.
13
14
  - Prefer semantic tokens such as `--rs-color-text-primary`, `--rs-color-background-info`, or `--rs-color-button-primary` over primitive palette tokens when styling components.
@@ -22,17 +23,21 @@ Use the direct tokens import when the app does not use `@robosophy/prime-theme`:
22
23
  import "@robosophy/tokens/tokens.css";
23
24
  ```
24
25
 
25
- Use the Prime theme import in PrimeVue apps:
26
+ In PrimeVue apps, the consuming app owns the layer order. Declare it before importing the Prime Theme CSS, then enable the matching runtime layer in PrimeVue:
26
27
 
27
- ```ts
28
- import "@robosophy/prime-theme/prime.css";
28
+ ```css
29
+ @layer primevue, prime-base, prime-design;
30
+ @import "@robosophy/prime-theme/prime.css";
29
31
  ```
30
32
 
31
- In PrimeReact apps, import the fluent-light theme first, then Robosophy overrides:
33
+ Then configure PrimeVue `theme.options.cssLayer` with name `primevue` and order `primevue, prime-base, prime-design`.
34
+
35
+ In PrimeReact apps, place the fluent-light theme in `prime-base` and import the Robosophy overrides after it:
32
36
 
33
- ```tsx
34
- import "primereact/resources/themes/fluent-light/theme.css";
35
- import "@robosophy/prime-theme/prime.css";
37
+ ```css
38
+ @layer prime-base, prime-design;
39
+ @import "primereact/resources/themes/fluent-light/theme.css" layer(prime-base);
40
+ @import "@robosophy/prime-theme/prime.css" layer(prime-design);
36
41
  ```
37
42
 
38
43
  Optional token artifacts:
package/dist/cli.js CHANGED
@@ -10,8 +10,10 @@ 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, 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\`.
13
+ - Import \`@robosophy/tokens/tokens.css\` before using Robosophy CSS variables, unless the app imports \`@robosophy/prime-theme/prime.css\`, which already includes it.
14
+ - Prime Theme places Robosophy overrides in \`prime-design\`; the consuming app owns the layer order. Keep Prime runtime/base styles first, Prime Theme overrides after them, and app styles unlayered so they can override both.
15
+ - In PrimeVue apps, declare \`@layer primevue, prime-base, prime-design;\` in app CSS before importing \`@robosophy/prime-theme/prime.css\`, and enable \`theme.options.cssLayer\` with name \`primevue\` and the same order.
16
+ - In PrimeReact apps, place \`primereact/resources/themes/fluent-light/theme.css\` in \`prime-base\` and import \`@robosophy/prime-theme/prime.css\` in \`prime-design\`. PrimeReact 10 uses legacy CSS variables, not \`@primeuix/themes\` like Vue. Only \`fluent-light\` is compatible with Robosophy overrides.
15
17
  - Use public CSS variables with the \`--rs-\` prefix.
16
18
  - Do not hardcode hex colors when an equivalent Robosophy token exists.
17
19
  - Prefer semantic tokens over primitive palette tokens for component styles.
package/dist/tokens.md CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  Generated from `packages/tokens/src/tokens.ts`.
5
5
 
6
- Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.css` before using them, unless the app imports `@robosophy/prime-theme/prime.css` which already includes it.
6
+ Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.css` before using them, unless the app imports `@robosophy/prime-theme/prime.css`, which already includes it.
7
7
 
8
8
  ## Color tokens
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@robosophy/tokens",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
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
+ }