refactor(ui): extract canonical eyebrow label component - #310
Open
guyghost wants to merge 3 commits into
Open
Conversation
Normalize 120+ hand-rolled eyebrow label variants (size × tracking × weight × tone combinations across 36 files) to a single canonical .eyebrow class with modifiers (--caption, --strong, --subtle, --blue) defined in @pulse/ui. Rare one-off tones remain call-site utilities, which override the component color by layer precedence. Also remove dead code found during extraction: - ui/actions/ripple.ts (duplicate of @pulse/ui export) + its test - ui/atoms/RadarIcon.svelte (0 refs, only untokenized hex colors) - .card / .tag--* CSS and accent-* @theme aliases in design-tokens.css - GRADE_COLORS in core/types/score.ts Fix 3 untokenized text-[#0c0a09] in MissionCard → text-text-primary. Document the eyebrow spec in packages/design/DESIGN.md. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
🟢 Approval recommended
The refactor is cohesive and verified with searches for remaining references, with only minor text-whitespace nits identified in a few updated templates.
Pull request overview
This PR consolidates the extension’s “uppercase micro-text section marker” styling into a single canonical .eyebrow class in @pulse/ui, then updates the extension UI to use that class (with modifiers) instead of hand-rolled Tailwind utility combinations. It also removes several pieces of now-dead UI/CSS code and updates design documentation to reflect the canonical eyebrow spec.
Changes:
- Define canonical
.eyebrowstyling inpackages/ui/src/app.css, adding modifiers (--caption,--strong,--subtle,--blue). - Replace numerous per-callsite utility combos with
.eyebrow(+ modifiers) across extension Svelte components. - Remove unreferenced/dead code (ripple action + test, RadarIcon atom, unused CSS blocks, and unused
GRADE_COLORS) and updateDESIGN.md.
File summaries
| File | Description |
|---|---|
| packages/ui/src/app.css | Expands .eyebrow into a canonical component-layer style + introduces modifiers. |
| packages/design/DESIGN.md | Replaces stale design entries with the eyebrow label spec and usage guidance. |
| apps/extension/src/ui/templates/OnboardingLayout.svelte | Normalizes card header labels to .eyebrow --caption. |
| apps/extension/src/ui/pages/TJMPage.svelte | Replaces filter label utilities with .eyebrow. |
| apps/extension/src/ui/pages/SettingsPage.svelte | Normalizes many section/field labels to .eyebrow / modifiers. |
| apps/extension/src/ui/pages/ProfilePage.svelte | Normalizes “Priorités d’impact” and “Gain” labels to .eyebrow. |
| apps/extension/src/ui/pages/FeedPage.svelte | Uses .eyebrow--blue and .eyebrow--strong for feed headers and labels. |
| apps/extension/src/ui/pages/ApplicationsPage.svelte | Normalizes application status and section labels to .eyebrow / modifiers. |
| apps/extension/src/ui/organisms/TJMDashboard.svelte | Normalizes dashboard stat headings and badges to .eyebrow. |
| apps/extension/src/ui/organisms/SourceHealthPanel.svelte | Normalizes panel headings to .eyebrow / modifiers. |
| apps/extension/src/ui/organisms/ScanSummary.svelte | Uses .eyebrow for <dt> labels in scan summary. |
| apps/extension/src/ui/organisms/ScanSettings.svelte | Normalizes scan cadence labels to .eyebrow--strong. |
| apps/extension/src/ui/organisms/ScanProgress.svelte | Normalizes progress card headings to .eyebrow. |
| apps/extension/src/ui/organisms/ProfileSection.svelte | Normalizes profile form/display labels to .eyebrow. |
| apps/extension/src/ui/organisms/PlatformAccountsPanel.svelte | Normalizes headings to .eyebrow--strong (+ --blue where needed). |
| apps/extension/src/ui/organisms/OnboardingFlow.svelte | Normalizes step indicators and preview labels to .eyebrow--caption. |
| apps/extension/src/ui/organisms/MissionInvestigationDrawer.svelte | Normalizes drawer headings and fact labels to .eyebrow. |
| apps/extension/src/ui/organisms/MissionComparison.svelte | Normalizes comparison table headings/labels to .eyebrow / modifiers. |
| apps/extension/src/ui/organisms/MissionArrivalStack.svelte | Normalizes “En attente” header to .eyebrow. |
| apps/extension/src/ui/organisms/MetricsPanel.svelte | Normalizes panel headings and stat labels to .eyebrow / modifiers. |
| apps/extension/src/ui/organisms/FormAssistPanel.svelte | Normalizes premium header label to .eyebrow--strong --blue. |
| apps/extension/src/ui/organisms/FeedActionDashboard.svelte | Normalizes filter button labels and section heading to .eyebrow. |
| apps/extension/src/ui/organisms/ExperienceFeed.svelte | Normalizes sticky year heading to .eyebrow--strong --subtle. |
| apps/extension/src/ui/organisms/DangerZone.svelte | Normalizes destructive warning title to .eyebrow--strong (with utility color override). |
| apps/extension/src/ui/organisms/CopilotPanel.svelte | Normalizes legends and section labels to .eyebrow--caption variants. |
| apps/extension/src/ui/organisms/ApplicationPipelineSummary.svelte | Normalizes card labels and “Avancement” heading to .eyebrow variants. |
| apps/extension/src/ui/molecules/PageHeader.svelte | Switches to .eyebrow--blue for page header eyebrow text. |
| apps/extension/src/ui/molecules/OperationalStoryCard.svelte | Normalizes eyebrow/evidence labels to .eyebrow variants. |
| apps/extension/src/ui/molecules/OperationalEmptyState.svelte | Normalizes labels to .eyebrow variants. |
| apps/extension/src/ui/molecules/MissionCard.svelte | Normalizes badges/labels to .eyebrow variants and replaces untokenized text colors with tokens. |
| apps/extension/src/ui/molecules/KeyboardShortcutsHelp.svelte | Normalizes header + category headings to .eyebrow variants. |
| apps/extension/src/ui/molecules/FeedTourOverlay.svelte | Normalizes tour step eyebrow label to .eyebrow--caption. |
| apps/extension/src/ui/molecules/ExperienceCard.svelte | Normalizes source label to .eyebrow. |
| apps/extension/src/ui/molecules/ConnectorAlertBar.svelte | Normalizes “Impact opérationnel” label to .eyebrow--strong with utility color override. |
| apps/extension/src/ui/molecules/BackupRestoreModal.svelte | Normalizes stat labels and alert titles to .eyebrow variants. |
| apps/extension/src/ui/molecules/AlertBuilderCard.svelte | Normalizes form field labels and stat labels to .eyebrow. |
| apps/extension/src/ui/design-tokens.css | Removes unused compatibility theme aliases and unused .card / .tag--* CSS blocks. |
| apps/extension/src/ui/atoms/ConnectionIndicator.svelte | Normalizes status label to .eyebrow. |
| apps/extension/src/ui/atoms/RadarIcon.svelte | Removes unreferenced RadarIcon atom. |
| apps/extension/src/ui/actions/ripple.ts | Removes duplicate ripple action implementation. |
| apps/extension/tests/unit/ui/ripple.test.ts | Removes orphaned ripple unit test. |
| apps/extension/src/lib/core/types/score.ts | Removes unused GRADE_COLORS mapping. |
Review details
Suppressed comments (2)
apps/extension/src/ui/organisms/ProfileSection.svelte:148
- This label span includes leading/trailing whitespace inside the text node; prefer trimmed content to avoid unexpected spacing and brittle text assertions.
<span class="eyebrow"> Séniorité </span>
apps/extension/src/ui/organisms/CopilotPanel.svelte:467
- The legend content contains leading/trailing whitespace; trimming avoids inconsistent accessible names and accidental spacing.
<legend class="eyebrow eyebrow--caption eyebrow--subtle"> Profil </legend>
- Files reviewed: 42/42 changed files
- Comments generated: 4
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7c3d13f3f8
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Prettier single-line collapse after the eyebrow extraction kept the original multiline whitespace as literal spaces inside the tags. Trim all six flagged label texts. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
The eyebrow base class stamps Text Muted, which silenced tones that four labels previously inherited from tinted ancestors (MetricsPanel status, MissionComparison evidence pills, MissionCard decision insight, ConnectionIndicator per-status label). Add an eyebrow--inherit modifier (color: inherit) and apply it at those sites. Swap grade-badge text back to a non-flipping dark foreground via a new --color-text-on-bright token: --color-text-primary turns near-white in dark theme while the saturated badge fills keep their light values, dropping contrast to 2.62-3.43:1. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
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
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.
Summary
.eyebrowclass existed but was used correctly in only ~8 places. This normalizes every variant to the canonical class defined in@pulse/ui(packages/ui/src/app.css), extended with modifiers--caption,--strong,--subtle, and--blue. Rare one-off tones (status-red/orange, translucent blues) stay as call-site color utilities, which override the component color by Tailwind layer precedence. Two intentional skips: ConnectionIndicator's value display (no size/tracking pattern) and LogoVertical's display-scale wordmark.ui/actions/ripple.ts(duplicate of the@pulse/uiexport) and its orphan test,ui/atoms/RadarIcon.svelte(0 refs, only untokenized hex colors), the unused.card/.tag--*CSS andaccent-*@themealias block indesign-tokens.css(the aliases falsely aliased emerald to blueprint blue), andGRADE_COLORSincore/types/score.ts(0 refs).text-[#0c0a09]in MissionCard totext-text-primary, and replaces the stale Card Container / Status Tag entries inpackages/design/DESIGN.mdwith the eyebrow spec. Net: 42 files, +161/-559.No behavior change: pure class normalization plus deletions of unreferenced code. Verified with the Impeccable design detector (0 findings).
Verification
pnpm format:checkpnpm lintpnpm typecheckpnpm testpnpm buildChecklist