@robosophy/ui-react 4.0.0 → 4.0.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.
- package/AGENTS.md +2 -2
- package/README.md +14 -6
- package/package.json +2 -2
package/AGENTS.md
CHANGED
|
@@ -27,7 +27,7 @@ The main barrel (`@robosophy/ui-react`) loads all components including PrimeReac
|
|
|
27
27
|
|
|
28
28
|
## CSS Imports
|
|
29
29
|
|
|
30
|
-
PrimeReact apps:
|
|
30
|
+
PrimeReact apps: the consuming app owns the layer order. Put the base theme in `prime-base` and import the Robosophy overrides afterward:
|
|
31
31
|
|
|
32
32
|
Crea un archivo `layers.css` en tu aplicación:
|
|
33
33
|
|
|
@@ -54,7 +54,7 @@ function MyApp({ Component, pageProps }) {
|
|
|
54
54
|
}
|
|
55
55
|
```
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
The consuming app establishes the order: PrimeReact's base theme first, Robosophy overrides in `prime-design` next, and app styles without a layer last so they can override both.
|
|
58
58
|
|
|
59
59
|
Non-PrimeReact apps:
|
|
60
60
|
|
package/README.md
CHANGED
|
@@ -28,13 +28,23 @@ npm install @robosophy/ui-react @robosophy/tokens react react-dom
|
|
|
28
28
|
|
|
29
29
|
## PrimeReact theme
|
|
30
30
|
|
|
31
|
-
PrimeReact 10 usa un sistema de temas CSS.
|
|
31
|
+
PrimeReact 10 usa un sistema de temas CSS. La app consumidora define el orden de layers: el tema `fluent-light` en `prime-base` y los overrides de Robosophy en `prime-design`.
|
|
32
|
+
|
|
33
|
+
En el CSS de la app:
|
|
34
|
+
|
|
35
|
+
```css
|
|
36
|
+
/* app/layers.css */
|
|
37
|
+
@layer prime-base, prime-design;
|
|
38
|
+
@import "primereact/resources/themes/fluent-light/theme.css" layer(prime-base);
|
|
39
|
+
@import "@robosophy/prime-theme/prime.css" layer(prime-design);
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Luego importa ese CSS en la app junto con los estilos de UI React:
|
|
32
43
|
|
|
33
44
|
```tsx
|
|
34
45
|
// app/layout.tsx o pages/_app.tsx
|
|
35
46
|
import { PrimeReactProvider } from "primereact/api";
|
|
36
|
-
import "
|
|
37
|
-
import "@robosophy/prime-theme/prime.css";
|
|
47
|
+
import "./layers.css";
|
|
38
48
|
import "@robosophy/ui-react/styles.css";
|
|
39
49
|
|
|
40
50
|
function MyApp({ Component, pageProps }) {
|
|
@@ -46,9 +56,7 @@ function MyApp({ Component, pageProps }) {
|
|
|
46
56
|
}
|
|
47
57
|
```
|
|
48
58
|
|
|
49
|
-
|
|
50
|
-
1. Tema base de PrimeReact (ej: `fluent-light/theme.css`) — estilos estructurales
|
|
51
|
-
2. `@robosophy/prime-theme/prime.css` — aplica tokens `--rs-*` a componentes de PrimeReact
|
|
59
|
+
El tema base de PrimeReact queda en la layer inferior; `prime.css` aporta overrides en `prime-design`. Los estilos propios de la app, sin layer, pueden sobrescribir ambas capas.
|
|
52
60
|
|
|
53
61
|
`prime.css` ya importa `@robosophy/tokens/tokens.css`, así que no dupliques ese import.
|
|
54
62
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@robosophy/ui-react",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"type": "module",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"test": "vitest run"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
|
-
"@robosophy/prime-theme": ">=
|
|
46
|
+
"@robosophy/prime-theme": ">=3.0.0",
|
|
47
47
|
"primereact": ">=10",
|
|
48
48
|
"react": ">=18",
|
|
49
49
|
"react-dom": ">=18"
|