feat: quote redesign

[jawinn]

Summary of changes

Updates design of quotes to use theme specific colored text, no borders, and adjusted padding and margin.

Relevant Links

• Story: ADB-331

Test URLs:

• Before: https://main--adobe-design-website--adobe.aem.page/
• After: https://feat-quote-redesign--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.
• This PR affects production code, so it was browser tested (see below).

Validation

1. Make sure all PR checks have passed.
2. Pull down all related branches.
3. Go to an article page with at least one quote. You can then paste this script into the console to swap between color themes to test the text colors.

(() => {
  const themes = [
    'theme--backdrop-blue-circles',
    'theme--backdrop-blue-green-wave',
    'theme--backdrop-blue-purple-fade',
    'theme--backdrop-green',
    'theme--backdrop-indigo',
    'theme--backdrop-seafoam',
    'theme--blue',
    'theme--cinnamon',
    'theme--cyan',
    'theme--fuchsia',
    'theme--indigo',
    'theme--no-color',
    'theme--orange',
    'theme--red',
    'theme--seafoam',
  ];
  let i = 0;
  document.addEventListener('click', () => {
    document.body.classList.remove(...themes);
    document.body.classList.add(themes[i % themes.length]);
    console.log(themes[i % themes.length]);
    i++;
  });
})();

4. Confirm responsiveness of quote changes.

Example articles:

• This one has subtitle text on a quote /ideas/behind-the-design-adobe-express-ai-assistant
• This one has an unconventional use of quote for formatting purpose on a non-quote and would need to be modified (to discuss): /ideas/the-creative-cloud-features-adobe-s-designers-can-t-live-without1

---

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

Commits

• 37ee7df ✅ (latest)
• e72ccae ✅
• 11a8f58 ✅
• 49d8cbd ✅
• c07860c ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/
🖥️	/