fix(ui): resolve design-system contract discrepancies - #79
Merged
DamienBattistella merged 1 commit intoJul 22, 2026
Conversation
Audited the "Signal" design system against its canonical spec (docs/design-system.md) and fixed three deviations from the color contract and component rules: - Settings: the "Restart now" update button used a bespoke .pc-btn--success (status green) as its fill, violating §1.2 — blue (accent) is the only interactive color; green/amber/red are status only. Switched to pc-btn--primary and removed the dead variant CSS. This also matches the identical "Restart now" button in AppLayout. - Dashboard: the "Live" presence chip rendered only the equalizer; §5.2 specifies the chip as "success dot + M11 equalizer". Added the paired success dot. - ConnectionTile: the tile re-implemented raised-surface styling (background/border-radius) locally instead of using the canonical .pc-panel--raised class (§5.0.1, the one card system). Adopted the class and dropped the duplicated declarations. No visual regression; build, lint, and all 154 unit tests pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011AmgRn7jspXjSsLdCszX4C
DamienBattistella
marked this pull request as ready for review
July 22, 2026 22:17
|
🎉 This PR is included in version 1.10.2 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Audited the "Signal" design system implementation against its canonical spec (
docs/design-system.md) and fixed three deviations from the color contract and component rules. The infrastructure (tokens, PrimeVue preset, motion catalogue, deletions in §7) was already fully in place — these are the residual template-level discrepancies.Settings.vue.pc-btn--success(status green)pc-btn--primary; dead.pc-btn--successCSS removed (also matches the identical button inAppLayout.vue)Dashboard.vuepc-dot pc-dot--successConnectionTile.vue.pc-panel--raisedis the one card systembackground/border-radiuslocally.pc-panel--raised, dropped the duplicated declarationsItems considered and intentionally left unchanged (documented for reviewers): the
--pc-surface-700/-200hover backgrounds match how canonicalcomponents.cssand spec §5.0.2 define secondary-button hover (no role alias exists for hover-surface); the DiscordSpecimen♪placeholder in--pc-blurpleis spec-mandated (§5.0.4); always-available Reconnect is already provided by the topbar node popovers; theCUSTOM IDaccent badge is consistent across Settings and Setup and is unspecified by §5.0.3.Type of Change
Related Issues
Closes #
Testing
npm run buildsucceeds,eslintis clean on the changed files, and all 154 unit tests pass. Changes are token-only and produce no visual regression.Checklist
Additional Notes
Audit covered every page and shared component against the full spec (color contract §1.2, tokens §2, preset §3, motion §4, page blueprints §5, a11y §6, deletions §7). The vast majority of the "Signal" system was already implemented faithfully; only the three template-level items above deviated.
🤖 Generated with Claude Code
https://claude.ai/code/session_011AmgRn7jspXjSsLdCszX4C
Generated by Claude Code