@robosophy/prime-theme 1.0.14 → 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.
- package/README.md +114 -34
- package/dist/index.js +61 -27
- package/dist/prime-layers.css +15 -0
- package/dist/prime.css +1133 -588
- package/package.json +37 -36
package/README.md
CHANGED
|
@@ -1,34 +1,114 @@
|
|
|
1
|
-
# @robosophy/prime-theme
|
|
2
|
-
|
|
3
|
-
Preset y overrides de
|
|
4
|
-
|
|
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
|
-
|
|
7
|
-
- `node_modules/@robosophy/tokens/AGENTS.md`
|
|
8
|
-
- `node_modules/@robosophy/tokens/dist/ai-context.md`
|
|
9
|
-
- `node_modules/@robosophy/tokens/dist/tokens.md`
|
|
10
|
-
- `node_modules/@robosophy/tokens/dist/tokens.json`
|
|
11
|
-
|
|
12
|
-
## Instalacion
|
|
13
|
-
|
|
14
|
-
```sh
|
|
15
|
-
npm install @robosophy/prime-theme primevue
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
1
|
+
# @robosophy/prime-theme
|
|
2
|
+
|
|
3
|
+
Preset y overrides de tema para PrimeVue y PrimeReact de Robosophy.
|
|
4
|
+
|
|
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
|
+
|
|
7
|
+
- `node_modules/@robosophy/tokens/AGENTS.md`
|
|
8
|
+
- `node_modules/@robosophy/tokens/dist/ai-context.md`
|
|
9
|
+
- `node_modules/@robosophy/tokens/dist/tokens.md`
|
|
10
|
+
- `node_modules/@robosophy/tokens/dist/tokens.json`
|
|
11
|
+
|
|
12
|
+
## Instalacion
|
|
13
|
+
|
|
14
|
+
```sh
|
|
15
|
+
npm install @robosophy/prime-theme primevue
|
|
16
|
+
# o para React:
|
|
17
|
+
npm install @robosophy/prime-theme primereact
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Uso con Vue
|
|
21
|
+
|
|
22
|
+
Vue usa `@primeuix/themes` para aplicar el preset directamente:
|
|
23
|
+
|
|
24
|
+
```ts
|
|
25
|
+
import PrimeVue from "primevue/config";
|
|
26
|
+
import RobosophyPreset from "@robosophy/prime-theme";
|
|
27
|
+
import "@robosophy/prime-theme/prime-layers.css";
|
|
28
|
+
|
|
29
|
+
app.use(PrimeVue, {
|
|
30
|
+
theme: {
|
|
31
|
+
preset: RobosophyPreset,
|
|
32
|
+
},
|
|
33
|
+
});
|
|
34
|
+
```
|
|
35
|
+
|
|
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
|
|
109
|
+
|
|
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-
|
|
40
|
-
borderColor: "var(--rs-color-
|
|
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-
|
|
47
|
+
placeholderColor: "var(--rs-color-neutral-100)"
|
|
48
48
|
},
|
|
49
49
|
text: {
|
|
50
50
|
color: "var(--rs-color-text-primary)",
|
|
@@ -85,6 +85,40 @@ var RobosophyPreset = definePreset(Aura, {
|
|
|
85
85
|
height: "0"
|
|
86
86
|
}
|
|
87
87
|
},
|
|
88
|
+
tag: {
|
|
89
|
+
colorScheme: {
|
|
90
|
+
light: {
|
|
91
|
+
primary: {
|
|
92
|
+
background: "var(--rs-color-button-primary)",
|
|
93
|
+
color: "var(--rs-color-text-button-primary)"
|
|
94
|
+
},
|
|
95
|
+
secondary: {
|
|
96
|
+
background: "var(--rs-color-severity-secondary-background)",
|
|
97
|
+
color: "var(--rs-color-text-button-secondary)"
|
|
98
|
+
},
|
|
99
|
+
success: {
|
|
100
|
+
background: "var(--rs-color-severity-success-background)",
|
|
101
|
+
color: "var(--rs-color-text-button-secondary)"
|
|
102
|
+
},
|
|
103
|
+
info: {
|
|
104
|
+
background: "var(--rs-color-severity-info-background)",
|
|
105
|
+
color: "var(--rs-color-text-button-secondary)"
|
|
106
|
+
},
|
|
107
|
+
warn: {
|
|
108
|
+
background: "var(--rs-color-severity-warning-background)",
|
|
109
|
+
color: "var(--rs-color-text-button-secondary)"
|
|
110
|
+
},
|
|
111
|
+
danger: {
|
|
112
|
+
background: "var(--rs-color-severity-danger-background)",
|
|
113
|
+
color: "var(--rs-color-text-button-secondary)"
|
|
114
|
+
},
|
|
115
|
+
contrast: {
|
|
116
|
+
background: "var(--rs-color-black-500)",
|
|
117
|
+
color: "var(--rs-color-white-500)"
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
},
|
|
88
122
|
button: {
|
|
89
123
|
colorScheme: {
|
|
90
124
|
light: {
|
|
@@ -112,45 +146,45 @@ var RobosophyPreset = definePreset(Aura, {
|
|
|
112
146
|
activeColor: "var(--rs-color-text-button-secondary)"
|
|
113
147
|
},
|
|
114
148
|
success: {
|
|
115
|
-
background: "var(--rs-color-
|
|
116
|
-
hoverBackground: "var(--rs-color-
|
|
117
|
-
activeBackground: "var(--rs-color-
|
|
118
|
-
borderColor: "var(--rs-color-
|
|
119
|
-
hoverBorderColor: "var(--rs-color-
|
|
120
|
-
activeBorderColor: "var(--rs-color-
|
|
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)",
|
|
121
155
|
color: "var(--rs-color-text-button-secondary)",
|
|
122
156
|
hoverColor: "var(--rs-color-text-button-secondary)",
|
|
123
157
|
activeColor: "var(--rs-color-text-button-secondary)"
|
|
124
158
|
},
|
|
125
159
|
info: {
|
|
126
|
-
background: "var(--rs-color-
|
|
127
|
-
hoverBackground: "var(--rs-color-
|
|
128
|
-
activeBackground: "var(--rs-color-
|
|
129
|
-
borderColor: "var(--rs-color-
|
|
130
|
-
hoverBorderColor: "var(--rs-color-
|
|
131
|
-
activeBorderColor: "var(--rs-color-
|
|
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)",
|
|
132
166
|
color: "var(--rs-color-text-button-secondary)",
|
|
133
167
|
hoverColor: "var(--rs-color-text-button-secondary)",
|
|
134
168
|
activeColor: "var(--rs-color-text-button-secondary)"
|
|
135
169
|
},
|
|
136
170
|
warn: {
|
|
137
|
-
background: "var(--rs-color-
|
|
138
|
-
hoverBackground: "var(--rs-color-
|
|
139
|
-
activeBackground: "var(--rs-color-
|
|
140
|
-
borderColor: "var(--rs-color-
|
|
141
|
-
hoverBorderColor: "var(--rs-color-
|
|
142
|
-
activeBorderColor: "var(--rs-color-
|
|
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)",
|
|
143
177
|
color: "var(--rs-color-text-button-secondary)",
|
|
144
178
|
hoverColor: "var(--rs-color-text-button-secondary)",
|
|
145
179
|
activeColor: "var(--rs-color-text-button-secondary)"
|
|
146
180
|
},
|
|
147
181
|
danger: {
|
|
148
|
-
background: "var(--rs-color-
|
|
149
|
-
hoverBackground: "var(--rs-color-
|
|
150
|
-
activeBackground: "var(--rs-color-
|
|
151
|
-
borderColor: "var(--rs-color-
|
|
152
|
-
hoverBorderColor: "var(--rs-color-
|
|
153
|
-
activeBorderColor: "var(--rs-color-
|
|
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)",
|
|
154
188
|
color: "var(--rs-color-text-button-secondary)",
|
|
155
189
|
hoverColor: "var(--rs-color-text-button-secondary)",
|
|
156
190
|
activeColor: "var(--rs-color-text-button-secondary)"
|
|
@@ -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";
|