@robosophy/prime-theme 1.0.13 → 2.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 (5) hide show
  1. package/README.md +85 -5
  2. package/dist/index.js +39 -39
  3. package/dist/prime-layers.css +15 -0
  4. package/dist/prime.css +688 -144
  5. package/package.json +4 -3
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @robosophy/prime-theme
2
2
 
3
- Preset y overrides de PrimeVue para Robosophy.
3
+ Preset y overrides de tema para PrimeVue y PrimeReact de Robosophy.
4
4
 
5
5
  Este paquete instala `@robosophy/tokens` como dependencia. Por eso, al instalar `@robosophy/prime-theme` tambien queda disponible el contexto de tokens para desarrolladores y agentes de IA:
6
6
 
@@ -13,14 +13,18 @@ Este paquete instala `@robosophy/tokens` como dependencia. Por eso, al instalar
13
13
 
14
14
  ```sh
15
15
  npm install @robosophy/prime-theme primevue
16
+ # o para React:
17
+ npm install @robosophy/prime-theme primereact
16
18
  ```
17
19
 
18
- ## Uso
20
+ ## Uso con Vue
21
+
22
+ Vue usa `@primeuix/themes` para aplicar el preset directamente:
19
23
 
20
24
  ```ts
21
25
  import PrimeVue from "primevue/config";
22
26
  import RobosophyPreset from "@robosophy/prime-theme";
23
- import "@robosophy/prime-theme/prime.css";
27
+ import "@robosophy/prime-theme/prime-layers.css";
24
28
 
25
29
  app.use(PrimeVue, {
26
30
  theme: {
@@ -29,6 +33,82 @@ app.use(PrimeVue, {
29
33
  });
30
34
  ```
31
35
 
32
- No importes `@robosophy/tokens/tokens.css` por separado en apps con PrimeVue. `prime.css` ya importa `@robosophy/tokens/tokens.css` y no duplica valores de tokens.
36
+ El archivo `prime-layers.css` configura los CSS Cascade Layers automáticamente, permitiendo que los estilos de tu aplicación sobrescriban los del design system si es necesario.
37
+
38
+ ## Uso con React
39
+
40
+ PrimeReact 10 no usa `@primeuix/themes` como Vue. En su lugar, usa un sistema de temas CSS. Para configurar los CSS Cascade Layers correctamente, necesitas crear un archivo CSS local en tu aplicación.
41
+
42
+ ### Configuración de layers
43
+
44
+ Crea un archivo `layers.css` en tu aplicación:
45
+
46
+ ```css
47
+ /* layers.css */
48
+ @layer prime-base, prime-design;
49
+ @import "primereact/resources/themes/fluent-light/theme.css" layer(prime-base);
50
+ @import "@robosophy/prime-theme/prime.css" layer(prime-design);
51
+ ```
52
+
53
+ Luego importa este archivo en tu aplicación:
54
+
55
+ ```tsx
56
+ import { PrimeReactProvider } from "primereact/api";
57
+ import "./layers.css";
58
+
59
+ function MyApp({ Component, pageProps }) {
60
+ return (
61
+ <PrimeReactProvider>
62
+ <Component {...pageProps} />
63
+ </PrimeReactProvider>
64
+ );
65
+ }
66
+ ```
67
+
68
+ ### Tema base requerido
69
+
70
+ Solo `fluent-light` es compatible con los overrides de Robosophy.
71
+
72
+ ### CSS Cascade Layers
73
+
74
+ Los estilos están organizados en layers para permitir que las aplicaciones sobrescriban los estilos del design system:
75
+
76
+ ```
77
+ Layer "prime-base" (menor prioridad) ← Tema base de PrimeReact (fluent-light)
78
+ Layer "prime-design" (mayor prioridad) ← Design system de Robosophy
79
+ Sin layer (máxima prioridad) ← Estilos de tu aplicación
80
+ ```
81
+
82
+ Si necesitas sobrescribir estilos del design system en tu aplicación, simplemente escribe tus estilos CSS sin usar `@layer`. Estos tendrán mayor prioridad que los estilos de `prime-design`.
83
+
84
+ Ejemplo:
85
+
86
+ ```css
87
+ /* En tu aplicación */
88
+ .p-button {
89
+ border-radius: 12px; /* Esto sobrescribirá el border-radius del design system */
90
+ }
91
+ ```
92
+
93
+ ### Componentes cubiertos
94
+
95
+ `prime.css` aplica estilos a: buttons, inputs, selects, tabs, menus, dialogs, tooltips, messages, toasts, datatables, checkboxes, radios, drawers/sidebars, file uploads, password, icons, chips, badges, tags.
96
+
97
+ ## Notas importantes
98
+
99
+ No importes `@robosophy/tokens/tokens.css` por separado en apps con PrimeVue o PrimeReact. `prime-layers.css` (o `prime.css` en React) ya importa los tokens y no es necesario duplicarlos.
100
+
101
+ Si tambien usas `@robosophy/ui-vue` o `@robosophy/ui-react`, importa este preset y los archivos CSS una sola vez en la app. Los componentes usan las mismas variables `--rs-*`.
102
+
103
+ ### Archivos CSS disponibles
104
+
105
+ - `prime-layers.css`: para aplicaciones Vue. Configura los layers e importa los estilos del design system.
106
+ - `prime.css`: archivo base con los estilos del design system. Para Vue, usa `prime-layers.css`. Para React, úsalo en tu archivo `layers.css` local como se muestra arriba.
107
+
108
+ ### Compatibilidad de navegadores
33
109
 
