Introduce static color palette using Leonardo, update button variants and appearances, add Docs#18791
Open
gcamacho079 wants to merge 26 commits into
Open
Introduce static color palette using Leonardo, update button variants and appearances, add Docs#18791gcamacho079 wants to merge 26 commits into
gcamacho079 wants to merge 26 commits into
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
Contributor
Author
|
@brianjhanson, we discussed a few more changes in the last design meeting (such as opt-out/styleless buttons), but I wanted to keep this PR focused on the static color palette and working through some of the naming consistency we discussed. |
gcamacho079
added
accessibility 👤
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