ooxml-ui 1.18.2 → 1.19.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/README.md +54 -0
- package/dist/building-block-styles.d.ts +5 -0
- package/dist/building-block-styles.d.ts.map +1 -0
- package/dist/chunk-6Y7KR2I3.js +299 -0
- package/dist/{chunk-EVL7GFC7.js → chunk-KH2ZG3N6.js} +2 -2
- package/dist/{chunk-MSXUCINT.js → chunk-QEIGB73C.js} +1 -1
- package/dist/docx/building-blocks.d.ts +31 -0
- package/dist/docx/component.d.ts +1 -1
- package/dist/docx/editor-core.d.ts +3 -0
- package/dist/docx/element-api.d.ts +8 -0
- package/dist/docx/index.d.ts +1 -0
- package/dist/docx/styles/index.d.ts +0 -4
- package/dist/docx.js +154 -38
- package/dist/index.js +3 -3
- package/dist/pptx/chunk-NDAE3JFO.cjs +1014 -0
- package/dist/pptx/{chunk-AUCJIB3M.mjs → chunk-NLUVYOKN.mjs} +113 -381
- package/dist/pptx/{chunk-S2Y3VUNC.cjs → chunk-OQQQ2GBW.cjs} +134 -402
- package/dist/pptx/chunk-UTFFX4M7.mjs +989 -0
- package/dist/pptx/dom/index.cjs +205 -205
- package/dist/pptx/dom/index.mjs +3 -3
- package/dist/pptx/index.cjs +2888 -2880
- package/dist/pptx/index.mjs +2 -2
- package/dist/pptx/render/morph-predicates.d.ts.map +1 -1
- package/dist/pptx/theme/index.cjs +24 -16
- package/dist/pptx/theme/index.d.ts +1 -0
- package/dist/pptx/theme/index.d.ts.map +1 -1
- package/dist/pptx/theme/index.mjs +1 -1
- package/dist/pptx/theme/office-css.d.ts +6 -0
- package/dist/pptx/theme/office-css.d.ts.map +1 -0
- package/dist/pptx/web-components/chart-format-pane-styles.d.ts +1 -1
- package/dist/pptx/web-components/chart-format-pane-styles.d.ts.map +1 -1
- package/dist/pptx/web-components/control-styles.d.ts.map +1 -1
- package/dist/pptx/web-components/index.d.ts.map +1 -1
- package/dist/pptx/web-components/mobile-bar-styles.d.ts +2 -2
- package/dist/pptx/web-components/mobile-bar-styles.d.ts.map +1 -1
- package/dist/pptx/web-components/mobile-insert-styles.d.ts +1 -1
- package/dist/pptx/web-components/mobile-insert-styles.d.ts.map +1 -1
- package/dist/pptx/web-components/notes-toolbar-styles.d.ts +1 -1
- package/dist/pptx/web-components/notes-toolbar-styles.d.ts.map +1 -1
- package/dist/pptx/web-components/office-token-bridge.d.ts.map +1 -1
- package/dist/pptx/web-components/subtitle-settings-styles.d.ts +1 -1
- package/dist/pptx/web-components/subtitle-settings-styles.d.ts.map +1 -1
- package/dist/pptx/web-components/theme-editor-styles.d.ts +1 -1
- package/dist/pptx/web-components/theme-editor-styles.d.ts.map +1 -1
- package/dist/teams.js +2 -2
- package/dist/theme-bridge.d.ts +28 -0
- package/dist/theme-bridge.d.ts.map +1 -0
- package/dist/theme.d.ts +10 -3
- package/dist/theme.d.ts.map +1 -0
- package/dist/theme.js +1 -1
- package/dist/visio/building-blocks.d.ts +37 -0
- package/dist/visio/controller.d.ts +6 -0
- package/dist/visio/index.d.ts +1 -0
- package/dist/visio/styles/theme.d.ts +1 -1
- package/dist/visio/styles.d.ts +1 -1
- package/dist/visio/viewer-element.d.ts +2 -0
- package/dist/visio.js +7446 -7321
- package/dist/xlsx/building-blocks.d.ts +55 -0
- package/dist/xlsx/component.d.ts +3 -1
- package/dist/xlsx/dialogs/styles.d.ts +1 -1
- package/dist/xlsx/editor-core.d.ts +1 -0
- package/dist/xlsx/element-api.d.ts +6 -0
- package/dist/xlsx/formula-bar/styles.d.ts +1 -1
- package/dist/xlsx/grid/page-break-layer.d.ts +1 -1
- package/dist/xlsx/grid/styles.d.ts +1 -1
- package/dist/xlsx/index.d.ts +1 -0
- package/dist/xlsx/page-views/page-layout-css.d.ts +1 -1
- package/dist/xlsx/sheet-tabs/styles.d.ts +1 -1
- package/dist/xlsx/surface-shell.d.ts +3 -0
- package/dist/xlsx/theme/styles.d.ts +1 -4
- package/dist/xlsx.js +412 -268
- package/package.json +4 -4
- package/dist/chunk-7E3HU7RL.js +0 -123
- package/dist/pptx/chunk-BDXQX6RA.cjs +0 -373
- package/dist/pptx/chunk-ZAOD6O2D.mjs +0 -357
|
@@ -0,0 +1,1014 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var pptx = require('ooxml-core/pptx');
|
|
4
|
+
|
|
5
|
+
// src/pptx/theme/defaults.ts
|
|
6
|
+
var defaultThemeColors = {
|
|
7
|
+
background: "#030712",
|
|
8
|
+
// gray-950
|
|
9
|
+
foreground: "#f3f4f6",
|
|
10
|
+
// gray-100
|
|
11
|
+
card: "#111827",
|
|
12
|
+
// gray-900
|
|
13
|
+
cardForeground: "#f3f4f6",
|
|
14
|
+
// gray-100
|
|
15
|
+
popover: "#111827",
|
|
16
|
+
// gray-900
|
|
17
|
+
popoverForeground: "#f3f4f6",
|
|
18
|
+
// gray-100
|
|
19
|
+
primary: "#6366f1",
|
|
20
|
+
// indigo-500
|
|
21
|
+
primaryForeground: "#ffffff",
|
|
22
|
+
// white
|
|
23
|
+
secondary: "#1f2937",
|
|
24
|
+
// gray-800
|
|
25
|
+
secondaryForeground: "#f3f4f6",
|
|
26
|
+
// gray-100
|
|
27
|
+
muted: "#1f2937",
|
|
28
|
+
// gray-800
|
|
29
|
+
mutedForeground: "#9ca3af",
|
|
30
|
+
// gray-400
|
|
31
|
+
accent: "#1f2937",
|
|
32
|
+
// gray-800
|
|
33
|
+
accentForeground: "#f3f4f6",
|
|
34
|
+
// gray-100
|
|
35
|
+
destructive: "#ef4444",
|
|
36
|
+
// red-500
|
|
37
|
+
destructiveForeground: "#ffffff",
|
|
38
|
+
// white
|
|
39
|
+
border: "#374151",
|
|
40
|
+
// gray-700
|
|
41
|
+
input: "#374151",
|
|
42
|
+
// gray-700
|
|
43
|
+
ring: "#6366f1"
|
|
44
|
+
// indigo-500
|
|
45
|
+
};
|
|
46
|
+
var defaultRadius = "0.5rem";
|
|
47
|
+
var lightThemeColors = {
|
|
48
|
+
background: "#f8fafc",
|
|
49
|
+
// slate-50
|
|
50
|
+
foreground: "#0f172a",
|
|
51
|
+
// slate-900
|
|
52
|
+
card: "#ffffff",
|
|
53
|
+
cardForeground: "#0f172a",
|
|
54
|
+
// slate-900
|
|
55
|
+
popover: "#ffffff",
|
|
56
|
+
popoverForeground: "#0f172a",
|
|
57
|
+
// slate-900
|
|
58
|
+
primary: "#4f46e5",
|
|
59
|
+
// indigo-600
|
|
60
|
+
primaryForeground: "#ffffff",
|
|
61
|
+
secondary: "#f1f5f9",
|
|
62
|
+
// slate-100
|
|
63
|
+
secondaryForeground: "#0f172a",
|
|
64
|
+
// slate-900
|
|
65
|
+
muted: "#f1f5f9",
|
|
66
|
+
// slate-100
|
|
67
|
+
mutedForeground: "#64748b",
|
|
68
|
+
// slate-500
|
|
69
|
+
accent: "#f1f5f9",
|
|
70
|
+
// slate-100
|
|
71
|
+
accentForeground: "#0f172a",
|
|
72
|
+
// slate-900
|
|
73
|
+
destructive: "#dc2626",
|
|
74
|
+
// red-600
|
|
75
|
+
destructiveForeground: "#ffffff",
|
|
76
|
+
border: "#e2e8f0",
|
|
77
|
+
// slate-200
|
|
78
|
+
input: "#e2e8f0",
|
|
79
|
+
// slate-200
|
|
80
|
+
ring: "#4f46e5"
|
|
81
|
+
// indigo-600
|
|
82
|
+
};
|
|
83
|
+
var lightTheme = {
|
|
84
|
+
colors: lightThemeColors
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
// src/pptx/theme/css-vars.ts
|
|
88
|
+
var COLOR_KEY_TO_CSS = {
|
|
89
|
+
background: "background",
|
|
90
|
+
foreground: "foreground",
|
|
91
|
+
card: "card",
|
|
92
|
+
cardForeground: "card-foreground",
|
|
93
|
+
popover: "popover",
|
|
94
|
+
popoverForeground: "popover-foreground",
|
|
95
|
+
primary: "primary",
|
|
96
|
+
primaryForeground: "primary-foreground",
|
|
97
|
+
secondary: "secondary",
|
|
98
|
+
secondaryForeground: "secondary-foreground",
|
|
99
|
+
muted: "muted",
|
|
100
|
+
mutedForeground: "muted-foreground",
|
|
101
|
+
accent: "accent",
|
|
102
|
+
accentForeground: "accent-foreground",
|
|
103
|
+
destructive: "destructive",
|
|
104
|
+
destructiveForeground: "destructive-foreground",
|
|
105
|
+
border: "border",
|
|
106
|
+
input: "input",
|
|
107
|
+
ring: "ring"
|
|
108
|
+
};
|
|
109
|
+
var DERIVED_COLOR_TOKENS = [
|
|
110
|
+
{ source: "primary", cssSuffix: "inspector-active" },
|
|
111
|
+
{ source: "border", cssSuffix: "inspector-border" }
|
|
112
|
+
];
|
|
113
|
+
function themeToCssVars(theme, omitDefaults = false) {
|
|
114
|
+
const vars = {};
|
|
115
|
+
if (!theme) {
|
|
116
|
+
return vars;
|
|
117
|
+
}
|
|
118
|
+
const colors = theme.colors;
|
|
119
|
+
if (colors) {
|
|
120
|
+
for (const [key, cssSuffix] of Object.entries(COLOR_KEY_TO_CSS)) {
|
|
121
|
+
const value2 = colors[key];
|
|
122
|
+
if (value2 === void 0) {
|
|
123
|
+
continue;
|
|
124
|
+
}
|
|
125
|
+
if (omitDefaults && value2 === defaultThemeColors[key]) {
|
|
126
|
+
continue;
|
|
127
|
+
}
|
|
128
|
+
vars[`--pptx-${cssSuffix}`] = value2;
|
|
129
|
+
vars[`--color-${cssSuffix}`] = value2;
|
|
130
|
+
}
|
|
131
|
+
for (const { source, cssSuffix } of DERIVED_COLOR_TOKENS) {
|
|
132
|
+
const value2 = colors[source];
|
|
133
|
+
if (value2 === void 0) {
|
|
134
|
+
continue;
|
|
135
|
+
}
|
|
136
|
+
if (omitDefaults && value2 === defaultThemeColors[source]) {
|
|
137
|
+
continue;
|
|
138
|
+
}
|
|
139
|
+
vars[`--pptx-${cssSuffix}`] = value2;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
if (theme.radius !== void 0) {
|
|
143
|
+
if (!omitDefaults || theme.radius !== defaultRadius) {
|
|
144
|
+
vars["--pptx-radius"] = theme.radius;
|
|
145
|
+
const r = theme.radius;
|
|
146
|
+
vars["--radius-sm"] = `calc(${r} - 4px)`;
|
|
147
|
+
vars["--radius-md"] = `calc(${r} - 2px)`;
|
|
148
|
+
vars["--radius-lg"] = r;
|
|
149
|
+
vars["--radius-xl"] = `calc(${r} + 4px)`;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
if (theme.cssVars) {
|
|
153
|
+
for (const [key, value2] of Object.entries(theme.cssVars)) {
|
|
154
|
+
vars[key] = value2;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
return vars;
|
|
158
|
+
}
|
|
159
|
+
function defaultCssVars() {
|
|
160
|
+
const vars = {};
|
|
161
|
+
for (const [key, cssSuffix] of Object.entries(COLOR_KEY_TO_CSS)) {
|
|
162
|
+
vars[`--pptx-${cssSuffix}`] = defaultThemeColors[key];
|
|
163
|
+
}
|
|
164
|
+
for (const { source, cssSuffix } of DERIVED_COLOR_TOKENS) {
|
|
165
|
+
vars[`--pptx-${cssSuffix}`] = defaultThemeColors[source];
|
|
166
|
+
}
|
|
167
|
+
vars["--pptx-radius"] = defaultRadius;
|
|
168
|
+
return vars;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
// src/pptx/theme/presets.ts
|
|
172
|
+
var vermilionLightColors = {
|
|
173
|
+
background: "#fbfaf7",
|
|
174
|
+
foreground: "#1a1d21",
|
|
175
|
+
card: "#ffffff",
|
|
176
|
+
cardForeground: "#1a1d21",
|
|
177
|
+
popover: "#ffffff",
|
|
178
|
+
popoverForeground: "#1a1d21",
|
|
179
|
+
primary: "#c2431f",
|
|
180
|
+
primaryForeground: "#ffffff",
|
|
181
|
+
secondary: "#f2efe8",
|
|
182
|
+
secondaryForeground: "#1a1d21",
|
|
183
|
+
muted: "#f2efe8",
|
|
184
|
+
mutedForeground: "#5a626e",
|
|
185
|
+
accent: "rgba(194, 67, 31, 0.08)",
|
|
186
|
+
accentForeground: "#1a1d21",
|
|
187
|
+
destructive: "#dc2626",
|
|
188
|
+
destructiveForeground: "#ffffff",
|
|
189
|
+
border: "#e6e2d9",
|
|
190
|
+
input: "#e6e2d9",
|
|
191
|
+
ring: "#c2431f"
|
|
192
|
+
};
|
|
193
|
+
var vermilionDarkColors = {
|
|
194
|
+
background: "#0f1113",
|
|
195
|
+
foreground: "#f0efec",
|
|
196
|
+
card: "#171a1e",
|
|
197
|
+
cardForeground: "#f0efec",
|
|
198
|
+
popover: "#171a1e",
|
|
199
|
+
popoverForeground: "#f0efec",
|
|
200
|
+
primary: "#e86a40",
|
|
201
|
+
primaryForeground: "#ffffff",
|
|
202
|
+
secondary: "#1f242b",
|
|
203
|
+
secondaryForeground: "#f0efec",
|
|
204
|
+
muted: "#1f242b",
|
|
205
|
+
mutedForeground: "#9aa1ab",
|
|
206
|
+
accent: "rgba(232, 106, 64, 0.1)",
|
|
207
|
+
accentForeground: "#f0efec",
|
|
208
|
+
destructive: "#ef4444",
|
|
209
|
+
destructiveForeground: "#ffffff",
|
|
210
|
+
border: "#272c33",
|
|
211
|
+
input: "#272c33",
|
|
212
|
+
ring: "#e86a40"
|
|
213
|
+
};
|
|
214
|
+
var vermilionRadius = "0.375rem";
|
|
215
|
+
var vermilionLightTheme = {
|
|
216
|
+
colors: vermilionLightColors,
|
|
217
|
+
radius: vermilionRadius
|
|
218
|
+
};
|
|
219
|
+
var vermilionDarkTheme = {
|
|
220
|
+
colors: vermilionDarkColors,
|
|
221
|
+
radius: vermilionRadius
|
|
222
|
+
};
|
|
223
|
+
|
|
224
|
+
// src/pptx/theme/theme-catalog.ts
|
|
225
|
+
var THEME_CATALOG = [
|
|
226
|
+
{ key: "default", labelKey: "pptx.settings.theme.default", theme: void 0 },
|
|
227
|
+
{ key: "light", labelKey: "pptx.settings.theme.light", theme: lightTheme },
|
|
228
|
+
{
|
|
229
|
+
key: "vermilionLight",
|
|
230
|
+
labelKey: "pptx.settings.theme.vermilionLight",
|
|
231
|
+
theme: vermilionLightTheme
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
key: "vermilionDark",
|
|
235
|
+
labelKey: "pptx.settings.theme.vermilionDark",
|
|
236
|
+
theme: vermilionDarkTheme
|
|
237
|
+
}
|
|
238
|
+
];
|
|
239
|
+
function resolveThemeCatalogEntry(key, catalog = THEME_CATALOG) {
|
|
240
|
+
return catalog.find((entry) => entry.key === key)?.theme;
|
|
241
|
+
}
|
|
242
|
+
function corePreset(id) {
|
|
243
|
+
const preset = pptx.THEME_PRESETS.find((p) => p.id === id);
|
|
244
|
+
if (!preset) {
|
|
245
|
+
throw new Error(`theme-gallery-presets: core THEME_PRESETS is missing "${id}"`);
|
|
246
|
+
}
|
|
247
|
+
return preset;
|
|
248
|
+
}
|
|
249
|
+
var WISP_PRESET = {
|
|
250
|
+
id: "wisp",
|
|
251
|
+
name: "Wisp",
|
|
252
|
+
colorScheme: {
|
|
253
|
+
dk1: "#000000",
|
|
254
|
+
lt1: "#FFFFFF",
|
|
255
|
+
dk2: "#46393B",
|
|
256
|
+
lt2: "#E8DCD8",
|
|
257
|
+
accent1: "#A53010",
|
|
258
|
+
accent2: "#DE7E18",
|
|
259
|
+
accent3: "#9F8351",
|
|
260
|
+
accent4: "#728653",
|
|
261
|
+
accent5: "#92AA4C",
|
|
262
|
+
accent6: "#6AAC91",
|
|
263
|
+
hlink: "#FB4F14",
|
|
264
|
+
folHlink: "#E25839"
|
|
265
|
+
},
|
|
266
|
+
fontScheme: {
|
|
267
|
+
majorFont: { latin: "Century Gothic" },
|
|
268
|
+
minorFont: { latin: "Century Gothic" }
|
|
269
|
+
}
|
|
270
|
+
};
|
|
271
|
+
var BERLIN_PRESET = {
|
|
272
|
+
id: "berlin",
|
|
273
|
+
name: "Berlin",
|
|
274
|
+
colorScheme: {
|
|
275
|
+
dk1: "#000000",
|
|
276
|
+
lt1: "#FFFFFF",
|
|
277
|
+
dk2: "#3E5C61",
|
|
278
|
+
lt2: "#D5E0D0",
|
|
279
|
+
accent1: "#F09415",
|
|
280
|
+
accent2: "#C1B56B",
|
|
281
|
+
accent3: "#89C2A3",
|
|
282
|
+
accent4: "#729BBE",
|
|
283
|
+
accent5: "#9A90C2",
|
|
284
|
+
accent6: "#BE8DBE",
|
|
285
|
+
hlink: "#25A0DA",
|
|
286
|
+
folHlink: "#FF7F00"
|
|
287
|
+
},
|
|
288
|
+
fontScheme: {
|
|
289
|
+
majorFont: { latin: "Trebuchet MS" },
|
|
290
|
+
minorFont: { latin: "Trebuchet MS" }
|
|
291
|
+
}
|
|
292
|
+
};
|
|
293
|
+
var SLICE_PRESET = {
|
|
294
|
+
id: "slice",
|
|
295
|
+
name: "Slice",
|
|
296
|
+
colorScheme: {
|
|
297
|
+
dk1: "#000000",
|
|
298
|
+
lt1: "#FFFFFF",
|
|
299
|
+
dk2: "#2E3B4C",
|
|
300
|
+
lt2: "#C7CDD3",
|
|
301
|
+
accent1: "#E2751D",
|
|
302
|
+
accent2: "#C53B23",
|
|
303
|
+
accent3: "#A13D69",
|
|
304
|
+
accent4: "#58599E",
|
|
305
|
+
accent5: "#36749D",
|
|
306
|
+
accent6: "#4EA39A",
|
|
307
|
+
hlink: "#FD6B32",
|
|
308
|
+
folHlink: "#D14D0F"
|
|
309
|
+
},
|
|
310
|
+
fontScheme: {
|
|
311
|
+
majorFont: { latin: "Century Gothic" },
|
|
312
|
+
minorFont: { latin: "Century Gothic" }
|
|
313
|
+
}
|
|
314
|
+
};
|
|
315
|
+
var DIVIDEND_PRESET = {
|
|
316
|
+
id: "dividend",
|
|
317
|
+
name: "Dividend",
|
|
318
|
+
colorScheme: {
|
|
319
|
+
dk1: "#000000",
|
|
320
|
+
lt1: "#FFFFFF",
|
|
321
|
+
dk2: "#3D3D3D",
|
|
322
|
+
lt2: "#E1E1E1",
|
|
323
|
+
accent1: "#4D1434",
|
|
324
|
+
accent2: "#903163",
|
|
325
|
+
accent3: "#B2324B",
|
|
326
|
+
accent4: "#D34817",
|
|
327
|
+
accent5: "#E8971C",
|
|
328
|
+
accent6: "#FDCB00",
|
|
329
|
+
hlink: "#A03068",
|
|
330
|
+
folHlink: "#C34882"
|
|
331
|
+
},
|
|
332
|
+
fontScheme: {
|
|
333
|
+
majorFont: { latin: "Gill Sans MT" },
|
|
334
|
+
minorFont: { latin: "Gill Sans MT" }
|
|
335
|
+
}
|
|
336
|
+
};
|
|
337
|
+
var GALLERY_THEME_PRESETS = [
|
|
338
|
+
corePreset("office"),
|
|
339
|
+
corePreset("facet"),
|
|
340
|
+
corePreset("integral"),
|
|
341
|
+
corePreset("ion"),
|
|
342
|
+
corePreset("retrospect"),
|
|
343
|
+
corePreset("organic"),
|
|
344
|
+
WISP_PRESET,
|
|
345
|
+
BERLIN_PRESET,
|
|
346
|
+
SLICE_PRESET,
|
|
347
|
+
DIVIDEND_PRESET
|
|
348
|
+
];
|
|
349
|
+
function activeGalleryThemePreset(theme) {
|
|
350
|
+
if (!theme) {
|
|
351
|
+
return void 0;
|
|
352
|
+
}
|
|
353
|
+
const colorScheme = theme.colorScheme;
|
|
354
|
+
return colorScheme && GALLERY_THEME_PRESETS.find(
|
|
355
|
+
(preset) => pptx.themeColorSchemesEqual(colorScheme, preset.colorScheme)
|
|
356
|
+
) || GALLERY_THEME_PRESETS.find((preset) => preset.name === theme.name);
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
// src/tokens.ts
|
|
360
|
+
var OFFICE_TOKENS = {
|
|
361
|
+
// Colour: semantic
|
|
362
|
+
"--office-foreground": "#1f2937",
|
|
363
|
+
"--office-muted-foreground": "#6b7280",
|
|
364
|
+
"--office-background": "#ffffff",
|
|
365
|
+
"--office-surface": "#f3f4f6",
|
|
366
|
+
"--office-selected": "#e5e7eb",
|
|
367
|
+
"--office-border": "#d1d5db",
|
|
368
|
+
"--office-accent": "#2563eb",
|
|
369
|
+
"--office-accent-foreground": "#ffffff",
|
|
370
|
+
"--office-ring": "#2563eb",
|
|
371
|
+
"--office-danger": "#b91c1c",
|
|
372
|
+
"--office-danger-foreground": "#ffffff",
|
|
373
|
+
"--office-warning": "#d97706",
|
|
374
|
+
"--office-warning-foreground": "#ffffff",
|
|
375
|
+
"--office-info": "#3b82f6",
|
|
376
|
+
"--office-popover": "var(--office-background, #ffffff)",
|
|
377
|
+
"--office-popover-foreground": "var(--office-foreground, #1f2937)",
|
|
378
|
+
"--office-overlay": "rgb(0 0 0 / 40%)",
|
|
379
|
+
"--office-notice-background": "#fef3c7",
|
|
380
|
+
"--office-notice-foreground": "#78350f",
|
|
381
|
+
"--office-notice-border": "rgb(180 83 9 / 30%)",
|
|
382
|
+
"--office-notice-accent": "#d97706",
|
|
383
|
+
"--office-keytip-background": "#ffffff",
|
|
384
|
+
"--office-keytip-foreground": "#1f1f1f",
|
|
385
|
+
"--office-keytip-border": "#8a8886",
|
|
386
|
+
"--office-highlight": "#dc2626",
|
|
387
|
+
"--office-paper": "#ffffff",
|
|
388
|
+
"--office-accent-hover": "color-mix(in srgb, var(--office-accent, #2563eb) 85%, #000)",
|
|
389
|
+
// Typography
|
|
390
|
+
"--office-font": 'system-ui, -apple-system, "Segoe UI", sans-serif',
|
|
391
|
+
"--office-font-size-3xs": "9px",
|
|
392
|
+
"--office-font-size-2xs": "10px",
|
|
393
|
+
"--office-font-size-xs": "11px",
|
|
394
|
+
"--office-font-size-sm": "12px",
|
|
395
|
+
"--office-font-size": "13px",
|
|
396
|
+
"--office-font-size-md": "14px",
|
|
397
|
+
"--office-font-size-lg": "15px",
|
|
398
|
+
"--office-font-size-xl": "18px",
|
|
399
|
+
/** Smallest text size that keeps mobile browsers from zooming a focused field. */
|
|
400
|
+
"--office-font-size-touch": "16px",
|
|
401
|
+
"--office-font-weight-medium": "500",
|
|
402
|
+
"--office-font-weight-bold": "600",
|
|
403
|
+
"--office-line-height": "1.4",
|
|
404
|
+
"--office-line-height-tight": "1.2",
|
|
405
|
+
"--office-icon-stroke": "1.5",
|
|
406
|
+
// Space
|
|
407
|
+
"--office-space-px": "1px",
|
|
408
|
+
"--office-space-0": "2px",
|
|
409
|
+
"--office-space-1": "4px",
|
|
410
|
+
"--office-space-1-5": "6px",
|
|
411
|
+
"--office-space-2": "8px",
|
|
412
|
+
"--office-space-2-5": "10px",
|
|
413
|
+
"--office-space-3": "12px",
|
|
414
|
+
"--office-space-3-5": "14px",
|
|
415
|
+
"--office-space-4": "16px",
|
|
416
|
+
"--office-space-5": "20px",
|
|
417
|
+
"--office-space-6": "24px",
|
|
418
|
+
// Shape
|
|
419
|
+
"--office-border-width": "1px",
|
|
420
|
+
"--office-border-width-thick": "2px",
|
|
421
|
+
"--office-radius-xs": "2px",
|
|
422
|
+
"--office-radius-sm": "3px",
|
|
423
|
+
"--office-radius": "4px",
|
|
424
|
+
"--office-radius-md": "6px",
|
|
425
|
+
"--office-radius-lg": "8px",
|
|
426
|
+
"--office-radius-full": "999px",
|
|
427
|
+
// Focus
|
|
428
|
+
"--office-focus-width": "2px",
|
|
429
|
+
"--office-focus-offset": "2px",
|
|
430
|
+
// Sizes
|
|
431
|
+
"--office-target-size": "28px",
|
|
432
|
+
"--office-target-size-touch": "44px",
|
|
433
|
+
/** Minimum pointer target on touch layouts. */
|
|
434
|
+
"--office-touch-target": "36px",
|
|
435
|
+
"--office-control-height": "24px",
|
|
436
|
+
"--office-control-height-md": "28px",
|
|
437
|
+
"--office-control-height-lg": "32px",
|
|
438
|
+
"--office-input-height": "26px",
|
|
439
|
+
"--office-control-height-xs": "22px",
|
|
440
|
+
"--office-icon-size-xs": "10px",
|
|
441
|
+
"--office-icon-size-sm": "12px",
|
|
442
|
+
"--office-icon-size": "14px",
|
|
443
|
+
"--office-icon-size-md": "16px",
|
|
444
|
+
"--office-icon-size-ml": "18px",
|
|
445
|
+
"--office-icon-size-lg": "20px",
|
|
446
|
+
// Elevation and layering
|
|
447
|
+
"--office-shadow-sm": "0 1px 3px rgb(0 0 0 / 20%)",
|
|
448
|
+
"--office-shadow": "0 6px 20px rgb(0 0 0 / 18%)",
|
|
449
|
+
"--office-shadow-lg": "0 10px 25px rgb(0 0 0 / 20%)",
|
|
450
|
+
"--office-z-popover": "1100",
|
|
451
|
+
"--office-z-dialog": "1000",
|
|
452
|
+
"--office-z-backstage": "30",
|
|
453
|
+
// Motion
|
|
454
|
+
"--office-duration-fast": ".12s",
|
|
455
|
+
"--office-duration": ".15s",
|
|
456
|
+
"--office-duration-spin": ".8s",
|
|
457
|
+
// Component: fields
|
|
458
|
+
"--office-field-height": "28px",
|
|
459
|
+
"--office-field-height-lg": "40px",
|
|
460
|
+
"--office-field-radius": "5px",
|
|
461
|
+
"--office-field-border": "var(--office-border, #d1d5db)",
|
|
462
|
+
"--office-field-border-focus": "var(--office-ring, #2563eb)",
|
|
463
|
+
"--office-field-background": "var(--office-background, #ffffff)",
|
|
464
|
+
"--office-field-foreground": "var(--office-foreground, #1f2937)",
|
|
465
|
+
"--office-field-placeholder": "var(--office-muted-foreground, #6b7280)",
|
|
466
|
+
// Component: checkbox, radio, switch
|
|
467
|
+
"--office-checkbox-size": "16px",
|
|
468
|
+
"--office-checkbox-size-touch": "22px",
|
|
469
|
+
"--office-checkbox-radius": "3px",
|
|
470
|
+
"--office-checkbox-border": "var(--office-border, #d1d5db)",
|
|
471
|
+
"--office-checkbox-background": "var(--office-background, #ffffff)",
|
|
472
|
+
"--office-checkbox-accent": "var(--office-accent, #2563eb)",
|
|
473
|
+
"--office-checkbox-accent-foreground": "var(--office-accent-foreground, #ffffff)",
|
|
474
|
+
"--office-radio-dot-size": "8px",
|
|
475
|
+
"--office-radio-dot-size-touch": "12px",
|
|
476
|
+
"--office-switch-width": "32px",
|
|
477
|
+
"--office-switch-height": "18px",
|
|
478
|
+
"--office-switch-width-touch": "44px",
|
|
479
|
+
"--office-switch-height-touch": "24px",
|
|
480
|
+
"--office-switch-border-width": "1px",
|
|
481
|
+
"--office-switch-knob-size": "12px",
|
|
482
|
+
"--office-switch-knob-size-touch": "18px",
|
|
483
|
+
"--office-switch-knob-offset": "2px",
|
|
484
|
+
"--office-switch-border": "var(--office-border, #d1d5db)",
|
|
485
|
+
"--office-switch-track": "var(--office-surface, #f3f4f6)",
|
|
486
|
+
"--office-switch-track-on": "var(--office-accent, #2563eb)",
|
|
487
|
+
"--office-switch-thumb": "var(--office-foreground, #1f2937)",
|
|
488
|
+
"--office-switch-thumb-on": "var(--office-accent-foreground, #ffffff)",
|
|
489
|
+
// Component: ribbon, status bar, tabs
|
|
490
|
+
"--office-ribbon-tab-height": "35px",
|
|
491
|
+
"--office-ribbon-contextual": "var(--office-accent, #2563eb)",
|
|
492
|
+
"--office-ribbon-group-gap": "2px",
|
|
493
|
+
"--office-ribbon-group-height": "78px",
|
|
494
|
+
"--office-ribbon-group-padding": "4px 8px 2px",
|
|
495
|
+
"--office-ribbon-separator-inset": "0px",
|
|
496
|
+
"--office-ribbon-separator": "color-mix(in srgb, var(--office-border, #d1d5db) 60%, transparent)",
|
|
497
|
+
"--office-ribbon-caption-size": "10px",
|
|
498
|
+
"--office-ribbon-caption-padding": "2px 0 0",
|
|
499
|
+
"--office-launcher-inset-end": "-6px",
|
|
500
|
+
"--office-launcher-inset-bottom": "-1px",
|
|
501
|
+
"--office-ribbon-compact-row-max": "36px",
|
|
502
|
+
"--office-ribbon-stack-max-height": "80px",
|
|
503
|
+
"--office-ribbon-collapse-x": "8px",
|
|
504
|
+
"--office-ribbon-collapse-y": "120px",
|
|
505
|
+
"--office-command-icon-color": "currentColor",
|
|
506
|
+
"--office-command-large-height": "66px",
|
|
507
|
+
"--office-command-large-min-width": "48px",
|
|
508
|
+
"--office-command-large-max-width": "80px",
|
|
509
|
+
"--office-command-large-icon": "32px",
|
|
510
|
+
"--office-command-small-icon": "16px",
|
|
511
|
+
"--office-command-tall-height": "62px",
|
|
512
|
+
"--office-command-tall-min-width": "40px",
|
|
513
|
+
"--office-command-tall-icon": "30px",
|
|
514
|
+
"--office-command-active": "color-mix(in srgb, var(--office-accent, #2563eb) 15%, transparent)",
|
|
515
|
+
"--office-collapsed-group-min-width": "56px",
|
|
516
|
+
"--office-ribbon-caption-line-height": "12px",
|
|
517
|
+
"--office-ribbon-row-height": "22px",
|
|
518
|
+
"--office-ribbon-file-min-width": "52px",
|
|
519
|
+
"--office-launcher-width": "16px",
|
|
520
|
+
"--office-launcher-height": "14px",
|
|
521
|
+
"--office-tab-indicator-width": "2.5px",
|
|
522
|
+
"--office-status-bar-height": "24px",
|
|
523
|
+
"--office-status-bar-separator-opacity": "1",
|
|
524
|
+
"--office-tab-height": "28px",
|
|
525
|
+
"--office-tab-max-width": "220px",
|
|
526
|
+
"--office-zoom-slider-width": "120px",
|
|
527
|
+
"--office-zoom-slider-min-width": "48px",
|
|
528
|
+
"--office-zoom-value-width": "40px",
|
|
529
|
+
// Component: panels and dialogs
|
|
530
|
+
"--office-dialog-width": "auto",
|
|
531
|
+
"--office-dialog-max-width": "min(640px, 100vw)",
|
|
532
|
+
"--office-dialog-max-height": "90vh",
|
|
533
|
+
"--office-dialog-min-width": "min(320px, 100vw)",
|
|
534
|
+
"--office-dialog-button-min-width": "76px",
|
|
535
|
+
"--office-options-width": "min(728px, 92vw)",
|
|
536
|
+
"--office-options-nav-width": "172px",
|
|
537
|
+
"--office-options-height": "510px",
|
|
538
|
+
"--office-options-chrome-height": "130px",
|
|
539
|
+
"--office-options-text-width": "180px",
|
|
540
|
+
"--office-options-row-height": "30px",
|
|
541
|
+
"--office-options-number-width": "112px",
|
|
542
|
+
"--office-options-check-size": "16px",
|
|
543
|
+
"--office-info-size": "15px",
|
|
544
|
+
"--office-selection-bar-width": "3px",
|
|
545
|
+
"--office-backstage-nav-width": "200px",
|
|
546
|
+
"--office-backstage-nav-background": "var(--office-accent, #2563eb)",
|
|
547
|
+
"--office-backstage-nav-foreground": "var(--office-accent-foreground, #ffffff)",
|
|
548
|
+
"--office-backstage-item-hover": "rgb(0 0 0 / 22%)",
|
|
549
|
+
"--office-backstage-padding": "28px 40px",
|
|
550
|
+
"--office-backstage-back-size": "36px",
|
|
551
|
+
"--office-backstage-item-height": "38px",
|
|
552
|
+
"--office-menu-min-width": "180px",
|
|
553
|
+
"--office-menu-max-height": "60vh",
|
|
554
|
+
"--office-context-menu-min-width": "200px",
|
|
555
|
+
"--office-search-popup-min-width": "240px",
|
|
556
|
+
"--office-search-popup-max-height": "320px",
|
|
557
|
+
"--office-select-max-height": "240px",
|
|
558
|
+
"--office-select-background": "var(--office-background, #ffffff)",
|
|
559
|
+
"--office-select-menu-min-width": "90px",
|
|
560
|
+
"--office-select-option-active": "color-mix(in srgb, var(--office-accent, #2563eb) 20%, var(--office-popover, #ffffff))",
|
|
561
|
+
"--office-select-ribbon-menu-width": "192px",
|
|
562
|
+
"--office-font-picker-max-height": "320px",
|
|
563
|
+
"--office-font-picker-width": "256px",
|
|
564
|
+
"--office-chevron-size": "6px",
|
|
565
|
+
"--office-ribbon-combo-height": "28px",
|
|
566
|
+
"--office-ribbon-icon-select-width": "36px",
|
|
567
|
+
"--office-search-width": "320px",
|
|
568
|
+
"--office-print-preview-width": "420px",
|
|
569
|
+
"--office-find-max-width": "640px",
|
|
570
|
+
"--office-find-bar-height": "40px",
|
|
571
|
+
"--office-find-replace-field-min-width": "120px",
|
|
572
|
+
"--office-find-replace-select-min-width": "150px",
|
|
573
|
+
"--office-ruler-size": "18px",
|
|
574
|
+
"--office-avatar-size": "48px",
|
|
575
|
+
"--office-avatar-color": "var(--office-muted-foreground, #6b7280)",
|
|
576
|
+
"--office-toast-width": "360px",
|
|
577
|
+
"--office-comments-pane-width": "300px",
|
|
578
|
+
"--office-comment-avatar-size": "24px",
|
|
579
|
+
"--office-account-field-width": "320px",
|
|
580
|
+
// Component: galleries
|
|
581
|
+
"--office-gallery-trigger-height": "24px",
|
|
582
|
+
"--office-gallery-strip-background": "color-mix(in srgb, var(--office-surface, #f3f4f6) 30%, transparent)",
|
|
583
|
+
"--office-gallery-command-min-width": "54px",
|
|
584
|
+
"--office-gallery-command-max-width": "78px",
|
|
585
|
+
"--office-gallery-command-height": "58px",
|
|
586
|
+
"--office-gallery-command-icon": "24px",
|
|
587
|
+
"--office-gallery-popup-max-height": "65vh",
|
|
588
|
+
// Component: title bar
|
|
589
|
+
"--office-title-bar-height": "36px",
|
|
590
|
+
"--office-title-bar-below-height": "28px",
|
|
591
|
+
"--office-title-bar-background": "var(--office-surface, #f3f4f6)",
|
|
592
|
+
"--office-title-bar-foreground": "var(--office-foreground, #1f2937)",
|
|
593
|
+
"--office-title-bar-border": "var(--office-border, #d1d5db)",
|
|
594
|
+
"--office-title-bar-mark-size": "20px",
|
|
595
|
+
"--office-title-bar-mark-background": "var(--office-accent, #2563eb)",
|
|
596
|
+
"--office-title-bar-mark-foreground": "var(--office-accent-foreground, #ffffff)",
|
|
597
|
+
"--office-title-bar-name-foreground": "var(--office-title-bar-foreground, var(--office-foreground, #1f2937))",
|
|
598
|
+
"--office-title-bar-result-selected": "var(--office-selected, #e5e7eb)",
|
|
599
|
+
"--office-title-bar-name-max-width": "240px",
|
|
600
|
+
"--office-title-bar-name-max-width-narrow": "140px",
|
|
601
|
+
"--office-title-bar-search-max-width": "448px",
|
|
602
|
+
"--office-title-bar-results-max-height": "256px",
|
|
603
|
+
// Component: team workspace (a Teams-like surface)
|
|
604
|
+
"--office-teams-brand": "#5b5fc7",
|
|
605
|
+
"--office-teams-brand-hover": "#4f52b2",
|
|
606
|
+
"--office-teams-brand-pressed": "#3f4296",
|
|
607
|
+
"--office-teams-brand-subtle": "#e8ebfa",
|
|
608
|
+
"--office-teams-brand-foreground": "#ffffff",
|
|
609
|
+
"--office-teams-rail": "#ebebeb",
|
|
610
|
+
"--office-teams-panel": "#f5f5f5",
|
|
611
|
+
"--office-teams-bubble": "#f5f5f5",
|
|
612
|
+
"--office-teams-bubble-own": "#e8ebfa",
|
|
613
|
+
"--office-teams-divider": "#e0e0e0",
|
|
614
|
+
"--office-teams-text-subtle": "#616161",
|
|
615
|
+
"--office-teams-message-gap": "var(--office-space-3)",
|
|
616
|
+
"--office-teams-message-padding": "var(--office-space-2) var(--office-space-3)",
|
|
617
|
+
"--office-presence-available": "#6bb700",
|
|
618
|
+
"--office-presence-busy": "#c50f1f",
|
|
619
|
+
"--office-presence-away": "#eaa300",
|
|
620
|
+
"--office-presence-offline": "#8a8886",
|
|
621
|
+
"--office-file-docx": "#2b579a",
|
|
622
|
+
"--office-file-xlsx": "#217346",
|
|
623
|
+
"--office-file-pptx": "#c43e1c",
|
|
624
|
+
"--office-file-vsdx": "#3955a3",
|
|
625
|
+
"--office-file-other": "#6b7280",
|
|
626
|
+
"--office-call-background": "#292929",
|
|
627
|
+
"--office-call-tile": "#3d3d3d",
|
|
628
|
+
"--office-call-foreground": "#ffffff",
|
|
629
|
+
"--office-call-muted-foreground": "#c8c8c8",
|
|
630
|
+
"--office-call-control": "#3d3d3d",
|
|
631
|
+
"--office-call-control-hover": "#525252",
|
|
632
|
+
"--office-call-danger": "#c4314b",
|
|
633
|
+
"--office-call-danger-hover": "#a72a40",
|
|
634
|
+
"--office-call-live": "#6bb700",
|
|
635
|
+
"--office-call-scrim": "rgb(0 0 0 / 60%)",
|
|
636
|
+
"--office-shadow-teams": "0 2px 4px rgb(0 0 0 / 14%), 0 0 2px rgb(0 0 0 / 12%)"
|
|
637
|
+
};
|
|
638
|
+
function tok(name) {
|
|
639
|
+
return `var(${name}, ${OFFICE_TOKENS[name]})`;
|
|
640
|
+
}
|
|
641
|
+
`outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: ${tok("--office-focus-offset")};`;
|
|
642
|
+
var COMPACT = "(max-width: 767px)";
|
|
643
|
+
var TOUCH = `(pointer: coarse), ${COMPACT}`;
|
|
644
|
+
|
|
645
|
+
// src/theme-bridge.ts
|
|
646
|
+
var LEGACY_OFFICE_THEME_TOKENS = {
|
|
647
|
+
background: "--office-background",
|
|
648
|
+
foreground: "--office-foreground",
|
|
649
|
+
card: "--office-surface",
|
|
650
|
+
"card-foreground": "--office-foreground",
|
|
651
|
+
popover: "--office-popover",
|
|
652
|
+
"popover-foreground": "--office-popover-foreground",
|
|
653
|
+
primary: "--office-accent",
|
|
654
|
+
"primary-foreground": "--office-accent-foreground",
|
|
655
|
+
secondary: "--office-surface",
|
|
656
|
+
"secondary-foreground": "--office-foreground",
|
|
657
|
+
muted: "--office-surface",
|
|
658
|
+
"muted-foreground": "--office-muted-foreground",
|
|
659
|
+
accent: "--office-selected",
|
|
660
|
+
"accent-foreground": "--office-foreground",
|
|
661
|
+
destructive: "--office-danger",
|
|
662
|
+
"destructive-foreground": "--office-danger-foreground",
|
|
663
|
+
border: "--office-border",
|
|
664
|
+
input: "--office-border",
|
|
665
|
+
ring: "--office-ring",
|
|
666
|
+
radius: "--office-radius",
|
|
667
|
+
font: "--office-font"
|
|
668
|
+
};
|
|
669
|
+
function legacyThemeAliases(selector, prefix, privatePrefix) {
|
|
670
|
+
return `${selector} {
|
|
671
|
+
${Object.entries(LEGACY_OFFICE_THEME_TOKENS).map(
|
|
672
|
+
([name, canonical]) => `${privatePrefix}${name}: var(${prefix}${name}, var(${canonical}, ${OFFICE_TOKENS[canonical]}));`
|
|
673
|
+
).join("\n")}
|
|
674
|
+
}`;
|
|
675
|
+
}
|
|
676
|
+
function legacyThemeBridge(selector, privatePrefix) {
|
|
677
|
+
return shadcnBridge(selector, privatePrefix, {
|
|
678
|
+
extra: {
|
|
679
|
+
"--office-font": `var(${privatePrefix}font)`,
|
|
680
|
+
"--office-radius": `var(${privatePrefix}radius)`
|
|
681
|
+
}
|
|
682
|
+
});
|
|
683
|
+
}
|
|
684
|
+
var SHADCN_NAMES = [
|
|
685
|
+
"foreground",
|
|
686
|
+
"muted-foreground",
|
|
687
|
+
"background",
|
|
688
|
+
"card",
|
|
689
|
+
"accent",
|
|
690
|
+
"border",
|
|
691
|
+
"primary",
|
|
692
|
+
"primary-foreground",
|
|
693
|
+
"ring",
|
|
694
|
+
"popover",
|
|
695
|
+
"popover-foreground",
|
|
696
|
+
"destructive",
|
|
697
|
+
"destructive-foreground"
|
|
698
|
+
].map((name) => {
|
|
699
|
+
const token = LEGACY_OFFICE_THEME_TOKENS[name];
|
|
700
|
+
return name === "popover-foreground" ? [token, name, "foreground"] : [token, name];
|
|
701
|
+
});
|
|
702
|
+
var reads = (value2) => [...value2.matchAll(/var\((--office-[\w-]+)/g)].map((m) => m[1]);
|
|
703
|
+
function derivedTokens(bridged) {
|
|
704
|
+
const derived = /* @__PURE__ */ new Map();
|
|
705
|
+
let grew = true;
|
|
706
|
+
while (grew) {
|
|
707
|
+
grew = false;
|
|
708
|
+
for (const [name, value2] of Object.entries(OFFICE_TOKENS)) {
|
|
709
|
+
if (bridged.has(name) || derived.has(name)) continue;
|
|
710
|
+
if (reads(value2).some((token) => bridged.has(token) || derived.has(token))) {
|
|
711
|
+
derived.set(name, value2);
|
|
712
|
+
grew = true;
|
|
713
|
+
}
|
|
714
|
+
}
|
|
715
|
+
}
|
|
716
|
+
return [...derived];
|
|
717
|
+
}
|
|
718
|
+
function themeBridge(selector, map) {
|
|
719
|
+
const mapped = Object.entries(map).filter((entry) => !!entry[1]);
|
|
720
|
+
const lines = [...mapped, ...derivedTokens(new Set(mapped.map(([name]) => name)))].map(
|
|
721
|
+
([name, value2]) => ` ${name}: ${value2};`
|
|
722
|
+
);
|
|
723
|
+
return `${selector} {
|
|
724
|
+
${lines.join("\n")}
|
|
725
|
+
}
|
|
726
|
+
`;
|
|
727
|
+
}
|
|
728
|
+
function shadcnBridge(selector, prefix, options = {}) {
|
|
729
|
+
const map = {};
|
|
730
|
+
for (const [token, name, fallbackName] of SHADCN_NAMES) {
|
|
731
|
+
const fallback = options.fallbacks?.[name];
|
|
732
|
+
const inner = fallbackName ? `var(${prefix}${fallbackName})` : fallback;
|
|
733
|
+
map[token] = `var(${prefix}${name}${inner ? `, ${inner}` : ""})`;
|
|
734
|
+
}
|
|
735
|
+
return themeBridge(selector, { ...map, ...options.extra });
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
// src/building-block-styles.ts
|
|
739
|
+
var value = (name) => `var(${name}, ${OFFICE_TOKENS[name]})`;
|
|
740
|
+
var palette = {
|
|
741
|
+
foreground: "--office-foreground",
|
|
742
|
+
background: "--office-background",
|
|
743
|
+
surface: "--office-surface",
|
|
744
|
+
border: "--office-border",
|
|
745
|
+
accent: "--office-accent",
|
|
746
|
+
selected: "--office-selected",
|
|
747
|
+
ring: "--office-ring",
|
|
748
|
+
font: "--office-font",
|
|
749
|
+
radius: "--office-radius"
|
|
750
|
+
};
|
|
751
|
+
function productAliases(product) {
|
|
752
|
+
const names = product === "visio" ? {
|
|
753
|
+
foreground: "ink",
|
|
754
|
+
background: "surface",
|
|
755
|
+
surface: "surface",
|
|
756
|
+
border: "border",
|
|
757
|
+
accent: "accent",
|
|
758
|
+
selected: "accent-soft",
|
|
759
|
+
ring: "focus",
|
|
760
|
+
font: "font",
|
|
761
|
+
radius: "radius"
|
|
762
|
+
} : {
|
|
763
|
+
foreground: "foreground",
|
|
764
|
+
background: "background",
|
|
765
|
+
surface: "card",
|
|
766
|
+
border: "border",
|
|
767
|
+
accent: "primary",
|
|
768
|
+
selected: "accent",
|
|
769
|
+
ring: "ring",
|
|
770
|
+
font: "font",
|
|
771
|
+
radius: "radius"
|
|
772
|
+
};
|
|
773
|
+
const prefix = { docx: "--dve-", xlsx: "--xve-", visio: "--vv-", pptx: "--pptx-" }[product];
|
|
774
|
+
return `:where([data-office-block][data-office-product="${product}"]) {
|
|
775
|
+
${Object.entries(palette).map(
|
|
776
|
+
([key, token]) => `--_office-block-${key}: var(${prefix}${names[key]}, ${value(token)});`
|
|
777
|
+
).join("\n")}
|
|
778
|
+
}`;
|
|
779
|
+
}
|
|
780
|
+
var BUILDING_BLOCKS_CSS = `
|
|
781
|
+
:where([data-office-block]) {
|
|
782
|
+
${Object.entries(palette).map(([key, token]) => `--_office-block-${key}: ${value(token)};`).join("\n")}
|
|
783
|
+
box-sizing: border-box;
|
|
784
|
+
color: var(--_office-block-foreground);
|
|
785
|
+
background: var(--_office-block-surface);
|
|
786
|
+
font-family: var(--_office-block-font);
|
|
787
|
+
font-size: ${value("--office-font-size")};
|
|
788
|
+
line-height: ${value("--office-line-height")};
|
|
789
|
+
}
|
|
790
|
+
${["docx", "xlsx", "visio", "pptx"].map(productAliases).join("\n")}
|
|
791
|
+
:where([data-office-block="toolbar"], [data-office-block="formula-bar"], [data-office-block="tabs"]:not(select)) {
|
|
792
|
+
display: flex;
|
|
793
|
+
flex-wrap: wrap;
|
|
794
|
+
align-items: center;
|
|
795
|
+
gap: ${value("--office-space-1")};
|
|
796
|
+
padding: ${value("--office-space-1")};
|
|
797
|
+
border: ${value("--office-border-width")} solid var(--_office-block-border);
|
|
798
|
+
border-radius: var(--_office-block-radius);
|
|
799
|
+
}
|
|
800
|
+
:where([data-office-block] button, [data-office-block] input, [data-office-block] select,
|
|
801
|
+
button[data-office-block], input[data-office-block], select[data-office-block]) {
|
|
802
|
+
box-sizing: border-box;
|
|
803
|
+
font-family: var(--_office-block-font);
|
|
804
|
+
font-size: ${value("--office-font-size")};
|
|
805
|
+
line-height: ${value("--office-line-height")};
|
|
806
|
+
color: var(--_office-block-foreground);
|
|
807
|
+
background: var(--_office-block-background);
|
|
808
|
+
border: ${value("--office-border-width")} solid var(--_office-block-border);
|
|
809
|
+
border-radius: var(--_office-block-radius);
|
|
810
|
+
min-height: ${value("--office-target-size")};
|
|
811
|
+
padding: ${value("--office-space-1")} ${value("--office-space-2")};
|
|
812
|
+
}
|
|
813
|
+
:where([data-office-block] button, button[data-office-block]) { cursor: pointer; }
|
|
814
|
+
:where([data-office-block] button:hover:not(:disabled)) { background: var(--_office-block-selected); }
|
|
815
|
+
:where([data-office-block] [aria-pressed="true"], [data-office-block] [aria-pressed="mixed"],
|
|
816
|
+
[data-office-block] [aria-selected="true"]) {
|
|
817
|
+
background: var(--_office-block-selected);
|
|
818
|
+
border-color: var(--_office-block-accent);
|
|
819
|
+
}
|
|
820
|
+
:where([data-office-block] :focus-visible, [data-office-block]:focus-visible) {
|
|
821
|
+
outline: ${value("--office-focus-width")} solid var(--_office-block-ring);
|
|
822
|
+
outline-offset: ${value("--office-focus-offset")};
|
|
823
|
+
}
|
|
824
|
+
:where([data-office-block] :disabled, [data-office-block]:disabled) { opacity: .55; cursor: default; }
|
|
825
|
+
:where([data-office-block] [aria-invalid="true"]) { border-color: ${value("--office-danger")}; }
|
|
826
|
+
:where([data-office-block="formula-bar"] input:last-child) { flex: 1; min-width: 8em; }
|
|
827
|
+
:where([data-office-block="inspector"]) { padding: ${value("--office-space-2")}; }
|
|
828
|
+
:where([data-office-block="inspector"] dl) { display: grid; grid-template-columns: auto 1fr; gap: ${value("--office-space-1")}; }
|
|
829
|
+
:where([data-office-block="inspector"] dt) { font-weight: ${value("--office-font-weight-bold")}; }
|
|
830
|
+
:where([data-office-block="inspector"] dd) { margin: 0; overflow-wrap: anywhere; }
|
|
831
|
+
:where([data-office-block="inspector"] a) { color: var(--_office-block-accent); }
|
|
832
|
+
`;
|
|
833
|
+
|
|
834
|
+
// src/theme.ts
|
|
835
|
+
var THEME_STYLE_ID = "office-ui-theme";
|
|
836
|
+
var DARK = `
|
|
837
|
+
--office-foreground: #f9fafb;
|
|
838
|
+
--office-muted-foreground: #9ca3af;
|
|
839
|
+
--office-background: #111827;
|
|
840
|
+
--office-surface: #1f2937;
|
|
841
|
+
--office-border: #374151;
|
|
842
|
+
--office-accent: #6366f1;
|
|
843
|
+
--office-ring: #818cf8;
|
|
844
|
+
--office-danger: #f87171;
|
|
845
|
+
--office-selected: #374151;
|
|
846
|
+
--office-notice-background: rgb(120 53 15 / 20%);
|
|
847
|
+
--office-notice-foreground: #fde68a;
|
|
848
|
+
--office-notice-accent: #fbbf24;
|
|
849
|
+
--office-info: #60a5fa;
|
|
850
|
+
--office-warning: #f59e0b;
|
|
851
|
+
--office-teams-brand: #7f85f5;
|
|
852
|
+
--office-teams-brand-hover: #96a0ff;
|
|
853
|
+
--office-teams-brand-subtle: #2f2f4a;
|
|
854
|
+
--office-teams-rail: #141414;
|
|
855
|
+
--office-teams-panel: #1f1f1f;
|
|
856
|
+
--office-teams-bubble: #2d2d2d;
|
|
857
|
+
--office-teams-bubble-own: #2f2f4a;
|
|
858
|
+
--office-teams-divider: #3d3d3d;
|
|
859
|
+
--office-teams-text-subtle: #adadad;
|
|
860
|
+
--office-shadow: 0 6px 20px rgb(0 0 0 / 45%);
|
|
861
|
+
--office-shadow-lg: 0 10px 25px rgb(0 0 0 / 45%);`;
|
|
862
|
+
var LIGHT = Object.entries(OFFICE_TOKENS).map(([name, value2]) => ` ${name}: ${value2};`).join("\n");
|
|
863
|
+
var darkEntries = [...DARK.matchAll(/(--office-[\w-]+): ([^;]+);/g)].map(
|
|
864
|
+
(match) => [match[1], match[2]]
|
|
865
|
+
);
|
|
866
|
+
var lightPalette = Object.fromEntries(
|
|
867
|
+
darkEntries.map(([name]) => [name, OFFICE_TOKENS[name]])
|
|
868
|
+
);
|
|
869
|
+
var darkPalette = Object.fromEntries(darkEntries);
|
|
870
|
+
var modeCss = (selector, dark) => themeBridge(selector, {
|
|
871
|
+
...lightPalette,
|
|
872
|
+
...dark ? darkPalette : {},
|
|
873
|
+
"--office-accent-foreground": OFFICE_TOKENS["--office-accent-foreground"]
|
|
874
|
+
}) + `${selector} { color-scheme: ${dark ? "dark" : "light"}; }`;
|
|
875
|
+
var THEME_CSS = `
|
|
876
|
+
:where(:root) {
|
|
877
|
+
${LIGHT}
|
|
878
|
+
color-scheme: light;
|
|
879
|
+
}
|
|
880
|
+
${modeCss(':where([data-office-theme="light"], [data-office-theme="auto"])', false)}
|
|
881
|
+
${modeCss(':where([data-office-theme="dark"])', true)}
|
|
882
|
+
@media (prefers-color-scheme: dark) {
|
|
883
|
+
${modeCss(':where(:root:not([data-office-theme="light"]), [data-office-theme="auto"])', true)}
|
|
884
|
+
}
|
|
885
|
+
@media ${TOUCH} {
|
|
886
|
+
:where(:root) { --office-target-size: var(--office-target-size-touch); }
|
|
887
|
+
}
|
|
888
|
+
@media (forced-colors: active) {
|
|
889
|
+
:where(:root, [data-office-theme]) {
|
|
890
|
+
--office-foreground: CanvasText;
|
|
891
|
+
--office-muted-foreground: GrayText;
|
|
892
|
+
--office-background: Canvas;
|
|
893
|
+
--office-surface: Canvas;
|
|
894
|
+
--office-border: CanvasText;
|
|
895
|
+
--office-accent: Highlight;
|
|
896
|
+
--office-accent-foreground: HighlightText;
|
|
897
|
+
--office-ring: Highlight;
|
|
898
|
+
--office-danger: CanvasText;
|
|
899
|
+
}
|
|
900
|
+
}
|
|
901
|
+
${BUILDING_BLOCKS_CSS}
|
|
902
|
+
`;
|
|
903
|
+
function installOfficeUiTheme(root = globalThis.document) {
|
|
904
|
+
if (!root) return false;
|
|
905
|
+
const documentRoot = root.nodeType === 9;
|
|
906
|
+
if (!documentRoot && !("host" in root)) return false;
|
|
907
|
+
const doc = documentRoot ? root : root.ownerDocument;
|
|
908
|
+
const container = documentRoot ? root.head : root;
|
|
909
|
+
if (!doc || !container) return false;
|
|
910
|
+
if (!root.getElementById(THEME_STYLE_ID)) {
|
|
911
|
+
const style = doc.createElement("style");
|
|
912
|
+
style.id = THEME_STYLE_ID;
|
|
913
|
+
style.textContent = THEME_CSS;
|
|
914
|
+
container.append(style);
|
|
915
|
+
}
|
|
916
|
+
return true;
|
|
917
|
+
}
|
|
918
|
+
function installOfficeUiThemeRoots(host) {
|
|
919
|
+
let installed = installOfficeUiTheme(host.ownerDocument);
|
|
920
|
+
let root = host.getRootNode();
|
|
921
|
+
while (root.nodeType === 11 && "host" in root) {
|
|
922
|
+
const shadow = root;
|
|
923
|
+
installed = installOfficeUiTheme(shadow) && installed;
|
|
924
|
+
root = shadow.host.getRootNode();
|
|
925
|
+
}
|
|
926
|
+
return installed;
|
|
927
|
+
}
|
|
928
|
+
function installOfficeUiThemeFor(host) {
|
|
929
|
+
const installed = installOfficeUiThemeRoots(host);
|
|
930
|
+
queueMicrotask(() => {
|
|
931
|
+
installOfficeUiThemeRoots(host);
|
|
932
|
+
});
|
|
933
|
+
return installed;
|
|
934
|
+
}
|
|
935
|
+
|
|
936
|
+
// src/pptx/theme/office-css.ts
|
|
937
|
+
var MARKER = "/* ooxml-pptx-office-theme */";
|
|
938
|
+
function withOfficeThemeCss(css, selector) {
|
|
939
|
+
if (css.includes(MARKER)) return css;
|
|
940
|
+
function reference(value2, start) {
|
|
941
|
+
let depth = 1, end = start + 4;
|
|
942
|
+
for (; end < value2.length && depth; end++) {
|
|
943
|
+
if (value2[end] === "(") depth++;
|
|
944
|
+
else if (value2[end] === ")") depth--;
|
|
945
|
+
}
|
|
946
|
+
if (depth) return void 0;
|
|
947
|
+
const body = value2.slice(start + 4, end - 1);
|
|
948
|
+
const comma = body.indexOf(",");
|
|
949
|
+
return {
|
|
950
|
+
name: (comma < 0 ? body : body.slice(0, comma)).trim(),
|
|
951
|
+
fallback: comma < 0 ? "" : body.slice(comma + 1).trim(),
|
|
952
|
+
end
|
|
953
|
+
};
|
|
954
|
+
}
|
|
955
|
+
function rewrite(value2) {
|
|
956
|
+
let result = "", cursor = 0;
|
|
957
|
+
while (cursor < value2.length) {
|
|
958
|
+
const start = value2.indexOf("var(", cursor);
|
|
959
|
+
if (start < 0) return result + value2.slice(cursor);
|
|
960
|
+
const current = reference(value2, start);
|
|
961
|
+
if (!current) return result + value2.slice(cursor);
|
|
962
|
+
result += value2.slice(cursor, start);
|
|
963
|
+
const key = current.name.slice("--pptx-".length);
|
|
964
|
+
if (current.name.startsWith("--pptx-") && key in LEGACY_OFFICE_THEME_TOKENS) {
|
|
965
|
+
const names = [current.name];
|
|
966
|
+
let fallback = current.fallback;
|
|
967
|
+
while (fallback.startsWith("var(")) {
|
|
968
|
+
const next = reference(fallback, 0);
|
|
969
|
+
if (!next || next.end !== fallback.length || !next.name.startsWith("--pptx-") || !(next.name.slice(7) in LEGACY_OFFICE_THEME_TOKENS))
|
|
970
|
+
break;
|
|
971
|
+
names.push(next.name);
|
|
972
|
+
fallback = next.fallback;
|
|
973
|
+
}
|
|
974
|
+
const canonical = `var(--_pptx-${key}${fallback ? ", " + rewrite(fallback) : ""})`;
|
|
975
|
+
result += names.length > 1 ? names.reduceRight((inner, name) => `var(${name}, ${inner})`, canonical) : canonical;
|
|
976
|
+
} else
|
|
977
|
+
result += `var(${current.name}${current.fallback ? ", " + rewrite(current.fallback) : ""})`;
|
|
978
|
+
cursor = current.end;
|
|
979
|
+
}
|
|
980
|
+
return result;
|
|
981
|
+
}
|
|
982
|
+
return `${MARKER}
|
|
983
|
+
${legacyThemeAliases(selector, "--pptx-", "--_pptx-")}
|
|
984
|
+
${rewrite(css)}`;
|
|
985
|
+
}
|
|
986
|
+
function pptxThemeValue(name) {
|
|
987
|
+
const token = LEGACY_OFFICE_THEME_TOKENS[name];
|
|
988
|
+
return `var(--pptx-${name}, var(${token}, ${OFFICE_TOKENS[token]}))`;
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
exports.GALLERY_THEME_PRESETS = GALLERY_THEME_PRESETS;
|
|
992
|
+
exports.LEGACY_OFFICE_THEME_TOKENS = LEGACY_OFFICE_THEME_TOKENS;
|
|
993
|
+
exports.OFFICE_TOKENS = OFFICE_TOKENS;
|
|
994
|
+
exports.THEME_CATALOG = THEME_CATALOG;
|
|
995
|
+
exports.TOUCH = TOUCH;
|
|
996
|
+
exports.activeGalleryThemePreset = activeGalleryThemePreset;
|
|
997
|
+
exports.defaultCssVars = defaultCssVars;
|
|
998
|
+
exports.defaultRadius = defaultRadius;
|
|
999
|
+
exports.defaultThemeColors = defaultThemeColors;
|
|
1000
|
+
exports.installOfficeUiTheme = installOfficeUiTheme;
|
|
1001
|
+
exports.installOfficeUiThemeFor = installOfficeUiThemeFor;
|
|
1002
|
+
exports.legacyThemeBridge = legacyThemeBridge;
|
|
1003
|
+
exports.lightTheme = lightTheme;
|
|
1004
|
+
exports.lightThemeColors = lightThemeColors;
|
|
1005
|
+
exports.pptxThemeValue = pptxThemeValue;
|
|
1006
|
+
exports.resolveThemeCatalogEntry = resolveThemeCatalogEntry;
|
|
1007
|
+
exports.themeToCssVars = themeToCssVars;
|
|
1008
|
+
exports.tok = tok;
|
|
1009
|
+
exports.vermilionDarkColors = vermilionDarkColors;
|
|
1010
|
+
exports.vermilionDarkTheme = vermilionDarkTheme;
|
|
1011
|
+
exports.vermilionLightColors = vermilionLightColors;
|
|
1012
|
+
exports.vermilionLightTheme = vermilionLightTheme;
|
|
1013
|
+
exports.vermilionRadius = vermilionRadius;
|
|
1014
|
+
exports.withOfficeThemeCss = withOfficeThemeCss;
|