@component-controls/design-tokens

Component controls design tokens components.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@component-controls/design-tokens
78164.0.32 years ago4 years agoMinified + gzip package size for @component-controls/design-tokens in KB

Popular Searches

Readme

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 --dev

Components


VanillaColor

react component
Color item displaying the color as a color block with sass variable name and hex color value. Design inspired by \[Vanilla.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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-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 | |