[6.x] Wrangle color variables

[brianjhanson]

Based off feature/inertia-section-single just so there will be less to backfill when this gets merged.

This looks like more than it is, the goal here is to centralize the "level" of our colors into quiet, normal and loud in the same vein as Web Awesome.

Lots of renaming, not a lot of changes.

Some initial docs about where the system is going can be found in the Storybook

[Copilot]

Pull request overview

This PR centralizes CP color tokens into a consistent “quiet / normal / loud” scheme (aligned with Web Awesome semantics) and updates various Vue/Lit styles to use the renamed CSS variables, plus adds Storybook token reference stories.

Changes:

• Introduces new surface/text/semantic token naming in tokens.css (e.g. --c-surface-*, --c-text-*, --c-color-*-fill-*).
• Updates CP UI styles across Vue pages/components and Lit components to use the new token names.
• Adds Storybook token stories (surface/spacing/text/semantic colors) and a padded table helper class.

Reviewed changes

Copilot reviewed 58 out of 58 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
yii2-adapter/legacy/web/twig/variables/Cp.php	Adds deprecation note for legacy getTemplateSuggestions() (typo present).
src/Cp/SelectOptions.php	Updates @since for getTemplateSuggestions() docblock.
resources/js/pages/Updater.vue	Updates code/error styling to “quiet” token names.
resources/js/pages/SettingsSitesIndex.vue	Updates border token class + adds spacing="relaxed".
resources/js/pages/SettingsSitesEdit.vue	Updates border token class.
resources/js/pages/SettingsSectionsEditPage.vue	Updates border token class.
resources/js/pages/SettingsIndexPage.vue	Moves to new surface/text tokens + accent quiet hover tokens.
resources/js/pages/SettingsGeneralPage.vue	Updates border token + changes size→maxlength on retry duration input.
resources/js/pages/Install.vue	Updates dot border/bg token names.
resources/js/layout/IndexLayout.vue	Updates border token class.
resources/js/layout/AppLayout.vue	Minor import reorder + border token class change for breadcrumbs.
resources/js/components/utilities/Updates/Updates.vue	Updates blockquote styling token names.
resources/js/components/utilities/Updates/Update.vue	Updates divider/background token names (uses undefined --c-border-quiet).
resources/js/components/utilities/Updates/Release.vue	Updates release card token names (still uses --c-bg-overlay elsewhere).
resources/js/components/utilities/QueueManager/QueueManagerShow.vue	Updates table row divider token (uses undefined --c-border-quiet).
resources/js/components/utilities/ProjectConfig/ProjectConfigDiff.vue	Updates diff info background/border token names.
resources/js/components/utilities/ProjectConfig/ProjectConfig.vue	Updates config viewer background/border token names.
resources/js/components/utilities/AssetIndexes/SessionProgress.vue	Updates progress UI token names.
resources/js/components/utilities/AssetIndexes/IndexingSessions.vue	Updates border token names.
resources/js/components/sections/PreviewTargetsTable.vue	Updates dashed border token class.
resources/js/components/Pane.vue	Updates pane surface/shadow/border token names.
resources/js/components/InputCombobox.vue	Updates border/bg token names in options list rows.
resources/js/components/CalloutReadOnly.vue	Updates border token class.
resources/css/cp.css	Renames theme border token mapping to “quiet”.
packages/craftcms-cp/src/styles/variants.styles.ts	Renames variant-mapped CSS custom properties to fill/border/on loud/normal/quiet.
packages/craftcms-cp/src/styles/shared/tokens.css	Major token rename to surface/text + semantic fill/border/on loud/normal/quiet (missing bg-* aliases; duplicate dark var).
packages/craftcms-cp/src/styles/shared/base.css	Updates base styles to new surface/text tokens + adds .cp-table--padded.
packages/craftcms-cp/src/styles/form.styles.ts	Updates form colors to new text + border loud naming.
packages/craftcms-cp/src/stories/tokens/text.stories.ts	Adds Storybook story for text tokens.
packages/craftcms-cp/src/stories/tokens/surface.stories.ts	Adds Storybook stories for surfaces and shadows.
packages/craftcms-cp/src/stories/tokens/spacing.stories.ts	Adds Storybook story for spacing tokens.
packages/craftcms-cp/src/stories/tokens/helpers.ts	Adds shared Storybook helpers + semantic color groups definition.
packages/craftcms-cp/src/stories/tokens/colors.stories.ts	Adds Storybook story for semantic color tokens.
packages/craftcms-cp/src/components/tooltip/tooltip.ts	Updates tooltip surface/border token fallbacks.
packages/craftcms-cp/src/components/tabs/tabs.styles.ts	Updates tabs border token fallback.
packages/craftcms-cp/src/components/tab/tab.styles.ts	Updates active border token fallback.
packages/craftcms-cp/src/components/switch-button/switch-button.ts	Updates track/thumb token usage to new surface/fill/border loud naming.
packages/craftcms-cp/src/components/shortcut/shortcut.ts	Updates shortcut background/border tokens.
packages/craftcms-cp/src/components/progress-bar/progress-bar.ts	Updates docs to new track token name.
packages/craftcms-cp/src/components/progress-bar/progress-bar.styles.ts	Updates default track token to fill-quiet.
packages/craftcms-cp/src/components/popover/popover.ts	Updates popover surface/border tokens.
packages/craftcms-cp/src/components/option/option.styles.ts	Updates option active/checked/hover tokens to fill/on loud/normal.
packages/craftcms-cp/src/components/input/input.styles.ts	Updates help-text token to --c-text-quiet.
packages/craftcms-cp/src/components/input-file/selected-file-list.ts	Updates selected file list border/surface token names.
packages/craftcms-cp/src/components/indicator/indicator.ts	Updates indicator tokens to fill/border/on loud; updates empty state fill.
packages/craftcms-cp/src/components/dropdown/dropdown.ts	Updates dropdown surface/border + list item fill token.
packages/craftcms-cp/src/components/drawer/drawer.ts	Updates drawer surface token but includes background-color: red;.
packages/craftcms-cp/src/components/copy-attribute/copy-attribute.styles.ts	Updates focus styling tokens.
packages/craftcms-cp/src/components/combobox/combobox.styles.ts	Updates listbox border/surface token names.
packages/craftcms-cp/src/components/chip/chip.styles.ts	Updates chip border/bg/fg token names.
packages/craftcms-cp/src/components/checkbox/checkbox.ts	Updates help text token name.
packages/craftcms-cp/src/components/card/card.styles.ts	Updates card border/bg/fg token names.
packages/craftcms-cp/src/components/callout/callout.styles.ts	Updates callout token mapping to fill/border/on loud/normal/quiet and link token name.
packages/craftcms-cp/src/components/breadcrumb-item/breadcrumb-item.ts	Removes unused imports + updates separator text token.
packages/craftcms-cp/src/components/badge-indicator/badge-indicator.styles.ts	Updates badge colors/borders to new tokens.
packages/craftcms-cp/src/components/action-menu/action-menu.ts	Updates menu border/surface tokens.
packages/craftcms-cp/src/components/action-item/action-item.styles.ts	Updates action item hover/active tokens to fill/on quiet/loud.
packages/craftcms-cp/.storybook/preview.css	Adds shared Storybook preview styles (stage/swatch/stack).

---

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

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.