Skip to content

feat(theme): unify platform colors, refine badges, and tighten api-status chips #1089

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Huxpro merged 10 commits into from
Jun 7, 2026
Merged

feat(theme): unify platform colors, refine badges, and tighten api-status chips #1089

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
477bea1
refactor(theme): centralize platform color tokens
Huxpro Jun 4, 2026
1d22ce1
feat(badge): unify PlatformBadge palette and reframe Only/No variants
Huxpro Jun 4, 2026
af23da6
fix(badge): keep ClayOnly/NoClay component keys when label says Desktop
Huxpro Jun 4, 2026
366ef57
chore: re-trigger CI
Huxpro Jun 4, 2026
38ab2ec
fix(badge): vertical-align middle so chip sits on the line center
Huxpro Jun 4, 2026
7af5676
fix(icons): tighten Android viewBox and shrink api/status support chips
Huxpro Jun 7, 2026
d251a15
fix(api-status): size support-chip icon via --icon-size and force inl…
Huxpro Jun 7, 2026
ad0694c
fix(api-status): restore breathing room on support-chip layout
Huxpro Jun 7, 2026
6a4bcd1
fix(api-status): force support-chip icon to 10px via inline style
Huxpro Jun 7, 2026
f7d2f11
Merge branch 'main' into feat/unify-platform-colors
Huxpro Jun 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
269 changes: 131 additions & 138 deletions src/components/api-badge/PlatformBadge.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,175 +1,168 @@
/*
* Platform-specific color overrides for PlatformBadge.
* PlatformBadge styling. Single source of truth for platform color is
* platform-navigation/platform-colors.ts, whose hex values are mirrored
* below. If you change one, change both.
*
* Overrides all Rspress Badge type variables (info, warning, danger)
* so the badge always renders in the platform's color.
*
* Color values match PLATFORM_CONFIG in src/components/api-status/constants.tsx:
* android → emerald
* ios → blue
* harmony → orange
* web_lynx → purple
* clay → teal
* clay_android → teal
* clay_ios → cyan
* clay_macos → indigo
* clay_windows → sky
*
* Light mode: Tailwind {color}-700 for text, {color}-500 at ~10% for bg.
* Dark mode: Tailwind {color}-400 for text, {color}-500 at ~15% for bg.
* Design intent:
* - Icon stays in full platform color so the badge is still scannable.
* - Background drops to a tinted 50/950 wash. Less ink, same signal.
* - The semantic variants default, *Only, No* read as three distinct
* things instead of "same chip, different word":
* default platform color, subtle bg
* .platform-badge--only adds an inset ring in the platform color
* .platform-badge--no drops platform color, mutes, strikes the label
*/

