feat(styles): add extra styles for homepage by marissahuysentruyt · Pull Request #65 · adobe/spectrum-hub

marissahuysentruyt · 2026-07-10T16:39:34Z

Description

Adds reusable Spectrum-style button classes to the global stylesheet and restructures the home template's intro area into a centered hero with a pill-shaped banner.

Introduces a .btn base class using Spectrum 2 component tokens (sizing, radius, typography, transition timing) with configurable --button-* custom properties.
Adds two variants: .btn-primary/.btn-accent
Adds :hover / :focus-visible / :active states driven by the --button-background-color-hover token.
Adds the light and dark BG images

Home template (templates/home/home.css, templates/home/home.js)

Renames the intro container from home-column to home-hero and lays it out as a centered flex column.
Wraps the first two intro elements in a new .home-banner pill (inline-flex, rounded, translucent blue border/background using rgb(from …) relative color syntax).
Constrains hero paragraphs to 80ch and aligns any banner icon (svg) inline with its text.

Screenshots (if applicable)

main homepage, missing styles

draft homepage, new styles

Type of change

Related issue(s)

fixes [TICKET]

Validation steps

This PR has visual elements, so it was reviewed by a designer.
This PR has code changes, and our linters still pass.
This PR affects production code, so it was browser tested (see below).
This PR affects existing pages, so automated E2E tests were run (see below).
This PR has copy changes, so copy was proofread and approved.

To Validate

URL for testing:
https://homepage-tweaks--spectrum-hub--adobe.aem.page/drafts/mhuysentruyt/homepage-test

Accessibility testing checklist

Keyboard
1. Go to the home page branch preview.
2. Tab through the page.
3. Expect: any .btn rendered as a link/button receives focus in logical order, shows a visible :focus-visible indicator, and activates with Enter (and Space for buttons). The .home-banner is non-interactive text/icon content — confirm it is not a focus stop and does not introduce a trap.
Screen reader
1. Go to the home page branch preview with VoiceOver/NVDA.
2. Navigate the hero region.
3. Expect: heading is announced with its correct level; banner text is announced as text; any decorative svg in the banner is not announced (or is properly labeled if meaningful); button variants announce role + accessible name.

Device review

Did it pass in Desktop?
Did it pass in (emulated) Mobile?
Did it pass in (emulated) iPad?

Checklist:

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.

aem-code-sync · 2026-07-10T16:39:38Z

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

Re-run all PSI checks
Re-run failed PSI checks
Re-sync branch

Commits

78ca938 ✅ (latest)
6dc2c8f ✅
36dc124 ✅
d93f71a ✅
3cd8a5b ✅
90af7a9 ✅
cc16cab ✅
8199cbf ✅
f22802a ✅
212f60c ✅

aem-code-sync · 2026-07-10T16:40:48Z

	Page	Scores	Audits	Google
📱	/drafts/mhuysentruyt/homepage-test
🖥️	/drafts/mhuysentruyt/homepage-test

marissahuysentruyt · 2026-07-13T13:23:45Z

-  box-shadow:
-    inset 0 0 3px 0 rgb(from var(--header-inner-shadow) r g b / 65%),
-    0 0 1px 0 rgb(from var(--header-outer-shadow) r g b / 10%),
-    0 9px 95px 0 rgb(from var(--header-outer-shadow) r g b / 5%);


the shadows were removed from the prototype while design continues to refine the aether aesthetic.

marissahuysentruyt · 2026-07-13T13:26:04Z

+      padding-block-start: calc(var(--button-padding-block-start) - var(--button-border-width));
+      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+      padding-block-end: calc(var(--button-padding-block-end) - var(--button-border-width));


I think these calcs are easier to read when they're separated, but have no issue combining them to avoid a disabled stylelint rule. 👍

marissahuysentruyt · 2026-07-13T13:27:32Z

+      background-color: var(--button-background-color-hover);
+      border-color: var(--button-background-color-hover);


Am I overusing the hover custom prop? I'd rather have an individual prop for each interactive state (use the hover prop for :hover, use the key-focus prop for :focus-visible, etc), but the values are all identical and I like less code. The naming and semantic usage is bothering me a bit, that's all.

marissahuysentruyt · 2026-07-13T14:29:57Z

  backdrop-filter: blur(128px);

