Skip to content

Add canonical design-token source (tokens.json) for the dashboard palette#183

Merged
github-actions[bot] merged 4 commits into
developfrom
design-tokens-source
Jul 5, 2026
Merged

Add canonical design-token source (tokens.json) for the dashboard palette#183
github-actions[bot] merged 4 commits into
developfrom
design-tokens-source

Conversation

@seonghobae

Copy link
Copy Markdown
Contributor

Summary

Develops the product's design-token source so the dashboard palette is code-backed and versioned, rather than hardcoded inline. This also makes the Figma KRDS design-system colors source-backed (Code Token) instead of KRDS-fallback.

  • scanner/dashboard/tokens.json — canonical AppGuardrail color + radius tokens, each with a role, WCAG contrast note, and (for severities) a mapping to appguardrail_core/findings.py. Semantic names align with the Figma library.
  • appguardrail dashboard generates /tokens.css from tokens.json at serve time (render_tokens_css) and serves it. The HTML links it after the inline fallback so served values win; if tokens.css is unavailable the page is still styled.
  • Packaged into the wheel (pyproject package-data + MANIFEST.in).

Test plan

  • pytest tests/ — 80 passed incl. 3 new: token-source validity, CSS generation, /tokens.css route
  • e2e: appguardrail dashboard serves /tokens.css with all palette values from tokens.json
  • headless Chrome: computed --primary resolves to #256EF4 from the served stylesheet; link[href="tokens.css"] present

Why

Prior state marked the product color palette as a genuine Gap (no source in repo → Figma used KRDS fallback). This creates that source: a versioned token file consumed by the real dashboard, so the palette is now authoritative product code.

🤖 Generated with Claude Code

seonghobae and others added 3 commits July 5, 2026 19:11
…oard

Turns the dashboard's hardcoded palette into a versioned product design-token
source of truth, so colors are code-backed rather than ad-hoc.

- scanner/dashboard/tokens.json: canonical AppGuardrail color + radius tokens
  with roles, WCAG contrast notes, and findings.py severity mappings. Semantic
  names align with the KRDS-based Figma library.
- `appguardrail dashboard` now generates /tokens.css from tokens.json
  (render_tokens_css) and serves it; the HTML links it last so served values
  win over an inline fallback (page still styled if tokens.css is absent).
- Packaged in the wheel (pyproject package-data + MANIFEST.in).
- Tests: token source validity, CSS generation, and the /tokens.css route.
- Verified: pytest green; headless Chrome resolves --primary #256EF4 from the
  served tokens.css.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EywwS2Du8pimW7xqRP3An3
Closes the High Contrast Gap by developing it as real product source rather
than leaving it as a KRDS/WCAG candidate.

