ooxml-ui 0.12.0 → 0.13.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 +23 -2
- package/dist/{chunk-YZ2JQNHX.js → chunk-4NUKVNSJ.js} +1 -1
- package/dist/{chunk-EY266IK3.js → chunk-D6EREKYF.js} +5 -3
- package/dist/{chunk-BN3UBHTC.js → chunk-JROJGF7A.js} +355 -352
- package/dist/{chunk-H4KFVIGT.js → chunk-LI6OV55P.js} +15 -15
- package/dist/chunk-MDW2Y5UN.js +187 -0
- package/dist/{chunk-RLPL7Q6J.js → chunk-NOQAM6ZS.js} +8 -7
- package/dist/{chunk-KJV76AB7.js → chunk-SDFQ7U2I.js} +4 -3
- package/dist/controls.js +5 -4
- package/dist/document-notices.d.ts +1 -1
- package/dist/icons.js +3 -2
- package/dist/index.js +11 -10
- package/dist/presence.js +3 -2
- package/dist/smartart.js +3 -2
- package/dist/styles.d.ts +1 -1
- package/dist/theme.d.ts +2 -1
- package/dist/theme.js +2 -1
- package/dist/tokens.d.ts +185 -0
- package/package.json +1 -1
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { OFFICE_TOKENS, TOUCH } from './chunk-MDW2Y5UN.js';
|
|
2
|
+
|
|
1
3
|
// src/theme.ts
|
|
2
4
|
var THEME_STYLE_ID = "office-ui-theme";
|
|
3
5
|
var DARK = `
|
|
@@ -8,21 +10,19 @@ var DARK = `
|
|
|
8
10
|
--office-border: #374151;
|
|
9
11
|
--office-accent: #6366f1;
|
|
10
12
|
--office-ring: #818cf8;
|
|
11
|
-
--office-danger: #f87171
|
|
13
|
+
--office-danger: #f87171;
|
|
14
|
+
--office-selected: #374151;
|
|
15
|
+
--office-notice-background: rgb(120 53 15 / 20%);
|
|
16
|
+
--office-notice-foreground: #fde68a;
|
|
17
|
+
--office-notice-accent: #fbbf24;
|
|
18
|
+
--office-info: #60a5fa;
|
|
19
|
+
--office-warning: #f59e0b;
|
|
20
|
+
--office-shadow: 0 6px 20px rgb(0 0 0 / 45%);
|
|
21
|
+
--office-shadow-lg: 0 10px 25px rgb(0 0 0 / 45%);`;
|
|
22
|
+
var LIGHT = Object.entries(OFFICE_TOKENS).map(([name, value]) => ` ${name}: ${value};`).join("\n");
|
|
12
23
|
var THEME_CSS = `
|
|
13
24
|
:root {
|
|
14
|
-
|
|
15
|
-
--office-muted-foreground: #6b7280;
|
|
16
|
-
--office-background: #ffffff;
|
|
17
|
-
--office-surface: #f3f4f6;
|
|
18
|
-
--office-border: #d1d5db;
|
|
19
|
-
--office-accent: #2563eb;
|
|
20
|
-
--office-accent-foreground: #ffffff;
|
|
21
|
-
--office-ring: #2563eb;
|
|
22
|
-
--office-danger: #b91c1c;
|
|
23
|
-
--office-target-size: 28px;
|
|
24
|
-
--office-radius: 4px;
|
|
25
|
-
--office-font: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
25
|
+
${LIGHT}
|
|
26
26
|
}
|
|
27
27
|
@media (prefers-color-scheme: dark) {
|
|
28
28
|
:root:not([data-office-theme="light"]) {${DARK}
|
|
@@ -30,8 +30,8 @@ var THEME_CSS = `
|
|
|
30
30
|
}
|
|
31
31
|
:root[data-office-theme="dark"] {${DARK}
|
|
32
32
|
}
|
|
33
|
-
@media
|
|
34
|
-
:root { --office-target-size:
|
|
33
|
+
@media ${TOUCH} {
|
|
34
|
+
:root { --office-target-size: var(--office-target-size-touch); }
|
|
35
35
|
}
|
|
36
36
|
@media (forced-colors: active) {
|
|
37
37
|
:root {
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
// src/tokens.ts
|
|
2
|
+
var OFFICE_TOKENS = {
|
|
3
|
+
// Colour: semantic
|
|
4
|
+
"--office-foreground": "#1f2937",
|
|
5
|
+
"--office-muted-foreground": "#6b7280",
|
|
6
|
+
"--office-background": "#ffffff",
|
|
7
|
+
"--office-surface": "#f3f4f6",
|
|
8
|
+
"--office-selected": "#e5e7eb",
|
|
9
|
+
"--office-border": "#d1d5db",
|
|
10
|
+
"--office-accent": "#2563eb",
|
|
11
|
+
"--office-accent-foreground": "#ffffff",
|
|
12
|
+
"--office-ring": "#2563eb",
|
|
13
|
+
"--office-danger": "#b91c1c",
|
|
14
|
+
"--office-danger-foreground": "#ffffff",
|
|
15
|
+
"--office-warning": "#d97706",
|
|
16
|
+
"--office-warning-foreground": "#ffffff",
|
|
17
|
+
"--office-info": "#3b82f6",
|
|
18
|
+
"--office-popover": "var(--office-background, #ffffff)",
|
|
19
|
+
"--office-popover-foreground": "var(--office-foreground, #1f2937)",
|
|
20
|
+
"--office-overlay": "rgb(0 0 0 / 40%)",
|
|
21
|
+
"--office-notice-background": "#fef3c7",
|
|
22
|
+
"--office-notice-foreground": "#78350f",
|
|
23
|
+
"--office-notice-border": "rgb(180 83 9 / 30%)",
|
|
24
|
+
"--office-notice-accent": "#d97706",
|
|
25
|
+
"--office-keytip-background": "#ffffff",
|
|
26
|
+
"--office-keytip-foreground": "#1f1f1f",
|
|
27
|
+
"--office-keytip-border": "#8a8886",
|
|
28
|
+
"--office-highlight": "#dc2626",
|
|
29
|
+
"--office-paper": "#ffffff",
|
|
30
|
+
"--office-accent-hover": "color-mix(in srgb, var(--office-accent, #2563eb) 85%, #000)",
|
|
31
|
+
// Typography
|
|
32
|
+
"--office-font": 'system-ui, -apple-system, "Segoe UI", sans-serif',
|
|
33
|
+
"--office-font-size-3xs": "9px",
|
|
34
|
+
"--office-font-size-2xs": "10px",
|
|
35
|
+
"--office-font-size-xs": "11px",
|
|
36
|
+
"--office-font-size-sm": "12px",
|
|
37
|
+
"--office-font-size": "13px",
|
|
38
|
+
"--office-font-size-md": "14px",
|
|
39
|
+
"--office-font-size-lg": "15px",
|
|
40
|
+
"--office-font-size-xl": "18px",
|
|
41
|
+
"--office-font-weight-medium": "500",
|
|
42
|
+
"--office-font-weight-bold": "600",
|
|
43
|
+
"--office-line-height": "1.4",
|
|
44
|
+
"--office-line-height-tight": "1.2",
|
|
45
|
+
"--office-icon-stroke": "1.5",
|
|
46
|
+
// Space
|
|
47
|
+
"--office-space-px": "1px",
|
|
48
|
+
"--office-space-0": "2px",
|
|
49
|
+
"--office-space-1": "4px",
|
|
50
|
+
"--office-space-1-5": "6px",
|
|
51
|
+
"--office-space-2": "8px",
|
|
52
|
+
"--office-space-2-5": "10px",
|
|
53
|
+
"--office-space-3": "12px",
|
|
54
|
+
"--office-space-3-5": "14px",
|
|
55
|
+
"--office-space-4": "16px",
|
|
56
|
+
"--office-space-5": "20px",
|
|
57
|
+
"--office-space-6": "24px",
|
|
58
|
+
// Shape
|
|
59
|
+
"--office-border-width": "1px",
|
|
60
|
+
"--office-border-width-thick": "2px",
|
|
61
|
+
"--office-radius-xs": "2px",
|
|
62
|
+
"--office-radius-sm": "3px",
|
|
63
|
+
"--office-radius": "4px",
|
|
64
|
+
"--office-radius-md": "6px",
|
|
65
|
+
"--office-radius-lg": "8px",
|
|
66
|
+
"--office-radius-full": "999px",
|
|
67
|
+
// Focus
|
|
68
|
+
"--office-focus-width": "2px",
|
|
69
|
+
"--office-focus-offset": "2px",
|
|
70
|
+
// Sizes
|
|
71
|
+
"--office-target-size": "28px",
|
|
72
|
+
"--office-target-size-touch": "44px",
|
|
73
|
+
"--office-control-height": "24px",
|
|
74
|
+
"--office-control-height-md": "28px",
|
|
75
|
+
"--office-control-height-lg": "32px",
|
|
76
|
+
"--office-input-height": "26px",
|
|
77
|
+
"--office-control-height-xs": "22px",
|
|
78
|
+
"--office-icon-size-xs": "10px",
|
|
79
|
+
"--office-icon-size-sm": "12px",
|
|
80
|
+
"--office-icon-size": "14px",
|
|
81
|
+
"--office-icon-size-md": "16px",
|
|
82
|
+
"--office-icon-size-ml": "18px",
|
|
83
|
+
"--office-icon-size-lg": "20px",
|
|
84
|
+
// Elevation and layering
|
|
85
|
+
"--office-shadow-sm": "0 1px 3px rgb(0 0 0 / 20%)",
|
|
86
|
+
"--office-shadow": "0 6px 20px rgb(0 0 0 / 18%)",
|
|
87
|
+
"--office-shadow-lg": "0 10px 25px rgb(0 0 0 / 20%)",
|
|
88
|
+
"--office-z-popover": "1100",
|
|
89
|
+
"--office-z-dialog": "1000",
|
|
90
|
+
"--office-z-backstage": "30",
|
|
91
|
+
// Motion
|
|
92
|
+
"--office-duration-fast": ".12s",
|
|
93
|
+
"--office-duration": ".15s",
|
|
94
|
+
"--office-duration-spin": ".8s",
|
|
95
|
+
// Component: fields
|
|
96
|
+
"--office-field-height": "28px",
|
|
97
|
+
"--office-field-height-lg": "40px",
|
|
98
|
+
"--office-field-radius": "5px",
|
|
99
|
+
"--office-field-border": "var(--office-border, #d1d5db)",
|
|
100
|
+
"--office-field-border-focus": "var(--office-ring, #2563eb)",
|
|
101
|
+
"--office-field-background": "var(--office-background, #ffffff)",
|
|
102
|
+
"--office-field-foreground": "var(--office-foreground, #1f2937)",
|
|
103
|
+
"--office-field-placeholder": "var(--office-muted-foreground, #6b7280)",
|
|
104
|
+
// Component: checkbox, radio, switch
|
|
105
|
+
"--office-checkbox-size": "16px",
|
|
106
|
+
"--office-checkbox-size-touch": "22px",
|
|
107
|
+
"--office-checkbox-radius": "3px",
|
|
108
|
+
"--office-checkbox-border": "var(--office-border, #d1d5db)",
|
|
109
|
+
"--office-checkbox-background": "var(--office-background, #ffffff)",
|
|
110
|
+
"--office-checkbox-accent": "var(--office-accent, #2563eb)",
|
|
111
|
+
"--office-checkbox-accent-foreground": "var(--office-accent-foreground, #ffffff)",
|
|
112
|
+
"--office-radio-dot-size": "8px",
|
|
113
|
+
"--office-radio-dot-size-touch": "12px",
|
|
114
|
+
"--office-switch-width": "32px",
|
|
115
|
+
"--office-switch-height": "18px",
|
|
116
|
+
"--office-switch-width-touch": "44px",
|
|
117
|
+
"--office-switch-height-touch": "24px",
|
|
118
|
+
"--office-switch-border-width": "1px",
|
|
119
|
+
"--office-switch-knob-size": "12px",
|
|
120
|
+
"--office-switch-knob-size-touch": "18px",
|
|
121
|
+
"--office-switch-knob-offset": "2px",
|
|
122
|
+
"--office-switch-border": "var(--office-border, #d1d5db)",
|
|
123
|
+
"--office-switch-track": "var(--office-surface, #f3f4f6)",
|
|
124
|
+
"--office-switch-track-on": "var(--office-accent, #2563eb)",
|
|
125
|
+
"--office-switch-thumb": "var(--office-foreground, #1f2937)",
|
|
126
|
+
"--office-switch-thumb-on": "var(--office-accent-foreground, #ffffff)",
|
|
127
|
+
// Component: ribbon, status bar, tabs
|
|
128
|
+
"--office-ribbon-tab-height": "35px",
|
|
129
|
+
"--office-ribbon-group-gap": "2px",
|
|
130
|
+
"--office-ribbon-group-height": "78px",
|
|
131
|
+
"--office-ribbon-caption-line-height": "12px",
|
|
132
|
+
"--office-ribbon-row-height": "22px",
|
|
133
|
+
"--office-ribbon-file-min-width": "52px",
|
|
134
|
+
"--office-launcher-width": "16px",
|
|
135
|
+
"--office-launcher-height": "14px",
|
|
136
|
+
"--office-tab-indicator-width": "2.5px",
|
|
137
|
+
"--office-status-bar-height": "24px",
|
|
138
|
+
"--office-tab-height": "28px",
|
|
139
|
+
"--office-tab-max-width": "220px",
|
|
140
|
+
"--office-zoom-slider-width": "120px",
|
|
141
|
+
"--office-zoom-slider-min-width": "48px",
|
|
142
|
+
"--office-zoom-value-width": "40px",
|
|
143
|
+
// Component: panels and dialogs
|
|
144
|
+
"--office-dialog-width": "auto",
|
|
145
|
+
"--office-dialog-max-width": "min(640px, 100vw)",
|
|
146
|
+
"--office-dialog-max-height": "90vh",
|
|
147
|
+
"--office-dialog-min-width": "min(320px, 100vw)",
|
|
148
|
+
"--office-dialog-button-min-width": "76px",
|
|
149
|
+
"--office-options-width": "min(820px, 100vw)",
|
|
150
|
+
"--office-options-nav-width": "180px",
|
|
151
|
+
"--office-options-min-height": "min(440px, 70vh)",
|
|
152
|
+
"--office-options-label-width": "180px",
|
|
153
|
+
"--office-options-row-height": "30px",
|
|
154
|
+
"--office-options-number-width": "80px",
|
|
155
|
+
"--office-info-size": "15px",
|
|
156
|
+
"--office-selection-bar-width": "3px",
|
|
157
|
+
"--office-backstage-nav-width": "200px",
|
|
158
|
+
"--office-backstage-nav-background": "var(--office-accent, #2563eb)",
|
|
159
|
+
"--office-backstage-nav-foreground": "var(--office-accent-foreground, #ffffff)",
|
|
160
|
+
"--office-backstage-item-hover": "rgb(0 0 0 / 22%)",
|
|
161
|
+
"--office-backstage-padding": "28px 40px",
|
|
162
|
+
"--office-backstage-back-size": "36px",
|
|
163
|
+
"--office-backstage-item-height": "38px",
|
|
164
|
+
"--office-menu-min-width": "180px",
|
|
165
|
+
"--office-menu-max-height": "60vh",
|
|
166
|
+
"--office-context-menu-min-width": "200px",
|
|
167
|
+
"--office-search-popup-min-width": "240px",
|
|
168
|
+
"--office-search-popup-max-height": "320px",
|
|
169
|
+
"--office-select-max-height": "240px",
|
|
170
|
+
"--office-search-width": "320px",
|
|
171
|
+
"--office-print-preview-width": "420px",
|
|
172
|
+
"--office-find-max-width": "640px",
|
|
173
|
+
"--office-find-bar-height": "40px",
|
|
174
|
+
"--office-ruler-size": "18px",
|
|
175
|
+
"--office-avatar-size": "48px",
|
|
176
|
+
"--office-avatar-color": "var(--office-muted-foreground, #6b7280)",
|
|
177
|
+
"--office-toast-width": "360px",
|
|
178
|
+
"--office-account-field-width": "320px"
|
|
179
|
+
};
|
|
180
|
+
function tok(name) {
|
|
181
|
+
return `var(${name}, ${OFFICE_TOKENS[name]})`;
|
|
182
|
+
}
|
|
183
|
+
var FOCUS_RING = `outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: ${tok("--office-focus-offset")};`;
|
|
184
|
+
var COMPACT = "(max-width: 767px)";
|
|
185
|
+
var TOUCH = `(pointer: coarse), ${COMPACT}`;
|
|
186
|
+
|
|
187
|
+
export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { definer, attachStyles, controlCss, emit } from './chunk-
|
|
1
|
+
import { definer, attachStyles, controlCss, emit } from './chunk-D6EREKYF.js';
|
|
2
|
+
import { tok } from './chunk-MDW2Y5UN.js';
|
|
2
3
|
|
|
3
4
|
// src/presence.ts
|
|
4
5
|
function participantsFromAwareness(states, selfId) {
|
|
@@ -27,14 +28,14 @@ var initialsOf = (name) => {
|
|
|
27
28
|
var CSS = `
|
|
28
29
|
:host { display: inline-flex; align-items: center; }
|
|
29
30
|
ul { display: flex; margin: 0; padding: 0; list-style: none; }
|
|
30
|
-
li { margin-inline-start: -
|
|
31
|
+
li { margin-inline-start: calc(-1 * ${tok("--office-space-1-5")}); }
|
|
31
32
|
li:first-child { margin-inline-start: 0; }
|
|
32
33
|
button, .more { box-sizing: border-box; display: inline-grid; place-items: center;
|
|
33
|
-
width:
|
|
34
|
-
border:
|
|
35
|
-
color:
|
|
36
|
-
.more { cursor: default; border-color:
|
|
37
|
-
button:focus-visible { outline:
|
|
34
|
+
width: ${tok("--office-target-size")}; height: ${tok("--office-target-size")}; padding: 0; border-radius: 50%;
|
|
35
|
+
border: ${tok("--office-border-width-thick")} solid ${tok("--office-avatar-color")}; background: ${tok("--office-surface")};
|
|
36
|
+
color: ${tok("--office-foreground")}; font: 600 ${tok("--office-font-size-xs")} ${tok("--office-font")}; cursor: pointer; }
|
|
37
|
+
.more { cursor: default; border-color: ${tok("--office-border")}; }
|
|
38
|
+
button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(${tok("--office-focus-offset")} / 2); z-index: 1; }
|
|
38
39
|
button[data-status="idle"] { opacity: .7; }
|
|
39
40
|
button[data-status="away"] { opacity: .45; border-style: dashed; }
|
|
40
41
|
@media (forced-colors: active) {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { definer, attachStyles, controlCss, emit } from './chunk-
|
|
1
|
+
import { definer, attachStyles, controlCss, emit } from './chunk-D6EREKYF.js';
|
|
2
|
+
import { tok } from './chunk-MDW2Y5UN.js';
|
|
2
3
|
import { normalizeHexColor } from 'ooxml-core/color';
|
|
3
4
|
|
|
4
5
|
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
@@ -155,8 +156,8 @@ function textElement(doc, shape, scheme) {
|
|
|
155
156
|
var CSS = `
|
|
156
157
|
:host { display: block; }
|
|
157
158
|
svg { display: block; width: 100%; height: auto; max-height: 100%; }
|
|
158
|
-
text { font-family:
|
|
159
|
-
.empty { padding:
|
|
159
|
+
text { font-family: ${tok("--office-font")}; pointer-events: none; }
|
|
160
|
+
.empty { padding: ${tok("--office-space-2")}; font-size: ${tok("--office-font-size-sm")}; color: ${tok("--office-muted-foreground")}; }
|
|
160
161
|
@media (forced-colors: active) { text { fill: CanvasText; } }
|
|
161
162
|
`;
|
|
162
163
|
var defineSmartArt = definer("office-ui-smartart", () => {
|
package/dist/controls.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-
|
|
2
|
-
export { defineIcon } from './chunk-
|
|
3
|
-
import './chunk-
|
|
4
|
-
import './chunk-
|
|
1
|
+
export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-JROJGF7A.js';
|
|
2
|
+
export { defineIcon } from './chunk-4NUKVNSJ.js';
|
|
3
|
+
import './chunk-NOQAM6ZS.js';
|
|
4
|
+
import './chunk-D6EREKYF.js';
|
|
5
|
+
import './chunk-MDW2Y5UN.js';
|
|
@@ -47,7 +47,7 @@ export interface OfficePasteOptionsState {
|
|
|
47
47
|
label?: string;
|
|
48
48
|
}
|
|
49
49
|
/**
|
|
50
|
-
* `<office-ui-paste-options>`: the strip anchored
|
|
50
|
+
* `<office-ui-paste-options>`: the strip anchored one `--office-space-1` step past a just-pasted object's bottom-right
|
|
51
51
|
* corner (the host is the fixed box). A choice emits `office-paste-options-request`
|
|
52
52
|
* `{ format }` then `office-paste-options-dismiss`; the first pointerdown or keydown outside
|
|
53
53
|
* (Escape inside too) dismisses, armed one task after connecting so the paste gesture does not.
|
package/dist/icons.js
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-
|
|
2
|
-
import './chunk-
|
|
1
|
+
export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-4NUKVNSJ.js';
|
|
2
|
+
import './chunk-D6EREKYF.js';
|
|
3
|
+
import './chunk-MDW2Y5UN.js';
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import { installOfficeUiTheme } from './chunk-
|
|
2
|
-
export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-
|
|
3
|
-
import { registerControls } from './chunk-
|
|
4
|
-
export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-
|
|
5
|
-
export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-
|
|
6
|
-
import { definePresence } from './chunk-
|
|
7
|
-
export { definePresence, initialsOf, participantsFromAwareness } from './chunk-
|
|
8
|
-
import { defineSmartArt } from './chunk-
|
|
9
|
-
export { defineSmartArt, renderDiagramDrawing } from './chunk-
|
|
10
|
-
export { CONTRACT_REVISION } from './chunk-
|
|
1
|
+
import { installOfficeUiTheme } from './chunk-LI6OV55P.js';
|
|
2
|
+
export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-LI6OV55P.js';
|
|
3
|
+
import { registerControls } from './chunk-JROJGF7A.js';
|
|
4
|
+
export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-JROJGF7A.js';
|
|
5
|
+
export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-4NUKVNSJ.js';
|
|
6
|
+
import { definePresence } from './chunk-NOQAM6ZS.js';
|
|
7
|
+
export { definePresence, initialsOf, participantsFromAwareness } from './chunk-NOQAM6ZS.js';
|
|
8
|
+
import { defineSmartArt } from './chunk-SDFQ7U2I.js';
|
|
9
|
+
export { defineSmartArt, renderDiagramDrawing } from './chunk-SDFQ7U2I.js';
|
|
10
|
+
export { CONTRACT_REVISION } from './chunk-D6EREKYF.js';
|
|
11
|
+
export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-MDW2Y5UN.js';
|
|
11
12
|
|
|
12
13
|
// src/index.ts
|
|
13
14
|
var OFFICE_UI_TAGS = [
|
package/dist/presence.js
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export { definePresence, initialsOf, participantsFromAwareness } from './chunk-
|
|
2
|
-
import './chunk-
|
|
1
|
+
export { definePresence, initialsOf, participantsFromAwareness } from './chunk-NOQAM6ZS.js';
|
|
2
|
+
import './chunk-D6EREKYF.js';
|
|
3
|
+
import './chunk-MDW2Y5UN.js';
|
package/dist/smartart.js
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export { defineSmartArt, renderDiagramDrawing } from './chunk-
|
|
2
|
-
import './chunk-
|
|
1
|
+
export { defineSmartArt, renderDiagramDrawing } from './chunk-SDFQ7U2I.js';
|
|
2
|
+
import './chunk-D6EREKYF.js';
|
|
3
|
+
import './chunk-MDW2Y5UN.js';
|
package/dist/styles.d.ts
CHANGED
|
@@ -4,5 +4,5 @@ export declare function attachStyles(root: ShadowRoot, css: string): void;
|
|
|
4
4
|
* Rules every control repeats: `hidden`, the coarse-pointer touch target and the forced-colors
|
|
5
5
|
* focus ring. Prepended to each control's own CSS by `controlCss`.
|
|
6
6
|
*/
|
|
7
|
-
export declare const COMMON_CONTROL_CSS
|
|
7
|
+
export declare const COMMON_CONTROL_CSS: string;
|
|
8
8
|
export declare const controlCss: (css: string) => string;
|
package/dist/theme.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
export { COMPACT, FOCUS_RING, OFFICE_TOKENS, tok, TOUCH, type OfficeToken } from './tokens.js';
|
|
1
2
|
/**
|
|
2
3
|
* Theme-token foundation. Custom properties cross shadow boundaries, so one `<style>` in the
|
|
3
4
|
* document head themes every control. Every token also has a fallback inside each control, so
|
|
4
5
|
* installing the theme is optional; a host overrides any token on `:root` or on a container.
|
|
5
6
|
*/
|
|
6
7
|
export declare const THEME_STYLE_ID = "office-ui-theme";
|
|
7
|
-
export declare const THEME_CSS
|
|
8
|
+
export declare const THEME_CSS: string;
|
|
8
9
|
/** Idempotent. Browser-only; returns false (and does nothing) without a document. */
|
|
9
10
|
export declare function installOfficeUiTheme(doc?: Document | undefined): boolean;
|
package/dist/theme.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-
|
|
1
|
+
export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-LI6OV55P.js';
|
|
2
|
+
export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-MDW2Y5UN.js';
|
package/dist/tokens.d.ts
ADDED
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The ooxml-ui design tokens: the single source of every colour, size, space, radius, type,
|
|
3
|
+
* shadow, motion and layering value the controls use. Controls never write a literal; they read
|
|
4
|
+
* `tok('--office-…')`, which expands to `var(--office-…, <default>)`, so a control renders
|
|
5
|
+
* correctly with or without the installed theme and a host overrides any token on `:root` or on
|
|
6
|
+
* any container. `THEME_CSS` (theme.ts) declares these defaults on `:root` plus dark and
|
|
7
|
+
* forced-colours values. Component tokens default to the semantic ones.
|
|
8
|
+
*/
|
|
9
|
+
export declare const OFFICE_TOKENS: {
|
|
10
|
+
readonly '--office-foreground': "#1f2937";
|
|
11
|
+
readonly '--office-muted-foreground': "#6b7280";
|
|
12
|
+
readonly '--office-background': "#ffffff";
|
|
13
|
+
readonly '--office-surface': "#f3f4f6";
|
|
14
|
+
readonly '--office-selected': "#e5e7eb";
|
|
15
|
+
readonly '--office-border': "#d1d5db";
|
|
16
|
+
readonly '--office-accent': "#2563eb";
|
|
17
|
+
readonly '--office-accent-foreground': "#ffffff";
|
|
18
|
+
readonly '--office-ring': "#2563eb";
|
|
19
|
+
readonly '--office-danger': "#b91c1c";
|
|
20
|
+
readonly '--office-danger-foreground': "#ffffff";
|
|
21
|
+
readonly '--office-warning': "#d97706";
|
|
22
|
+
readonly '--office-warning-foreground': "#ffffff";
|
|
23
|
+
readonly '--office-info': "#3b82f6";
|
|
24
|
+
readonly '--office-popover': "var(--office-background, #ffffff)";
|
|
25
|
+
readonly '--office-popover-foreground': "var(--office-foreground, #1f2937)";
|
|
26
|
+
readonly '--office-overlay': "rgb(0 0 0 / 40%)";
|
|
27
|
+
readonly '--office-notice-background': "#fef3c7";
|
|
28
|
+
readonly '--office-notice-foreground': "#78350f";
|
|
29
|
+
readonly '--office-notice-border': "rgb(180 83 9 / 30%)";
|
|
30
|
+
readonly '--office-notice-accent': "#d97706";
|
|
31
|
+
readonly '--office-keytip-background': "#ffffff";
|
|
32
|
+
readonly '--office-keytip-foreground': "#1f1f1f";
|
|
33
|
+
readonly '--office-keytip-border': "#8a8886";
|
|
34
|
+
readonly '--office-highlight': "#dc2626";
|
|
35
|
+
readonly '--office-paper': "#ffffff";
|
|
36
|
+
readonly '--office-accent-hover': "color-mix(in srgb, var(--office-accent, #2563eb) 85%, #000)";
|
|
37
|
+
readonly '--office-font': "system-ui, -apple-system, \"Segoe UI\", sans-serif";
|
|
38
|
+
readonly '--office-font-size-3xs': "9px";
|
|
39
|
+
readonly '--office-font-size-2xs': "10px";
|
|
40
|
+
readonly '--office-font-size-xs': "11px";
|
|
41
|
+
readonly '--office-font-size-sm': "12px";
|
|
42
|
+
readonly '--office-font-size': "13px";
|
|
43
|
+
readonly '--office-font-size-md': "14px";
|
|
44
|
+
readonly '--office-font-size-lg': "15px";
|
|
45
|
+
readonly '--office-font-size-xl': "18px";
|
|
46
|
+
readonly '--office-font-weight-medium': "500";
|
|
47
|
+
readonly '--office-font-weight-bold': "600";
|
|
48
|
+
readonly '--office-line-height': "1.4";
|
|
49
|
+
readonly '--office-line-height-tight': "1.2";
|
|
50
|
+
readonly '--office-icon-stroke': "1.5";
|
|
51
|
+
readonly '--office-space-px': "1px";
|
|
52
|
+
readonly '--office-space-0': "2px";
|
|
53
|
+
readonly '--office-space-1': "4px";
|
|
54
|
+
readonly '--office-space-1-5': "6px";
|
|
55
|
+
readonly '--office-space-2': "8px";
|
|
56
|
+
readonly '--office-space-2-5': "10px";
|
|
57
|
+
readonly '--office-space-3': "12px";
|
|
58
|
+
readonly '--office-space-3-5': "14px";
|
|
59
|
+
readonly '--office-space-4': "16px";
|
|
60
|
+
readonly '--office-space-5': "20px";
|
|
61
|
+
readonly '--office-space-6': "24px";
|
|
62
|
+
readonly '--office-border-width': "1px";
|
|
63
|
+
readonly '--office-border-width-thick': "2px";
|
|
64
|
+
readonly '--office-radius-xs': "2px";
|
|
65
|
+
readonly '--office-radius-sm': "3px";
|
|
66
|
+
readonly '--office-radius': "4px";
|
|
67
|
+
readonly '--office-radius-md': "6px";
|
|
68
|
+
readonly '--office-radius-lg': "8px";
|
|
69
|
+
readonly '--office-radius-full': "999px";
|
|
70
|
+
readonly '--office-focus-width': "2px";
|
|
71
|
+
readonly '--office-focus-offset': "2px";
|
|
72
|
+
readonly '--office-target-size': "28px";
|
|
73
|
+
readonly '--office-target-size-touch': "44px";
|
|
74
|
+
readonly '--office-control-height': "24px";
|
|
75
|
+
readonly '--office-control-height-md': "28px";
|
|
76
|
+
readonly '--office-control-height-lg': "32px";
|
|
77
|
+
readonly '--office-input-height': "26px";
|
|
78
|
+
readonly '--office-control-height-xs': "22px";
|
|
79
|
+
readonly '--office-icon-size-xs': "10px";
|
|
80
|
+
readonly '--office-icon-size-sm': "12px";
|
|
81
|
+
readonly '--office-icon-size': "14px";
|
|
82
|
+
readonly '--office-icon-size-md': "16px";
|
|
83
|
+
readonly '--office-icon-size-ml': "18px";
|
|
84
|
+
readonly '--office-icon-size-lg': "20px";
|
|
85
|
+
readonly '--office-shadow-sm': "0 1px 3px rgb(0 0 0 / 20%)";
|
|
86
|
+
readonly '--office-shadow': "0 6px 20px rgb(0 0 0 / 18%)";
|
|
87
|
+
readonly '--office-shadow-lg': "0 10px 25px rgb(0 0 0 / 20%)";
|
|
88
|
+
readonly '--office-z-popover': "1100";
|
|
89
|
+
readonly '--office-z-dialog': "1000";
|
|
90
|
+
readonly '--office-z-backstage': "30";
|
|
91
|
+
readonly '--office-duration-fast': ".12s";
|
|
92
|
+
readonly '--office-duration': ".15s";
|
|
93
|
+
readonly '--office-duration-spin': ".8s";
|
|
94
|
+
readonly '--office-field-height': "28px";
|
|
95
|
+
readonly '--office-field-height-lg': "40px";
|
|
96
|
+
readonly '--office-field-radius': "5px";
|
|
97
|
+
readonly '--office-field-border': "var(--office-border, #d1d5db)";
|
|
98
|
+
readonly '--office-field-border-focus': "var(--office-ring, #2563eb)";
|
|
99
|
+
readonly '--office-field-background': "var(--office-background, #ffffff)";
|
|
100
|
+
readonly '--office-field-foreground': "var(--office-foreground, #1f2937)";
|
|
101
|
+
readonly '--office-field-placeholder': "var(--office-muted-foreground, #6b7280)";
|
|
102
|
+
readonly '--office-checkbox-size': "16px";
|
|
103
|
+
readonly '--office-checkbox-size-touch': "22px";
|
|
104
|
+
readonly '--office-checkbox-radius': "3px";
|
|
105
|
+
readonly '--office-checkbox-border': "var(--office-border, #d1d5db)";
|
|
106
|
+
readonly '--office-checkbox-background': "var(--office-background, #ffffff)";
|
|
107
|
+
readonly '--office-checkbox-accent': "var(--office-accent, #2563eb)";
|
|
108
|
+
readonly '--office-checkbox-accent-foreground': "var(--office-accent-foreground, #ffffff)";
|
|
109
|
+
readonly '--office-radio-dot-size': "8px";
|
|
110
|
+
readonly '--office-radio-dot-size-touch': "12px";
|
|
111
|
+
readonly '--office-switch-width': "32px";
|
|
112
|
+
readonly '--office-switch-height': "18px";
|
|
113
|
+
readonly '--office-switch-width-touch': "44px";
|
|
114
|
+
readonly '--office-switch-height-touch': "24px";
|
|
115
|
+
readonly '--office-switch-border-width': "1px";
|
|
116
|
+
readonly '--office-switch-knob-size': "12px";
|
|
117
|
+
readonly '--office-switch-knob-size-touch': "18px";
|
|
118
|
+
readonly '--office-switch-knob-offset': "2px";
|
|
119
|
+
readonly '--office-switch-border': "var(--office-border, #d1d5db)";
|
|
120
|
+
readonly '--office-switch-track': "var(--office-surface, #f3f4f6)";
|
|
121
|
+
readonly '--office-switch-track-on': "var(--office-accent, #2563eb)";
|
|
122
|
+
readonly '--office-switch-thumb': "var(--office-foreground, #1f2937)";
|
|
123
|
+
readonly '--office-switch-thumb-on': "var(--office-accent-foreground, #ffffff)";
|
|
124
|
+
readonly '--office-ribbon-tab-height': "35px";
|
|
125
|
+
readonly '--office-ribbon-group-gap': "2px";
|
|
126
|
+
readonly '--office-ribbon-group-height': "78px";
|
|
127
|
+
readonly '--office-ribbon-caption-line-height': "12px";
|
|
128
|
+
readonly '--office-ribbon-row-height': "22px";
|
|
129
|
+
readonly '--office-ribbon-file-min-width': "52px";
|
|
130
|
+
readonly '--office-launcher-width': "16px";
|
|
131
|
+
readonly '--office-launcher-height': "14px";
|
|
132
|
+
readonly '--office-tab-indicator-width': "2.5px";
|
|
133
|
+
readonly '--office-status-bar-height': "24px";
|
|
134
|
+
readonly '--office-tab-height': "28px";
|
|
135
|
+
readonly '--office-tab-max-width': "220px";
|
|
136
|
+
readonly '--office-zoom-slider-width': "120px";
|
|
137
|
+
readonly '--office-zoom-slider-min-width': "48px";
|
|
138
|
+
readonly '--office-zoom-value-width': "40px";
|
|
139
|
+
readonly '--office-dialog-width': "auto";
|
|
140
|
+
readonly '--office-dialog-max-width': "min(640px, 100vw)";
|
|
141
|
+
readonly '--office-dialog-max-height': "90vh";
|
|
142
|
+
readonly '--office-dialog-min-width': "min(320px, 100vw)";
|
|
143
|
+
readonly '--office-dialog-button-min-width': "76px";
|
|
144
|
+
readonly '--office-options-width': "min(820px, 100vw)";
|
|
145
|
+
readonly '--office-options-nav-width': "180px";
|
|
146
|
+
readonly '--office-options-min-height': "min(440px, 70vh)";
|
|
147
|
+
readonly '--office-options-label-width': "180px";
|
|
148
|
+
readonly '--office-options-row-height': "30px";
|
|
149
|
+
readonly '--office-options-number-width': "80px";
|
|
150
|
+
readonly '--office-info-size': "15px";
|
|
151
|
+
readonly '--office-selection-bar-width': "3px";
|
|
152
|
+
readonly '--office-backstage-nav-width': "200px";
|
|
153
|
+
readonly '--office-backstage-nav-background': "var(--office-accent, #2563eb)";
|
|
154
|
+
readonly '--office-backstage-nav-foreground': "var(--office-accent-foreground, #ffffff)";
|
|
155
|
+
readonly '--office-backstage-item-hover': "rgb(0 0 0 / 22%)";
|
|
156
|
+
readonly '--office-backstage-padding': "28px 40px";
|
|
157
|
+
readonly '--office-backstage-back-size': "36px";
|
|
158
|
+
readonly '--office-backstage-item-height': "38px";
|
|
159
|
+
readonly '--office-menu-min-width': "180px";
|
|
160
|
+
readonly '--office-menu-max-height': "60vh";
|
|
161
|
+
readonly '--office-context-menu-min-width': "200px";
|
|
162
|
+
readonly '--office-search-popup-min-width': "240px";
|
|
163
|
+
readonly '--office-search-popup-max-height': "320px";
|
|
164
|
+
readonly '--office-select-max-height': "240px";
|
|
165
|
+
readonly '--office-search-width': "320px";
|
|
166
|
+
readonly '--office-print-preview-width': "420px";
|
|
167
|
+
readonly '--office-find-max-width': "640px";
|
|
168
|
+
readonly '--office-find-bar-height': "40px";
|
|
169
|
+
readonly '--office-ruler-size': "18px";
|
|
170
|
+
readonly '--office-avatar-size': "48px";
|
|
171
|
+
readonly '--office-avatar-color': "var(--office-muted-foreground, #6b7280)";
|
|
172
|
+
readonly '--office-toast-width': "360px";
|
|
173
|
+
readonly '--office-account-field-width': "320px";
|
|
174
|
+
};
|
|
175
|
+
export type OfficeToken = keyof typeof OFFICE_TOKENS;
|
|
176
|
+
/** `var(--office-…, <default>)` for a declared token. The default comes from the table. */
|
|
177
|
+
export declare function tok(name: OfficeToken): string;
|
|
178
|
+
/** The standard keyboard focus ring. */
|
|
179
|
+
export declare const FOCUS_RING: string;
|
|
180
|
+
/**
|
|
181
|
+
* Layout breakpoints. CSS forbids custom properties in media queries, so these are the only
|
|
182
|
+
* lengths written literally; every control uses these two.
|
|
183
|
+
*/
|
|
184
|
+
export declare const COMPACT = "(max-width: 767px)";
|
|
185
|
+
export declare const TOUCH = "(pointer: coarse), (max-width: 767px)";
|