feat: filter button and filter button group

[saashapina]

Summary of changes

• adds filter button and filter button group
• adds filter button group tests

Relevant Links

• Designs: Figma
• Story: ADB-174

Test URLs:

• Before: https://main--adobe-design-website--adobe.aem.page/
• After: https://ADb-174-filter-button--adobe-design-website--adobe.aem.page/

Checklist

• This PR has visual changes, and has been reviewed by a designer.
• This PR has code changes, and our linters still pass.

Validation

1. Make sure all PR checks have passed.
2. Pull down all related branches.
3. Verify filter button and filter button group aligns with mockups
4. Verify filter button active styles align with mockups
5. Verify styles align with mockups for light, dark, and system settings on toggle
6. Verify all tests are passing

---

Browser Testing

We should aim to support the latest version of the listed browsers. For older versions or other browsers not on the list, content should be accessible, even if it doesn't completely match the designs.

Developers should test as they work in the browsers available on their machines. If they have access to other devices to test other browser/OS combinations, they should do that when possible.

Windows

• Firefox
• Chrome
• Edge

MacOS

• Firefox
• Chrome
• Safari
• Edge

Android

• Firefox
• Chrome
• Edge

iOS

• Safari

---

[aem-code-sync]

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 PSI checks
• Re-sync branch

Commits

• 2fd6341 ✅ (latest)
• 3d1bd8e ✅
• 5e69c9d ✅
• 415111f ✅
• 5a45b59 ✅
• b7710fe ✅
• da1c794 ✅
• 23d95dc ✅
• af972a3 ✅
• cd23d60 ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/
🖥️	/

[catheraaine]

Great work so far @saashapina! Here are some suggestions.

[catheraaine]

when we are using light text on a dark background, can we add some antialiased font-smoothing?

note you'll have to unset this just for the selected state (where it's the opposite).

Light text dark background? Antialiased.
Dark text light background? Unset.

&:has(#color-scheme option[value="dark"]:checked) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-color-scheme: dark) {
  &:has(#color-scheme option[value="dark"]:checked) {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

[catheraaine]

again you might want to test these out