- tokens.json gains a `high-contrast` block (WCAG AAA-oriented overrides:
  text/border #000, primary #0038A8, stronger status colors).
- render_tokens_css emits an `@media (prefers-contrast: more)` :root override,
  so the dashboard adapts automatically to the user's contrast preference.
- Tests: HC block presence + media-query generation.
- Verified: served /tokens.css contains the media rule; headless Chrome CSSOM
  resolves the HC :root override (--primary #0038A8, --text #000000).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EywwS2Du8pimW7xqRP3An3
The dashboard keeps a hardcoded :root fallback (for file:// use where the
server-generated /tokens.css 404s). That created a second copy of the palette
that could silently drift from the source of truth.

Add a test that parses the inline fallback and asserts every custom property
equals the value generated from tokens.json (color-notation normalized so
#fff == #FFFFFF). Any future token edit that isn't mirrored now fails CI.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EywwS2Du8pimW7xqRP3An3
@seonghobae seonghobae force-pushed the design-tokens-source branch from 9fd12e0 to dde3e9d Compare July 5, 2026 10:11
@github-advanced-security

Copy link
Copy Markdown

You are seeing this message because GitHub Code Scanning has recently been set up for this repository, or this pull request contains the workflow file for the Code Scanning tool.

What Enabling Code Scanning Means:

  • The 'Security' tab will display more code scanning analysis results (e.g., for the default branch).
  • Depending on your configuration and choice of analysis tool, future pull requests will be annotated with code scanning analysis results.
  • You will be able to see the analysis results for the pull request's branch on this overview once the scans have completed and the checks have passed.

For more information about GitHub Code Scanning, check out the documentation.

…library

tokens.json claimed to be "canonical design tokens" but only carried color +
one radius. The Figma library's radius, spacing, and size scales had no code
source. Source them so the whole system — not just color — is code-backed.

- tokens.json: full radius scale (none..full), spacing scale (0..64), and
  size scale (control/icon/touch-target), sourced from the Figma collections.
- render_tokens_css emits --radius-*/--space-*/--size-* plus a --radius alias
  (card-alias = lg). Colors and HC mode unchanged.
- Dashboard card radius moved onto the scale (10px -> --radius lg = 12px),
  fixing an off-scale value the earlier "10 == md" parity note got wrong.
- Drift test flipped to fallback-subset-of-source so the served tokens.css can
  expose the full scale while the inline fallback stays minimal.
- Verified: pytest green; headless Chrome resolves --radius 12px, --radius-md
  8px, --space-16, --size-touch-target 44px; card renders on-scale, no regress.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EywwS2Du8pimW7xqRP3An3
@opencode-agent

opencode-agent Bot commented Jul 5, 2026

Copy link
Copy Markdown

OpenCode Review Overview

  • Head SHA: 7d8e41815d04b717e98ca247506994ce7f2c4895
  • Workflow run: 28739276019
  • Workflow attempt: 1
  • Gate result: APPROVE (approval step)

Pull request overview

OpenCode reviewed the current-head bounded evidence and found no blocking issues.

Findings

No blocking findings.

Summary

Approval sufficiency: bounded evidence supplied affirmative approval evidence for changed files, coverage/docstring posture, risk surfaces, and current-head verification; approval is not based merely on the absence of known blockers.
Verification posture: CodeGraph evidence was initialized and bounded current-head evidence reviewed for changed-file evidence including pyproject.toml, scanner/cli/appguardrail.py, scanner/dashboard/index.html, scanner/dashboard/tokens.json, tests/test_dashboard_core.py.
Linter/static: workflow/static review evidence is bounded by the current-head GitHub Checks gate and changed-file evidence.
TDD/regression: coverage execution evidence and focused changed hunks were reviewed from bounded-review-evidence.md.
Coverage: coverage execution evidence reports supported repository test suites passed.
Docstring coverage: coverage execution evidence reports configured repository docstring gates passed or docstring coverage was advisory.
DAG: CodeGraph/source-backed behavior map connects pyproject.toml to the affected review, runtime, or workflow path and required checks.
PoC/execution: coverage-evidence job executed on the current head and reported PASS.
DDD/domain: workflow and repository-governance invariants were reviewed against changed files in bounded evidence.
CDD/context: CodeGraph evidence, changed-file history, and focused hunks were reviewed from bounded-review-evidence.md.
Similar issues: changed-file history evidence was reviewed for comparable local precedents.
Claim/concept check: bounded evidence, repository source, current-head workflow evidence, and, where numeric, scientific, statistical, or literature-backed claims are affected, original-paper/formula evidence and parameter-recovery expectations were used for claims.
Standards search: standards and external-source checks are delegated to configured OpenCode web_search/Context7/DeepWiki sources when applicable; no evidence-backed standards blocker is present in bounded evidence.
Compatibility/convention: changed workflow/script conventions, object naming, and reserved-word safety for schema/API/config/code surfaces were checked in bounded evidence.
Breaking-change/backcompat: deployment evidence and changed-file history were checked for backward-compatibility risk.
Performance: changed surfaces were checked for performance risk in bounded evidence.
Developer experience: changed automation, review, test, setup, and maintenance surfaces were checked for helpful or obstructive DX impact in bounded evidence.
User experience: connected user, operator, API, CLI, documentation, review-comment, status-check, rendering, and workflow-reader behavior was checked for contradictions against code, docs, and tests in bounded evidence.
Visual/DOM: Playwright visual, DOM locator, ARIA snapshot, console, and responsive evidence were checked when a web UI surface was present; for non-web surfaces, API/CLI/log/docs/workflow interaction evidence was reviewed instead.
Accessibility/i18n: accessibility, localization, and human-readable text surfaces were checked where UI, CLI, API message, docs, logs, or review text changed.
Supply-chain/license: dependency, package, model, container, and external-tool changes were checked in bounded evidence.
Packaging: package, build, test, lint, and security contracts were checked in bounded evidence.
Security/privacy: workflow-token, review-gate, and repository-automation security/privacy boundaries were checked in bounded evidence.

  • Result: APPROVE
  • Reason: PR introduces a well-tested design-token source with no blocking issues.
  • Head SHA: 7d8e41815d04b717e98ca247506994ce7f2c4895
  • Workflow run: 28739276019
  • Workflow attempt: 1

Changed-File Evidence Map

flowchart LR
  PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
  Evidence --> S1["Changed file (5 files)"]
  S1 --> I1["repository behavior"]
  I1 --> R1["Review risk: Changed file (5 files)"]
  R1 --> V1["required checks"]
  Evidence --> S2["Test: test_dashboard_core.py"]
  S2 --> I2["regression suite"]
  I2 --> R2["Review risk: Test: test_dashboard_core.py"]
  R2 --> V2["targeted test run"]
Loading

@opencode-agent opencode-agent Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

OpenCode reviewed the current-head bounded evidence and found no blocking issues.

Findings

No blocking findings.

Summary

Approval sufficiency: bounded evidence supplied affirmative approval evidence for changed files, coverage/docstring posture, risk surfaces, and current-head verification; approval is not based merely on the absence of known blockers.
Verification posture: CodeGraph evidence was initialized and bounded current-head evidence reviewed for changed-file evidence including pyproject.toml, scanner/cli/appguardrail.py, scanner/dashboard/index.html, scanner/dashboard/tokens.json, tests/test_dashboard_core.py.
Linter/static: workflow/static review evidence is bounded by the current-head GitHub Checks gate and changed-file evidence.
TDD/regression: coverage execution evidence and focused changed hunks were reviewed from bounded-review-evidence.md.
Coverage: coverage execution evidence reports supported repository test suites passed.
Docstring coverage: coverage execution evidence reports configured repository docstring gates passed or docstring coverage was advisory.
DAG: CodeGraph/source-backed behavior map connects pyproject.toml to the affected review, runtime, or workflow path and required checks.
PoC/execution: coverage-evidence job executed on the current head and reported PASS.
DDD/domain: workflow and repository-governance invariants were reviewed against changed files in bounded evidence.
CDD/context: CodeGraph evidence, changed-file history, and focused hunks were reviewed from bounded-review-evidence.md.
Similar issues: changed-file history evidence was reviewed for comparable local precedents.
Claim/concept check: bounded evidence, repository source, current-head workflow evidence, and, where numeric, scientific, statistical, or literature-backed claims are affected, original-paper/formula evidence and parameter-recovery expectations were used for claims.
Standards search: standards and external-source checks are delegated to configured OpenCode web_search/Context7/DeepWiki sources when applicable; no evidence-backed standards blocker is present in bounded evidence.
Compatibility/convention: changed workflow/script conventions, object naming, and reserved-word safety for schema/API/config/code surfaces were checked in bounded evidence.
Breaking-change/backcompat: deployment evidence and changed-file history were checked for backward-compatibility risk.
Performance: changed surfaces were checked for performance risk in bounded evidence.
Developer experience: changed automation, review, test, setup, and maintenance surfaces were checked for helpful or obstructive DX impact in bounded evidence.
User experience: connected user, operator, API, CLI, documentation, review-comment, status-check, rendering, and workflow-reader behavior was checked for contradictions against code, docs, and tests in bounded evidence.
Visual/DOM: Playwright visual, DOM locator, ARIA snapshot, console, and responsive evidence were checked when a web UI surface was present; for non-web surfaces, API/CLI/log/docs/workflow interaction evidence was reviewed instead.
Accessibility/i18n: accessibility, localization, and human-readable text surfaces were checked where UI, CLI, API message, docs, logs, or review text changed.
Supply-chain/license: dependency, package, model, container, and external-tool changes were checked in bounded evidence.
Packaging: package, build, test, lint, and security contracts were checked in bounded evidence.
Security/privacy: workflow-token, review-gate, and repository-automation security/privacy boundaries were checked in bounded evidence.

  • Result: APPROVE
  • Reason: PR introduces a well-tested design-token source with no blocking issues.
  • Head SHA: 7d8e41815d04b717e98ca247506994ce7f2c4895
  • Workflow run: 28739276019
  • Workflow attempt: 1

Changed-File Evidence Map

flowchart LR
  PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
  Evidence --> S1["Changed file (5 files)"]
  S1 --> I1["repository behavior"]
  I1 --> R1["Review risk: Changed file (5 files)"]
  R1 --> V1["required checks"]
  Evidence --> S2["Test: test_dashboard_core.py"]
  S2 --> I2["regression suite"]
  I2 --> R2["Review risk: Test: test_dashboard_core.py"]
  R2 --> V2["targeted test run"]
Loading

@github-actions github-actions Bot enabled auto-merge (squash) July 5, 2026 11:41
@github-actions github-actions Bot merged commit cc50339 into develop Jul 5, 2026
19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants