Gitinbox/OpenOPC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): bind delete-project dialog to theme tokens so paper theme is readable

Browse Source 
The confirm dialog painted its panel with `var(--bg-surface, #1e1e2e)`, but
`--bg-surface` is not defined by any stylesheet in the project. Every theme
therefore fell through to the hardcoded dark `#1e1e2e`.

That went unnoticed under the six dark themes, whose `--text` is light and so
still contrasted against the dark panel. The paper theme is the only light
palette: its `--text` is `#1e293b`, which put dark text on the dark panel at
roughly 1.05:1 contrast and made the title and body invisible.

Point the panel at `--bg-elevated` so it tracks the active palette, and give
the title and body explicit `--text` / `--text-secondary` colors instead of
relying on inherited color plus `opacity: 0.7`, which is equally unreliable
over a light surface. Add a `--border` outline so the now-white panel still
reads as a distinct layer above the scrim.

Verified by hand across all seven themes.
This commit is contained in:
CatJuly
2026-08-05 17:21:40 +08:00
parent 5f5fbf432e
commit 2584c45644
3 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
opc/plugins/office_ui/frontend_dist/assets/index-Dw3OK9za.js → opc/plugins/office_ui/frontend_dist/assets/index-Cdi_JV6w.js
+1 -1
View File
File diff suppressed because one or more lines are too long
opc/plugins/office_ui/frontend_dist/index.html
+14 -14
View File
@@ -1,16 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="data:," />
<title>OpenOPC Pixel Office</title>
<script type="module" crossorigin src="./assets/index-Dw3OK9za.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="data:," />
<title>OpenOPC Pixel Office</title>
<script type="module" crossorigin src="./assets/index-Cdi_JV6w.js"></script>
<link rel="modulepreload" crossorigin href="./assets/phaser-DFK5Ua9d.js">
<link rel="stylesheet" crossorigin href="./assets/index-B6-ikSHW.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
</head>
<body>
<div id="root"></div>
</body>
</html>
opc/plugins/office_ui/frontend_src/components/ProjectSelector.tsx
+4 -3
View File
@@ -87,13 +87,14 @@ export function ProjectSelector({ projects, activeId, onSelect, onCreate, onDele
background: 'rgba(0,0,0,0.5)',
}}>
<div style={{
background: 'var(--bg-surface, #1e1e2e)', borderRadius: 12, padding: '24px 32px',
background: 'var(--bg-elevated)', borderRadius: 12, padding: '24px 32px',
border: '1px solid var(--border)', color: 'var(--text)',
maxWidth: 400, boxShadow: '0 8px 32px rgba(0,0,0,0.4)', textAlign: 'center',
}}>
<p style={{ margin: '0 0 8px', fontWeight: 600, fontSize: 15 }}>
<p style={{ margin: '0 0 8px', fontWeight: 600, fontSize: 15, color: 'var(--text)' }}>
{t('project.confirmTitle', { name: confirmDelete })}
</p>
<p style={{ margin: '0 0 20px', fontSize: 13, opacity: 0.7 }}>
<p style={{ margin: '0 0 20px', fontSize: 13, color: 'var(--text-secondary)' }}>
{t('project.confirmBody')}
</p>
<div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>