34
- Si tambien usas `@robosophy/ui-vue`, importa este preset y `prime.css` una sola vez en la app. Los componentes Vue usan las mismas variables `--rs-*`.
110
+ Los CSS Cascade Layers son soportados desde:
111
+ - Chrome 99 (marzo 2022)
112
+ - Firefox 97 (marzo 2022)
113
+ - Safari 15.4 (marzo 2022)
114
+ - Edge 99 (marzo 2022)
package/dist/index.js CHANGED
@@ -36,15 +36,15 @@ var RobosophyPreset = definePreset(Aura, {
36
36
  contrastColor: "var(--rs-color-white-500)"
37
37
  },
38
38
  formField: {
39
- background: "var(--rs-color-surface-primary)",
40
- borderColor: "var(--rs-color-stroke-default)",
39
+ background: "var(--rs-color-neutral-50)",
40
+ borderColor: "var(--rs-color-neutral-700)",
41
41
  hoverBorderColor: "var(--rs-color-stroke-focused)",
42
42
  focusBorderColor: "var(--rs-color-stroke-focused)",
43
43
  invalidBorderColor: "var(--rs-color-stroke-error)",
44
44
  color: "var(--rs-color-text-primary)",
45
45
  disabledBackground: "var(--rs-color-background-disabled)",
46
46
  disabledColor: "var(--rs-color-text-secondary)",
47
- placeholderColor: "var(--rs-color-text-placeholder)"
47
+ placeholderColor: "var(--rs-color-neutral-100)"
48
48
  },
49
49
  text: {
50
50
  color: "var(--rs-color-text-primary)",
@@ -89,28 +89,28 @@ var RobosophyPreset = definePreset(Aura, {
89
89
  colorScheme: {
90
90
  light: {
91
91
  primary: {
92
- background: "var(--rs-color-blue-100)",
93
- color: "var(--rs-color-blue-500)"
92
+ background: "var(--rs-color-button-primary)",
93
+ color: "var(--rs-color-text-button-primary)"
94
94
  },
95
95
  secondary: {
96
- background: "var(--rs-color-gray-100)",
97
- color: "var(--rs-color-gray-500)"
96
+ background: "var(--rs-color-severity-secondary-background)",
97
+ color: "var(--rs-color-text-button-secondary)"
98
98
  },
99
99
  success: {
100
- background: "var(--rs-color-green-100)",
101
- color: "var(--rs-color-green-500)"
100
+ background: "var(--rs-color-severity-success-background)",
101
+ color: "var(--rs-color-text-button-secondary)"
102
102
  },
103
103
  info: {
104
- background: "var(--rs-color-blue-100)",
105
- color: "var(--rs-color-blue-500)"
104
+ background: "var(--rs-color-severity-info-background)",
105
+ color: "var(--rs-color-text-button-secondary)"
106
106
  },
107
107
  warn: {
108
- background: "var(--rs-color-yellow-100)",
109
- color: "var(--rs-color-yellow-500)"
108
+ background: "var(--rs-color-severity-warning-background)",
109
+ color: "var(--rs-color-text-button-secondary)"
110
110
  },
111
111
  danger: {
112
- background: "var(--rs-color-red-100)",
113
- color: "var(--rs-color-red-500)"
112
+ background: "var(--rs-color-severity-danger-background)",
113
+ color: "var(--rs-color-text-button-secondary)"
114
114
  },
115
115
  contrast: {
116
116
  background: "var(--rs-color-black-500)",
@@ -146,45 +146,45 @@ var RobosophyPreset = definePreset(Aura, {
146
146
  activeColor: "var(--rs-color-text-button-secondary)"
147
147
  },
148
148
  success: {
149
- background: "var(--rs-color-button-green-surface)",
150
- hoverBackground: "var(--rs-color-button-green-surface)",
151
- activeBackground: "var(--rs-color-button-green-surface)",
152
- borderColor: "var(--rs-color-button-green-surface)",
153
- hoverBorderColor: "var(--rs-color-button-green-surface)",
154
- activeBorderColor: "var(--rs-color-button-green-surface)",
149
+ background: "var(--rs-color-severity-success-background)",
150
+ hoverBackground: "var(--rs-color-severity-success-background)",
151
+ activeBackground: "var(--rs-color-severity-success-background)",
152
+ borderColor: "var(--rs-color-severity-success-background)",
153
+ hoverBorderColor: "var(--rs-color-severity-success-background)",
154
+ activeBorderColor: "var(--rs-color-severity-success-background)",
155
155
  color: "var(--rs-color-text-button-secondary)",
156
156
  hoverColor: "var(--rs-color-text-button-secondary)",
157
157
  activeColor: "var(--rs-color-text-button-secondary)"
158
158
  },
159
159
  info: {
160
- background: "var(--rs-color-button-blue-surface)",
161
- hoverBackground: "var(--rs-color-button-blue-surface)",
162
- activeBackground: "var(--rs-color-button-blue-surface)",
163
- borderColor: "var(--rs-color-button-blue-surface)",
164
- hoverBorderColor: "var(--rs-color-button-blue-surface)",
165
- activeBorderColor: "var(--rs-color-button-blue-surface)",
160
+ background: "var(--rs-color-severity-info-background)",
161
+ hoverBackground: "var(--rs-color-severity-info-background)",
162
+ activeBackground: "var(--rs-color-severity-info-background)",
163
+ borderColor: "var(--rs-color-severity-info-background)",
164
+ hoverBorderColor: "var(--rs-color-severity-info-background)",
165
+ activeBorderColor: "var(--rs-color-severity-info-background)",
166
166
  color: "var(--rs-color-text-button-secondary)",
167
167
  hoverColor: "var(--rs-color-text-button-secondary)",
168
168
  activeColor: "var(--rs-color-text-button-secondary)"
169
169
  },
170
170
  warn: {
171
- background: "var(--rs-color-button-yellow-surface)",
172
- hoverBackground: "var(--rs-color-button-yellow-surface)",
173
- activeBackground: "var(--rs-color-button-yellow-surface)",
174
- borderColor: "var(--rs-color-button-yellow-surface)",
175
- hoverBorderColor: "var(--rs-color-button-yellow-surface)",
176
- activeBorderColor: "var(--rs-color-button-yellow-surface)",
171
+ background: "var(--rs-color-severity-warning-background)",
172
+ hoverBackground: "var(--rs-color-severity-warning-background)",
173
+ activeBackground: "var(--rs-color-severity-warning-background)",
174
+ borderColor: "var(--rs-color-severity-warning-background)",
175
+ hoverBorderColor: "var(--rs-color-severity-warning-background)",
176
+ activeBorderColor: "var(--rs-color-severity-warning-background)",
177
177
  color: "var(--rs-color-text-button-secondary)",
178
178
  hoverColor: "var(--rs-color-text-button-secondary)",
179
179
  activeColor: "var(--rs-color-text-button-secondary)"
180
180
  },
181
181
  danger: {
182
- background: "var(--rs-color-button-red-surface)",
183
- hoverBackground: "var(--rs-color-button-red-surface)",
184
- activeBackground: "var(--rs-color-button-red-surface)",
185
- borderColor: "var(--rs-color-button-red-surface)",
186
- hoverBorderColor: "var(--rs-color-button-red-surface)",
187
- activeBorderColor: "var(--rs-color-button-red-surface)",
182
+ background: "var(--rs-color-severity-danger-background)",
183
+ hoverBackground: "var(--rs-color-severity-danger-background)",
184
+ activeBackground: "var(--rs-color-severity-danger-background)",
185
+ borderColor: "var(--rs-color-severity-danger-background)",
186
+ hoverBorderColor: "var(--rs-color-severity-danger-background)",
187
+ activeBorderColor: "var(--rs-color-severity-danger-background)",
188
188
  color: "var(--rs-color-text-button-secondary)",
189
189
  hoverColor: "var(--rs-color-text-button-secondary)",
190
190
  activeColor: "var(--rs-color-text-button-secondary)"
package/dist/prime-layers.css ADDED
@@ -0,0 +1,15 @@
1
+ /* AUTO-GENERATED FILE. DO NOT EDIT MANUALLY. */
2
+ /*
3
+ * Robosophy Prime Theme - Vue Layer Configuration
4
+ *
5
+ * Este archivo configura los CSS Cascade Layers para aplicaciones Vue.
6
+ * Importa este archivo en lugar de prime.css directamente.
7
+ *
8
+ * Jerarquía de layers:
9
+ * - prime-base: reservado para futuras extensiones
10
+ * - prime-design: estilos del design system de Robosophy
11
+ *
12
+ * Los estilos de la aplicación que NO estén en un layer tendrán mayor
13
+ * prioridad y podrán sobrescribir los estilos de prime-design.
14
+ */
15
+ @import "./prime.css";