@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.
Files changed (118) hide show
  1. package/LICENSE.txt +82 -0
  2. package/README.md +29 -0
  3. package/dist/authoring/core/ThemeManagerPanelRoot.d.cts +43 -0
  4. package/dist/authoring/core/ThemeManagerPanelRoot.d.ts +43 -0
  5. package/dist/authoring/core/ThemeManagerPanelRoot.d.ts.map +1 -0
  6. package/dist/authoring/core/components/AssetsSection.d.cts +12 -0
  7. package/dist/authoring/core/components/AssetsSection.d.ts +12 -0
  8. package/dist/authoring/core/components/AssetsSection.d.ts.map +1 -0
  9. package/dist/authoring/core/components/BordersSection.d.cts +9 -0
  10. package/dist/authoring/core/components/BordersSection.d.ts +9 -0
  11. package/dist/authoring/core/components/BordersSection.d.ts.map +1 -0
  12. package/dist/authoring/core/components/ButtonSection.d.cts +9 -0
  13. package/dist/authoring/core/components/ButtonSection.d.ts +9 -0
  14. package/dist/authoring/core/components/ButtonSection.d.ts.map +1 -0
  15. package/dist/authoring/core/components/ColorEditors.d.cts +8 -0
  16. package/dist/authoring/core/components/ColorEditors.d.ts +8 -0
  17. package/dist/authoring/core/components/ColorEditors.d.ts.map +1 -0
  18. package/dist/authoring/core/components/ColorField.d.cts +45 -0
  19. package/dist/authoring/core/components/ColorField.d.ts +45 -0
  20. package/dist/authoring/core/components/ColorField.d.ts.map +1 -0
  21. package/dist/authoring/core/components/SaveBar.d.cts +8 -0
  22. package/dist/authoring/core/components/SaveBar.d.ts +8 -0
  23. package/dist/authoring/core/components/SaveBar.d.ts.map +1 -0
  24. package/dist/authoring/core/components/SearchBox.d.cts +16 -0
  25. package/dist/authoring/core/components/SearchBox.d.ts +16 -0
  26. package/dist/authoring/core/components/SearchBox.d.ts.map +1 -0
  27. package/dist/authoring/core/components/TabSwitcher.d.cts +13 -0
  28. package/dist/authoring/core/components/TabSwitcher.d.ts +13 -0
  29. package/dist/authoring/core/components/TabSwitcher.d.ts.map +1 -0
  30. package/dist/authoring/core/components/ThemeGallery.d.cts +9 -0
  31. package/dist/authoring/core/components/ThemeGallery.d.ts +9 -0
  32. package/dist/authoring/core/components/ThemeGallery.d.ts.map +1 -0
  33. package/dist/authoring/core/components/TypographySection.d.cts +9 -0
  34. package/dist/authoring/core/components/TypographySection.d.ts +9 -0
  35. package/dist/authoring/core/components/TypographySection.d.ts.map +1 -0
  36. package/dist/authoring/core/index.d.cts +8 -0
  37. package/dist/authoring/core/index.d.ts +8 -0
  38. package/dist/authoring/core/index.d.ts.map +1 -0
  39. package/dist/authoring/core/labels.d.cts +89 -0
  40. package/dist/authoring/core/labels.d.ts +89 -0
  41. package/dist/authoring/core/labels.d.ts.map +1 -0
  42. package/dist/authoring/react/index.d.cts +16 -0
  43. package/dist/authoring/react/index.d.ts +16 -0
  44. package/dist/authoring/react/index.d.ts.map +1 -0
  45. package/dist/authoring/react/index.js +1 -0
  46. package/dist/authoring/react/styles.css +1 -0
  47. package/dist/authoring/web-component/index.d.cts +34 -0
  48. package/dist/authoring/web-component/index.d.ts +34 -0
  49. package/dist/authoring/web-component/index.d.ts.map +1 -0
  50. package/dist/authoring/web-component/index.js +729 -0
  51. package/dist/protocol/brandCss.cjs +255 -0
  52. package/dist/protocol/brandCss.d.cts +42 -0
  53. package/dist/protocol/brandCss.d.ts +42 -0
  54. package/dist/protocol/brandCss.d.ts.map +1 -0
  55. package/dist/protocol/brandCss.js +255 -0
  56. package/dist/protocol/brandResolver.cjs +61 -0
  57. package/dist/protocol/brandResolver.d.cts +28 -0
  58. package/dist/protocol/brandResolver.d.ts +28 -0
  59. package/dist/protocol/brandResolver.d.ts.map +1 -0
  60. package/dist/protocol/brandResolver.js +61 -0
  61. package/dist/protocol/brandSearch.cjs +64 -0
  62. package/dist/protocol/brandSearch.d.cts +133 -0
  63. package/dist/protocol/brandSearch.d.ts +133 -0
  64. package/dist/protocol/brandSearch.d.ts.map +1 -0
  65. package/dist/protocol/brandSearch.js +64 -0
  66. package/dist/protocol/brandTypes.cjs +30 -0
  67. package/dist/protocol/brandTypes.d.cts +198 -0
  68. package/dist/protocol/brandTypes.d.ts +198 -0
  69. package/dist/protocol/brandTypes.d.ts.map +1 -0
  70. package/dist/protocol/brandTypes.js +30 -0
  71. package/dist/protocol/deriveColors.cjs +67 -0
  72. package/dist/protocol/deriveColors.d.cts +39 -0
  73. package/dist/protocol/deriveColors.d.ts +39 -0
  74. package/dist/protocol/deriveColors.d.ts.map +1 -0
  75. package/dist/protocol/deriveColors.js +67 -0
  76. package/dist/protocol/index.cjs +55 -0
  77. package/dist/protocol/index.d.cts +20 -0
  78. package/dist/protocol/index.d.ts +20 -0
  79. package/dist/protocol/index.d.ts.map +1 -0
  80. package/dist/protocol/index.js +55 -0
  81. package/dist/protocol/messageTypes.cjs +32 -0
  82. package/dist/protocol/messageTypes.d.cts +86 -0
  83. package/dist/protocol/messageTypes.d.ts +86 -0
  84. package/dist/protocol/messageTypes.d.ts.map +1 -0
  85. package/dist/protocol/messageTypes.js +32 -0
  86. package/dist/protocol/ootbThemes.cjs +229 -0
  87. package/dist/protocol/ootbThemes.d.cts +6 -0
  88. package/dist/protocol/ootbThemes.d.ts +6 -0
  89. package/dist/protocol/ootbThemes.d.ts.map +1 -0
  90. package/dist/protocol/ootbThemes.js +229 -0
  91. package/dist/protocol/themeCss.cjs +47 -0
  92. package/dist/protocol/themeCss.d.cts +18 -0
  93. package/dist/protocol/themeCss.d.ts +18 -0
  94. package/dist/protocol/themeCss.d.ts.map +1 -0
  95. package/dist/protocol/themeCss.js +47 -0
  96. package/dist/protocol/types.d.cts +74 -0
  97. package/dist/protocol/types.d.ts +74 -0
  98. package/dist/protocol/types.d.ts.map +1 -0
  99. package/dist/protocol/utils.cjs +10 -0
  100. package/dist/protocol/utils.d.cts +20 -0
  101. package/dist/protocol/utils.d.ts +20 -0
  102. package/dist/protocol/utils.d.ts.map +1 -0
  103. package/dist/protocol/utils.js +10 -0
  104. package/dist/runtime/fontFace.cjs +43 -0
  105. package/dist/runtime/fontFace.d.cts +15 -0
  106. package/dist/runtime/fontFace.d.ts +15 -0
  107. package/dist/runtime/fontFace.d.ts.map +1 -0
  108. package/dist/runtime/fontFace.js +43 -0
  109. package/dist/runtime/previewContent.cjs +344 -0
  110. package/dist/runtime/previewContent.d.cts +43 -0
  111. package/dist/runtime/previewContent.d.ts +43 -0
  112. package/dist/runtime/previewContent.d.ts.map +1 -0
  113. package/dist/runtime/previewContent.js +344 -0
  114. package/dist/runtime/previewRuntime.d.cts +10 -0
  115. package/dist/runtime/previewRuntime.d.ts +10 -0
  116. package/dist/runtime/previewRuntime.d.ts.map +1 -0
  117. package/dist/runtime/theme-preview-runtime.js +466 -0
  118. package/package.json +74 -0
