@salesforce/ui-theme-manager 11.46.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/LICENSE.txt +82 -0
- package/README.md +29 -0
- package/dist/authoring/core/ThemeManagerPanelRoot.d.cts +43 -0
- package/dist/authoring/core/ThemeManagerPanelRoot.d.ts +43 -0
- package/dist/authoring/core/ThemeManagerPanelRoot.d.ts.map +1 -0
- package/dist/authoring/core/components/AssetsSection.d.cts +12 -0
- package/dist/authoring/core/components/AssetsSection.d.ts +12 -0
- package/dist/authoring/core/components/AssetsSection.d.ts.map +1 -0
- package/dist/authoring/core/components/BordersSection.d.cts +9 -0
- package/dist/authoring/core/components/BordersSection.d.ts +9 -0
- package/dist/authoring/core/components/BordersSection.d.ts.map +1 -0
- package/dist/authoring/core/components/ButtonSection.d.cts +9 -0
- package/dist/authoring/core/components/ButtonSection.d.ts +9 -0
- package/dist/authoring/core/components/ButtonSection.d.ts.map +1 -0
- package/dist/authoring/core/components/ColorEditors.d.cts +8 -0
- package/dist/authoring/core/components/ColorEditors.d.ts +8 -0
- package/dist/authoring/core/components/ColorEditors.d.ts.map +1 -0
- package/dist/authoring/core/components/ColorField.d.cts +45 -0
- package/dist/authoring/core/components/ColorField.d.ts +45 -0
- package/dist/authoring/core/components/ColorField.d.ts.map +1 -0
- package/dist/authoring/core/components/SaveBar.d.cts +8 -0
- package/dist/authoring/core/components/SaveBar.d.ts +8 -0
- package/dist/authoring/core/components/SaveBar.d.ts.map +1 -0
- package/dist/authoring/core/components/SearchBox.d.cts +16 -0
- package/dist/authoring/core/components/SearchBox.d.ts +16 -0
- package/dist/authoring/core/components/SearchBox.d.ts.map +1 -0
- package/dist/authoring/core/components/TabSwitcher.d.cts +13 -0
- package/dist/authoring/core/components/TabSwitcher.d.ts +13 -0
- package/dist/authoring/core/components/TabSwitcher.d.ts.map +1 -0
- package/dist/authoring/core/components/ThemeGallery.d.cts +9 -0
- package/dist/authoring/core/components/ThemeGallery.d.ts +9 -0
- package/dist/authoring/core/components/ThemeGallery.d.ts.map +1 -0
- package/dist/authoring/core/components/TypographySection.d.cts +9 -0
- package/dist/authoring/core/components/TypographySection.d.ts +9 -0
- package/dist/authoring/core/components/TypographySection.d.ts.map +1 -0
- package/dist/authoring/core/index.d.cts +8 -0
- package/dist/authoring/core/index.d.ts +8 -0
- package/dist/authoring/core/index.d.ts.map +1 -0
- package/dist/authoring/core/labels.d.cts +89 -0
- package/dist/authoring/core/labels.d.ts +89 -0
- package/dist/authoring/core/labels.d.ts.map +1 -0
- package/dist/authoring/react/index.d.cts +16 -0
- package/dist/authoring/react/index.d.ts +16 -0
- package/dist/authoring/react/index.d.ts.map +1 -0
- package/dist/authoring/react/index.js +1 -0
- package/dist/authoring/react/styles.css +1 -0
- package/dist/authoring/web-component/index.d.cts +34 -0
- package/dist/authoring/web-component/index.d.ts +34 -0
- package/dist/authoring/web-component/index.d.ts.map +1 -0
- package/dist/authoring/web-component/index.js +729 -0
- package/dist/protocol/brandCss.cjs +255 -0
- package/dist/protocol/brandCss.d.cts +42 -0
- package/dist/protocol/brandCss.d.ts +42 -0
- package/dist/protocol/brandCss.d.ts.map +1 -0
- package/dist/protocol/brandCss.js +255 -0
- package/dist/protocol/brandResolver.cjs +61 -0
- package/dist/protocol/brandResolver.d.cts +28 -0
- package/dist/protocol/brandResolver.d.ts +28 -0
- package/dist/protocol/brandResolver.d.ts.map +1 -0
- package/dist/protocol/brandResolver.js +61 -0
- package/dist/protocol/brandSearch.cjs +64 -0
- package/dist/protocol/brandSearch.d.cts +133 -0
- package/dist/protocol/brandSearch.d.ts +133 -0
- package/dist/protocol/brandSearch.d.ts.map +1 -0
- package/dist/protocol/brandSearch.js +64 -0
- package/dist/protocol/brandTypes.cjs +30 -0
- package/dist/protocol/brandTypes.d.cts +198 -0
- package/dist/protocol/brandTypes.d.ts +198 -0
- package/dist/protocol/brandTypes.d.ts.map +1 -0
- package/dist/protocol/brandTypes.js +30 -0
- package/dist/protocol/deriveColors.cjs +67 -0
- package/dist/protocol/deriveColors.d.cts +39 -0
- package/dist/protocol/deriveColors.d.ts +39 -0
- package/dist/protocol/deriveColors.d.ts.map +1 -0
- package/dist/protocol/deriveColors.js +67 -0
- package/dist/protocol/index.cjs +55 -0
- package/dist/protocol/index.d.cts +20 -0
- package/dist/protocol/index.d.ts +20 -0
- package/dist/protocol/index.d.ts.map +1 -0
- package/dist/protocol/index.js +55 -0
- package/dist/protocol/messageTypes.cjs +32 -0
- package/dist/protocol/messageTypes.d.cts +86 -0
- package/dist/protocol/messageTypes.d.ts +86 -0
- package/dist/protocol/messageTypes.d.ts.map +1 -0
- package/dist/protocol/messageTypes.js +32 -0
- package/dist/protocol/ootbThemes.cjs +229 -0
- package/dist/protocol/ootbThemes.d.cts +6 -0
- package/dist/protocol/ootbThemes.d.ts +6 -0
- package/dist/protocol/ootbThemes.d.ts.map +1 -0
- package/dist/protocol/ootbThemes.js +229 -0
- package/dist/protocol/themeCss.cjs +47 -0
- package/dist/protocol/themeCss.d.cts +18 -0
- package/dist/protocol/themeCss.d.ts +18 -0
- package/dist/protocol/themeCss.d.ts.map +1 -0
- package/dist/protocol/themeCss.js +47 -0
- package/dist/protocol/types.d.cts +74 -0
- package/dist/protocol/types.d.ts +74 -0
- package/dist/protocol/types.d.ts.map +1 -0
- package/dist/protocol/utils.cjs +10 -0
- package/dist/protocol/utils.d.cts +20 -0
- package/dist/protocol/utils.d.ts +20 -0
- package/dist/protocol/utils.d.ts.map +1 -0
- package/dist/protocol/utils.js +10 -0
- package/dist/runtime/fontFace.cjs +43 -0
- package/dist/runtime/fontFace.d.cts +15 -0
- package/dist/runtime/fontFace.d.ts +15 -0
- package/dist/runtime/fontFace.d.ts.map +1 -0
- package/dist/runtime/fontFace.js +43 -0
- package/dist/runtime/previewContent.cjs +344 -0
- package/dist/runtime/previewContent.d.cts +43 -0
- package/dist/runtime/previewContent.d.ts +43 -0
- package/dist/runtime/previewContent.d.ts.map +1 -0
- package/dist/runtime/previewContent.js +344 -0
- package/dist/runtime/previewRuntime.d.cts +10 -0
- package/dist/runtime/previewRuntime.d.ts +10 -0
- package/dist/runtime/previewRuntime.d.ts.map +1 -0
- package/dist/runtime/theme-preview-runtime.js +466 -0
- package/package.json +74 -0
|
@@ -0,0 +1,344 @@
|
|
|
1
|
+
import { generateFontFaceRules } from "./fontFace.js";
|
|
2
|
+
import { brandToVariables } from "../protocol/brandCss.js";
|
|
3
|
+
import { resolveBrandTokens } from "../protocol/brandResolver.js";
|
|
4
|
+
import { getBrandLogoUrl, getBrandLogoAltText } from "../protocol/brandTypes.js";
|
|
5
|
+
import { themeToVariables } from "../protocol/themeCss.js";
|
|
6
|
+
function escapeHtmlAttr(value) {
|
|
7
|
+
return String(value).replace(/&/g, "&").replace(/"/g, """).replace(/'/g, "'").replace(/</g, "<").replace(/>/g, ">");
|
|
8
|
+
}
|
|
9
|
+
function getPreviewHtml(theme, options) {
|
|
10
|
+
const variables = themeToVariables(theme);
|
|
11
|
+
return generatePreviewHtml(variables, options);
|
|
12
|
+
}
|
|
13
|
+
function getBrandPreviewHtml(brand, options) {
|
|
14
|
+
const resolved = resolveBrandTokens(brand);
|
|
15
|
+
const variables = brandToVariables(resolved);
|
|
16
|
+
return generatePreviewHtml(variables, options, resolved);
|
|
17
|
+
}
|
|
18
|
+
function generatePreviewHtml(variables, options, brand) {
|
|
19
|
+
const cssVariables = Object.entries(variables).map(([key, value]) => ` ${key}: ${value};`).join("\n");
|
|
20
|
+
const fontFaceRules = brand ? generateFontFaceRules(brand) : "";
|
|
21
|
+
const scriptSrc = options?.runtimeScriptUri || "/_sfdc/theme-preview-runtime.js";
|
|
22
|
+
const nonce = options?.nonce || "";
|
|
23
|
+
const cspSource = options?.cspSource || "";
|
|
24
|
+
const cspMeta = cspSource ? ` <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'nonce-${nonce}' ${cspSource}; img-src https: data: ${cspSource}; font-src https: data:;">` : "";
|
|
25
|
+
const heroImage = options?.imageUris?.hero;
|
|
26
|
+
const section3Image = options?.imageUris?.section3Left;
|
|
27
|
+
const section4Image = options?.imageUris?.section4Right;
|
|
28
|
+
const logoUrl = brand ? getBrandLogoUrl(brand) : void 0;
|
|
29
|
+
const logoAlt = brand ? getBrandLogoAltText(brand) : "";
|
|
30
|
+
const heroImg = heroImage ? `<img data-brand-hero src="${heroImage}" alt=""${logoUrl ? " hidden" : ""} />` : "";
|
|
31
|
+
const logoImg = logoUrl ? `<img class="brand-logo" data-brand-logo src="${escapeHtmlAttr(logoUrl)}" alt="${escapeHtmlAttr(logoAlt)}" />` : "";
|
|
32
|
+
return `<!DOCTYPE html>
|
|
33
|
+
<html lang="en">
|
|
34
|
+
<head>
|
|
35
|
+
<meta charset="UTF-8">
|
|
36
|
+
${cspMeta}
|
|
37
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
38
|
+
<title>Brand Preview</title>
|
|
39
|
+
<style>${fontFaceRules}
|
|
40
|
+
:root {
|
|
41
|
+
${cssVariables}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
* {
|
|
45
|
+
margin: 0;
|
|
46
|
+
padding: 0;
|
|
47
|
+
box-sizing: border-box;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
body {
|
|
51
|
+
font-family: var(--tm-font-body);
|
|
52
|
+
font-size: var(--tm-font-size-base);
|
|
53
|
+
color: var(--tm-color-text);
|
|
54
|
+
background-color: var(--tm-color-background);
|
|
55
|
+
line-height: var(--tm-line-height);
|
|
56
|
+
-webkit-font-smoothing: antialiased;
|
|
57
|
+
-moz-osx-font-smoothing: grayscale;
|
|
58
|
+
margin: 0;
|
|
59
|
+
padding: 0;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* ===== BRAND PREVIEW SECTIONS ===== */
|
|
63
|
+
.brand-section {
|
|
64
|
+
padding: 1.5rem;
|
|
65
|
+
background-color: var(--tm-color-background);
|
|
66
|
+
color: var(--tm-color-text);
|
|
67
|
+
border-radius: var(--tm-border-radius-square, 0);
|
|
68
|
+
border-width: var(--tm-border-weight-none, 0);
|
|
69
|
+
margin: 0;
|
|
70
|
+
transition: all 0.25s ease;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.brand-section img {
|
|
74
|
+
max-width: 100%;
|
|
75
|
+
height: auto;
|
|
76
|
+
display: block;
|
|
77
|
+
border-radius: var(--tm-border-radius-square, 0);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* Brand logo replaces the top hero image: half the container width, capped
|
|
81
|
+
at 200px tall, centered. object-fit keeps aspect ratio when the height cap
|
|
82
|
+
applies to a tall logo. */
|
|
83
|
+
.brand-logo {
|
|
84
|
+
width: 50%;
|
|
85
|
+
max-width: 50%;
|
|
86
|
+
height: auto;
|
|
87
|
+
max-height: 200px;
|
|
88
|
+
object-fit: contain;
|
|
89
|
+
margin: 0 auto;
|
|
90
|
+
display: block;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
[hidden] {
|
|
94
|
+
display: none !important;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.brand-two-column {
|
|
98
|
+
display: grid;
|
|
99
|
+
grid-template-columns: 1fr 1fr;
|
|
100
|
+
gap: 0.75rem;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@media (max-width: 768px) {
|
|
104
|
+
.brand-two-column {
|
|
105
|
+
grid-template-columns: 1fr;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* ===== TYPOGRAPHY ===== */
|
|
110
|
+
.brand-h1 {
|
|
111
|
+
font-family: var(--tm-heading1-font, var(--tm-font-heading));
|
|
112
|
+
font-size: var(--tm-heading1-size, 2rem);
|
|
113
|
+
font-weight: var(--tm-heading1-weight, var(--tm-heading-weight));
|
|
114
|
+
line-height: var(--tm-heading1-line-height, 1.2);
|
|
115
|
+
color: var(--tm-color-text);
|
|
116
|
+
margin: 0 0 0.75rem 0;
|
|
117
|
+
text-align: left;
|
|
118
|
+
transition: all 0.25s ease;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.brand-h2 {
|
|
122
|
+
font-family: var(--tm-heading2-font, var(--tm-font-heading));
|
|
123
|
+
font-size: var(--tm-heading2-size, 1.75rem);
|
|
124
|
+
font-weight: var(--tm-heading2-weight, var(--tm-heading-weight));
|
|
125
|
+
line-height: var(--tm-heading2-line-height, 1.2);
|
|
126
|
+
color: var(--tm-color-text);
|
|
127
|
+
margin: 0.75rem 0 0 0;
|
|
128
|
+
text-align: left;
|
|
129
|
+
transition: all 0.25s ease;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.brand-h3 {
|
|
133
|
+
font-family: var(--tm-heading3-font, var(--tm-font-heading));
|
|
134
|
+
font-size: var(--tm-heading3-size, 1.5rem);
|
|
135
|
+
font-weight: var(--tm-heading3-weight, var(--tm-heading-weight));
|
|
136
|
+
line-height: var(--tm-heading3-line-height, 1.2);
|
|
137
|
+
color: var(--tm-color-text);
|
|
138
|
+
margin: 0 0 0.75rem 0;
|
|
139
|
+
text-align: left;
|
|
140
|
+
transition: all 0.25s ease;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.brand-h4 {
|
|
144
|
+
font-family: var(--tm-heading4-font, var(--tm-font-heading));
|
|
145
|
+
font-size: var(--tm-heading4-size, 1.25rem);
|
|
146
|
+
font-weight: var(--tm-heading4-weight, var(--tm-heading-weight));
|
|
147
|
+
line-height: var(--tm-heading4-line-height, 1.2);
|
|
148
|
+
color: var(--tm-color-text);
|
|
149
|
+
margin: 0 0 0.75rem 0;
|
|
150
|
+
text-align: left;
|
|
151
|
+
transition: all 0.25s ease;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.brand-h5 {
|
|
155
|
+
font-family: var(--tm-heading5-font, var(--tm-font-heading));
|
|
156
|
+
font-size: var(--tm-heading5-size, 1.1rem);
|
|
157
|
+
font-weight: var(--tm-heading5-weight, var(--tm-heading-weight));
|
|
158
|
+
line-height: var(--tm-heading5-line-height, 1.2);
|
|
159
|
+
color: var(--tm-color-text);
|
|
160
|
+
margin: 0.75rem 0;
|
|
161
|
+
text-align: center;
|
|
162
|
+
padding: 0.75rem;
|
|
163
|
+
transition: all 0.25s ease;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.brand-h6 {
|
|
167
|
+
font-family: var(--tm-heading6-font, var(--tm-font-heading));
|
|
168
|
+
font-size: var(--tm-heading6-size, 1rem);
|
|
169
|
+
font-weight: var(--tm-heading6-weight, var(--tm-heading-weight));
|
|
170
|
+
line-height: var(--tm-heading6-line-height, 1.2);
|
|
171
|
+
color: var(--tm-color-text);
|
|
172
|
+
margin: 0 0 0.75rem 0;
|
|
173
|
+
text-align: center;
|
|
174
|
+
transition: all 0.25s ease;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.brand-p1 {
|
|
178
|
+
font-family: var(--tm-paragraph1-font, var(--tm-font-body));
|
|
179
|
+
font-size: var(--tm-paragraph1-size, 1rem);
|
|
180
|
+
font-weight: var(--tm-paragraph1-weight, var(--tm-body-weight));
|
|
181
|
+
line-height: var(--tm-paragraph1-line-height, var(--tm-line-height));
|
|
182
|
+
color: var(--tm-color-text);
|
|
183
|
+
margin: 0 0 0.75rem 0;
|
|
184
|
+
text-align: left;
|
|
185
|
+
transition: all 0.25s ease;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.brand-p1.center {
|
|
189
|
+
text-align: center;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.brand-p2 {
|
|
193
|
+
font-family: var(--tm-paragraph2-font, var(--tm-font-body));
|
|
194
|
+
font-size: var(--tm-paragraph2-size, 0.875rem);
|
|
195
|
+
font-weight: var(--tm-paragraph2-weight, var(--tm-body-weight));
|
|
196
|
+
line-height: var(--tm-paragraph2-line-height, var(--tm-line-height));
|
|
197
|
+
color: var(--tm-color-text);
|
|
198
|
+
margin: 0;
|
|
199
|
+
text-align: center;
|
|
200
|
+
transition: all 0.25s ease;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* ===== BUTTONS ===== */
|
|
204
|
+
.brand-btn-primary {
|
|
205
|
+
display: inline-block;
|
|
206
|
+
padding: var(--tm-button-padding-y, 0.75rem) var(--tm-button-padding-x, 1.5rem);
|
|
207
|
+
background-color: var(--tm-button-primary-bg, var(--tm-color-primary));
|
|
208
|
+
color: var(--tm-button-primary-text, #ffffff);
|
|
209
|
+
border: var(--tm-button-primary-border-width, 0) solid var(--tm-button-primary-border, transparent);
|
|
210
|
+
border-radius: var(--tm-button-radius, var(--tm-border-radius));
|
|
211
|
+
font-family: var(--tm-font-body);
|
|
212
|
+
font-size: 1rem;
|
|
213
|
+
font-weight: var(--tm-body-weight);
|
|
214
|
+
text-decoration: none;
|
|
215
|
+
cursor: pointer;
|
|
216
|
+
transition: all 0.25s ease;
|
|
217
|
+
margin: 0 0 0.75rem 0;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.brand-btn-primary:hover {
|
|
221
|
+
opacity: 0.9;
|
|
222
|
+
transform: translateY(-1px);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.brand-btn-secondary {
|
|
226
|
+
display: inline-block;
|
|
227
|
+
padding: var(--tm-button-secondary-padding-y, var(--tm-button-padding-y, 0.75rem)) var(--tm-button-secondary-padding-x, var(--tm-button-padding-x, 1.5rem));
|
|
228
|
+
background-color: var(--tm-button-secondary-bg, transparent);
|
|
229
|
+
color: var(--tm-button-secondary-text, var(--tm-color-primary));
|
|
230
|
+
border: var(--tm-button-secondary-border-width, 1px) solid var(--tm-button-secondary-border, var(--tm-color-primary));
|
|
231
|
+
border-radius: var(--tm-button-secondary-radius, var(--tm-button-radius, var(--tm-border-radius)));
|
|
232
|
+
font-family: var(--tm-font-body);
|
|
233
|
+
font-size: 1rem;
|
|
234
|
+
font-weight: var(--tm-body-weight);
|
|
235
|
+
text-decoration: none;
|
|
236
|
+
cursor: pointer;
|
|
237
|
+
transition: all 0.25s ease;
|
|
238
|
+
margin: 0 0 0.75rem 0;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.brand-btn-secondary:hover {
|
|
242
|
+
opacity: 0.9;
|
|
243
|
+
transform: translateY(-1px);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.brand-btn-tertiary {
|
|
247
|
+
display: inline-block;
|
|
248
|
+
padding: var(--tm-button-tertiary-padding-y, var(--tm-button-padding-y, 0.75rem)) var(--tm-button-tertiary-padding-x, var(--tm-button-padding-x, 1.5rem));
|
|
249
|
+
background-color: var(--tm-button-tertiary-bg, transparent);
|
|
250
|
+
color: var(--tm-button-tertiary-text, var(--tm-color-primary));
|
|
251
|
+
border: var(--tm-button-tertiary-border-width, 0) solid var(--tm-button-tertiary-border, transparent);
|
|
252
|
+
border-radius: var(--tm-button-tertiary-radius, var(--tm-button-radius, var(--tm-border-radius)));
|
|
253
|
+
font-family: var(--tm-font-body);
|
|
254
|
+
font-size: 1rem;
|
|
255
|
+
font-weight: var(--tm-body-weight);
|
|
256
|
+
text-decoration: none;
|
|
257
|
+
cursor: pointer;
|
|
258
|
+
transition: all 0.25s ease;
|
|
259
|
+
margin: 0 0 0.75rem 0;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.brand-btn-tertiary:hover {
|
|
263
|
+
opacity: 0.9;
|
|
264
|
+
transform: translateY(-1px);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
/* ===== SECTION 5 BORDERED BOX ===== */
|
|
268
|
+
.brand-bordered-box {
|
|
269
|
+
border-radius: var(--tm-border-radius-round, var(--tm-border-radius));
|
|
270
|
+
border: var(--tm-border-weight-medium, 2px) solid var(--tm-color-text-secondary, var(--tm-color-surface));
|
|
271
|
+
padding: 0 0.75rem 0.75rem 0.75rem;
|
|
272
|
+
background-color: var(--tm-color-background);
|
|
273
|
+
transition: all 0.25s ease;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/* ===== TRANSITIONS FOR LIVE PREVIEW ===== */
|
|
277
|
+
*, *::before, *::after {
|
|
278
|
+
transition-property: color, background-color, border-color, box-shadow, transform;
|
|
279
|
+
transition-duration: 0.25s;
|
|
280
|
+
transition-timing-function: ease;
|
|
281
|
+
}
|
|
282
|
+
</style>
|
|
283
|
+
</head>
|
|
284
|
+
<body>
|
|
285
|
+
|
|
286
|
+
<!-- SECTION 1: Hero Image (a brand logo replaces it when present) -->
|
|
287
|
+
<section class="brand-section" data-brand-hero-section>
|
|
288
|
+
${heroImg}${logoImg}
|
|
289
|
+
</section>
|
|
290
|
+
|
|
291
|
+
<!-- SECTION 2: H1 + Paragraph 1 + Primary Button -->
|
|
292
|
+
<section class="brand-section">
|
|
293
|
+
<h1 class="brand-h1">Heading 1</h1>
|
|
294
|
+
<p class="brand-p1">Here is an example of Paragraph 1 text, along with an example of a Primary button. When you customize most brand values, this panel shows your changes.</p>
|
|
295
|
+
<button class="brand-btn-primary">Button</button>
|
|
296
|
+
<h2 class="brand-h2">Heading 2</h2>
|
|
297
|
+
</section>
|
|
298
|
+
|
|
299
|
+
<!-- SECTION 3: Two-column (Image Left, H3+P1+Secondary Button Right) -->
|
|
300
|
+
<section class="brand-section brand-two-column">
|
|
301
|
+
<div>
|
|
302
|
+
${section3Image ? `<img src="${section3Image}" alt="" style="margin-right: 0.375rem;" />` : ""}
|
|
303
|
+
</div>
|
|
304
|
+
<div style="padding-left: 0.375rem;">
|
|
305
|
+
<h3 class="brand-h3">Heading 3</h3>
|
|
306
|
+
<p class="brand-p1">Here's some more Paragraph 1 text, along with an example of a Secondary button.</p>
|
|
307
|
+
<button class="brand-btn-secondary">Button</button>
|
|
308
|
+
</div>
|
|
309
|
+
</section>
|
|
310
|
+
|
|
311
|
+
<!-- SECTION 4: Two-column (H4+P1+Tertiary Button Left, Image Right) -->
|
|
312
|
+
<section class="brand-section brand-two-column">
|
|
313
|
+
<div style="padding-right: 0.375rem;">
|
|
314
|
+
<h4 class="brand-h4">Heading 4</h4>
|
|
315
|
+
<p class="brand-p1">Following this Paragraph 1 text is a Tertiary button. This button type often has no border, but you can add one.</p>
|
|
316
|
+
<button class="brand-btn-tertiary">Button</button>
|
|
317
|
+
</div>
|
|
318
|
+
<div>
|
|
319
|
+
${section4Image ? `<img src="${section4Image}" alt="" style="margin-left: 0.375rem;" />` : ""}
|
|
320
|
+
</div>
|
|
321
|
+
</section>
|
|
322
|
+
|
|
323
|
+
<!-- SECTION 5: Centered Bordered Box (H5 + P1 showing border-radius + border-weight) -->
|
|
324
|
+
<section class="brand-section">
|
|
325
|
+
<div class="brand-bordered-box">
|
|
326
|
+
<h5 class="brand-h5">Heading 5</h5>
|
|
327
|
+
<p class="brand-p1 center">The border around this heading and Paragraph 1 text updates to show changes that you make to the border radius and the Medium border weight.</p>
|
|
328
|
+
</div>
|
|
329
|
+
</section>
|
|
330
|
+
|
|
331
|
+
<!-- SECTION 6: Footer (H6 + Paragraph 2) -->
|
|
332
|
+
<section class="brand-section">
|
|
333
|
+
<h6 class="brand-h6">Heading 6</h6>
|
|
334
|
+
<p class="brand-p2">Here's an example of Paragraph 2 text. This text is often smaller than Paragraph 1 text, perfect for content that you want to be slightly less prominent.</p>
|
|
335
|
+
</section>
|
|
336
|
+
|
|
337
|
+
<script${nonce ? ` nonce="${nonce}"` : ""} src="${scriptSrc}"><\/script>
|
|
338
|
+
</body>
|
|
339
|
+
</html>`;
|
|
340
|
+
}
|
|
341
|
+
export {
|
|
342
|
+
getBrandPreviewHtml,
|
|
343
|
+
getPreviewHtml
|
|
344
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Brand } from '../protocol/brandTypes.cjs';
|
|
2
|
+
/**
|
|
3
|
+
* Swap the top hero image for the brand's logo (or restore the hero) on a live
|
|
4
|
+
* brand switch. When the brand has a logo it renders at half the container
|
|
5
|
+
* width, centered; otherwise the default hero image is shown.
|
|
6
|
+
*
|
|
7
|
+
* @param brand - The resolved brand object
|
|
8
|
+
*/
|
|
9
|
+
export declare function applyBrandLogo(brand: Brand): void;
|
|
10
|
+
//# sourceMappingURL=previewRuntime.d.ts.map
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Brand } from '../protocol/brandTypes.js';
|
|
2
|
+
/**
|
|
3
|
+
* Swap the top hero image for the brand's logo (or restore the hero) on a live
|
|
4
|
+
* brand switch. When the brand has a logo it renders at half the container
|
|
5
|
+
* width, centered; otherwise the default hero image is shown.
|
|
6
|
+
*
|
|
7
|
+
* @param brand - The resolved brand object
|
|
8
|
+
*/
|
|
9
|
+
export declare function applyBrandLogo(brand: Brand): void;
|
|
10
|
+
//# sourceMappingURL=previewRuntime.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"previewRuntime.d.ts","sourceRoot":"","sources":["../../src/runtime/previewRuntime.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAsDpD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CA0BjD"}
|