[6.x] Introduce static color palette using Leonardo, update button variants and appearances, add Docs#18791
Merged
Merged
Conversation
…ariable names to be more versatile
…h destructive as a boolean
gcamacho079
changed the title
There was a problem hiding this comment.
Pull request overview
This PR introduces a Leonardo-generated static color palette (theme-invariant), updates craft-button variants/appearances to a new model, and adds/expands Storybook documentation around tokens and buttons.
Changes:
- Added a static Leonardo theme + new static tokens, and updated the generated static palette values.
- Refactored
craft-buttonto newvariant/appearanceoptions and updated related styles/stories/docs. - Propagated read-only handling and updated a few CP UI components to use the new static colors.
Reviewed changes
Copilot reviewed 18 out of 32 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| resources/js/pages/SettingsSitesIndex.vue | Minor table state formatting tweak (column visibility). |
| resources/js/pages/SettingsSectionsIndexPage.vue | Table column visibility formatting; action button markup adjusted. |
| resources/js/composables/useCraftData.ts | Type formatting fix (semicolon). |
| resources/js/components/form/EntryTypeSelect.vue | Formatting/markup adjustments around action arrays and buttons. |
| resources/js/components/DevModeIndicator.vue | Switches dev-mode stripes to use a (new) static warning color token. |
| resources/build/useEditableTable.js | Built output updated (read-only handling and imports). |
| resources/build/SettingsSitesIndex.js | Built output updated (read-only derived from dist + column visibility). |
| resources/build/SettingsSitesEdit.js | Built output updated (read-only derived from dist + disabled wiring). |
| resources/build/SettingsSectionsIndexPage.js | Built output updated (read-only derived from dist + UI changes). |
| resources/build/SettingsSectionsEditPage.js | Built output updated (read-only derived from dist + entry type UI changes). |
| resources/build/manifest.json | Adds new build import dependency entries (e.g. _dist.js). |
| resources/build/InputCombobox.js | Built output updated (adds disabled support wiring). |
| resources/build/assets/SettingsSitesIndex.css | Built CSS hash updated for scoped styles. |
| resources/build/assets/SettingsSectionsEditPage.css | Built CSS hash updated for scoped styles. |
| resources/build/assets/InputCombobox.css | Built CSS hash updated for scoped styles. |
| resources/build/assets/AppLayout.css | Built CSS updated (dev mode stripe token ref + scoped hash). |
| resources/build/AppLayout.js | Built output updated (scope hash changes reflected). |
| packages/craftcms-cp/src/styles/static-variants.styles.ts | New shared Lit CSS for static variant-to-token mapping. |
| packages/craftcms-cp/src/styles/shared/tokens.css | Adds --c-text-black and introduces static component color tokens. |
| packages/craftcms-cp/src/styles/shared/color-palette.css | Replaces static palette values with newly generated ones. |
| packages/craftcms-cp/src/styles/color-definitions.js | Adds static contrast ratios and exports a staticTheme. |
| packages/craftcms-cp/src/stories/tokens/Colors.mdx | Documents static colors and renders the static palette in Storybook. |
| packages/craftcms-cp/src/components/switch-button/switch-button.ts | Updates checked track color to reference a static success token. |
| packages/craftcms-cp/src/components/indicator/indicator.ts | Moves indicator styling to the new static variants token system. |
| packages/craftcms-cp/src/components/button/Docs.mdx | New Storybook docs page for button appearance/variant guidance. |
| packages/craftcms-cp/src/components/button/button.ts | Updates the public button API (appearance/variant definitions). |
| packages/craftcms-cp/src/components/button/button.styles.ts | Refactors button appearance/variant styling to match new API. |
| packages/craftcms-cp/src/components/button/button.stories.ts | Updates stories to new API + adds variant-focused story. |
| packages/craftcms-cp/scripts/generate-color-palette.js | Generates static palette from staticTheme (not the light theme). |
Files not reviewed (11)
- resources/build/AppLayout.js: Language not supported
- resources/build/InputCombobox.js: Language not supported
- resources/build/SettingsSectionsEditPage.js: Language not supported
- resources/build/SettingsSectionsIndexPage.js: Language not supported
- resources/build/SettingsSitesEdit.js: Language not supported
- resources/build/SettingsSitesIndex.js: Language not supported
- resources/build/assets/AppLayout.css: Language not supported
- resources/build/assets/InputCombobox.css: Language not supported
- resources/build/assets/SettingsSectionsEditPage.css: Language not supported
- resources/build/assets/SettingsSitesIndex.css: Language not supported
- resources/build/useEditableTable.js: Language not supported
…condary to neutral
brianjhanson
changed the title
Contributor
|
@gcamacho079 I made a few adjustments to this
|
brianjhanson
approved these changes
Jun 3, 2026
brandonkelly
force-pushed
the
a11y/static-color-palette
branch
from
7dadd85 to
c630af6
Compare
…tor appearances consistent with button and callout appearances
brianjhanson
reviewed
Jun 4, 2026
|
|
||
| /* Filled */ | ||
| :host([appearance~='filled']) { | ||
| :host([appearance~='solid']) { |
Contributor
There was a problem hiding this comment.
@gcamacho079 I don't remember, what there a reason buttons get a solid appearance instead of fill?
Comment on lines
+10
to
+20
| export const ButtonAppearance = { | ||
| Solid: 'solid', | ||
| Outline: 'outline', | ||
| Plain: 'plain', | ||
| } as const; | ||
|
|
||
| export const ButtonVariant = { | ||
| Accent: 'accent', | ||
| Neutral: 'neutral', | ||
| Danger: 'danger', | ||
| } as const; |
Contributor
There was a problem hiding this comment.
I moved these into the button component because they're so specific
| } | ||
|
|
||
| :host([appearance~='accent']) { | ||
| :host([appearance~='solid']) { |
Contributor
There was a problem hiding this comment.
Feels like this should be fill too. Or were you wanting us to use solid instead of fill?
Contributor
Author
There was a problem hiding this comment.
@brianjhanson I do like the idea of sticking with solid. I personally find it confusing when other components use fill (like indicators) to refer to the appearance as well as the actual fill color, and I like the appearances being consistent with the ones already defined in the callout matrix.
| `, | ||
| }; | ||
|
|
||
| /** |
Contributor
There was a problem hiding this comment.
I removed all of this, as of #19033 the indicators do have appearances (but only fill, outline-fill and outline). We're going to need at least outline-fill and outline for element statuses. I included fill for good measure, but if that feels like too much we can ditch fill.
Contributor
Author
There was a problem hiding this comment.
@brianjhanson seems we're on the same page about that! I do think fill seems unnecessary.
Co-authored-by: Brian Hanson <brian@brianhanson.net>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
--color-static-blue-300) for colors we don’t want to change based on light/dark theme. This theme can be viewed on the Color Palette Storybook page.generate-colors.jsto be consistent with other warning colors in the control panelaccentwas previously a semantic variant as well as the name for the “most accented” component. In this PR, I retained the semantic name but updated the appearance name to be “solid.”outline-fillandfill).lightnesslevel of the colors, which should help to maintain contrast ratios.defaultamongst the semantic color names, the default option has been renamed toneutral. I personally found the use ofdefaultreally confusing, since it wasn’t clear whether it referred to an appearance or a variant. Sticking to a semantic naming style helped clarify this.Related issues
Resolves ACC-36