Repository navigation
Conversation
…ects
Every color in the stylesheet is now a --de-* token on .de-root, with the
dark values on .de-root.de-dark: find highlights, collaboration status,
avatars, slideshow, tooltips, file badges, paper and placeholders, and the
source editor's syntax colors (moved to the root so a theme reaches them).
Fonts, radii and shadows are tokens too. Rendering is unchanged: a
computed-style comparison against the previous stylesheet over DOCX, XLSX,
PPTX and Markdown, light and dark, differs only in equivalent font stacks
and the color-button swatch edge, which now follows swatch-border (visible
in dark).
- theme accepts { mode, tokens, light, dark } with typed camelCase token
names (ThemeTokens); THEME_TOKENS, createTheme, themeStyle, useThemeRoot
- injectStyles={false} and @p10node/office-engine/styles.css for hosts that
load the stylesheet themselves (CSP, extracted CSS, cascade layers)
- docs/theming.md; unit tests keep THEME_TOKENS and the stylesheet in step
and reject literal colors outside token definitions; e2e for theme
objects in both modes and for injectStyles=false
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Every icon the chrome draws now goes through `Icon`: the zoom buttons,
the outline toggle and its close button, find & replace, Present and the
add-sheet tab used text glyphs and get the names `zoomIn`, `zoomOut`,
`present`, `sheetAdd`, `replace` (with `outline` and `close` reused),
drawn like today.
- `IconName` is the union of the built-in names (exported with
`ICON_NAMES`); icon props in the toolbars, menus and `FileMenuItem`
are typed with it.
- `icons` on DocViewer, `mount()` and `<office-viewer>` (`.icons`
property) takes a partial map or a resolver `(name, { size })`;
a missing entry or `undefined` / `null` keeps the built-in icon.
Host icons render in `span.de-icon`, sized by font-size.
- `IconsProvider` gives standalone views the same icons; nested
providers fall back to the enclosing one.
- Docs with Lucide and Phosphor resolvers; unit test for precedence,
e2e spec for DOCX, XLSX and PPTX chrome.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…s props
The viewer's texts come from one typed table, `Strings` (src/react/strings/en.ts),
with a complete German table next to it (de.ts, Swiss spelling, Word / Excel /
PowerPoint terms). `DocViewer`, `mount()` and `<office-viewer>` take `locale`
('en' | 'de', default 'en') and `strings`, a partial table merged over the
locale key by key; `StringsProvider` / `useStrings()` give standalone views the
same texts. Numbers and dates in the UI go through Intl with the table's locale;
the English output is unchanged.
This change converts the top bar, the details rows, the common dialogs, the
zoom control, the shared toolbar controls, the source pane and the picture view.
The shared groups (`edit`, `find`, `table`, `format`) are in the table already,
so the document, sheet and slide views can be converted in separate changes.
A unit test checks that every locale has all keys of `en`, no empty text and no
sharp s in German.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This was referenced Nov 14, 2026
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Builds on #5 (icons), which builds on #4 (theming). Until those are merged this PR shows their commits too; the strings part is the last commit.
This lets a host show the viewer in another language, or change single texts, without forking the components.
The viewer's texts come from one typed table,
Strings(src/react/strings/en.ts), with a complete German table next to it (de.ts).DocViewer,mount()and<office-viewer>takelocale('en' | 'de', default'en') andstrings, a partial table merged over the locale key by key:A text that depends on a count or a name is a function, so each language can put the parts in its own order.
StringsProvideranduseStrings()give standalone views the same texts, and a host's own components can read them too. Numbers and dates in the UI go throughIntlwith the table's locale. With the default locale the output is unchanged, so the existing tests keep passing as they are.This PR converts the parts every file kind shares: the top bar, the details rows, the common dialogs, the zoom control, the shared toolbar controls, the source pane and the picture view. The groups the document, sheet and slide views need are in the table already, so converting those views follows in three separate PRs (DOCX, XLSX, PPTX), to keep each one reviewable.
The German table uses Swiss spelling (ss for ß), which is what I need; switching it to German-German spelling is a one-line test change plus a search and replace if you'd rather have that as the default.
test/strings.test.tschecks that every locale has all keys ofen, and no empty texts.bun run typecheck,bun testand the e2e suite pass in CI.🤖 Generated with Claude Code