A color palette defines shared visual values and applies them across an interface or component system. CSS custom properties keep those values centralized while allowing components to consume them through var(...). section 10.2
Build a palette incrementally:
- Declare semantic values such as --text-color, --label-color, and --inverted-text-color on :root. section 10.2
- Consume the variables inside component styles with color: var(--text-color) and related declarations. section 10.2
- Change the root values to switch the application palette without rewriting each component’s styles. section 10.2
- Use inherited custom properties to pass palette choices into Shadow DOM while keeping component structure isolated. section 10.2
Switching to a green palette
Replace the root values with --text-color: #47730c, --label-color: #59b624, and --inverted-text-color: #daf8a1. Components already using those variables adopt the new appearance. section 10.2
Listing 10.12. Defining global variables in CSS for text color and size
:root { #1
--inverted-text-color: #eaeaea;
--text-color: #3a3a3a;
--label-color: #2a2a2a;
--header-font-size: 21px;
--font: 'Roboto Slab', serif;
}
Inspect the semantic root-level variables that form the palette and also centralize typography choices. section 10.2
