@component-controls/design-tokens v4.0.3
Table of contents
Overview
Design tokens are the building blocks of your of the design-system to describe the visual appearance of your application. They can describe the colors, spacing, typography, elevation, icons, and other elements part of the design-system.
Install
The design-tokens package contains a collection of design tokens components.
yarn add @component-controls/design-tokens --devComponents
VanillaColor
react component
Color item displaying the color as a color block with sass variable name and hex color value. Design inspired by [Vanilla](https://vanillaframework.io/docs/settings/color-settings).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/VanillaColor/VanillaColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
AntdVertColor
react component
Color item displaying the color as a small block, expanding on hover. Design inspired by [Antd](https://ant.design/docs/spec/colors).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
AntdHorzColor
react component
Color item displaying the color as a small block, expanding on hover. Design inspired by [Antd](https://ant.design/docs/spec/colors).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
BaseWebColor
react component
Color item displaying as a row, with color, name and hex value Design inspired by [BaseWeb](https://baseweb.design/components/tokens/).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
SeekColor
react component
Color item displaying the color as a circle with the HEX value and variable name below. Design inspired by [Seek OSS](https://seek-oss.github.io/seek-style-guide/palette).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/SeekColor/SeekColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
FishTankColor
react component
Color item displaying the color as a row with the sass var name and hex color. Design inspired by Blooomberg BNA's [FishTank](https://fishtank.bna.com/colors).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
ZendeskColor
react component
Color item displaying the color as a small block with the color name and hex value. Design inspired by [Zendesk Garden](https://zendeskgarden.github.io/react-components/theming/#!/PALETTE).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/ZendeskColor/ZendeskColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
CanvasColor
react component
Color item displaying as a row, with color, name, sass variable name and hex value Design inspired by [Canvas Design System](https://canvas.hubspot.com/styles/colors).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
SolidColor
react component
Color item displaying the color as a block. The CSS class, HEX value, and SASS name are placed above the color block. Design inspired by [Solid](https://solid.buzzfeed.com/colors.html).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/SolidColor/SolidColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
AltaColor
react component
Color item displaying the color as a block, as well as hex(string) and rgb values. inspired by [Alta UI](https://www.oracle.com/webfolder/ux/middleware/alta_web_icon_guide/Alta-Colors/UI-Palette.html).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/Alta/AltaColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
UniformColor
react component
Color item displaying as a table row, with color block, color name and rgb value. Design inspired by [Uniform](http://uniform.hudl.com/guidelines/colors/brand/design).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/UniformColor/UniformColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
PatternFlyColor
react component
Color item displaying the color as a row with a color circle with CSS var name and on click popup. Design inspired by [PatternFly](https://www.patternfly.org/v4/guidelines/colors/).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
GovUKColor
react component
Color item displaying the color as a row with a color circle and the sass var name and hex color. Design inspired by [GOV.UK Design System](https://design-system.service.gov.uk/styles/colour/).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
HelpScoutColor
react component
Color item displaying the color as a row, expanding on hover. Separate visualization (header) for the primary color. Design inspired by [HelpScout](https://style.helpscout.com/visual-elements/#color).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
BeelineColor
react component
Color item displaying the color as a block with values for rgb and Pantone colors. Design inspired by [Beeline Design System](http://beelinedesignsystem.com/color-palette/).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
PrimerColor
react component
Color item displaying the color as a row, with sass variable name. Separate visualization (header) for the primary color. Design inspired by GitHub's [Primer](https://styleguide.github.com/primer/support/color-system/).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/PrimerColor/PrimerColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
AudiDSColor
react component
Color item displaying the color as a color block and the values for RGB, RML, CMYK and Pantone. Design inspired by [Audi Design System](https://www.audi.com/ci/en/intro/basics/colours.html).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
AnvilColor
react component
Color item displaying the color as a color block with a dot suggesting the best text color and a block of text with the color title, name, and value. Design inspired by [Anvil](https://anvil.servicetitan.com/foundations/color/).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
LiquidColor
react component
Color item displaying the color as a block with the RGB value and a palette of lighter and darker colors. Design inspired by [Liquid Design System](https://liquid.emd.design/fundamentals/color/).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/LiquidColor/LiquidColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
LightningFont
react component
Color item displaying as a table row, with color, name, description, and allows for custom columns. Design inspired by Oracle's [Lightning Design System](https://www.lightningdesignsystem.com/design-tokens/#category-color).
defined in @component-controls/design-tokens/ui/design-tokens/src/Fonts/LightningFont/LightningFont.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
columns | TableColumn[] | LightningFontProps | |
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
XColor
react component
Color item displaying the color as a circle with the variable name, HEX, RGB, CMYK, and PANTONE values below. Design inspired by Biteable's Design System [X](https://x.biteable.com/brand/).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/XColor/XColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
OPatternColor
react component
Color item displaying as a table row, with color block, sass name, and hex, RGB, and CMYK color values. Design inspired by [OPattern](https://ux.opower.com/opattern/color.html).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
MorningstarColor
react component
Color item displaying as a table row, with color, name, sass variable name and hex value. Design inspired by [Morningstar Design System](https://designsystem.morningstar.com/visual-language/color/?version=3.0.4&tab=backgrounds).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
CedarColor
react component
Color item displaying as a row, with color, name, description and hex value Design inspired by REI's [Cedar](https://rei.github.io/rei-cedar-docs/foundation/color/).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/CedarColor/CedarColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
index | number | CedarColorProps |
FinastraColor
react component
Color item displaying the color as a small block, with name and hex color on the side. If the color is a primary color, will display as a circle. Design inspired by [Finastra](https://design.fusionfabric.cloud/foundations/colors).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
SeedsColor
react component
Color item displaying the color as a block with RGB and CMYK colors. The color name and description are displayed below the block. Design inspired by SproutSocial's [Seed](https://seeds.sproutsocial.com/visual/color/).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/SeedsColor/SeedsColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
BaseBaseWebColor
react component
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
BackpackColor
react component
Color item displaying the color as a color block and the values for RGB, CMYK and Pantone. If specified, will display the dark color as a bottom-right side triangle. Design inspired by [Backpack](https://backpack.github.io/guidelines/colors).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
PajamasColor
react component
Color item displaying the color as a table row, expanding on hover to display the contrast and passing level. Design inspired by GitLab's [Pajamas](https://design.gitlab.com/product-foundations/colors/).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/PajamasColor/PajamasColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
CometColor
react component
Color item displaying as a row, with color, name sass variable name and AA/AAA tests Design inspired by [Comet](https://comet.discoveryeducation.com/visual-language/color.html).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/CometColor/CometColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
LightningColor
react component
Color item displaying as a table row, with color, name, description, and allows for custom columns. Design inspired by Oracle's [Lightning Design System](https://www.lightningdesignsystem.com/design-tokens/#category-color).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/LightningColor/LightningColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
columns | TableColumn[] | LightningColorProps | |
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
SkylineColor
react component
Color item displaying as a row, with color name, custom columns for contrast checks scss variable name and color block. Design inspired by [Skyline](https://skyline.benevity.org/design-language/color/#hues).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/SkylineColor/SkylineColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
BaseGovUKColor
react component
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
PhotonColor
react component
Color item displaying as a row, with a color block, name, hex value and AA/AAA tests for text and backgorund. Design inspired by Firefox's [Photon Design System](https://design.firefox.com/photon/visuals/color.html).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/PhotonColor/PhotonColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
BaseCedarColor
react component
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/CedarColor/CedarColor.tsx
properties
| Name | Type | Parent | Default | Description |
|---|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it | |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings | |
hover | boolean | ColorProps | hover prop | |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 | |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff | |
index | number | CedarColorProps | 0 |
DuetColor
react component
Color item displaying as a row, with color, name, description, var, and sass variables as well as the contrast ratio ad status. Design inspired by [Duet](https://www.duetds.com/tokens/#color).
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/DuetColor/DuetColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
color* | string | type | ColorProps | color value as a string. accepted hex, rgb, hsl color strings |
hover | boolean | ColorProps | hover prop |
blackTextColor | string | ThemeColorProps | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 |
whiteTextColor | string | ThemeColorProps | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff |
TableColor
react component
Color item displaying as a table row, with support for dark mode colors and AA accessibility tests. Design created to accomodate [theme-ui](https://theme-ui.com/home)-type color palettes. Custom design created by component-controls.
defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/TableColor/TableColor.tsx
properties
| Name | Type | Parent | Description |
|---|---|---|---|
name | string | ColorProps | name of the color, If none, or same as the color value, some color blocks will not display it |
|
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago