@iress-oss/ids-mcp-server 0.0.1 → 5.14.2

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

@@ -1,4580 +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)