@bluepic/embed 0.4.0-next.110 → 0.4.0-next.111

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.
@@ -1,435 +1,34 @@
1
1
  import { z } from '@hono/zod-openapi';
2
2
  import { EmbedV2 } from '@bluepic/types';
3
- import { Ref } from 'vue';
3
+ import { Ref, type MaybeRefOrGetter } from 'vue';
4
+ import { type ResolvedTheme, type ThemeInput } from '../theme';
4
5
  export declare function getThemeStyle(rawCSS: string): Record<string, string>;
5
6
  export declare function resolveThemeStyle(theme: 'light' | 'dark' | 'auto'): Record<string, string>;
6
- export declare function useTheme(bluepicAppWrapperSelector?: string, theme?: 'light' | 'dark' | 'auto', customThemeVars?: Partial<z.infer<typeof EmbedV2.customStyleSchema>>, interFontUrl?: string): Ref<{
7
- "primary-color-base"?: string | undefined;
8
- "primary-color-light"?: string | undefined;
9
- "primary-color-dark"?: string | undefined;
10
- "primary-color-bright"?: string | undefined;
11
- "success-color-base"?: string | undefined;
12
- "success-color-light"?: string | undefined;
13
- "success-color-dark"?: string | undefined;
14
- "success-color-darker"?: string | undefined;
15
- "error-color-base"?: string | undefined;
16
- "error-color-light"?: string | undefined;
17
- "error-color-dark"?: string | undefined;
18
- "error-color-darker"?: string | undefined;
19
- "warning-color-base"?: string | undefined;
20
- "warning-color-light"?: string | undefined;
21
- "warning-color-dark"?: string | undefined;
22
- "warning-color-darker"?: string | undefined;
23
- "border-color-base"?: string | undefined;
24
- "text-color-base"?: string | undefined;
25
- "text-color-alt"?: string | undefined;
26
- "card-border-color"?: string | undefined;
27
- "card-background-color"?: string | undefined;
28
- "card-background-color-hover"?: string | undefined;
29
- "card-header-divider-color"?: string | undefined;
30
- "card-footer-divider-color"?: string | undefined;
31
- "card-footer-background-color"?: string | undefined;
32
- "popover-without-darkened-bg-background-color"?: string | undefined;
33
- "popover-without-darkened-bg-box-shadow"?: string | undefined;
34
- "input-border-color"?: string | undefined;
35
- "input-border-color-hover"?: string | undefined;
36
- "input-border-color-focus"?: string | undefined;
37
- "input-shadow-focus-color"?: string | undefined;
38
- "input-background-color"?: string | undefined;
39
- "input-outline-color-focus"?: string | undefined;
40
- "input-border-color-disabled"?: string | undefined;
41
- "input-opacity-disabled"?: string | undefined;
42
- "checkbox-border-color"?: string | undefined;
43
- "checkbox-outline-color-focus"?: string | undefined;
44
- "checkbox-border-color-focus"?: string | undefined;
45
- "checkbox-border-color-checked"?: string | undefined;
46
- "checkbox-background-color-checked"?: string | undefined;
47
- "labeled-text-color"?: string | undefined;
48
- "label-background-color"?: string | undefined;
49
- "select-background-color"?: string | undefined;
50
- "select-background-color-hover"?: string | undefined;
51
- "select-background-color-focus"?: string | undefined;
52
- "select-border"?: string | undefined;
53
- "select-border-hover"?: string | undefined;
54
- "select-border-focus"?: string | undefined;
55
- "select-color"?: string | undefined;
56
- "select-color-hover"?: string | undefined;
57
- "select-color-focus"?: string | undefined;
58
- "popover-background-color"?: string | undefined;
59
- "popover-border"?: string | undefined;
60
- "popover-arrow-border-color"?: string | undefined;
61
- "popup-background-color"?: string | undefined;
62
- "menu-item-color"?: string | undefined;
63
- "menu-item-color-active"?: string | undefined;
64
- "menu-item-background-color"?: string | undefined;
65
- "menu-item-background-color-active"?: string | undefined;
66
- "menu-item-background-color-hover"?: string | undefined;
67
- "list-divider"?: string | undefined;
68
- "list-item-background-color-hover"?: string | undefined;
69
- "empty-text-color"?: string | undefined;
70
- "select-button-background-color"?: string | undefined;
71
- "select-button-background-color-hover"?: string | undefined;
72
- "tag-background-color"?: string | undefined;
73
- "tag-color"?: string | undefined;
74
- "tag-border-color"?: string | undefined;
75
- "tag-error-background-color"?: string | undefined;
76
- "tag-error-color"?: string | undefined;
77
- "tag-error-border-color"?: string | undefined;
78
- "slider-body-background-color"?: string | undefined;
79
- "slider-body-background-color-hover"?: string | undefined;
80
- "slider-body-background-color-focus"?: string | undefined;
81
- "slider-thumb-background-color"?: string | undefined;
82
- "slider-thumb-background-color-hover"?: string | undefined;
83
- "slider-thumb-background-color-focus"?: string | undefined;
84
- "slider-thumb-box-shadow"?: string | undefined;
85
- "slider-value-background-color"?: string | undefined;
86
- "slider-value-background-color-hover"?: string | undefined;
87
- "slider-value-background-color-focus"?: string | undefined;
88
- "progress-background-color"?: string | undefined;
89
- "progress-value-color"?: string | undefined;
90
- "radio-background-color"?: string | undefined;
91
- "radio-background-color-active"?: string | undefined;
92
- "radio-background-color-hover"?: string | undefined;
93
- "radio-border"?: string | undefined;
94
- "radio-border-active"?: string | undefined;
95
- "radio-border-color-hover"?: string | undefined;
96
- "radio-label-color"?: string | undefined;
97
- "radio-label-color-active"?: string | undefined;
98
- "radio-symbol-color"?: string | undefined;
99
- "tab-color"?: string | undefined;
100
- "tab-color-active"?: string | undefined;
101
- "tab-segment-background-color"?: string | undefined;
102
- "tab-segment-background-color-active"?: string | undefined;
103
- "tab-segment-color"?: string | undefined;
104
- "tab-segment-color-active"?: string | undefined;
105
- "button-border"?: string | undefined;
106
- "button-border-hover"?: string | undefined;
107
- "button-border-focus"?: string | undefined;
108
- "button-background-color"?: string | undefined;
109
- "button-background-color-hover"?: string | undefined;
110
- "button-background-color-focus"?: string | undefined;
111
- "button-text-color"?: string | undefined;
112
- "button-text-color-hover"?: string | undefined;
113
- "button-text-color-focus"?: string | undefined;
114
- "button-box-shadow"?: string | undefined;
115
- "button-box-shadow-hover"?: string | undefined;
116
- "button-secondary-border"?: string | undefined;
117
- "button-secondary-border-hover"?: string | undefined;
118
- "button-secondary-border-focus"?: string | undefined;
119
- "button-secondary-background-color"?: string | undefined;
120
- "button-secondary-background-color-hover"?: string | undefined;
121
- "button-secondary-background-color-focus"?: string | undefined;
122
- "button-secondary-text-color"?: string | undefined;
123
- "button-secondary-text-color-hover"?: string | undefined;
124
- "button-secondary-text-color-focus"?: string | undefined;
125
- "button-secondary-box-shadow"?: string | undefined;
126
- "button-secondary-box-shadow-hover"?: string | undefined;
127
- "message-body-background-color"?: string | undefined;
128
- "message-body-text-color"?: string | undefined;
129
- "message-body-border"?: string | undefined;
130
- "canvas-background-color"?: string | undefined;
131
- "canvas-background-image"?: string | undefined;
132
- "canvas-btn-background-color"?: string | undefined;
133
- "canvas-btn-background-color-hover"?: string | undefined;
134
- "canvas-btn-color"?: string | undefined;
135
- "select-item-border"?: string | undefined;
136
- "editor-view-background-color"?: string | undefined;
137
- "fields-view-background-color"?: string | undefined;
138
- "live-view-background-color"?: string | undefined;
139
- "gallery-card-background-color"?: string | undefined;
140
- "gallery-card-border"?: string | undefined;
141
- "gallery-action-btn-background-color"?: string | undefined;
142
- "gallery-action-btn-color"?: string | undefined;
143
- "gallery-card-name-text-color"?: string | undefined;
144
- "gallery-card-description-text-color"?: string | undefined;
145
- "bluepic-embed-editor-border"?: string | undefined;
146
- "bluepic-embed-editor-border-radius"?: string | undefined;
147
- "tooltip-background-color"?: string | undefined;
148
- "tooltip-text-color"?: string | undefined;
149
- }, Partial<{
150
- "primary-color-base": string;
151
- "primary-color-light": string;
152
- "primary-color-dark": string;
153
- "primary-color-bright": string;
154
- "success-color-base": string;
155
- "success-color-light": string;
156
- "success-color-dark": string;
157
- "success-color-darker": string;
158
- "error-color-base": string;
159
- "error-color-light": string;
160
- "error-color-dark": string;
161
- "error-color-darker": string;
162
- "warning-color-base": string;
163
- "warning-color-light": string;
164
- "warning-color-dark": string;
165
- "warning-color-darker": string;
166
- "border-color-base": string;
167
- "text-color-base": string;
168
- "text-color-alt": string;
169
- "card-border-color": string;
170
- "card-background-color": string;
171
- "card-background-color-hover": string;
172
- "card-header-divider-color": string;
173
- "card-footer-divider-color": string;
174
- "card-footer-background-color": string;
175
- "popover-without-darkened-bg-background-color": string;
176
- "popover-without-darkened-bg-box-shadow": string;
177
- "input-border-color": string;
178
- "input-border-color-hover": string;
179
- "input-border-color-focus": string;
180
- "input-shadow-focus-color": string;
181
- "input-background-color": string;
182
- "input-outline-color-focus": string;
183
- "input-border-color-disabled": string;
184
- "input-opacity-disabled": string;
185
- "checkbox-border-color": string;
186
- "checkbox-outline-color-focus": string;
187
- "checkbox-border-color-focus": string;
188
- "checkbox-border-color-checked": string;
189
- "checkbox-background-color-checked": string;
190
- "labeled-text-color": string;
191
- "label-background-color": string;
192
- "select-background-color": string;
193
- "select-background-color-hover": string;
194
- "select-background-color-focus": string;
195
- "select-border": string;
196
- "select-border-hover": string;
197
- "select-border-focus": string;
198
- "select-color": string;
199
- "select-color-hover": string;
200
- "select-color-focus": string;
201
- "popover-background-color": string;
202
- "popover-border": string;
203
- "popover-arrow-border-color": string;
204
- "popup-background-color": string;
205
- "menu-item-color": string;
206
- "menu-item-color-active": string;
207
- "menu-item-background-color": string;
208
- "menu-item-background-color-active": string;
209
- "menu-item-background-color-hover": string;
210
- "list-divider": string;
211
- "list-item-background-color-hover": string;
212
- "empty-text-color": string;
213
- "select-button-background-color": string;
214
- "select-button-background-color-hover": string;
215
- "tag-background-color": string;
216
- "tag-color": string;
217
- "tag-border-color": string;
218
- "tag-error-background-color": string;
219
- "tag-error-color": string;
220
- "tag-error-border-color": string;
221
- "slider-body-background-color": string;
222
- "slider-body-background-color-hover": string;
223
- "slider-body-background-color-focus": string;
224
- "slider-thumb-background-color": string;
225
- "slider-thumb-background-color-hover": string;
226
- "slider-thumb-background-color-focus": string;
227
- "slider-thumb-box-shadow": string;
228
- "slider-value-background-color": string;
229
- "slider-value-background-color-hover": string;
230
- "slider-value-background-color-focus": string;
231
- "progress-background-color": string;
232
- "progress-value-color": string;
233
- "radio-background-color": string;
234
- "radio-background-color-active": string;
235
- "radio-background-color-hover": string;
236
- "radio-border": string;
237
- "radio-border-active": string;
238
- "radio-border-color-hover": string;
239
- "radio-label-color": string;
240
- "radio-label-color-active": string;
241
- "radio-symbol-color": string;
242
- "tab-color": string;
243
- "tab-color-active": string;
244
- "tab-segment-background-color": string;
245
- "tab-segment-background-color-active": string;
246
- "tab-segment-color": string;
247
- "tab-segment-color-active": string;
248
- "button-border": string;
249
- "button-border-hover": string;
250
- "button-border-focus": string;
251
- "button-background-color": string;
252
- "button-background-color-hover": string;
253
- "button-background-color-focus": string;
254
- "button-text-color": string;
255
- "button-text-color-hover": string;
256
- "button-text-color-focus": string;
257
- "button-box-shadow": string;
258
- "button-box-shadow-hover": string;
259
- "button-secondary-border": string;
260
- "button-secondary-border-hover": string;
261
- "button-secondary-border-focus": string;
262
- "button-secondary-background-color": string;
263
- "button-secondary-background-color-hover": string;
264
- "button-secondary-background-color-focus": string;
265
- "button-secondary-text-color": string;
266
- "button-secondary-text-color-hover": string;
267
- "button-secondary-text-color-focus": string;
268
- "button-secondary-box-shadow": string;
269
- "button-secondary-box-shadow-hover": string;
270
- "message-body-background-color": string;
271
- "message-body-text-color": string;
272
- "message-body-border": string;
273
- "canvas-background-color": string;
274
- "canvas-background-image": string;
275
- "canvas-btn-background-color": string;
276
- "canvas-btn-background-color-hover": string;
277
- "canvas-btn-color": string;
278
- "select-item-border": string;
279
- "editor-view-background-color": string;
280
- "fields-view-background-color": string;
281
- "live-view-background-color": string;
282
- "gallery-card-background-color": string;
283
- "gallery-card-border": string;
284
- "gallery-action-btn-background-color": string;
285
- "gallery-action-btn-color": string;
286
- "gallery-card-name-text-color": string;
287
- "gallery-card-description-text-color": string;
288
- "bluepic-embed-editor-border": string;
289
- "bluepic-embed-editor-border-radius": string;
290
- "tooltip-background-color": string;
291
- "tooltip-text-color": string;
292
- }> | {
293
- "primary-color-base"?: string | undefined;
294
- "primary-color-light"?: string | undefined;
295
- "primary-color-dark"?: string | undefined;
296
- "primary-color-bright"?: string | undefined;
297
- "success-color-base"?: string | undefined;
298
- "success-color-light"?: string | undefined;
299
- "success-color-dark"?: string | undefined;
300
- "success-color-darker"?: string | undefined;
301
- "error-color-base"?: string | undefined;
302
- "error-color-light"?: string | undefined;
303
- "error-color-dark"?: string | undefined;
304
- "error-color-darker"?: string | undefined;
305
- "warning-color-base"?: string | undefined;
306
- "warning-color-light"?: string | undefined;
307
- "warning-color-dark"?: string | undefined;
308
- "warning-color-darker"?: string | undefined;
309
- "border-color-base"?: string | undefined;
310
- "text-color-base"?: string | undefined;
311
- "text-color-alt"?: string | undefined;
312
- "card-border-color"?: string | undefined;
313
- "card-background-color"?: string | undefined;
314
- "card-background-color-hover"?: string | undefined;
315
- "card-header-divider-color"?: string | undefined;
316
- "card-footer-divider-color"?: string | undefined;
317
- "card-footer-background-color"?: string | undefined;
318
- "popover-without-darkened-bg-background-color"?: string | undefined;
319
- "popover-without-darkened-bg-box-shadow"?: string | undefined;
320
- "input-border-color"?: string | undefined;
321
- "input-border-color-hover"?: string | undefined;
322
- "input-border-color-focus"?: string | undefined;
323
- "input-shadow-focus-color"?: string | undefined;
324
- "input-background-color"?: string | undefined;
325
- "input-outline-color-focus"?: string | undefined;
326
- "input-border-color-disabled"?: string | undefined;
327
- "input-opacity-disabled"?: string | undefined;
328
- "checkbox-border-color"?: string | undefined;
329
- "checkbox-outline-color-focus"?: string | undefined;
330
- "checkbox-border-color-focus"?: string | undefined;
331
- "checkbox-border-color-checked"?: string | undefined;
332
- "checkbox-background-color-checked"?: string | undefined;
333
- "labeled-text-color"?: string | undefined;
334
- "label-background-color"?: string | undefined;
335
- "select-background-color"?: string | undefined;
336
- "select-background-color-hover"?: string | undefined;
337
- "select-background-color-focus"?: string | undefined;
338
- "select-border"?: string | undefined;
339
- "select-border-hover"?: string | undefined;
340
- "select-border-focus"?: string | undefined;
341
- "select-color"?: string | undefined;
342
- "select-color-hover"?: string | undefined;
343
- "select-color-focus"?: string | undefined;
344
- "popover-background-color"?: string | undefined;
345
- "popover-border"?: string | undefined;
346
- "popover-arrow-border-color"?: string | undefined;
347
- "popup-background-color"?: string | undefined;
348
- "menu-item-color"?: string | undefined;
349
- "menu-item-color-active"?: string | undefined;
350
- "menu-item-background-color"?: string | undefined;
351
- "menu-item-background-color-active"?: string | undefined;
352
- "menu-item-background-color-hover"?: string | undefined;
353
- "list-divider"?: string | undefined;
354
- "list-item-background-color-hover"?: string | undefined;
355
- "empty-text-color"?: string | undefined;
356
- "select-button-background-color"?: string | undefined;
357
- "select-button-background-color-hover"?: string | undefined;
358
- "tag-background-color"?: string | undefined;
359
- "tag-color"?: string | undefined;
360
- "tag-border-color"?: string | undefined;
361
- "tag-error-background-color"?: string | undefined;
362
- "tag-error-color"?: string | undefined;
363
- "tag-error-border-color"?: string | undefined;
364
- "slider-body-background-color"?: string | undefined;
365
- "slider-body-background-color-hover"?: string | undefined;
366
- "slider-body-background-color-focus"?: string | undefined;
367
- "slider-thumb-background-color"?: string | undefined;
368
- "slider-thumb-background-color-hover"?: string | undefined;
369
- "slider-thumb-background-color-focus"?: string | undefined;
370
- "slider-thumb-box-shadow"?: string | undefined;
371
- "slider-value-background-color"?: string | undefined;
372
- "slider-value-background-color-hover"?: string | undefined;
373
- "slider-value-background-color-focus"?: string | undefined;
374
- "progress-background-color"?: string | undefined;
375
- "progress-value-color"?: string | undefined;
376
- "radio-background-color"?: string | undefined;
377
- "radio-background-color-active"?: string | undefined;
378
- "radio-background-color-hover"?: string | undefined;
379
- "radio-border"?: string | undefined;
380
- "radio-border-active"?: string | undefined;
381
- "radio-border-color-hover"?: string | undefined;
382
- "radio-label-color"?: string | undefined;
383
- "radio-label-color-active"?: string | undefined;
384
- "radio-symbol-color"?: string | undefined;
385
- "tab-color"?: string | undefined;
386
- "tab-color-active"?: string | undefined;
387
- "tab-segment-background-color"?: string | undefined;
388
- "tab-segment-background-color-active"?: string | undefined;
389
- "tab-segment-color"?: string | undefined;
390
- "tab-segment-color-active"?: string | undefined;
391
- "button-border"?: string | undefined;
392
- "button-border-hover"?: string | undefined;
393
- "button-border-focus"?: string | undefined;
394
- "button-background-color"?: string | undefined;
395
- "button-background-color-hover"?: string | undefined;
396
- "button-background-color-focus"?: string | undefined;
397
- "button-text-color"?: string | undefined;
398
- "button-text-color-hover"?: string | undefined;
399
- "button-text-color-focus"?: string | undefined;
400
- "button-box-shadow"?: string | undefined;
401
- "button-box-shadow-hover"?: string | undefined;
402
- "button-secondary-border"?: string | undefined;
403
- "button-secondary-border-hover"?: string | undefined;
404
- "button-secondary-border-focus"?: string | undefined;
405
- "button-secondary-background-color"?: string | undefined;
406
- "button-secondary-background-color-hover"?: string | undefined;
407
- "button-secondary-background-color-focus"?: string | undefined;
408
- "button-secondary-text-color"?: string | undefined;
409
- "button-secondary-text-color-hover"?: string | undefined;
410
- "button-secondary-text-color-focus"?: string | undefined;
411
- "button-secondary-box-shadow"?: string | undefined;
412
- "button-secondary-box-shadow-hover"?: string | undefined;
413
- "message-body-background-color"?: string | undefined;
414
- "message-body-text-color"?: string | undefined;
415
- "message-body-border"?: string | undefined;
416
- "canvas-background-color"?: string | undefined;
417
- "canvas-background-image"?: string | undefined;
418
- "canvas-btn-background-color"?: string | undefined;
419
- "canvas-btn-background-color-hover"?: string | undefined;
420
- "canvas-btn-color"?: string | undefined;
421
- "select-item-border"?: string | undefined;
422
- "editor-view-background-color"?: string | undefined;
423
- "fields-view-background-color"?: string | undefined;
424
- "live-view-background-color"?: string | undefined;
425
- "gallery-card-background-color"?: string | undefined;
426
- "gallery-card-border"?: string | undefined;
427
- "gallery-action-btn-background-color"?: string | undefined;
428
- "gallery-action-btn-color"?: string | undefined;
429
- "gallery-card-name-text-color"?: string | undefined;
430
- "gallery-card-description-text-color"?: string | undefined;
431
- "bluepic-embed-editor-border"?: string | undefined;
432
- "bluepic-embed-editor-border-radius"?: string | undefined;
433
- "tooltip-background-color"?: string | undefined;
434
- "tooltip-text-color"?: string | undefined;
435
- }>;
7
+ export type UseThemeV2Options = {
8
+ /** Selector of the app wrapper (default: GLOBAL_APP_WRAPPER_SELECTOR). */
9
+ wrapperSelector?: string;
10
+ /** Optional @import for the UI font (e.g. Inter). */
11
+ fontUrl?: string;
12
+ /**
13
+ * Legacy `customStyle` snapshot to fall back to when the input is empty — only its
14
+ * surface/primary/contrast are used (see themeInputFromLegacyCustomStyle).
15
+ */
16
+ legacyCustomStyle?: MaybeRefOrGetter<Record<string, string> | null | undefined>;
17
+ };
18
+ /**
19
+ * Reactive v2 theme binding. Re-resolves whenever the input changes and rewrites the SAME
20
+ * style element. Returns the resolved theme (tokens + contrast report) for hosts that want to
21
+ * show it (e.g. the Studio theme step).
22
+ */
23
+ export declare function useThemeV2(input: MaybeRefOrGetter<ThemeInput | null | undefined>, options?: UseThemeV2Options): {
24
+ theme: import("vue").ComputedRef<ResolvedTheme>;
25
+ uid: string;
26
+ };
27
+ /** Imperative one-shot application (no reactivity). */
28
+ export declare function applyTheme(theme: ResolvedTheme, options?: Omit<UseThemeV2Options, 'legacyCustomStyle'>): string;
29
+ /**
30
+ * Legacy API. `customThemeVars` may be a legacy customStyle record (preset snapshot + overrides)
31
+ * or, as of v2, a `ThemeInput` (`{ version: 2, surface, primary, … }`), in which case the new
32
+ * engine is used. The returned ref holds the emitted CSS variables.
33
+ */
34
+ export declare function useTheme(bluepicAppWrapperSelector?: string, theme?: 'light' | 'dark' | 'auto', customThemeVars?: Partial<z.infer<typeof EmbedV2.customStyleSchema>> | ThemeInput, interFontUrl?: string): Ref<Record<string, string>, Record<string, string>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bluepic/embed",
3
- "version": "0.4.0-next.110",
3
+ "version": "0.4.0-next.111",
4
4
  "description": "Bluepic embed sdk",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -38,7 +38,7 @@
38
38
  },
39
39
  "devDependencies": {
40
40
  "@auth0/auth0-vue": "^2.4.0",
41
- "@bluepic/types": "^0.6.470",
41
+ "@bluepic/types": "^0.6.472",
42
42
  "@hono/zod-openapi": "^1.1.4",
43
43
  "@types/css": "^0.0.38",
44
44
  "@types/downloadjs": "^1.4.6",