mirror of
https://github.com/lrnselfreliance/wrolpi.git
synced 2026-10-26 19:01:39 -04:00
1bf8ea3da8
Adds src/components/ui: buttons, messages, labels, progress, status, tables,
form controls, panels, cards, statistics, modals, tooltips, tabs, and icons.
Everything resolves its colors through theme tokens, so no component branches
on the current theme, and Semantic UI keeps rendering the app meanwhile.
Mantine is bridged rather than restyled: its own CSS variables are pointed at
our tokens. Four details were not obvious, and each caused a visible defect
in night mode before being fixed:
- Structural colors must go in the resolver's light/dark blocks. Mantine
emits its values under [data-mantine-color-scheme], which outranks the
:root block that `variables` becomes, so its grays were winning.
- The dark and gray palettes are mapped shade by shade to tokens. Mantine
reads them directly for table borders, zebra stripes and input chrome;
they can be neither flattened nor left alone.
- Mantine writes --button-* as inline styles, which no stylesheet can
outrank, so the dashed danger treatment sets real properties instead.
- Switch colors are written onto inner elements, so they need scoped CSS
rather than a variable on the root. Adds a --knob token for control
handles, because Mantine's default thumb follows theme.white, which is
near-black in the dark-based themes.
An audit of every painted pixel in the /theme-sample gallery now finds no
non-red channel in night mode.
Icons come from @tabler/icons-react with the 102 Semantic names the app uses
mapped to components; they stroke with currentColor, so they follow the theme
without any rule of their own. Toasts keep the react-semantic-toasts-2
signature so those call sites migrate by changing an import.
TypeScript 5 is required: Mantine's declarations use `const` type parameters,
which 4.9 cannot parse (Mantine 7 is the same, so downgrading is no escape).
That needs two npm overrides to keep clean installs working, both verified
against a Docker build: react-scripts declares peerOptional typescript ^3||^4,
and fork-ts-checker 6.5.2 assigns typescript.performance.mark, which TS 5
made getter-only - crashing the dev server's type checker on every rebuild.
semantic-baseline.test.js ratchets the removal: it fails if a file not already
listed imports Semantic UI. An ESLint rule would have printed 75 warnings per
rebuild, and CI unsets CI= for its build step, so it would guard nothing there.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
||
|---|---|---|
| .. | ||
| admin | ||
| calculators | ||
| collections | ||
| inventory | ||
| ui | ||
| AddToPlaylist.js | ||
| Apps.js | ||
| Archive.js | ||
| ArchivePreview.js | ||
| BulkTagModal.js | ||
| BulkTagModal.test.js | ||
| Calculators.js | ||
| CbzViewer.js | ||
| Channels.cy.js | ||
| Channels.js | ||
| Common.js | ||
| Common.test.js | ||
| DatesSelector.js | ||
| DesktopToggle.test.js | ||
| Docs.js | ||
| DomainEditPage.test.js | ||
| DomainsPage.test.js | ||
| DomainTagging.test.js | ||
| DonatePage.js | ||
| Download.cy.js | ||
| Download.js | ||
| Download.test.js | ||
| ErrorBoundary.js | ||
| FileBrowser.js | ||
| FileBrowser.test.js | ||
| FilePreview.js | ||
| FilePreview.test.js | ||
| Files.js | ||
| Flasher.js | ||
| Flasher.test.js | ||
| Headline.js | ||
| HelpModal.js | ||
| KeyboardShortcutsProvider.js | ||
| Map.js | ||
| MapSearchView.js | ||
| MapViewer.js | ||
| Nav.js | ||
| otp.js | ||
| otp.test.js | ||
| Placeholder.js | ||
| Playlists.js | ||
| Playlists.test.js | ||
| Search.js | ||
| SearchFilterModal.test.js | ||
| Share.js | ||
| ShortcutHint.js | ||
| SortableTable.js | ||
| Tables.js | ||
| TaggedDeleteConfirmModal.js | ||
| TaggedDeleteConfirmModal.test.js | ||
| Theme.test.js | ||
| Theme.tsx | ||
| ThemeProvider.test.js | ||
| ThemeSamplePage.js | ||
| Upload.js | ||
| Vars.js | ||
| VideoPlayer.js | ||
| VideoPlayer.test.js | ||
| Videos.js | ||
| VncToggle.test.js | ||
| Zim.js | ||