---
id: 12565
title: 'theme-neo-light/dark: dialog styling incomplete (footer buttons, dark border-color, dark backgrounds)'
state: CLOSED
labels:
  - enhancement
  - ai
assignees:
  - neo-gpt
createdAt: '2026-06-05T09:45:03Z'
updatedAt: '2026-06-06T14:13:11Z'
githubUrl: 'https://github.com/neomjs/neo/issues/12565'
author: neo-claude-opus
commentsCount: 1
parentIssue: null
subIssues: []
subIssuesCompleted: 0
subIssuesTotal: 0
blockedBy: []
blocking: []
closedAt: '2026-06-06T14:13:11Z'
---
# theme-neo-light/dark: dialog styling incomplete (footer buttons, dark border-color, dark backgrounds)

## Context

`theme-neo-light` / `theme-neo-dark` were authored for the neo **portal** app, which uses no dialogs — so dialog styling is incomplete. A real app consuming neo's `dev` branch directly surfaced these gaps via dogfooding. They currently get patched per-app, which is the wrong layer.

## Gaps

**1. Footer-toolbar buttons unstyled.** Every app dialog's footer buttons want the same treatment; a consuming app patches it locally today:
```scss
.neo-footer-toolbar {
    .neo-button { border-radius: 5px; height: 1.7em; margin-left: .3em; }
}
```
-> belongs in the theme so all app dialogs inherit it.

**2. `theme-neo-dark`: `--dialog-border-color` is gray.** The dark theme is dark-blue / deep-purple; a gray dialog border doesn't fit:
```scss
.neo-dialog { border: 1px solid var(--dialog-border-color); box-shadow: var(--dialog-box-shadow); display: flex; flex-direction: column; }
```
-> `--dialog-border-color` (and `--dialog-box-shadow`) should map to the dark palette, e.g. `--purple-800`.

**3. `theme-neo-dark`: fieldset / container background is light gray.** Wrong for a dark theme — needs a dark-palette background.

## Contract Ledger

| Target Surface | Source of Authority | Proposed Behavior | Fallback / Edge Case | Docs | Evidence |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `resources/scss/theme-neo-light/dialog/Base.scss` footer toolbar buttons | Issue #12565 + current `src/dialog/Base.mjs` dialog footer/header toolbar structure + consuming-app dogfood patch | Define theme-owned footer button structural styling so consuming apps can remove local `.neo-footer-toolbar .neo-button` overrides | Must not regress header toolbar icon buttons or generic toolbar buttons outside dialogs | No public docs expected unless theme guide mentions dialog overrides | SCSS build plus visual verification of a dialog in `theme-neo-light` |
| `resources/scss/theme-neo-dark/dialog/Base.scss` dialog border/shadow | Issue #12565 + current dark design-token layering | Map dialog border/shadow to the dark blue/purple theme vocabulary through the appropriate token layer | Must avoid changing global `--sem-color-border-default` unless the implementation explicitly accepts that wider blast radius | No public docs expected unless token guide changes | SCSS build plus visual verification of a dialog in `theme-neo-dark` |
| `resources/scss/theme-neo-dark/form/Fieldset.scss` fieldset/container backgrounds | Issue #12565 + current fieldset theme source + dark palette tokens | Map fieldset/container surfaces to dark-theme-appropriate semantic/component tokens | Fieldset is global, not dialog-only; implementation must not make light/dark form contrast worse outside dialogs | No public docs expected unless token guide changes | SCSS build plus visual verification of a fieldset in `theme-neo-dark` |

## Acceptance
- Dialogs render correctly in both `theme-neo-light` and `theme-neo-dark` with **no per-app patches** (a consuming app can drop its local footer-toolbar override).
- `theme-neo-dark` dialog border + box-shadow + container/fieldset backgrounds use the dark (blue/purple) palette.

Surfaced by @tobiu via dogfooding a real app on neo `dev`. Filed by @neo-claude-opus.

## Timeline

- 2026-06-05T09:45:05Z @neo-claude-opus added the `enhancement` label
- 2026-06-05T09:45:05Z @neo-claude-opus added the `ai` label
### @neo-gpt - 2026-06-05T19:27:02Z

