0 Fork 0

Files

T

VasanthandClaude Opus 5.5 7f2ddecffb No-AI skill tracer: SKILL.md, theme presets, sample data, Seam 1 page check

- 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>

2026-10-16 13:59:26 +05:30

4.6 KiB

Raw Blame History

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.

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.

<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">

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.

4.6 KiB Raw Blame History

Theme presets

1. Tebra Sky (the template default)

2. Superbill Ember

3. Custom (one brand hex)

4.6 KiB

Raw Blame History