@iress-oss/ids-mcp-server 5.15.0 → 5.20.1

package/generated/docs/themes-tokens-docs.md

@@ -1,1200 +0,0 @@
-[](#tokens)Tokens
-=================
-
-Design tokens are an integral part of the design system. They help us create consistency across components and simplify our theming ecosystem.
-
-[](#what-are-tokens)What are tokens?
-------------------------------------
-
-Tokens are a set of variables that define the design properties of a component. They are used to define the visual properties of a component, such as colours, typography, spacing, and more.
-
-Upcoming changes to tokens
---------------------------
-
-IDS is introducing a new token system to simplify the design token structure.
-
-To minimise the number of tokens, we have stripped out the majority of semantic conventions and use more brand-related tokens, as these are easier to use and the only ones likely to change between themes. Due to this change, we have reduced the number of tokens from 1000+ to 103 tokens.
-
-This is to ensure it is easier to use and maintain a consistent experience across all Iress products.
-
-[](#how-to-use-the-tokens)How to use the tokens
------------------------------------------------
-
-You can use the tokens directly by using the `theme` object from `@iress/ids-themes`.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-import { theme } from '@iress/ids-themes';
-<div style\={{ color: theme.colour.primary.text }}\>I am branded text</div\>;
-
-Copy
-
-[](#token-list)Token list
--------------------------
-
-The table below shows all the new and old tokens in the design system. Use the filters to narrow down the list of tokens.
-
-Columns: 2 selected
-
-labeldescription
-
-* * *
-
-typedefaultValuedeprecatedreadonly
-
-None selected
-
-Tokens (1127)
-| Name
- | Description
-
- |
-| --- | --- |
-| g.page.background.color | Page background colour |
-| g.inactive.color | Inactive state colour |
-| g.inactive.contrast.color | Inactive state contrast colour |
-| g.background.color | Default background colour |
-| g.background.colorAlt | Alt background colour |
-| g.small.border.radius | Border radius - small |
-| g.border.radius | Border radius |
-| g.border.width | Border width |
-| g.border.color | Border colour |
-| g.form.border.color | Form elements border colour |
-| g.primary.color | Primary colour |
-| g.primary.contrast.color | Primary contrast colour |
-| g.primary.hover.color | Primary colour (hover) |
-| g.box.shadow.color | Box shadow colour |
-| g.hover.background.color | Hover state background colour |
-| g.hover.text.color | Hover state text colour |
-| g.focus.width | Global focus width |
-| g.focus.color | Global focus colour |
-| g.spacing.rem | Spacing |
-| g.spacing.xs | Spacing (xs) |
-| g.spacing.sm | Spacing (sm) |
-| g.spacing.md | Spacing (md) |
-| g.spacing.lg | Spacing (lg) |
-| g.spacing.xl | Spacing (xl) |
-| g.spacing.ratio.xs | Xs spacing ratio |
-| g.spacing.ratio.sm | Sm spacing ratio |
-| g.spacing.ratio.md | Md spacing ratio |
-| g.spacing.ratio.lg | Lg spacing ratio |
-| g.spacing.ratio.xl | Xl spacing ratio |
-| g.danger.color | Danger colour |
-| g.danger.contrast.color | Danger contrast colour |
-| g.info.color | Info colour |
-| g.info.contrast.color | Info contrast colour |
-| g.success.color | Success colour |
-| g.success.contrast.color | Success contrast colour |
-| g.warning.color | Warning colour |
-| g.warning.contrast.color | Warning contrast colour |
-| g.positive.color | Positive colour |
-| g.positive.contrast.color | Positive contrast colour |
-| g.negative.color | Negative colour |
-| g.negative.contrast.color | Negative contrast colour |
-| g.font.family | Font family |
-| g.font.weight | Font weight |
-| g.font.size.rem | Font size |
-| g.font.size.xxxs | Font size (xxxs) |
-| g.font.size.xxs | Font size (xxs) |
-| g.font.size.xs | Font size (xs) |
-| g.font.size.sm | Font size (sm) |
-| g.font.size.md | Font size (md) |
-| g.font.size.lg | Font size (lg) |
-| g.font.size.xl | Font size (xl) |
-| g.font.size.xxl | Font size (xxl) |
-| g.font.size.xxxl | Font size (xxxl) |
-| g.font.size.xxxxl | Font size (xxxxl) |
-| g.heading.font.weight | Heading font weight |
-| g.label.font.weight | Label font weight |
-| g.line.height | Global line height |
-| g.link.text.color | Link text colour |
-| g.muted.text.color | Muted text colour |
-| g.text.color | Text colour |
-| g.transition.hover.duration | Global transition hover duration |
-| g.transition.hover.type | Global transition hover type |
-| g.animation.duration | Global animation duration |
-| g.animation.type | Global animation type |
-| a.button.border.radius | Button border radius |
-| a.button.border.width | Alias border width for buttons |
-| a.layout.background.color | Layout background colour |
-| a.layout.hover.text.color | Alias for layout components text colour in hover state |
-| a.layout.hover.background.color | Alias for layout components background colour in hover state |
-| a.form.background.color | Form elements background colour |
-| a.form.border.radius | Form elements border radius |
-| a.form.border.width | Alias border width for forms |
-| a.form.font.family | Alias token for form element font family |
-| a.form.line.height | Alias token for form element line height |
-| a.form.hover.text.color | Alias for form element text colour in hover state |
-| a.form.hover.background.color | Alias for form element background colour in hover state |
-| a.label.text.color | Label text colour |
-| a.active.background.color | Active state background colour |
-| a.active.border.color | Active state border colour |
-| a.active.contrast.color | Active state text colour |
-| a.active.hover.background.color | Active state background colour (hover) |
-| a.active.hover.border.color | Active state border colour (hover) |
-| a.horizontal.spacing.xs | Horizontal spacing (xs) |
-| a.horizontal.spacing.sm | Horizontal spacing (sm) |
-| a.horizontal.spacing.md | Horizontal spacing (md) |
-| a.horizontal.spacing.lg | Horizontal spacing (lg) |
-| a.horizontal.spacing.xl | Horizontal spacing (xl) |
-| a.vertical.spacing.xs | Vertical spacing (xs) |
-| a.vertical.spacing.sm | Vertical spacing (sm) |
-| a.vertical.spacing.md | Vertical spacing (md) |
-| a.vertical.spacing.lg | Vertical spacing (lg) |
-| a.vertical.spacing.xl | Vertical spacing (xl) |
-| a.danger.text.color | Alias token for danger text color |
-| a.danger.background.color | Alias token for danger background color |
-| a.danger.border.color | Alias token for danger border color |
-| a.danger.hover.background.color | Danger background colour (hover) |
-| a.danger.hover.text.color | Danger text colour (hover) |
-| a.warning.text.color | Alias token for warning text color |
-| a.warning.background.color | Alias token for warning background color |
-| a.warning.border.color | Alias token for warning border color |
-| a.warning.hover.background.color | Warning background colour (hover) |
-| a.warning.hover.text.color | Warning text colour (hover) |
-| a.success.text.color | Alias token for success text color |
-| a.success.background.color | Alias token for success background color |
-| a.success.border.color | Alias token for success border color |
-| a.success.hover.background.color | Success background colour (hover) |
-| a.success.hover.text.color | Success text colour (hover) |
-| a.info.text.color | Alias token for info text color |
-| a.info.background.color | Alias token for info background color |
-| a.info.border.color | Alias token for info border color |
-| a.info.hover.background.color | Info background colour (hover) |
-| a.info.hover.text.color | Info text colour (hover) |
-| a.negative.background.color | Alias token for negative background color |
-| a.negative.border.color | Alias token for negative border color |
-| a.negative.hover.background.color | Negative background colour (hover) |
-| a.negative.hover.text.color | Negative text colour (hover) |
-| a.negative.text.color | Alias token for negative text color |
-| a.positive.background.color | Alias token for positive background color |
-| a.positive.border.color | Alias token for positive border color |
-| a.positive.hover.background.color | Positive background colour (hover) |
-| a.positive.hover.text.color | Positive text colour (hover) |
-| a.positive.text.color | Alias token for positive text color |
-| a.heading.text.color | Heading text colour |
-| a.heading.font.family | Heading font family |
-| a.display.text.color | Display text colour |
-| a.display.font.weight | Display text font weight |
-| a.display.font.family | Display text font family |
-| a.lead.font.weight | Lead text font weight |
-| a.lead.text.color | Lead text colour |
-| a.link.hover.text.color | Link text colour (hover) |
-| a.link.active.text.color | Link text colour (active) |
-| a.muted.font.weight | Muted text font weight |
-| alert.font.size | Alert font size |
-| alert.font.weight | Alert font weight |
-| alert.font.family | Alert font family |
-| alert.text.color | Alert text color |
-| alert.heading.font.family | Alert heading font family |
-| alert.heading.font.size | Alert heading font size |
-| alert.heading.font.weight | Alert heading font weight |
-| alert.heading.margin.bottom | Alert bottom margin on the alert heading |
-| alert.heading.margin.right | Alert right margin on the alert heading |
-| alert.border.left.width | Alert left border width |
-| alert.border.right.width | Alert right border width |
-| alert.border.top.width | Alert top border width |
-| alert.border.bottom.width | Alert bottom border width |
-| alert.border.radius | Alert border radius |
-| alert.padding.x | Alert horizontal padding |
-| alert.padding.y | Alert vertical padding |
-| alert.margin.bottom | Alert bottom margin |
-| alert.background.color | Alert background color |
-| alert.danger.text.color | Alert text color (danger) |
-| alert.danger.background.color | Alert background color (danger) |
-| alert.danger.border.color | Alert border color (danger) |
-| alert.danger.heading.text.color | Alert heading text color (danger) |
-| alert.info.text.color | Alert text color (info) |
-| alert.info.background.color | Alert background color (info) |
-| alert.info.border.color | Alert border color (info) |
-| alert.info.heading.text.color | Alert heading text color (info) |
-| alert.success.text.color | Alert text color (success) |
-| alert.success.background.color | Alert background color (success) |
-| alert.success.border.color | Alert border color (success) |
-| alert.success.heading.text.color | Alert heading text color (success) |
-| alert.warning.text.color | Alert text color (warning) |
-| alert.warning.background.color | Alert background color (warning) |
-| alert.warning.border.color | Alert border color (warning) |
-| alert.warning.heading.text.color | Alert heading text color (warning) |
-| backdrop.background.color | Backdrop background Color |
-| backdrop.opacity | Backdrop opacity |
-| backdrop.transition.duration | Backdrop enter/exit transition duration |
-| backdrop.transition.type | Backdrop enter/exit transition type |
-| badge.font.size | Badge font size |
-| badge.font.family | Badge font family |
-| badge.font.weight | Badge font weight |
-| badge.border.radius | Badge border radius |
-| badge.border.width | Badge border width |
-| badge.size | Badge size |
-| badge.padding.x | Badge horizontal padding |
-| badge.padding.y | Badge vertical padding |
-| badge.success.background.color | Badge success background color |
-| badge.success.border.color | Badge success border color |
-| badge.success.text.color | Badge success text color |
-| badge.warning.background.color | Badge warning background color |
-| badge.warning.border.color | Badge warning border color |
-| badge.warning.text.color | Badge warning text color |
-| badge.danger.background.color | Badge danger background color |
-| badge.danger.border.color | Badge danger border color |
-| badge.danger.text.color | Badge danger text color |
-| badge.info.background.color | Badge info background color |
-| badge.info.border.color | Badge info border color |
-| badge.info.text.color | Badge info text color |
-| badge.negative.background.color | Badge negative background color |
-| badge.negative.border.color | Badge negative border color |
-| badge.negative.text.color | Badge negative text color |
-| badge.positive.background.color | Badge positive background color |
-| badge.positive.border.color | Badge positive border color |
-| badge.positive.text.color | Badge positive text color |
-| badge.transparent.background.color | Badge transparent background color |
-| badge.transparent.border.color | Badge transparent border color |
-| badge.transparent.text.color | Badge transparent text color |
-| badge.default.background.color | Badge default background color |
-| badge.default.border.color | Badge default border color |
-| badge.default.text.color | Badge default text color |
-| badge.alt.background.color | Badge background-alt background color |
-| badge.alt.border.color | Badge background-alt border color |
-| badge.alt.text.color | Badge background-alt text color |
-| buttonGroup.background.color | ButtonGroup background colour |
-| buttonGroup.padding | ButtonGroup padding |
-| buttonGroup.border.radius | ButtonGroup border radius |
-| buttonGroup.border.width | ButtonGroup border width |
-| buttonGroup.border.color | ButtonGroup border colour |
-| buttonGroup.label.font.family | Button Group label text font family |
-| buttonGroup.label.font.size | Button Group label text font size |
-| buttonGroup.label.font.weight | Button Group label text font weight |
-| buttonGroup.label.text.color | Button Group label text color |
-| buttonGroup.label.margin.bottom | ButtonGroup label margin bottom |
-| buttonGroup.button.border.width | ButtonGroup button border width |
-| buttonGroup.button.border.radius | ButtonGroup button border radius |
-| buttonGroup.button.padding.x | ButtonGroup button horizontal padding |
-| buttonGroup.button.padding.y | ButtonGroup button vertical padding |
-| buttonGroup.button.min.height | ButtonGroup button minimum height |
-| buttonGroup.button.margin.right | ButtonGroup button right margin |
-| buttonGroup.button.inactive.background.color | ButtonGroup inactive button background color |
-| buttonGroup.button.inactive.text.color | ButtonGroup inactive button text color |
-| buttonGroup.button.inactive.border.color | ButtonGroup inactive button border color |
-| buttonGroup.button.inactive.hover.background.color | ButtonGroup inactive button background color in hover state |
-| buttonGroup.button.inactive.hover.text.color | ButtonGroup inactive button text color in hover state |
-| buttonGroup.button.inactive.active.background.color | ButtonGroup inactive button background color in active state |
-| buttonGroup.button.inactive.active.text.color | ButtonGroup inactive button text color in active state |
-| buttonGroup.button.active.background.color | ButtonGroup active button background color |
-| buttonGroup.button.active.text.color | ButtonGroup active button text color |
-| buttonGroup.button.active.border.color | ButtonGroup active button border color |
-| buttonGroup.button.active.hover.background.color | ButtonGroup active button background color in hover state |
-| buttonGroup.button.active.hover.text.color | ButtonGroup active button text color in hover state |
-| buttonGroup.button.active.active.background.color | ButtonGroup active button background color in active state |
-| buttonGroup.button.active.active.text.color | ButtonGroup active button text color in active state |
-| button.border.width | Button border width |
-| button.border.radius | Button border radius |
-| button.font.family | Button font family |
-| button.font.size | Button font size |
-| button.font.weight | Button font weight |
-| button.line.height | Button line height |
-| button.padding.x | Button horizontal padding |
-| button.padding.y | Button vertical padding |
-| button.transition.hover.type | Button hover transition type |
-| button.transition.hover.duration | Button hover transition duration |
-| button.animation.active | Button active animation |
-| button.slot.margin.x | Button horizontal margin between named slot and default |
-| button.primary.background.color | Button primary background colour |
-| button.primary.background.image | Button primary background image |
-| button.primary.box.shadow.size | Button primary box shadow size |
-| button.primary.box.shadow.color | Button primary box shadow color |
-| button.primary.border.color | Button primary border colour |
-| button.primary.text.color | Button primary text colour |
-| button.primary.text.decoration | Button primary text-decoration |
-| button.primary.hover.background.color | Button primary background colour (hover) |
-| button.primary.hover.background.image | Button primary background image (hover) |
-| button.primary.hover.text.color | Button primary text colour (hover) |
-| button.primary.hover.text.decoration | Button primary text-decoration (hover) |
-| button.primary.hover.box.shadow.size | Button primary box shadow size (hover) |
-| button.primary.hover.box.shadow.color | Button primary box shadow color (hover) |
-| button.primary.hover.border.color | Button primary border colour (hover) |
-| button.primary.active.background.color | Button primary background color (active) |
-| button.primary.active.background.image | Button primary background image (active) |
-| button.primary.active.text.color | Button primary text color (active) |
-| button.primary.active.text.decoration | Button primary text decoration (active) |
-| button.primary.active.box.shadow.size | Button primary box shadow size (active) |
-| button.primary.active.box.shadow.color | Button primary box shadow color (active) |
-| button.primary.active.border.color | Button primary border color (active) |
-| button.secondary.background.color | Button secondary background colour |
-| button.secondary.background.image | Button secondary background image |
-| button.secondary.box.shadow.size | Button secondary box shadow size |
-| button.secondary.box.shadow.color | Button secondary box shadow color |
-| button.secondary.border.color | Button secondary border colour |
-| button.secondary.text.color | Button secondary text colour |
-| button.secondary.text.decoration | Button secondary text-decoration |
-| button.secondary.hover.background.color | Button secondary background colour (hover) |
-| button.secondary.hover.background.image | Button secondary background image (hover) |
-| button.secondary.hover.text.color | Button secondary text colour (hover) |
-| button.secondary.hover.text.decoration | Button secondary text-decoration (hover) |
-| button.secondary.hover.box.shadow.size | Button secondary box shadow size (hover) |
-| button.secondary.hover.box.shadow.color | Button secondary box shadow color (hover) |
-| button.secondary.hover.border.color | Button secondary border colour (hover) |
-| button.secondary.active.background.color | Button secondary background color (active) |
-| button.secondary.active.background.image | Button secondary background image (active) |
-| button.secondary.active.text.color | Button secondary text color (active) |
-| button.secondary.active.text.decoration | Button secondary text decoration (active) |
-| button.secondary.active.box.shadow.size | Button secondary box shadow size (active) |
-| button.secondary.active.box.shadow.color | Button secondary box shadow color (active) |
-| button.secondary.active.border.color | Button secondary border color (active) |
-| button.tertiary.background.color | Button tertiary background colour |
-| button.tertiary.background.image | Button tertiary background image |
-| button.tertiary.box.shadow.size | Button tertiary box shadow size |
-| button.tertiary.box.shadow.color | Button tertiary box shadow color |
-| button.tertiary.border.color | Button tertiary border colour |
-| button.tertiary.text.color | Button tertiary text colour |
-| button.tertiary.text.decoration | Button tertiary text-decoration |
-| button.tertiary.hover.background.color | Button tertiary background colour (hover) |
-| button.tertiary.hover.background.image | Button tertiary background image (hover) |
-| button.tertiary.hover.text.color | Button tertiary text colour (hover) |
-| button.tertiary.hover.text.decoration | Button tertiary text-decoration (hover) |
-| button.tertiary.hover.box.shadow.size | Button tertiary box shadow size (hover) |
-| button.tertiary.hover.box.shadow.color | Button tertiary box shadow color (hover) |
-| button.tertiary.hover.border.color | Button tertiary border colour (hover) |
-| button.tertiary.active.background.color | Button tertiary background color (active) |
-| button.tertiary.active.background.image | Button tertiary background image (active) |
-| button.tertiary.active.text.color | Button tertiary text color (active) |
-| button.tertiary.active.text.decoration | Button tertiary text decoration (active) |
-| button.tertiary.active.box.shadow.size | Button tertiary box shadow size (active) |
-| button.tertiary.active.box.shadow.color | Button tertiary box shadow color (active) |
-| button.tertiary.active.border.color | Button tertiary border color (active) |
-| button.link.background.color | Button link background color |
-| button.link.background.image | Button link background image |
-| button.link.box.shadow.size | Button link box shadow size |
-| button.link.box.shadow.color | Button link box shadow color |
-| button.link.border.color | Button link border color |
-| button.link.text.color | Button link text color |
-| button.link.text.decoration | Button link text-decoration |
-| button.link.hover.background.color | Button link background color (hover) |
-| button.link.hover.background.image | Button link background image (hover) |
-| button.link.hover.text.color | Button link text color (hover) |
-| button.link.hover.text.decoration | Button link text-decoration (hover) |
-| button.link.hover.box.shadow.size | Button link box shadow size (hover) |
-| button.link.hover.box.shadow.color | Button link box shadow color (hover) |
-| button.link.hover.border.color | Button link border color (hover) |
-| button.link.active.background.color | Button link background color (active) |
-| button.link.active.background.image | Button link background image (active) |
-| button.link.active.text.color | Button link text color (active) |
-| button.link.active.text.decoration | Button link text decoration (active) |
-| button.link.active.box.shadow.size | Button link box shadow size (active) |
-| button.link.active.box.shadow.color | Button link box shadow color (active) |
-| button.link.active.border.color | Button link border color (active) |
-| button.danger.background.color | Button danger background color |
-| button.danger.background.image | Button danger background image |
-| button.danger.box.shadow.size | Button danger box shadow size |
-| button.danger.box.shadow.color | Button danger box shadow color |
-| button.danger.border.color | Button danger border color |
-| button.danger.text.color | Button danger text color |
-| button.danger.text.decoration | Button danger text-decoration |
-| button.danger.hover.background.color | Button danger background color (hover) |
-| button.danger.hover.background.image | Button danger background image (hover) |
-| button.danger.hover.text.color | Button danger text color (hover) |
-| button.danger.hover.text.decoration | Button danger text-decoration (hover) |
-| button.danger.hover.box.shadow.size | Button danger box shadow size (hover) |
-| button.danger.hover.box.shadow.color | Button danger box shadow color (hover) |
-| button.danger.hover.border.color | Button danger border color (hover) |
-| button.danger.active.background.color | Button danger background color (active) |
-| button.danger.active.background.image | Button danger background image (active) |
-| button.danger.active.text.color | Button danger text color (active) |
-| button.danger.active.text.decoration | Button danger text decoration (active) |
-| button.danger.active.box.shadow.size | Button danger box shadow size (active) |
-| button.danger.active.box.shadow.color | Button danger box shadow color (active) |
-| button.danger.active.border.color | Button danger border color (active) |
-| button.positive.background.color | Button positive background color |
-| button.positive.background.image | Button positive background image |
-| button.positive.box.shadow.size | Button positive box shadow size |
-| button.positive.box.shadow.color | Button positive box shadow color |
-| button.positive.border.color | Button positive border color |
-| button.positive.text.color | Button positive text color |
-| button.positive.text.decoration | Button positive text-decoration |
-| button.positive.hover.background.color | Button positive background color (hover) |
-| button.positive.hover.background.image | Button positive background image (hover) |
-| button.positive.hover.text.color | Button positive text color (hover) |
-| button.positive.hover.text.decoration | Button positive text-decoration (hover) |
-| button.positive.hover.box.shadow.size | Button positive box shadow size (hover) |
-| button.positive.hover.box.shadow.color | Button positive box shadow color (hover) |
-| button.positive.hover.border.color | Button positive border color (hover) |
-| button.positive.active.background.color | Button positive background color (active) |
-| button.positive.active.background.image | Button positive background image (active) |
-| button.positive.active.text.color | Button positive text color (active) |
-| button.positive.active.text.decoration | Button positive text decoration (active) |
-| button.positive.active.box.shadow.size | Button positive box shadow size (active) |
-| button.positive.active.box.shadow.color | Button positive box shadow color (active) |
-| button.positive.active.border.color | Button positive border color (active) |
-| button.negative.background.color | Button negative background color |
-| button.negative.background.image | Button negative background image |
-| button.negative.box.shadow.size | Button negative box shadow size |
-| button.negative.box.shadow.color | Button negative box shadow color |
-| button.negative.border.color | Button negative border color |
-| button.negative.text.color | Button negative text color |
-| button.negative.text.decoration | Button negative text-decoration |
-| button.negative.hover.background.color | Button negative background color (hover) |
-| button.negative.hover.background.image | Button negative background image (hover) |
-| button.negative.hover.text.color | Button negative text color (hover) |
-| button.negative.hover.text.decoration | Button negative text-decoration (hover) |
-| button.negative.hover.box.shadow.size | Button negative box shadow size (hover) |
-| button.negative.hover.box.shadow.color | Button negative box shadow color (hover) |
-| button.negative.hover.border.color | Button negative border color (hover) |
-| button.negative.active.background.color | Button negative background color (active) |
-| button.negative.active.background.image | Button negative background image (active) |
-| button.negative.active.text.color | Button negative text color (active) |
-| button.negative.active.text.decoration | Button negative text decoration (active) |
-| button.negative.active.box.shadow.size | Button negative box shadow size (active) |
-| button.negative.active.box.shadow.color | Button negative box shadow color (active) |
-| button.negative.active.border.color | Button negative border color (active) |
-| card.font.family | Card font family |
-| card.font.size | Card font size |
-| card.font.weight | Card font weight |
-| card.sm.padding | Card padding small |
-| card.md.padding | Card padding medium |
-| card.lg.padding | Card padding large |
-| card.background.color | Card background colour |
-| card.clickable.background.color | Card background color clickable |
-| card.clickable.border.color | Card border color clickable |
-| card.clickable.box.shadow.size | Card clickable box shadow size |
-| card.clickable.hover.box.shadow.size | Card clickable box shadow size in hover state |
-| card.clickable.hover.background.color | Card clickable hover background color |
-| card.clickable.hover.text.color | Card clickable hover text color |
-| card.clickable.text.color | Card clickable text color |
-| card.text.color | Card text color |
-| card.border.radius | Card border radius |
-| card.border.color | Card border color |
-| card.border.width | Card border width |
-| card.selected.border.color | Card border color for selected card |
-| card.box.shadow.size | Card box shadow size |
-| card.box.shadow.color | Card box shadow color |
-| card.transition.hover.type | Card transition timing function |
-| card.transition.hover.duration | Card transition duration |
-| card.heading.font.family | Card heading font family |
-| card.heading.font.weight | Card heading font weight |
-| card.heading.text.color | Card heading text color |
-| card.heading.link.active.text.color | Card heading link active text color |
-| card.heading.link.hover.text.color | Card heading link hover text color |
-| card.heading.link.text.color | Card heading link text color |
-| card.footer.border.width | Card footer border width |
-| card.footer.border.color | Card footer border color |
-| card.line.height | Card line height |
-| card.prepend.icon.color | Card prepended icon color |
-| card.prepend.icon.default.font.size | Card prepended icon default font size |
-| card.top.right.border.color | Top right slot border color |
-| card.top.right.hover.border.color | Card border color for top right slot in hover state |
-| checkboxGroup.inline.spacing | Checkbox group space between inline checkboxes |
-| checkbox.font.family | Checkbox font family |
-| checkbox.font.size | Checkbox font size |
-| checkbox.font.weight | Checkbox font weight |
-| checkbox.hiddenControl.label.background.color | Checkbox hidden control label background color |
-| checkbox.hiddenControl.label.border.color | Checkbox hidden control label border color |
-| checkbox.hiddenControl.label.border.width | Checkbox hidden control label border width |
-| checkbox.hiddenControl.label.border.radius | Checkbox hidden control label border radius |
-| checkbox.hiddenControl.label.hover.background.color | Checkbox hidden control label hover background color |
-| checkbox.hiddenControl.label.hover.text.color | Checkbox hidden control label hover text color |
-| checkbox.text.color | Checkbox text color |
-| checkbox.margin.bottom | Checkbox bottom margin |
-| checkbox.padding.x | Checkbox label horizontal padding |
-| checkbox.padding.y | Checkbox label vertical padding |
-| checkbox.spacing.right | Spacing between checkbox mark and label text |
-| checkbox.border.radius | Checkbox border radius |
-| checkbox.border.color | Checkbox border color |
-| checkbox.checked.border.color | Checkbox border color when checked |
-| checkbox.checked.background.color | Checkbox background color when checked |
-| checkbox.checked.hover.background.color | Checkbox background color when checked and hovered |
-| checkbox.background.color | Checkbox background color |
-| checkbox.hover.background.color | Checkbox background color when hovered |
-| checkbox.mark.color | Checkbox checked mark color |
-| checkbox.mark.hover.color | Checkbox checked mark color (hover) |
-| checkbox.size | Size of checkbox mark |
-| checkbox.line.height | Checkbox line height |
-| checkbox.label.background.color | Checkbox label background color |
-| checkbox.label.border.width | Checkbox label border width |
-| checkbox.label.border.color | Checkbox label border color |
-| checkbox.label.border.radius | Checkbox label border radius |
-| checkbox.transition.hover.type | Checkbox hover transition type |
-| checkbox.transition.hover.duration | Checkbox hover transition duration |
-| combobox.popover.max.height | Combobox maximum height of menu popover |
-| container.font.family | Container font family |
-| container.font.size | Container font size |
-| container.font.weight | Container font weight |
-| container.padding.x | Container horizontal padding |
-| container.sm.max.width | Container max width at small (568px) viewport |
-| container.md.max.width | Container max width at medium (768px) viewport |
-| container.lg.max.width | Container max width at large (1024px) viewport |
-| container.xl.max.width | Container max width at extra large (1200px >) viewport |
-| editor.background.color | Editor background color |
-| editor.border.color | Editor border color |
-| editor.border.radius | Editor border radius |
-| editor.padding.x | Editor horizontal padding |
-| editor.padding.y | Editor vertical padding |
-| editor.toolbar.background.color | Editor toolbar background color |
-| editor.toolbar.hover.background.color | Editor toolbar background color (hover) |
-| editor.toolbar.disabled.text.color | Editor toolbar disabled text color |
-| editor.toolbar.active.background.color | Editor toolbar active background color |
-| editor.toolbar.control.border.radius | Editor toolbar control/button border radius |
-| expander.activator.background.color | Expander activator background color (section mode) |
-| expander.activator.chevron.spacing.x | Expander activator chevron horizontal spacing (section mode) |
-| expander.activator.hover.background.color | Expander activator hover background color (section mode) |
-| expander.activator.hover.text.color | Expander activator hover text color (section mode) |
-| expander.activator.text.color | Expander activator text color (section mode) |
-| expander.activator.padding.top | Expander activator top padding (section mode) |
-| expander.activator.padding.bottom | Expander activator bottom padding (section mode) |
-| expander.activator.padding.left | Expander activator left padding (section mode) |
-| expander.activator.padding.right | Expander activator right padding (section mode) |
-| expander.activator.border.color | Expander activator border color (section mode) |
-| expander.activator.border.width | Expander activator border width (section mode) |
-| expander.container.padding.y | Expander container vertical padding (section mode) |
-| expander.margin.bottom | Expander margin bottom (section mode) |
-| expander.animation.duration | Expander open/close animation duration |
-| expander.animation.type | Expander open/close animation type |
-| field.line.height | Field line height |
-| field.border.left.width | Field border left |
-| field.focus.border.color | Field border color when focussed |
-| field.focus.background.color | Field background color when focussed |
-| field.margin.x | Field horizontal margin |
-| field.background.color | Field background color |
-| field.hint.text.color | Field hint text color |
-| field.hint.font.weight | Field hint font weight |
-| field.multiple.elements.label.text.color | Field text color of multi elements labels in form elements |
-| field.element.invalid.border.color | Field form element border color (invalid) |
-| field.element.invalid.focus.border.color | Field form element border color (invalid & focus) |
-| filter.utils.border.color | Filter utils border color |
-| filter.utils.border.width | Filter utils border width |
-| filter.chevron.color | Filter chevron color |
-| icon.body.text.color | Icon body text color |
-| icon.muted.text.color | Icon muted text color |
-| icon.primary.text.color | Icon primary text color |
-| icon.info.text.color | Icon info text color |
-| icon.success.text.color | Icon success text color |
-| icon.warning.text.color | Icon warning text color |
-| icon.danger.text.color | Icon danger text color |
-| icon.positive.text.color | Icon positive text color |
-| icon.negative.text.color | Icon negative text color |
-| inline.xs.gutter | Inline xs gutter |
-| inline.sm.gutter | Inline sm gutter |
-| inline.md.gutter | Inline md gutter |
-| inline.lg.gutter | Inline lg gutter |
-| inline.xl.gutter | Inline xl gutter |
-| input.font.family | Input font family |
-| input.font.size | Input font size |
-| input.font.weight | Input font weight |
-| input.background.color | Input background color |
-| input.border.width | Input border width |
-| input.border.color | Input border color |
-| input.border.radius | Input border radius |
-| input.text.color | Input text color |
-| input.focus.border.color | Input border color (focus) |
-| input.focus.text.color | Input text color (focus) |
-| input.focus.background.color | Input background color (focus) |
-| input.watermark.text.color | Input text color of watermark |
-| input.placeholder.text.color | Input text color of placeholder text |
-| input.padding.x | Input horizontal padding |
-| input.padding.y | Input vertical padding |
-| input.label.padding.bottom | Input bottom padding of multi input label |
-| input.min.height | Input minimum height |
-| input.transition.duration | Input transition duration |
-| input.transition.type | Input transition type |
-| input.addon.border.width | Input addon border width |
-| input.calendar.icon.filter | Input calendar icon filter |
-| input.readonly.background.color | Readonly input background color |
-| input.readonly.border.color | Readonly input border color |
-| input.readonly.font.size | Readonly input font size |
-| input.readonly.padding.x | Readonly input horizontal padding |
-| input.readonly.padding.y | Readonly input vertical padding |
-| label.text.color | Label text color |
-| label.font.weight | Label text font weight |
-| label.font.family | Label text font family |
-| label.font.size | Label text font size |
-| label.required.text.color | Label required text color |
-| label.optional.font.weight | Label optional text font weight |
-| label.optional.text.color | Label optional text color |
-| label.meta.font.style | Label meta text font style |
-| label.meta.font.size | Label meta text font size |
-| label.meta.margin | Label meta margin |
-| label.meta.padding.left | Label meta padding left |
-| label.line.height | Label line height |
-| menuItem.border.radius | Border radius for menu item in nav menu |
-| menuItem.font.family | Menu item font family |
-| menuItem.font.size | Menu item font size |
-| menuItem.font.weight | Menu item font weight |
-| menuItem.text.color | Menu item text color |
-| menuItem.text.align | Alignment of caption text in menu item |
-| menuItem.hover.text.color | Menu item text color (hover) |
-| menuItem.hover.background.color | Menu item background color (hover) |
-| menuItem.active.text.color | Menu item text color (active) |
-| menuItem.active.background.color | Menu item background color (active) |
-| menuItem.active.border.color | Menu item active border color |
-| menuItem.active.hover.border.color | Menu item hover active border color |
-| menuItem.background.color | Menu item background color |
-| menuItem.padding.y | Menu item vertical padding |
-| menuItem.padding.x | Menu item horizontal padding |
-| menuItem.header.font.family | Menu item header font family |
-| menuItem.header.font.weight | Menu item header font weight |
-| menuItem.header.text.color | Menu item header text color |
-| menuItem.header.text.align | Menu item header text aligment |
-| menuItem.header.background.color | Menu item header background color |
-| menuItem.divider.border.width | Menu item divider border width |
-| menuItem.divider.border.color | Menu item divider border color |
-| menuItem.min.height | Menu item minimum height |
-| menuItem.transition.hover.duration | Menu item hover transition duration |
-| menuItem.transition.hover.type | Menu item hover transition type |
-| menuItem.nav.selected.text.color | Menu item text color (selected in nav menu) |
-| menuItem.nav.selected.background.color | Menu item background color (selected in nav menu) |
-| menuItem.nav.border.radius | Border radius for menu item in nav menu |
-| menuItem.nav.text.align | Alignment of caption text in menu item in nav menu |
-| modal.background.color | Modal background color |
-| modal.animation.duration | Modal enter/exit animation duration |
-| modal.animation.type | Modal enter/exit animation type |
-| modal.border.width | Modal border width |
-| modal.border.color | Modal border color |
-| modal.border.radius | Modal border radius |
-| modal.box.shadow.size | Modal box shadow size |
-| modal.box.shadow.color | Modal box shadow color |
-| modal.font.family | Modal font family |
-| modal.font.size | Modal font size |
-| modal.font.weight | Modal font weight |
-| modal.margin.y | Modal vertical margin |
-| modal.margin.x | Modal horizontal margin |
-| modal.sm.width | Modal width (small) |
-| modal.md.width | Modal width (medium) |
-| modal.lg.width | Modal width (large) |
-| modal.footer.border.color | Modal footer border color |
-| modal.close.button.offset.top | Modal close button top offset |
-| modal.close.button.offset.right | Modal close button right offset |
-| navbar.background.color | Navbar background colour |
-| navbar.background.image | Navbar background image |
-| navbar.border.bottom.color | Navbar bottom border colour |
-| navbar.border.bottom.width | Navbar bottom border width |
-| navbar.box.shadow.color | Navbar box shadow colour |
-| navbar.box.shadow.size | Navbar box shadow size |
-| navbar.focus.color | Navbar focus colour; allows the global focus colour to be overridden to maintain accessible contrast |
-| navbar.form.ele.background.color | Form element background colour when used in Navbar |
-| navbar.form.ele.border.color | Form element border colour when used in Navbar |
-| navbar.form.ele.text.color | Form element text colour when used in Navbar |
-| navbar.logo.maxHeight | Navbar logo max height |
-| navbar.logo.spacing.y | Adds vertical spacing to logos and form elements |
-| navbar.nav.link.active.background.color | Navbar link background colour (active) |
-| navbar.nav.link.active.selected.mark.color | Navbar link selected mark colour in active state |
-| navbar.nav.link.active.text.color | Navbar link text colour (active) |
-| navbar.nav.link.background.color | Navbar link background colour |
-| navbar.nav.link.hover.background.color | Navbar link background colour (hover) |
-| navbar.nav.link.hover.selected.mark.color | Navbar link selected mark colour in hover state |
-| navbar.nav.link.hover.text.color | Navbar link text colour (hover) |
-| navbar.nav.link.selected.background.color | Navbar link selected background colour |
-| navbar.nav.link.selected.mark.color | Navbar link selected mark colour |
-| navbar.nav.link.selected.text.color | Navbar link selected text colour |
-| navbar.nav.link.text.color | Navbar link text colour |
-| navbar.padding.x | Horizontal navbar padding (to match IressContainer) |
-| navbar.spacing.x | Horizontal spacing between navbar components |
-| navbar.responsive.nav.container.border.color | Responsive nav container border colour |
-| navbar.responsive.nav.container.border.width | Navbar bottom border width |
-| navbar.text.color | Navbar text colour |
-| panel.font.family | Panel font family |
-| panel.font.size | Panel font size |
-| panel.font.weight | Panel font weight |
-| panel.line.height | Panel line height |
-| panel.border.width | Panel border width (all) |
-| panel.border.top.width | Panel border width (block start) |
-| panel.border.bottom.width | Panel border width (block end) |
-| panel.border.left.width | Panel border width (inline start) |
-| panel.border.right.width | Panel border width (inline end) |
-| panel.border.style | Panel border style |
-| panel.border.color | Panel border color |
-| panel.border.colorAlt | Panel border color alt |
-| panel.border.radius | Panel border radius |
-| panel.background.color | Panel background color (default) |
-| panel.background.colorAlt | Panel background color (alt) |
-| panel.background.image | Panel background image |
-| panel.background.imageAlt | Panel background image alt |
-| panel.text.color | Panel text color |
-| panel.text.colorAlt | Panel text color alt |
-| panel.sm.padding.x | Panel small horizontal padding |
-| panel.sm.padding.y | Panel small vertical padding |
-| panel.md.padding.x | Panel medium horizontal padding |
-| panel.md.padding.y | Panel medium vertical padding |
-| panel.lg.padding.x | Panel large horizontal padding |
-| panel.lg.padding.y | Panel large vertical padding |
-| panel.page.border.color | Panel page border color |
-| popover.background.color | Popover background color |
-| popover.border.color | Popover border color |
-| popover.border.radius | Popover border radius |
-| popover.border.width | Popover border width |
-| popover.max.width | Popover maximum width |
-| popover.overflow.y | Popover vertical overflow |
-| popover.box.shadow.size | Popover box shadow size |
-| popover.box.shadow.color | Popover box shadow color |
-| progress.inactive.background.color | Progress inactive color |
-| progress.active.background.color | Progress active color |
-| progress.height | Progress height |
-| progress.transition.duration | Progress transition duration |
-| progress.transition.type | Progress animation type |
-| progress.border.radius | Progress border radius |
-| radioGroup.inline.spacing | Radio group inline spacing |
-| radio.font.family | Radio font family |
-| radio.font.size | Radio font size |
-| radio.font.weight | Radio font weight |
-| radio.hiddenControl.label.background.color | Radio hidden control label background color |
-| radio.hiddenControl.label.border.color | Radio hidden control label border color |
-| radio.hiddenControl.label.border.width | Radio hidden control label border width |
-| radio.hiddenControl.label.border.radius | Radio hidden control label border radius |
-| radio.hiddenControl.label.hover.background.color | Radio hidden control label hover background color |
-| radio.hiddenControl.label.hover.text.color | Radio hidden control label hover text color |
-| radio.border.color | Radio border colour |
-| radio.background.color | Radio background colour |
-| radio.text.color | Radio label text colour |
-| radio.line.height | Radio line height |
-| radio.size | Radio outer circle diameter |
-| radio.margin.bottom | Radio bottom margin |
-| radio.spacing.right | Radio spacing right |
-| radio.padding.x | Horizontal padding for toggle |
-| radio.padding.y | Vertical padding for toggle |
-| radio.checked.background.color | Radio background colour (checked) |
-| radio.checked.border.color | Radio border colour (checked) |
-| radio.checked.inner.background.color | Radio inner dot background colour (checked) |
-| radio.checked.hover.inner.background.color | Radio inner dot background colour on hover (checked) |
-| radio.hover.inner.background.color | Radio inner dot background colour on hover (not checked) |
-| radio.label.background.color | Radio label background color |
-| radio.label.border.width | Border width of radio label |
-| radio.label.radius | Radio label border radius |
-| radio.transition.hover.type | Radio hover transition type |
-| radio.transition.hover.duration | Radio hover transition duration |
-| row.xs.gutter | Row xs gutter |
-| row.sm.gutter | Row sm gutter |
-| row.md.gutter | Row md gutter |
-| row.lg.gutter | Row lg gutter |
-| row.xl.gutter | Row xl gutter |
-| select.font.family | Select font family |
-| select.font.size | Select font size |
-| select.font.weight | Select font weight |
-| select.background.color | Select background color |
-| select.border.color | Select border color |
-| select.border.radius | Select border radius |
-| select.border.width | Select border width |
-| select.chevron.color | Select chevron color |
-| select.focus.background.color | Select background color (focus) |
-| select.focus.border.color | Select border color (focus) |
-| select.focus.box.shadow | Select box shadow (focus) |
-| select.focus.text.color | Select text color (focus) |
-| select.margin.bottom | Select margin bottom |
-| select.option.text.color | Select option text color |
-| select.padding.x | Select horizontal padding |
-| select.text.color | Select text color |
-| skeleton.bone.fallback.height | Skeleton bone fall back height (if height prop is not specified) |
-| skeleton.bone.background.color | Skeleton bone background color |
-| skeleton.bone.background.image | Skeleton background image that the animation is performed on |
-| skeleton.bone.highlight.color | Skeleton bone highlight color |
-| skeleton.bone.transition.speed | Skeleton transition duration |
-| skeleton.bone.border.radius | Skeleton bone border radius |
-| skipLink.text.color | Skip link text color |
-| skipLink.background.color | Skip link background color |
-| skipLink.border.color | Skip link border color |
-| skipLink.border.width | Skip link border width |
-| skipLink.border.radius | Skip link border radius |
-| skipLink.padding.x | Skip link horizontal padding |
-| skipLink.padding.y | Skip link vertical padding |
-| skipLink.hover.text.color | Skip link (hover) text color |
-| skipLink.hover.background.color | Skip link (hover) background color |
-| skipLink.hover.border.color | Skip link (hover) border color |
-| skipLink.active.background.color | Skip link (active) background color |
-| skipLink.active.border.color | Skip link (active) border color |
-| skipLink.active.text.color | Skip link (active) text color |
-| slideout.box.shadow.size | Slideout box shadow size |
-| slideout.box.shadow.color | Slideout box shadow color |
-| slideout.background.color | Slideout background color |
-| slideout.animation.duration | Slideout animation duration |
-| slideout.animation.type | Slideout animation type |
-| slideout.font.family | Slideout font family |
-| slideout.font.weight | Slideout font weight |
-| slideout.font.size | Slideout font size |
-| slideout.border.width | Slideout border width |
-| slideout.border.color | Slideout border colour |
-| slideout.border.radius | Slideout border radius |
-| slideout.footer.border.color | Slideout footer border colour |
-| slideout.close.button.offset.top | Slideout close button top offset |
-| slideout.close.button.offset.right | Slideout right offset |
-| slideout.sm.width | Slideout width (small) |
-| slideout.md.width | Slideout width (medium) |
-| slideout.lg.width | Slideout width (large) |
-| slider.background.color | Slider background color |
-| slider.border.radius | Slider track border radius |
-| slider.first.label.offset | Slider tick label offset for the first label |
-| slider.font.family | Slider font family |
-| slider.font.size | Text font size for slider |
-| slider.font.weight | Slider font weight |
-| slider.last.label.offset | Slider tick label offset for the last label |
-| slider.text.color | Slider text colour |
-| slider.thumb.background.color | Slider thumb background color |
-| slider.thumb.border.color | Slider thumb border color |
-| slider.thumb.border.radius | Slider thumb border radius |
-| slider.thumb.border.width | Slider thumb border width |
-| slider.thumb.height | Slider thumb height |
-| slider.thumb.offset | Slider thumb offset |
-| slider.thumb.width | Slider thumb width |
-| slider.tick.color | Slider tick colour |
-| slider.tick.height | Slider tick mark height |
-| slider.tick.padding | Slider tick mark padding to allow aligning with labels |
-| slider.tick.position.x | Slider tick x position |
-| slider.tick.position.y | Slider tick y position |
-| slider.tick.width | Slider tick mark width |
-| slider.track.height | Slider track height |
-| stack.xs.gutter | Stack xs gutter |
-| stack.sm.gutter | Stack sm gutter |
-| stack.md.gutter | Stack md gutter |
-| stack.lg.gutter | Stack lg gutter |
-| stack.xl.gutter | Stack xl gutter |
-| table.background.color | Table background color |
-| table.border.color | Table border color |
-| table.border.radius | Table border radius |
-| table.border.style | Table border style |
-| table.border.width | Table border width |
-| table.caption.text.align | Table alignment of caption text |
-| table.caption.text.color | Table caption text color |
-| table.caption.font.size | Table caption font size |
-| table.caption.font.weight | Table caption font weight |
-| table.caption.spacing | Table spacing between caption and table |
-| table.cell.positive.text.color | Table positive (buy) text color |
-| table.cell.negative.text.color | Table negative (sell) text color |
-| table.cell.updated.background.color | Updated cell background color |
-| table.column.border.color | Table column border color |
-| table.column.border.style | Table column border style |
-| table.column.border.width | Table column border width |
-| table.column.divider.border.width | Table column divider width |
-| table.column.spacing | Table horizontal padding for table cells |
-| table.font.family | Table font family |
-| table.font.size | Table font size |
-| table.font.weight | Table font weight |
-| table.header.background.color | Table header background color |
-| table.header.column.border.color | Table header column border color |
-| table.header.column.border.style | Table header column border style |
-| table.header.column.border.width | Table header column border width |
-| table.header.font.size | Table header font size |
-| table.header.font.weight | Table header font weight |
-| table.header.icon.spacing | Table spacing between icon and header text |
-| table.header.row.border.color | Table header row border color |
-| table.header.row.border.style | Table header row border style |
-| table.header.row.border.width | Table header row border width |
-| table.header.row.border.radius | Table header row border radius |
-| table.header.text.color | Table header text color |
-| table.line.height | Table line height |
-| table.row.border.color | Table row border color |
-| table.row.border.style | Table row border style |
-| table.row.border.width | Table row border width |
-| table.row.border.radius | Table row border radius |
-| table.row.even.background.color | Table row background color (even rows) |
-| table.row.even.text.color | Table row text color (even rows) |
-| table.row.compact.border.width | Table row border width in compact view mode only |
-| table.row.compact.even.background.color | Table row background color (even rows) in compact view mode only |
-| table.row.compact.even.text.color | Table row text color (even rows) in compact view mode only |
-| table.row.hover.background.color | Table row background color when hovered |
-| table.row.hover.text.color | Table row text color when hovered |
-| table.row.odd.background.color | Table row background color (odd rows) |
-| table.row.odd.text.color | Table row text color (odd rows) |
-| table.row.selected.background.color | Table row background color when selected |
-| table.row.selected.positive.text.color | Table positive (buy) text color on selected row |
-| table.row.selected.negative.text.color | Table negative (sell) text color on selected row |
-| table.row.selected.text.color | Table row text color when selected |
-| table.row.spacing | Table vertical padding for table cells |
-| table.text.color | Table text color |
-| tabButton.background.color | Tab button background colour |
-| tabButton.border.bottom.width | Tab button bottom border width |
-| tabButton.border.bottom.color | Tab button bottom border color |
-| tabButton.border.color | Tab button border color |
-| tabButton.border.width | Tab button border width |
-| tabButton.text.color | Tab button text color |
-| tabButton.padding.y | Tab button vertical padding |
-| tabButton.padding.x | Tab button horizontal padding |
-| tabButton.hover.background.color | Tab button background color (hover) |
-| tabButton.hover.border.color | Tab button border color (hover) |
-| tabButton.hover.border.bottom.color | Tab button bottom border color (hover) |
-| tabButton.hover.text.color | Tab button text color (hover) |
-| tabButton.active.font.weight | Tab button font weight (active) |
-| tabButton.active.background.color | Tab button background color (active) |
-| tabButton.active.border.color | Tab button border color (active) |
-| tabButton.active.border.bottom.color | Tab button bottom border color (active) |
-| tabButton.active.text.color | Tab button text color (active) |
-| tabButton.active.hover.background.color | Tab button background color (active hover) |
-| tabButton.active.hover.border.color | Tab button border color (active hover) |
-| tabButton.active.hover.border.bottom.color | Tab button bottom border color (active hover) |
-| tabButton.active.hover.text.color | Tab button text color (active hover) |
-| tabButton.font.family | Tab button font family |
-| tabButton.font.weight | Tab button font weight |
-| tabButton.font.size | Tab button font size |
-| tabButton.transition.hover.type | Tab button hover transition type |
-| tabButton.transition.hover.duration | Tab button hover transition duration |
-| tabContainer.background.color | Tab container background color |
-| tabContainer.border.radius | Tab container border radius |
-| tabContainer.border.end.radius | Tab container border end radius |
-| tabContainer.font.family | Tab container font family |
-| tabContainer.font.weight | Tab container font weight |
-| tabPanel.border.radius | Tab panel border radius |
-| tabPanel.border.top.color | Tab panel top border color |
-| tabPanel.border.top.width | Tab panel top border width |
-| tabPanel.border.width | Tab panel border width |
-| tabPanel.border.color | Tab panel border color |
-| tabPanel.padding.x | Tab panel horizontal padding |
-| tabPanel.padding.y | Tab panel vertical padding |
-| tabPanel.padding.block.start | Tab panel top padding |
-| tabPanel.padding.block.end | Tab panel bottom padding |
-| tabPanel.background.color | Tab panel background color |
-| tag.background.color | Tag background color |
-| tag.border.color | Tag border color |
-| tag.border.radius | Tag border radius |
-| tag.border.width | Tag border width |
-| tag.delete.button.background.color | Tag delete button background color |
-| tag.delete.button.hover.background.color | Tag delete button hover background color |
-| tag.delete.button.hover.text.color | Tag delete button hovertext color |
-| tag.delete.button.text.color | Tag delete button text color |
-| tag.font.size | Tag delete button font size |
-| tag.font.weight | Tag delete button font weight |
-| tag.padding.x | Tag delete button horizontal padding |
-| tag.padding.y | Tag delete button vertical padding |
-| tag.text.color | Tag text color |
-| text.font.family | Text font family for text |
-| text.font.size | Text font size for text |
-| text.font.weight | Text font weight for text |
-| text.heading.1.font.weight | H1 font weight |
-| text.heading.1.font.size | H1 font size |
-| text.heading.2.font.size | H2 font size |
-| text.heading.3.font.size | H3 font size |
-| text.heading.4.font.size | H4 font size |
-| text.heading.5.font.size | H5 font size |
-| text.heading.6.font.size | H6 font size |
-| text.heading.font.weight | Heading font weight |
-| text.heading.font.family | Heading font family |
-| text.heading.icon.spacing | Heading icon spacing |
-| text.heading.line.height | Heading line height |
-| text.heading.margin.bottom | Heading bottom margin |
-| text.heading.text.color | Heading text color |
-| text.line.height | Text line height |
-| text.link.text.color | Link text color |
-| text.link.transition.hover.duration | Link text hover transition duration |
-| text.link.transition.hover.type | Link text hover transition type |
-| text.link.hover.text.color | Link text color (hover) |
-| text.link.active.text.color | Link text color (active) |
-| text.display.1.font.size | Display1 font size |
-| text.display.2.font.size | Display2 font size |
-| text.display.3.font.size | Display3 font size |
-| text.display.4.font.size | Display4 font size |
-| text.display.font.family | Display font family |
-| text.display.font.weight | Display font weight |
-| text.display.line.height | Display line height |
-| text.display.margin.top | Display top margin |
-| text.display.margin.bottom | Display bottom margin |
-| text.display.text.color | Display text color |
-| text.paragraph.margin.bottom | Paragraph bottom margin |
-| text.list.margin.bottom | List bottom margin |
-| text.list.padding.x | List horizontal padding |
-| text.lead.text.color | Lead text color |
-| text.lead.font.size | Lead font size |
-| text.lead.font.weight | Lead font weight |
-| text.caption.text.color | Caption text color |
-| text.caption.font.size | Caption font size |
-| text.caption.font.weight | Caption font weight |
-| text.small.font.size | Small (element) font size |
-| text.code.text.color | Code text color |
-| text.code.background.color | Code background color |
-| text.code.border.width | Code border width |
-| text.code.border.color | Code border color |
-| text.code.font.family | Code font family |
-| text.code.line.height | Code line height |
-| text.strong.font.weight | Strong / bold font weight |
-| text.blockquote.border.width | Blockquote border width |
-| text.blockquote.border.color | Blockquote border color |
-| text.blockquote.padding.left | Blockquote padding |
-| text.danger.text.color | Danger text color for errors |
-| text.info.text.color | Info text color |
-| text.warning.text.color | Warning text color |
-| text.success.text.color | Success text color |
-| text.negative.text.color | Negative text color |
-| text.positive.text.color | Positive text color |
-| text.muted.text.color | Muted text color |
-| text.primary.text.color | Primary text color |
-| text.divider.margin.top | Divider margin top |
-| text.divider.margin.bottom | Divider margin bottom |
-| toast.animation.duration | Toast enter/exit transition duration |
-| toast.animation.type | Toast enter/exit transition type |
-| toast.margin.bottom | Toast bottom margin |
-| toast.heading.margin.bottom | Toast heading bottom margin |
-| toast.heading.font.family | Toast heading font family |
-| toast.heading.font.size | Toast heading font size |
-| toast.heading.font.weight | Toast heading font weight |
-| toast.heading.text.color | Toast heading color (if success/error/info header colors are not specified) |
-| toast.success.heading.text.color | Toast success heading color |
-| toast.success.border.color | Toast success border color |
-| toast.success.icon.color | Toast success icon color |
-| toast.success.background.color | Toast success background color |
-| toast.error.heading.text.color | Toast error heading color |
-| toast.error.border.color | Toast error border color |
-| toast.error.icon.color | Toast error icon color |
-| toast.error.background.color | Toast error background color |
-| toast.info.heading.text.color | Toast info heading color |
-| toast.info.border.color | Toast info border color |
-| toast.info.icon.color | Toast info icon color |
-| toast.info.background.color | Toast info background color |
-| toast.border.top.width | Toast top border width |
-| toast.border.bottom.width | Toast bottom border width |
-| toast.border.left.width | Toast left border width |
-| toast.border.right.width | Toast right border width |
-| toast.border.color | Toast border color (if Success/Error/Info border color is not specified) |
-| toast.border.radius | Toast border radius |
-| toast.icon.color | Toast icon color (if Success/Error/Info icon color not specified) |
-| toast.background.color | Toast background color (if Success/Error/Info background not specified) |
-| toast.padding.x | Toast horizontal padding |
-| toast.padding.y | Toast vertical padding |
-| toast.padding.right | Toast right padding |
-| toast.box.shadow.size | Toast box shadow size |
-| toast.box.shadow.color | Toast box shadow color |
-| toast.font.family | Toast font family |
-| toast.font.size | Toast font size |
-| toast.font.weight | Toast font weight |
-| toast.text.color | Toast text color (sets success and error) |
-| toggle.active.background.color | Toggle active background colour |
-| toggle.active.border.color | Toggle active border colour |
-| toggle.active.hover.background.color | Toggle active hover background colour |
-| toggle.active.hover.border.color | Toggle active hover border colour |
-| toggle.active.mark.color | Toggle check mark color (shown when active) |
-| toggle.active.thumb.background.color | Toggle active thumb background colour |
-| toggle.active.thumb.border.color | Toggle active thumb border colour |
-| toggle.border.radius | Toggle border radius |
-| toggle.border.width | Toggle border width |
-| toggle.height | Toggle height |
-| toggle.inactive.background.color | Toggle inactive background colour |
-| toggle.inactive.border.color | Toggle inactive border colour |
-| toggle.inactive.hover.background.color | Toggle inactive hover background colour |
-| toggle.inactive.hover.border.color | Toggle inactive hover border colour |
-| toggle.inactive.thumb.background.color | Toggle inactive thumb background colour |
-| toggle.inactive.thumb.border.color | Toggle inactive thumb border colour |
-| toggle.label.font.family | Toggle label text font family |
-| toggle.label.font.size | Toggle label text font size |
-| toggle.label.font.weight | Toggle label text font weight |
-| toggle.label.text.color | Toggle label text color |
-| toggle.thumb.border.width | Toggle thumb border width |
-| toggle.thumb.height | Toggle thumb height |
-| toggle.transition.hover.type | Toggle hover transition type |
-| toggle.transition.hover.duration | Toggle hover transition duration |
-| tooltip.background.color | Tooltip background color |
-| tooltip.text.color | Tooltip text colour |
-| tooltip.font.size | Text font size for tooltip |
-| tooltip.font.family | Tooltip font family |
-| tooltip.font.weight | Tooltip font weight |
-| tooltip.padding.x | Tooltip horizontal padding |
-| tooltip.padding.y | Tooltip vertical padding |
-| tooltip.border.width | Tooltip border width |
-| tooltip.border.color | Tooltip border color |
-| tooltip.border.radius | Tooltip border radius |
-| tooltip.box.shadow.size | Tooltip box shadow size |
-| tooltip.box.shadow.color | Tooltip box shadow color |
-| validationMessage.danger.text.color | Danger validation message text color |
-| validationMessage.info.text.color | Info validation message text color |
-| validationMessage.success.text.color | Success validation message text color |
-| validationMessage.warning.text.color | Warning validation message text color |
-| validationMessage.prefix.font.weight | Validation message prefix font weight |
-| colour.primary.fill | TODO: Add description from Figma once available |
-| colour.primary.onFill | TODO: Add description from Figma once available |
-| colour.primary.surface | TODO: Add description from Figma once available |
-| colour.primary.text | TODO: Add description from Figma once available |
-| colour.neutral.10 | TODO: Add description from Figma once available |
-| colour.neutral.20 | TODO: Add description from Figma once available |
-| colour.neutral.30 | TODO: Add description from Figma once available |
-| colour.neutral.40 | TODO: Add description from Figma once available |
-| colour.neutral.50 | TODO: Add description from Figma once available |
-| colour.neutral.60 | TODO: Add description from Figma once available |
-| colour.neutral.70 | TODO: Add description from Figma once available |
-| colour.neutral.80 | TODO: Add description from Figma once available |
-| colour.accent.brand | The brand accent is useful for grabbing attention and to support your primary/brand colour. It should be used sparingly to draw attention to key elements. |
-| colour.accent.ui | The UI accent brings attention to focused/active areas in the UI (eg. focus state of components). |
-| colour.system.success.fill | TODO: Add description from Figma once available |
-| colour.system.success.onFill | TODO: Add description from Figma once available |
-| colour.system.success.surface | TODO: Add description from Figma once available |
-| colour.system.success.text | TODO: Add description from Figma once available |
-| colour.system.danger.fill | TODO: Add description from Figma once available |
-| colour.system.danger.onFill | TODO: Add description from Figma once available |
-| colour.system.danger.surface | TODO: Add description from Figma once available |
-| colour.system.danger.text | TODO: Add description from Figma once available |
-| colour.system.warning.fill | TODO: Add description from Figma once available |
-| colour.system.warning.onFill | TODO: Add description from Figma once available |
-| colour.system.warning.surface | TODO: Add description from Figma once available |
-| colour.system.warning.text | TODO: Add description from Figma once available |
-| colour.system.info.fill | TODO: Add description from Figma once available |
-| colour.system.info.onFill | TODO: Add description from Figma once available |
-| colour.system.info.surface | TODO: Add description from Figma once available |
-| colour.system.info.text | TODO: Add description from Figma once available |
-| elevation.background.default | Default background is the default state of most components, such as panels and inputs. |
-| elevation.background.alt | Alt background is used to establish application hierarchy and structure in combination with default. |
-| elevation.background.cover | Cover background is used to cover the page in order to highlight a specific component, such as a modal. |
-| elevation.interaction.hover.overlay | Overlay for hover elevations, it is usually kept semi-transparent so the background can be seen underneath. |
-| elevation.interaction.hover.shadow | Shadow for hover elevations |
-| elevation.interaction.pressed.overlay | Overlay for pressed elevations, it is usually kept semi-transparent so the background can be seen underneath. |
-| elevation.interaction.pressed.shadow | Shadow for pressed elevations |
-| elevation.interaction.selected.overlay | Overlay for selected elevations, it is usually kept semi-transparent so the background can be seen underneath. |
-| elevation.interaction.selected.shadow | Shadow for selected elevations |
-| elevation.raised.shadow | Shadow for raised elevations |
-| elevation.raised.border | Border for raised elevations |
-| elevation.floating.shadow | Shadow for floating elevations |
-| elevation.floating.border | Border for floating elevations |
-| elevation.overflow.shadow | Shadow for overflow elevations |
-| elevation.overflow.border | Border for overflow elevations |
-| radius.100 | The base unit for radius. The fallback for all other values will be calculated from this value. |
-| radius.000 | No radius |
-| radius.025 | 25% (0.25x) radius |
-| radius.050 | 50% (0.5x) radius |
-| radius.075 | 75% (0.75x) radius |
-| radius.system.badge | Applies to badges and tags (that have not been designated to be a circle). |
-| radius.system.button | Applies to buttons and other interactive elements such as the hover state of links. |
-| radius.system.form | Applies to form inputs and alerts. |
-| radius.system.layout | Applies to panels, modals and slideouts. |
-| spacing.100 | The base unit for spacing. The fallback for all other values will be calculated from this value. |
-| spacing.150 | 150% (1.5x) spacing |
-| spacing.200 | 200% (2x) spacing |
-| spacing.250 | 250% (2.5x) spacing |
-| spacing.300 | 300% (3x) spacing |
-| spacing.350 | 350% (3.5x) spacing |
-| spacing.400 | 400% (4x) spacing |
-| spacing.500 | 500% (5x) spacing |
-| spacing.600 | 600% (6x) spacing |
-| spacing.700 | 700% (7x) spacing |
-| spacing.800 | 800% (8x) spacing |
-| spacing.900 | 900% (9x) spacing |
-| spacing.1000 | 1000% (10x) spacing |
-| spacing.1200 | 1200% (12x) spacing |
-| spacing.000 | No spacing |
-| spacing.050 | 50% (0.5x) spacing |
-| typography.base.size | This is the base font size, and is used to calculate the font sizes of each token. |
-| typography.base.headingFont | This is the base font family for headings, used for heading tokens. |
-| typography.base.bodyFont | This is the base font family for body, used for body tokens. |
-| typography.heading.1 | Used for page titles in products such as a form title. |
-| typography.heading.2 | Used in large components where space is not limited and perfectly balances with body.md and body.lg, such as modals. |
-| typography.heading.3 | Used in large components where space is not limited and perfectly balances with body.md, such as modals. |
-| typography.heading.4 | Used for titles in small components where space is limited, such as notifications. |
-| typography.heading.5 | Used sparingly and is suitable matched with body.sm, for example, in fine print. |
-| typography.heading.6 | Used sparingly and is suitable matched with body.sm, for example, in fine print. |
-| typography.body.sm.regular | The default small text, most commonly used to display text in small components and compact tables and lists. |
-| typography.body.sm.strong | Strong text is used to highlight important information in a paragraph of text. |
-| typography.body.sm.em | Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes. |
-| typography.body.md.regular | The default medium text, most commonly used to display text across all products. |
-| typography.body.md.strong | Strong text is used to highlight important information in a paragraph of text. |
-| typography.body.md.em | Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes. |
-| typography.body.lg.regular | The default large text, most commonly used to display large text across all products. |
-| typography.body.lg.strong | Strong text is used to highlight important information in a paragraph of text. |
-| typography.body.lg.em | Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes. |
-| typography.code | Used to display code snippets in the product, such as in the API documentation. |
-
-On this page
-
-*   [What are tokens?](#what-are-tokens)
-*   [How to use the tokens](#how-to-use-the-tokens)
-*   [Token list](#token-list)