Implement a contrast-ratio-based adaptive color theme

[gcamacho079]

Description

• Uses Leonardo to generate color palettes for light and dark themes with color swatches dependent on specified contrast ratios. In addition to adaptive colors (i.e., --color-blue-500), I added static colors that don’t adapt to the theme (i.e., --color-static-blue-500)
• For added consistency, I moved the semantic color definitions and the defined fill, border, and foreground color indexes to the generate-colors.js script. White and black
• Fixed some Storybook a11y errors, and updated the a11y checks in Storybook to trigger a fail. When necessary, I added per-story a11y settings to prevent existing issues from triggering a fail

TODO: Some colors may still require adjustment, but I wanted to get this implemented. For example, we’ve had a lot of issues in the past with our light switches not looking “green” enough in the active state, so we may need to use the static palette for this case. I can tackle this in an upcoming PR.

Related issues

[Copilot]

Pull request overview

Updates Craft CP color foundations and accessibility defaults, including a generated theme-aware color palette and improved a11y metadata/labels across components and Storybook.

Changes:

• Introduce Leonardo-based color palette generation and wire it into shared CSS variables/tokens.
• Refresh color token mappings (surfaces/text + semantic color tokens) and regenerate colorable.css.
• Improve a11y defaults/coverage in Storybook and component demos (icon labels, story parameters).

Reviewed changes

Copilot reviewed 44 out of 50 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
resources/build/useFetch.js	Rebuilt asset (hash/import updates).
resources/build/nav-list.ts.js	Rebuilt wrapper pointing at new hashed nav-list build.
resources/build/nav-list-CxCaQp_Z.js	New built nav-list bundle.
resources/build/nav-item.ts.js	Rebuilt wrapper pointing at new hashed nav-item build.
resources/build/nav-item-BjCCQoU-.js	Rebuilt nav-item bundle (includes updated translation helper symbol mapping).
resources/build/manifest.json	Manifest updated for new build artifact filenames/hashes.
resources/build/legacy.js	Updated Vite dep map to new hashed build artifacts.
resources/build/decorate-DpHfxayW.js	New built decorator helper chunk.
resources/build/Updater.js	Rebuilt asset (hash/import updates).
resources/build/SettingsSitesIndex.js	Rebuilt asset (hash/import updates).
resources/build/SettingsSitesEdit.js	Rebuilt asset (hash/import updates).
resources/build/SettingsSectionsIndexPage.js	Rebuilt asset; pagination query param handling updated in compiled output.
resources/build/SettingsIndexPage.js	Rebuilt asset (hash/import updates).
resources/build/SettingsGeneralPage.js	Rebuilt asset (hash/import updates).
resources/build/SettingsEmailPage.js	Rebuilt asset (hash/import updates).
resources/build/ModalForm.js	Rebuilt asset (hash/import updates).
resources/build/Install.js	Rebuilt asset (hash/import updates).
resources/build/IndexLayout.js	Rebuilt asset (hash/import updates).
resources/build/DeleteSiteModal.js	Rebuilt asset (hash/import updates).
resources/build/CpQueueIndicator.js	Rebuilt asset (hash/import updates).
resources/build/CpGlobalSidebar.js	Rebuilt asset (hash/import updates).
resources/build/CalloutReadOnly.js	Rebuilt asset (hash/import updates).
resources/build/AppLayout.js	Rebuilt asset (hash/import updates).
packages/craftcms-cp/src/styles/shared/variables.css	Imports generated color-palette.css and removes inline palette definitions.
packages/craftcms-cp/src/styles/shared/tokens.css	Updates surface/text token values; removes old inline semantic + dark-theme token blocks in favor of generated palette.
packages/craftcms-cp/src/styles/shared/colorable.css	Regenerated colorable + semantic color tokens; updates default fill/border/on mappings.
packages/craftcms-cp/src/styles/color-definitions.js	Adds Leonardo theme definitions and stop list used for palette generation/docs.
packages/craftcms-cp/src/stories/tokens/variants.stories.ts	Improves table header labeling (“variant”).
packages/craftcms-cp/src/stories/tokens/text.stories.ts	Adds per-story a11y test configuration override.
packages/craftcms-cp/src/stories/tokens/spacing.stories.ts	Removes low-opacity styling from px values (readability/a11y).
packages/craftcms-cp/src/stories/tokens/Colors.mdx	New docs page describing palette/themes/static colors and rendering both themes.
packages/craftcms-cp/src/components/nav-item/nav-item.stories.ts	Disables list/listitem a11y rules for this story context.
packages/craftcms-cp/src/components/input-password/input-password.ts	Adds translated accessible labels for show/hide password icons.
packages/craftcms-cp/src/components/chip/chip.stories.ts	Replaces inline SVG with craft-icon and adds an accessible label.
packages/craftcms-cp/src/components/button/button.stories.ts	Adds accessible labels to icon-only button examples.
packages/craftcms-cp/src/components/breadcrumbs/breadcrumbs.ts	Sets a default translated label and removes manual role assignment.
packages/craftcms-cp/src/components/avatar/avatar.stories.ts	Disables svg-img-alt rule (with TODO note) for the avatar story.
packages/craftcms-cp/src/components/action-item/action-item.stories.ts	Adds per-story a11y test configuration marker.
packages/craftcms-cp/scripts/generate-colors.js	Updates token generation logic (semantic tokens + static color handling) and output header.
packages/craftcms-cp/scripts/generate-color-palette.js	New script to generate shared/color-palette.css from Leonardo themes.
packages/craftcms-cp/package.json	Adds Leonardo dependency and extends generate:colors to also generate the palette CSS.
packages/craftcms-cp/.storybook/preview.ts	Sets Storybook a11y failures to error and changes default theme to dark.

---

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