feat: split CSS theme selectors into color and typography groups

[jason-capsule42]

Alaska Airlines Pull Request

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Checklist:

• My update follows the CONTRIBUTING guidelines of this project
• I have performed a self-review of my own update

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!

-- Auro Design System Team

[sourcery-ai]

Sorry @jason-capsule42, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

[Copilot]

Pull request overview

Updates the design-tokens CSS build output to support independently applying color vs typography token sets by splitting theme selector blocks into separate groups, while keeping the base theme selector compatible for existing consumers.

Changes:

• Updated scripts/transformCSS.mjs to classify CSS custom properties into color/typography/other groups and emit separate selector blocks (including new -color and -typography variants).
• Regenerated dist/web/*.css and dist/themes/CSSCustomProperties--bundled.css outputs to reflect the new selector structure (and corresponding .min.css outputs).
• Added a post-mortem document describing the breaking change and consumer impact.

Reviewed changes

Copilot reviewed 2 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
scripts/transformCSS.mjs	Splits extracted CSS custom properties into color/typography/other buckets and rewrites theme selector blocks accordingly.
docs/post-mortem/1601893.md	Documents the selector-splitting breaking change and provides migration guidance.
dist/themes/CSSCustomProperties--bundled.css	Regenerated bundled theme properties with new color/typography selector variants.
dist/web/alaska.css	Regenerated web theme CSS with split selector blocks.
dist/web/alaska.min.css	Minified output regenerated to match new selector blocks.
dist/web/atmos.css	Regenerated web theme CSS with split selector blocks.
dist/web/atmos.min.css	Minified output regenerated to match new selector blocks.
dist/web/hawaiian.css	Regenerated web theme CSS with split selector blocks.
dist/web/hawaiian.min.css	Minified output regenerated to match new selector blocks.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 10 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 12 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

scripts/transformCSS.mjs:205

• The JSDoc examples use non-existent attributes (data-aag-theme-color / data-aag-theme-typography). The implementation uses a single data-aag-theme attribute and appends -color / -typography to the value (e.g. data-aag-theme="aag-theme-as-color"). This mismatch is likely to confuse future maintainers.

 * For the file's own theme:
 *   :root,
 *   [data-aag-theme="<code>"],
 *   [data-aag-theme-color="<code>"] { ...color vars... }
 *

[Copilot]

Pull request overview

Copilot reviewed 4 out of 12 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (4)

scripts/transformCSS.mjs:204

• The JSDoc selector example uses data-aag-theme-color as a separate attribute, but the implementation (and distributed CSS) uses a single data-aag-theme attribute with the -color suffix appended to the value (e.g. data-aag-theme="aag-theme-as-color"). This doc line should match the actual selector format.

 *   [data-aag-theme-color="<code>"] { ...color vars... }

scripts/transformCSS.mjs:208

• The JSDoc selector example uses data-aag-theme-typography as a separate attribute, but the implementation uses a single data-aag-theme attribute with -typography appended to the value (e.g. data-aag-theme="aag-theme-as-typography").

 *   [data-aag-theme-typography="<code>"] { ...type vars... }

scripts/transformCSS.mjs:212

• This JSDoc example uses data-aag-theme-color as a separate attribute for other themes, but the generated selectors are data-aag-theme="<other-code>-color". Updating the example avoids misleading consumers of this script.

 *   [data-aag-theme-color="<other-code>"] { ...color vars... }

scripts/transformCSS.mjs:215

• This JSDoc example uses data-aag-theme-typography as a separate attribute for other themes, but the generated selectors are data-aag-theme="<other-code>-typography".

 *   [data-aag-theme-typography="<other-code>"] { ...type vars... }

[Copilot]

Pull request overview

Copilot reviewed 4 out of 12 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 12 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 12 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

README.md:56

• The "Available Themes" table omits the Atmos theme even though the same README immediately documents aag-theme-atm in the "Available theme codes" table. This is inconsistent documentation for consumers; add Atmos to the themes table (or remove it from the codes list if it’s not actually supported).

| Theme | Description | Usage |
|-------|-------------|-------|
| Alaska | Current Alaska Airlines theme | Alaska Airlines branded interfaces |
| Alaska Classic | Transition theme with the latest token names but Auro Classic values | For migration scenarios only |
| Hawaiian | Hawaiian Airlines theme | Hawaiian Airlines branded interfaces |
| Auro Classic | Legacy theme (deprecated) | Only for backward compatibility |

[Copilot]

Pull request overview

Copilot reviewed 4 out of 12 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 12 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

README.md:56

• The "Available Themes" table lists Alaska/Alaska Classic/Hawaiian/Auro Classic, but the later "Available theme codes" table includes Atmos (aag-theme-atm). If Atmos is an available theme code, it should also appear in the earlier theme list (or the later list should be scoped/clarified) to avoid conflicting documentation.

|-------|-------------|-------|
| Alaska | Current Alaska Airlines theme | Alaska Airlines branded interfaces |
| Alaska Classic | Transition theme with the latest token names but Auro Classic values | For migration scenarios only |
| Hawaiian | Hawaiian Airlines theme | Hawaiian Airlines branded interfaces |
| Auro Classic | Legacy theme (deprecated) | Only for backward compatibility |

[sourcery-ai]

Sorry @jason-capsule42, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

[blackfalcon]

🎉 This PR is included in version 9.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