@erplora/outfitkit 0.1.14 → 0.1.16

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 (54) hide show
  1. package/dist/base/icons.d.ts +59 -0
  2. package/dist/base/icons.test.d.ts +1 -0
  3. package/dist/cdn.d.ts +1 -0
  4. package/dist/components/ok-data-table/csv-encoding.d.ts +4 -0
  5. package/dist/components/ok-data-table/csv-encoding.test.d.ts +1 -0
  6. package/dist/components/ok-kpi/ok-kpi.d.ts +1 -1
  7. package/dist/components/ok-theme-picker/ok-theme-picker.d.ts +46 -0
  8. package/dist/components/ok-theme-picker/ok-theme-picker.test.d.ts +1 -0
  9. package/dist/index.d.ts +4 -2
  10. package/dist/index.js +4 -0
  11. package/dist/ok-app-launcher.js +4 -3
  12. package/dist/ok-audio.js +4 -3
  13. package/dist/ok-calendar.js +4 -3
  14. package/dist/ok-carousel.js +3 -2
  15. package/dist/ok-chat.js +2 -1
  16. package/dist/ok-combo.js +2 -1
  17. package/dist/ok-command-palette.js +3 -2
  18. package/dist/ok-data-table.js +27 -16
  19. package/dist/ok-date-picker.js +4 -3
  20. package/dist/ok-drawer.js +3 -2
  21. package/dist/ok-dropzone.js +5 -4
  22. package/dist/ok-empty-state.js +2 -1
  23. package/dist/ok-error-page.js +2 -1
  24. package/dist/ok-file-manager.js +5 -4
  25. package/dist/ok-icon-tile.js +2 -1
  26. package/dist/ok-inline-feedback.js +8 -7
  27. package/dist/ok-kpi.js +7 -6
  28. package/dist/ok-lightbox.js +7 -6
  29. package/dist/ok-mail.js +10 -9
  30. package/dist/ok-menu.js +2 -1
  31. package/dist/ok-menubar.js +6 -5
  32. package/dist/ok-notification-center.js +4 -3
  33. package/dist/ok-pdf.js +4 -3
  34. package/dist/ok-pinpad.js +3 -2
  35. package/dist/ok-qty-stepper.js +3 -2
  36. package/dist/ok-rating.js +3 -2
  37. package/dist/ok-scheduler.js +3 -2
  38. package/dist/ok-select-card.js +2 -1
  39. package/dist/ok-signature.js +3 -2
  40. package/dist/ok-split-button.js +3 -2
  41. package/dist/ok-status-pill.js +2 -1
  42. package/dist/ok-stepper.js +2 -1
  43. package/dist/ok-tag-input.js +2 -1
  44. package/dist/ok-theme-picker.js +221 -0
  45. package/dist/ok-timeline.js +2 -1
  46. package/dist/ok-tree.js +3 -2
  47. package/dist/ok-video.js +5 -4
  48. package/dist/ok-widget-board.js +2 -1
  49. package/dist/outfitkit.bundle.js +3378 -3117
  50. package/dist/outfitkit.js +1 -0
  51. package/dist/palettes.css +422 -0
  52. package/dist/shared/icons.js +194 -0
  53. package/dist/theme/palettes.test.d.ts +1 -0
  54. package/package.json +10 -2
package/dist/outfitkit.js CHANGED
@@ -73,6 +73,7 @@ import "./ok-hover-card.js";
73
73
  import "./ok-notification-center.js";
74
74
  import "./ok-coachmark.js";
75
75
  import "./ok-select-card.js";
76
+ import "./ok-theme-picker.js";
76
77
  import "./ok-error-page.js";
77
78
  import "./ok-date-picker.js";
78
79
  import "./ok-time-picker.js";