package/dist/runtime/fontFace.js ADDED
@@ -0,0 +1,43 @@
1
+ const KNOWN_FONTS = {
2
+ "Salesforce Sans": "https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans.woff2"
3
+ };
4
+ function generateFontFaceRules(brand) {
5
+ const rules = [];
6
+ const processedFonts = /* @__PURE__ */ new Set();
7
+ const addFontFace = (font) => {
8
+ if (!font || typeof font !== "object") return;
9
+ if (!("name" in font)) return;
10
+ const fontObj = font;
11
+ const name = fontObj.name;
12
+ if (processedFonts.has(name)) return;
13
+ processedFonts.add(name);
14
+ const fontUrl = fontObj.url || fontObj.src || fontObj.fontUrl || fontObj.woff2;
15
+ if (fontUrl) {
16
+ rules.push(` @font-face {
17
+ font-family: "${name}";
18
+ src: url("${fontUrl}") format("woff2");
19
+ font-display: swap;
20
+ }`);
21
+ return;
22
+ }
23
+ if (KNOWN_FONTS[name]) {
24
+ rules.push(` @font-face {
25
+ font-family: "${name}";
26
+ src: url("${KNOWN_FONTS[name]}") format("woff2");
27
+ font-display: swap;
28
+ }`);
29
+ }
30
+ };
31
+ if (brand.baseFontFamily) {
32
+ addFontFace(brand.baseFontFamily);
33
+ }
34
+ const heading1 = brand.typography?.heading?.heading1;
35
+ if (heading1?.fontFamily) {
36
+ addFontFace(heading1.fontFamily);
37
+ }
38
+ return rules.length > 0 ? "\n" + rules.join("\n") + "\n" : "";
39
+ }
40
+ export {
41
+ KNOWN_FONTS,
42
+ generateFontFaceRules
43
+ };
package/dist/runtime/previewContent.cjs ADDED
@@ -0,0 +1,344 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const fontFace = require("./fontFace.cjs");
4
+ const brandCss = require("../protocol/brandCss.cjs");
5
+ const brandResolver = require("../protocol/brandResolver.cjs");
6
+ const brandTypes = require("../protocol/brandTypes.cjs");
7
+ const themeCss = require("../protocol/themeCss.cjs");
8
+ function escapeHtmlAttr(value) {
9
+ return String(value).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
10
+ }
11
+ function getPreviewHtml(theme, options) {
12
+ const variables = themeCss.themeToVariables(theme);
13
+ return generatePreviewHtml(variables, options);
14
+ }
15
+ function getBrandPreviewHtml(brand, options) {
16
+ const resolved = brandResolver.resolveBrandTokens(brand);
17
+ const variables = brandCss.brandToVariables(resolved);
18
+ return generatePreviewHtml(variables, options, resolved);
19
+ }
20
+ function generatePreviewHtml(variables, options, brand) {
21
+ const cssVariables = Object.entries(variables).map(([key, value]) => ` ${key}: ${value};`).join("\n");
22
+ const fontFaceRules = brand ? fontFace.generateFontFaceRules(brand) : "";
23
+ const scriptSrc = options?.runtimeScriptUri || "/_sfdc/theme-preview-runtime.js";
24
+ const nonce = options?.nonce || "";
25
+ const cspSource = options?.cspSource || "";
26
+ 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:;">` : "";
27
+ const heroImage = options?.imageUris?.hero;
28
+ const section3Image = options?.imageUris?.section3Left;
29
+ const section4Image = options?.imageUris?.section4Right;
30
+ const logoUrl = brand ? brandTypes.getBrandLogoUrl(brand) : void 0;
31
+ const logoAlt = brand ? brandTypes.getBrandLogoAltText(brand) : "";
32
+ const heroImg = heroImage ? `<img data-brand-hero src="${heroImage}" alt=""${logoUrl ? " hidden" : ""} />` : "";
33
+ const logoImg = logoUrl ? `<img class="brand-logo" data-brand-logo src="${escapeHtmlAttr(logoUrl)}" alt="${escapeHtmlAttr(logoAlt)}" />` : "";
34
+ return `<!DOCTYPE html>
35
+ <html lang="en">
36
+ <head>
37
+ <meta charset="UTF-8">
38
+ ${cspMeta}
39
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
40
+ <title>Brand Preview</title>
41
+ <style>${fontFaceRules}
42
+ :root {
43
+ ${cssVariables}
44
+ }
45
+
46
+ * {
47
+ margin: 0;
48
+ padding: 0;
49
+ box-sizing: border-box;
50
+ }
51
+
52
+ body {
53
+ font-family: var(--tm-font-body);
54
+ font-size: var(--tm-font-size-base);
55
+ color: var(--tm-color-text);
56
+ background-color: var(--tm-color-background);
57
+ line-height: var(--tm-line-height);
58
+ -webkit-font-smoothing: antialiased;
59
+ -moz-osx-font-smoothing: grayscale;
60
+ margin: 0;
61
+ padding: 0;
62
+ }
63
+
64
+ /* ===== BRAND PREVIEW SECTIONS ===== */
65
+ .brand-section {
66
+ padding: 1.5rem;
67
+ background-color: var(--tm-color-background);
68
+ color: var(--tm-color-text);
69
+ border-radius: var(--tm-border-radius-square, 0);
70
+ border-width: var(--tm-border-weight-none, 0);
71
+ margin: 0;
72
+ transition: all 0.25s ease;
73
+ }
74
+
75
+ .brand-section img {
76
+ max-width: 100%;
77
+ height: auto;
78
+ display: block;
79
+ border-radius: var(--tm-border-radius-square, 0);
80
+ }
81
+
82
+ /* Brand logo replaces the top hero image: half the container width, capped
83
+ at 200px tall, centered. object-fit keeps aspect ratio when the height cap
84
+ applies to a tall logo. */
85
+ .brand-logo {
86
+ width: 50%;
87
+ max-width: 50%;
88
+ height: auto;
89
+ max-height: 200px;
90
+ object-fit: contain;
91
+ margin: 0 auto;
92
+ display: block;
93
+ }
94
+
95
+ [hidden] {
96
+ display: none !important;
97
+ }
98
+
99
+ .brand-two-column {
100
+ display: grid;
101
+ grid-template-columns: 1fr 1fr;
102
+ gap: 0.75rem;
103
+ }
104
+
105
+ @media (max-width: 768px) {
106
+ .brand-two-column {
107
+ grid-template-columns: 1fr;
108
+ }
109
+ }
110
+
111
+ /* ===== TYPOGRAPHY ===== */
112
+ .brand-h1 {
113
+ font-family: var(--tm-heading1-font, var(--tm-font-heading));
114
+ font-size: var(--tm-heading1-size, 2rem);
115
+ font-weight: var(--tm-heading1-weight, var(--tm-heading-weight));
116
+ line-height: var(--tm-heading1-line-height, 1.2);
117
+ color: var(--tm-color-text);
118
+ margin: 0 0 0.75rem 0;
119
+ text-align: left;
120
+ transition: all 0.25s ease;
121
+ }
122
+
123
+ .brand-h2 {
124
+ font-family: var(--tm-heading2-font, var(--tm-font-heading));
125
+ font-size: var(--tm-heading2-size, 1.75rem);
126
+ font-weight: var(--tm-heading2-weight, var(--tm-heading-weight));
127
+ line-height: var(--tm-heading2-line-height, 1.2);
128
+ color: var(--tm-color-text);
129
+ margin: 0.75rem 0 0 0;
130
+ text-align: left;
131
+ transition: all 0.25s ease;
132
+ }
133
+
134
+ .brand-h3 {
135
+ font-family: var(--tm-heading3-font, var(--tm-font-heading));
136
+ font-size: var(--tm-heading3-size, 1.5rem);
137
+ font-weight: var(--tm-heading3-weight, var(--tm-heading-weight));
138
+ line-height: var(--tm-heading3-line-height, 1.2);
139
+ color: var(--tm-color-text);
140
+ margin: 0 0 0.75rem 0;
141
+ text-align: left;
142
+ transition: all 0.25s ease;
143
+ }
144
+
145
+ .brand-h4 {
146
+ font-family: var(--tm-heading4-font, var(--tm-font-heading));
147
+ font-size: var(--tm-heading4-size, 1.25rem);
148
+ font-weight: var(--tm-heading4-weight, var(--tm-heading-weight));
149
+ line-height: var(--tm-heading4-line-height, 1.2);
150
+ color: var(--tm-color-text);
151
+ margin: 0 0 0.75rem 0;
152
+ text-align: left;
153
+ transition: all 0.25s ease;
154
+ }
155
+
156
+ .brand-h5 {
157
+ font-family: var(--tm-heading5-font, var(--tm-font-heading));
158
+ font-size: var(--tm-heading5-size, 1.1rem);
159
+ font-weight: var(--tm-heading5-weight, var(--tm-heading-weight));
160
+ line-height: var(--tm-heading5-line-height, 1.2);
161
+ color: var(--tm-color-text);
162
+ margin: 0.75rem 0;
163
+ text-align: center;
164
+ padding: 0.75rem;
165
+ transition: all 0.25s ease;
166
+ }
167
+
168
+ .brand-h6 {
169
+ font-family: var(--tm-heading6-font, var(--tm-font-heading));
170
+ font-size: var(--tm-heading6-size, 1rem);
171
+ font-weight: var(--tm-heading6-weight, var(--tm-heading-weight));
172
+ line-height: var(--tm-heading6-line-height, 1.2);
173
+ color: var(--tm-color-text);
174
+ margin: 0 0 0.75rem 0;
175
+ text-align: center;
176
+ transition: all 0.25s ease;
177
+ }
178
+
179
+ .brand-p1 {
180
+ font-family: var(--tm-paragraph1-font, var(--tm-font-body));
181
+ font-size: var(--tm-paragraph1-size, 1rem);
182
+ font-weight: var(--tm-paragraph1-weight, var(--tm-body-weight));
183
+ line-height: var(--tm-paragraph1-line-height, var(--tm-line-height));
184
+ color: var(--tm-color-text);
185
+ margin: 0 0 0.75rem 0;
186
+ text-align: left;
187
+ transition: all 0.25s ease;
188
+ }
189
+
190
+ .brand-p1.center {
191
+ text-align: center;
192
+ }
193
+
194
+ .brand-p2 {
195
+ font-family: var(--tm-paragraph2-font, var(--tm-font-body));
196
+ font-size: var(--tm-paragraph2-size, 0.875rem);
197
+ font-weight: var(--tm-paragraph2-weight, var(--tm-body-weight));
198
+ line-height: var(--tm-paragraph2-line-height, var(--tm-line-height));
199
+ color: var(--tm-color-text);
200
+ margin: 0;
201
+ text-align: center;
202
+ transition: all 0.25s ease;
203
+ }
204
+
205
+ /* ===== BUTTONS ===== */
206
+ .brand-btn-primary {
207
+ display: inline-block;
208
+ padding: var(--tm-button-padding-y, 0.75rem) var(--tm-button-padding-x, 1.5rem);
209
+ background-color: var(--tm-button-primary-bg, var(--tm-color-primary));
210
+ color: var(--tm-button-primary-text, #ffffff);
211
+ border: var(--tm-button-primary-border-width, 0) solid var(--tm-button-primary-border, transparent);
212
+ border-radius: var(--tm-button-radius, var(--tm-border-radius));
213
+ font-family: var(--tm-font-body);
214
+ font-size: 1rem;
215
+ font-weight: var(--tm-body-weight);
216
+ text-decoration: none;
217
+ cursor: pointer;
218
+ transition: all 0.25s ease;
219
+ margin: 0 0 0.75rem 0;
220
+ }
221
+
222
+ .brand-btn-primary:hover {
223
+ opacity: 0.9;
224
+ transform: translateY(-1px);
225
+ }
226
+
227
+ .brand-btn-secondary {
228
+ display: inline-block;
229
+ 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));
230
+ background-color: var(--tm-button-secondary-bg, transparent);
231
+ color: var(--tm-button-secondary-text, var(--tm-color-primary));
232
+ border: var(--tm-button-secondary-border-width, 1px) solid var(--tm-button-secondary-border, var(--tm-color-primary));
233
+ border-radius: var(--tm-button-secondary-radius, var(--tm-button-radius, var(--tm-border-radius)));
234
+ font-family: var(--tm-font-body);
235
+ font-size: 1rem;
236
+ font-weight: var(--tm-body-weight);
237
+ text-decoration: none;
238
+ cursor: pointer;
239
+ transition: all 0.25s ease;
240
+ margin: 0 0 0.75rem 0;
241
+ }
242
+
243
+ .brand-btn-secondary:hover {
244
+ opacity: 0.9;
245
+ transform: translateY(-1px);
246
+ }
247
+
248
+ .brand-btn-tertiary {
249
+ display: inline-block;
250
+ 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));
251
+ background-color: var(--tm-button-tertiary-bg, transparent);
252
+ color: var(--tm-button-tertiary-text, var(--tm-color-primary));
253
+ border: var(--tm-button-tertiary-border-width, 0) solid var(--tm-button-tertiary-border, transparent);
254
+ border-radius: var(--tm-button-tertiary-radius, var(--tm-button-radius, var(--tm-border-radius)));
255
+ font-family: var(--tm-font-body);
256
+ font-size: 1rem;
257
+ font-weight: var(--tm-body-weight);
258
+ text-decoration: none;
259
+ cursor: pointer;
260
+ transition: all 0.25s ease;
261
+ margin: 0 0 0.75rem 0;
262
+ }
263
+
264
+ .brand-btn-tertiary:hover {
265
+ opacity: 0.9;
266
+ transform: translateY(-1px);
267
+ }
268
+
269
+ /* ===== SECTION 5 BORDERED BOX ===== */
270
+ .brand-bordered-box {
271
+ border-radius: var(--tm-border-radius-round, var(--tm-border-radius));
272
+ border: var(--tm-border-weight-medium, 2px) solid var(--tm-color-text-secondary, var(--tm-color-surface));
273
+ padding: 0 0.75rem 0.75rem 0.75rem;
274
+ background-color: var(--tm-color-background);
275
+ transition: all 0.25s ease;
276
+ }
277
+
278
+ /* ===== TRANSITIONS FOR LIVE PREVIEW ===== */
279
+ *, *::before, *::after {
280
+ transition-property: color, background-color, border-color, box-shadow, transform;
281
+ transition-duration: 0.25s;
282
+ transition-timing-function: ease;
283
+ }
284
+ </style>
285
+ </head>
286
+ <body>
287
+
288
+ <!-- SECTION 1: Hero Image (a brand logo replaces it when present) -->
289
+ <section class="brand-section" data-brand-hero-section>
290
+ ${heroImg}${logoImg}
291
+ </section>
292
+
293
+ <!-- SECTION 2: H1 + Paragraph 1 + Primary Button -->
294
+ <section class="brand-section">
295
+ <h1 class="brand-h1">Heading 1</h1>
296
+ <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>
297
+ <button class="brand-btn-primary">Button</button>
298
+ <h2 class="brand-h2">Heading 2</h2>
299
+ </section>
300
+
301
+ <!-- SECTION 3: Two-column (Image Left, H3+P1+Secondary Button Right) -->
302
+ <section class="brand-section brand-two-column">
303
+ <div>
304
+ ${section3Image ? `<img src="${section3Image}" alt="" style="margin-right: 0.375rem;" />` : ""}
305
+ </div>
306
+ <div style="padding-left: 0.375rem;">
307
+ <h3 class="brand-h3">Heading 3</h3>
308
+ <p class="brand-p1">Here's some more Paragraph 1 text, along with an example of a Secondary button.</p>
309
+ <button class="brand-btn-secondary">Button</button>
310
+ </div>
311
+ </section>
312
+
313
+ <!-- SECTION 4: Two-column (H4+P1+Tertiary Button Left, Image Right) -->
314
+ <section class="brand-section brand-two-column">
315
+ <div style="padding-right: 0.375rem;">
316
+ <h4 class="brand-h4">Heading 4</h4>
317
+ <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>
318
+ <button class="brand-btn-tertiary">Button</button>
319
+ </div>
320
+ <div>
321
+ ${section4Image ? `<img src="${section4Image}" alt="" style="margin-left: 0.375rem;" />` : ""}
322
+ </div>
323
+ </section>
324
+
325
+ <!-- SECTION 5: Centered Bordered Box (H5 + P1 showing border-radius + border-weight) -->
326
+ <section class="brand-section">
327
+ <div class="brand-bordered-box">
328
+ <h5 class="brand-h5">Heading 5</h5>
329
+ <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>
330
+ </div>
331
+ </section>
332
+
333
+ <!-- SECTION 6: Footer (H6 + Paragraph 2) -->
334
+ <section class="brand-section">
335
+ <h6 class="brand-h6">Heading 6</h6>
336
+ <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>
337
+ </section>
338
+
339
+ <script${nonce ? ` nonce="${nonce}"` : ""} src="${scriptSrc}"><\/script>
340
+ </body>
341
+ </html>`;
342
+ }
343
+ exports.getBrandPreviewHtml = getBrandPreviewHtml;
344
+ exports.getPreviewHtml = getPreviewHtml;
package/dist/runtime/previewContent.d.cts ADDED
@@ -0,0 +1,43 @@
1
+ import { Brand } from '../protocol/brandTypes.cjs';
2
+ import { Theme } from '../protocol/types.cjs';
3
+ /**
4
+ * Generates a complete HTML preview page showcasing a theme applied to a
5
+ * luxury hotel landing page. All styling uses --tm-* CSS custom properties
6
+ * that map to the theme protocol.
7
+ *
8
+ * The page is host-agnostic and communicates only via window.postMessage
9
+ * using the typed protocol message constants.
10
+ *
11
+ * @param theme - The theme to preview
12
+ * @param options - Optional host integration options (script URI, CSP nonce)
13
+ * @returns Complete HTML document string
14
+ */
15
+ export declare function getPreviewHtml(theme: Theme, options?: PreviewOptions): string;
16
+ export interface PreviewOptions {
17
+ /** Webview URI for the runtime script (e.g., vscode-webview://... or /_sfdc/...) */
18
+ runtimeScriptUri?: string;
19
+ /** Nonce for CSP script-src */
20
+ nonce?: string;
21
+ /** CSP source for webview (e.g., webview.cspSource) */
22
+ cspSource?: string;
23
+ /** Image URIs for brand preview sections (optional) */
24
+ imageUris?: {
25
+ hero?: string;
26
+ section3Left?: string;
27
+ section4Right?: string;
28
+ };
29
+ }
30
+ /**
31
+ * Generates a complete HTML preview page showcasing a Brand applied to a
32
+ * luxury hotel landing page. All styling uses --tm-* CSS custom properties
33
+ * that map to the Brand protocol.
34
+ *
35
+ * The page is host-agnostic and communicates only via window.postMessage
36
+ * using the typed protocol message constants.
37
+ *
38
+ * @param brand - The brand to preview (will be resolved automatically)
39
+ * @param options - Optional host integration options (script URI, CSP nonce)
40
+ * @returns Complete HTML document string
41
+ */
42
+ export declare function getBrandPreviewHtml(brand: Brand, options?: PreviewOptions): string;
43
+ //# sourceMappingURL=previewContent.d.ts.map
package/dist/runtime/previewContent.d.ts ADDED
@@ -0,0 +1,43 @@
1
+ import { Brand } from '../protocol/brandTypes.js';
2
+ import { Theme } from '../protocol/types.js';
3
+ /**
4
+ * Generates a complete HTML preview page showcasing a theme applied to a
5
+ * luxury hotel landing page. All styling uses --tm-* CSS custom properties
6
+ * that map to the theme protocol.
7
+ *
8
+ * The page is host-agnostic and communicates only via window.postMessage
9
+ * using the typed protocol message constants.
10
+ *
11
+ * @param theme - The theme to preview
12
+ * @param options - Optional host integration options (script URI, CSP nonce)
13
+ * @returns Complete HTML document string
14
+ */
15
+ export declare function getPreviewHtml(theme: Theme, options?: PreviewOptions): string;
16
+ export interface PreviewOptions {
17
+ /** Webview URI for the runtime script (e.g., vscode-webview://... or /_sfdc/...) */
18
+ runtimeScriptUri?: string;
19
+ /** Nonce for CSP script-src */
20
+ nonce?: string;
21
+ /** CSP source for webview (e.g., webview.cspSource) */
22
+ cspSource?: string;
23
+ /** Image URIs for brand preview sections (optional) */
24
+ imageUris?: {
25
+ hero?: string;
26
+ section3Left?: string;
27
+ section4Right?: string;
28
+ };
29
+ }
30
+ /**
31
+ * Generates a complete HTML preview page showcasing a Brand applied to a
32
+ * luxury hotel landing page. All styling uses --tm-* CSS custom properties
33
+ * that map to the Brand protocol.
34
+ *
35
+ * The page is host-agnostic and communicates only via window.postMessage
36
+ * using the typed protocol message constants.
37
+ *
38
+ * @param brand - The brand to preview (will be resolved automatically)
39
+ * @param options - Optional host integration options (script URI, CSP nonce)
40
+ * @returns Complete HTML document string
41
+ */
42
+ export declare function getBrandPreviewHtml(brand: Brand, options?: PreviewOptions): string;
43
+ //# sourceMappingURL=previewContent.d.ts.map
package/dist/runtime/previewContent.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"previewContent.d.ts","sourceRoot":"","sources":["../../src/runtime/previewContent.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAGpD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAY/C;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,cAAc,GAAG,MAAM,CAG7E;AAED,MAAM,WAAW,cAAc;IAC9B,oFAAoF;IACpF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,SAAS,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,aAAa,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACF;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,cAAc,GAAG,MAAM,CAIlF"}