chore: Adds inheritsMode support for visual contexts

[pan-kot]

Changes overview

The PR introduces new inheritsMode property for visual contexts definition.

Currently, certain visual contexts: top-navigation, header, and compact-table inherit from the visual modes (dark for top-navigation and header, compact for compact-table). This is done by copying the corresponding mode tokens into the context definitions and using defaultMode so that only dark or only compact values are taken from the token value pairs. This leads to a lot of duplication in the generated theme file, see: current.styles.scoped.css. The awsui-context-top-navigation there includes 271 token, the awsui-context-compact-table includes 36 tokens.

With the changes applied (this PR merged and inheritsMode used in components style dictionary), the tokens are no longer copied from mode to contexts. Instead, the inheritance is resolved by theming-core, mainly by appending the context selector to the corresponding mode selector, e.g.:

.awsui-dark-mode,.awsui-context-top-navigation {
  // shared declaration
}
.awsui-context-top-navigation {
  // top-navigation specific overrides
}

In the updated stylesheet next.styles.scoped.css, the awsui-context-top-navigation only includes 10 tokens (is defines 2 tokens, but the list is expanded to handle token references correctly). The awsui-context-compact-table is no longer present (for classic variant), as it has no overrides compared to the compact mode. The changes decrease generated theme CSS size from 38.2KB to 35.9KB gzipped (~6% decrease).

Testing

I added new unit tests to validate the inherits-mode behaviour, including snapshot tests that showcase the output CSS. Additionally, I compared the current.styles.scoped.css and next.styles.scoped.css, generated by applying the inherits-mode to components for top-navigation, header, and compact-table contexts.

Additionally, I tested for regressions in the internal pipeline and made a dry-run to live.

Releasing

Merging this PR is expected to cause no regression in components, as the existing behaviours are kept the same. Once this is merged, I will create a follow-up PR for components, adopting the inheritsMode. When that is complete - I will create another follow-up PR for theming-core to remove the deprecated defaultMode API.

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

❌ Patch coverage is 99.29577% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 97.22%. Comparing base (1fcdb55) to head (914477a).
⚠️ Report is 4 commits behind head on main.

Files with missing lines	Patch %	Lines
src/shared/declaration/abstract.ts	96.42%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #188      +/-   ##
==========================================
+ Coverage   96.91%   97.22%   +0.30%     
==========================================
  Files          54       55       +1     
  Lines        1362     1440      +78     
  Branches      245      264      +19     
==========================================
+ Hits         1320     1400      +80     
+ Misses         36       34       -2     
  Partials        6        6              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[SpyZzey]

If we keep defaultMode as backwards-compatible property, should we add a test that guarantees it's previous output (not producing the same behavior as inheritedMode)?

[pan-kot]

Yes, this test already exists: https://github.com/cloudscape-design/theming-core/pull/188/changes#diff-cfb5e560a311d0c145221d390a01210d25065f7eb529b4f21d9e3d0c8d3e23acR41