@usertour/helpers 0.0.59 → 0.0.61

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.
@@ -0,0 +1,336 @@
1
+ import {
2
+ deepClone
3
+ } from "./chunk-5C3J4DM2.js";
4
+ import {
5
+ hexToHSLString,
6
+ hexToRGBStr
7
+ } from "./chunk-FZFHBCB6.js";
8
+ import {
9
+ isUndefined
10
+ } from "./chunk-GFH3VWOC.js";
11
+
12
+ // src/convert-settings.ts
13
+ import { defaultSettings } from "@usertour/types";
14
+ import { deepmergeCustom } from "deepmerge-ts";
15
+ var defaultFontFamily = '-apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
16
+ var mergeWithDefaults = deepmergeCustom({
17
+ mergeOthers: (values) => {
18
+ const settingsValue = values[values.length - 1];
19
+ if (settingsValue === null || settingsValue === void 0) {
20
+ return values[0];
21
+ }
22
+ return settingsValue;
23
+ }
24
+ });
25
+ var resolveAutoValue = (value, fallback) => {
26
+ if (value === "Auto" || value === void 0 || value === null) {
27
+ return fallback;
28
+ }
29
+ return value;
30
+ };
31
+ var mergeThemeDefaultSettings = (settings) => {
32
+ const base = deepClone(defaultSettings);
33
+ return mergeWithDefaults(base, settings);
34
+ };
35
+ var convertSettings = (settings) => {
36
+ const data = mergeThemeDefaultSettings(settings);
37
+ data.mainColor.hover = resolveAutoValue(data.mainColor.hover, data.mainColor.autoHover);
38
+ data.mainColor.active = resolveAutoValue(
39
+ data.mainColor.active,
40
+ data.mainColor.autoActive
41
+ );
42
+ data.brandColor.hover = resolveAutoValue(
43
+ data.brandColor.hover,
44
+ data.brandColor.autoHover
45
+ );
46
+ data.brandColor.active = resolveAutoValue(
47
+ data.brandColor.active,
48
+ data.brandColor.autoActive
49
+ );
50
+ data.border.borderColor = resolveAutoValue(data.border.borderColor, data.mainColor.color);
51
+ data.buttons.primary.textColor.color = resolveAutoValue(
52
+ data.buttons.primary.textColor.color,
53
+ data.brandColor.color
54
+ );
55
+ data.buttons.primary.textColor.hover = resolveAutoValue(
56
+ data.buttons.primary.textColor.hover,
57
+ data.brandColor.color
58
+ );
59
+ data.buttons.primary.textColor.active = resolveAutoValue(
60
+ data.buttons.primary.textColor.active,
61
+ data.brandColor.color
62
+ );
63
+ data.buttons.primary.backgroundColor.background = resolveAutoValue(
64
+ data.buttons.primary.backgroundColor.background,
65
+ data.brandColor.background
66
+ );
67
+ data.buttons.primary.backgroundColor.hover = resolveAutoValue(
68
+ data.buttons.primary.backgroundColor.hover,
69
+ data.brandColor.autoHover
70
+ );
71
+ data.buttons.primary.backgroundColor.active = resolveAutoValue(
72
+ data.buttons.primary.backgroundColor.active,
73
+ data.brandColor.autoActive
74
+ );
75
+ data.buttons.primary.border.color.color = resolveAutoValue(
76
+ data.buttons.primary.border.color.color,
77
+ data.brandColor.background
78
+ );
79
+ data.buttons.primary.border.color.hover = resolveAutoValue(
80
+ data.buttons.primary.border.color.hover,
81
+ data.brandColor.autoHover
82
+ );
83
+ data.buttons.primary.border.color.active = resolveAutoValue(
84
+ data.buttons.primary.border.color.active,
85
+ data.brandColor.autoActive
86
+ );
87
+ data.buttons.secondary.textColor.color = resolveAutoValue(
88
+ data.buttons.secondary.textColor.color,
89
+ data.brandColor.background
90
+ );
91
+ data.buttons.secondary.textColor.hover = resolveAutoValue(
92
+ data.buttons.secondary.textColor.hover,
93
+ data.brandColor.background
94
+ );
95
+ data.buttons.secondary.textColor.active = resolveAutoValue(
96
+ data.buttons.secondary.textColor.active,
97
+ data.brandColor.background
98
+ );
99
+ data.buttons.secondary.backgroundColor.background = resolveAutoValue(
100
+ data.buttons.secondary.backgroundColor.background,
101
+ data.mainColor.background
102
+ );
103
+ data.buttons.secondary.backgroundColor.hover = resolveAutoValue(
104
+ data.buttons.secondary.backgroundColor.hover,
105
+ data.mainColor.autoHover
106
+ );
107
+ data.buttons.secondary.backgroundColor.active = resolveAutoValue(
108
+ data.buttons.secondary.backgroundColor.active,
109
+ data.mainColor.autoActive
110
+ );
111
+ data.buttons.secondary.border.color.color = resolveAutoValue(
112
+ data.buttons.secondary.border.color.color,
113
+ data.brandColor.background
114
+ );
115
+ data.buttons.secondary.border.color.hover = resolveAutoValue(
116
+ data.buttons.secondary.border.color.hover,
117
+ data.brandColor.background
118
+ );
119
+ data.buttons.secondary.border.color.active = resolveAutoValue(
120
+ data.buttons.secondary.border.color.active,
121
+ data.brandColor.background
122
+ );
123
+ data.font.linkColor = resolveAutoValue(data.font.linkColor, data.brandColor.background);
124
+ data.xbutton.color = resolveAutoValue(data.xbutton.color, data.mainColor.color);
125
+ data.progress.color = resolveAutoValue(data.progress.color, data.brandColor.background);
126
+ data.launcherBeacon.color = resolveAutoValue(
127
+ data.launcherBeacon.color,
128
+ data.brandColor.background
129
+ );
130
+ data.launcherIcon.color.color = resolveAutoValue(
131
+ data.launcherIcon.color.color,
132
+ data.brandColor.background
133
+ );
134
+ data.launcherIcon.color.hover = resolveAutoValue(
135
+ data.launcherIcon.color.hover,
136
+ data.brandColor.autoHover
137
+ );
138
+ data.launcherIcon.color.active = resolveAutoValue(
139
+ data.launcherIcon.color.active,
140
+ data.brandColor.autoActive
141
+ );
142
+ data.checklistLauncher.color.color = resolveAutoValue(
143
+ data.checklistLauncher.color.color,
144
+ data.brandColor.color
145
+ );
146
+ data.checklistLauncher.color.background = resolveAutoValue(
147
+ data.checklistLauncher.color.background,
148
+ data.brandColor.background
149
+ );
150
+ data.checklistLauncher.color.hover = resolveAutoValue(
151
+ data.checklistLauncher.color.hover,
152
+ data.brandColor.autoHover
153
+ );
154
+ data.checklistLauncher.color.active = resolveAutoValue(
155
+ data.checklistLauncher.color.active,
156
+ data.brandColor.autoActive
157
+ );
158
+ data.checklistLauncher.counter.color = resolveAutoValue(
159
+ data.checklistLauncher.counter.color,
160
+ data.brandColor.background
161
+ );
162
+ data.checklistLauncher.counter.background = resolveAutoValue(
163
+ data.checklistLauncher.counter.background,
164
+ data.brandColor.color
165
+ );
166
+ data.survey.color = resolveAutoValue(data.survey.color, data.brandColor.background);
167
+ data.launcherButtons.primary.textColor.color = resolveAutoValue(
168
+ data.launcherButtons.primary.textColor.color,
169
+ data.brandColor.color
170
+ );
171
+ data.launcherButtons.primary.textColor.hover = resolveAutoValue(
172
+ data.launcherButtons.primary.textColor.hover,
173
+ data.brandColor.color
174
+ );
175
+ data.launcherButtons.primary.textColor.active = resolveAutoValue(
176
+ data.launcherButtons.primary.textColor.active,
177
+ data.brandColor.color
178
+ );
179
+ data.launcherButtons.primary.backgroundColor.background = resolveAutoValue(
180
+ data.launcherButtons.primary.backgroundColor.background,
181
+ data.brandColor.background
182
+ );
183
+ data.launcherButtons.primary.backgroundColor.hover = resolveAutoValue(
184
+ data.launcherButtons.primary.backgroundColor.hover,
185
+ data.brandColor.autoHover
186
+ );
187
+ data.launcherButtons.primary.backgroundColor.active = resolveAutoValue(
188
+ data.launcherButtons.primary.backgroundColor.active,
189
+ data.brandColor.autoActive
190
+ );
191
+ data.launcherButtons.primary.border.color.color = resolveAutoValue(
192
+ data.launcherButtons.primary.border.color.color,
193
+ data.brandColor.background
194
+ );
195
+ data.launcherButtons.primary.border.color.hover = resolveAutoValue(
196
+ data.launcherButtons.primary.border.color.hover,
197
+ data.brandColor.autoHover
198
+ );
199
+ data.launcherButtons.primary.border.color.active = resolveAutoValue(
200
+ data.launcherButtons.primary.border.color.active,
201
+ data.brandColor.autoActive
202
+ );
203
+ if (data.font.fontFamily === "System font") {
204
+ data.font.fontFamily = defaultFontFamily;
205
+ } else if (!data.font.fontFamily.includes("sans-serif")) {
206
+ data.font.fontFamily += ", sans-serif;";
207
+ }
208
+ return data;
209
+ };
210
+ var convertToCssVars = (settings, type = "tooltip") => {
211
+ const cssMapping = {
212
+ "--usertour-background": hexToHSLString(settings.mainColor.background),
213
+ "--usertour-foreground": hexToHSLString(settings.mainColor.color),
214
+ "--usertour-brand-active-background-color": hexToHSLString(
215
+ settings.brandColor.autoActive
216
+ ),
217
+ "--usertour-brand-hover-background-color": hexToHSLString(
218
+ settings.brandColor.autoHover
219
+ ),
220
+ "--usertour-font-family": settings.font.fontFamily,
221
+ "--usertour-font-size": `${settings.font.fontSize}px`,
222
+ "--usertour-main-background-color": settings.mainColor.background,
223
+ "--usertour-main-foreground-color": settings.mainColor.color,
224
+ "--usertour-main-hover-background-color": hexToHSLString(
225
+ settings.mainColor.autoHover
226
+ ),
227
+ "--usertour-main-active-background-color": hexToHSLString(
228
+ settings.mainColor.autoActive
229
+ ),
230
+ "--usertour-line-height": `${settings.font.lineHeight}px`,
231
+ "--usertour-widget-popper-border-radius": `${settings.border.borderRadius}px`,
232
+ "--usertour-font-weight-normal": settings.font.fontWeightNormal,
233
+ "--usertour-font-weight-bold": settings.font.fontWeightBold,
234
+ "--usertour-h1-font-size": `${settings.font.h1FontSize}px`,
235
+ "--usertour-h2-font-size": `${settings.font.h2FontSize}px`,
236
+ "--usertour-link-color": hexToHSLString(settings.font.linkColor),
237
+ "--usertour-widget-popper-border-width": settings.border.borderWidthEnabled ? `${settings.border.borderWidth}px` : "0px",
238
+ "--usertour-widget-popper-border-color": settings.border.borderColor,
239
+ "--usertour-button-border-radius": `${settings.buttons.borderRadius}px`,
240
+ "--usertour-button-height": `${settings.buttons.height}px`,
241
+ "--usertour-button-min-width": `${settings.buttons.minWidth}px`,
242
+ "--usertour-button-px": `${settings.buttons.px}px`,
243
+ "--usertour-primary": settings.buttons.primary.backgroundColor.background,
244
+ "--usertour-primary-hover": settings.buttons.primary.backgroundColor.hover,
245
+ "--usertour-primary-active": settings.buttons.primary.backgroundColor.active,
246
+ "--usertour-primary-foreground": settings.buttons.primary.textColor.color,
247
+ "--usertour-primary-foreground-hover": settings.buttons.primary.textColor.hover,
248
+ "--usertour-primary-foreground-active": settings.buttons.primary.textColor.active,
249
+ "--usertour-primary-border-width": settings.buttons.primary.border.enabled ? `${settings.buttons.primary.border.borderWidth}px` : "0px",
250
+ "--usertour-primary-border-color": settings.buttons.primary.border.color.color,
251
+ "--usertour-primary-border-hover": settings.buttons.primary.border.color.hover,
252
+ "--usertour-primary-border-active": settings.buttons.primary.border.color.active,
253
+ "--usertour-primary-font-weight": settings.buttons.primary.fontWeight,
254
+ "--usertour-secondary": settings.buttons.secondary.backgroundColor.background,
255
+ "--usertour-secondary-hover": settings.buttons.secondary.backgroundColor.hover,
256
+ "--usertour-secondary-active": settings.buttons.secondary.backgroundColor.active,
257
+ "--usertour-secondary-foreground": settings.buttons.secondary.textColor.color,
258
+ "--usertour-secondary-foreground-hover": settings.buttons.secondary.textColor.hover,
259
+ "--usertour-secondary-foreground-active": settings.buttons.secondary.textColor.active,
260
+ "--usertour-secondary-border-width": settings.buttons.secondary.border.enabled ? `${settings.buttons.secondary.border.borderWidth}px` : "0px",
261
+ "--usertour-secondary-border-color": settings.buttons.secondary.border.color.color,
262
+ "--usertour-secondary-border-hover": settings.buttons.secondary.border.color.hover,
263
+ "--usertour-secondary-border-active": settings.buttons.secondary.border.color.active,
264
+ "--usertour-secondary-font-weight": settings.buttons.secondary.fontWeight,
265
+ "--usertour-backdrop-color-rgb": hexToRGBStr(settings.backdrop.color),
266
+ "--usertour-backdrop-highlight-color-rgb": hexToRGBStr(settings.backdrop.highlight.color),
267
+ "--usertour-backdrop-highlight-opacity": settings.backdrop.highlight.opacity / 100,
268
+ "--usertour-backdrop-highlight-radius": `${settings.backdrop.highlight.radius}px`,
269
+ "--usertour-backdrop-highlight-spread": `${settings.backdrop.highlight.spread}px`,
270
+ "--usertour-backdrop-opacity": settings.backdrop.opacity / 100,
271
+ "--usertour-progress-bar-color": settings.progress.color,
272
+ "--usertour-progress-bar-height": `${settings.progress.height}px`,
273
+ "--usertour-narrow-progress-bar-height": `${settings.progress.narrowHeight}px`,
274
+ "--usertour-squared-progress-bar-height": `${settings.progress.chainSquaredHeight}px`,
275
+ "--usertour-rounded-progress-bar-height": `${settings.progress.chainRoundedHeight}px`,
276
+ "--usertour-dotted-progress-bar-height": `${settings.progress.dotsHeight}px`,
277
+ "--usertour-numbered-progress-bar-height": `${settings.progress.numberedHeight}px`,
278
+ "--usertour-widget-popper-padding": type === "modal" ? `${settings.modal.padding}px` : void 0,
279
+ "--usertour-xbutton": settings.xbutton.color,
280
+ "--usertour-widget-launcher-icon-color": settings.launcherIcon.color.color,
281
+ "--usertour-widget-launcher-icon-hover-color": settings.launcherIcon.color.hover,
282
+ "--usertour-widget-launcher-icon-active-color": settings.launcherIcon.color.active,
283
+ "--usertour-widget-launcher-icon-size": `${settings.launcherIcon.size}px`,
284
+ "--usertour-widget-beacon-color": settings.launcherBeacon.color,
285
+ "--usertour-widget-beacon-size": `${settings.launcherBeacon.size}px`,
286
+ "--usertour-widget-launcher-icon-opacity": settings.launcherIcon.opacity / 100,
287
+ "--usertour-widget-popper-padding-top": "2px",
288
+ "--usertour-widget-popper-padding-bottom": "2px",
289
+ "--usertour-checklist-trigger-active-background-color": settings.checklistLauncher.color.active,
290
+ "--usertour-checklist-trigger-background-color": settings.checklistLauncher.color.background,
291
+ "--usertour-checklist-trigger-border-radius": `${settings.checklistLauncher.borderRadius}px`,
292
+ "--usertour-checklist-trigger-counter-background-color": settings.checklistLauncher.counter.background,
293
+ "--usertour-checklist-trigger-counter-font-color": settings.checklistLauncher.counter.color,
294
+ "--usertour-checklist-trigger-font-color-rgb": settings.checklistLauncher.color.color,
295
+ "--usertour-checklist-trigger-font-color": hexToHSLString(
296
+ settings.checklistLauncher.color.color
297
+ ),
298
+ "--usertour-checklist-trigger-font-weight": settings.checklistLauncher.fontWeight,
299
+ "--usertour-checkmark-background-color": settings.checklist.checkmarkColor,
300
+ "--usertour-checklist-trigger-height": `${settings.checklistLauncher.height}px`,
301
+ "--usertour-checklist-trigger-hover-background-color": settings.checklistLauncher.color.hover,
302
+ "--usertour-question-color": hexToHSLString(settings.survey.color),
303
+ "--usertour-launcher-button-height": `${settings.launcherButtons.height}px`,
304
+ "--usertour-launcher-button-width": settings.launcherButtons.width === 0 ? "auto" : `${settings.launcherButtons.width}px`,
305
+ "--usertour-launcher-button-horizontal-padding": `${settings.launcherButtons.px}px`,
306
+ "--usertour-launcher-button-border-radius": `${settings.launcherButtons.borderRadius}px`,
307
+ "--usertour-launcher-button-background-color": settings.launcherButtons.primary.backgroundColor.background,
308
+ "--usertour-launcher-button-hover-background-color": settings.launcherButtons.primary.backgroundColor.hover,
309
+ "--usertour-launcher-button-active-background-color": settings.launcherButtons.primary.backgroundColor.active,
310
+ "--usertour-launcher-button-font-color": settings.launcherButtons.primary.textColor.color,
311
+ "--usertour-launcher-button-hover-font-color": settings.launcherButtons.primary.textColor.hover,
312
+ "--usertour-launcher-button-active-font-color": settings.launcherButtons.primary.textColor.active,
313
+ "--usertour-launcher-button-font-weight": settings.launcherButtons.primary.fontWeight,
314
+ "--usertour-launcher-button-border-width": settings.launcherButtons.primary.border.enabled ? `${settings.launcherButtons.primary.border.borderWidth}px` : "0px",
315
+ "--usertour-launcher-button-border-color": settings.launcherButtons.primary.border.color.color,
316
+ "--usertour-launcher-button-hover-border-color": settings.launcherButtons.primary.border.color.hover,
317
+ "--usertour-launcher-button-active-border-color": settings.launcherButtons.primary.border.color.active
318
+ };
319
+ if (settings.backdrop.highlight.type === "inside") {
320
+ cssMapping["--usertour-backdrop-highlight-inset"] = "inset";
321
+ }
322
+ let css = "";
323
+ for (const key in cssMapping) {
324
+ const value = cssMapping[key];
325
+ if (!isUndefined(value)) {
326
+ css += `${key}:${value};`;
327
+ }
328
+ }
329
+ return css;
330
+ };
331
+
332
+ export {
333
+ mergeThemeDefaultSettings,
334
+ convertSettings,
335
+ convertToCssVars
336
+ };