71 roles mapped · Carbon parity contract
From Carbon
Avala adopts Carbon's role taxonomy verbatim — every token name maps 1:1. Most values diverge to track Avala's brand. This is the rename + value-override map for adopters cutting over from Carbon.
Value override63
Identical5
Avala extension3
Diff legend. identical = byte-equivalent value. value-override = same role, Avala ships a different value. extended = Avala-only role with no Carbon counterpart. dropped = Carbon role intentionally not adopted.
| Sample | Carbon role | Avala role | Diff | Notes |
|---|---|---|---|---|
background | background | Value override | Carbon g100=#161616. Avala g100=#121212 (deeper, brand override). | |
background-hover | background-hover | Value override | — | |
background-active | background-active | Value override | — | |
background-selected | background-selected | Value override | — | |
background-selected-hover | background-selected-hover | Value override | — | |
background-inverse | background-inverse | Value override | — | |
background-brand | background-brand | Value override | Avala = brand orange #FF5C00. | |
layer-01 | layer-01 | Value override | Carbon=#262626, Avala=#1A1A1A. | |
layer-02 | layer-02 | Value override | — | |
layer-03 | layer-03 | Value override | — | |
layer-hover-01 | layer-hover-01 | Value override | — | |
layer-hover-02 | layer-hover-02 | Value override | — | |
layer-hover-03 | layer-hover-03 | Value override | — | |
layer-active-01 | layer-active-01 | Value override | — | |
layer-selected-01 | layer-selected-01 | Value override | — | |
layer-selected-inverse | layer-selected-inverse | Identical | — | |
layer-accent-01 | layer-accent-01 | Value override | — | |
field-01 | field-01 | Value override | — | |
field-02 | field-02 | Value override | — | |
field-03 | field-03 | Value override | — | |
field-hover-01 | field-hover-01 | Value override | — | |
border-subtle-00 | border-subtle-00 | Value override | — | |
border-subtle-01 | border-subtle-01 | Value override | — | |
border-strong-01 | border-strong-01 | Value override | — | |
border-tile-01 | border-tile-01 | Value override | — | |
border-inverse | border-inverse | Identical | — | |
border-interactive | border-interactive | Value override | Avala = brand orange. | |
border-disabled | border-disabled | Value override | — | |
text-primary | text-primary | Identical | — | |
text-secondary | text-secondary | Value override | — | |
text-placeholder | text-placeholder | Value override | — | |
text-helper | text-helper | Value override | — | |
text-error | text-error | Value override | Avala g100=#FA4D56 (Carbon-aligned, AA contrast on layer-01 5.0:1). | |
text-disabled | text-disabled | Value override | — | |
text-inverse | text-inverse | Value override | — | |
text-on-color | text-on-color | Identical | — | |
text-on-color-disabled | text-on-color-disabled | Value override | — | |
support-success | support-success | Value override | Avala #50CC3D (locked review-state). | |
support-warning | support-warning | Value override | Avala #F7B100 (locked). | |
support-error | support-error | Value override | Avala #D93636 (locked) — distinct from text-error which is contrast-tuned. | |
support-info | support-info | Value override | Avala #6FC1E0 — Carbon's blue, Avala-tuned. | |
notification-background-error | notification-background-error | Value override | — | |
notification-background-success | notification-background-success | Value override | — | |
notification-background-warning | notification-background-warning | Value override | — | |
notification-background-info | notification-background-info | Value override | — | |
interactive | interactive | Value override | Avala = brand orange #FF5C00. | |
focus | focus | Value override | Carbon=white. Avala=#FF5C00 (brand orange, 5.5:1 contrast on canvas). | |
focus-inset | focus-inset | Value override | — | |
focus-inverse | focus-inverse | Identical | — | |
button-primary | button-primary | Value override | — | |
button-secondary | button-secondary | Value override | — | |
button-tertiary | button-tertiary | Value override | — | |
button-danger-primary | button-danger-primary | Value override | — | |
button-disabled | button-disabled | Value override | — | |
tag-background-red | tag-background-red | Value override | — | |
tag-background-magenta | tag-background-magenta | Value override | — | |
tag-background-purple | tag-background-purple | Value override | — | |
tag-background-blue | tag-background-blue | Value override | — | |
tag-background-cyan | tag-background-cyan | Value override | — | |
tag-background-teal | tag-background-teal | Value override | — | |
tag-background-green | tag-background-green | Value override | — | |
tag-background-gray | tag-background-gray | Value override | — | |
tag-background-cool-gray | tag-background-cool-gray | Value override | — | |
tag-background-warm-gray | tag-background-warm-gray | Value override | — | |
ai-overlay | ai-overlay | Value override | Carbon: aiOverlay. Avala renders the same role with brand-orange tone. | |
ai-popover-background | ai-popover-background | Value override | — | |
ai-aura-start | ai-aura-start | Value override | Carbon=blue. Avala=#FF5C00 @ 40%. | |
ai-border-strong | ai-border-strong | Value override | — | |
— | av-card-gradient-start / -end | Avala extension | Avala extension for marketing card backgrounds. No Carbon equivalent. | |
— | av-status-pending / -overlooked | Avala extension | Avala review-state extensions beyond Carbon's quartet. | |
— | av-locked-status-success / -warning / -error / -info | Avala extension | Locked review-state palette (cannot be overridden). |
Cutover plan
- Replace
@carbon/themeswith@avala/design-tokens. Tokens emit identical CSS variable names; the swap is a single import-line change. - Replace
@carbon/reactwith@avala/design. Component import paths differ; the API surface mirrors Carbon for the 30+ components Avala has shipped. - Wire the brand × tone matrix — pick a brand for your surface, then optionally toggle g10 (light) at runtime.
- Add the locked review-state quartet to your stylelint allowlist. Avala enforces these via governance.