Primer branding: remove off-brand purple gradients and glassmorphism - #274
Draft
github-actions[bot] wants to merge 1 commit into
Draft
Primer branding: remove off-brand purple gradients and glassmorphism#274github-actions[bot] wants to merge 1 commit into
github-actions[bot] wants to merge 1 commit into
Conversation
Co-authored-by: Copilot <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.
What changed
Color — Removed off-brand purple/indigo gradients and glassmorphism, flagged directly by the Primer Brand review tool (
primer_brand_review):.btn-assistant(rest, hover, disabled): replacedlinear-gradient(135deg, var(--agent-purple), var(--agent-purple-dark))with a flatvar(--agent-purple-dark)fill; hover now lightens tovar(--agent-purple)instead of a second gradient/shadow layer..copy-modal-card: replaced a radial purple gradient +box-shadowcombo with a flatvar(--bg-card)surface and a solidvar(--agent-purple)1px border..copy-modal::backdrop: removedbackdrop-filter: blur(4px)(glassmorphism)..copy-modal-icon,.copy-modal-action: replaced purple gradients with flatvar(--agent-purple-dark)fills..option-card.priority-archetype: replaced alinear-gradientblue wash with a flatrgba(var(--accent-blue-rgb), 0.05)tint (same subtle highlight, no gradient).All colors already came from existing site accent variables (
--agent-purple,--agent-purple-dark,--accent-blue-rgb), so no new hex values were introduced — only the gradient/shadow/blur techniques were removed.Guidance that motivated each change (from the
primer-brandMCP server)Ran
primer_brand_reviewagainst the modified CSS sections. It returned these warnings, which drove the fixes:.btn-assistant/.copy-modal-*purple gradients..copy-modal-cardnow uses a flat surface with a 1px border instead of a gradient + large box-shadow.backdrop-filter: blur(4px)on the modal backdrop.After the fixes, a full-file
primer_brand_reviewre-run confirmed 0 errors and only pre-existing, lower-risk warnings remain (see below).Deviations found but deliberately not fixed
#ffffff,#f6f8fa,#24292f,#57606a, etc.: these are allvar(--color-*, #hex)fallback values for Primer CSS custom properties (the standard progressive-enhancement pattern used throughout this file for browsers/contexts where@primer/cssvariables aren't set), not raw hardcoded colors. Leaving as-is to avoid breaking the fallback chain.border-radius: 50%on.copy-modal-close): this is a small circular icon-only close button (×), not a CTA/label pill. Left as-is since it doesn't read as an off-brand rounded button in context..landing-title) and ambient thermo glow (.landing-glow) were reviewed separately withprimer_brand_reviewand passed clean (0 warnings for gradient/shadow/glass) — they use only Primer-aligned accent colors (blue, green) in one family, so they were kept per the "tasteful shine" allowance.Tests / build
npm test: all 323 tests pass. Two existing tests asserted on the specificlinear-gradient/var(--agent-purple)implementation details that this PR intentionally changes; they were updated to assert on the new flat-color implementation while preserving the same behavioral intent (subtle highlight present, hover/disabled colors correct).npm run build: the Vite bundling step itself succeeds (verified directly vianpx vite build). Theprebuildstep (scripts/fetch-vendor-assets.mjs) failed in this sandbox because outboundnpm packrequests to the npm registry return403 Forbidden— this is a pre-existing environment/network restriction, reproduced identically on a cleanmaincheckout with no changes applied, and is unrelated to this change set.Warning
Firewall blocked 1 domain
The following domain was blocked by the firewall during workflow execution:
registry.npmjs.orgTo allow these domains, add them to the
network.allowedlist in your workflow frontmatter:See Network Configuration for more information.