The Palette screen contains color-token fields and a storefront component preview. Select Palette in the menu to open it. The editor is headed Edit palette.
Fields and controls
Screen areas
Area | What it contains |
Menu | Lists Palette, Typography, Box shadow, Spacing, Border radius and Templates. |
Preview | Shows sample storefront components such as product cards, the app bar, the footer, buttons and toaster messages. |
Color groups | Holds one section for each color group, and each section contains its own color tokens. Each color group is an expandable section, and every section is expanded when the screen opens. |
Toolbar | Holds Reset, Cancel and Save. |
Color groups
Group | What it colors |
Background | Colors applied to the overall site background and container surfaces. The Default color applies to the entire site, and the Paper color applies to container-like surfaces such as a product card. |
Text | Colors for body copy and supporting text. |
AppBar | Colors for the top navigation bar. |
Footer | Colors for the footer section. |
Primary | Preview examples include action buttons, active product tabs, pagination and filter chips. |
Secondary | Preview examples include icon buttons with badges and banner action buttons. |
Warning | Preview examples include a warning toaster message and a promotion tag. |
Info | Preview includes an informational toaster message. |
Success | Preview examples include a success toaster message and an in-stock badge. |
Error | Preview examples include an error toaster message, an invalid input and a validation error message. |
Tokens in each group
Each group holds named color tokens. Each token has a text field labeled with the token name. Each token also shows its variable name and a Copy to clipboard button.
Group | Tokens |
Background | Default and Paper |
Text | Primary, Secondary and Disabled |
AppBar, Footer, Primary, Secondary, Warning, Info, Success and Error | Main, Light, Dark and Contrast Text |
Screen controls
Control | What it does |
Save | It is unavailable when the screen opens. |
Notes
The documented mobile menu styling for the default storefront template uses the paper background color and primary text color. The palette preview instead identifies the mobile menu with app bar main and contrast text colors.
Related