Semantic tokens that reference color mode tokens, applying their values to specific contexts.
Component-specific colors
Updated May 12, 2026
| Token | Value | Description |
|---|---|---|
| badge.inverse.bg-alt | {mode.color.status.info.inverse.default} | |
| badge.inverse.bg-default | {mode.color.status.negative.inverse.default} | Used in global nav notification badges |
| badge.inverse.border-default | {mode.color.generic.bg.inverse.nought} | |
| badge.inverse.label-alt | {mode.color.generic.txt.extreme} | |
| badge.inverse.label-default | {mode.color.generic.txt.extreme} | |
| badge.bg-alt | {mode.color.status.info.default} | |
| badge.bg-default | {mode.color.status.negative.default} | Used in global nav notification badges |
| badge.border-default | {mode.color.generic.bg.nought} | |
| badge.label-alt | {mode.color.generic.txt.inverse.extreme} | |
| badge.label-default | {mode.color.generic.txt.inverse.extreme} | |
| badge.none | {mode.color.none} | transparent override used for hiding colors when needed. |
<code class="language-json">{
"badge": {
"inverse": {
"bg-alt": {
"$type": "color",
"$value": "{mode.color.status.info.inverse.default}"
},
"bg-default": {
"$description": "Used in global nav notification badges",
"$type": "color",
"$value": "{mode.color.status.negative.inverse.default}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.generic.bg.inverse.nought}"
},
"label-alt": {
"$type": "color",
"$value": "{mode.color.generic.txt.extreme}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.generic.txt.extreme}"
}
},
"bg-alt": {
"$type": "color",
"$value": "{mode.color.status.info.default}"
},
"bg-default": {
"$description": "Used in global nav notification badges",
"$type": "color",
"$value": "{mode.color.status.negative.default}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.generic.bg.nought}"
},
"label-alt": {
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.extreme}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.extreme}"
},
"none": {
"$description": "transparent override used for hiding colors when needed.",
"$type": "color",
"$value": "{mode.color.none}"
}
}
}</code>| Token | Value | Description |
|---|---|---|
| button.ai.border-disabled | {mode.color.action.inactive.default} | |
| button.ai.label-active | {mode.color.action.grayscale.withActiveAlt} | |
| button.ai.label-default | {mode.color.action.grayscale.default} | |
| button.ai.label-disabled | {mode.color.action.inactive.txt} | |
| button.ai.label-hover | {mode.color.action.grayscale.withHover} | |
| button.destructive.primary.bg-default | {mode.color.action.danger.default} | |
| button.destructive.primary.bg-disabled | {mode.color.action.inactive.default} | |
| button.destructive.primary.bg-hover | {mode.color.action.danger.hover} | |
| button.destructive.primary.label-default | {mode.color.action.danger.withDefault} | |
| button.destructive.primary.label-disabled | {mode.color.action.inactive.txtAlt} | |
| button.destructive.primary.label-hover | {mode.color.action.danger.withDefault} | |
| button.destructive.secondary.bg-hover | {mode.color.action.danger.hoverAlt} | |
| button.destructive.secondary.border-default | {mode.color.action.danger.default} | |
| button.destructive.secondary.border-disabled | {mode.color.action.inactive.default} | |
| button.destructive.secondary.border-hover | {mode.color.action.danger.hover} | |
| button.destructive.secondary.label-default | {mode.color.action.danger.default} | |
| button.destructive.secondary.label-disabled | {mode.color.action.inactive.txt} | |
| button.destructive.secondary.label-hover | {mode.color.action.danger.hover} | |
| button.typical.primary.inverse.bg-active | {mode.color.action.main.inverse.active} | |
| button.typical.primary.inverse.bg-default | {mode.color.action.main.inverse.default} | |
| button.typical.primary.inverse.bg-disabled | {mode.color.action.inactive.inverse.default} | |
| button.typical.primary.inverse.bg-hover | {mode.color.action.main.inverse.hover} | |
| button.typical.primary.inverse.border-default | {mode.color.action.main.inverse.withDefault} | For spacer in Split button |
| button.typical.primary.inverse.label-active | {mode.color.action.main.inverse.withActive} | |
| button.typical.primary.inverse.label-default | {mode.color.action.main.inverse.withDefault} | |
| button.typical.primary.inverse.label-disabled | {mode.color.action.inactive.inverse.txtAlt} | |
| button.typical.primary.inverse.label-hover | {mode.color.action.main.inverse.withDefault} | |
| button.typical.primary.bg-active | {mode.color.action.main.active} | |
| button.typical.primary.bg-default | {mode.color.action.main.default} | |
| button.typical.primary.bg-disabled | {mode.color.action.inactive.default} | |
| button.typical.primary.bg-hover | {mode.color.action.main.hover} | |
| button.typical.primary.border-default | {mode.color.action.main.withDefault} | For spacer in Split button |
| button.typical.primary.label-active | {mode.color.action.main.withActive} | |
| button.typical.primary.label-default | {mode.color.action.main.withDefault} | |
| button.typical.primary.label-disabled | {mode.color.action.inactive.txtAlt} | |
| button.typical.primary.label-hover | {mode.color.action.main.withDefault} | |
| button.typical.secondary.inverse.bg-active | {mode.color.action.main.inverse.activeAlt} | |
| button.typical.secondary.inverse.bg-default | {mode.color.action.main.inverse.defaultAlt3} | |
| button.typical.secondary.inverse.bg-hover | {mode.color.action.main.inverse.hoverAlt} | |
| button.typical.secondary.inverse.border-active | {mode.color.action.main.inverse.active} | |
| button.typical.secondary.inverse.border-default | {mode.color.action.main.inverse.defaultAlt} | |
| button.typical.secondary.inverse.border-disabled | {mode.color.action.inactive.inverse.default} | |
| button.typical.secondary.inverse.border-hover | {mode.color.action.main.inverse.hover} | |
| button.typical.secondary.inverse.label-active | {mode.color.action.grayscale.inverse.withActiveAlt} | |
| button.typical.secondary.inverse.label-default | {mode.color.action.grayscale.inverse.default} | |
| button.typical.secondary.inverse.label-disabled | {mode.color.action.inactive.inverse.txt} | |
| button.typical.secondary.inverse.label-hover | {mode.color.action.grayscale.inverse.withHover} | |
| button.typical.secondary.bg-active | {mode.color.action.main.activeAlt} | |
| button.typical.secondary.bg-default | {mode.color.action.main.defaultAlt3} | |
| button.typical.secondary.bg-hover | {mode.color.action.main.hoverAlt} | |
| button.typical.secondary.border-active | {mode.color.action.main.active} | |
| button.typical.secondary.border-default | {mode.color.action.main.defaultAlt} | |
| button.typical.secondary.border-disabled | {mode.color.action.inactive.default} | |
| button.typical.secondary.border-hover | {mode.color.action.main.hover} | |
| button.typical.secondary.label-active | {mode.color.action.grayscale.withActiveAlt} | |
| button.typical.secondary.label-default | {mode.color.action.grayscale.default} | |
| button.typical.secondary.label-disabled | {mode.color.action.inactive.txt} | |
| button.typical.secondary.label-hover | {mode.color.action.grayscale.withHover} | |
| button.typical.subtle.inverse.bg-active | {mode.color.action.grayscale.inverse.activeAlt} | |
| button.typical.subtle.inverse.bg-hover | {mode.color.action.grayscale.inverse.hoverAlt} | |
| button.typical.subtle.inverse.label-active | {mode.color.action.grayscale.inverse.withActiveAlt} | |
| button.typical.subtle.inverse.label-default | {mode.color.action.grayscale.inverse.default} | |
| button.typical.subtle.inverse.label-disabled | {mode.color.action.inactive.inverse.txt} | |
| button.typical.subtle.inverse.label-hover | {mode.color.action.grayscale.inverse.withHover} | |
| button.typical.subtle.bg-active | {mode.color.action.grayscale.activeAlt} | |
| button.typical.subtle.bg-hover | {mode.color.action.grayscale.hoverAlt} | |
| button.typical.subtle.label-active | {mode.color.action.grayscale.withActiveAlt} | |
| button.typical.subtle.label-default | {mode.color.action.grayscale.default} | |
| button.typical.subtle.label-disabled | {mode.color.action.inactive.txt} | |
| button.typical.subtle.label-hover | {mode.color.action.grayscale.withHover} | |
| button.typical.tertiary.inverse.bg-active | {mode.color.action.main.inverse.activeAlt} | |
| button.typical.tertiary.inverse.bg-default | {button.none} | |
| button.typical.tertiary.inverse.bg-hover | {mode.color.action.main.inverse.hoverAlt} | |
| button.typical.tertiary.inverse.border-active | {mode.color.action.main.inverse.active} | |
| button.typical.tertiary.inverse.border-default | {mode.color.action.main.inverse.defaultAlt} | |
| button.typical.tertiary.inverse.border-disabled | {mode.color.action.inactive.inverse.default} | |
| button.typical.tertiary.inverse.border-hover | {mode.color.action.main.inverse.hover} | |
| button.typical.tertiary.inverse.label-active | {mode.color.action.grayscale.inverse.withActiveAlt} | |
| button.typical.tertiary.inverse.label-default | {mode.color.action.grayscale.inverse.default} | |
| button.typical.tertiary.inverse.label-disabled | {mode.color.action.inactive.inverse.txt} | |
| button.typical.tertiary.inverse.label-hover | {mode.color.action.grayscale.inverse.withHover} | |
| button.typical.tertiary.bg-active | {mode.color.action.main.activeAlt} | |
| button.typical.tertiary.bg-default | {button.none} | |
| button.typical.tertiary.bg-hover | {mode.color.action.main.hoverAlt} | |
| button.typical.tertiary.border-active | {mode.color.action.main.active} | |
| button.typical.tertiary.border-default | {mode.color.action.main.defaultAlt} | |
| button.typical.tertiary.border-disabled | {mode.color.action.inactive.default} | |
| button.typical.tertiary.border-hover | {mode.color.action.main.hover} | |
| button.typical.tertiary.label-active | {mode.color.action.grayscale.withActiveAlt} | |
| button.typical.tertiary.label-default | {mode.color.action.grayscale.default} | |
| button.typical.tertiary.label-disabled | {mode.color.action.inactive.txt} | |
| button.typical.tertiary.label-hover | {mode.color.action.grayscale.withHover} | |
| button.typical.toggle.bg-active | {mode.color.action.grayscale.active} | |
| button.typical.toggle.bg-activeDisabled | {mode.color.action.inactive.default} | |
| button.typical.toggle.bg-hover | {mode.color.action.grayscale.hoverAlt} | |
| button.typical.toggle.border-default | {mode.color.action.grayscale.default} | |
| button.typical.toggle.border-disabled | {mode.color.action.inactive.default} | |
| button.typical.toggle.label-active | {mode.color.action.grayscale.withActive} | |
| button.typical.toggle.label-activeDisabled | {mode.color.action.inactive.txtAlt} |
| button.typical.toggle.label-default | {mode.color.action.grayscale.defaultAlt} | |
| button.typical.toggle.label-disabled | {mode.color.action.inactive.txt} | |
| button.typical.toggle.label-hover | {mode.color.action.grayscale.withHover} | |
| button.video.primary.bg-default | {mode.color.action.grayscale.withDefault} | |
| button.video.primary.bg-hover | {mode.color.action.grayscale.withDefault} | |
| button.video.primary.label-default | {mode.color.action.grayscale.default} | |
| button.video.primary.label-hover | {mode.color.action.grayscale.default} | |
| button.video.secondary.bg-hover | {mode.color.action.grayscale.withDefault} | |
| button.video.secondary.border-default | {mode.color.action.grayscale.withDefault} | |
| button.video.secondary.border-hover | {mode.color.action.grayscale.withDefault} | |
| button.video.secondary.label-default | {mode.color.action.grayscale.withDefault} | |
| button.video.secondary.label-hover | {mode.color.action.grayscale.default} | |
| button.video.bg-blur | {mode.color.action.grayscale.hoverAlt} | |
| button.none | {mode.color.none} | transparent override used for hiding colors when needed. |
<code class="language-json">{
"button": {
"ai": {
"border-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withActiveAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.default}"
},
"label-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.txt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withHover}"
}
},
"destructive": {
"primary": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.action.danger.default}"
},
"bg-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.danger.hover}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.danger.withDefault}"
},
"label-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.txtAlt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.danger.withDefault}"
}
},
"secondary": {
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.danger.hoverAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.action.danger.default}"
},
"border-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
},
"border-hover": {
"$type": "color",
"$value": "{mode.color.action.danger.hover}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.danger.default}"
},
"label-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.txt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.danger.hover}"
}
}
},
"typical": {
"primary": {
"inverse": {
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.active}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.default}"
},
"bg-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.inverse.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.hover}"
},
"border-default": {
"$description": "For spacer in Split button",
"$type": "color",
"$value": "{mode.color.action.main.inverse.withDefault}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.withActive}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.withDefault}"
},
"label-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.inverse.txtAlt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.withDefault}"
}
},
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.main.active}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.action.main.default}"
},
"bg-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.main.hover}"
},
"border-default": {
"$description": "For spacer in Split button",
"$type": "color",
"$value": "{mode.color.action.main.withDefault}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.main.withActive}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.main.withDefault}"
},
"label-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.txtAlt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.main.withDefault}"
}
},
"secondary": {
"inverse": {
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.activeAlt}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.defaultAlt3}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.hoverAlt}"
},
"border-active": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.active}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.defaultAlt}"
},
"border-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.inverse.default}"
},
"border-hover": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.hover}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.inverse.withActiveAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.inverse.default}"
},
"label-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.inverse.txt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.inverse.withHover}"
}
},
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.main.activeAlt}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.action.main.defaultAlt3}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.main.hoverAlt}"
},
"border-active": {
"$type": "color",
"$value": "{mode.color.action.main.active}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.action.main.defaultAlt}"
},
"border-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
},
"border-hover": {
"$type": "color",
"$value": "{mode.color.action.main.hover}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withActiveAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.default}"
},
"label-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.txt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withHover}"
}
},
"subtle": {
"inverse": {
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.inverse.activeAlt}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.inverse.hoverAlt}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.inverse.withActiveAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.inverse.default}"
},
"label-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.inverse.txt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.inverse.withHover}"
}
},
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.activeAlt}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.hoverAlt}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withActiveAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.default}"
},
"label-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.txt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withHover}"
}
},
"tertiary": {
"inverse": {
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.activeAlt}"
},
"bg-default": {
"$type": "color",
"$value": "{button.none}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.hoverAlt}"
},
"border-active": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.active}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.defaultAlt}"
},
"border-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.inverse.default}"
},
"border-hover": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.hover}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.inverse.withActiveAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.inverse.default}"
},
"label-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.inverse.txt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.inverse.withHover}"
}
},
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.main.activeAlt}"
},
"bg-default": {
"$type": "color",
"$value": "{button.none}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.main.hoverAlt}"
},
"border-active": {
"$type": "color",
"$value": "{mode.color.action.main.active}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.action.main.defaultAlt}"
},
"border-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
},
"border-hover": {
"$type": "color",
"$value": "{mode.color.action.main.hover}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withActiveAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.default}"
},
"label-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.txt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withHover}"
}
},
"toggle": {
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"bg-activeDisabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.hoverAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.default}"
},
"border-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withActive}"
},
"label-activeDisabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.txtAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.defaultAlt}"
},
"label-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.txt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withHover}"
}
}
},
"video": {
"primary": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withDefault}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withDefault}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.default}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.default}"
}
},
"secondary": {
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withDefault}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withDefault}"
},
"border-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withDefault}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withDefault}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.default}"
}
},
"bg-blur": {
"$type": "color",
"$value": "{mode.color.action.grayscale.hoverAlt}"
}
},
"none": {
"$description": "transparent override used for hiding colors when needed.",
"$type": "color",
"$value": "{mode.color.none}"
}
}
}</code>| Token | Value | Description |
|---|---|---|
| container.standard.inverse.bg-alt | {mode.color.generic.bg.inverse.delicate} | |
| container.standard.inverse.bg-default | {mode.color.generic.bg.inverse.nought} | |
| container.standard.inverse.border-alt | {mode.color.generic.fg.inverse.firm} | |
| container.standard.inverse.border-default | {mode.color.generic.fg.inverse.soft} | |
| container.standard.inverse.txt-alt | {mode.color.generic.txt.inverse.moderate} | for subheadings etc |
| container.standard.inverse.txt-default | {mode.color.generic.txt.inverse.severe} | for headings, paragraph txt etc |
| container.standard.priority.inverse.bg-caution | {mode.color.status.warning.inverse.default} | |
| container.standard.priority.inverse.bg-info | {mode.color.status.info.inverse.default} | |
| container.standard.priority.inverse.bg-negative | {mode.color.status.negative.inverse.default} | |
| container.standard.priority.inverse.bg-neutral | {mode.color.status.neutral.inverse.default} | |
| container.standard.priority.inverse.bg-positive | {mode.color.status.positive.inverse.default} | |
| container.standard.priority.inverse.bg-prio | {mode.color.status.priority.inverse.default} | |
| container.standard.priority.bg-caution | {mode.color.status.warning.default} | |
| container.standard.priority.bg-info | {mode.color.status.info.default} | |
| container.standard.priority.bg-negative | {mode.color.status.negative.default} | |
| container.standard.priority.bg-neutral | {mode.color.status.neutral.default} | |
| container.standard.priority.bg-positive | {mode.color.status.positive.default} | |
| container.standard.priority.bg-prio | {mode.color.status.priority.default} | |
| container.standard.bg-alt | {mode.color.generic.bg.faint} | |
| container.standard.bg-default | {mode.color.generic.bg.nought} | |
| container.standard.bgFooter-default | {mode.color.generic.bg.faint} | tile footer bg color |
| container.standard.border-active | {mode.color.action.grayscale.active} | |
| container.standard.border-alt | {mode.color.generic.fg.firm} | |
| container.standard.border-default | {mode.color.generic.fg.soft} | |
| container.standard.dimmer | {mode.color.action.inactive.mask} | dimmed mask for dialogs |
| container.standard.icon | {mode.color.generic.fg.firm} | Link preview image thumbnail |
| container.standard.txt-alt | {mode.color.generic.txt.moderate} | for subheadings etc |
| container.standard.txt-default | {mode.color.generic.txt.severe} | for headings, paragraph txt etc |
| container.scrollbar.inverse.bg-default | {mode.color.generic.bg.inverse.soft} | |
| container.scrollbar.inverse.fg-default | {mode.color.generic.fg.inverse.firm} | |
| container.scrollbar.bg-default | {mode.color.generic.bg.faint} | |
| container.scrollbar.fg-default | {mode.color.generic.fg.firm} | |
| container.quote.border | {mode.color.action.main.default} | |
| container.action.detailedicon.bg | {mode.color.status.custom.green.default} | |
| container.action.target.bg-default | {mode.color.status.info.default} | draggable drop target background color |
| container.action.bg-default | {mode.color.generic.bg.nought} | |
| container.action.bg-disabled | {mode.color.action.inactive.defaultAlt} | |
| container.action.bg-hover | {mode.color.action.grayscale.hoverAlt} | Used for accordion hov backgrounds |
| container.action.bgFooter-activated | {mode.color.status.positive.default} | |
| container.action.bgFooter-active | {mode.color.action.grayscale.active} | |
| container.action.bgFooter-default | {mode.color.generic.bg.nought} | tile footer bg color |
| container.action.border-activated | {mode.color.status.positive.default} | |
| container.action.border-active | {mode.color.action.grayscale.active} | |
| container.action.border-alt | {mode.color.generic.fg.moderate} | Link preview. |
| container.action.border-default | {mode.color.generic.fg.firm} | |
| container.action.border-inactive | {mode.color.generic.fg.firm} | |
| container.action.borderalt-hover | {mode.color.action.grayscale.default} | For hov border on Link preview. |
| container.action.icon-active | {mode.color.action.grayscale.active} | Active chevron for any accordion. |
| container.action.icon-default | {mode.color.action.grayscale.default} | Enabled chevron for any accordion. |
| container.action.icon-hover | {mode.color.action.grayscale.default} | hov chevron for any accordion. |
| container.action.iconAlt-default | {mode.color.action.grayscale.defaultAlt} | Enabled label for subtle accordion. |
| container.action.labelFooter-activated | {mode.color.action.grayscale.withActive} | |
| container.action.labelFooter-active | {mode.color.action.grayscale.withActive} | |
| container.action.txt-active | {mode.color.action.grayscale.active} | Active label for any accordion. |
| container.action.txt-default | {mode.color.generic.txt.severe} | Enabled label for standard accordion. |
| container.action.txt-disabled | {mode.color.action.inactive.txt} | |
| container.action.txt-hover | {mode.color.action.grayscale.default} | hov label for any accordion. |
| container.action.txtAlt-default | {mode.color.generic.txt.moderate} | Enabled label for subtle accordion. |
<code class="language-json">{
"container": {
"standard": {
"inverse": {
"bg-alt": {
"$type": "color",
"$value": "{mode.color.generic.bg.inverse.delicate}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.generic.bg.inverse.nought}"
},
"border-alt": {
"$type": "color",
"$value": "{mode.color.generic.fg.inverse.firm}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.generic.fg.inverse.soft}"
},
"txt-alt": {
"$description": "for subheadings etc",
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.moderate}"
},
"txt-default": {
"$description": "for headings, paragraph txt etc",
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.severe}"
}
},
"priority": {
"inverse": {
"bg-caution": {
"$type": "color",
"$value": "{mode.color.status.warning.inverse.default}"
},
"bg-info": {
"$type": "color",
"$value": "{mode.color.status.info.inverse.default}"
},
"bg-negative": {
"$type": "color",
"$value": "{mode.color.status.negative.inverse.default}"
},
"bg-neutral": {
"$type": "color",
"$value": "{mode.color.status.neutral.inverse.default}"
},
"bg-positive": {
"$type": "color",
"$value": "{mode.color.status.positive.inverse.default}"
},
"bg-prio": {
"$type": "color",
"$value": "{mode.color.status.priority.inverse.default}"
}
},
"bg-caution": {
"$type": "color",
"$value": "{mode.color.status.warning.default}"
},
"bg-info": {
"$type": "color",
"$value": "{mode.color.status.info.default}"
},
"bg-negative": {
"$type": "color",
"$value": "{mode.color.status.negative.default}"
},
"bg-neutral": {
"$type": "color",
"$value": "{mode.color.status.neutral.default}"
},
"bg-positive": {
"$type": "color",
"$value": "{mode.color.status.positive.default}"
},
"bg-prio": {
"$type": "color",
"$value": "{mode.color.status.priority.default}"
}
},
"bg-alt": {
"$type": "color",
"$value": "{mode.color.generic.bg.faint}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.generic.bg.nought}"
},
"bgFooter-default": {
"$description": "tile footer bg color",
"$type": "color",
"$value": "{mode.color.generic.bg.faint}"
},
"border-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"border-alt": {
"$type": "color",
"$value": "{mode.color.generic.fg.firm}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.generic.fg.soft}"
},
"dimmer": {
"$description": "dimmed mask for dialogs",
"$type": "color",
"$value": "{mode.color.action.inactive.mask}"
},
"icon": {
"$description": "Link preview image thumbnail",
"$type": "color",
"$value": "{mode.color.generic.fg.firm}"
},
"txt-alt": {
"$description": "for subheadings etc",
"$type": "color",
"$value": "{mode.color.generic.txt.moderate}"
},
"txt-default": {
"$description": "for headings, paragraph txt etc",
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
}
},
"scrollbar": {
"inverse": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.generic.bg.inverse.soft}"
},
"fg-default": {
"$type": "color",
"$value": "{mode.color.generic.fg.inverse.firm}"
}
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.generic.bg.faint}"
},
"fg-default": {
"$type": "color",
"$value": "{mode.color.generic.fg.firm}"
}
},
"quote": {
"border": {
"$type": "color",
"$value": "{mode.color.action.main.default}"
}
},
"action": {
"detailedicon": {
"bg": {
"$type": "color",
"$value": "{mode.color.status.custom.green.default}"
}
},
"target": {
"bg-default": {
"$description": "draggable drop target background color",
"$type": "color",
"$value": "{mode.color.status.info.default}"
}
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.generic.bg.nought}"
},
"bg-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.defaultAlt}"
},
"bg-hover": {
"$description": "Used for accordion hov backgrounds",
"$type": "color",
"$value": "{mode.color.action.grayscale.hoverAlt}"
},
"bgFooter-activated": {
"$type": "color",
"$value": "{mode.color.status.positive.default}"
},
"bgFooter-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"bgFooter-default": {
"$description": "tile footer bg color",
"$type": "color",
"$value": "{mode.color.generic.bg.nought}"
},
"border-activated": {
"$type": "color",
"$value": "{mode.color.status.positive.default}"
},
"border-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"border-alt": {
"$description": "Link preview.",
"$type": "color",
"$value": "{mode.color.generic.fg.moderate}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.generic.fg.firm}"
},
"border-inactive": {
"$type": "color",
"$value": "{mode.color.generic.fg.firm}"
},
"borderalt-hover": {
"$description": "For hov border on Link preview.",
"$type": "color",
"$value": "{mode.color.action.grayscale.default}"
},
"icon-active": {
"$description": "Active chevron for any accordion.",
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"icon-default": {
"$description": "Enabled chevron for any accordion.",
"$type": "color",
"$value": "{mode.color.action.grayscale.default}"
},
"icon-hover": {
"$description": "hov chevron for any accordion.",
"$type": "color",
"$value": "{mode.color.action.grayscale.default}"
},
"iconAlt-default": {
"$description": "Enabled label for subtle accordion.",
"$type": "color",
"$value": "{mode.color.action.grayscale.defaultAlt}"
},
"labelFooter-activated": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withActive}"
},
"labelFooter-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withActive}"
},
"txt-active": {
"$description": "Active label for any accordion.",
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"txt-default": {
"$description": "Enabled label for standard accordion.",
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
},
"txt-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.txt}"
},
"txt-hover": {
"$description": "hov label for any accordion.",
"$type": "color",
"$value": "{mode.color.action.grayscale.default}"
},
"txtAlt-default": {
"$description": "Enabled label for subtle accordion.",
"$type": "color",
"$value": "{mode.color.generic.txt.moderate}"
}
}
}
}</code>| Token | Value | Description |
|---|---|---|
| focus.inverse.bg | {mode.color.action.focus.inverse.withDefaultAlt} | |
| focus.inverse.border | {mode.color.action.focus.inverse.withDefault} | |
| focus.inverse.borderalt | {mode.color.action.focus.inverse.default} | |
| focus.inverse.label | {mode.color.action.focus.inverse.txt} | |
| focus.bg | {mode.color.action.focus.withDefaultAlt} | |
| focus.border | {mode.color.action.focus.withDefault} | |
| focus.borderalt | {mode.color.action.focus.default} | |
| focus.label | {mode.color.action.focus.txt} |
<code class="language-json">{
"focus": {
"inverse": {
"bg": {
"$type": "color",
"$value": "{mode.color.action.focus.inverse.withDefaultAlt}"
},
"border": {
"$type": "color",
"$value": "{mode.color.action.focus.inverse.withDefault}"
},
"borderalt": {
"$type": "color",
"$value": "{mode.color.action.focus.inverse.default}"
},
"label": {
"$type": "color",
"$value": "{mode.color.action.focus.inverse.txt}"
}
},
"bg": {
"$type": "color",
"$value": "{mode.color.action.focus.withDefaultAlt}"
},
"border": {
"$type": "color",
"$value": "{mode.color.action.focus.withDefault}"
},
"borderalt": {
"$type": "color",
"$value": "{mode.color.action.focus.default}"
},
"label": {
"$type": "color",
"$value": "{mode.color.action.focus.txt}"
}
}
}</code>| Token | Value | Description |
|---|---|---|
| input.switch.bg-activateDisabled | {mode.color.action.inactive.default} | background of switch in active when disabled |
| input.switch.bg-active | {mode.color.action.grayscale.active} | background of switch in active state |
| input.switch.bg-default | {mode.color.action.dataEntry.default} | background of switch in off state |
| input.switch.bg-disabled | {mode.color.action.inactive.defaultAlt} | background of switch when disabled in off state |
| input.switch.border-active | rgba(0, 0, 0, 0.0000) | border of switch in active state |
| input.switch.border-activeDisabled | rgba(0, 0, 0, 0.0000) | border of switch inactive and disabled state |
| input.switch.border-default | {mode.color.action.dataEntry.withDefault} | border of switch in off state |
| input.switch.border-disabled | {mode.color.action.inactive.default} | border of disabled switch in off state |
| input.switch.fg-activateDisabled | {mode.color.action.inactive.txtAlt} | switch knob in active but disabled state. |
| input.switch.fg-active | {mode.color.action.grayscale.withActive} | switch knob in active state |
| input.switch.fg-default | {mode.color.action.dataEntry.withDefault} | switch knob in off state |
| input.switch.fg-disabled | {mode.color.action.inactive.default} | switch knob in off disabled state |
| input.switch.label-activateDisabled | {mode.color.action.inactive.default} | label to right of switch when switch is active but disabled |
| input.switch.label-active | {mode.color.action.dataEntry.txt} | label to right of switch when switch is active |
| input.switch.label-default | {mode.color.action.dataEntry.txtAlt} | label to right of switch when switch is off |
| input.switch.label-disabled | {mode.color.action.inactive.default} | label to right of switch when switch is off but disabled |
| input.typical.inverse.bg-default | {mode.color.action.dataEntry.inverse.default} | |
| input.typical.inverse.border-default | {mode.color.action.dataEntry.inverse.withDefault} | |
| input.typical.inverse.txt-default | {mode.color.action.dataEntry.inverse.txt} | |
| input.typical.bg-alt | {mode.color.action.dataEntry.defaultAlt} | progress bar bg, txt editor preview and txt editor footer |
| input.typical.bg-default | {mode.color.action.dataEntry.default} | |
| input.typical.bg-disabled | {mode.color.action.inactive.defaultAlt} | |
| input.typical.bg-hover | {mode.color.action.dataEntry.hoverAlt} | |
| input.typical.bg-readOnly | {mode.color.action.inactive.defaultAlt} | |
| input.typical.border-alt | {mode.color.action.inactive.default} | |
| input.typical.border-default | {mode.color.action.dataEntry.withDefault} | |
| input.typical.border-disabled | {mode.color.action.inactive.default} | |
| input.typical.border-hover | {mode.color.action.dataEntry.withHover} | File input draggable border state |
| input.typical.border-readOnly | {mode.color.action.inactive.default} | |
| input.typical.icon-active | {mode.color.action.dataEntry.withActive} | used on tick in color picker and selected tick on dropdowns |
| input.typical.icon-default | {mode.color.action.dataEntry.txt} | |
| input.typical.icon-disabled | {mode.color.action.inactive.icon} | |
| input.typical.icon-hover | {mode.color.action.dataEntry.withHover} | |
| input.typical.icon-readOnly | {mode.color.action.inactive.iconAlt} | |
| input.typical.iconAlt-active | {mode.color.action.dataEntry.withActiveAlt} | used on tick in color picker |
| input.typical.txt-active | {mode.color.action.dataEntry.txt} | |
| input.typical.txt-alt | {mode.color.action.dataEntry.txtAlt} | |
| input.typical.txt-default | {mode.color.action.dataEntry.txt} | |
| input.typical.txt-disabled | {mode.color.action.inactive.txt} | |
| input.typical.txt-hover | {mode.color.action.dataEntry.withHover} | txt hover state when dragging a file over file input |
| input.typical.txt-readOnly | {mode.color.generic.txt.severe} | |
| input.validation.inverse.bar-error | {mode.color.status.negative.inverse.default} | error bar to left of inputs |
| input.validation.inverse.border-error | {mode.color.status.negative.inverse.default} | |
| input.validation.inverse.label-error | {mode.color.status.negative.inverse.default} | |
| input.validation.bar-error | {mode.color.status.negative.default} | error bar to left of inputs |
| input.validation.bar-warn | {mode.color.status.warning.default} | warning bar to left of inputs |
| input.validation.border-error | {mode.color.status.negative.default} | |
| input.validation.label-error | {mode.color.status.negative.default} | |
| input.validation.label-success | {mode.color.status.positive.default} | |
| input.validation.label-warn | {mode.color.status.warning.txt} | |
| input.labelset.inverse.label-alt | {mode.color.action.dataEntry.inverse.txtAlt} | used for '(optional)' txt and hint txt. |
| input.labelset.inverse.label-default | {mode.color.action.dataEntry.inverse.txt} | |
| input.labelset.inverse.label-required | {mode.color.action.danger.inverse.default} | |
| input.labelset.label-alt | {mode.color.action.dataEntry.txtAlt} | used for '(optional)' txt and hint txt. |
| input.labelset.label-default | {mode.color.action.dataEntry.txt} | |
| input.labelset.label-disabled | {mode.color.action.inactive.txt} | |
| input.labelset.label-readOnly | {mode.color.action.dataEntry.txt} | |
| input.labelset.label-required | {mode.color.action.danger.default} | |
| input.dropdown.bg-hover | {mode.color.action.dataEntry.hoverAlt} | REF POPOVER |
| input.dropdown.label-active | {mode.color.action.grayscale.withActive} | |
| input.dropdown.label-alt | {mode.color.action.dataEntry.txt} | |
| input.dropdown.label-default | {mode.color.action.dataEntry.txtAlt} | |
| input.dropdown.label-disabled | {mode.color.action.inactive.txt} | |
| input.dropdown.label-hover | {mode.color.action.grayscale.withHover} | |
| input.dropdown.label-subtxt | {mode.color.action.dataEntry.txtAlt} | Option subtxt. |
| input.calendar.bg-active | {mode.color.action.grayscale.active} | |
| input.calendar.bg-disabled | {mode.color.action.inactive.defaultAlt} | |
| input.calendar.bg-duration | {mode.color.action.dataEntry.hoverAlt} | |
| input.calendar.bg-hover | {mode.color.action.dataEntry.hoverAlt} | |
| input.calendar.border-duration | {mode.color.action.grayscale.active} | |
| input.calendar.txt-active | {mode.color.action.grayscale.withActive} | |
| input.calendar.txt-alt | {mode.color.action.dataEntry.txtAlt} | Days of the week subheaders |
| input.calendar.txt-default | {mode.color.action.dataEntry.txt} | |
| input.calendar.txt-disabled | {mode.color.action.inactive.txt} | |
| input.calendar.txt-duration | {mode.color.action.dataEntry.txt} | |
| input.calendar.txt-hover | {mode.color.action.grayscale.withHover} | |
| input.calendar.txtAlt-default | {mode.color.action.dataEntry.txtAlt} |
<code class="language-json">{
"input": {
"switch": {
"bg-activateDisabled": {
"$description": "background of switch in active when disabled",
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
},
"bg-active": {
"$description": "background of switch in active state",
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"bg-default": {
"$description": "background of switch in off state",
"$type": "color",
"$value": "{mode.color.action.dataEntry.default}"
},
"bg-disabled": {
"$description": "background of switch when disabled in off state",
"$type": "color",
"$value": "{mode.color.action.inactive.defaultAlt}"
},
"border-active": {
"$description": "border of switch in active state",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.0000)"
},
"border-activeDisabled": {
"$description": "border of switch inactive and disabled state",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.0000)"
},
"border-default": {
"$description": "border of switch in off state",
"$type": "color",
"$value": "{mode.color.action.dataEntry.withDefault}"
},
"border-disabled": {
"$description": "border of disabled switch in off state",
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
},
"fg-activateDisabled": {
"$description": "switch knob in active but disabled state.",
"$type": "color",
"$value": "{mode.color.action.inactive.txtAlt}"
},
"fg-active": {
"$description": "switch knob in active state",
"$type": "color",
"$value": "{mode.color.action.grayscale.withActive}"
},
"fg-default": {
"$description": "switch knob in off state",
"$type": "color",
"$value": "{mode.color.action.dataEntry.withDefault}"
},
"fg-disabled": {
"$description": "switch knob in off disabled state",
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
},
"label-activateDisabled": {
"$description": "label to right of switch when switch is active but disabled",
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
},
"label-active": {
"$description": "label to right of switch when switch is active",
"$type": "color",
"$value": "{mode.color.action.dataEntry.txt}"
},
"label-default": {
"$description": "label to right of switch when switch is off",
"$type": "color",
"$value": "{mode.color.action.dataEntry.txtAlt}"
},
"label-disabled": {
"$description": "label to right of switch when switch is off but disabled",
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
}
},
"typical": {
"inverse": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.inverse.default}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.inverse.withDefault}"
},
"txt-default": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.inverse.txt}"
}
},
"bg-alt": {
"$description": "progress bar bg, txt editor preview and txt editor footer",
"$type": "color",
"$value": "{mode.color.action.dataEntry.defaultAlt}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.default}"
},
"bg-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.defaultAlt}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.hoverAlt}"
},
"bg-readOnly": {
"$type": "color",
"$value": "{mode.color.action.inactive.defaultAlt}"
},
"border-alt": {
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.withDefault}"
},
"border-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
},
"border-hover": {
"$description": "File input draggable border state",
"$type": "color",
"$value": "{mode.color.action.dataEntry.withHover}"
},
"border-readOnly": {
"$type": "color",
"$value": "{mode.color.action.inactive.default}"
},
"icon-active": {
"$description": "used on tick in color picker and selected tick on dropdowns",
"$type": "color",
"$value": "{mode.color.action.dataEntry.withActive}"
},
"icon-default": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.txt}"
},
"icon-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.icon}"
},
"icon-hover": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.withHover}"
},
"icon-readOnly": {
"$type": "color",
"$value": "{mode.color.action.inactive.iconAlt}"
},
"iconAlt-active": {
"$description": "used on tick in color picker",
"$type": "color",
"$value": "{mode.color.action.dataEntry.withActiveAlt}"
},
"txt-active": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.txt}"
},
"txt-alt": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.txtAlt}"
},
"txt-default": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.txt}"
},
"txt-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.txt}"
},
"txt-hover": {
"$description": "txt hover state when dragging a file over file input",
"$type": "color",
"$value": "{mode.color.action.dataEntry.withHover}"
},
"txt-readOnly": {
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
}
},
"validation": {
"inverse": {
"bar-error": {
"$description": "error bar to left of inputs",
"$type": "color",
"$value": "{mode.color.status.negative.inverse.default}"
},
"border-error": {
"$type": "color",
"$value": "{mode.color.status.negative.inverse.default}"
},
"label-error": {
"$type": "color",
"$value": "{mode.color.status.negative.inverse.default}"
}
},
"bar-error": {
"$description": "error bar to left of inputs",
"$type": "color",
"$value": "{mode.color.status.negative.default}"
},
"bar-warn": {
"$description": "warning bar to left of inputs",
"$type": "color",
"$value": "{mode.color.status.warning.default}"
},
"border-error": {
"$type": "color",
"$value": "{mode.color.status.negative.default}"
},
"label-error": {
"$type": "color",
"$value": "{mode.color.status.negative.default}"
},
"label-success": {
"$type": "color",
"$value": "{mode.color.status.positive.default}"
},
"label-warn": {
"$type": "color",
"$value": "{mode.color.status.warning.txt}"
}
},
"labelset": {
"inverse": {
"label-alt": {
"$description": "used for '(optional)' txt and hint txt.",
"$type": "color",
"$value": "{mode.color.action.dataEntry.inverse.txtAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.inverse.txt}"
},
"label-required": {
"$type": "color",
"$value": "{mode.color.action.danger.inverse.default}"
}
},
"label-alt": {
"$description": "used for '(optional)' txt and hint txt.",
"$type": "color",
"$value": "{mode.color.action.dataEntry.txtAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.txt}"
},
"label-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.txt}"
},
"label-readOnly": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.txt}"
},
"label-required": {
"$type": "color",
"$value": "{mode.color.action.danger.default}"
}
},
"dropdown": {
"bg-hover": {
"$description": "REF POPOVER",
"$type": "color",
"$value": "{mode.color.action.dataEntry.hoverAlt}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withActive}"
},
"label-alt": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.txt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.txtAlt}"
},
"label-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.txt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withHover}"
},
"label-subtxt": {
"$description": "Option subtxt.",
"$type": "color",
"$value": "{mode.color.action.dataEntry.txtAlt}"
}
},
"calendar": {
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"bg-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.defaultAlt}"
},
"bg-duration": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.hoverAlt}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.hoverAlt}"
},
"border-duration": {
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"txt-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withActive}"
},
"txt-alt": {
"$description": "Days of the week subheaders",
"$type": "color",
"$value": "{mode.color.action.dataEntry.txtAlt}"
},
"txt-default": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.txt}"
},
"txt-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.txt}"
},
"txt-duration": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.txt}"
},
"txt-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withHover}"
},
"txtAlt-default": {
"$type": "color",
"$value": "{mode.color.action.dataEntry.txtAlt}"
}
}
}
}</code>| Token | Value | Description |
|---|---|---|
| link.typical.inverse.label-default | {mode.color.action.main.inverse.defaultAlt2} | |
| link.typical.inverse.label-hover | {mode.color.action.main.inverse.hoverAlt2} | |
| link.typical.label-default | {mode.color.action.main.defaultAlt2} | |
| link.typical.label-hover | {mode.color.action.main.hoverAlt2} | |
| link.subtle.inverse.label-default | {mode.color.action.grayscale.inverse.default} | |
| link.subtle.inverse.label-hover | {mode.color.action.grayscale.inverse.active} | |
| link.subtle.label-default | {mode.color.action.grayscale.default} | |
| link.subtle.label-hover | {mode.color.action.grayscale.active} | |
| link.destructive.inverse.label-default | {mode.color.action.danger.inverse.defaultAlt} | . |
| link.destructive.inverse.label-hover | {mode.color.action.danger.inverse.hoverAlt2} | |
| link.destructive.label-default | {mode.color.action.danger.defaultAlt} | . |
| link.destructive.label-hover | {mode.color.action.danger.hoverAlt2} |
<code class="language-json">{
"link": {
"typical": {
"inverse": {
"label-default": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.defaultAlt2}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.main.inverse.hoverAlt2}"
}
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.main.defaultAlt2}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.main.hoverAlt2}"
}
},
"subtle": {
"inverse": {
"label-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.inverse.default}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.inverse.active}"
}
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.default}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
}
},
"destructive": {
"inverse": {
"label-default": {
"$description": ".",
"$type": "color",
"$value": "{mode.color.action.danger.inverse.defaultAlt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.danger.inverse.hoverAlt2}"
}
},
"label-default": {
"$description": ".",
"$type": "color",
"$value": "{mode.color.action.danger.defaultAlt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.danger.hoverAlt2}"
}
}
}
}</code>| Token | Value | Description |
|---|---|---|
| logo.sage.inverse.bg-alt | {mode.color.brand.inverse.defaultAlt} | |
| logo.sage.inverse.bg-default | {mode.color.brand.inverse.default} | sage logo |
| logo.sage.bg-alt | {mode.color.brand.defaultAlt} | |
| logo.sage.bg-default | {mode.color.brand.default} | sage logo |
| logo.copilot.noBg.fg-default | {mode.color.brand.copilot.monochrome} | |
| logo.AiSparkle.inverse.bg-dot | {mode.color.brand.copilot.inverse.withDefault} | star outline variant |
| logo.AiSparkle.inverse.bg-star | {mode.color.brand.copilot.inverse.default} | star outline variant |
| logo.AiSparkle.inverse.outline | {mode.color.brand.copilot.inverse.default} | star outline variant |
| logo.AiSparkle.bg-dot | {mode.color.brand.copilot.withDefault} | |
| logo.AiSparkle.bg-star | {mode.color.brand.copilot.default} | star bg color |
| logo.AiSparkle.outline | {mode.color.brand.copilot.default} | star outline variant |
<code class="language-json">{
"logo": {
"sage": {
"inverse": {
"bg-alt": {
"$type": "color",
"$value": "{mode.color.brand.inverse.defaultAlt}"
},
"bg-default": {
"$description": "sage logo",
"$type": "color",
"$value": "{mode.color.brand.inverse.default}"
}
},
"bg-alt": {
"$type": "color",
"$value": "{mode.color.brand.defaultAlt}"
},
"bg-default": {
"$description": "sage logo",
"$type": "color",
"$value": "{mode.color.brand.default}"
}
},
"copilot": {
"noBg": {
"fg-default": {
"$type": "color",
"$value": "{mode.color.brand.copilot.monochrome}"
}
}
},
"AiSparkle": {
"inverse": {
"bg-dot": {
"$description": "star outline variant",
"$type": "color",
"$value": "{mode.color.brand.copilot.inverse.withDefault}"
},
"bg-star": {
"$description": "star outline variant",
"$type": "color",
"$value": "{mode.color.brand.copilot.inverse.default}"
},
"outline": {
"$description": "star outline variant",
"$type": "color",
"$value": "{mode.color.brand.copilot.inverse.default}"
}
},
"bg-dot": {
"$type": "color",
"$value": "{mode.color.brand.copilot.withDefault}"
},
"bg-star": {
"$description": "star bg color",
"$type": "color",
"$value": "{mode.color.brand.copilot.default}"
},
"outline": {
"$description": "star outline variant",
"$type": "color",
"$value": "{mode.color.brand.copilot.default}"
}
}
}
}</code>| Token | Value | Description |
|---|---|---|
| message.contextual.AI.bg-default | {mode.color.status.ai.defaultAlt} | |
| message.contextual.AI.bgAlt | {mode.color.status.neutral.defaultAlt} | |
| message.contextual.AI.border-default | {mode.color.status.ai.defaultAlt} | |
| message.contextual.callout.bgAlt | {mode.color.status.callout.defaultAlt} | Subtle message bg |
| message.contextual.callout.icon | {mode.color.status.txt.withDefaultAlt} | |
| message.contextual.error.bg-default | {mode.color.status.negative.default} | |
| message.contextual.error.bgAlt | {mode.color.status.negative.defaultAlt} | Subtle message bg |
| message.contextual.error.border-default | {mode.color.status.negative.default} | |
| message.contextual.error.icon | {mode.color.status.negative.default} | Icon on tinted bgs |
| message.contextual.info.bg-default | {mode.color.status.info.default} | |
| message.contextual.info.bgAlt | {mode.color.status.info.defaultAlt} | Subtle message bg |
| message.contextual.info.border-default | {mode.color.status.info.default} | |
| message.contextual.info.icon | {mode.color.status.info.default} | Icon on tinted bgs |
| message.contextual.success.bg-default | {mode.color.status.positive.default} | |
| message.contextual.success.bgAlt | {mode.color.status.positive.defaultAlt} | Subtle message bg |
| message.contextual.success.border-default | {mode.color.status.positive.default} | |
| message.contextual.success.icon | {mode.color.status.positive.default} | Icon on tinted bgs |
| message.contextual.warning.bg-default | {mode.color.status.warning.default} | |
| message.contextual.warning.bgAlt | {mode.color.status.warning.defaultAlt} | Subtle message bg |
| message.contextual.warning.border-default | {mode.color.status.warning.default} | |
| message.contextual.warning.icon | {mode.color.status.warning.default} | Icon on tinted bgs |
| message.contextual.bg | {mode.color.generic.bg.nought} | |
| message.contextual.icon | {mode.color.generic.bg.nought} | decorative icon on standard contxtual messages |
| message.contextual.icon-alt | {mode.color.status.neutral.default} | icon on neutral status dialogs |
| message.contextual.txt | {mode.color.status.txt.withHoverAlt} | Message txt. |
| message.global.callout.bg-default | {mode.color.status.callout.defaultAlt} | Global message bg |
| message.global.callout.bg-hover | {mode.color.status.callout.hoverAlt} | global message bg hover |
| message.global.callout.icon | {mode.color.status.txt.withDefaultAlt} | Icon on tinted bgs |
| message.global.info.bg-default | {mode.color.status.info.defaultAlt} | Global message bg |
| message.global.info.bg-hover | {mode.color.status.info.hoverAlt} | |
| message.global.info.icon | {mode.color.status.info.default} | Icon on tinted bgs |
| message.global.warning.bg-default | {mode.color.status.warning.defaultAlt} | Global message bg |
| message.global.warning.bg-hover | {mode.color.status.warning.hoverAlt} | |
| message.global.warning.icon | {mode.color.status.warning.default} | Icon on tinted bgs |
| message.global.label-default | {mode.color.status.txt.withDefaultAlt} | |
| message.global.label-hover | {mode.color.action.grayscale.withHover} | |
| message.none | {mode.color.none} | transparent override used for hiding colors when needed. |
<code class="language-json">{
"message": {
"contextual": {
"AI": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.ai.defaultAlt}"
},
"bgAlt": {
"$type": "color",
"$value": "{mode.color.status.neutral.defaultAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.ai.defaultAlt}"
}
},
"callout": {
"bgAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{mode.color.status.callout.defaultAlt}"
},
"icon": {
"$type": "color",
"$value": "{mode.color.status.txt.withDefaultAlt}"
}
},
"error": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.negative.default}"
},
"bgAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{mode.color.status.negative.defaultAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.negative.default}"
},
"icon": {
"$description": "Icon on tinted bgs",
"$type": "color",
"$value": "{mode.color.status.negative.default}"
}
},
"info": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.info.default}"
},
"bgAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{mode.color.status.info.defaultAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.info.default}"
},
"icon": {
"$description": "Icon on tinted bgs",
"$type": "color",
"$value": "{mode.color.status.info.default}"
}
},
"success": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.positive.default}"
},
"bgAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{mode.color.status.positive.defaultAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.positive.default}"
},
"icon": {
"$description": "Icon on tinted bgs",
"$type": "color",
"$value": "{mode.color.status.positive.default}"
}
},
"warning": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.warning.default}"
},
"bgAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{mode.color.status.warning.defaultAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.warning.default}"
},
"icon": {
"$description": "Icon on tinted bgs",
"$type": "color",
"$value": "{mode.color.status.warning.default}"
}
},
"bg": {
"$type": "color",
"$value": "{mode.color.generic.bg.nought}"
},
"icon": {
"$description": "decorative icon on standard contxtual messages",
"$type": "color",
"$value": "{mode.color.generic.bg.nought}"
},
"icon-alt": {
"$description": "icon on neutral status dialogs",
"$type": "color",
"$value": "{mode.color.status.neutral.default}"
},
"txt": {
"$description": "Message txt.",
"$type": "color",
"$value": "{mode.color.status.txt.withHoverAlt}"
}
},
"global": {
"callout": {
"bg-default": {
"$description": "Global message bg",
"$type": "color",
"$value": "{mode.color.status.callout.defaultAlt}"
},
"bg-hover": {
"$description": "global message bg hover",
"$type": "color",
"$value": "{mode.color.status.callout.hoverAlt}"
},
"icon": {
"$description": "Icon on tinted bgs",
"$type": "color",
"$value": "{mode.color.status.txt.withDefaultAlt}"
}
},
"info": {
"bg-default": {
"$description": "Global message bg",
"$type": "color",
"$value": "{mode.color.status.info.defaultAlt}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.status.info.hoverAlt}"
},
"icon": {
"$description": "Icon on tinted bgs",
"$type": "color",
"$value": "{mode.color.status.info.default}"
}
},
"warning": {
"bg-default": {
"$description": "Global message bg",
"$type": "color",
"$value": "{mode.color.status.warning.defaultAlt}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.status.warning.hoverAlt}"
},
"icon": {
"$description": "Icon on tinted bgs",
"$type": "color",
"$value": "{mode.color.status.warning.default}"
}
},
"label-default": {
"$type": "color",
"$value": "{mode.color.status.txt.withDefaultAlt}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withHover}"
}
},
"none": {
"$description": "transparent override used for hiding colors when needed.",
"$type": "color",
"$value": "{mode.color.none}"
}
}
}</code>| Token | Value | Description |
|---|---|---|
| nav.topnav.container.bg-default | {mode.color.generic.bg.nought} | bg of of horizontal nav variant that launches the left nav |
| nav.topnav.container.border-default | {mode.color.generic.fg.firm} | dividing lines within parent container |
| nav.topnav.item.bg-active | {mode.color.action.nav.active} | |
| nav.topnav.item.bg-default | {mode.color.none} | |
| nav.topnav.item.bg-hover | {mode.color.action.nav.hover} | |
| nav.topnav.item.label-active | {mode.color.action.nav.withActive} | |
| nav.topnav.item.label-default | {mode.color.action.nav.withDefault} | |
| nav.topnav.item.label-hover | {mode.color.action.nav.withHover} | |
| nav.modal.container.bg-default | {mode.color.generic.bg.nought} | bg of container holding stack of items in modal nav |
| nav.modal.container.bg-defaultAlt | {mode.color.generic.surface.faint} | bg of the sticky header within modal |
| nav.modal.container.border-default | {mode.color.generic.fg.firm} | dividing lines within parent container |
| nav.modal.headeritem.label-default | {mode.color.generic.txt.soft} | color for subheaders passed into modal nav |
| nav.modal.item.bg-active | {mode.color.action.nav.active} | |
| nav.modal.item.bg-default | {mode.color.none} | |
| nav.modal.item.bg-hover | {mode.color.action.nav.hover} | |
| nav.modal.item.label-active | {mode.color.action.nav.withActive} | |
| nav.modal.item.label-default | {mode.color.action.nav.withDefault} | |
| nav.modal.item.label-hover | {mode.color.action.nav.withHover} | |
| nav.leftnav.container.bg-default | {mode.color.generic.bg.inverse.nought} | bg of horizontal nav variant that launches the left nav |
| nav.leftnav.container.bg-defaultAlt | {mode.color.action.nav.inverse.defaultAlt} | bg of the parent container |
| nav.leftnav.container.border-default | {mode.color.generic.fg.inverse.firm} | dividing lines within parent container |
| nav.leftnav.item.bg-active | {mode.color.action.nav.inverse.active} | |
| nav.leftnav.item.bg-default | {mode.color.none} | |
| nav.leftnav.item.bg-hover | {mode.color.action.nav.inverse.hover} | |
| nav.leftnav.item.label-active | {mode.color.action.nav.inverse.withActive} | |
| nav.leftnav.item.label-default | {mode.color.action.nav.inverse.withDefault} | |
| nav.leftnav.item.label-hover | {mode.color.action.nav.inverse.withHover} | |
| nav.bg-default | {mode.color.generic.bg.nought} | nav bar bg |
<code class="language-json">{
"nav": {
"topnav": {
"container": {
"bg-default": {
"$description": "bg of of horizontal nav variant that launches the left nav",
"$type": "color",
"$value": "{mode.color.generic.bg.nought}"
},
"border-default": {
"$description": "dividing lines within parent container",
"$type": "color",
"$value": "{mode.color.generic.fg.firm}"
}
},
"item": {
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.nav.active}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.none}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.nav.hover}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.nav.withActive}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.nav.withDefault}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.nav.withHover}"
}
}
},
"modal": {
"container": {
"bg-default": {
"$description": "bg of container holding stack of items in modal nav",
"$type": "color",
"$value": "{mode.color.generic.bg.nought}"
},
"bg-defaultAlt": {
"$description": "bg of the sticky header within modal",
"$type": "color",
"$value": "{mode.color.generic.surface.faint}"
},
"border-default": {
"$description": "dividing lines within parent container",
"$type": "color",
"$value": "{mode.color.generic.fg.firm}"
}
},
"headeritem": {
"label-default": {
"$description": "color for subheaders passed into modal nav",
"$type": "color",
"$value": "{mode.color.generic.txt.soft}"
}
},
"item": {
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.nav.active}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.none}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.nav.hover}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.nav.withActive}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.nav.withDefault}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.nav.withHover}"
}
}
},
"leftnav": {
"container": {
"bg-default": {
"$description": "bg of horizontal nav variant that launches the left nav",
"$type": "color",
"$value": "{mode.color.generic.bg.inverse.nought}"
},
"bg-defaultAlt": {
"$description": "bg of the parent container",
"$type": "color",
"$value": "{mode.color.action.nav.inverse.defaultAlt}"
},
"border-default": {
"$description": "dividing lines within parent container",
"$type": "color",
"$value": "{mode.color.generic.fg.inverse.firm}"
}
},
"item": {
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.nav.inverse.active}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.none}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.action.nav.inverse.hover}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.nav.inverse.withActive}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.nav.inverse.withDefault}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.nav.inverse.withHover}"
}
}
},
"bg-default": {
"$description": "nav bar bg",
"$type": "color",
"$value": "{mode.color.generic.bg.nought}"
}
}
}</code>| Token | Value | Description |
|---|---|---|
| page.bg-alt | {mode.color.generic.surface.faint} | |
| page.bg-default | {mode.color.generic.surface.nought} | |
| page.txt-alt | {mode.color.generic.txt.moderate} | for subheadings etc |
| page.txt-default | {mode.color.generic.txt.severe} | for headings, paragraph txt etc |
<code class="language-json">{
"page": {
"bg-alt": {
"$type": "color",
"$value": "{mode.color.generic.surface.faint}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.generic.surface.nought}"
},
"txt-alt": {
"$description": "for subheadings etc",
"$type": "color",
"$value": "{mode.color.generic.txt.moderate}"
},
"txt-default": {
"$description": "for headings, paragraph txt etc",
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
}
}
}</code>| Token | Value | Description |
|---|---|---|
| pill.purple.inverse.bg-default | {mode.color.status.priority.default} | |
| pill.purple.inverse.bg-hover | {mode.color.status.priority.hover} | |
| pill.purple.inverse.bgAlt-default | {mode.color.status.priority.inverse.defaultAlt} | outline pill bg |
| pill.purple.inverse.bgAlt-hover | {mode.color.status.priority.inverse.hoverAlt} | |
| pill.purple.inverse.border-default | {mode.color.status.priority.default} | |
| pill.purple.bg-default | {mode.color.status.priority.default} | |
| pill.purple.bg-hover | {mode.color.status.priority.hover} | |
| pill.purple.bgAlt-default | {mode.color.status.priority.defaultAlt} | outline pill bg |
| pill.purple.bgAlt-hover | {mode.color.status.priority.hoverAlt} | |
| pill.purple.border-default | {mode.color.status.priority.default} | |
| pill.pink.bg-default | {mode.color.status.custom.pink.default} | |
| pill.pink.bg-hover | {mode.color.status.custom.pink.hover} | |
| pill.pink.bgAlt-default | {mode.color.status.custom.pink.defaultAlt} | outline pill bg |
| pill.pink.bgAlt-hover | {mode.color.status.custom.pink.hoverAlt} | |
| pill.pink.border-default | {mode.color.status.custom.pink.default} | |
| pill.orange.inverse.bg-default | {mode.color.status.warning.inverse.default} | |
| pill.orange.inverse.bg-hover | {mode.color.status.warning.inverse.hover} | |
| pill.orange.inverse.bgAlt-default | {mode.color.status.warning.inverse.defaultAlt} | Global message bg |
| pill.orange.inverse.bgAlt-hover | {mode.color.status.warning.inverse.hoverAlt} | |
| pill.orange.inverse.border-default | {mode.color.status.warning.inverse.default} | |
| pill.orange.bg-default | {mode.color.status.warning.default} | |
| pill.orange.bg-hover | {mode.color.status.warning.hover} | |
| pill.orange.bgAlt-default | {mode.color.status.warning.defaultAlt} | Global message bg |
| pill.orange.bgAlt-hover | {mode.color.status.warning.hoverAlt} | |
| pill.orange.border-default | {mode.color.status.warning.default} | |
| pill.lime.bg-default | {mode.color.status.custom.lime.default} | |
| pill.lime.bg-hover | {mode.color.status.custom.lime.hover} | |
| pill.lime.bgAlt-default | {mode.color.status.custom.lime.defaultAlt} | outline pill bg |
| pill.lime.bgAlt-hover | {mode.color.status.custom.lime.hoverAlt} | |
| pill.lime.border-default | {mode.color.status.custom.lime.default} | |
| pill.green.inverse.bg-default | {mode.color.status.positive.inverse.default} | |
| pill.green.inverse.bg-hover | {mode.color.status.positive.inverse.hover} | |
| pill.green.inverse.bgAlt-default | {mode.color.status.positive.inverse.defaultAlt} | outline pill bg |
| pill.green.inverse.bgAlt-hover | {mode.color.status.positive.inverse.hoverAlt} | |
| pill.green.inverse.border-default | {mode.color.status.positive.inverse.default} | |
| pill.green.bg-default | {mode.color.status.positive.default} | |
| pill.green.bg-hover | {mode.color.status.positive.hover} | |
| pill.green.bgAlt-default | {mode.color.status.positive.defaultAlt} | outline pill bg |
| pill.green.bgAlt-hover | {mode.color.status.positive.hoverAlt} | |
| pill.green.border-default | {mode.color.status.positive.default} | |
| pill.blue.inverse.bg-default | {mode.color.status.info.inverse.default} | |
| pill.blue.inverse.bg-hover | {mode.color.status.info.inverse.hover} | |
| pill.blue.inverse.bgAlt-default | {mode.color.status.info.inverse.defaultAlt} | outline pill bg |
| pill.blue.inverse.bgAlt-hover | {mode.color.status.info.inverse.hoverAlt} | |
| pill.blue.inverse.border-default | {mode.color.status.info.inverse.default} | |
| pill.blue.bg-default | {mode.color.status.info.default} | |
| pill.blue.bg-hover | {mode.color.status.info.hover} | |
| pill.blue.bgAlt-default | {mode.color.status.info.defaultAlt} | outline pill bg |
| pill.blue.bgAlt-hover | {mode.color.status.info.hoverAlt} | |
| pill.blue.border-default | {mode.color.status.info.default} | |
| pill.red.inverse.bg-default | {mode.color.status.negative.inverse.default} | |
| pill.red.inverse.bg-hover | {mode.color.status.negative.inverse.hover} | |
| pill.red.inverse.bgAlt-default | {mode.color.status.negative.inverse.defaultAlt} | outline pill bg |
| pill.red.inverse.bgAlt-hover | {mode.color.status.negative.inverse.hoverAlt} | |
| pill.red.inverse.border-default | {mode.color.status.negative.inverse.default} | |
| pill.red.bg-default | {mode.color.status.negative.default} | |
| pill.red.bg-hover | {mode.color.status.negative.hover} | |
| pill.red.bgAlt-default | {mode.color.status.negative.defaultAlt} | outline pill bg |
| pill.red.bgAlt-hover | {mode.color.status.negative.hoverAlt} | |
| pill.red.border-default | {mode.color.status.negative.default} | |
| pill.teal.bg-default | {mode.color.status.custom.teal.default} | |
| pill.teal.bg-hover | {mode.color.status.custom.teal.hover} | |
| pill.teal.bgAlt-default | {mode.color.status.custom.teal.defaultAlt} | outline pill bg |
| pill.teal.bgAlt-hover | {mode.color.status.custom.teal.hoverAlt} | |
| pill.teal.border-default | {mode.color.status.custom.teal.default} |
<code class="language-json">{
"pill": {
"purple": {
"inverse": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.priority.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.status.priority.hover}"
},
"bgAlt-default": {
"$description": "outline pill bg",
"$type": "color",
"$value": "{mode.color.status.priority.inverse.defaultAlt}"
},
"bgAlt-hover": {
"$type": "color",
"$value": "{mode.color.status.priority.inverse.hoverAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.priority.default}"
}
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.priority.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.status.priority.hover}"
},
"bgAlt-default": {
"$description": "outline pill bg",
"$type": "color",
"$value": "{mode.color.status.priority.defaultAlt}"
},
"bgAlt-hover": {
"$type": "color",
"$value": "{mode.color.status.priority.hoverAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.priority.default}"
}
},
"pink": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.custom.pink.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.status.custom.pink.hover}"
},
"bgAlt-default": {
"$description": "outline pill bg",
"$type": "color",
"$value": "{mode.color.status.custom.pink.defaultAlt}"
},
"bgAlt-hover": {
"$type": "color",
"$value": "{mode.color.status.custom.pink.hoverAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.custom.pink.default}"
}
},
"orange": {
"inverse": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.warning.inverse.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.status.warning.inverse.hover}"
},
"bgAlt-default": {
"$description": "Global message bg",
"$type": "color",
"$value": "{mode.color.status.warning.inverse.defaultAlt}"
},
"bgAlt-hover": {
"$type": "color",
"$value": "{mode.color.status.warning.inverse.hoverAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.warning.inverse.default}"
}
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.warning.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.status.warning.hover}"
},
"bgAlt-default": {
"$description": "Global message bg",
"$type": "color",
"$value": "{mode.color.status.warning.defaultAlt}"
},
"bgAlt-hover": {
"$type": "color",
"$value": "{mode.color.status.warning.hoverAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.warning.default}"
}
},
"lime": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.custom.lime.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.status.custom.lime.hover}"
},
"bgAlt-default": {
"$description": "outline pill bg",
"$type": "color",
"$value": "{mode.color.status.custom.lime.defaultAlt}"
},
"bgAlt-hover": {
"$type": "color",
"$value": "{mode.color.status.custom.lime.hoverAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.custom.lime.default}"
}
},
"green": {
"inverse": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.positive.inverse.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.status.positive.inverse.hover}"
},
"bgAlt-default": {
"$description": "outline pill bg",
"$type": "color",
"$value": "{mode.color.status.positive.inverse.defaultAlt}"
},
"bgAlt-hover": {
"$type": "color",
"$value": "{mode.color.status.positive.inverse.hoverAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.positive.inverse.default}"
}
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.positive.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.status.positive.hover}"
},
"bgAlt-default": {
"$description": "outline pill bg",
"$type": "color",
"$value": "{mode.color.status.positive.defaultAlt}"
},
"bgAlt-hover": {
"$type": "color",
"$value": "{mode.color.status.positive.hoverAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.positive.default}"
}
},
"blue": {
"inverse": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.info.inverse.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.status.info.inverse.hover}"
},
"bgAlt-default": {
"$description": "outline pill bg",
"$type": "color",
"$value": "{mode.color.status.info.inverse.defaultAlt}"
},
"bgAlt-hover": {
"$type": "color",
"$value": "{mode.color.status.info.inverse.hoverAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.info.inverse.default}"
}
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.info.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.status.info.hover}"
},
"bgAlt-default": {
"$description": "outline pill bg",
"$type": "color",
"$value": "{mode.color.status.info.defaultAlt}"
},
"bgAlt-hover": {
"$type": "color",
"$value": "{mode.color.status.info.hoverAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.info.default}"
}
},
"red": {
"inverse": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.negative.inverse.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.status.negative.inverse.hover}"
},
"bgAlt-default": {
"$description": "outline pill bg",
"$type": "color",
"$value": "{mode.color.status.negative.inverse.defaultAlt}"
},
"bgAlt-hover": {
"$type": "color",
"$value": "{mode.color.status.negative.inverse.hoverAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.negative.inverse.default}"
}
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.negative.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.status.negative.hover}"
},
"bgAlt-default": {
"$description": "outline pill bg",
"$type": "color",
"$value": "{mode.color.status.negative.defaultAlt}"
},
"bgAlt-hover": {
"$type": "color",
"$value": "{mode.color.status.negative.hoverAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.negative.default}"
}
},
"teal": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.custom.teal.default}"
},
"bg-hover": {
"$type": "color",
"$value": "{mode.color.status.custom.teal.hover}"
},
"bgAlt-default": {
"$description": "outline pill bg",
"$type": "color",
"$value": "{mode.color.status.custom.teal.defaultAlt}"
},
"bgAlt-hover": {
"$type": "color",
"$value": "{mode.color.status.custom.teal.hoverAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.status.custom.teal.default}"
}
}
}
}</code>| Token | Value | Description |
|---|---|---|
| popover.submenu.bg-default | {mode.color.generic.bg.faint} | popover small screen submenu container bg |
| popover.label-hover | {mode.color.action.grayscale.withHover} | |
| popover.label-disabled | {mode.color.action.inactive.txt} | |
| popover.label-default | {mode.color.action.grayscale.defaultAlt} | |
| popover.label-activeAlt | {mode.color.action.grayscale.withHover} | |
| popover.label-active | {mode.color.action.grayscale.withActive} | |
| popover.bg-hover | {mode.color.action.grayscale.hoverAlt} | REF'D IN FORM. |
| popover.bg-default | {mode.color.generic.bg.nought} | REF'D IN FORM. Popover container bg |
| popover.bg-activeAlt | {mode.color.action.grayscale.hoverAlt} | REF'D IN FORM. |
| popover.bg-active | {mode.color.action.grayscale.active} | previously action minor 850 |
<code class="language-json">{
"popover": {
"submenu": {
"bg-default": {
"$description": "popover small screen submenu container bg",
"$type": "color",
"$value": "{mode.color.generic.bg.faint}"
}
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withHover}"
},
"label-disabled": {
"$type": "color",
"$value": "{mode.color.action.inactive.txt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.defaultAlt}"
},
"label-activeAlt": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withHover}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withActive}"
},
"bg-hover": {
"$description": "REF'D IN FORM.",
"$type": "color",
"$value": "{mode.color.action.grayscale.hoverAlt}"
},
"bg-default": {
"$description": "REF'D IN FORM. Popover container bg",
"$type": "color",
"$value": "{mode.color.generic.bg.nought}"
},
"bg-activeAlt": {
"$description": "REF'D IN FORM.",
"$type": "color",
"$value": "{mode.color.action.grayscale.hoverAlt}"
},
"bg-active": {
"$description": "previously action minor 850",
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
}
}
}</code>| Token | Value | Description |
|---|---|---|
| profile.swatches.blue.bg-default | {mode.color.status.custom.blue.defaultAlt} | |
| profile.swatches.blue.label-default | {mode.color.status.custom.blue.default} | |
| profile.swatches.gray.bg-default | {mode.color.status.custom.gray.defaultAlt} | |
| profile.swatches.gray.label-default | {mode.color.status.custom.gray.default} | |
| profile.swatches.green.bg-default | {mode.color.status.custom.green.defaultAlt} | |
| profile.swatches.green.label-default | {mode.color.status.custom.green.default} | |
| profile.swatches.lime.bg-default | {mode.color.status.custom.lime.defaultAlt} | |
| profile.swatches.lime.label-default | {mode.color.status.custom.lime.default} | |
| profile.swatches.orange.bg-default | {mode.color.status.custom.orange.defaultAlt} | |
| profile.swatches.orange.label-default | {mode.color.status.custom.orange.txt} | |
| profile.swatches.pink.bg-default | {mode.color.status.custom.pink.defaultAlt} | |
| profile.swatches.pink.label-default | {mode.color.status.custom.pink.default} | |
| profile.swatches.purple.bg-default | {mode.color.status.custom.purple.defaultAlt} | |
| profile.swatches.purple.label-default | {mode.color.status.custom.purple.default} | |
| profile.swatches.red.bg-default | {mode.color.status.custom.red.defaultAlt} | |
| profile.swatches.red.label-default | {mode.color.status.custom.red.default} | |
| profile.swatches.slate.bg-default | {mode.color.status.custom.slate.defaultAlt} | |
| profile.swatches.slate.label-default | {mode.color.status.custom.slate.default} | |
| profile.swatches.teal.bg-default | {mode.color.status.custom.teal.defaultAlt} | |
| profile.swatches.teal.label-default | {mode.color.status.custom.teal.default} | |
| profile.bg-alt | {mode.color.generic.txt.severe} | For portrait image |
| profile.bg-def | {mode.color.generic.bg.nought} | |
| profile.border-default | {mode.color.generic.fg.moderate} | |
| profile.label-default | {mode.color.generic.txt.severe} |
<code class="language-json">{
"profile": {
"swatches": {
"blue": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.custom.blue.defaultAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.status.custom.blue.default}"
}
},
"gray": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.custom.gray.defaultAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.status.custom.gray.default}"
}
},
"green": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.custom.green.defaultAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.status.custom.green.default}"
}
},
"lime": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.custom.lime.defaultAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.status.custom.lime.default}"
}
},
"orange": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.custom.orange.defaultAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.status.custom.orange.txt}"
}
},
"pink": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.custom.pink.defaultAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.status.custom.pink.default}"
}
},
"purple": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.custom.purple.defaultAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.status.custom.purple.default}"
}
},
"red": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.custom.red.defaultAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.status.custom.red.default}"
}
},
"slate": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.custom.slate.defaultAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.status.custom.slate.default}"
}
},
"teal": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.status.custom.teal.defaultAlt}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.status.custom.teal.default}"
}
}
},
"bg-alt": {
"$description": "For portrait image",
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
},
"bg-def": {
"$type": "color",
"$value": "{mode.color.generic.bg.nought}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.generic.fg.moderate}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
}
}
}</code>| Token | Value | Description |
|---|---|---|
| progress.bg-default | {mode.color.generic.bg.delicate} | |
| progress.border-default | {mode.color.generic.fg.firm} | |
| progress.fg-alt | {mode.color.status.positive.default} | |
| progress.fg-alt2 | {mode.color.generic.txt.soft} | |
| progress.fg-caution | {mode.color.status.warning.default} | |
| progress.fg-default | {mode.color.action.grayscale.active} | |
| progress.fg-error | {mode.color.status.negative.default} | |
| progress.fg-info | {mode.color.status.info.default} | |
| progress.label-alt | {mode.color.generic.txt.moderate} | |
| progress.label-default | {mode.color.generic.txt.severe} | |
| progress.none | {mode.color.none} | transparent override used for hiding colors when needed. |
| progress.stepindicator.bg-active | {mode.color.action.grayscale.active} | |
| progress.stepindicator.bg-complete | {mode.color.status.positive.default} | |
| progress.stepindicator.border-active-outer | {mode.color.action.grayscale.active} | |
| progress.stepindicator.border-default | {mode.color.generic.fg.firm} | |
| progress.stepindicator.border-success | {mode.color.status.positive.default} | |
| progress.stepindicator.label-active | {mode.color.action.grayscale.withActive} | |
| progress.stepindicator.label-complete | {mode.color.action.grayscale.withActive} | |
| progress.stepindicator.label-default | {mode.color.generic.txt.severe} | |
| progress.stepflow.bg-active | {mode.color.action.grayscale.active} | |
| progress.stepflow.bg-complete | {mode.color.status.positive.default} | |
| progress.stepflow.bg-default | {mode.color.generic.fg.nought} | |
| progress.stepflow.border-active-inner | {mode.color.generic.fg.nought} | |
| progress.stepflow.border-active-outer | {mode.color.action.grayscale.active} | |
| progress.stepflow.border-default | {mode.color.generic.fg.firm} | |
| progress.stepflow.label-alt | {mode.color.generic.txt.soft} | |
| progress.stepflow.label-default | {mode.color.generic.txt.severe} | |
| progress.loader.inverse.bg-default | {mode.color.generic.bg.inverse.delicate} | used for inverse loader bgs |
| progress.loader.inverse.fg-default | {mode.color.generic.fg.inverse.extreme} | used on inverse loading spinner |
| progress.loader.bg-default | {mode.color.generic.bg.delicate} | |
| progress.loader.fg-complete | {mode.color.status.positive.default} | |
| progress.loader.fg-default | {mode.color.generic.fg.inverse.nought} | used for loader standard loader spinner |
| progress.loader.fg-error | {mode.color.status.negative.default} | |
| progress.inverse.label-alt | {mode.color.generic.txt.inverse.soft} |
<code class="language-json">{
"progress": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.generic.bg.delicate}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.generic.fg.firm}"
},
"fg-alt": {
"$type": "color",
"$value": "{mode.color.status.positive.default}"
},
"fg-alt2": {
"$type": "color",
"$value": "{mode.color.generic.txt.soft}"
},
"fg-caution": {
"$type": "color",
"$value": "{mode.color.status.warning.default}"
},
"fg-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"fg-error": {
"$type": "color",
"$value": "{mode.color.status.negative.default}"
},
"fg-info": {
"$type": "color",
"$value": "{mode.color.status.info.default}"
},
"label-alt": {
"$type": "color",
"$value": "{mode.color.generic.txt.moderate}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
},
"none": {
"$description": "transparent override used for hiding colors when needed.",
"$type": "color",
"$value": "{mode.color.none}"
},
"stepindicator": {
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"bg-complete": {
"$type": "color",
"$value": "{mode.color.status.positive.default}"
},
"border-active-outer": {
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.generic.fg.firm}"
},
"border-success": {
"$type": "color",
"$value": "{mode.color.status.positive.default}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withActive}"
},
"label-complete": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withActive}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
}
},
"stepflow": {
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"bg-complete": {
"$type": "color",
"$value": "{mode.color.status.positive.default}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.generic.fg.nought}"
},
"border-active-inner": {
"$type": "color",
"$value": "{mode.color.generic.fg.nought}"
},
"border-active-outer": {
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.generic.fg.firm}"
},
"label-alt": {
"$type": "color",
"$value": "{mode.color.generic.txt.soft}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
}
},
"loader": {
"inverse": {
"bg-default": {
"$description": "used for inverse loader bgs",
"$type": "color",
"$value": "{mode.color.generic.bg.inverse.delicate}"
},
"fg-default": {
"$description": "used on inverse loading spinner",
"$type": "color",
"$value": "{mode.color.generic.fg.inverse.extreme}"
}
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.generic.bg.delicate}"
},
"fg-complete": {
"$type": "color",
"$value": "{mode.color.status.positive.default}"
},
"fg-default": {
"$description": "used for loader standard loader spinner",
"$type": "color",
"$value": "{mode.color.generic.fg.inverse.nought}"
},
"fg-error": {
"$type": "color",
"$value": "{mode.color.status.negative.default}"
}
},
"inverse": {
"label-alt": {
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.soft}"
}
}
}
}</code>| Token | Value | Description |
|---|---|---|
| tab.nav.bg-default | {mode.color.generic.bg.nought} | For previous/next buttons on responsive tabs |
| tab.validation.border-error | {mode.color.status.negative.default} | |
| tab.validation.border-warning | {mode.color.status.warning.default} | |
| tab.validation.icon-error | {mode.color.status.negative.default} | |
| tab.validation.icon-warning | {mode.color.status.warning.default} | |
| tab.validation.label-error | {mode.color.status.negative.default} | |
| tab.validation.label-warning | {mode.color.status.warning.txt} | |
| tab.bg-active | {mode.color.action.grayscale.withActive} | |
| tab.bg-default | {mode.color.none} | |
| tab.bg-hover | {mode.color.action.grayscale.hoverAlt} | For anchor nav, not tab. |
| tab.border-active | {mode.color.action.grayscale.active} | |
| tab.border-activeAlt | {mode.color.generic.fg.moderate} | |
| tab.border-default | {mode.color.generic.fg.moderate} | |
| tab.border-hover | {mode.color.generic.fg.firm} | |
| tab.icon-active | {mode.color.action.grayscale.active} | |
| tab.icon-default | {mode.color.action.grayscale.defaultAlt} | |
| tab.icon-hover | {mode.color.action.grayscale.withHover} | |
| tab.label-active | {mode.color.action.grayscale.active} | |
| tab.label-default | {mode.color.action.grayscale.default} | |
| tab.label-hover | {mode.color.action.grayscale.withHover} |
<code class="language-json">{
"tab": {
"nav": {
"bg-default": {
"$description": "For previous/next buttons on responsive tabs",
"$type": "color",
"$value": "{mode.color.generic.bg.nought}"
}
},
"validation": {
"border-error": {
"$type": "color",
"$value": "{mode.color.status.negative.default}"
},
"border-warning": {
"$type": "color",
"$value": "{mode.color.status.warning.default}"
},
"icon-error": {
"$type": "color",
"$value": "{mode.color.status.negative.default}"
},
"icon-warning": {
"$type": "color",
"$value": "{mode.color.status.warning.default}"
},
"label-error": {
"$type": "color",
"$value": "{mode.color.status.negative.default}"
},
"label-warning": {
"$type": "color",
"$value": "{mode.color.status.warning.txt}"
}
},
"bg-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withActive}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.none}"
},
"bg-hover": {
"$description": "For anchor nav, not tab.",
"$type": "color",
"$value": "{mode.color.action.grayscale.hoverAlt}"
},
"border-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"border-activeAlt": {
"$type": "color",
"$value": "{mode.color.generic.fg.moderate}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.generic.fg.moderate}"
},
"border-hover": {
"$type": "color",
"$value": "{mode.color.generic.fg.firm}"
},
"icon-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"icon-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.defaultAlt}"
},
"icon-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withHover}"
},
"label-active": {
"$type": "color",
"$value": "{mode.color.action.grayscale.active}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.default}"
},
"label-hover": {
"$type": "color",
"$value": "{mode.color.action.grayscale.withHover}"
}
}
}</code>| Token | Value | Description |
|---|---|---|
| table.footer.bg-default | {mode.color.generic.bg.soft} | |
| table.footer.border-default | {mode.color.generic.fg.soft} | Header borders |
| table.footer.label-default | {mode.color.generic.txt.severe} | |
| table.header.harsh.bg-alt | {mode.color.action.grayscale.default} | header alt |
| table.header.harsh.bg-default | {mode.color.action.grayscale.defaultAlt} | |
| table.header.harsh.border-default | {mode.color.generic.fg.soft} | |
| table.header.harsh.label-default | {mode.color.generic.txt.inverse.severe} | |
| table.header.subtle.bg-alt | {mode.color.generic.bg.faint} | header alt |
| table.header.subtle.bg-default | {mode.color.none} | |
| table.header.subtle.border-default | {mode.color.generic.fg.soft} | Header borders |
| table.header.subtle.label-default | {mode.color.generic.txt.severe} | |
| table.row.bg-alt | {mode.color.generic.bg.delicate} | Zebra stripes |
| table.row.bg-alt2 | {mode.color.generic.bg.faint} | Child rows |
| table.row.bg-alt3 | {mode.color.generic.bg.soft} | deprecation candidate |
| table.row.bg-default | {mode.color.generic.bg.nought} | |
| table.row.bg-selected | {mode.color.generic.bg.soft} | |
| table.row.border-default | {mode.color.generic.fg.soft} | |
| table.row.label-default | {mode.color.generic.txt.severe} | |
| table.row.label-selected | {mode.color.generic.txt.extreme} |
<code class="language-json">{
"table": {
"footer": {
"bg-default": {
"$type": "color",
"$value": "{mode.color.generic.bg.soft}"
},
"border-default": {
"$description": "Header borders",
"$type": "color",
"$value": "{mode.color.generic.fg.soft}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
}
},
"header": {
"harsh": {
"bg-alt": {
"$description": "header alt",
"$type": "color",
"$value": "{mode.color.action.grayscale.default}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.action.grayscale.defaultAlt}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.generic.fg.soft}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.severe}"
}
},
"subtle": {
"bg-alt": {
"$description": "header alt",
"$type": "color",
"$value": "{mode.color.generic.bg.faint}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.none}"
},
"border-default": {
"$description": "Header borders",
"$type": "color",
"$value": "{mode.color.generic.fg.soft}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
}
}
},
"row": {
"bg-alt": {
"$description": "Zebra stripes",
"$type": "color",
"$value": "{mode.color.generic.bg.delicate}"
},
"bg-alt2": {
"$description": "Child rows",
"$type": "color",
"$value": "{mode.color.generic.bg.faint}"
},
"bg-alt3": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{mode.color.generic.bg.soft}"
},
"bg-default": {
"$type": "color",
"$value": "{mode.color.generic.bg.nought}"
},
"bg-selected": {
"$type": "color",
"$value": "{mode.color.generic.bg.soft}"
},
"border-default": {
"$type": "color",
"$value": "{mode.color.generic.fg.soft}"
},
"label-default": {
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
},
"label-selected": {
"$type": "color",
"$value": "{mode.color.generic.txt.extreme}"
}
}
}
}</code>| Date | Changes |
|---|---|
| November 2025 | Add pages to document all component specific colors |