fix(website): make the plugin catalog readable in light mode
Gold and pale-blue chips, dates, and links sit around 1.2:1 on white, so the catalog grid washes out. Light mode now uses the dark amber and blue already chosen for the docs theme. (cherry picked from commit b84d6d8fac4ff3f2ef5b9fe32558b8d2a79fae47)
This commit is contained in:
xxxigm
kshitij
@@ -92,16 +92,16 @@ export const TIER_CONFIG: Record<
|
||||
> = {
|
||||
official: {
|
||||
label: "Official",
|
||||
color: "#ffd700",
|
||||
bg: "rgba(255, 215, 0, 0.08)",
|
||||
border: "rgba(255, 215, 0, 0.25)",
|
||||
color: "var(--plugin-catalog-official)",
|
||||
bg: "var(--plugin-catalog-official-bg)",
|
||||
border: "var(--plugin-catalog-official-border)",
|
||||
icon: "\u{2713}",
|
||||
},
|
||||
community: {
|
||||
label: "Community",
|
||||
color: "#94a3b8",
|
||||
bg: "rgba(148, 163, 184, 0.08)",
|
||||
border: "rgba(148, 163, 184, 0.2)",
|
||||
color: "var(--plugin-catalog-community)",
|
||||
bg: "var(--plugin-catalog-community-bg)",
|
||||
border: "var(--plugin-catalog-community-border)",
|
||||
icon: "\u{2756}",
|
||||
},
|
||||
};
|
||||
|
||||
@@ -26,6 +26,15 @@
|
||||
|
||||
--ifm-link-color: #7A5800;
|
||||
--ifm-link-hover-color: #5A4100;
|
||||
|
||||
/* Catalog tier pills are inline styles. Gold #FFD700 is 1.4:1 on white;
|
||||
these light-mode tones stay above 4.5:1. Dark mode overrides below. */
|
||||
--plugin-catalog-official: #6E4F00;
|
||||
--plugin-catalog-official-bg: rgba(110, 79, 0, 0.1);
|
||||
--plugin-catalog-official-border: rgba(110, 79, 0, 0.4);
|
||||
--plugin-catalog-community: #475569;
|
||||
--plugin-catalog-community-bg: rgba(71, 85, 105, 0.1);
|
||||
--plugin-catalog-community-border: rgba(71, 85, 105, 0.35);
|
||||
}
|
||||
|
||||
/* Dark mode — the PRIMARY mode, matches landing page */
|
||||
@@ -51,6 +60,13 @@
|
||||
--ifm-link-color: #FFD700;
|
||||
--ifm-link-hover-color: #FFBF00;
|
||||
|
||||
--plugin-catalog-official: #ffd700;
|
||||
--plugin-catalog-official-bg: rgba(255, 215, 0, 0.08);
|
||||
--plugin-catalog-official-border: rgba(255, 215, 0, 0.25);
|
||||
--plugin-catalog-community: #94a3b8;
|
||||
--plugin-catalog-community-bg: rgba(148, 163, 184, 0.08);
|
||||
--plugin-catalog-community-border: rgba(148, 163, 184, 0.2);
|
||||
|
||||
--ifm-code-background: #0f0f18;
|
||||
|
||||
--ifm-toc-border-color: rgba(255, 215, 0, 0.08);
|
||||
|
||||
@@ -1146,3 +1146,177 @@ a.pickBtn {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
/* Dark-theme gold (#ffd700, 1.4:1 on white) and sky blue (#7dd3fc / #60a5fa)
|
||||
are unreadable on the light page. These overrides use the same dark amber
|
||||
as --ifm-color-primary-darker and a blue that clears WCAG AA. */
|
||||
[data-theme="light"] .heroEyebrow,
|
||||
[data-theme="light"] .heroLink,
|
||||
[data-theme="light"] .heroLink:hover,
|
||||
[data-theme="light"] .crossNavActive,
|
||||
[data-theme="light"] .crossNavLink:hover,
|
||||
[data-theme="light"] .emptyCta,
|
||||
[data-theme="light"] .emptyCta:hover,
|
||||
[data-theme="light"] .emptyReset,
|
||||
[data-theme="light"] .emptyReset:hover,
|
||||
[data-theme="light"] .starPill,
|
||||
[data-theme="light"] .starPill:hover,
|
||||
[data-theme="light"] .capChip,
|
||||
[data-theme="light"] .envChip,
|
||||
[data-theme="light"] .installHint code,
|
||||
[data-theme="light"] .copyBtn,
|
||||
[data-theme="light"] .copyBtn:hover,
|
||||
[data-theme="light"] .highlight {
|
||||
color: #6e4f00;
|
||||
}
|
||||
|
||||
[data-theme="light"] .searchIcon {
|
||||
color: #8b6508;
|
||||
}
|
||||
|
||||
[data-theme="light"] .searchInput {
|
||||
border-color: rgba(28, 30, 33, 0.18);
|
||||
}
|
||||
|
||||
[data-theme="light"] .searchInput::placeholder {
|
||||
color: #525860;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-theme="light"] .controlsBar {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-bottom-color: rgba(28, 30, 33, 0.08);
|
||||
}
|
||||
|
||||
[data-theme="light"] .tierBtn,
|
||||
[data-theme="light"] .categoryBtn {
|
||||
color: #3c4043;
|
||||
border-color: rgba(28, 30, 33, 0.16);
|
||||
}
|
||||
|
||||
[data-theme="light"] .tierBtn:hover,
|
||||
[data-theme="light"] .categoryBtn:hover {
|
||||
border-color: rgba(28, 30, 33, 0.32);
|
||||
color: #1c1e21;
|
||||
}
|
||||
|
||||
[data-theme="light"] .tierBtnActive,
|
||||
[data-theme="light"] .tierBtnActive:hover {
|
||||
color: var(--pill-color, #6e4f00);
|
||||
border-color: var(--pill-border, rgba(110, 79, 0, 0.45));
|
||||
background: var(--pill-bg, rgba(110, 79, 0, 0.08));
|
||||
}
|
||||
|
||||
[data-theme="light"] .sortBtnActive,
|
||||
[data-theme="light"] .sortBtnActive:hover {
|
||||
color: #6e4f00;
|
||||
border-color: rgba(110, 79, 0, 0.45);
|
||||
background: rgba(110, 79, 0, 0.08);
|
||||
}
|
||||
|
||||
[data-theme="light"] .categoryBtnActive,
|
||||
[data-theme="light"] .categoryChip,
|
||||
[data-theme="light"] .categoryViewAll,
|
||||
[data-theme="light"] .categoryViewAll:hover {
|
||||
color: #075985;
|
||||
}
|
||||
|
||||
[data-theme="light"] .categoryBtnActive,
|
||||
[data-theme="light"] .categoryBtnActive:hover {
|
||||
border-color: rgba(7, 89, 133, 0.55);
|
||||
background: rgba(7, 89, 133, 0.1);
|
||||
box-shadow: none;
|
||||
color: #075985;
|
||||
}
|
||||
|
||||
[data-theme="light"] .categoryBtnActive .tierCount {
|
||||
background: rgba(7, 89, 133, 0.14);
|
||||
color: #075985;
|
||||
}
|
||||
|
||||
[data-theme="light"] .categoryChip {
|
||||
border-color: rgba(7, 89, 133, 0.35);
|
||||
background: rgba(7, 89, 133, 0.08);
|
||||
}
|
||||
|
||||
[data-theme="light"] .card {
|
||||
background: #fff;
|
||||
border-color: rgba(28, 30, 33, 0.12);
|
||||
}
|
||||
|
||||
[data-theme="light"] .card:hover {
|
||||
border-color: rgba(110, 79, 0, 0.45);
|
||||
box-shadow: 0 4px 16px rgba(28, 30, 33, 0.06);
|
||||
}
|
||||
|
||||
[data-theme="light"] .starPill,
|
||||
[data-theme="light"] .starPill:hover {
|
||||
border-color: rgba(110, 79, 0, 0.35);
|
||||
background: rgba(110, 79, 0, 0.08);
|
||||
}
|
||||
|
||||
[data-theme="light"] .capChip,
|
||||
[data-theme="light"] .envChip {
|
||||
border-color: rgba(110, 79, 0, 0.28);
|
||||
background: rgba(110, 79, 0, 0.06);
|
||||
}
|
||||
|
||||
[data-theme="light"] .cardDates,
|
||||
[data-theme="light"] .sortLabel,
|
||||
[data-theme="light"] .categoryBlurb,
|
||||
[data-theme="light"] .metaLabel {
|
||||
color: #525860;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-theme="light"] .docsLink,
|
||||
[data-theme="light"] .docsLink:hover,
|
||||
[data-theme="light"] .shaLink,
|
||||
[data-theme="light"] .shaLink:hover,
|
||||
[data-theme="light"] .versionPill,
|
||||
[data-theme="light"] .platformPill,
|
||||
[data-theme="light"] .emptyCtaSecondary,
|
||||
[data-theme="light"] .emptyCtaSecondary:hover {
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
[data-theme="light"] .docsLink,
|
||||
[data-theme="light"] .emptyCtaSecondary {
|
||||
border-color: rgba(29, 78, 216, 0.35);
|
||||
background: rgba(29, 78, 216, 0.06);
|
||||
}
|
||||
|
||||
[data-theme="light"] .docsLink:hover,
|
||||
[data-theme="light"] .emptyCtaSecondary:hover {
|
||||
color: #1e3a8a;
|
||||
border-color: rgba(30, 58, 138, 0.45);
|
||||
background: rgba(29, 78, 216, 0.1);
|
||||
}
|
||||
|
||||
[data-theme="light"] .versionPill,
|
||||
[data-theme="light"] .platformPill {
|
||||
border-color: rgba(29, 78, 216, 0.4);
|
||||
background: rgba(29, 78, 216, 0.08);
|
||||
}
|
||||
|
||||
[data-theme="light"] .installHint {
|
||||
background: rgba(110, 79, 0, 0.06);
|
||||
border-color: rgba(110, 79, 0, 0.22);
|
||||
}
|
||||
|
||||
[data-theme="light"] .copyBtn {
|
||||
border-color: rgba(110, 79, 0, 0.35);
|
||||
background: rgba(110, 79, 0, 0.08);
|
||||
}
|
||||
|
||||
[data-theme="light"] .copyBtn:hover {
|
||||
background: rgba(110, 79, 0, 0.16);
|
||||
}
|
||||
|
||||
[data-theme="light"] .highlight {
|
||||
background: rgba(110, 79, 0, 0.15);
|
||||
}
|
||||
|
||||
[data-theme="light"] .filterPanelOpen {
|
||||
border-color: rgba(28, 30, 33, 0.12);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user