+  @media (width >= 900px) {
+    backdrop-filter: unset;


I kept the blur on the small screen header since the content takes up most of the screen as would otherwise scroll under the icons.

marissahuysentruyt · 2026-07-13T15:03:03Z

-      background:
-        var(--s2-home-gradient),
-        var(--se-body-background-color);
+      background-image: url('/img/assets/background-image-light.png');


happy to rework anything if these images aren't performant enough. I'm a little concerned about the size being really slow to fetch.

TODO: media/beta/light.png

marissahuysentruyt · 2026-07-15T15:59:51Z


    .dark-scheme {
      color-scheme: dark;
+      background-image: url('/img/assets/background-image-dark.png');


TODO: media/beta/dark.png and

marissahuysentruyt · 2026-07-15T22:44:11Z

🧱 BLOCKED: waiting on chris's homepage & nav updates as it effects the way we're going to render the BG images.

marissahuysentruyt added the ✨ Feature New feature, enhancement, or request label Jul 10, 2026

marissahuysentruyt self-assigned this Jul 10, 2026

aem-code-sync Bot temporarily deployed to homepage-tweaks July 10, 2026 17:14 Inactive

aem-code-sync Bot temporarily deployed to homepage-tweaks July 10, 2026 17:23 Inactive

aem-code-sync Bot temporarily deployed to homepage-tweaks July 10, 2026 22:09 Inactive

aem-code-sync Bot temporarily deployed to homepage-tweaks July 10, 2026 22:49 Inactive

marissahuysentruyt marked this pull request as ready for review July 13, 2026 13:22

marissahuysentruyt commented Jul 13, 2026

View reviewed changes

aem-code-sync Bot temporarily deployed to homepage-tweaks July 13, 2026 14:15 Inactive

Marissa Huysentruyt and others added 8 commits July 13, 2026 10:27

feat(styles): add spectrum button styles

212f60c

fix(home): update tests

f22802a

fix(home): harden script to avoid the h1 getting placed in banner

8199cbf

chore: linter fixes

cc16cab

fix(header,styles): refine header compared to prototype

90af7a9

fix(header): revert debugging timing

3cd8a5b

fix(home): banner opacity

d93f71a

feat(styles): body bg images

36dc124

marissahuysentruyt force-pushed the homepage-tweaks branch from f3227c7 to 36dc124 Compare July 13, 2026 14:27

aem-code-sync Bot temporarily deployed to homepage-tweaks July 13, 2026 14:27 Inactive

marissahuysentruyt commented Jul 13, 2026

View reviewed changes

marissahuysentruyt requested a review from auniverseaway July 13, 2026 14:30

marissahuysentruyt added 2 commits July 13, 2026 10:34

fix(styles): add missing button focus indicator

6dc2c8f

fix(home,styles): bg image and mobile banner styles

78ca938

aem-code-sync Bot deployed to homepage-tweaks July 13, 2026 14:48 View deployment

marissahuysentruyt commented Jul 13, 2026

View reviewed changes

marissahuysentruyt added the 👀 Ready for review PR is ready for review label Jul 13, 2026

marissahuysentruyt commented Jul 15, 2026

View reviewed changes

marissahuysentruyt added ❌ Do not merge This is not for merging. 🧱 Blocked Leave a PR comment on why this work is blocked. labels Jul 15, 2026

marissahuysentruyt added 🚧 WIP Work in progress, don't judge and removed 👀 Ready for review PR is ready for review labels Jul 16, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(styles): add extra styles for homepage#65

feat(styles): add extra styles for homepage#65
marissahuysentruyt wants to merge 10 commits into
mainfrom
homepage-tweaks

marissahuysentruyt commented Jul 10, 2026 •

edited

Loading

Uh oh!

aem-code-sync Bot commented Jul 10, 2026 •

edited

Loading

Uh oh!

aem-code-sync Bot commented Jul 10, 2026 •

edited

Loading

Uh oh!

marissahuysentruyt Jul 13, 2026

Uh oh!

marissahuysentruyt Jul 13, 2026

Uh oh!

marissahuysentruyt Jul 13, 2026 •

edited

Loading

Uh oh!

marissahuysentruyt Jul 13, 2026

Uh oh!

marissahuysentruyt Jul 13, 2026

Uh oh!

marissahuysentruyt Jul 15, 2026

Uh oh!

marissahuysentruyt Jul 15, 2026

Uh oh!

marissahuysentruyt commented Jul 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		background-color: var(--button-background-color-hover);
		border-color: var(--button-background-color-hover);

Uh oh!

Conversation

marissahuysentruyt commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots (if applicable)

Type of change

Related issue(s)

Validation steps

To Validate

Accessibility testing checklist

Device review

Checklist:

Uh oh!

aem-code-sync Bot commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aem-code-sync Bot commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

marissahuysentruyt Jul 13, 2026

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Jul 13, 2026

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Jul 13, 2026

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Jul 13, 2026

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt commented Jul 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

marissahuysentruyt commented Jul 10, 2026 •

edited

Loading

aem-code-sync Bot commented Jul 10, 2026 •

edited

Loading

aem-code-sync Bot commented Jul 10, 2026 •

edited

Loading

marissahuysentruyt Jul 13, 2026 •

edited

Loading