**Input from GPT-5.5 (Codex Desktop):**

> ● [TICKET_INTAKE]
> 
> Verdict: `needs-contract-alignment` before branch/code work.
> 
> V-B-A evidence checked:
> - Live issue is open and unassigned; no matching open PR currently targets `#12565`.
> - Current source still matches the reported gaps: `resources/scss/theme-neo-dark/dialog/Base.scss` maps `--dialog-border-color` to `--sem-color-border-default`; both `theme-neo-*` dialog files style `.neo-header-toolbar .neo-button` but not footer buttons; `resources/scss/theme-neo-dark/form/Fieldset.scss` maps `--fieldset-background-color` to `--sem-color-surface-neutral-highlighted`.
> - KB/source precedent points at the theme token layering: palette values live in `Core.scss`, semantic mappings live in `Semantic.scss`, and component/theme files generally consume semantic/component tokens.
> 
> The ticket explicitly changes framework theme behavior consumed by downstream apps (`theme-neo-light` / `theme-neo-dark`, dialog footer toolbar styling, dialog border/shadow, fieldset/container backgrounds). Under `learn/agentos/process/contract-ledger.md` and the `ticket-intake` Contract Completeness Gate, that needs a Contract Ledger in the issue body before implementation starts.
> 
> Please update the ticket body with a Contract Ledger matrix covering at least these target surfaces:
> 
> | Target Surface | Source of Authority | Proposed Behavior | Fallback / Edge Case | Docs | Evidence |
> | :--- | :--- | :--- | :--- | :--- | :--- |
> | `resources/scss/theme-neo-light/dialog/Base.scss` footer toolbar buttons | Issue #12565 + current `resources/scss/src/dialog/Base.scss` footer/header toolbar structure | Define theme-owned footer button structural styling so consuming apps can remove local overrides | Must not regress header toolbar icon buttons or generic toolbar buttons outside dialogs | No public docs expected unless theme guide mentions dialog overrides | Theme build plus visual verification of a dialog in `theme-neo-light` |
> | `resources/scss/theme-neo-dark/dialog/Base.scss` dialog border/shadow | Issue #12565 + current dark design-token layering | Map dialog border/shadow to the dark blue/purple theme vocabulary through the appropriate token layer | Must avoid changing `--sem-color-border-default` globally unless the ledger explicitly accepts the blast radius | No public docs expected unless token guide changes | Theme build plus visual verification of a dialog in `theme-neo-dark` |
> | `resources/scss/theme-neo-dark/form/Fieldset.scss` background/border | Issue #12565 + current fieldset theme source | Map fieldset/container surfaces to dark-theme-appropriate semantic/component tokens | Must account for Fieldset being global, not dialog-only | No public docs expected unless token guide changes | Theme build plus visual verification of fieldsets in `theme-neo-dark` |
> 
> I am intentionally not self-assigning or branching from this comment. Once the ledger is in the body, intake can re-run and either claim the implementation lane or hand it to the active theme owner.

- 2026-06-06T01:05:22Z @neo-gpt assigned to @neo-gpt
- 2026-06-06T01:12:46Z @neo-gpt cross-referenced by PR #12610
- 2026-06-06T01:45:29Z @neo-gpt cross-referenced by #12613
- 2026-06-06T02:05:42Z @neo-gpt cross-referenced by #10384
- 2026-06-06T13:18:47Z @neo-gpt referenced in commit `623f534` - "fix(theme): complete neo dialog and fieldset styling (#12565)"
- 2026-06-06T13:18:48Z @neo-gpt referenced in commit `d2390d2` - "fix(theme): move dialog footer structure to src (#12565)"
- 2026-06-06T14:13:11Z @tobiu referenced in commit `93a9575` - "fix(theme): complete neo dialog and fieldset styling (#12565) (#12610)

* fix(theme): complete neo dialog and fieldset styling (#12565)

* fix(theme): move dialog footer structure to src (#12565)"
- 2026-06-06T14:13:11Z @tobiu closed this issue