/* android → emerald */
.platform-badge-android {
--rp-container-info-text: #047857;
--rp-container-info-bg: #10b9811a;
--rp-container-warning-text: #047857;
--rp-container-warning-bg: #10b9811a;
--rp-container-danger-text: #047857;
--rp-container-danger-bg: #10b9811a;
/* ── Base: tighten Rspress's container variables to a quiet, tinted wash ── */

/* apple family (ios, macos) → zinc */
.platform-badge-ios,
.platform-badge-clay_ios,
.platform-badge-macos,
.platform-badge-clay_macos {
--platform-badge-fg: #52525b; /* zinc-600 */
Comment on lines +18 to +23

@coderabbitai coderabbitai Bot Jun 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Align clay_ios/clay_macos with the centralized Clay hue contract.

platform-colors.ts maps every clay_* key to the Clay/cyan family, but this stylesheet still assigns clay_ios and clay_macos to Apple/zinc in both light and dark rules. That breaks the new unified mapping and makes Clay variants visually inconsistent.

Proposed fix 
 /* apple family (ios, macos) → zinc */
 .platform-badge-ios,
-.platform-badge-clay_ios,
 .platform-badge-macos,
-.platform-badge-clay_macos {
+.platform-badge-macos {
   --platform-badge-fg: `#52525b`; /* zinc-600 */
   --platform-badge-bg: `#fafafa`; /* zinc-50 */
   --platform-badge-ring: `#d4d4d8`; /* zinc-300 */
 }

 /* clay umbrella + variants → cyan (Clay/Desktop signature) */
 .platform-badge-clay,
+.platform-badge-clay_ios,
 .platform-badge-clay_android,
+.platform-badge-clay_macos,
 .platform-badge-clay_windows {
   --platform-badge-fg: `#0891b2`;
   --platform-badge-bg: `#ecfeff`;
   --platform-badge-ring: `#a5f3fc`;
 }

 :where(html.rp-dark, html.dark) .platform-badge-ios,
-:where(html.rp-dark, html.dark) .platform-badge-clay_ios,
 :where(html.rp-dark, html.dark) .platform-badge-macos,
-:where(html.rp-dark, html.dark) .platform-badge-clay_macos {
+:where(html.rp-dark, html.dark) .platform-badge-macos {
   --platform-badge-fg: `#d4d4d8`;
   --platform-badge-bg: `#27272a99`;
   --platform-badge-ring: `#52525b`;
 }

 :where(html.rp-dark, html.dark) .platform-badge-clay,
+:where(html.rp-dark, html.dark) .platform-badge-clay_ios,
 :where(html.rp-dark, html.dark) .platform-badge-clay_android,
+:where(html.rp-dark, html.dark) .platform-badge-clay_macos,
 :where(html.rp-dark, html.dark) .platform-badge-clay_windows {
   --platform-badge-fg: `#22d3ee`;
   --platform-badge-bg: `#08344499`;
   --platform-badge-ring: `#155e75`;
 }

Also applies to: 57-60, 67-70, 101-103

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/api-badge/PlatformBadge.css` around lines 18 - 23, The CSS
rules for .platform-badge-clay_ios and .platform-badge-clay_macos are
incorrectly using the Apple/zinc color (`#52525b`); update their
--platform-badge-fg to use the Clay/cyan hue token consistent with
platform-colors.ts (i.e., switch the color value for the clay_* classes in the
light and dark blocks to the centralized Clay/cyan contract), and repeat the
same change for the other occurrences of those classes in the file (the blocks
around the other mentioned ranges) so clay_ios/clay_macos match the unified Clay
mapping.

--platform-badge-bg: #fafafa; /* zinc-50 */
--platform-badge-ring: #d4d4d8; /* zinc-300 */
}

/* ios → blue */
.platform-badge-ios {
--rp-container-info-text: #1d4ed8;
--rp-container-info-bg: #3b82f61a;
--rp-container-warning-text: #1d4ed8;
--rp-container-warning-bg: #3b82f61a;
--rp-container-danger-text: #1d4ed8;
--rp-container-danger-bg: #3b82f61a;
/* android → emerald */
.platform-badge-android {
--platform-badge-fg: #059669;
--platform-badge-bg: #ecfdf5;
--platform-badge-ring: #a7f3d0;
}

/* harmony → orange */
/* harmony → rose */
.platform-badge-harmony {
--rp-container-info-text: #c2410c;
--rp-container-info-bg: #f973161a;
--rp-container-warning-text: #c2410c;
--rp-container-warning-bg: #f973161a;
--rp-container-danger-text: #c2410c;
--rp-container-danger-bg: #f973161a;
--platform-badge-fg: #e11d48;
--platform-badge-bg: #fff1f2;
--platform-badge-ring: #fecdd3;
}

/* web_lynx → purple */
/* web / web_lynx → orange */
.platform-badge-web,
.platform-badge-web_lynx {
--rp-container-info-text: #7e22ce;
--rp-container-info-bg: #a855f71a;
--rp-container-warning-text: #7e22ce;
--rp-container-warning-bg: #a855f71a;
--rp-container-danger-text: #7e22ce;
--rp-container-danger-bg: #a855f71a;
--platform-badge-fg: #ea580c;
--platform-badge-bg: #fff7ed;
--platform-badge-ring: #fed7aa;
}

/* clay, clay_android → teal */
.platform-badge-clay,
.platform-badge-clay_android {
--rp-container-info-text: #0f766e;
--rp-container-info-bg: #14b8a61a;
--rp-container-warning-text: #0f766e;
--rp-container-warning-bg: #14b8a61a;
--rp-container-danger-text: #0f766e;
--rp-container-danger-bg: #14b8a61a;
}

/* clay_ios → cyan */
.platform-badge-clay_ios {
--rp-container-info-text: #0e7490;
--rp-container-info-bg: #06b6d41a;
--rp-container-warning-text: #0e7490;
--rp-container-warning-bg: #06b6d41a;
--rp-container-danger-text: #0e7490;
--rp-container-danger-bg: #06b6d41a;
}

/* clay_macos → indigo */
.platform-badge-clay_macos {
--rp-container-info-text: #4338ca;
--rp-container-info-bg: #6366f11a;
--rp-container-warning-text: #4338ca;
--rp-container-warning-bg: #6366f11a;
--rp-container-danger-text: #4338ca;
--rp-container-danger-bg: #6366f11a;
/* windows (incl. clay_windows underlying surface) → sky for raw windows */
.platform-badge-windows {
--platform-badge-fg: #0284c7;
--platform-badge-bg: #f0f9ff;
--platform-badge-ring: #bae6fd;
}

/* clay_windows → sky */
/* clay umbrella + variants → cyan (Clay/Desktop signature) */
.platform-badge-clay,
.platform-badge-clay_android,
.platform-badge-clay_windows {
--rp-container-info-text: #0369a1;
--rp-container-info-bg: #0ea5e91a;
--rp-container-warning-text: #0369a1;
--rp-container-warning-bg: #0ea5e91a;
--rp-container-danger-text: #0369a1;
--rp-container-danger-bg: #0ea5e91a;
--platform-badge-fg: #0891b2;
--platform-badge-bg: #ecfeff;
--platform-badge-ring: #a5f3fc;
}

/* Dark mode */
:where(html.rp-dark, html.dark) .platform-badge-android {
--rp-container-info-text: #34d399;
--rp-container-info-bg: #10b98126;
--rp-container-warning-text: #34d399;
--rp-container-warning-bg: #10b98126;
--rp-container-danger-text: #34d399;
--rp-container-danger-bg: #10b98126;
/* Dark mode bumps foreground to ~400 and swaps bg to a deep tinted wash. */
:where(html.rp-dark, html.dark) .platform-badge-ios,
:where(html.rp-dark, html.dark) .platform-badge-clay_ios,
:where(html.rp-dark, html.dark) .platform-badge-macos,
:where(html.rp-dark, html.dark) .platform-badge-clay_macos {
--platform-badge-fg: #d4d4d8;
--platform-badge-bg: #27272a99;
--platform-badge-ring: #52525b;
}

:where(html.rp-dark, html.dark) .platform-badge-ios {
--rp-container-info-text: #60a5fa;
--rp-container-info-bg: #3b82f626;
--rp-container-warning-text: #60a5fa;
--rp-container-warning-bg: #3b82f626;
--rp-container-danger-text: #60a5fa;
--rp-container-danger-bg: #3b82f626;
:where(html.rp-dark, html.dark) .platform-badge-android {
--platform-badge-fg: #34d399;
--platform-badge-bg: #022c2299;
--platform-badge-ring: #065f46;
}

:where(html.rp-dark, html.dark) .platform-badge-harmony {
--rp-container-info-text: #fb923c;
--rp-container-info-bg: #f9731626;
--rp-container-warning-text: #fb923c;
--rp-container-warning-bg: #f9731626;
--rp-container-danger-text: #fb923c;
--rp-container-danger-bg: #f9731626;
--platform-badge-fg: #fb7185;
--platform-badge-bg: #4c051599;
--platform-badge-ring: #9f1239;
}

:where(html.rp-dark, html.dark) .platform-badge-web,
:where(html.rp-dark, html.dark) .platform-badge-web_lynx {
--rp-container-info-text: #c084fc;
--rp-container-info-bg: #a855f726;
--rp-container-warning-text: #c084fc;
--rp-container-warning-bg: #a855f726;
--rp-container-danger-text: #c084fc;
--rp-container-danger-bg: #a855f726;
--platform-badge-fg: #fb923c;
--platform-badge-bg: #43140799;
--platform-badge-ring: #9a3412;
}

:where(html.rp-dark, html.dark) .platform-badge-windows {
--platform-badge-fg: #38bdf8;
--platform-badge-bg: #082f4999;
--platform-badge-ring: #075985;
}

:where(html.rp-dark, html.dark) .platform-badge-clay,
:where(html.rp-dark, html.dark) .platform-badge-clay_android {
--rp-container-info-text: #2dd4bf;
--rp-container-info-bg: #14b8a626;
--rp-container-warning-text: #2dd4bf;
--rp-container-warning-bg: #14b8a626;
--rp-container-danger-text: #2dd4bf;
--rp-container-danger-bg: #14b8a626;
:where(html.rp-dark, html.dark) .platform-badge-clay_android,
:where(html.rp-dark, html.dark) .platform-badge-clay_windows {
--platform-badge-fg: #22d3ee;
--platform-badge-bg: #08344499;
--platform-badge-ring: #155e75;
}

/* ── Apply our variables to Rspress's container slots ────────────────────── */

[class*='platform-badge-'] {
--rp-container-info-text: var(--platform-badge-fg);
--rp-container-info-bg: var(--platform-badge-bg);
--rp-container-warning-text: var(--platform-badge-fg);
--rp-container-warning-bg: var(--platform-badge-bg);
--rp-container-danger-text: var(--platform-badge-fg);
--rp-container-danger-bg: var(--platform-badge-bg);
}

/* ── Vertical alignment ─────────────────────────────────────────────────
* Same fixed badge size everywhere. The only thing that varies between
* the body, the TOC list, and a heading is what the badge sits next to.
* Default inline-flex baseline alignment makes the chip cling to the
* surrounding text baseline, which looks fine in body but reads as
* "stranded at the bottom" next to a large heading. `vertical-align:
* middle` re-centers the chip on the line box, so the same chip aligns
* cleanly against a code chip in body text, a TOC list item, and a
* heading without changing size.
*/
[class*='platform-badge-'] .rp-badge {
vertical-align: middle;
}

:where(html.rp-dark, html.dark) .platform-badge-clay_ios {
--rp-container-info-text: #22d3ee;
--rp-container-info-bg: #06b6d426;
--rp-container-warning-text: #22d3ee;
--rp-container-warning-bg: #06b6d426;
--rp-container-danger-text: #22d3ee;
--rp-container-danger-bg: #06b6d426;
[class*='platform-badge-'] .platform-badge__icon {
--icon-size: 0.9rem;
}

:where(html.rp-dark, html.dark) .platform-badge-clay_macos {
--rp-container-info-text: #818cf8;
--rp-container-info-bg: #6366f126;
--rp-container-warning-text: #818cf8;
--rp-container-warning-bg: #6366f126;
--rp-container-danger-text: #818cf8;
--rp-container-danger-bg: #6366f126;
/* ── Variant: *Only, emphasized with an inset platform-tinted ring ─────── */

.platform-badge--only .rp-badge {
box-shadow: inset 0 0 0 1px var(--platform-badge-ring);
}

:where(html.rp-dark, html.dark) .platform-badge-clay_windows {
--rp-container-info-text: #38bdf8;
--rp-container-info-bg: #0ea5e926;
--rp-container-warning-text: #38bdf8;
--rp-container-warning-bg: #0ea5e926;
--rp-container-danger-text: #38bdf8;
--rp-container-danger-bg: #0ea5e926;
/* ── Variant: No*, drops platform color, mutes, strikes the label ───────── */

.platform-badge--no {
/* Override the cascade above with neutral grays so "No iOS" doesn't read
the same as "iOS Only" at a glance. */
--platform-badge-fg: #71717a; /* zinc-500 */
--platform-badge-bg: #f4f4f5; /* zinc-100 */
}

:where(html.rp-dark, html.dark) .platform-badge--no {
--platform-badge-fg: #a1a1aa; /* zinc-400 */
--platform-badge-bg: #18181b99; /* zinc-900 @ 60% */
}

.platform-badge--no .platform-badge__label {
text-decoration: line-through;
text-decoration-thickness: 1px;
text-decoration-color: currentColor;
}

/* The icon also dims in the No* variant, since full saturation here would
fight the strikethrough and read as "supported but crossed out". */
.platform-badge--no .platform-badge__icon {
opacity: 0.7;
}
Loading
Loading