package/dist/palettes.css ADDED
@@ -0,0 +1,422 @@
1
+ /* Paletas de tema OPCIONALES sobre el tema canónico (erplora.css) — traídas del showcase
2
+ * ERPlora/ux (lib/templates/*.css, manifest 2.1.0), traducidas de tokens --ux-* a --ion-*.
3
+ *
4
+ * Mecanismo: `data-ok-palette="<id>"` en el <html>. SIN atributo = marca ERPlora (el azul
5
+ * de erplora.css). El oscuro sigue siendo la clase Ionic `ion-palette-dark`, que COMPONE
6
+ * con la paleta: `:root.ion-palette-dark[data-ok-palette="ocean"]`.
7
+ *
8
+ * ⚠️ Contrato de especificidad (blindado por palettes.test.ts): el bloque claro de una
9
+ * paleta (0,2,0) empata con el oscuro base de erplora.css (0,2,0) y, al cargar este fichero
10
+ * DESPUÉS, lo pisa. Solo el bloque oscuro de la paleta (0,3,0) lo corrige — por eso los dos
11
+ * bloques de cada paleta definen SIEMPRE el mismo set de tokens.
12
+ *
13
+ * La escala de pasos se deriva con color-mix (texto N% sobre lienzo), la misma regla con la
14
+ * que Ionic genera sus steps — así cada paleta hereda superficies coherentes sin 9 literales.
15
+ *
16
+ * Carga: DESPUÉS de erplora.css.
17
+ * @import '@erplora/outfitkit/erplora.css';
18
+ * @import '@erplora/outfitkit/palettes.css';
19
+ */
20
+
21
+ /* ═══════════════ TERRACOTTA — el default cálido del showcase ux ═══════════════ */
22
+
23
+ :root[data-ok-palette='terracotta'] {
24
+ --ion-color-primary: #E8552A;
25
+ --ion-color-primary-rgb: 232, 85, 42;
26
+ --ion-color-primary-contrast: #ffffff;
27
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
28
+ --ion-color-primary-shade: #B83A12;
29
+ --ion-color-primary-tint: #FF7A4D;
30
+
31
+ --ion-background-color: #FAF8F4;
32
+ --ion-background-color-rgb: 250, 248, 244;
33
+ --ion-text-color: #1A1612;
34
+ --ion-text-color-rgb: 26, 22, 18;
35
+
36
+ --ion-color-medium: #837B70;
37
+ --ion-color-medium-rgb: 131, 123, 112;
38
+
39
+ --ion-item-background: #ffffff;
40
+ --ion-card-background: #ffffff;
41
+ --ion-border-color: rgba(20, 14, 8, 0.13);
42
+
43
+ --ion-color-step-50: color-mix(in srgb, var(--ion-text-color) 5%, var(--ion-background-color));
44
+ --ion-color-step-100: color-mix(in srgb, var(--ion-text-color) 10%, var(--ion-background-color));
45
+ --ion-color-step-150: color-mix(in srgb, var(--ion-text-color) 15%, var(--ion-background-color));
46
+ --ion-color-step-200: color-mix(in srgb, var(--ion-text-color) 20%, var(--ion-background-color));
47
+ --ion-color-step-250: color-mix(in srgb, var(--ion-text-color) 25%, var(--ion-background-color));
48
+ --ion-color-step-300: color-mix(in srgb, var(--ion-text-color) 30%, var(--ion-background-color));
49
+ --ion-color-step-500: color-mix(in srgb, var(--ion-text-color) 50%, var(--ion-background-color));
50
+ --ion-color-step-700: color-mix(in srgb, var(--ion-text-color) 70%, var(--ion-background-color));
51
+ --ion-color-step-850: color-mix(in srgb, var(--ion-text-color) 85%, var(--ion-background-color));
52
+ }
53
+
54
+ :root.ion-palette-dark[data-ok-palette='terracotta'] {
55
+ --ion-color-primary: #E8552A;
56
+ --ion-color-primary-rgb: 232, 85, 42;
57
+ --ion-color-primary-contrast: #ffffff;
58
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
59
+ --ion-color-primary-shade: #B83A12;
60
+ --ion-color-primary-tint: #FF7A4D;
61
+
62
+ --ion-background-color: #0B0A09;
63
+ --ion-background-color-rgb: 11, 10, 9;
64
+ --ion-text-color: #F5F1EA;
65
+ --ion-text-color-rgb: 245, 241, 234;
66
+
67
+ --ion-color-medium: #8A8378;
68
+ --ion-color-medium-rgb: 138, 131, 120;
69
+
70
+ --ion-item-background: #1A1815;
71
+ --ion-card-background: #1A1815;
72
+ --ion-border-color: rgba(255, 255, 255, 0.1);
73
+
74
+ --ion-color-step-50: color-mix(in srgb, var(--ion-text-color) 5%, var(--ion-background-color));
75
+ --ion-color-step-100: color-mix(in srgb, var(--ion-text-color) 10%, var(--ion-background-color));
76
+ --ion-color-step-150: color-mix(in srgb, var(--ion-text-color) 15%, var(--ion-background-color));
77
+ --ion-color-step-200: color-mix(in srgb, var(--ion-text-color) 20%, var(--ion-background-color));
78
+ --ion-color-step-250: color-mix(in srgb, var(--ion-text-color) 25%, var(--ion-background-color));
79
+ --ion-color-step-300: color-mix(in srgb, var(--ion-text-color) 30%, var(--ion-background-color));
80
+ --ion-color-step-500: color-mix(in srgb, var(--ion-text-color) 50%, var(--ion-background-color));
81
+ --ion-color-step-700: color-mix(in srgb, var(--ion-text-color) 70%, var(--ion-background-color));
82
+ --ion-color-step-850: color-mix(in srgb, var(--ion-text-color) 85%, var(--ion-background-color));
83
+
84
+ /* El oscuro base trae un literal zinc; aquí debe seguir a la paleta. */
85
+ --ok-surface-muted: var(--ion-color-step-50);
86
+ }
87
+
88
+ /* ═══════════════ CORPORATE — navy profundo, banca/enterprise ═══════════════ */
89
+
90
+ :root[data-ok-palette='corporate'] {
91
+ --ion-color-primary: #0F3F9C;
92
+ --ion-color-primary-rgb: 15, 63, 156;
93
+ --ion-color-primary-contrast: #ffffff;
94
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
95
+ --ion-color-primary-shade: #012B80;
96
+ --ion-color-primary-tint: #0060C5;
97
+
98
+ --ion-background-color: #F6F8FB;
99
+ --ion-background-color-rgb: 246, 248, 251;
100
+ --ion-text-color: #0F1626;
101
+ --ion-text-color-rgb: 15, 22, 38;
102
+
103
+ --ion-color-medium: #777E92;
104
+ --ion-color-medium-rgb: 119, 126, 146;
105
+
106
+ --ion-item-background: #ffffff;
107
+ --ion-card-background: #ffffff;
108
+ --ion-border-color: rgba(20, 30, 50, 0.12);
109
+
110
+ --ion-color-step-50: color-mix(in srgb, var(--ion-text-color) 5%, var(--ion-background-color));
111
+ --ion-color-step-100: color-mix(in srgb, var(--ion-text-color) 10%, var(--ion-background-color));
112
+ --ion-color-step-150: color-mix(in srgb, var(--ion-text-color) 15%, var(--ion-background-color));
113
+ --ion-color-step-200: color-mix(in srgb, var(--ion-text-color) 20%, var(--ion-background-color));
114
+ --ion-color-step-250: color-mix(in srgb, var(--ion-text-color) 25%, var(--ion-background-color));
115
+ --ion-color-step-300: color-mix(in srgb, var(--ion-text-color) 30%, var(--ion-background-color));
116
+ --ion-color-step-500: color-mix(in srgb, var(--ion-text-color) 50%, var(--ion-background-color));
117
+ --ion-color-step-700: color-mix(in srgb, var(--ion-text-color) 70%, var(--ion-background-color));
118
+ --ion-color-step-850: color-mix(in srgb, var(--ion-text-color) 85%, var(--ion-background-color));
119
+ }
120
+
121
+ :root.ion-palette-dark[data-ok-palette='corporate'] {
122
+ /* En oscuro el navy sube a un azul más luminoso (el "focus ring" del ux) para
123
+ * que botones y enlaces no se hundan en el lienzo slate. */
124
+ --ion-color-primary: #176EC8;
125
+ --ion-color-primary-rgb: 23, 110, 200;
126
+ --ion-color-primary-contrast: #ffffff;
127
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
128
+ --ion-color-primary-shade: #093995;
129
+ --ion-color-primary-tint: #3E87D6;
130
+
131
+ --ion-background-color: #0A0E14;
132
+ --ion-background-color-rgb: 10, 14, 20;
133
+ --ion-text-color: #EEF2F8;
134
+ --ion-text-color-rgb: 238, 242, 248;
135
+
136
+ --ion-color-medium: #7B8597;
137
+ --ion-color-medium-rgb: 123, 133, 151;
138
+
139
+ --ion-item-background: #161C26;
140
+ --ion-card-background: #161C26;
141
+ --ion-border-color: rgba(180, 200, 230, 0.1);
142
+
143
+ --ion-color-step-50: color-mix(in srgb, var(--ion-text-color) 5%, var(--ion-background-color));
144
+ --ion-color-step-100: color-mix(in srgb, var(--ion-text-color) 10%, var(--ion-background-color));
145
+ --ion-color-step-150: color-mix(in srgb, var(--ion-text-color) 15%, var(--ion-background-color));
146
+ --ion-color-step-200: color-mix(in srgb, var(--ion-text-color) 20%, var(--ion-background-color));
147
+ --ion-color-step-250: color-mix(in srgb, var(--ion-text-color) 25%, var(--ion-background-color));
148
+ --ion-color-step-300: color-mix(in srgb, var(--ion-text-color) 30%, var(--ion-background-color));
149
+ --ion-color-step-500: color-mix(in srgb, var(--ion-text-color) 50%, var(--ion-background-color));
150
+ --ion-color-step-700: color-mix(in srgb, var(--ion-text-color) 70%, var(--ion-background-color));
151
+ --ion-color-step-850: color-mix(in srgb, var(--ion-text-color) 85%, var(--ion-background-color));
152
+
153
+ --ok-surface-muted: var(--ion-color-step-50);
154
+ }
155
+
156
+ /* ═══════════════ MINIMAL — mono editorial/luxury ═══════════════ */
157
+
158
+ :root[data-ok-palette='minimal'] {
159
+ --ion-color-primary: #111111;
160
+ --ion-color-primary-rgb: 17, 17, 17;
161
+ --ion-color-primary-contrast: #ffffff;
162
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
163
+ --ion-color-primary-shade: #000000;
164
+ --ion-color-primary-tint: #2E2E2E;
165
+
166
+ --ion-background-color: #ffffff;
167
+ --ion-background-color-rgb: 255, 255, 255;
168
+ --ion-text-color: #0A0A0A;
169
+ --ion-text-color-rgb: 10, 10, 10;
170
+
171
+ --ion-color-medium: #858585;
172
+ --ion-color-medium-rgb: 133, 133, 133;
173
+
174
+ --ion-item-background: #FAFAFA;
175
+ --ion-card-background: #FAFAFA;
176
+ --ion-border-color: rgba(0, 0, 0, 0.08);
177
+
178
+ --ion-color-step-50: color-mix(in srgb, var(--ion-text-color) 5%, var(--ion-background-color));
179
+ --ion-color-step-100: color-mix(in srgb, var(--ion-text-color) 10%, var(--ion-background-color));
180
+ --ion-color-step-150: color-mix(in srgb, var(--ion-text-color) 15%, var(--ion-background-color));
181
+ --ion-color-step-200: color-mix(in srgb, var(--ion-text-color) 20%, var(--ion-background-color));
182
+ --ion-color-step-250: color-mix(in srgb, var(--ion-text-color) 25%, var(--ion-background-color));
183
+ --ion-color-step-300: color-mix(in srgb, var(--ion-text-color) 30%, var(--ion-background-color));
184
+ --ion-color-step-500: color-mix(in srgb, var(--ion-text-color) 50%, var(--ion-background-color));
185
+ --ion-color-step-700: color-mix(in srgb, var(--ion-text-color) 70%, var(--ion-background-color));
186
+ --ion-color-step-850: color-mix(in srgb, var(--ion-text-color) 85%, var(--ion-background-color));
187
+ }
188
+
189
+ :root.ion-palette-dark[data-ok-palette='minimal'] {
190
+ /* Mono INVERTIDO: el brand #0A0A0A del ux sería invisible sobre lienzo negro;
191
+ * en oscuro el primario es la tinta (blanco), como un tema mono clásico. */
192
+ --ion-color-primary: #FAFAFA;
193
+ --ion-color-primary-rgb: 250, 250, 250;
194
+ --ion-color-primary-contrast: #0A0A0A;
195
+ --ion-color-primary-contrast-rgb: 10, 10, 10;
196
+ --ion-color-primary-shade: #E0E0E0;
197
+ --ion-color-primary-tint: #ffffff;
198
+
199
+ --ion-background-color: #0A0A0A;
200
+ --ion-background-color-rgb: 10, 10, 10;
201
+ --ion-text-color: #FAFAFA;
202
+ --ion-text-color-rgb: 250, 250, 250;
203
+
204
+ --ion-color-medium: #888888;
205
+ --ion-color-medium-rgb: 136, 136, 136;
206
+
207
+ --ion-item-background: #161616;
208
+ --ion-card-background: #161616;
209
+ --ion-border-color: rgba(255, 255, 255, 0.12);
210
+
211
+ --ion-color-step-50: color-mix(in srgb, var(--ion-text-color) 5%, var(--ion-background-color));
212
+ --ion-color-step-100: color-mix(in srgb, var(--ion-text-color) 10%, var(--ion-background-color));
213
+ --ion-color-step-150: color-mix(in srgb, var(--ion-text-color) 15%, var(--ion-background-color));
214
+ --ion-color-step-200: color-mix(in srgb, var(--ion-text-color) 20%, var(--ion-background-color));
215
+ --ion-color-step-250: color-mix(in srgb, var(--ion-text-color) 25%, var(--ion-background-color));
216
+ --ion-color-step-300: color-mix(in srgb, var(--ion-text-color) 30%, var(--ion-background-color));
217
+ --ion-color-step-500: color-mix(in srgb, var(--ion-text-color) 50%, var(--ion-background-color));
218
+ --ion-color-step-700: color-mix(in srgb, var(--ion-text-color) 70%, var(--ion-background-color));
219
+ --ion-color-step-850: color-mix(in srgb, var(--ion-text-color) 85%, var(--ion-background-color));
220
+
221
+ --ok-surface-muted: var(--ion-color-step-50);
222
+ }
223
+
224
+ /* ═══════════════ FOREST — verde forestal y tierra ═══════════════ */
225
+
226
+ :root[data-ok-palette='forest'] {
227
+ --ion-color-primary: #1F542A;
228
+ --ion-color-primary-rgb: 31, 84, 42;
229
+ --ion-color-primary-contrast: #ffffff;
230
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
231
+ --ion-color-primary-shade: #11401C;
232
+ --ion-color-primary-tint: #2C8240;
233
+
234
+ --ion-background-color: #FAF6EE;
235
+ --ion-background-color-rgb: 250, 246, 238;
236
+ --ion-text-color: #1B1810;
237
+ --ion-text-color-rgb: 27, 24, 16;
238
+
239
+ --ion-color-medium: #87806C;
240
+ --ion-color-medium-rgb: 135, 128, 108;
241
+
242
+ --ion-item-background: #ffffff;
243
+ --ion-card-background: #ffffff;
244
+ --ion-border-color: rgba(60, 45, 20, 0.14);
245
+
246
+ --ion-color-step-50: color-mix(in srgb, var(--ion-text-color) 5%, var(--ion-background-color));
247
+ --ion-color-step-100: color-mix(in srgb, var(--ion-text-color) 10%, var(--ion-background-color));
248
+ --ion-color-step-150: color-mix(in srgb, var(--ion-text-color) 15%, var(--ion-background-color));
249
+ --ion-color-step-200: color-mix(in srgb, var(--ion-text-color) 20%, var(--ion-background-color));
250
+ --ion-color-step-250: color-mix(in srgb, var(--ion-text-color) 25%, var(--ion-background-color));
251
+ --ion-color-step-300: color-mix(in srgb, var(--ion-text-color) 30%, var(--ion-background-color));
252
+ --ion-color-step-500: color-mix(in srgb, var(--ion-text-color) 50%, var(--ion-background-color));
253
+ --ion-color-step-700: color-mix(in srgb, var(--ion-text-color) 70%, var(--ion-background-color));
254
+ --ion-color-step-850: color-mix(in srgb, var(--ion-text-color) 85%, var(--ion-background-color));
255
+ }
256
+
257
+ :root.ion-palette-dark[data-ok-palette='forest'] {
258
+ /* Como en corporate: en oscuro el verde sube un paso de luminancia. */
259
+ --ion-color-primary: #3B874A;
260
+ --ion-color-primary-rgb: 59, 135, 74;
261
+ --ion-color-primary-contrast: #ffffff;
262
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
263
+ --ion-color-primary-shade: #25532E;
264
+ --ion-color-primary-tint: #4E9E5E;
265
+
266
+ --ion-background-color: #14110D;
267
+ --ion-background-color-rgb: 20, 17, 13;
268
+ --ion-text-color: #F1ECE0;
269
+ --ion-text-color-rgb: 241, 236, 224;
270
+
271
+ --ion-color-medium: #8C8472;
272
+ --ion-color-medium-rgb: 140, 132, 114;
273
+
274
+ --ion-item-background: #221F18;
275
+ --ion-card-background: #221F18;
276
+ --ion-border-color: rgba(220, 200, 170, 0.11);
277
+
278
+ --ion-color-step-50: color-mix(in srgb, var(--ion-text-color) 5%, var(--ion-background-color));
279
+ --ion-color-step-100: color-mix(in srgb, var(--ion-text-color) 10%, var(--ion-background-color));
280
+ --ion-color-step-150: color-mix(in srgb, var(--ion-text-color) 15%, var(--ion-background-color));
281
+ --ion-color-step-200: color-mix(in srgb, var(--ion-text-color) 20%, var(--ion-background-color));
282
+ --ion-color-step-250: color-mix(in srgb, var(--ion-text-color) 25%, var(--ion-background-color));
283
+ --ion-color-step-300: color-mix(in srgb, var(--ion-text-color) 30%, var(--ion-background-color));
284
+ --ion-color-step-500: color-mix(in srgb, var(--ion-text-color) 50%, var(--ion-background-color));
285
+ --ion-color-step-700: color-mix(in srgb, var(--ion-text-color) 70%, var(--ion-background-color));
286
+ --ion-color-step-850: color-mix(in srgb, var(--ion-text-color) 85%, var(--ion-background-color));
287
+
288
+ --ok-surface-muted: var(--ion-color-step-50);
289
+ }
290
+
291
+ /* ═══════════════ OCEAN — teal/cian tech ═══════════════ */
292
+
293
+ :root[data-ok-palette='ocean'] {
294
+ --ion-color-primary: #008CBD;
295
+ --ion-color-primary-rgb: 0, 140, 189;
296
+ --ion-color-primary-contrast: #ffffff;
297
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
298
+ --ion-color-primary-shade: #0073A3;
299
+ --ion-color-primary-tint: #00ADD9;
300
+
301
+ --ion-background-color: #F4F8FC;
302
+ --ion-background-color-rgb: 244, 248, 252;
303
+ --ion-text-color: #0A1626;
304
+ --ion-text-color-rgb: 10, 22, 38;
305
+
306
+ --ion-color-medium: #768395;
307
+ --ion-color-medium-rgb: 118, 131, 149;
308
+
309
+ --ion-item-background: #ffffff;
310
+ --ion-card-background: #ffffff;
311
+ --ion-border-color: rgba(15, 40, 80, 0.13);
312
+
313
+ --ion-color-step-50: color-mix(in srgb, var(--ion-text-color) 5%, var(--ion-background-color));
314
+ --ion-color-step-100: color-mix(in srgb, var(--ion-text-color) 10%, var(--ion-background-color));
315
+ --ion-color-step-150: color-mix(in srgb, var(--ion-text-color) 15%, var(--ion-background-color));
316
+ --ion-color-step-200: color-mix(in srgb, var(--ion-text-color) 20%, var(--ion-background-color));
317
+ --ion-color-step-250: color-mix(in srgb, var(--ion-text-color) 25%, var(--ion-background-color));
318
+ --ion-color-step-300: color-mix(in srgb, var(--ion-text-color) 30%, var(--ion-background-color));
319
+ --ion-color-step-500: color-mix(in srgb, var(--ion-text-color) 50%, var(--ion-background-color));
320
+ --ion-color-step-700: color-mix(in srgb, var(--ion-text-color) 70%, var(--ion-background-color));
321
+ --ion-color-step-850: color-mix(in srgb, var(--ion-text-color) 85%, var(--ion-background-color));
322
+ }
323
+
324
+ :root.ion-palette-dark[data-ok-palette='ocean'] {
325
+ /* El cian vivo del ux lleva texto OSCURO encima (contraste correcto). */
326
+ --ion-color-primary: #00B1DA;
327
+ --ion-color-primary-rgb: 0, 177, 218;
328
+ --ion-color-primary-contrast: #06141C;
329
+ --ion-color-primary-contrast-rgb: 6, 20, 28;
330
+ --ion-color-primary-shade: #0091BB;
331
+ --ion-color-primary-tint: #00CDEF;
332
+
333
+ --ion-background-color: #060B14;
334
+ --ion-background-color-rgb: 6, 11, 20;
335
+ --ion-text-color: #ECF3FA;
336
+ --ion-text-color-rgb: 236, 243, 250;
337
+
338
+ --ion-color-medium: #788599;
339
+ --ion-color-medium-rgb: 120, 133, 153;
340
+
341
+ --ion-item-background: #11192A;
342
+ --ion-card-background: #11192A;
343
+ --ion-border-color: rgba(140, 180, 230, 0.12);
344
+
345
+ --ion-color-step-50: color-mix(in srgb, var(--ion-text-color) 5%, var(--ion-background-color));
346
+ --ion-color-step-100: color-mix(in srgb, var(--ion-text-color) 10%, var(--ion-background-color));
347
+ --ion-color-step-150: color-mix(in srgb, var(--ion-text-color) 15%, var(--ion-background-color));
348
+ --ion-color-step-200: color-mix(in srgb, var(--ion-text-color) 20%, var(--ion-background-color));
349
+ --ion-color-step-250: color-mix(in srgb, var(--ion-text-color) 25%, var(--ion-background-color));
350
+ --ion-color-step-300: color-mix(in srgb, var(--ion-text-color) 30%, var(--ion-background-color));
351
+ --ion-color-step-500: color-mix(in srgb, var(--ion-text-color) 50%, var(--ion-background-color));
352
+ --ion-color-step-700: color-mix(in srgb, var(--ion-text-color) 70%, var(--ion-background-color));
353
+ --ion-color-step-850: color-mix(in srgb, var(--ion-text-color) 85%, var(--ion-background-color));
354
+
355
+ --ok-surface-muted: var(--ion-color-step-50);
356
+ }
357
+
358
+ /* ═══════════════ VIOLET — violeta creativo ═══════════════ */
359
+
360
+ :root[data-ok-palette='violet'] {
361
+ --ion-color-primary: #742AD9;
362
+ --ion-color-primary-rgb: 116, 42, 217;
363
+ --ion-color-primary-contrast: #ffffff;
364
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
365
+ --ion-color-primary-shade: #5C10B4;
366
+ --ion-color-primary-tint: #8E58F2;
367
+
368
+ --ion-background-color: #FBF7FA;
369
+ --ion-background-color-rgb: 251, 247, 250;
370
+ --ion-text-color: #1A1024;
371
+ --ion-text-color-rgb: 26, 16, 36;
372
+
373
+ --ion-color-medium: #82728A;
374
+ --ion-color-medium-rgb: 130, 114, 138;
375
+
376
+ --ion-item-background: #ffffff;
377
+ --ion-card-background: #ffffff;
378
+ --ion-border-color: rgba(60, 25, 70, 0.13);
379
+
380
+ --ion-color-step-50: color-mix(in srgb, var(--ion-text-color) 5%, var(--ion-background-color));
381
+ --ion-color-step-100: color-mix(in srgb, var(--ion-text-color) 10%, var(--ion-background-color));
382
+ --ion-color-step-150: color-mix(in srgb, var(--ion-text-color) 15%, var(--ion-background-color));
383
+ --ion-color-step-200: color-mix(in srgb, var(--ion-text-color) 20%, var(--ion-background-color));
384
+ --ion-color-step-250: color-mix(in srgb, var(--ion-text-color) 25%, var(--ion-background-color));
385
+ --ion-color-step-300: color-mix(in srgb, var(--ion-text-color) 30%, var(--ion-background-color));
386
+ --ion-color-step-500: color-mix(in srgb, var(--ion-text-color) 50%, var(--ion-background-color));
387
+ --ion-color-step-700: color-mix(in srgb, var(--ion-text-color) 70%, var(--ion-background-color));
388
+ --ion-color-step-850: color-mix(in srgb, var(--ion-text-color) 85%, var(--ion-background-color));
389
+ }
390
+
391
+ :root.ion-palette-dark[data-ok-palette='violet'] {
392
+ --ion-color-primary: #7F3BE7;
393
+ --ion-color-primary-rgb: 127, 59, 231;
394
+ --ion-color-primary-contrast: #ffffff;
395
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
396
+ --ion-color-primary-shade: #6725C2;
397
+ --ion-color-primary-tint: #945FF9;
398
+
399
+ --ion-background-color: #0D0814;
400
+ --ion-background-color-rgb: 13, 8, 20;
401
+ --ion-text-color: #F2EDF8;
402
+ --ion-text-color-rgb: 242, 237, 248;
403
+
404
+ --ion-color-medium: #877D99;
405
+ --ion-color-medium-rgb: 135, 125, 153;
406
+
407
+ --ion-item-background: #1B1429;
408
+ --ion-card-background: #1B1429;
409
+ --ion-border-color: rgba(210, 190, 240, 0.12);
410
+
411
+ --ion-color-step-50: color-mix(in srgb, var(--ion-text-color) 5%, var(--ion-background-color));
412
+ --ion-color-step-100: color-mix(in srgb, var(--ion-text-color) 10%, var(--ion-background-color));
413
+ --ion-color-step-150: color-mix(in srgb, var(--ion-text-color) 15%, var(--ion-background-color));
414
+ --ion-color-step-200: color-mix(in srgb, var(--ion-text-color) 20%, var(--ion-background-color));
415
+ --ion-color-step-250: color-mix(in srgb, var(--ion-text-color) 25%, var(--ion-background-color));
416
+ --ion-color-step-300: color-mix(in srgb, var(--ion-text-color) 30%, var(--ion-background-color));
417
+ --ion-color-step-500: color-mix(in srgb, var(--ion-text-color) 50%, var(--ion-background-color));
418
+ --ion-color-step-700: color-mix(in srgb, var(--ion-text-color) 70%, var(--ion-background-color));
419
+ --ion-color-step-850: color-mix(in srgb, var(--ion-text-color) 85%, var(--ion-background-color));
420
+
421
+ --ok-surface-muted: var(--ion-color-step-50);
422
+ }