11.1 Button
Button has 4 types. Each uses a different subset of the 6 color roles from the Color / Active collection.
| Type | color | on-color | container | on-container | outline | focus |
|---|---|---|---|---|---|---|
| primary | ✓ bg | ✓ text | – | – | – | ✓ focus |
| outline | – | – | – | ✓ text | ✓ border | ✓ focus |
| light | – | – | ✓ bg | ✓ text | – | ✓ focus |
| basic | – | – | – | ✓ text | – | ✓ focus |
Size Tokens
| Token | sm | md | lg |
|---|---|---|---|
button-height | 32px | 40px | 48px |
button-padding-x | 8px | 16px | 16px |
button-font-size | 14px | 14px | 16px |
button-icon-size | 16px | 20px | 20px |
button-gap | 4px | 8px | 8px |
SCSS Implementation Sketch
SCSS — Button component
// Color classes (one per family)
.cck-button__color--brand { --cck-color: var(--brand-color); /* ...all 6 */ }
.cck-button__color--danger { --cck-color: var(--danger-color); /* ...all 6 */ }
// Type classes (one per type — reads color class vars)
.cck-button__type--primary:not(:disabled) {
background-color: var(--cck-color);
color: var(--cck-on-color);
height: var(--button-height);
padding: 0 var(--button-padding-x);
font-size: var(--button-font-size);
border-radius: var(--button-radius);
&:focus-visible { box-shadow: 0 0 0 3px var(--cck-focus); }
}
.cck-button__type--outline:not(:disabled) {
background-color: transparent;
color: var(--cck-on-container);
border: 1px solid var(--cck-outline);
&:focus-visible { box-shadow: 0 0 0 3px var(--cck-focus); }
}
// Disabled (structural — same for all types)
.cck-button:disabled {
background-color: var(--button-disabled-bg);
color: var(--button-disabled-text);
border-color: var(--button-disabled-border);
cursor: not-allowed;
}11.2 Toggle
Toggle uses only color (and optionally focus) from the shared collection. All other colors are structural.
| State | Track color | Thumb color | Source |
|---|---|---|---|
| Unchecked | --toggle-track-off (gray) | --toggle-thumb (white) | Structure collection |
| Checked | var(--cck-color) (brand/danger/…) | --toggle-thumb (white) | Color/Active + Structure |
| Disabled (any) | --toggle-track-disabled | --toggle-thumb-disabled | Structure collection |
11.3 Checkbox
Checkbox uses color and focus from Color/Active. All other colors (border when unchecked, checkmark itself) are structural.
| Element | State | Color Source |
|---|---|---|
| Box border | unchecked | --checkbox-border-off → {border-default} (Structural) |
| Box background | unchecked | --checkbox-bg-off → transparent (Structural) |
| Box border + bg | checked | var(--cck-color) (Color/Active) |
| Checkmark icon | checked | --checkbox-checkmark → white (Structural) |
| Focus ring | focused | var(--cck-focus) (Color/Active) |
11.4 Tab
Tab has 4 types: fill, border, basic, and line. Each uses different roles:
| Type | Active bg | Active text | Indicator | Focus |
|---|---|---|---|---|
| fill | color | on-color | – | focus |
| border | container | on-container | outline | focus |
| basic | transparent | on-container | – | focus |
| line | transparent | on-container | outline (underline) | focus |
The Pattern is Consistent
Every component follows the same two-class approach. Add the color class, add the type class. That's it. The same SCSS pattern works for Button, Toggle, Checkbox, Tab, Badge, Icon — every component.