VasanthandClaude Opus 5.5
7f2ddecffb
- rpa-dashboard-no-ai/SKILL.md: trigger description and the workflow in spec order (scan, report/keep-or-restyle, colours, stack, sections, build, wire, verify). - templates/themes.md: Tebra Sky and Superbill Ember, light and dark blocks. - templates/palette.py: derives a custom palette from one brand hex and checks text contrast in light and dark. - dashboard.html: built-in sample data so a page with no bot works on first open; cleared batches in the donut; component tokens so Ember is a token-only swap; accessible names for KPI cards, nav, steps, log, search and the dark toggle. - bridge.py: placeholders inside string literals, so it passes the lint hook unfilled. - tests/page_check: Seam 1 harness (fake Qt bridge, light/dark/narrow). - tests/evals: Seam 2 runner and fixture a-empty. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
100 lines
4.6 KiB
Markdown
100 lines
4.6 KiB
Markdown
# Theme presets
|
|
|
|
The theme lives **only** in the two token blocks at the top of `dashboard.html`:
|
|
`body{...}` (light) and `body.dark{...}` (dark). To apply a theme, replace both
|
|
blocks. Never edit component CSS, layout or script to restyle. Every palette
|
|
ships with both blocks, so dark mode never looks broken.
|
|
|
|
Status colours `--ok`, `--warn` and `--bad` are semantic (done / in progress or
|
|
attention / failed). Keep them unless the user gives their own.
|
|
|
|
Component tokens say where a preset puts its brand:
|
|
`--header-bg`, `--header-ink`, `--header-muted` (top bar), `--primary-bg`
|
|
(primary buttons), `--nav-active-bg` (active nav row and avatar),
|
|
`--progress-bg` (progress fill), `--blur` (glass blur, or `none` for flat),
|
|
`--font` (body) and `--font-display` (headings, figures, buttons).
|
|
|
|
## 1. Tebra Sky (the template default)
|
|
|
|
Blue glass cards on a sky gradient. Segoe UI. Accent `#3d9bd0`.
|
|
|
|
```css
|
|
body{
|
|
--bg-top:#8fc9e8; --bg-mid:#bfe3f2; --bg-bottom:#eaf6fb;
|
|
--glass:rgba(255,255,255,.60); --glass-strong:rgba(255,255,255,.78); --border:rgba(255,255,255,.9);
|
|
--ink:#1c2b33; --muted:#5c7382; --accent-dark:#16202a;
|
|
--accent:#3d9bd0; --accent-2:#5cb2e2; --accent-soft:#d4edfa; --accent-soft-2:#a9d8ee;
|
|
--ok:#1f9d57; --ok-bg:#e6f6ec; --warn:#b7791f; --warn-bg:#fbf1dd; --bad:#c0392b; --bad-bg:#fdecea;
|
|
--font:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif; --font-display:var(--font);
|
|
--header-bg:var(--glass-strong); --header-ink:var(--ink); --header-muted:var(--muted);
|
|
--primary-bg:linear-gradient(180deg,var(--accent-2),var(--accent));
|
|
--nav-active-bg:linear-gradient(135deg,var(--accent),var(--accent-dark));
|
|
--progress-bg:var(--ok); --blur:blur(14px);
|
|
}
|
|
body.dark{
|
|
--bg-top:#0f1b26; --bg-mid:#13212e; --bg-bottom:#182a38;
|
|
--glass:rgba(22,34,44,.72); --glass-strong:rgba(30,45,58,.85); --border:rgba(120,160,190,.22);
|
|
--ink:#e6eef4; --muted:#8fa6b4; --accent-dark:#2e5d80;
|
|
--accent-soft:#2e5d90; --accent-soft-2:#1d3d5e;
|
|
--ok:#2fbf72; --ok-bg:rgba(31,157,87,.16); --warn:#d9a13c; --warn-bg:rgba(183,121,31,.16);
|
|
--bad:#e05a4b; --bad-bg:rgba(192,57,43,.16);
|
|
}
|
|
```
|
|
|
|
## 2. Superbill Ember
|
|
|
|
Flat surfaces. The brand gradient `#ff3049` → `#f26b21` appears **only** on the
|
|
top bar, primary buttons, the active nav row and the progress fill. Nothing else
|
|
gets it. Sora for display, IBM Plex Sans for body.
|
|
|
|
Also add this line inside `<head>`, before `<style>`. Offline (for example in a
|
|
PyQt app with no internet), the fonts fall back to Segoe UI, which is fine.
|
|
|
|
```html
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap">
|
|
```
|
|
|
|
```css
|
|
body{
|
|
--bg-top:#f4f3f7; --bg-mid:#f4f3f7; --bg-bottom:#f4f3f7;
|
|
--glass:#ffffff; --glass-strong:#f7f6fa; --border:#e2dfe9;
|
|
--ink:#18151f; --muted:#66607a; --accent-dark:#18151f;
|
|
--accent:#ff3049; --accent-2:#f26b21; --accent-soft:#f7f6fa; --accent-soft-2:#e2dfe9;
|
|
--ok:#1f9d57; --ok-bg:#e6f6ec; --warn:#b7791f; --warn-bg:#fbf1dd; --bad:#c0392b; --bad-bg:#fdecea;
|
|
--font:'IBM Plex Sans','Segoe UI',-apple-system,sans-serif; --font-display:'Sora','Segoe UI',sans-serif;
|
|
--header-bg:linear-gradient(100deg,#ff3049,#f26b21); --header-ink:#ffffff; --header-muted:rgba(255,255,255,.85);
|
|
--primary-bg:linear-gradient(115deg,#ff3049,#f26b21);
|
|
--nav-active-bg:linear-gradient(100deg,#ff3049,#f26b21);
|
|
--progress-bg:linear-gradient(90deg,#ff3049,#f26b21); --blur:none;
|
|
}
|
|
body.dark{
|
|
--bg-top:#0a0912; --bg-mid:#0a0912; --bg-bottom:#0a0912;
|
|
--glass:#151220; --glass-strong:#1b1727; --border:#2a2438;
|
|
--ink:#f3f1f8; --muted:#8d87a0; --accent-dark:#100e1a;
|
|
--accent-soft:#1b1727; --accent-soft-2:#2a2438;
|
|
--ok:#2fbf72; --ok-bg:rgba(31,157,87,.16); --warn:#d9a13c; --warn-bg:rgba(183,121,31,.16);
|
|
--bad:#e05a4b; --bad-bg:rgba(192,57,43,.16);
|
|
}
|
|
```
|
|
|
|
## 3. Custom (one brand hex)
|
|
|
|
Start from the Tebra Sky blocks above, then derive the accent family from the
|
|
user's brand colour:
|
|
|
|
```
|
|
python <skill>/templates/palette.py "#7a3cff"
|
|
```
|
|
|
|
It prints the `--accent`, `--accent-2`, `--accent-dark`, `--accent-soft` and
|
|
`--accent-soft-2` values for both blocks, then a contrast table for light and dark:
|
|
- white button text on the accents, at least 3:1;
|
|
- accent-coloured text on the page, at least 3:1;
|
|
- ink on the soft buttons, at least 4.5:1;
|
|
- log text on the log box, at least 4.5:1.
|
|
|
|
If the brand colour is too light or too dark to read, the script nudges it until
|
|
every check passes. Paste the printed tokens over the same tokens in both blocks.
|
|
Show the user the contrast table, and say so if their colour was nudged.
|
|
Keep ok/warn/bad unless the user gives their own.
|