feat: align CodeEditor theme with Cloudscape design tokens [WIP]

[ernst-dev]

Description

[WIP / v0 — first cut of a multi-week epic. Not ready for merge.]

Adds an opt-in, token-driven Cloudscape theme to CodeEditor (Ace) so the editor's colors align with Cloudscape design tokens and adapt automatically to the active light/dark visual mode.

Today, consumers must choose from Ace's built-in themes (or the cloud_editor/cloud_editor_dark themes), whose colors are hard-coded and don't track Cloudscape design tokens or visual modes. This change introduces a single 'cloudscape' theme whose colors come entirely from Cloudscape design tokens, so the same theme works in both light and dark mode.

Approach

• New cloudscape-theme.ts registers an Ace theme (ace/theme/cloudscape) with an empty cssText and a cssClass of ace-cloudscape. Registration is idempotent per Ace instance and a no-op if the provided ace object has no define.
• New cloudscape-ace-theme.scss supplies the actual colors, keyed off .ace-cloudscape, using Cloudscape design tokens (editor bg/fg, gutter, cursor, selection, active-line, and a first-cut syntax mapping using the charts palette for perceptually distinct, visual-mode-aware hues). Because the tokens resolve to CSS custom properties that change with the visual mode, no separate dark theme is needed.
• Wired opt-in: the theme is registered lazily in useSyncEditorTheme only when 'cloudscape' is selected, so existing behavior and defaults are unchanged.

Public API (additive, backward-compatible)

• CodeEditorProps.Theme now also accepts 'cloudscape' (added BuiltInTheme and CloudscapeTheme type aliases). Documenter snapshot regenerated.

Done in this v0

• Token-driven Cloudscape Ace theme (light + dark via a single theme).
• Opt-in via preferences={{ theme: 'cloudscape' }} (and themes for the preferences modal).
• Dev page: pages/code-editor/cloudscape-theme.page.tsx.
• Unit tests for the registration helper + an integration test asserting the theme is applied; documenter snapshot updated.

Remaining / follow-ups (tracked for the epic)

• Replace the first-cut charts-palette syntax mapping with a dedicated, reviewed code-editor syntax token set (design sign-off).
• Decide whether 'cloudscape' should be surfaced by default in DEFAULT_AVAILABLE_THEMES / the preferences modal (single adaptive theme vs. the current light/dark split UX).
• Set the Ace isDark flag from the active visual mode so Ace's own ace_dark-based rules stay consistent.
• Integration/permutation + visual-regression (screenshot) coverage across languages and both visual modes; a11y/contrast validation of the token mapping.
• Customer-facing usage documentation.
• Investigate a public theming hook (e.g. exporting defineCloudscapeAceTheme) if consumers need to register the theme independently.

Related links, issue #, if available: SIM AWSUI-57002 (see note below).

Ticket mismatch note: SIM/Taskei AWSUI-57002 resolves to an unrelated "Aperture Form Submission" (an API Gateway VR opt-out feedback record), not a CodeEditor/Monaco theming request. This PR was implemented from the provided task description (expose theming/token customization for the Ace-based CodeEditor so colors align with Cloudscape design tokens / visual modes).

How has this been tested?

• eslint + stylelint on all changed files — clean.
• gulp quick-build — pass.
• Full gulp build (production) — pass (only pre-existing asset-size warnings).
• Unit tests: src/code-editor + documenter.test.ts — 203 tests / 97 snapshots pass (includes new cloudscape-theme.test.ts and an integration test asserting setTheme('ace/theme/cloudscape')).
• Documenter snapshot regenerated (additive: adds 'cloudscape' to the theme enum).
• Reviewers can exercise the new code-editor/cloudscape-theme dev page and toggle dark mode to see the theme adapt.

Manual accessibility/contrast validation of the syntax color mapping is still outstanding (see follow-ups).

---

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

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.61%. Comparing base (f97729a) to head (f03c1ca).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4824   +/-   ##
=======================================
  Coverage   97.61%   97.61%           
=======================================
  Files         952      953    +1     
  Lines       30816    30838   +22     
  Branches    11318    11321    +3     
=======================================
+ Hits        30081    30103   +22     
  Misses        688      688           
  Partials       47       47           

☔ 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.