Semantic tokens that reference core color tokens, allowing for simple theme switching.
Color mode
Updated May 12, 2026
- Switching colour modes is simple.
- When switching from light mode to dark mode, simply choose mode → dark in Figma.
- This tutorial shows how to switch context themes within Figma. Switching color modes follows a similar process.
Light and dark mode example
| Token | Value | Description |
|---|---|---|
| mode.color.action.ai.active.stop-1 | rgba(18, 160, 56, 0.1500) | |
| mode.color.action.ai.active.stop-2 | rgba(20, 145, 151, 0.1500) | |
| mode.color.action.ai.active.stop-3 | rgba(168, 124, 251, 0.1500) | |
| mode.color.action.ai.hover.stop-1 | rgba(18, 160, 56, 0.0800) | |
| mode.color.action.ai.hover.stop-2 | rgba(20, 145, 151, 0.0800) | |
| mode.color.action.ai.hover.stop-3 | rgba(168, 124, 251, 0.0800) | |
| mode.color.action.danger.inverse.active | {core.color.blush.20} | used on pill hover states |
| mode.color.action.danger.inverse.default | {core.color.blush.40} | |
| mode.color.action.danger.inverse.defaultAlt | {core.color.blush.30} | For links in datatables |
| mode.color.action.danger.inverse.hover | {core.color.blush.30} | used on solid-pill and primary-button hover states |
| mode.color.action.danger.inverse.hoverAlt | rgba(245, 1, 89, 0.1500) | used on secondary-button hover states |
| mode.color.action.danger.inverse.hoverAlt2 | {core.color.blush.20} | used on link hover state |
| mode.color.action.danger.inverse.withActive | {core.color.black} | |
| mode.color.action.danger.inverse.withDefault | {core.color.black} | |
| mode.color.action.danger.active | {core.color.blush.80} | active button on dark |
| mode.color.action.danger.default | {core.color.blush.60} | |
| mode.color.action.danger.defaultAlt | {core.color.blush.70} | for links in datatables |
| mode.color.action.danger.hover | {core.color.blush.70} | |
| mode.color.action.danger.hoverAlt | rgba(219, 1, 78, 0.1500) | used on secondary-button hover states |
| mode.color.action.danger.hoverAlt2 | {core.color.blush.80} | for links in datatables |
| mode.color.action.danger.withActive | {core.color.white} | |
| mode.color.action.danger.withDefault | {core.color.white} | |
| mode.color.action.dataEntry.inverse.default | {core.color.black} | Input backgrounds. |
| mode.color.action.dataEntry.inverse.txt | {mode.color.generic.txt.inverse.severe} | Input txt |
| mode.color.action.dataEntry.inverse.txtAlt | {mode.color.generic.txt.inverse.soft} | Hint txt, placeholder txt, character count etc |
| mode.color.action.dataEntry.inverse.withDefault | {core.color.storm.40} | Input borders. |
| mode.color.action.dataEntry.default | {core.color.white} | Input backgrounds. |
| mode.color.action.dataEntry.defaultAlt | {core.color.storm.10} | Input footer bgs (e.g txt editor) |
| mode.color.action.dataEntry.hoverAlt | {core.color.storm.5} | bg hover for draggable area on file input |
| mode.color.action.dataEntry.txt | {mode.color.generic.txt.severe} | Input txt |
| mode.color.action.dataEntry.txtAlt | {mode.color.generic.txt.soft} | Hint txt, placeholder txt, character count etc |
| mode.color.action.dataEntry.withActive | {core.color.black} | checkbox tick icon or radio handle |
| mode.color.action.dataEntry.withActiveAlt | {core.color.white} | |
| mode.color.action.dataEntry.withDefault | {core.color.storm.60} | Input borders. |
| mode.color.action.dataEntry.withHover | {core.color.black} | txt for draggable area on file input |
| mode.color.action.focus.inverse.default | {core.color.gold.50} | |
| mode.color.action.focus.inverse.txt | {core.color.white} | |
| mode.color.action.focus.inverse.withDefault | {core.color.black} | |
| mode.color.action.focus.inverse.withDefaultAlt | {core.color.gold.80} | |
| mode.color.action.focus.default | {core.color.black} | |
| mode.color.action.focus.txt | {core.color.black} | |
| mode.color.action.focus.withDefault | {core.color.gold.50} | |
| mode.color.action.focus.withDefaultAlt | {core.color.gold.20} | |
| mode.color.action.grayscale.inverse.active | {core.color.white} | |
| mode.color.action.grayscale.inverse.activeAlt | rgba(255, 255, 255, 0.1500) | |
| mode.color.action.grayscale.inverse.default | rgba(255, 255, 255, 0.9000) | |
| mode.color.action.grayscale.inverse.defaultAlt | rgba(255, 255, 255, 0.6700) | subtle and toggle button txt |
| mode.color.action.grayscale.inverse.hover | rgba(255, 255, 255, 0.1500) | subtle table header hover |
| mode.color.action.grayscale.inverse.hoverAlt | rgba(255, 255, 255, 0.1000) | Accordion, secondary, tertiary, menu bg on hover |
| mode.color.action.grayscale.inverse.withActive | {core.color.black} | |
| mode.color.action.grayscale.inverse.withActiveAlt | {core.color.white} | |
| mode.color.action.grayscale.inverse.withDefault | {core.color.black} | |
| mode.color.action.grayscale.inverse.withHover | {core.color.white} | |
| mode.color.action.grayscale.active | {core.color.black} | |
| mode.color.action.grayscale.activeAlt | rgba(0, 0, 0, 0.1500) | |
| mode.color.action.grayscale.default | rgba(0, 0, 0, 0.9000) | |
| mode.color.action.grayscale.defaultAlt | rgba(0, 0, 0, 0.6700) | subtle and toggle button txt |
| mode.color.action.grayscale.hover | rgba(0, 0, 0, 0.1500) | subtle table header hover |
| mode.color.action.grayscale.hoverAlt | rgba(0, 0, 0, 0.1000) | Accordion, secondary, tertiary, menu bg on hover |
| mode.color.action.grayscale.withActive | {core.color.white} | |
| mode.color.action.grayscale.withActiveAlt | {core.color.black} | |
| mode.color.action.grayscale.withDefault | {core.color.white} | |
| mode.color.action.grayscale.withHover | {core.color.black} | |
| mode.color.action.inactive.inverse.default | rgba(255, 255, 255, 0.3000) | Disabled form secondary, tertiary and input borders borders. |
| mode.color.action.inactive.inverse.txt | {mode.color.generic.txt.inverse.delicate} | inversed disabled txt inside buttons and form inputs. |
| mode.color.action.inactive.inverse.txtAlt | {mode.color.generic.txt.inverse.nought} | Disabled labels inside buttons and Switch. |
| mode.color.action.inactive.default | rgba(0, 0, 0, 0.3000) | Disabled form secondary, tertiary and input borders borders. |
| mode.color.action.inactive.defaultAlt | {core.color.smoke.10} | Disabled input and switch backgrounds. Deliberately a solid color value as opposed to alpha based so it works within switch. |
| mode.color.action.inactive.icon | {mode.color.generic.txt.delicate} | Disabled icon inside buttons and form inputs. |
| mode.color.action.inactive.iconAlt | {mode.color.generic.txt.soft} | Readonly icon inside form inputs. |
| mode.color.action.inactive.mask | rgba(0, 0, 0, 0.4000) | full screen takeover token for modal dimmer |
| mode.color.action.inactive.txt | {mode.color.generic.txt.delicate} | Disabled txt inside buttons |
| mode.color.action.inactive.txtAlt | {mode.color.generic.txt.nought} | |
| mode.color.action.main.inverse.active | {core.color.brand.20} | |
| mode.color.action.main.inverse.activeAlt | rgba(0, 241, 67, 0.3000) | Active color for secondary and tertiary buttons |
| mode.color.action.main.inverse.default | {core.color.brand.40} | |
| mode.color.action.main.inverse.defaultAlt | rgba(0, 241, 67, 0.8000) | border color for secondary and tertiary buttons |
| mode.color.action.main.inverse.defaultAlt2 | {core.color.brand.30} | default value for links |
| mode.color.action.main.inverse.defaultAlt3 | rgba(0, 241, 67, 0.0300) | default background color of secondary button |
| mode.color.action.main.inverse.hover | {core.color.brand.30} | |
| mode.color.action.main.inverse.hoverAlt | rgba(0, 241, 67, 0.1500) | hover for secondary and tertiary buttons |
| mode.color.action.main.inverse.hoverAlt2 | {core.color.brand.20} | hover for links |
| mode.color.action.main.inverse.withActive | {core.color.black} | |
| mode.color.action.main.inverse.withDefault | {core.color.black} | |
| mode.color.action.main.inverse.withHover | {core.color.black} | |
| mode.color.action.main.active | {core.color.brand.80} | |
| mode.color.action.main.activeAlt | rgba(0, 129, 32, 0.3000) | Active color for inverse secondary and tertiary buttons |
| mode.color.action.main.default | {core.color.brand.60} | |
| mode.color.action.main.defaultAlt | rgba(0, 129, 32, 0.8000) | border color for secondary and tertiary inverse buttons |
| mode.color.action.main.defaultAlt2 | {core.color.brand.70} | default color for links |
| mode.color.action.main.defaultAlt3 | rgba(0, 129, 32, 0.0300) | default background color of inverse secondary buttons |
| mode.color.action.main.hover | {core.color.brand.70} | |
| mode.color.action.main.hoverAlt | rgba(0, 129, 32, 0.1500) | hover for inverse secondary and tertiary buttons |
| mode.color.action.main.hoverAlt2 | {core.color.brand.80} | hover for links |
| mode.color.action.main.withActive | {core.color.white} | |
| mode.color.action.main.withDefault | {core.color.white} | |
| mode.color.action.main.withHover | {core.color.white} | |
| mode.color.action.nav.inverse.active | rgba(255, 255, 255, 0.1500) | active bg for nav items |
| mode.color.action.nav.inverse.default | {core.color.black} | default bg for global nav |
| mode.color.action.nav.inverse.defaultAlt | {core.color.smoke.95} | default bg for left nav container |
| mode.color.action.nav.inverse.hover | rgba(255, 255, 255, 0.1000) | hover bg for nav items |
| mode.color.action.nav.inverse.withActive | {core.color.white} | txt and icons on top of active bgs in nav contxts |
| mode.color.action.nav.inverse.withDefault | {mode.color.generic.txt.inverse.severe} | hover bg for nav items |
| mode.color.action.nav.inverse.withHover | {core.color.white} | hover bg for nav items |
| mode.color.action.nav.active | rgba(37, 59, 78, 0.1500) | active bg for nav items |
| mode.color.action.nav.default | {core.color.white} | default bg for global nav |
| mode.color.action.nav.defaultAlt | {core.color.storm.5} | default bg for left nav container |
| mode.color.action.nav.hover | rgba(37, 59, 78, 0.1000) | hover bg for nav items |
| mode.color.action.nav.withActive | {core.color.black} | txt and icons on top of active bgs in nav contxts |
| mode.color.action.nav.withDefault | {mode.color.generic.txt.severe} | hover bg for nav items |
| mode.color.action.nav.withHover | {core.color.black} | hover bg for nav items |
| mode.color.ai.alt.stop-1 | {core.color.AI.vibrant.pea} | |
| mode.color.ai.alt.stop-2 | {core.color.AI.vibrant.aqua} | |
| mode.color.ai.alt.stop-3 | {core.color.AI.vibrant.lilac} | |
| mode.color.ai.stop-1 | {core.color.AI.dull.pea} | |
| mode.color.ai.stop-2 | {core.color.AI.dull.aqua} | |
| mode.color.ai.stop-3 | {core.color.AI.dull.lilac} | |
| mode.color.brand.copilot.inverse.default | {core.color.white} | |
| mode.color.brand.copilot.inverse.monochrome | {core.color.white} | |
| mode.color.brand.copilot.inverse.withDefault | {core.color.brand.50} | not accessible on white if it is intended to provide meaning |
| mode.color.brand.copilot.default | {core.color.black} | |
| mode.color.brand.copilot.monochrome | {core.color.black} | |
| mode.color.brand.copilot.withDefault | {core.color.brand.50} | |
| mode.color.brand.inverse.default | {core.color.brand.50} | |
| mode.color.brand.inverse.defaultAlt | {core.color.white} | |
| mode.color.brand.inverse.withDefaultAlt | {core.color.black} | |
| mode.color.brand.default | {core.color.black} | |
| mode.color.brand.defaultAlt | {core.color.black} | |
| mode.color.brand.withDefaultAlt | {core.color.white} | |
| mode.color.colorcode.blue.deep | {core.color.azure.60} | |
| mode.color.colorcode.blue.muted | {core.color.azure.10} | |
| mode.color.colorcode.gray.deep | {core.color.storm.65} | |
| mode.color.colorcode.gray.muted | {core.color.storm.10} | |
| mode.color.colorcode.green.deep | {core.color.emerald.60} | |
| mode.color.colorcode.green.muted | {core.color.emerald.10} | |
| mode.color.colorcode.lime.deep | {core.color.lime.60} | |
| mode.color.colorcode.lime.muted | {core.color.lime.10} | |
| mode.color.colorcode.orange.deep | {core.color.tangerine.60} | |
| mode.color.colorcode.orange.muted | {core.color.tangerine.10} | |
| mode.color.colorcode.pink.deep | {core.color.flamingo.60} | |
| mode.color.colorcode.pink.muted | {core.color.flamingo.10} | |
| mode.color.colorcode.purple.deep | {core.color.plum.60} | |
| mode.color.colorcode.purple.muted | {core.color.plum.10} | |
| mode.color.colorcode.red.deep | {core.color.blush.60} | |
| mode.color.colorcode.red.muted | {core.color.blush.10} | |
| mode.color.colorcode.slate.deep | {core.color.pewter.60} | |
| mode.color.colorcode.slate.muted | {core.color.pewter.10} | |
| mode.color.colorcode.teal.deep | {core.color.petrol.60} | |
| mode.color.colorcode.teal.muted | {core.color.petrol.10} | |
| mode.color.generic.bg.inverse.delicate | rgba(255, 255, 255, 0.1000) | |
| mode.color.generic.bg.inverse.extreme | {core.color.white} | deprecation candidate |
| mode.color.generic.bg.inverse.faint | rgba(255, 255, 255, 0.0500) | |
| mode.color.generic.bg.inverse.firm | rgba(255, 255, 255, 0.2500) | deprecation candidate |
| mode.color.generic.bg.inverse.harsh | rgba(255, 255, 255, 0.3000) | deprecation candidate |
| mode.color.generic.bg.inverse.moderate | rgba(255, 255, 255, 0.2000) | deprecation candidate |
| mode.color.generic.bg.inverse.nought | {core.color.black} | |
| mode.color.generic.bg.inverse.severe | rgba(255, 255, 255, 0.3500) | deprecation candidate |
| mode.color.generic.bg.inverse.soft | rgba(255, 255, 255, 0.1500) | |
| mode.color.generic.bg.delicate | {core.color.storm.10} | |
| mode.color.generic.bg.extreme | {core.color.black} | deprecation candidate |
| mode.color.generic.bg.faint | {core.color.storm.5} | |
| mode.color.generic.bg.firm | {core.color.storm.25} | deprecation candidate |
| mode.color.generic.bg.harsh | {core.color.storm.30} | deprecation candidate |
| mode.color.generic.bg.moderate | {core.color.storm.20} | deprecation candidate |
| mode.color.generic.bg.nought | {core.color.white} | |
| mode.color.generic.bg.severe | {core.color.storm.35} | deprecation candidate |
| mode.color.generic.bg.soft | {core.color.storm.15} | |
| mode.color.generic.fg.inverse.delicate | {core.color.smoke.90} | table dividers and borders |
| mode.color.generic.fg.inverse.extreme | {core.color.white} | deprecation candidate |
| mode.color.generic.fg.inverse.firm | {core.color.smoke.60} | |
| mode.color.generic.fg.inverse.moderate | {core.color.smoke.70} | |
| mode.color.generic.fg.inverse.nought | {core.color.black} | |
| mode.color.generic.fg.inverse.soft | {core.color.smoke.80} | table dividers and borders |
| mode.color.generic.fg.delicate | {core.color.storm.10} | table dividers and borders |
| mode.color.generic.fg.extreme | {core.color.black} | deprecation candidate |
| mode.color.generic.fg.firm | {core.color.storm.60} | |
| mode.color.generic.fg.moderate | {core.color.storm.50} | |
| mode.color.generic.fg.nought | {core.color.white} | |
| mode.color.generic.fg.soft | {core.color.storm.40} | table dividers and borders |
| mode.color.generic.surface.faint | {core.color.storm.5} | used on full page backgrounds as an alternative option |
| mode.color.generic.surface.nought | {core.color.white} | used on full page backgrounds |
| mode.color.generic.txt.inverse.delicate | rgba(255, 255, 255, 0.4200) | accessible OBJECT against white. |
| mode.color.generic.txt.inverse.extreme | {core.color.white} | |
| mode.color.generic.txt.inverse.faint | rgba(255, 255, 255, 0.3000) | deprecation candidate |
| mode.color.generic.txt.inverse.moderate | rgba(255, 255, 255, 0.6700) | |
| mode.color.generic.txt.inverse.nought | {core.color.black} | deprecation candidate |
| mode.color.generic.txt.inverse.severe | rgba(255, 255, 255, 0.9500) | |
| mode.color.generic.txt.inverse.soft | rgba(255, 255, 255, 0.5500) | was 0.5. Increased to 0.55 so that we can use this for hint txt etc too, and still be accessible. |
| mode.color.generic.txt.delicate | rgba(0, 0, 0, 0.4200) | accessible OBJECT against white. |
| mode.color.generic.txt.extreme | {core.color.black} | |
| mode.color.generic.txt.faint | rgba(0, 0, 0, 0.3000) | deprecation candidate |
| mode.color.generic.txt.moderate | rgba(0, 0, 0, 0.6500) | |
| mode.color.generic.txt.nought | {core.color.white} | deprecation candidate |
| mode.color.generic.txt.severe | rgba(0, 0, 0, 0.9500) | |
| mode.color.generic.txt.soft | rgba(0, 0, 0, 0.5500) | was 0.5. Increased to 0.55 so that we can use this for hint txt etc too, and still be accessible. |
| mode.color.status.ai.default | {core.color.white} | |
| mode.color.status.ai.defaultAlt | {core.color.black} | bg for contxtual message comp |
| mode.color.status.callout.defaultAlt | {core.color.brand.5} | used for marketing banners |
| mode.color.status.callout.hoverAlt | {core.color.brand.10} | marketing banner hover |
| mode.color.status.custom.blue.default | {core.color.azure.60} | For pills. Not accessible with white txt. |
| mode.color.status.custom.blue.defaultAlt | {core.color.azure.5} | Pill bg |
| mode.color.status.custom.blue.hover | {core.color.azure.70} | used on pill hover states |
| mode.color.status.custom.blue.hoverAlt | {core.color.azure.10} | used on pill hover states |
| mode.color.status.custom.gray.default | {core.color.smoke.60} | For pills. Not accessible with white txt. |
| mode.color.status.custom.gray.defaultAlt | {core.color.smoke.5} | Pill bg |
| mode.color.status.custom.gray.hover | {core.color.smoke.70} | used on pill hover states |
| mode.color.status.custom.gray.hoverAlt | {core.color.smoke.10} | used on pill hover states |
| mode.color.status.custom.green.default | {core.color.emerald.60} | For pills. Not accessible with white txt. |
| mode.color.status.custom.green.defaultAlt | {core.color.emerald.5} | Pill bg |
| mode.color.status.custom.green.hover | {core.color.emerald.70} | used on pill hover states |
| mode.color.status.custom.green.hoverAlt | {core.color.emerald.10} | used on pill hover states |
| mode.color.status.custom.lime.default | {core.color.lime.60} | For pills. Not accessible with white txt. |
| mode.color.status.custom.lime.defaultAlt | {core.color.lime.5} | Pill bg |
| mode.color.status.custom.lime.hover | {core.color.lime.70} | used on pill hover states |
| mode.color.status.custom.lime.hoverAlt | {core.color.lime.10} | used on pill hover states |
| mode.color.status.custom.orange.default | {core.color.tangerine.60} | For pills. Not accessible with white txt. |
| mode.color.status.custom.orange.defaultAlt | {core.color.tangerine.5} | Pill bg |
| mode.color.status.custom.orange.hover | {core.color.tangerine.70} | used on pill hover states |
| mode.color.status.custom.orange.hoverAlt | {core.color.tangerine.10} | used on pill hover states |
| mode.color.status.custom.orange.txt | {core.color.tangerine.70} | used in portrait |
| mode.color.status.custom.pink.default | {core.color.flamingo.60} | For pills. Not accessible with white txt. |
| mode.color.status.custom.pink.defaultAlt | {core.color.flamingo.5} | Pill bg |
| mode.color.status.custom.pink.hover | {core.color.flamingo.70} | used on pill hover states |
| mode.color.status.custom.pink.hoverAlt | {core.color.flamingo.10} | used on pill hover states |
| mode.color.status.custom.purple.default | {core.color.plum.60} | For pills. Not accessible with white txt. |
| mode.color.status.custom.purple.defaultAlt | {core.color.plum.5} | Pill bg |
| mode.color.status.custom.purple.hover | {core.color.plum.70} | used on pill hover states |
| mode.color.status.custom.purple.hoverAlt | {core.color.plum.10} | used on pill hover states |
| mode.color.status.custom.red.default | {core.color.blush.60} | For pills. Not accessible with white txt. |
| mode.color.status.custom.red.defaultAlt | {core.color.blush.5} | Pill bg |
| mode.color.status.custom.red.hover | {core.color.blush.70} | used on pill hover states |
| mode.color.status.custom.red.hoverAlt | {core.color.blush.10} | used on pill hover states |
| mode.color.status.custom.slate.default | {core.color.storm.75} | For pills. Not accessible with white txt. |
| mode.color.status.custom.slate.defaultAlt | {core.color.storm.5} | Pill bg |
| mode.color.status.custom.slate.hover | {core.color.storm.80} | used on pill hover states |
| mode.color.status.custom.slate.hoverAlt | {core.color.storm.10} | used on pill hover states |
| mode.color.status.custom.teal.default | {core.color.petrol.60} | For pills. Not accessible with white txt. |
| mode.color.status.custom.teal.defaultAlt | {core.color.petrol.5} | Pill bg |
| mode.color.status.custom.teal.hover | {core.color.petrol.70} | used on pill hover states |
| mode.color.status.custom.teal.hoverAlt | {core.color.petrol.10} | used on pill hover states |
| mode.color.status.inactive.inverse.default | {mode.color.generic.fg.inverse.firm} | For readonly pill bg and border |
| mode.color.status.inactive.inverse.withDefault | {mode.color.generic.txt.inverse.soft} | For readonly filled pill txt |
| mode.color.status.inactive.default | {mode.color.generic.fg.firm} | For readonly pill bg and border |
| mode.color.status.inactive.withDefault | {mode.color.generic.txt.soft} | For readonly filled pill txt |
| mode.color.status.info.inverse.default | {core.color.azure.40} | |
| mode.color.status.info.inverse.defaultAlt | {core.color.azure.95} | Subtle message bg |
| mode.color.status.info.inverse.hover | {core.color.azure.30} | used on pill hover states |
| mode.color.status.info.inverse.hoverAlt | {core.color.azure.90} | used on pill hover states and message bg |
| mode.color.status.info.default | {core.color.azure.60} | |
| mode.color.status.info.defaultAlt | {core.color.azure.5} | Subtle message bg |
| mode.color.status.info.hover | {core.color.azure.70} | used on pill hover states |
| mode.color.status.info.hoverAlt | {core.color.azure.10} | used on pill hover states and message bg |
| mode.color.status.negative.inverse.default | {core.color.blush.40} | |
| mode.color.status.negative.inverse.defaultAlt | {core.color.blush.95} | Subtle message bg |
| mode.color.status.negative.inverse.hover | {core.color.blush.30} | used on pill hover states |
| mode.color.status.negative.inverse.hoverAlt | {core.color.blush.90} | used on pill hover states and message bg |
| mode.color.status.negative.default | {core.color.blush.60} | |
| mode.color.status.negative.defaultAlt | {core.color.blush.5} | Subtle message bg |
| mode.color.status.negative.hover | {core.color.blush.70} | used on pill hover states |
| mode.color.status.negative.hoverAlt | {core.color.blush.10} | used on pill hover states and message bg |
| mode.color.status.neutral.inverse.default | {core.color.smoke.40} | |
| mode.color.status.neutral.inverse.defaultAlt | {core.color.smoke.95} | Subtle message bg |
| mode.color.status.neutral.inverse.hover | {core.color.smoke.30} | used on pill hover states |
| mode.color.status.neutral.inverse.hoverAlt | {core.color.smoke.90} | used on pill hover states and message bg |
| mode.color.status.neutral.default | {core.color.smoke.60} | |
| mode.color.status.neutral.defaultAlt | {core.color.smoke.5} | Subtle message bg |
| mode.color.status.neutral.hover | {core.color.smoke.70} | used on pill hover states |
| mode.color.status.neutral.hoverAlt | {core.color.smoke.10} | used on pill hover states and message bg |
| mode.color.status.positive.inverse.default | {core.color.emerald.40} | |
| mode.color.status.positive.inverse.defaultAlt | {core.color.emerald.95} | Subtle message bg |
| mode.color.status.positive.inverse.hover | {core.color.emerald.70} | used on pill hover states |
| mode.color.status.positive.inverse.hoverAlt | {core.color.emerald.90} | used on pill hover states and message bg |
| mode.color.status.positive.default | {core.color.emerald.60} | |
| mode.color.status.positive.defaultAlt | {core.color.emerald.5} | Subtle message bg |
| mode.color.status.positive.hover | {core.color.emerald.70} | used on pill hover states |
| mode.color.status.positive.hoverAlt | {core.color.emerald.10} | used on pill hover states and message bg |
| mode.color.status.priority.inverse.default | {core.color.plum.40} | For tile status keylines to show if something is of high importance. |
| mode.color.status.priority.inverse.defaultAlt | {core.color.plum.95} | Subtle message bg |
| mode.color.status.priority.inverse.hover | {core.color.plum.30} | used on pill hover states |
| mode.color.status.priority.inverse.hoverAlt | {core.color.plum.90} | used on pill hover states and message bg |
| mode.color.status.priority.default | {core.color.plum.60} | |
| mode.color.status.priority.defaultAlt | {core.color.plum.5} | Subtle message bg |
| mode.color.status.priority.hover | {core.color.plum.70} | used on pill hover states |
| mode.color.status.priority.hoverAlt | {core.color.plum.10} | used on pill hover states and message bg |
| mode.color.status.skeleton.stop-1 | {core.color.storm.60} | |
| mode.color.status.skeleton.stop-2 | {core.color.storm.20} | |
| mode.color.status.txt.inverse.withDefault | {mode.color.generic.txt.extreme} | |
| mode.color.status.txt.inverse.withDefaultAlt | rgba(255, 255, 255, 0.9500) | |
| mode.color.status.txt.inverse.withHover | {mode.color.generic.txt.extreme} | |
| mode.color.status.txt.inverse.withHoverAlt | {mode.color.generic.txt.nought} | |
| mode.color.status.txt.loading | {core.color.smoke.50} | used on skeleton txt |
| mode.color.status.txt.withDefault | {mode.color.generic.txt.nought} | |
| mode.color.status.txt.withDefaultAlt | {mode.color.generic.txt.severe} | |
| mode.color.status.txt.withHover | {mode.color.generic.txt.nought} | |
| mode.color.status.txt.withHoverAlt | {mode.color.generic.txt.extreme} | |
| mode.color.status.warning.inverse.default | {core.color.tangerine.40} | |
| mode.color.status.warning.inverse.defaultAlt | {core.color.tangerine.95} | Subtle message bg |
| mode.color.status.warning.inverse.hover | {core.color.tangerine.30} | used on pill hover states |
| mode.color.status.warning.inverse.hoverAlt | {core.color.tangerine.90} | used on pill hover states and message bg |
| mode.color.status.warning.inverse.txt | {core.color.tangerine.30} | |
| mode.color.status.warning.default | {core.color.tangerine.60} | |
| mode.color.status.warning.defaultAlt | {core.color.tangerine.5} | Subtle message bg |
| mode.color.status.warning.hover | {core.color.tangerine.70} | used on pill hover states |
| mode.color.status.warning.hoverAlt | {core.color.tangerine.10} | used on pill hover states and message bg |
| mode.color.status.warning.txt | {core.color.tangerine.70} | |
| mode.color.none | rgba(255, 255, 255, 0.0000) |
<code class="language-json">{
"mode": {
"color": {
"action": {
"ai": {
"active": {
"stop-1": {
"$type": "color",
"$value": "rgba(18, 160, 56, 0.1500)"
},
"stop-2": {
"$type": "color",
"$value": "rgba(20, 145, 151, 0.1500)"
},
"stop-3": {
"$type": "color",
"$value": "rgba(168, 124, 251, 0.1500)"
}
},
"hover": {
"stop-1": {
"$type": "color",
"$value": "rgba(18, 160, 56, 0.0800)"
},
"stop-2": {
"$type": "color",
"$value": "rgba(20, 145, 151, 0.0800)"
},
"stop-3": {
"$type": "color",
"$value": "rgba(168, 124, 251, 0.0800)"
}
}
},
"danger": {
"inverse": {
"active": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.blush.20}"
},
"default": {
"$type": "color",
"$value": "{core.color.blush.40}"
},
"defaultAlt": {
"$description": "For links in datatables",
"$type": "color",
"$value": "{core.color.blush.30}"
},
"hover": {
"$description": "used on solid-pill and primary-button hover states",
"$type": "color",
"$value": "{core.color.blush.30}"
},
"hoverAlt": {
"$description": "used on secondary-button hover states",
"$type": "color",
"$value": "rgba(245, 1, 89, 0.1500)"
},
"hoverAlt2": {
"$description": "used on link hover state",
"$type": "color",
"$value": "{core.color.blush.20}"
},
"withActive": {
"$type": "color",
"$value": "{core.color.black}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.black}"
}
},
"active": {
"$description": "active button on dark",
"$type": "color",
"$value": "{core.color.blush.80}"
},
"default": {
"$type": "color",
"$value": "{core.color.blush.60}"
},
"defaultAlt": {
"$description": "for links in datatables",
"$type": "color",
"$value": "{core.color.blush.70}"
},
"hover": {
"$type": "color",
"$value": "{core.color.blush.70}"
},
"hoverAlt": {
"$description": "used on secondary-button hover states",
"$type": "color",
"$value": "rgba(219, 1, 78, 0.1500)"
},
"hoverAlt2": {
"$description": "for links in datatables",
"$type": "color",
"$value": "{core.color.blush.80}"
},
"withActive": {
"$type": "color",
"$value": "{core.color.white}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.white}"
}
},
"dataEntry": {
"inverse": {
"default": {
"$description": "Input backgrounds.",
"$type": "color",
"$value": "{core.color.black}"
},
"txt": {
"$description": "Input txt",
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.severe}"
},
"txtAlt": {
"$description": "Hint txt, placeholder txt, character count etc",
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.soft}"
},
"withDefault": {
"$description": "Input borders.",
"$type": "color",
"$value": "{core.color.storm.40}"
}
},
"default": {
"$description": "Input backgrounds.",
"$type": "color",
"$value": "{core.color.white}"
},
"defaultAlt": {
"$description": "Input footer bgs (e.g txt editor)",
"$type": "color",
"$value": "{core.color.storm.10}"
},
"hoverAlt": {
"$description": "bg hover for draggable area on file input",
"$type": "color",
"$value": "{core.color.storm.5}"
},
"txt": {
"$description": "Input txt",
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
},
"txtAlt": {
"$description": "Hint txt, placeholder txt, character count etc",
"$type": "color",
"$value": "{mode.color.generic.txt.soft}"
},
"withActive": {
"$description": "checkbox tick icon or radio handle",
"$type": "color",
"$value": "{core.color.black}"
},
"withActiveAlt": {
"$type": "color",
"$value": "{core.color.white}"
},
"withDefault": {
"$description": "Input borders.",
"$type": "color",
"$value": "{core.color.storm.60}"
},
"withHover": {
"$description": "txt for draggable area on file input",
"$type": "color",
"$value": "{core.color.black}"
}
},
"focus": {
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.gold.50}"
},
"txt": {
"$type": "color",
"$value": "{core.color.white}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.black}"
},
"withDefaultAlt": {
"$type": "color",
"$value": "{core.color.gold.80}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.black}"
},
"txt": {
"$type": "color",
"$value": "{core.color.black}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.gold.50}"
},
"withDefaultAlt": {
"$type": "color",
"$value": "{core.color.gold.20}"
}
},
"grayscale": {
"inverse": {
"active": {
"$type": "color",
"$value": "{core.color.white}"
},
"activeAlt": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.1500)"
},
"default": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.9000)"
},
"defaultAlt": {
"$description": "subtle and toggle button txt",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.6700)"
},
"hover": {
"$description": "subtle table header hover",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.1500)"
},
"hoverAlt": {
"$description": "Accordion, secondary, tertiary, menu bg on hover",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.1000)"
},
"withActive": {
"$type": "color",
"$value": "{core.color.black}"
},
"withActiveAlt": {
"$type": "color",
"$value": "{core.color.white}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.black}"
},
"withHover": {
"$type": "color",
"$value": "{core.color.white}"
}
},
"active": {
"$type": "color",
"$value": "{core.color.black}"
},
"activeAlt": {
"$type": "color",
"$value": "rgba(0, 0, 0, 0.1500)"
},
"default": {
"$type": "color",
"$value": "rgba(0, 0, 0, 0.9000)"
},
"defaultAlt": {
"$description": "subtle and toggle button txt",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.6700)"
},
"hover": {
"$description": "subtle table header hover",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.1500)"
},
"hoverAlt": {
"$description": "Accordion, secondary, tertiary, menu bg on hover",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.1000)"
},
"withActive": {
"$type": "color",
"$value": "{core.color.white}"
},
"withActiveAlt": {
"$type": "color",
"$value": "{core.color.black}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.white}"
},
"withHover": {
"$type": "color",
"$value": "{core.color.black}"
}
},
"inactive": {
"inverse": {
"default": {
"$description": "Disabled form secondary, tertiary and input borders borders.",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.3000)"
},
"txt": {
"$description": "inversed disabled txt inside buttons and form inputs.",
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.delicate}"
},
"txtAlt": {
"$description": "Disabled labels inside buttons and Switch.",
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.nought}"
}
},
"default": {
"$description": "Disabled form secondary, tertiary and input borders borders.",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.3000)"
},
"defaultAlt": {
"$description": "Disabled input and switch backgrounds. Deliberately a solid color value as opposed to alpha based so it works within switch.",
"$type": "color",
"$value": "{core.color.smoke.10}"
},
"icon": {
"$description": "Disabled icon inside buttons and form inputs.",
"$type": "color",
"$value": "{mode.color.generic.txt.delicate}"
},
"iconAlt": {
"$description": "Readonly icon inside form inputs.",
"$type": "color",
"$value": "{mode.color.generic.txt.soft}"
},
"mask": {
"$description": "full screen takeover token for modal dimmer",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.4000)"
},
"txt": {
"$description": "Disabled txt inside buttons",
"$type": "color",
"$value": "{mode.color.generic.txt.delicate}"
},
"txtAlt": {
"$type": "color",
"$value": "{mode.color.generic.txt.nought}"
}
},
"main": {
"inverse": {
"active": {
"$type": "color",
"$value": "{core.color.brand.20}"
},
"activeAlt": {
"$description": "Active color for secondary and tertiary buttons",
"$type": "color",
"$value": "rgba(0, 241, 67, 0.3000)"
},
"default": {
"$type": "color",
"$value": "{core.color.brand.40}"
},
"defaultAlt": {
"$description": "border color for secondary and tertiary buttons",
"$type": "color",
"$value": "rgba(0, 241, 67, 0.8000)"
},
"defaultAlt2": {
"$description": "default value for links",
"$type": "color",
"$value": "{core.color.brand.30}"
},
"defaultAlt3": {
"$description": "default background color of secondary button",
"$type": "color",
"$value": "rgba(0, 241, 67, 0.0300)"
},
"hover": {
"$type": "color",
"$value": "{core.color.brand.30}"
},
"hoverAlt": {
"$description": "hover for secondary and tertiary buttons",
"$type": "color",
"$value": "rgba(0, 241, 67, 0.1500)"
},
"hoverAlt2": {
"$description": "hover for links",
"$type": "color",
"$value": "{core.color.brand.20}"
},
"withActive": {
"$type": "color",
"$value": "{core.color.black}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.black}"
},
"withHover": {
"$type": "color",
"$value": "{core.color.black}"
}
},
"active": {
"$type": "color",
"$value": "{core.color.brand.80}"
},
"activeAlt": {
"$description": "Active color for inverse secondary and tertiary buttons",
"$type": "color",
"$value": "rgba(0, 129, 32, 0.3000)"
},
"default": {
"$type": "color",
"$value": "{core.color.brand.60}"
},
"defaultAlt": {
"$description": "border color for secondary and tertiary inverse buttons",
"$type": "color",
"$value": "rgba(0, 129, 32, 0.8000)"
},
"defaultAlt2": {
"$description": "default color for links",
"$type": "color",
"$value": "{core.color.brand.70}"
},
"defaultAlt3": {
"$description": "default background color of inverse secondary buttons",
"$type": "color",
"$value": "rgba(0, 129, 32, 0.0300)"
},
"hover": {
"$type": "color",
"$value": "{core.color.brand.70}"
},
"hoverAlt": {
"$description": "hover for inverse secondary and tertiary buttons",
"$type": "color",
"$value": "rgba(0, 129, 32, 0.1500)"
},
"hoverAlt2": {
"$description": "hover for links",
"$type": "color",
"$value": "{core.color.brand.80}"
},
"withActive": {
"$type": "color",
"$value": "{core.color.white}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.white}"
},
"withHover": {
"$type": "color",
"$value": "{core.color.white}"
}
},
"nav": {
"inverse": {
"active": {
"$description": "active bg for nav items",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.1500)"
},
"default": {
"$description": "default bg for global nav",
"$type": "color",
"$value": "{core.color.black}"
},
"defaultAlt": {
"$description": "default bg for left nav container",
"$type": "color",
"$value": "{core.color.smoke.95}"
},
"hover": {
"$description": "hover bg for nav items",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.1000)"
},
"withActive": {
"$description": "txt and icons on top of active bgs in nav contxts",
"$type": "color",
"$value": "{core.color.white}"
},
"withDefault": {
"$description": "hover bg for nav items",
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.severe}"
},
"withHover": {
"$description": "hover bg for nav items",
"$type": "color",
"$value": "{core.color.white}"
}
},
"active": {
"$description": "active bg for nav items",
"$type": "color",
"$value": "rgba(37, 59, 78, 0.1500)"
},
"default": {
"$description": "default bg for global nav",
"$type": "color",
"$value": "{core.color.white}"
},
"defaultAlt": {
"$description": "default bg for left nav container",
"$type": "color",
"$value": "{core.color.storm.5}"
},
"hover": {
"$description": "hover bg for nav items",
"$type": "color",
"$value": "rgba(37, 59, 78, 0.1000)"
},
"withActive": {
"$description": "txt and icons on top of active bgs in nav contxts",
"$type": "color",
"$value": "{core.color.black}"
},
"withDefault": {
"$description": "hover bg for nav items",
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
},
"withHover": {
"$description": "hover bg for nav items",
"$type": "color",
"$value": "{core.color.black}"
}
}
},
"ai": {
"alt": {
"stop-1": {
"$type": "color",
"$value": "{core.color.AI.vibrant.pea}"
},
"stop-2": {
"$type": "color",
"$value": "{core.color.AI.vibrant.aqua}"
},
"stop-3": {
"$type": "color",
"$value": "{core.color.AI.vibrant.lilac}"
}
},
"stop-1": {
"$type": "color",
"$value": "{core.color.AI.dull.pea}"
},
"stop-2": {
"$type": "color",
"$value": "{core.color.AI.dull.aqua}"
},
"stop-3": {
"$type": "color",
"$value": "{core.color.AI.dull.lilac}"
}
},
"brand": {
"copilot": {
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.white}"
},
"monochrome": {
"$type": "color",
"$value": "{core.color.white}"
},
"withDefault": {
"$description": "not accessible on white if it is intended to provide meaning",
"$type": "color",
"$value": "{core.color.brand.50}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.black}"
},
"monochrome": {
"$type": "color",
"$value": "{core.color.black}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.brand.50}"
}
},
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.brand.50}"
},
"defaultAlt": {
"$type": "color",
"$value": "{core.color.white}"
},
"withDefaultAlt": {
"$type": "color",
"$value": "{core.color.black}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.black}"
},
"defaultAlt": {
"$type": "color",
"$value": "{core.color.black}"
},
"withDefaultAlt": {
"$type": "color",
"$value": "{core.color.white}"
}
},
"colorcode": {
"blue": {
"deep": {
"$type": "color",
"$value": "{core.color.azure.60}"
},
"muted": {
"$type": "color",
"$value": "{core.color.azure.10}"
}
},
"gray": {
"deep": {
"$type": "color",
"$value": "{core.color.storm.65}"
},
"muted": {
"$type": "color",
"$value": "{core.color.storm.10}"
}
},
"green": {
"deep": {
"$type": "color",
"$value": "{core.color.emerald.60}"
},
"muted": {
"$type": "color",
"$value": "{core.color.emerald.10}"
}
},
"lime": {
"deep": {
"$type": "color",
"$value": "{core.color.lime.60}"
},
"muted": {
"$type": "color",
"$value": "{core.color.lime.10}"
}
},
"orange": {
"deep": {
"$type": "color",
"$value": "{core.color.tangerine.60}"
},
"muted": {
"$type": "color",
"$value": "{core.color.tangerine.10}"
}
},
"pink": {
"deep": {
"$type": "color",
"$value": "{core.color.flamingo.60}"
},
"muted": {
"$type": "color",
"$value": "{core.color.flamingo.10}"
}
},
"purple": {
"deep": {
"$type": "color",
"$value": "{core.color.plum.60}"
},
"muted": {
"$type": "color",
"$value": "{core.color.plum.10}"
}
},
"red": {
"deep": {
"$type": "color",
"$value": "{core.color.blush.60}"
},
"muted": {
"$type": "color",
"$value": "{core.color.blush.10}"
}
},
"slate": {
"deep": {
"$type": "color",
"$value": "{core.color.pewter.60}"
},
"muted": {
"$type": "color",
"$value": "{core.color.pewter.10}"
}
},
"teal": {
"deep": {
"$type": "color",
"$value": "{core.color.petrol.60}"
},
"muted": {
"$type": "color",
"$value": "{core.color.petrol.10}"
}
}
},
"generic": {
"bg": {
"inverse": {
"delicate": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.1000)"
},
"extreme": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.white}"
},
"faint": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.0500)"
},
"firm": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.2500)"
},
"harsh": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.3000)"
},
"moderate": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.2000)"
},
"nought": {
"$type": "color",
"$value": "{core.color.black}"
},
"severe": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.3500)"
},
"soft": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.1500)"
}
},
"delicate": {
"$type": "color",
"$value": "{core.color.storm.10}"
},
"extreme": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.black}"
},
"faint": {
"$type": "color",
"$value": "{core.color.storm.5}"
},
"firm": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.storm.25}"
},
"harsh": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.storm.30}"
},
"moderate": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.storm.20}"
},
"nought": {
"$type": "color",
"$value": "{core.color.white}"
},
"severe": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.storm.35}"
},
"soft": {
"$type": "color",
"$value": "{core.color.storm.15}"
}
},
"fg": {
"inverse": {
"delicate": {
"$description": "table dividers and borders",
"$type": "color",
"$value": "{core.color.smoke.90}"
},
"extreme": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.white}"
},
"firm": {
"$type": "color",
"$value": "{core.color.smoke.60}"
},
"moderate": {
"$type": "color",
"$value": "{core.color.smoke.70}"
},
"nought": {
"$type": "color",
"$value": "{core.color.black}"
},
"soft": {
"$description": "table dividers and borders",
"$type": "color",
"$value": "{core.color.smoke.80}"
}
},
"delicate": {
"$description": "table dividers and borders",
"$type": "color",
"$value": "{core.color.storm.10}"
},
"extreme": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.black}"
},
"firm": {
"$type": "color",
"$value": "{core.color.storm.60}"
},
"moderate": {
"$type": "color",
"$value": "{core.color.storm.50}"
},
"nought": {
"$type": "color",
"$value": "{core.color.white}"
},
"soft": {
"$description": "table dividers and borders",
"$type": "color",
"$value": "{core.color.storm.40}"
}
},
"surface": {
"faint": {
"$description": "used on full page backgrounds as an alternative option",
"$type": "color",
"$value": "{core.color.storm.5}"
},
"nought": {
"$description": "used on full page backgrounds",
"$type": "color",
"$value": "{core.color.white}"
}
},
"txt": {
"inverse": {
"delicate": {
"$description": "accessible OBJECT against white.",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.4200)"
},
"extreme": {
"$type": "color",
"$value": "{core.color.white}"
},
"faint": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.3000)"
},
"moderate": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.6700)"
},
"nought": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.black}"
},
"severe": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.9500)"
},
"soft": {
"$description": "was 0.5. Increased to 0.55 so that we can use this for hint txt etc too, and still be accessible.",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.5500)"
}
},
"delicate": {
"$description": "accessible OBJECT against white.",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.4200)"
},
"extreme": {
"$type": "color",
"$value": "{core.color.black}"
},
"faint": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.3000)"
},
"moderate": {
"$type": "color",
"$value": "rgba(0, 0, 0, 0.6500)"
},
"nought": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.white}"
},
"severe": {
"$type": "color",
"$value": "rgba(0, 0, 0, 0.9500)"
},
"soft": {
"$description": "was 0.5. Increased to 0.55 so that we can use this for hint txt etc too, and still be accessible.",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.5500)"
}
}
},
"status": {
"ai": {
"default": {
"$type": "color",
"$value": "{core.color.white}"
},
"defaultAlt": {
"$description": "bg for contxtual message comp",
"$type": "color",
"$value": "{core.color.black}"
}
},
"callout": {
"defaultAlt": {
"$description": "used for marketing banners",
"$type": "color",
"$value": "{core.color.brand.5}"
},
"hoverAlt": {
"$description": "marketing banner hover",
"$type": "color",
"$value": "{core.color.brand.10}"
}
},
"custom": {
"blue": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.azure.60}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.azure.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.azure.70}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.azure.10}"
}
},
"gray": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.smoke.60}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.smoke.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.smoke.70}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.smoke.10}"
}
},
"green": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.emerald.60}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.emerald.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.emerald.70}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.emerald.10}"
}
},
"lime": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.lime.60}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.lime.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.lime.70}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.lime.10}"
}
},
"orange": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.tangerine.60}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.tangerine.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.tangerine.70}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.tangerine.10}"
},
"txt": {
"$description": "used in portrait",
"$type": "color",
"$value": "{core.color.tangerine.70}"
}
},
"pink": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.flamingo.60}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.flamingo.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.flamingo.70}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.flamingo.10}"
}
},
"purple": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.plum.60}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.plum.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.plum.70}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.plum.10}"
}
},
"red": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.blush.60}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.blush.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.blush.70}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.blush.10}"
}
},
"slate": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.storm.75}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.storm.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.storm.80}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.storm.10}"
}
},
"teal": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.petrol.60}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.petrol.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.petrol.70}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.petrol.10}"
}
}
},
"inactive": {
"inverse": {
"default": {
"$description": "For readonly pill bg and border",
"$type": "color",
"$value": "{mode.color.generic.fg.inverse.firm}"
},
"withDefault": {
"$description": "For readonly filled pill txt",
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.soft}"
}
},
"default": {
"$description": "For readonly pill bg and border",
"$type": "color",
"$value": "{mode.color.generic.fg.firm}"
},
"withDefault": {
"$description": "For readonly filled pill txt",
"$type": "color",
"$value": "{mode.color.generic.txt.soft}"
}
},
"info": {
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.azure.40}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.azure.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.azure.30}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.azure.90}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.azure.60}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.azure.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.azure.70}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.azure.10}"
}
},
"negative": {
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.blush.40}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.blush.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.blush.30}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.blush.90}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.blush.60}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.blush.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.blush.70}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.blush.10}"
}
},
"neutral": {
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.smoke.40}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.smoke.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.smoke.30}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.smoke.90}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.smoke.60}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.smoke.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.smoke.70}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.smoke.10}"
}
},
"positive": {
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.emerald.40}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.emerald.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.emerald.70}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.emerald.90}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.emerald.60}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.emerald.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.emerald.70}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.emerald.10}"
}
},
"priority": {
"inverse": {
"default": {
"$description": "For tile status keylines to show if something is of high importance.",
"$type": "color",
"$value": "{core.color.plum.40}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.plum.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.plum.30}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.plum.90}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.plum.60}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.plum.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.plum.70}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.plum.10}"
}
},
"skeleton": {
"stop-1": {
"$type": "color",
"$value": "{core.color.storm.60}"
},
"stop-2": {
"$type": "color",
"$value": "{core.color.storm.20}"
}
},
"txt": {
"inverse": {
"withDefault": {
"$type": "color",
"$value": "{mode.color.generic.txt.extreme}"
},
"withDefaultAlt": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.9500)"
},
"withHover": {
"$type": "color",
"$value": "{mode.color.generic.txt.extreme}"
},
"withHoverAlt": {
"$type": "color",
"$value": "{mode.color.generic.txt.nought}"
}
},
"loading": {
"$description": "used on skeleton txt",
"$type": "color",
"$value": "{core.color.smoke.50}"
},
"withDefault": {
"$type": "color",
"$value": "{mode.color.generic.txt.nought}"
},
"withDefaultAlt": {
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
},
"withHover": {
"$type": "color",
"$value": "{mode.color.generic.txt.nought}"
},
"withHoverAlt": {
"$type": "color",
"$value": "{mode.color.generic.txt.extreme}"
}
},
"warning": {
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.tangerine.40}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.tangerine.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.tangerine.30}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.tangerine.90}"
},
"txt": {
"$type": "color",
"$value": "{core.color.tangerine.30}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.tangerine.60}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.tangerine.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.tangerine.70}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.tangerine.10}"
},
"txt": {
"$type": "color",
"$value": "{core.color.tangerine.70}"
}
}
},
"none": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.0000)"
}
}
}
}</code>| Token | Value | Description |
|---|---|---|
| mode.color.action.ai.active.stop-1 | rgba(15, 214, 55, 0.1500) | |
| mode.color.action.ai.active.stop-2 | rgba(0, 214, 222, 0.1500) | |
| mode.color.action.ai.active.stop-3 | rgba(157, 96, 255, 0.1500) | |
| mode.color.action.ai.hover.stop-1 | rgba(15, 214, 55, 0.0800) | |
| mode.color.action.ai.hover.stop-2 | rgba(0, 214, 222, 0.0800) | |
| mode.color.action.ai.hover.stop-3 | rgba(157, 96, 255, 0.0800) | |
| mode.color.action.danger.inverse.active | {core.color.blush.80} | used on pill hover states |
| mode.color.action.danger.inverse.default | {core.color.blush.60} | |
| mode.color.action.danger.inverse.defaultAlt | {core.color.blush.70} | For links in datatables |
| mode.color.action.danger.inverse.hover | {core.color.blush.70} | used on solid-pill and primary-button hover states |
| mode.color.action.danger.inverse.hoverAlt | rgba(219, 1, 78, 0.1500) | used on secondary-button hover states |
| mode.color.action.danger.inverse.hoverAlt2 | {core.color.blush.80} | used on link hover state |
| mode.color.action.danger.inverse.withActive | {core.color.white} | |
| mode.color.action.danger.inverse.withDefault | {core.color.white} | |
| mode.color.action.danger.active | {core.color.blush.20} | active button on dark |
| mode.color.action.danger.default | {core.color.blush.40} | |
| mode.color.action.danger.defaultAlt | {core.color.blush.30} | for links in datatables |
| mode.color.action.danger.hover | {core.color.blush.30} | |
| mode.color.action.danger.hoverAlt | rgba(245, 1, 89, 0.1500) | used on secondary-button hover states |
| mode.color.action.danger.hoverAlt2 | {core.color.blush.20} | for links in datatables |
| mode.color.action.danger.withActive | {core.color.black} | |
| mode.color.action.danger.withDefault | {core.color.black} | |
| mode.color.action.dataEntry.inverse.default | {core.color.white} | Input backgrounds. |
| mode.color.action.dataEntry.inverse.txt | {mode.color.generic.txt.inverse.severe} | Input txt |
| mode.color.action.dataEntry.inverse.txtAlt | {mode.color.generic.txt.inverse.soft} | Hint txt, placeholder txt, character count etc |
| mode.color.action.dataEntry.inverse.withDefault | {core.color.storm.60} | Input borders. |
| mode.color.action.dataEntry.default | {core.color.black} | Input backgrounds. |
| mode.color.action.dataEntry.defaultAlt | {core.color.storm.90} | Input footer bgs (e.g txt editor) |
| mode.color.action.dataEntry.hoverAlt | {core.color.storm.95} | bg hover for draggable area on file input |
| mode.color.action.dataEntry.txt | {mode.color.generic.txt.severe} | Input txt |
| mode.color.action.dataEntry.txtAlt | {mode.color.generic.txt.soft} | Hint txt, placeholder txt, character count etc |
| mode.color.action.dataEntry.withActive | {core.color.white} | checkbox tick icon or radio handle |
| mode.color.action.dataEntry.withActiveAlt | {core.color.black} | |
| mode.color.action.dataEntry.withDefault | {core.color.storm.40} | Input borders. |
| mode.color.action.dataEntry.withHover | {core.color.white} | txt for draggable area on file input |
| mode.color.action.focus.inverse.default | {core.color.black} | |
| mode.color.action.focus.inverse.txt | {core.color.black} | |
| mode.color.action.focus.inverse.withDefault | {core.color.gold.50} | |
| mode.color.action.focus.inverse.withDefaultAlt | {core.color.gold.20} | |
| mode.color.action.focus.default | {core.color.gold.50} | |
| mode.color.action.focus.txt | {core.color.white} | |
| mode.color.action.focus.withDefault | {core.color.black} | |
| mode.color.action.focus.withDefaultAlt | {core.color.gold.80} | |
| mode.color.action.grayscale.inverse.active | {core.color.black} | |
| mode.color.action.grayscale.inverse.activeAlt | rgba(0, 0, 0, 0.1500) | |
| mode.color.action.grayscale.inverse.default | {core.color.smoke.90} | |
| mode.color.action.grayscale.inverse.defaultAlt | rgba(0, 0, 0, 0.6700) | subtle and toggle button txt |
| mode.color.action.grayscale.inverse.hover | rgba(0, 0, 0, 0.1500) | subtle table header hover |
| mode.color.action.grayscale.inverse.hoverAlt | rgba(0, 0, 0, 0.1000) | Accordion, secondary, tertiary, menu bg on hover |
| mode.color.action.grayscale.inverse.withActive | {core.color.white} | |
| mode.color.action.grayscale.inverse.withActiveAlt | {core.color.black} | |
| mode.color.action.grayscale.inverse.withDefault | {core.color.white} | |
| mode.color.action.grayscale.inverse.withHover | {core.color.black} | |
| mode.color.action.grayscale.active | {core.color.white} | |
| mode.color.action.grayscale.activeAlt | rgba(255, 255, 255, 0.1500) | |
| mode.color.action.grayscale.default | rgba(255, 255, 255, 0.9000) | |
| mode.color.action.grayscale.defaultAlt | rgba(255, 255, 255, 0.6700) | subtle and toggle button txt |
| mode.color.action.grayscale.hover | rgba(255, 255, 255, 0.1500) | subtle table header hover |
| mode.color.action.grayscale.hoverAlt | rgba(255, 255, 255, 0.1000) | Accordion, secondary, tertiary, menu bg on hover |
| mode.color.action.grayscale.withActive | {core.color.black} | |
| mode.color.action.grayscale.withActiveAlt | {core.color.white} | |
| mode.color.action.grayscale.withDefault | {core.color.black} | |
| mode.color.action.grayscale.withHover | {core.color.white} | |
| mode.color.action.inactive.inverse.default | rgba(0, 0, 0, 0.3000) | Disabled form secondary, tertiary and input borders borders. |
| mode.color.action.inactive.inverse.txt | {mode.color.generic.txt.inverse.delicate} | inversed disabled txt inside buttons and form inputs. |
| mode.color.action.inactive.inverse.txtAlt | {mode.color.generic.txt.inverse.nought} | Disabled labels inside buttons and Switch. |
| mode.color.action.inactive.default | rgba(255, 255, 255, 0.3000) | Disabled form secondary, tertiary and input borders borders. |
| mode.color.action.inactive.defaultAlt | {core.color.smoke.90} | Disabled input and switch backgrounds. Deliberately a solid color value as opposed to alpha based so it works within switch. |
| mode.color.action.inactive.icon | {mode.color.generic.txt.delicate} | Disabled icon inside buttons and form inputs. |
| mode.color.action.inactive.iconAlt | {mode.color.generic.txt.soft} | Readonly icon inside form inputs. |
| mode.color.action.inactive.mask | rgba(255, 255, 255, 0.4000) | full screen takeover token for modal dimmer |
| mode.color.action.inactive.txt | {mode.color.generic.txt.delicate} | Disabled txt inside buttons |
| mode.color.action.inactive.txtAlt | {mode.color.generic.txt.nought} | |
| mode.color.action.main.inverse.active | {core.color.brand.80} | |
| mode.color.action.main.inverse.activeAlt | rgba(0, 129, 32, 0.3000) | Active color for secondary and tertiary buttons |
| mode.color.action.main.inverse.default | {core.color.brand.60} | |
| mode.color.action.main.inverse.defaultAlt | rgba(0, 129, 32, 0.8000) | border color for secondary and tertiary buttons |
| mode.color.action.main.inverse.defaultAlt2 | {core.color.brand.70} | default value for links |
| mode.color.action.main.inverse.defaultAlt3 | rgba(0, 129, 32, 0.0300) | default background color of secondary button |
| mode.color.action.main.inverse.hover | {core.color.brand.70} | |
| mode.color.action.main.inverse.hoverAlt | rgba(0, 129, 32, 0.1500) | hover for secondary and tertiary buttons |
| mode.color.action.main.inverse.hoverAlt2 | {core.color.brand.80} | hover for links |
| mode.color.action.main.inverse.withActive | {core.color.white} | |
| mode.color.action.main.inverse.withDefault | {core.color.white} | |
| mode.color.action.main.inverse.withHover | {core.color.white} | |
| mode.color.action.main.active | {core.color.brand.20} | |
| mode.color.action.main.activeAlt | rgba(0, 241, 67, 0.3000) | Active color for inverse secondary and tertiary buttons |
| mode.color.action.main.default | {core.color.brand.40} | |
| mode.color.action.main.defaultAlt | rgba(0, 241, 67, 0.8000) | border color for secondary and tertiary inverse buttons |
| mode.color.action.main.defaultAlt2 | {core.color.brand.30} | default color for links |
| mode.color.action.main.defaultAlt3 | rgba(0, 241, 67, 0.0300) | default background color of inverse secondary buttons |
| mode.color.action.main.hover | {core.color.brand.30} | |
| mode.color.action.main.hoverAlt | rgba(0, 241, 67, 0.1500) | hover for inverse secondary and tertiary buttons |
| mode.color.action.main.hoverAlt2 | {core.color.brand.20} | hover for links |
| mode.color.action.main.withActive | {core.color.black} | |
| mode.color.action.main.withDefault | {core.color.black} | |
| mode.color.action.main.withHover | {core.color.black} | |
| mode.color.action.nav.inverse.active | rgba(37, 59, 78, 0.1500) | active bg for nav items |
| mode.color.action.nav.inverse.default | {core.color.white} | default bg for global nav |
| mode.color.action.nav.inverse.defaultAlt | {core.color.storm.5} | default bg for left nav container |
| mode.color.action.nav.inverse.hover | rgba(37, 59, 78, 0.1000) | hover bg for nav items |
| mode.color.action.nav.inverse.withActive | {core.color.black} | txt and icons on top of active bgs in nav contxts |
| mode.color.action.nav.inverse.withDefault | {mode.color.generic.txt.inverse.severe} | hover bg for nav items |
| mode.color.action.nav.inverse.withHover | {core.color.black} | hover bg for nav items |
| mode.color.action.nav.active | rgba(255, 255, 255, 0.1500) | active bg for nav items |
| mode.color.action.nav.default | {core.color.black} | default bg for global nav |
| mode.color.action.nav.defaultAlt | {core.color.smoke.95} | default bg for left nav container |
| mode.color.action.nav.hover | rgba(255, 255, 255, 0.1000) | hover bg for nav items |
| mode.color.action.nav.withActive | {core.color.white} | txt and icons on top of active bgs in nav contxts |
| mode.color.action.nav.withDefault | {mode.color.generic.txt.severe} | hover bg for nav items |
| mode.color.action.nav.withHover | {core.color.white} | hover bg for nav items |
| mode.color.ai.alt.stop-1 | {core.color.AI.vibrant.pea} | |
| mode.color.ai.alt.stop-2 | {core.color.AI.vibrant.aqua} | |
| mode.color.ai.alt.stop-3 | {core.color.AI.vibrant.lilac} | |
| mode.color.ai.stop-1 | {core.color.AI.vibrant.pea} | |
| mode.color.ai.stop-2 | {core.color.AI.vibrant.aqua} | |
| mode.color.ai.stop-3 | {core.color.AI.vibrant.lilac} | |
| mode.color.brand.copilot.inverse.default | {core.color.black} | |
| mode.color.brand.copilot.inverse.monochrome | {core.color.black} | |
| mode.color.brand.copilot.inverse.withDefault | {core.color.brand.50} | not accessible on white if it is intended to provide meaning |
| mode.color.brand.copilot.default | {core.color.white} | |
| mode.color.brand.copilot.monochrome | {core.color.white} | |
| mode.color.brand.copilot.withDefault | {core.color.brand.50} | |
| mode.color.brand.inverse.default | {core.color.black} | |
| mode.color.brand.inverse.defaultAlt | {core.color.black} | |
| mode.color.brand.inverse.withDefaultAlt | {core.color.white} | |
| mode.color.brand.default | {core.color.brand.50} | |
| mode.color.brand.defaultAlt | {core.color.white} | |
| mode.color.brand.withDefaultAlt | {core.color.black} | |
| mode.color.colorcode.blue.deep | {core.color.azure.40} | |
| mode.color.colorcode.blue.muted | {core.color.azure.90} | |
| mode.color.colorcode.gray.deep | {core.color.storm.40} | |
| mode.color.colorcode.gray.muted | {core.color.storm.95} | |
| mode.color.colorcode.green.deep | {core.color.emerald.40} | |
| mode.color.colorcode.green.muted | {core.color.emerald.90} | |
| mode.color.colorcode.lime.deep | {core.color.lime.40} | |
| mode.color.colorcode.lime.muted | {core.color.lime.90} | |
| mode.color.colorcode.orange.deep | {core.color.tangerine.40} | |
| mode.color.colorcode.orange.muted | {core.color.tangerine.90} | |
| mode.color.colorcode.pink.deep | {core.color.flamingo.40} | |
| mode.color.colorcode.pink.muted | {core.color.flamingo.90} | |
| mode.color.colorcode.purple.deep | {core.color.plum.40} | |
| mode.color.colorcode.purple.muted | {core.color.plum.90} | |
| mode.color.colorcode.red.deep | {core.color.blush.40} | |
| mode.color.colorcode.red.muted | {core.color.blush.90} | |
| mode.color.colorcode.slate.deep | {core.color.pewter.40} | |
| mode.color.colorcode.slate.muted | {core.color.pewter.90} | |
| mode.color.colorcode.teal.deep | {core.color.petrol.40} | |
| mode.color.colorcode.teal.muted | {core.color.petrol.90} | |
| mode.color.generic.bg.inverse.delicate | {core.color.storm.10} | |
| mode.color.generic.bg.inverse.extreme | {core.color.black} | deprecation candidate |
| mode.color.generic.bg.inverse.faint | {core.color.storm.5} | |
| mode.color.generic.bg.inverse.firm | {core.color.storm.25} | deprecation candidate |
| mode.color.generic.bg.inverse.harsh | {core.color.storm.30} | deprecation candidate |
| mode.color.generic.bg.inverse.moderate | {core.color.storm.20} | deprecation candidate |
| mode.color.generic.bg.inverse.nought | {core.color.white} | |
| mode.color.generic.bg.inverse.severe | {core.color.storm.35} | deprecation candidate |
| mode.color.generic.bg.inverse.soft | {core.color.storm.15} | |
| mode.color.generic.bg.delicate | rgba(255, 255, 255, 0.1000) | |
| mode.color.generic.bg.extreme | {core.color.white} | deprecation candidate |
| mode.color.generic.bg.faint | rgba(255, 255, 255, 0.0500) | |
| mode.color.generic.bg.firm | rgba(255, 255, 255, 0.2500) | deprecation candidate |
| mode.color.generic.bg.harsh | rgba(255, 255, 255, 0.3000) | deprecation candidate |
| mode.color.generic.bg.moderate | rgba(255, 255, 255, 0.2000) | deprecation candidate |
| mode.color.generic.bg.nought | {core.color.black} | |
| mode.color.generic.bg.severe | rgba(255, 255, 255, 0.3500) | deprecation candidate |
| mode.color.generic.bg.soft | rgba(255, 255, 255, 0.1500) | |
| mode.color.generic.fg.inverse.delicate | {core.color.storm.10} | table dividers and borders |
| mode.color.generic.fg.inverse.extreme | {core.color.black} | deprecation candidate |
| mode.color.generic.fg.inverse.firm | {core.color.storm.60} | |
| mode.color.generic.fg.inverse.moderate | {core.color.storm.50} | |
| mode.color.generic.fg.inverse.nought | {core.color.white} | |
| mode.color.generic.fg.inverse.soft | {core.color.storm.40} | table dividers and borders |
| mode.color.generic.fg.delicate | {core.color.smoke.90} | table dividers and borders |
| mode.color.generic.fg.extreme | {core.color.white} | deprecation candidate |
| mode.color.generic.fg.firm | {core.color.smoke.60} | |
| mode.color.generic.fg.moderate | {core.color.smoke.70} | |
| mode.color.generic.fg.nought | {core.color.black} | |
| mode.color.generic.fg.soft | {core.color.smoke.80} | table dividers and borders |
| mode.color.generic.surface.faint | {core.color.storm.95} | used on full page backgrounds as an alternative option |
| mode.color.generic.surface.nought | {core.color.black} | used on full page backgrounds |
| mode.color.generic.txt.inverse.delicate | rgba(0, 0, 0, 0.4200) | accessible OBJECT against white. |
| mode.color.generic.txt.inverse.extreme | {core.color.black} | |
| mode.color.generic.txt.inverse.faint | rgba(0, 0, 0, 0.3000) | deprecation candidate |
| mode.color.generic.txt.inverse.moderate | rgba(0, 0, 0, 0.6700) | |
| mode.color.generic.txt.inverse.nought | {core.color.white} | deprecation candidate |
| mode.color.generic.txt.inverse.severe | rgba(0, 0, 0, 0.9500) | |
| mode.color.generic.txt.inverse.soft | rgba(0, 0, 0, 0.5500) | was 0.5. Increased to 0.55 so that we can use this for hint txt etc too, and still be accessible. |
| mode.color.generic.txt.delicate | rgba(255, 255, 255, 0.4200) | accessible OBJECT against white. |
| mode.color.generic.txt.extreme | {core.color.white} | |
| mode.color.generic.txt.faint | rgba(255, 255, 255, 0.3000) | deprecation candidate |
| mode.color.generic.txt.moderate | rgba(255, 255, 255, 0.6700) | |
| mode.color.generic.txt.nought | {core.color.black} | deprecation candidate |
| mode.color.generic.txt.severe | rgba(255, 255, 255, 0.9500) | |
| mode.color.generic.txt.soft | rgba(255, 255, 255, 0.5500) | was 0.5. Increased to 0.55 so that we can use this for hint txt etc too, and still be accessible. |
| mode.color.status.ai.default | {mode.color.generic.bg.nought} | |
| mode.color.status.ai.defaultAlt | {mode.color.generic.bg.extreme} | bg for contxtual message comp |
| mode.color.status.callout.defaultAlt | {core.color.brand.95} | used for marketing banners |
| mode.color.status.callout.hoverAlt | {core.color.brand.90} | marketing banner hover |
| mode.color.status.custom.blue.default | {core.color.azure.40} | For pills. Not accessible with white txt. |
| mode.color.status.custom.blue.defaultAlt | {core.color.azure.95} | Pill bg |
| mode.color.status.custom.blue.hover | {core.color.azure.30} | used on pill hover states |
| mode.color.status.custom.blue.hoverAlt | {core.color.azure.90} | used on pill hover states |
| mode.color.status.custom.gray.default | {core.color.smoke.40} | For pills. Not accessible with white txt. |
| mode.color.status.custom.gray.defaultAlt | {core.color.smoke.95} | Pill bg |
| mode.color.status.custom.gray.hover | {core.color.smoke.30} | used on pill hover states |
| mode.color.status.custom.gray.hoverAlt | {core.color.smoke.90} | used on pill hover states |
| mode.color.status.custom.green.default | {core.color.emerald.40} | For pills. Not accessible with white txt. |
| mode.color.status.custom.green.defaultAlt | {core.color.emerald.95} | Pill bg |
| mode.color.status.custom.green.hover | {core.color.emerald.30} | used on pill hover states |
| mode.color.status.custom.green.hoverAlt | {core.color.emerald.90} | used on pill hover states |
| mode.color.status.custom.lime.default | {core.color.lime.40} | For pills. Not accessible with white txt. |
| mode.color.status.custom.lime.defaultAlt | {core.color.lime.95} | Pill bg |
| mode.color.status.custom.lime.hover | {core.color.lime.30} | used on pill hover states |
| mode.color.status.custom.lime.hoverAlt | {core.color.lime.90} | used on pill hover states |
| mode.color.status.custom.orange.default | {core.color.tangerine.40} | For pills. Not accessible with white txt. |
| mode.color.status.custom.orange.defaultAlt | {core.color.tangerine.95} | Pill bg |
| mode.color.status.custom.orange.hover | {core.color.tangerine.30} | used on pill hover states |
| mode.color.status.custom.orange.hoverAlt | {core.color.tangerine.90} | used on pill hover states |
| mode.color.status.custom.orange.txt | {core.color.tangerine.40} | used in portrait |
| mode.color.status.custom.pink.default | {core.color.flamingo.40} | For pills. Not accessible with white txt. |
| mode.color.status.custom.pink.defaultAlt | {core.color.flamingo.95} | Pill bg |
| mode.color.status.custom.pink.hover | {core.color.flamingo.30} | used on pill hover states |
| mode.color.status.custom.pink.hoverAlt | {core.color.flamingo.90} | used on pill hover states |
| mode.color.status.custom.purple.default | {core.color.plum.40} | For pills. Not accessible with white txt. |
| mode.color.status.custom.purple.defaultAlt | {core.color.plum.95} | Pill bg |
| mode.color.status.custom.purple.hover | {core.color.plum.30} | used on pill hover states |
| mode.color.status.custom.purple.hoverAlt | {core.color.plum.90} | used on pill hover states |
| mode.color.status.custom.red.default | {core.color.blush.40} | For pills. Not accessible with white txt. |
| mode.color.status.custom.red.defaultAlt | {core.color.blush.95} | Pill bg |
| mode.color.status.custom.red.hover | {core.color.blush.30} | used on pill hover states |
| mode.color.status.custom.red.hoverAlt | {core.color.blush.90} | used on pill hover states |
| mode.color.status.custom.slate.default | {core.color.storm.65} | For pills. Not accessible with white txt. |
| mode.color.status.custom.slate.defaultAlt | {core.color.storm.95} | Pill bg |
| mode.color.status.custom.slate.hover | {core.color.storm.60} | used on pill hover states |
| mode.color.status.custom.slate.hoverAlt | {core.color.storm.90} | used on pill hover states |
| mode.color.status.custom.teal.default | {core.color.petrol.40} | For pills. Not accessible with white txt. |
| mode.color.status.custom.teal.defaultAlt | {core.color.petrol.95} | Pill bg |
| mode.color.status.custom.teal.hover | {core.color.petrol.30} | used on pill hover states |
| mode.color.status.custom.teal.hoverAlt | {core.color.petrol.90} | used on pill hover states |
| mode.color.status.inactive.inverse.default | {mode.color.generic.fg.inverse.firm} | For readonly pill bg and border |
| mode.color.status.inactive.inverse.withDefault | {mode.color.generic.txt.inverse.soft} | For readonly filled pill txt |
| mode.color.status.inactive.default | {mode.color.generic.fg.firm} | For readonly pill bg and border |
| mode.color.status.inactive.withDefault | {mode.color.generic.txt.soft} | For readonly filled pill txt |
| mode.color.status.info.inverse.default | {core.color.azure.60} | |
| mode.color.status.info.inverse.defaultAlt | {core.color.azure.5} | Subtle message bg |
| mode.color.status.info.inverse.hover | {core.color.azure.70} | used on pill hover states |
| mode.color.status.info.inverse.hoverAlt | {core.color.azure.10} | used on pill hover states and message bg |
| mode.color.status.info.default | {core.color.azure.40} | |
| mode.color.status.info.defaultAlt | {core.color.azure.95} | Subtle message bg |
| mode.color.status.info.hover | {core.color.azure.30} | used on pill hover states |
| mode.color.status.info.hoverAlt | {core.color.azure.90} | used on pill hover states and message bg |
| mode.color.status.negative.inverse.default | {core.color.blush.60} | |
| mode.color.status.negative.inverse.defaultAlt | {core.color.blush.5} | Subtle message bg |
| mode.color.status.negative.inverse.hover | {core.color.blush.70} | used on pill hover states |
| mode.color.status.negative.inverse.hoverAlt | {core.color.blush.10} | used on pill hover states and message bg |
| mode.color.status.negative.default | {core.color.blush.40} | |
| mode.color.status.negative.defaultAlt | {core.color.blush.95} | Subtle message bg |
| mode.color.status.negative.hover | {core.color.blush.30} | used on pill hover states |
| mode.color.status.negative.hoverAlt | {core.color.blush.90} | used on pill hover states and message bg |
| mode.color.status.neutral.inverse.default | {core.color.smoke.60} | |
| mode.color.status.neutral.inverse.defaultAlt | {core.color.smoke.5} | Subtle message bg |
| mode.color.status.neutral.inverse.hover | {core.color.smoke.70} | used on pill hover states |
| mode.color.status.neutral.inverse.hoverAlt | {core.color.smoke.10} | used on pill hover states and message bg |
| mode.color.status.neutral.default | {core.color.smoke.40} | |
| mode.color.status.neutral.defaultAlt | {core.color.smoke.95} | Subtle message bg |
| mode.color.status.neutral.hover | {core.color.smoke.30} | used on pill hover states |
| mode.color.status.neutral.hoverAlt | {core.color.smoke.90} | used on pill hover states and message bg |
| mode.color.status.positive.inverse.default | {core.color.emerald.60} | |
| mode.color.status.positive.inverse.defaultAlt | {core.color.emerald.5} | Subtle message bg |
| mode.color.status.positive.inverse.hover | {core.color.emerald.70} | used on pill hover states |
| mode.color.status.positive.inverse.hoverAlt | {core.color.emerald.10} | used on pill hover states and message bg |
| mode.color.status.positive.default | {core.color.emerald.40} | |
| mode.color.status.positive.defaultAlt | {core.color.emerald.95} | Subtle message bg |
| mode.color.status.positive.hover | {core.color.emerald.30} | used on pill hover states |
| mode.color.status.positive.hoverAlt | {core.color.emerald.90} | used on pill hover states and message bg |
| mode.color.status.priority.inverse.default | {core.color.plum.60} | For tile status keylines to show if something is of high importance. |
| mode.color.status.priority.inverse.defaultAlt | {core.color.plum.5} | Subtle message bg |
| mode.color.status.priority.inverse.hover | {core.color.plum.70} | used on pill hover states |
| mode.color.status.priority.inverse.hoverAlt | {core.color.plum.10} | used on pill hover states and message bg |
| mode.color.status.priority.default | {core.color.plum.40} | |
| mode.color.status.priority.defaultAlt | {core.color.plum.95} | Subtle message bg |
| mode.color.status.priority.hover | {core.color.plum.30} | used on pill hover states |
| mode.color.status.priority.hoverAlt | {core.color.plum.90} | used on pill hover states and message bg |
| mode.color.status.skeleton.stop-1 | {core.color.storm.40} | |
| mode.color.status.skeleton.stop-2 | {core.color.storm.80} | |
| mode.color.status.txt.inverse.withDefault | {mode.color.generic.txt.extreme} | |
| mode.color.status.txt.inverse.withDefaultAlt | {mode.color.generic.txt.inverse.severe} | |
| mode.color.status.txt.inverse.withHover | {mode.color.generic.txt.extreme} | |
| mode.color.status.txt.inverse.withHoverAlt | {mode.color.generic.txt.inverse.extreme} | |
| mode.color.status.txt.loading | {core.color.smoke.50} | used on skeleton txt |
| mode.color.status.txt.withDefault | {mode.color.generic.txt.nought} | |
| mode.color.status.txt.withDefaultAlt | {mode.color.generic.txt.severe} | |
| mode.color.status.txt.withHover | {mode.color.generic.txt.nought} | |
| mode.color.status.txt.withHoverAlt | {mode.color.generic.txt.extreme} | |
| mode.color.status.warning.inverse.default | {core.color.tangerine.60} | |
| mode.color.status.warning.inverse.defaultAlt | {core.color.tangerine.5} | Subtle message bg |
| mode.color.status.warning.inverse.hover | {core.color.tangerine.70} | used on pill hover states |
| mode.color.status.warning.inverse.hoverAlt | {core.color.tangerine.10} | used on pill hover states and message bg |
| mode.color.status.warning.inverse.txt | {core.color.tangerine.70} | |
| mode.color.status.warning.default | {core.color.tangerine.40} | |
| mode.color.status.warning.defaultAlt | {core.color.tangerine.95} | Subtle message bg |
| mode.color.status.warning.hover | {core.color.tangerine.30} | used on pill hover states |
| mode.color.status.warning.hoverAlt | {core.color.tangerine.90} | used on pill hover states and message bg |
| mode.color.status.warning.txt | {core.color.tangerine.30} | |
| mode.color.none | rgba(255, 255, 255, 0.0000) |
<code class="language-json">{
"mode": {
"color": {
"action": {
"ai": {
"active": {
"stop-1": {
"$type": "color",
"$value": "rgba(15, 214, 55, 0.1500)"
},
"stop-2": {
"$type": "color",
"$value": "rgba(0, 214, 222, 0.1500)"
},
"stop-3": {
"$type": "color",
"$value": "rgba(157, 96, 255, 0.1500)"
}
},
"hover": {
"stop-1": {
"$type": "color",
"$value": "rgba(15, 214, 55, 0.0800)"
},
"stop-2": {
"$type": "color",
"$value": "rgba(0, 214, 222, 0.0800)"
},
"stop-3": {
"$type": "color",
"$value": "rgba(157, 96, 255, 0.0800)"
}
}
},
"danger": {
"inverse": {
"active": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.blush.80}"
},
"default": {
"$type": "color",
"$value": "{core.color.blush.60}"
},
"defaultAlt": {
"$description": "For links in datatables",
"$type": "color",
"$value": "{core.color.blush.70}"
},
"hover": {
"$description": "used on solid-pill and primary-button hover states",
"$type": "color",
"$value": "{core.color.blush.70}"
},
"hoverAlt": {
"$description": "used on secondary-button hover states",
"$type": "color",
"$value": "rgba(219, 1, 78, 0.1500)"
},
"hoverAlt2": {
"$description": "used on link hover state",
"$type": "color",
"$value": "{core.color.blush.80}"
},
"withActive": {
"$type": "color",
"$value": "{core.color.white}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.white}"
}
},
"active": {
"$description": "active button on dark",
"$type": "color",
"$value": "{core.color.blush.20}"
},
"default": {
"$type": "color",
"$value": "{core.color.blush.40}"
},
"defaultAlt": {
"$description": "for links in datatables",
"$type": "color",
"$value": "{core.color.blush.30}"
},
"hover": {
"$type": "color",
"$value": "{core.color.blush.30}"
},
"hoverAlt": {
"$description": "used on secondary-button hover states",
"$type": "color",
"$value": "rgba(245, 1, 89, 0.1500)"
},
"hoverAlt2": {
"$description": "for links in datatables",
"$type": "color",
"$value": "{core.color.blush.20}"
},
"withActive": {
"$type": "color",
"$value": "{core.color.black}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.black}"
}
},
"dataEntry": {
"inverse": {
"default": {
"$description": "Input backgrounds.",
"$type": "color",
"$value": "{core.color.white}"
},
"txt": {
"$description": "Input txt",
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.severe}"
},
"txtAlt": {
"$description": "Hint txt, placeholder txt, character count etc",
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.soft}"
},
"withDefault": {
"$description": "Input borders.",
"$type": "color",
"$value": "{core.color.storm.60}"
}
},
"default": {
"$description": "Input backgrounds.",
"$type": "color",
"$value": "{core.color.black}"
},
"defaultAlt": {
"$description": "Input footer bgs (e.g txt editor)",
"$type": "color",
"$value": "{core.color.storm.90}"
},
"hoverAlt": {
"$description": "bg hover for draggable area on file input",
"$type": "color",
"$value": "{core.color.storm.95}"
},
"txt": {
"$description": "Input txt",
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
},
"txtAlt": {
"$description": "Hint txt, placeholder txt, character count etc",
"$type": "color",
"$value": "{mode.color.generic.txt.soft}"
},
"withActive": {
"$description": "checkbox tick icon or radio handle",
"$type": "color",
"$value": "{core.color.white}"
},
"withActiveAlt": {
"$type": "color",
"$value": "{core.color.black}"
},
"withDefault": {
"$description": "Input borders.",
"$type": "color",
"$value": "{core.color.storm.40}"
},
"withHover": {
"$description": "txt for draggable area on file input",
"$type": "color",
"$value": "{core.color.white}"
}
},
"focus": {
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.black}"
},
"txt": {
"$type": "color",
"$value": "{core.color.black}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.gold.50}"
},
"withDefaultAlt": {
"$type": "color",
"$value": "{core.color.gold.20}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.gold.50}"
},
"txt": {
"$type": "color",
"$value": "{core.color.white}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.black}"
},
"withDefaultAlt": {
"$type": "color",
"$value": "{core.color.gold.80}"
}
},
"grayscale": {
"inverse": {
"active": {
"$type": "color",
"$value": "{core.color.black}"
},
"activeAlt": {
"$type": "color",
"$value": "rgba(0, 0, 0, 0.1500)"
},
"default": {
"$type": "color",
"$value": "{core.color.smoke.90}"
},
"defaultAlt": {
"$description": "subtle and toggle button txt",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.6700)"
},
"hover": {
"$description": "subtle table header hover",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.1500)"
},
"hoverAlt": {
"$description": "Accordion, secondary, tertiary, menu bg on hover",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.1000)"
},
"withActive": {
"$type": "color",
"$value": "{core.color.white}"
},
"withActiveAlt": {
"$type": "color",
"$value": "{core.color.black}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.white}"
},
"withHover": {
"$type": "color",
"$value": "{core.color.black}"
}
},
"active": {
"$type": "color",
"$value": "{core.color.white}"
},
"activeAlt": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.1500)"
},
"default": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.9000)"
},
"defaultAlt": {
"$description": "subtle and toggle button txt",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.6700)"
},
"hover": {
"$description": "subtle table header hover",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.1500)"
},
"hoverAlt": {
"$description": "Accordion, secondary, tertiary, menu bg on hover",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.1000)"
},
"withActive": {
"$type": "color",
"$value": "{core.color.black}"
},
"withActiveAlt": {
"$type": "color",
"$value": "{core.color.white}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.black}"
},
"withHover": {
"$type": "color",
"$value": "{core.color.white}"
}
},
"inactive": {
"inverse": {
"default": {
"$description": "Disabled form secondary, tertiary and input borders borders.",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.3000)"
},
"txt": {
"$description": "inversed disabled txt inside buttons and form inputs.",
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.delicate}"
},
"txtAlt": {
"$description": "Disabled labels inside buttons and Switch.",
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.nought}"
}
},
"default": {
"$description": "Disabled form secondary, tertiary and input borders borders.",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.3000)"
},
"defaultAlt": {
"$description": "Disabled input and switch backgrounds. Deliberately a solid color value as opposed to alpha based so it works within switch.",
"$type": "color",
"$value": "{core.color.smoke.90}"
},
"icon": {
"$description": "Disabled icon inside buttons and form inputs.",
"$type": "color",
"$value": "{mode.color.generic.txt.delicate}"
},
"iconAlt": {
"$description": "Readonly icon inside form inputs.",
"$type": "color",
"$value": "{mode.color.generic.txt.soft}"
},
"mask": {
"$description": "full screen takeover token for modal dimmer",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.4000)"
},
"txt": {
"$description": "Disabled txt inside buttons",
"$type": "color",
"$value": "{mode.color.generic.txt.delicate}"
},
"txtAlt": {
"$type": "color",
"$value": "{mode.color.generic.txt.nought}"
}
},
"main": {
"inverse": {
"active": {
"$type": "color",
"$value": "{core.color.brand.80}"
},
"activeAlt": {
"$description": "Active color for secondary and tertiary buttons",
"$type": "color",
"$value": "rgba(0, 129, 32, 0.3000)"
},
"default": {
"$type": "color",
"$value": "{core.color.brand.60}"
},
"defaultAlt": {
"$description": "border color for secondary and tertiary buttons",
"$type": "color",
"$value": "rgba(0, 129, 32, 0.8000)"
},
"defaultAlt2": {
"$description": "default value for links",
"$type": "color",
"$value": "{core.color.brand.70}"
},
"defaultAlt3": {
"$description": "default background color of secondary button",
"$type": "color",
"$value": "rgba(0, 129, 32, 0.0300)"
},
"hover": {
"$type": "color",
"$value": "{core.color.brand.70}"
},
"hoverAlt": {
"$description": "hover for secondary and tertiary buttons",
"$type": "color",
"$value": "rgba(0, 129, 32, 0.1500)"
},
"hoverAlt2": {
"$description": "hover for links",
"$type": "color",
"$value": "{core.color.brand.80}"
},
"withActive": {
"$type": "color",
"$value": "{core.color.white}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.white}"
},
"withHover": {
"$type": "color",
"$value": "{core.color.white}"
}
},
"active": {
"$type": "color",
"$value": "{core.color.brand.20}"
},
"activeAlt": {
"$description": "Active color for inverse secondary and tertiary buttons",
"$type": "color",
"$value": "rgba(0, 241, 67, 0.3000)"
},
"default": {
"$type": "color",
"$value": "{core.color.brand.40}"
},
"defaultAlt": {
"$description": "border color for secondary and tertiary inverse buttons",
"$type": "color",
"$value": "rgba(0, 241, 67, 0.8000)"
},
"defaultAlt2": {
"$description": "default color for links",
"$type": "color",
"$value": "{core.color.brand.30}"
},
"defaultAlt3": {
"$description": "default background color of inverse secondary buttons",
"$type": "color",
"$value": "rgba(0, 241, 67, 0.0300)"
},
"hover": {
"$type": "color",
"$value": "{core.color.brand.30}"
},
"hoverAlt": {
"$description": "hover for inverse secondary and tertiary buttons",
"$type": "color",
"$value": "rgba(0, 241, 67, 0.1500)"
},
"hoverAlt2": {
"$description": "hover for links",
"$type": "color",
"$value": "{core.color.brand.20}"
},
"withActive": {
"$type": "color",
"$value": "{core.color.black}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.black}"
},
"withHover": {
"$type": "color",
"$value": "{core.color.black}"
}
},
"nav": {
"inverse": {
"active": {
"$description": "active bg for nav items",
"$type": "color",
"$value": "rgba(37, 59, 78, 0.1500)"
},
"default": {
"$description": "default bg for global nav",
"$type": "color",
"$value": "{core.color.white}"
},
"defaultAlt": {
"$description": "default bg for left nav container",
"$type": "color",
"$value": "{core.color.storm.5}"
},
"hover": {
"$description": "hover bg for nav items",
"$type": "color",
"$value": "rgba(37, 59, 78, 0.1000)"
},
"withActive": {
"$description": "txt and icons on top of active bgs in nav contxts",
"$type": "color",
"$value": "{core.color.black}"
},
"withDefault": {
"$description": "hover bg for nav items",
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.severe}"
},
"withHover": {
"$description": "hover bg for nav items",
"$type": "color",
"$value": "{core.color.black}"
}
},
"active": {
"$description": "active bg for nav items",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.1500)"
},
"default": {
"$description": "default bg for global nav",
"$type": "color",
"$value": "{core.color.black}"
},
"defaultAlt": {
"$description": "default bg for left nav container",
"$type": "color",
"$value": "{core.color.smoke.95}"
},
"hover": {
"$description": "hover bg for nav items",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.1000)"
},
"withActive": {
"$description": "txt and icons on top of active bgs in nav contxts",
"$type": "color",
"$value": "{core.color.white}"
},
"withDefault": {
"$description": "hover bg for nav items",
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
},
"withHover": {
"$description": "hover bg for nav items",
"$type": "color",
"$value": "{core.color.white}"
}
}
},
"ai": {
"alt": {
"stop-1": {
"$type": "color",
"$value": "{core.color.AI.vibrant.pea}"
},
"stop-2": {
"$type": "color",
"$value": "{core.color.AI.vibrant.aqua}"
},
"stop-3": {
"$type": "color",
"$value": "{core.color.AI.vibrant.lilac}"
}
},
"stop-1": {
"$type": "color",
"$value": "{core.color.AI.vibrant.pea}"
},
"stop-2": {
"$type": "color",
"$value": "{core.color.AI.vibrant.aqua}"
},
"stop-3": {
"$type": "color",
"$value": "{core.color.AI.vibrant.lilac}"
}
},
"brand": {
"copilot": {
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.black}"
},
"monochrome": {
"$type": "color",
"$value": "{core.color.black}"
},
"withDefault": {
"$description": "not accessible on white if it is intended to provide meaning",
"$type": "color",
"$value": "{core.color.brand.50}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.white}"
},
"monochrome": {
"$type": "color",
"$value": "{core.color.white}"
},
"withDefault": {
"$type": "color",
"$value": "{core.color.brand.50}"
}
},
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.black}"
},
"defaultAlt": {
"$type": "color",
"$value": "{core.color.black}"
},
"withDefaultAlt": {
"$type": "color",
"$value": "{core.color.white}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.brand.50}"
},
"defaultAlt": {
"$type": "color",
"$value": "{core.color.white}"
},
"withDefaultAlt": {
"$type": "color",
"$value": "{core.color.black}"
}
},
"colorcode": {
"blue": {
"deep": {
"$type": "color",
"$value": "{core.color.azure.40}"
},
"muted": {
"$type": "color",
"$value": "{core.color.azure.90}"
}
},
"gray": {
"deep": {
"$type": "color",
"$value": "{core.color.storm.40}"
},
"muted": {
"$type": "color",
"$value": "{core.color.storm.95}"
}
},
"green": {
"deep": {
"$type": "color",
"$value": "{core.color.emerald.40}"
},
"muted": {
"$type": "color",
"$value": "{core.color.emerald.90}"
}
},
"lime": {
"deep": {
"$type": "color",
"$value": "{core.color.lime.40}"
},
"muted": {
"$type": "color",
"$value": "{core.color.lime.90}"
}
},
"orange": {
"deep": {
"$type": "color",
"$value": "{core.color.tangerine.40}"
},
"muted": {
"$type": "color",
"$value": "{core.color.tangerine.90}"
}
},
"pink": {
"deep": {
"$type": "color",
"$value": "{core.color.flamingo.40}"
},
"muted": {
"$type": "color",
"$value": "{core.color.flamingo.90}"
}
},
"purple": {
"deep": {
"$type": "color",
"$value": "{core.color.plum.40}"
},
"muted": {
"$type": "color",
"$value": "{core.color.plum.90}"
}
},
"red": {
"deep": {
"$type": "color",
"$value": "{core.color.blush.40}"
},
"muted": {
"$type": "color",
"$value": "{core.color.blush.90}"
}
},
"slate": {
"deep": {
"$type": "color",
"$value": "{core.color.pewter.40}"
},
"muted": {
"$type": "color",
"$value": "{core.color.pewter.90}"
}
},
"teal": {
"deep": {
"$type": "color",
"$value": "{core.color.petrol.40}"
},
"muted": {
"$type": "color",
"$value": "{core.color.petrol.90}"
}
}
},
"generic": {
"bg": {
"inverse": {
"delicate": {
"$type": "color",
"$value": "{core.color.storm.10}"
},
"extreme": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.black}"
},
"faint": {
"$type": "color",
"$value": "{core.color.storm.5}"
},
"firm": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.storm.25}"
},
"harsh": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.storm.30}"
},
"moderate": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.storm.20}"
},
"nought": {
"$type": "color",
"$value": "{core.color.white}"
},
"severe": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.storm.35}"
},
"soft": {
"$type": "color",
"$value": "{core.color.storm.15}"
}
},
"delicate": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.1000)"
},
"extreme": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.white}"
},
"faint": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.0500)"
},
"firm": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.2500)"
},
"harsh": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.3000)"
},
"moderate": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.2000)"
},
"nought": {
"$type": "color",
"$value": "{core.color.black}"
},
"severe": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.3500)"
},
"soft": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.1500)"
}
},
"fg": {
"inverse": {
"delicate": {
"$description": "table dividers and borders",
"$type": "color",
"$value": "{core.color.storm.10}"
},
"extreme": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.black}"
},
"firm": {
"$type": "color",
"$value": "{core.color.storm.60}"
},
"moderate": {
"$type": "color",
"$value": "{core.color.storm.50}"
},
"nought": {
"$type": "color",
"$value": "{core.color.white}"
},
"soft": {
"$description": "table dividers and borders",
"$type": "color",
"$value": "{core.color.storm.40}"
}
},
"delicate": {
"$description": "table dividers and borders",
"$type": "color",
"$value": "{core.color.smoke.90}"
},
"extreme": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.white}"
},
"firm": {
"$type": "color",
"$value": "{core.color.smoke.60}"
},
"moderate": {
"$type": "color",
"$value": "{core.color.smoke.70}"
},
"nought": {
"$type": "color",
"$value": "{core.color.black}"
},
"soft": {
"$description": "table dividers and borders",
"$type": "color",
"$value": "{core.color.smoke.80}"
}
},
"surface": {
"faint": {
"$description": "used on full page backgrounds as an alternative option",
"$type": "color",
"$value": "{core.color.storm.95}"
},
"nought": {
"$description": "used on full page backgrounds",
"$type": "color",
"$value": "{core.color.black}"
}
},
"txt": {
"inverse": {
"delicate": {
"$description": "accessible OBJECT against white.",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.4200)"
},
"extreme": {
"$type": "color",
"$value": "{core.color.black}"
},
"faint": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.3000)"
},
"moderate": {
"$type": "color",
"$value": "rgba(0, 0, 0, 0.6700)"
},
"nought": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.white}"
},
"severe": {
"$type": "color",
"$value": "rgba(0, 0, 0, 0.9500)"
},
"soft": {
"$description": "was 0.5. Increased to 0.55 so that we can use this for hint txt etc too, and still be accessible.",
"$type": "color",
"$value": "rgba(0, 0, 0, 0.5500)"
}
},
"delicate": {
"$description": "accessible OBJECT against white.",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.4200)"
},
"extreme": {
"$type": "color",
"$value": "{core.color.white}"
},
"faint": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.3000)"
},
"moderate": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.6700)"
},
"nought": {
"$description": "deprecation candidate",
"$type": "color",
"$value": "{core.color.black}"
},
"severe": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.9500)"
},
"soft": {
"$description": "was 0.5. Increased to 0.55 so that we can use this for hint txt etc too, and still be accessible.",
"$type": "color",
"$value": "rgba(255, 255, 255, 0.5500)"
}
}
},
"status": {
"ai": {
"default": {
"$type": "color",
"$value": "{mode.color.generic.bg.nought}"
},
"defaultAlt": {
"$description": "bg for contxtual message comp",
"$type": "color",
"$value": "{mode.color.generic.bg.extreme}"
}
},
"callout": {
"defaultAlt": {
"$description": "used for marketing banners",
"$type": "color",
"$value": "{core.color.brand.95}"
},
"hoverAlt": {
"$description": "marketing banner hover",
"$type": "color",
"$value": "{core.color.brand.90}"
}
},
"custom": {
"blue": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.azure.40}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.azure.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.azure.30}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.azure.90}"
}
},
"gray": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.smoke.40}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.smoke.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.smoke.30}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.smoke.90}"
}
},
"green": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.emerald.40}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.emerald.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.emerald.30}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.emerald.90}"
}
},
"lime": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.lime.40}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.lime.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.lime.30}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.lime.90}"
}
},
"orange": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.tangerine.40}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.tangerine.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.tangerine.30}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.tangerine.90}"
},
"txt": {
"$description": "used in portrait",
"$type": "color",
"$value": "{core.color.tangerine.40}"
}
},
"pink": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.flamingo.40}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.flamingo.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.flamingo.30}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.flamingo.90}"
}
},
"purple": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.plum.40}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.plum.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.plum.30}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.plum.90}"
}
},
"red": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.blush.40}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.blush.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.blush.30}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.blush.90}"
}
},
"slate": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.storm.65}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.storm.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.storm.60}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.storm.90}"
}
},
"teal": {
"default": {
"$description": "For pills. Not accessible with white txt.",
"$type": "color",
"$value": "{core.color.petrol.40}"
},
"defaultAlt": {
"$description": "Pill bg",
"$type": "color",
"$value": "{core.color.petrol.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.petrol.30}"
},
"hoverAlt": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.petrol.90}"
}
}
},
"inactive": {
"inverse": {
"default": {
"$description": "For readonly pill bg and border",
"$type": "color",
"$value": "{mode.color.generic.fg.inverse.firm}"
},
"withDefault": {
"$description": "For readonly filled pill txt",
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.soft}"
}
},
"default": {
"$description": "For readonly pill bg and border",
"$type": "color",
"$value": "{mode.color.generic.fg.firm}"
},
"withDefault": {
"$description": "For readonly filled pill txt",
"$type": "color",
"$value": "{mode.color.generic.txt.soft}"
}
},
"info": {
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.azure.60}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.azure.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.azure.70}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.azure.10}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.azure.40}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.azure.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.azure.30}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.azure.90}"
}
},
"negative": {
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.blush.60}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.blush.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.blush.70}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.blush.10}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.blush.40}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.blush.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.blush.30}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.blush.90}"
}
},
"neutral": {
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.smoke.60}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.smoke.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.smoke.70}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.smoke.10}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.smoke.40}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.smoke.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.smoke.30}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.smoke.90}"
}
},
"positive": {
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.emerald.60}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.emerald.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.emerald.70}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.emerald.10}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.emerald.40}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.emerald.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.emerald.30}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.emerald.90}"
}
},
"priority": {
"inverse": {
"default": {
"$description": "For tile status keylines to show if something is of high importance.",
"$type": "color",
"$value": "{core.color.plum.60}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.plum.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.plum.70}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.plum.10}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.plum.40}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.plum.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.plum.30}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.plum.90}"
}
},
"skeleton": {
"stop-1": {
"$type": "color",
"$value": "{core.color.storm.40}"
},
"stop-2": {
"$type": "color",
"$value": "{core.color.storm.80}"
}
},
"txt": {
"inverse": {
"withDefault": {
"$type": "color",
"$value": "{mode.color.generic.txt.extreme}"
},
"withDefaultAlt": {
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.severe}"
},
"withHover": {
"$type": "color",
"$value": "{mode.color.generic.txt.extreme}"
},
"withHoverAlt": {
"$type": "color",
"$value": "{mode.color.generic.txt.inverse.extreme}"
}
},
"loading": {
"$description": "used on skeleton txt",
"$type": "color",
"$value": "{core.color.smoke.50}"
},
"withDefault": {
"$type": "color",
"$value": "{mode.color.generic.txt.nought}"
},
"withDefaultAlt": {
"$type": "color",
"$value": "{mode.color.generic.txt.severe}"
},
"withHover": {
"$type": "color",
"$value": "{mode.color.generic.txt.nought}"
},
"withHoverAlt": {
"$type": "color",
"$value": "{mode.color.generic.txt.extreme}"
}
},
"warning": {
"inverse": {
"default": {
"$type": "color",
"$value": "{core.color.tangerine.60}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.tangerine.5}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.tangerine.70}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.tangerine.10}"
},
"txt": {
"$type": "color",
"$value": "{core.color.tangerine.70}"
}
},
"default": {
"$type": "color",
"$value": "{core.color.tangerine.40}"
},
"defaultAlt": {
"$description": "Subtle message bg",
"$type": "color",
"$value": "{core.color.tangerine.95}"
},
"hover": {
"$description": "used on pill hover states",
"$type": "color",
"$value": "{core.color.tangerine.30}"
},
"hoverAlt": {
"$description": "used on pill hover states and message bg",
"$type": "color",
"$value": "{core.color.tangerine.90}"
},
"txt": {
"$type": "color",
"$value": "{core.color.tangerine.30}"
}
}
},
"none": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.0000)"
}
}
}
}</code>| Date | Changes |
|---|---|
| November 2024 | Mode token tables added. |
| 17 January 2025 | Mode token tables updated. |