@robosophy/prime-theme 0.0.3 → 1.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.
Files changed (5) hide show
  1. package/README.md +10 -2
  2. package/dist/index.d.ts +5 -0
  3. package/dist/index.js +109 -0
  4. package/dist/prime.css +34 -1
  5. package/package.json +8 -4
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @robosophy/prime-theme
2
2
 
3
- Overrides de PrimeVue para Robosophy.
3
+ Preset y overrides de PrimeVue para 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
 
@@ -18,9 +18,17 @@ npm install @robosophy/prime-theme primevue
18
18
  ## Uso
19
19
 
20
20
  ```ts
21
+ import PrimeVue from "primevue/config";
22
+ import RobosophyPreset from "@robosophy/prime-theme";
21
23
  import "@robosophy/prime-theme/prime.css";
24
+
25
+ app.use(PrimeVue, {
26
+ theme: {
27
+ preset: RobosophyPreset,
28
+ },
29
+ });
22
30
  ```
23
31
 
24
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.
25
33
 
26
- Si tambien usas `@robosophy/ui-vue`, la app puede importar solo el CSS de `prime-theme`; los componentes Vue usan las mismas variables `--rs-*`.
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-*`.
package/dist/index.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import * as _primeuix_themes_types from '@primeuix/themes/types';
2
+
3
+ declare const RobosophyPreset: _primeuix_themes_types.Preset;
4
+
5
+ export { RobosophyPreset, RobosophyPreset as default };
package/dist/index.js ADDED
@@ -0,0 +1,109 @@
1
+ // src/index.ts
2
+ import Aura from "@primeuix/themes/aura";
3
+ import { definePreset } from "@primeuix/themes";
4
+ var RobosophyPreset = definePreset(Aura, {
5
+ semantic: {
6
+ primary: {
7
+ 50: "var(--rs-color-blue-50)",
8
+ 100: "var(--rs-color-blue-100)",
9
+ 500: "var(--rs-color-blue-500)",
10
+ 700: "var(--rs-color-blue-700)",
11
+ color: "var(--rs-color-blue-500)",
12
+ hoverColor: "var(--rs-color-blue-700)",
13
+ activeColor: "var(--rs-color-blue-700)",
14
+ contrastColor: "var(--rs-color-white-500)"
15
+ },
16
+ colorScheme: {
17
+ light: {
18
+ surface: {
19
+ 0: "var(--rs-color-white-500)",
20
+ 50: "var(--rs-color-gray-100)",
21
+ 100: "var(--rs-color-gray-100)",
22
+ 200: "var(--rs-color-gray-300)",
23
+ 300: "var(--rs-color-gray-500)",
24
+ 400: "var(--rs-color-gray-700)",
25
+ 500: "var(--rs-color-gray-600)",
26
+ 600: "var(--rs-color-gray-600)",
27
+ 700: "var(--rs-color-gray-700)",
28
+ 800: "var(--rs-color-black-500)",
29
+ 900: "var(--rs-color-black-500)",
30
+ 950: "var(--rs-color-black-500)"
31
+ },
32
+ primary: {
33
+ color: "var(--rs-color-blue-500)",
34
+ hoverColor: "var(--rs-color-blue-700)",
35
+ activeColor: "var(--rs-color-blue-700)",
36
+ contrastColor: "var(--rs-color-white-500)"
37
+ },
38
+ formField: {
39
+ background: "var(--rs-color-surface-primary)",
40
+ borderColor: "var(--rs-color-stroke-default)",
41
+ hoverBorderColor: "var(--rs-color-stroke-focused)",
42
+ focusBorderColor: "var(--rs-color-stroke-focused)",
43
+ invalidBorderColor: "var(--rs-color-stroke-error)",
44
+ color: "var(--rs-color-text-primary)",
45
+ disabledBackground: "var(--rs-color-background-disabled)",
46
+ disabledColor: "var(--rs-color-text-secondary)",
47
+ placeholderColor: "var(--rs-color-text-placeholder)"
48
+ },
49
+ text: {
50
+ color: "var(--rs-color-text-primary)",
51
+ hoverColor: "var(--rs-color-text-primary)",
52
+ mutedColor: "var(--rs-color-text-secondary)",
53
+ hoverMutedColor: "var(--rs-color-text-secondary)"
54
+ }
55
+ }
56
+ }
57
+ },
58
+ components: {
59
+ button: {
60
+ colorScheme: {
61
+ light: {
62
+ root: {
63
+ primary: {
64
+ background: "var(--rs-color-button-primary)",
65
+ hoverBackground: "var(--rs-color-button-primary-hover)",
66
+ activeBackground: "var(--rs-color-button-primary-hover)",
67
+ borderColor: "var(--rs-color-button-primary)",
68
+ hoverBorderColor: "var(--rs-color-button-primary-hover)",
69
+ activeBorderColor: "var(--rs-color-button-primary-hover)",
70
+ color: "var(--rs-color-text-button-primary)",
71
+ hoverColor: "var(--rs-color-text-button-primary)",
72
+ activeColor: "var(--rs-color-text-button-primary)"
73
+ },
74
+ secondary: {
75
+ background: "var(--rs-color-button-secondary)",
76
+ hoverBackground: "var(--rs-color-button-secondary-hover)",
77
+ activeBackground: "var(--rs-color-button-secondary-hover)",
78
+ borderColor: "var(--rs-color-button-secondary)",
79
+ hoverBorderColor: "var(--rs-color-button-secondary-hover)",
80
+ activeBorderColor: "var(--rs-color-button-secondary-hover)",
81
+ color: "var(--rs-color-text-button-secondary)",
82
+ hoverColor: "var(--rs-color-text-button-secondary)",
83
+ activeColor: "var(--rs-color-text-button-secondary)"
84
+ }
85
+ },
86
+ outlined: {
87
+ primary: {
88
+ borderColor: "var(--rs-color-text-button-tertiary)",
89
+ color: "var(--rs-color-text-button-tertiary)",
90
+ hoverBackground: "var(--rs-color-button-blue-surface)",
91
+ activeBackground: "var(--rs-color-button-blue-surface)"
92
+ },
93
+ secondary: {
94
+ borderColor: "var(--rs-color-stroke-default)",
95
+ color: "var(--rs-color-text-button-secondary)",
96
+ hoverBackground: "transparent",
97
+ activeBackground: "transparent"
98
+ }
99
+ }
100
+ }
101
+ }
102
+ }
103
+ }
104
+ });
105
+ var index_default = RobosophyPreset;
106
+ export {
107
+ RobosophyPreset,
108
+ index_default as default
109
+ };
package/dist/prime.css CHANGED
@@ -91,7 +91,14 @@
91
91
  --p-button-outlined-primary-border-color: var(--rs-color-text-button-tertiary);
92
92
  --p-button-outlined-primary-hover-border-color: var(--rs-color-text-button-tertiary-hover);
93
93
  --p-button-outlined-primary-hover-background: var(--rs-color-button-blue-surface);
94
- --p-button-outlined-contrast-border-color: var(--rs-color-stroke-default);
94
+
95
+ /* === BUTTON OUTLINED SECONDARY === */
96
+ --p-button-outlined-secondary-color: var(--rs-color-text-button-secondary);
97
+ --p-button-outlined-secondary-border-color: var(--rs-color-stroke-default);
98
+ --p-button-outlined-secondary-hover-background: transparent;
99
+ --p-button-outlined-secondary-active-background: transparent;
100
+
101
+ --p-button-outlined-contrast-border-color: var(--rs-color-stroke-default);
95
102
 
96
103
  /* === BUTTON SUCCESS === */
97
104
  --p-button-success-background: var(--rs-color-button-green-surface);
@@ -122,6 +129,24 @@
122
129
  --p-select-option-selected-focus-color: var(--rs-color-button-secondary);
123
130
  --p-select-font-weight: var(--p-font-weight);
124
131
 
132
+ /* === MENU === */
133
+ --p-menu-background: var(--rs-color-surface-primary);
134
+ --p-menu-color: var(--rs-color-text-primary);
135
+ --p-menu-border-color: var(--rs-color-stroke-default);
136
+ --p-menu-border-radius: 4px;
137
+ --p-menu-list-padding: 0;
138
+ --p-menu-list-gap: 0;
139
+ --p-menu-item-color: var(--rs-color-text-primary);
140
+ --p-menu-item-focus-background: var(--rs-color-button-blue-surface);
141
+ --p-menu-item-focus-color: var(--rs-color-text-primary);
142
+ --p-menu-item-border-radius: 0;
143
+ --p-menu-item-gap: 8px;
144
+ --p-menu-item-icon-color: var(--rs-color-icon-secondary);
145
+ --p-menu-item-icon-focus-color: var(--rs-color-icon-secondary);
146
+ --p-menu-item-padding: 10px 14px;
147
+ --p-menu-shadow: 0 8px 24px rgb(0 0 0 / 18%);
148
+ --p-menu-transition-duration: 150ms;
149
+
125
150
  /* === MENSAJES / TOAST === */
126
151
  --p-message-success-background: var(--rs-color-green-100);
127
152
  --p-message-success-color: var(--rs-color-green-500);
@@ -244,6 +269,14 @@
244
269
  .p-select-label {
245
270
  align-self: center;
246
271
  }
272
+ /* menu */
273
+ .p-menu {
274
+ font-family: var(--rs-font-family);
275
+ font-weight: var(--p-font-weight);
276
+ }
277
+ .p-menu-item-label {
278
+ line-height: 1.2;
279
+ }
247
280
  /* datepicker */
248
281
  .p-datepicker-panel {
249
282
  min-width: 320px !important;
package/package.json CHANGED
@@ -1,11 +1,14 @@
1
1
  {
2
2
  "name": "@robosophy/prime-theme",
3
- "version": "0.0.3",
3
+ "version": "1.0.1",
4
4
  "private": false,
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
7
7
  "exports": {
8
- ".": "./dist/prime.css",
8
+ ".": {
9
+ "types": "./dist/index.d.ts",
10
+ "import": "./dist/index.js"
11
+ },
9
12
  "./prime.css": "./dist/prime.css"
10
13
  },
11
14
  "files": [
@@ -17,10 +20,11 @@
17
20
  "**/*.css"
18
21
  ],
19
22
  "scripts": {
20
- "build": "tsup scripts/build.ts --format esm --platform node --out-dir .build --clean && node .build/build.js && rimraf .build"
23
+ "build": "tsup src/index.ts --format esm --platform browser --dts --out-dir dist --clean && tsup scripts/build.ts --format esm --platform node --out-dir .build --clean && node .build/build.js && rimraf .build"
21
24
  },
22
25
  "dependencies": {
23
- "@robosophy/tokens": "0.0.2"
26
+ "@primeuix/themes": "^2.0.3",
27
+ "@robosophy/tokens": "1.0.0"
24
28
  },
25
29
  "devDependencies": {
26
30
  "rimraf": "^6.0.1",