Skip to content

style: refine homepage styling and add subtle/tertiary tokens #11483

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
mergify merged 1 commit into from
May 18, 2026
Merged

style: refine homepage styling and add subtle/tertiary tokens #11483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 7 additions & 0 deletions DESIGN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,16 +89,23 @@ usage is reserved for the narrow product-accent exception above.
```css
--theme-text /* primary text */
--theme-text-secondary /* supporting text */
--theme-text-tertiary /* third-tier text, between secondary and muted */
--theme-text-muted /* de-emphasized text, captions */
--theme-bg /* page background */
--theme-bg-content /* card / content surface */
--theme-bg-offset /* raised surface (inline code bg, sidebar) */
--theme-border /* borders, dividers */
--theme-border-subtle /* softer border for low-emphasis surfaces */
--theme-link /* link color */
--theme-link-hover /* link hover */
--theme-accent /* primary action / heading emphasis */
```

The dark gray scale is compressed (no `gray-350`-equivalent), so `--theme-text-tertiary`
and `--theme-text-muted` resolve to the same primitive (`gray-400`) in dark mode. The
semantic distinction is preserved in light mode and in source; treat them as distinct
consumers, not as aliases.

### Layer 3 — Section accents (`index.css`)

A `--section-accent` custom property set on `<body>` by class. Each documentation section gets
Expand Down
97 changes: 75 additions & 22 deletions src/components/DocsetGrid/Docset.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,48 +11,101 @@ interface Props {

const { title, path, icon } = Astro.props;
const productIconName = parseProductIcon(icon);
const productKey = productIconName ?? (path === '/workflow' ? 'workflow' : null);
---

<div class="container">
<a href={path}>
<h4>
{productIconName && (
<div class="docset-icon">
<ProductIcon name={productIconName} />
</div>
)}
{!productIconName && icon && (
<div class="docset-icon">
<Icon name={icon} />
</div>
)}
<span>{title}</span>
</h4>
</a>
<p>
<a href={path} class="container" data-product={productKey}>
<h4>
{productIconName && (
<div class="docset-icon" data-product={productKey}>
<ProductIcon name={productIconName} />
</div>
)}
{!productIconName && icon && (
<div class="docset-icon" data-product={productKey}>
<Icon name={icon} />
</div>
)}
<span>{title}</span>
</h4>
<div class="description">
<slot />
</p>
</div>
</div>
</a>

<style lang="scss">
.container {
display: block;
border: 1px solid var(--theme-border);
padding: 24px;
border-radius: 6px;
border-radius: 12px;
text-decoration: none;
color: var(--theme-text);
transition: border-color 0.18s ease;
}

a {
text-decoration: none;
.container:hover {
color: var(--theme-text);
}

.container[data-product='merge-queue']:hover {
border-color: var(--color-teal-700);
}
.container[data-product='ci-insights']:hover {
border-color: var(--color-purple-700);
}
.container[data-product='test-insights']:hover {
border-color: var(--color-orange-700);
}
.container[data-product='merge-protections']:hover {
border-color: var(--color-blue-700);
}
.container[data-product='stacks']:hover {
border-color: var(--color-coral-700);
}
.container[data-product='workflow']:hover {
border-color: var(--color-rose-700);
}

h4 {
display: flex;
align-items: center;
margin: 0 0 0.5rem;
color: var(--theme-text);

.docset-icon {
display: flex;
align-items: center;
margin-right: 8px;
}

.docset-icon[data-product='merge-queue'] {
color: var(--color-teal-700);
}
.docset-icon[data-product='ci-insights'] {
color: var(--color-purple-700);
}
.docset-icon[data-product='test-insights'] {
color: var(--color-orange-700);
}
.docset-icon[data-product='merge-protections'] {
color: var(--color-blue-700);
}
.docset-icon[data-product='stacks'] {
color: var(--color-coral-700);
}
.docset-icon[data-product='workflow'] {
color: var(--color-rose-700);
}
}

.description {
font-size: 0.9375rem;
line-height: 1.5;
color: var(--theme-text-secondary);
}

.description :global(p) {
margin: 0;
}
</style>
2 changes: 1 addition & 1 deletion src/content/docs/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import mergeQueueHero from './images/merge-queue-hero.jpg';
<div class="home-hero-copy">
<div class="text-eyebrow home-hero-eyebrow">Mergify Documentation</div>
<h1 class="heading-hero home-hero-title">
Stop breaking <span class="home-hero-accent">main</span>.
Stop breaking <span class="home-hero-accent">main</span>
</h1>
<p class="text-subtitle home-hero-subtitle">
Mergify eliminates broken builds, tames flaky tests, and cuts CI waste — so your team
Expand Down
32 changes: 19 additions & 13 deletions src/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -554,10 +554,10 @@ a.current-header-link {
}
.home-hero-title {
margin: 0;
color: var(--theme-text);
color: var(--theme-text-tertiary);
}
.home-hero-accent {
color: var(--color-teal-700);
color: var(--theme-text);
}
.home-hero-subtitle {
margin: 0.75rem 0 0;
Expand All @@ -574,22 +574,24 @@ a.current-header-link {
.home-hero-screenshot {
width: 100%;
height: auto;
border-radius: 12px;
border: 1px solid var(--theme-border);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
border-radius: 8px;
border: 1px solid var(--theme-border-subtle);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
background: var(--theme-bg-content);
display: block;
}

/* METRICS STRIP */
.home-metrics-strip {
background: var(--theme-bg);
padding-block: 1.25rem;
border: 1px solid var(--theme-border-subtle);
border-radius: 12px;
padding-block: 2rem;
padding-inline: var(--min-spacing-inline);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3rem;
margin-bottom: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.home-metric {
text-align: center;
Expand All @@ -610,8 +612,7 @@ a.current-header-link {

/* PROBLEM CARDS */
.home-problems {
padding-block: 3rem;
padding-inline: var(--min-spacing-inline);
padding-block: 3rem 2rem;
max-width: 64rem;
margin: 0 auto;
}
Expand Down Expand Up @@ -670,7 +671,6 @@ a.current-header-link {
/* PRODUCTS GRID */
.home-products {
padding-block: 3rem;
padding-inline: var(--min-spacing-inline);
background: var(--theme-bg-content);
max-width: none;
}
Expand Down Expand Up @@ -735,6 +735,12 @@ a.current-header-link {
flex-wrap: wrap;
margin-top: 1rem;
}
.community-buttons .community-button {
color: var(--theme-text);
}
.community-buttons .community-button:hover {
color: var(--theme-text);
}

/* Screenreader Only Text */
.sr-only {
Expand Down
4 changes: 4 additions & 0 deletions src/styles/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@
/* Text */
--theme-text: var(--color-gray-900);
--theme-text-secondary: var(--color-gray-700);
--theme-text-tertiary: var(--color-gray-600);
--theme-text-muted: var(--color-gray-500);

/* Surfaces */
Expand All @@ -99,6 +100,7 @@

/* Borders */
--theme-border: var(--color-gray-300);
--theme-border-subtle: var(--color-gray-200);
--theme-divider: var(--color-gray-200);
--theme-border-color: var(--theme-border);
--theme-shade-subtle: var(--color-gray-200);
Expand Down Expand Up @@ -148,6 +150,7 @@
/* Text */
--theme-text: var(--color-gray-50);
--theme-text-secondary: var(--color-gray-300);
--theme-text-tertiary: var(--color-gray-400);
--theme-text-muted: var(--color-gray-400);

/* Surfaces */
Expand All @@ -166,6 +169,7 @@

/* Borders */
--theme-border: var(--color-gray-700);
--theme-border-subtle: var(--color-gray-800);
--theme-divider: var(--color-gray-800);
--theme-border-color: var(--theme-border);
--theme-shade-subtle: var(--color-gray-700);
Expand Down
2 changes: 1 addition & 1 deletion src/styles/typography.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

.heading-hero {
font-size: clamp(2.5rem, 4.5vw, 3rem);
font-size: clamp(3rem, 5.5vw, 3.75rem);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.025em;
Expand Down