@component-controls/design-tokens
TypeScript icon, indicating that this package has built-in type declarations

4.0.3 • Public • Published

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](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
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

BaseCometColor

react component

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

IBMDLColor

react component

Color item displaying the color as a row with the color name and display option of HEX, RGB, PMS, or CMYK color values. Design inspired by IBM's [Design Language](https://www.ibm.com/design/language/color).

defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/IBMDLColor/IBMDLColor.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
display* "hex" | "rgb" | "pms" | "cmyk" IBMDLColorProps "hex"

AtlassianColor

react component

Color item displaying the color as a block with [AA](https://www.w3.org/TR/WCAG/) color contrast tests. Design inspired by [Atlassian Design System](https://atlassian.design/foundations/color).

defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.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

ETradeColor

react component

Color item displaying the color as a block with values for hex, class, and sass can be copied to clipboard on hover. Design inspired by [E-Trade Design System](https://docs.etrade.design/colors).

defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.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

SeekColorPalette

react component

palette displayed with SeekColor items using a css grid for the dsplay

defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/SeekColor/SeekColor.tsx

properties

Name Type Parent Description
p ResponsiveValue | undefined SpaceProps Padding on top, left, bottom and right
slot string | undefined HTMLAttributes
style CSSProperties | undefined HTMLAttributes
title string | undefined HTMLAttributes
sx ThemeUICSSObject | ThemeDerivedStyles Attributes The ThemeUIStyleObject extends [style props](https://emotion.sh/docs/object-styles) such that properties that are part of the Theme will be transformed to their corresponding values. Other valid CSS properties are also allowed.
ref Exclude<R, string> | undefined PropsWithRef
key Key | null | undefined Attributes
defaultChecked boolean | undefined HTMLAttributes
defaultValue string | number | ReadonlyArray<string> | undefined HTMLAttributes
suppressContentEditableWarning boolean | undefined HTMLAttributes
suppressHydrationWarning boolean | undefined HTMLAttributes
accessKey string | undefined HTMLAttributes
className string | undefined HTMLAttributes
contentEditable Booleanish | "inherit" | undefined HTMLAttributes
contextMenu string | undefined HTMLAttributes
dir string | undefined HTMLAttributes
draggable Booleanish | undefined HTMLAttributes
hidden boolean | undefined HTMLAttributes
id string | undefined HTMLAttributes
lang string | undefined HTMLAttributes
placeholder string | undefined HTMLAttributes
spellCheck Booleanish | undefined HTMLAttributes
tabIndex number | undefined HTMLAttributes
translate "yes" | "no" | undefined HTMLAttributes
radioGroup string | undefined HTMLAttributes
role AriaRole | undefined HTMLAttributes
about string | undefined HTMLAttributes
datatype string | undefined HTMLAttributes
inlist any HTMLAttributes
prefix string | undefined HTMLAttributes
property string | undefined HTMLAttributes
resource string | undefined HTMLAttributes
typeof string | undefined HTMLAttributes
vocab string | undefined HTMLAttributes
autoCapitalize string | undefined HTMLAttributes
autoCorrect string | undefined HTMLAttributes
autoSave string | undefined HTMLAttributes
color string | undefined HTMLAttributes
itemProp string | undefined HTMLAttributes
itemScope boolean | undefined HTMLAttributes
itemType string | undefined HTMLAttributes
itemID string | undefined HTMLAttributes
itemRef string | undefined HTMLAttributes
results number | undefined HTMLAttributes
security string | undefined HTMLAttributes
unselectable "on" | "off" | undefined HTMLAttributes
inputMode "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined HTMLAttributes Hints at the type of data that might be entered by the user while editing the element or its contents
is string | undefined HTMLAttributes Specify that a standard HTML element should behave like a defined custom built-in element
aria-activedescendant string | undefined AriaAttributes Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-atomic boolean | "false" | "true" | undefined AriaAttributes Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-autocomplete "none" | "inline" | "list" | "both" | undefined AriaAttributes Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
aria-busy boolean | "false" | "true" | undefined AriaAttributes Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
aria-checked boolean | "false" | "mixed" | "true" | undefined AriaAttributes Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
aria-colcount number | undefined AriaAttributes Defines the total number of columns in a table, grid, or treegrid.
aria-colindex number | undefined AriaAttributes Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
aria-colspan number | undefined AriaAttributes Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
aria-controls string | undefined AriaAttributes Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-current boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined AriaAttributes Indicates the element that represents the current item within a container or set of related elements.
aria-describedby string | undefined AriaAttributes Identifies the element (or elements) that describes the object.
aria-details string | undefined AriaAttributes Identifies the element that provides a detailed, extended description for the object.
aria-disabled boolean | "false" | "true" | undefined AriaAttributes Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
aria-dropeffect "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined AriaAttributes Indicates what functions can be performed when a dragged object is released on the drop target.
aria-errormessage string | undefined AriaAttributes Identifies the element that provides an error message for the object.
aria-expanded boolean | "false" | "true" | undefined AriaAttributes Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-flowto string | undefined AriaAttributes Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
aria-grabbed boolean | "false" | "true" | undefined AriaAttributes Indicates an element's "grabbed" state in a drag-and-drop operation.
aria-haspopup boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined AriaAttributes Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-hidden boolean | "false" | "true" | undefined AriaAttributes Indicates whether the element is exposed to an accessibility API.
aria-invalid boolean | "false" | "true" | "grammar" | "spelling" | undefined AriaAttributes Indicates the entered value does not conform to the format expected by the application.
aria-keyshortcuts string | undefined AriaAttributes Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
aria-label string | undefined AriaAttributes Defines a string value that labels the current element.
aria-labelledby string | undefined AriaAttributes Identifies the element (or elements) that labels the current element.
aria-level number | undefined AriaAttributes Defines the hierarchical level of an element within a structure.
aria-live "off" | "assertive" | "polite" | undefined AriaAttributes Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-modal boolean | "false" | "true" | undefined AriaAttributes Indicates whether an element is modal when displayed.
aria-multiline boolean | "false" | "true" | undefined AriaAttributes Indicates whether a text box accepts multiple lines of input or only a single line.
aria-multiselectable boolean | "false" | "true" | undefined AriaAttributes Indicates that the user may select more than one item from the current selectable descendants.
aria-orientation "horizontal" | "vertical" | undefined AriaAttributes Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
aria-owns string | undefined AriaAttributes Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
aria-placeholder string | undefined AriaAttributes Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
aria-posinset number | undefined AriaAttributes Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
aria-pressed boolean | "false" | "mixed" | "true" | undefined AriaAttributes Indicates the current "pressed" state of toggle buttons.
aria-readonly boolean | "false" | "true" | undefined AriaAttributes Indicates that the element is not editable, but is otherwise operable.
aria-relevant "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined AriaAttributes Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
aria-required boolean | "false" | "true" | undefined AriaAttributes Indicates that user input is required on the element before a form may be submitted.
aria-roledescription string | undefined AriaAttributes Defines a human-readable, author-localized description for the role of an element.
aria-rowcount number | undefined AriaAttributes Defines the total number of rows in a table, grid, or treegrid.
aria-rowindex number | undefined AriaAttributes Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
aria-rowspan number | undefined AriaAttributes Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
aria-selected boolean | "false" | "true" | undefined AriaAttributes Indicates the current "selected" state of various widgets.
aria-setsize number | undefined AriaAttributes Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
aria-sort "none" | "ascending" | "descending" | "other" | undefined AriaAttributes Indicates if items in a table or grid are sorted in ascending or descending order.
aria-valuemax number | undefined AriaAttributes Defines the maximum allowed value for a range widget.
aria-valuemin number | undefined AriaAttributes Defines the minimum allowed value for a range widget.
aria-valuenow number | undefined AriaAttributes Defines the current value for a range widget.
aria-valuetext string | undefined AriaAttributes Defines the human readable text alternative of aria-valuenow for a range widget.
dangerouslySetInnerHTML type | undefined DOMAttributes
onCopy ClipboardEventHandler | undefined DOMAttributes
onCopyCapture ClipboardEventHandler | undefined DOMAttributes
onCut ClipboardEventHandler | undefined DOMAttributes
onCutCapture ClipboardEventHandler | undefined DOMAttributes
onPaste ClipboardEventHandler | undefined DOMAttributes
onPasteCapture ClipboardEventHandler | undefined DOMAttributes
onCompositionEnd CompositionEventHandler | undefined DOMAttributes
onCompositionEndCapture CompositionEventHandler | undefined DOMAttributes
onCompositionStart CompositionEventHandler | undefined DOMAttributes
onCompositionStartCapture CompositionEventHandler | undefined DOMAttributes
onCompositionUpdate CompositionEventHandler | undefined DOMAttributes
onCompositionUpdateCapture CompositionEventHandler | undefined DOMAttributes
onFocus FocusEventHandler | undefined DOMAttributes
onFocusCapture FocusEventHandler | undefined DOMAttributes
onBlur FocusEventHandler | undefined DOMAttributes
onBlurCapture FocusEventHandler | undefined DOMAttributes
onChange FormEventHandler | undefined DOMAttributes
onChangeCapture FormEventHandler | undefined DOMAttributes
onBeforeInput FormEventHandler | undefined DOMAttributes
onBeforeInputCapture FormEventHandler | undefined DOMAttributes
onInput FormEventHandler | undefined DOMAttributes
onInputCapture FormEventHandler | undefined DOMAttributes
onReset FormEventHandler | undefined DOMAttributes
onResetCapture FormEventHandler | undefined DOMAttributes
onSubmit FormEventHandler | undefined DOMAttributes
onSubmitCapture FormEventHandler | undefined DOMAttributes
onInvalid FormEventHandler | undefined DOMAttributes
onInvalidCapture FormEventHandler | undefined DOMAttributes
onLoad ReactEventHandler | undefined DOMAttributes
onLoadCapture ReactEventHandler | undefined DOMAttributes
onError ReactEventHandler | undefined DOMAttributes
onErrorCapture ReactEventHandler | undefined DOMAttributes
onKeyDown KeyboardEventHandler | undefined DOMAttributes
onKeyDownCapture KeyboardEventHandler | undefined DOMAttributes
onKeyPress KeyboardEventHandler | undefined DOMAttributes
onKeyPressCapture KeyboardEventHandler | undefined DOMAttributes
onKeyUp KeyboardEventHandler | undefined DOMAttributes
onKeyUpCapture KeyboardEventHandler | undefined DOMAttributes
onAbort ReactEventHandler | undefined DOMAttributes
onAbortCapture ReactEventHandler | undefined DOMAttributes
onCanPlay ReactEventHandler | undefined DOMAttributes
onCanPlayCapture ReactEventHandler | undefined DOMAttributes
onCanPlayThrough ReactEventHandler | undefined DOMAttributes
onCanPlayThroughCapture ReactEventHandler | undefined DOMAttributes
onDurationChange ReactEventHandler | undefined DOMAttributes
onDurationChangeCapture ReactEventHandler | undefined DOMAttributes
onEmptied ReactEventHandler | undefined DOMAttributes
onEmptiedCapture ReactEventHandler | undefined DOMAttributes
onEncrypted ReactEventHandler | undefined DOMAttributes
onEncryptedCapture ReactEventHandler | undefined DOMAttributes
onEnded ReactEventHandler | undefined DOMAttributes
onEndedCapture ReactEventHandler | undefined DOMAttributes
onLoadedData ReactEventHandler | undefined DOMAttributes
onLoadedDataCapture ReactEventHandler | undefined DOMAttributes
onLoadedMetadata ReactEventHandler | undefined DOMAttributes
onLoadedMetadataCapture ReactEventHandler | undefined DOMAttributes
onLoadStart ReactEventHandler | undefined DOMAttributes
onLoadStartCapture ReactEventHandler | undefined DOMAttributes
onPause ReactEventHandler | undefined DOMAttributes
onPauseCapture ReactEventHandler | undefined DOMAttributes
onPlay ReactEventHandler | undefined DOMAttributes
onPlayCapture ReactEventHandler | undefined DOMAttributes
onPlaying ReactEventHandler | undefined DOMAttributes
onPlayingCapture ReactEventHandler | undefined DOMAttributes
onProgress ReactEventHandler | undefined DOMAttributes
onProgressCapture ReactEventHandler | undefined DOMAttributes
onRateChange ReactEventHandler | undefined DOMAttributes
onRateChangeCapture ReactEventHandler | undefined DOMAttributes
onSeeked ReactEventHandler | undefined DOMAttributes
onSeekedCapture ReactEventHandler | undefined DOMAttributes
onSeeking ReactEventHandler | undefined DOMAttributes
onSeekingCapture ReactEventHandler | undefined DOMAttributes
onStalled ReactEventHandler | undefined DOMAttributes
onStalledCapture ReactEventHandler | undefined DOMAttributes
onSuspend ReactEventHandler | undefined DOMAttributes
onSuspendCapture ReactEventHandler | undefined DOMAttributes
onTimeUpdate ReactEventHandler | undefined DOMAttributes
onTimeUpdateCapture ReactEventHandler | undefined DOMAttributes
onVolumeChange ReactEventHandler | undefined DOMAttributes
onVolumeChangeCapture ReactEventHandler | undefined DOMAttributes
onWaiting ReactEventHandler | undefined DOMAttributes
onWaitingCapture ReactEventHandler | undefined DOMAttributes
onAuxClick MouseEventHandler | undefined DOMAttributes
onAuxClickCapture MouseEventHandler | undefined DOMAttributes
onClick MouseEventHandler | undefined DOMAttributes
onClickCapture MouseEventHandler | undefined DOMAttributes
onContextMenu MouseEventHandler | undefined DOMAttributes
onContextMenuCapture MouseEventHandler | undefined DOMAttributes
onDoubleClick MouseEventHandler | undefined DOMAttributes
onDoubleClickCapture MouseEventHandler | undefined DOMAttributes
onDrag DragEventHandler | undefined DOMAttributes
onDragCapture DragEventHandler | undefined DOMAttributes
onDragEnd DragEventHandler | undefined DOMAttributes
onDragEndCapture DragEventHandler | undefined DOMAttributes
onDragEnter DragEventHandler | undefined DOMAttributes
onDragEnterCapture DragEventHandler | undefined DOMAttributes
onDragExit DragEventHandler | undefined DOMAttributes
onDragExitCapture DragEventHandler | undefined DOMAttributes
onDragLeave DragEventHandler | undefined DOMAttributes
onDragLeaveCapture DragEventHandler | undefined DOMAttributes
onDragOver DragEventHandler | undefined DOMAttributes
onDragOverCapture DragEventHandler | undefined DOMAttributes
onDragStart DragEventHandler | undefined DOMAttributes
onDragStartCapture DragEventHandler | undefined DOMAttributes
onDrop DragEventHandler | undefined DOMAttributes
onDropCapture DragEventHandler | undefined DOMAttributes
onMouseDown MouseEventHandler | undefined DOMAttributes
onMouseDownCapture MouseEventHandler | undefined DOMAttributes
onMouseEnter MouseEventHandler | undefined DOMAttributes
onMouseLeave MouseEventHandler | undefined DOMAttributes
onMouseMove MouseEventHandler | undefined DOMAttributes
onMouseMoveCapture MouseEventHandler | undefined DOMAttributes
onMouseOut MouseEventHandler | undefined DOMAttributes
onMouseOutCapture MouseEventHandler | undefined DOMAttributes
onMouseOver MouseEventHandler | undefined DOMAttributes
onMouseOverCapture MouseEventHandler | undefined DOMAttributes
onMouseUp MouseEventHandler | undefined DOMAttributes
onMouseUpCapture MouseEventHandler | undefined DOMAttributes
onSelect ReactEventHandler | undefined DOMAttributes
onSelectCapture ReactEventHandler | undefined DOMAttributes
onTouchCancel TouchEventHandler | undefined DOMAttributes
onTouchCancelCapture TouchEventHandler | undefined DOMAttributes
onTouchEnd TouchEventHandler | undefined DOMAttributes
onTouchEndCapture TouchEventHandler | undefined DOMAttributes
onTouchMove TouchEventHandler | undefined DOMAttributes
onTouchMoveCapture TouchEventHandler | undefined DOMAttributes
onTouchStart TouchEventHandler | undefined DOMAttributes
onTouchStartCapture TouchEventHandler | undefined DOMAttributes
onPointerDown PointerEventHandler | undefined DOMAttributes
onPointerDownCapture PointerEventHandler | undefined DOMAttributes
onPointerMove PointerEventHandler | undefined DOMAttributes
onPointerMoveCapture PointerEventHandler | undefined DOMAttributes
onPointerUp PointerEventHandler | undefined DOMAttributes
onPointerUpCapture PointerEventHandler | undefined DOMAttributes
onPointerCancel PointerEventHandler | undefined DOMAttributes
onPointerCancelCapture PointerEventHandler | undefined DOMAttributes
onPointerEnter PointerEventHandler | undefined DOMAttributes
onPointerEnterCapture PointerEventHandler | undefined DOMAttributes
onPointerLeave PointerEventHandler | undefined DOMAttributes
onPointerLeaveCapture PointerEventHandler | undefined DOMAttributes
onPointerOver PointerEventHandler | undefined DOMAttributes
onPointerOverCapture PointerEventHandler | undefined DOMAttributes
onPointerOut PointerEventHandler | undefined DOMAttributes
onPointerOutCapture PointerEventHandler | undefined DOMAttributes
onGotPointerCapture PointerEventHandler | undefined DOMAttributes
onGotPointerCaptureCapture PointerEventHandler | undefined DOMAttributes
onLostPointerCapture PointerEventHandler | undefined DOMAttributes
onLostPointerCaptureCapture PointerEventHandler | undefined DOMAttributes
onScroll UIEventHandler | undefined DOMAttributes
onScrollCapture UIEventHandler | undefined DOMAttributes
onWheel WheelEventHandler | undefined DOMAttributes
onWheelCapture WheelEventHandler | undefined DOMAttributes
onAnimationStart AnimationEventHandler | undefined DOMAttributes
onAnimationStartCapture AnimationEventHandler | undefined DOMAttributes
onAnimationEnd AnimationEventHandler | undefined DOMAttributes
onAnimationEndCapture AnimationEventHandler | undefined DOMAttributes
onAnimationIteration AnimationEventHandler | undefined DOMAttributes
onAnimationIterationCapture AnimationEventHandler | undefined DOMAttributes
onTransitionEnd TransitionEventHandler | undefined DOMAttributes
onTransitionEndCapture TransitionEventHandler | undefined DOMAttributes
as
React.ElementType
at*: function (
index*: number
) => T | undefined
BoxOwnProps
variant string BoxOwnProps
css InterpolationPrimitive | ArrayInterpolation<> | FunctionInterpolation<> BoxOwnProps
m ResponsiveValue | undefined SpaceProps Margin on top, left, bottom and right
margin ResponsiveValue | undefined SpaceProps Margin on top, left, bottom and right
mt ResponsiveValue | undefined SpaceProps Margin on top
marginTop ResponsiveValue | undefined SpaceProps Margin on top
mr ResponsiveValue | undefined SpaceProps Margin on right
marginRight ResponsiveValue | undefined SpaceProps Margin on right
mb ResponsiveValue | undefined SpaceProps Margin on bottom
marginBottom ResponsiveValue | undefined SpaceProps Margin on bottom
ml ResponsiveValue | undefined SpaceProps Margin on left
marginLeft ResponsiveValue | undefined SpaceProps Margin on left
mx ResponsiveValue | undefined SpaceProps Margin on left and right
marginX ResponsiveValue | undefined SpaceProps Margin on left and right
my ResponsiveValue | undefined SpaceProps Margin on top and bottom
marginY ResponsiveValue | undefined SpaceProps Margin on top and bottom
padding ResponsiveValue | undefined SpaceProps Padding on top, left, bottom and right
pt ResponsiveValue | undefined SpaceProps Padding on top
paddingTop ResponsiveValue | undefined SpaceProps Padding on top
pr ResponsiveValue | undefined SpaceProps Padding on right
paddingRight ResponsiveValue | undefined SpaceProps Padding on right
pb ResponsiveValue | undefined SpaceProps Padding on bottom
paddingBottom ResponsiveValue | undefined SpaceProps Padding on bottom
pl ResponsiveValue | undefined SpaceProps Padding on left
paddingLeft ResponsiveValue | undefined SpaceProps Padding on left
px ResponsiveValue | undefined SpaceProps Padding on left and right
paddingX ResponsiveValue | undefined SpaceProps Padding on left and right
py ResponsiveValue | undefined SpaceProps Padding on top and bottom
paddingY ResponsiveValue | undefined SpaceProps Padding on top and bottom
bg ResponsiveValue | undefined BackgroundColorProps The color utility parses a component's color and bg props and converts them into CSS declarations. By default the raw value of the prop is returned. Color palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation. Array values are converted into responsive values. [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
backgroundColor ResponsiveValue | undefined BackgroundColorProps
opacity ResponsiveValue | undefined OpacityProps The opacity CSS property sets the transparency of an element or the degree to which content behind an element is visible. [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
width T | Empty | ((T, Empty))[] GridProps The css function accepts arrays as values for mobile-first responsive styles. Note that this extends to non-theme values also. For example display=['none', 'block'] will also works. For more information see: https://styled-system.com/responsive-styles
columns T | Empty | ((T, Empty))[] GridProps The css function accepts arrays as values for mobile-first responsive styles. Note that this extends to non-theme values also. For example display=['none', 'block'] will also works. For more information see: https://styled-system.com/responsive-styles
gap T | Empty | ((T, Empty))[] GridProps The css function accepts arrays as values for mobile-first responsive styles. Note that this extends to non-theme values also. For example display=['none', 'block'] will also works. For more information see: https://styled-system.com/responsive-styles
palette*
ColorPaletteProps
[string]: string | type
ContainerProps

VanillaColorPalette

react component

palette displayed with VanillaColor items using a css grid for the dsplay

defined in @component-controls/design-tokens/ui/design-tokens/src/Colors/VanillaColor/VanillaColor.tsx

properties

Name Type Parent Description
p ResponsiveValue | undefined SpaceProps Padding on top, left, bottom and right
slot string | undefined HTMLAttributes
style CSSProperties | undefined HTMLAttributes
title string | undefined HTMLAttributes
sx ThemeUICSSObject | ThemeDerivedStyles Attributes The ThemeUIStyleObject extends [style props](https://emotion.sh/docs/object-styles) such that properties that are part of the Theme will be transformed to their corresponding values. Other valid CSS properties are also allowed.
ref Exclude<R, string> | undefined PropsWithRef
key Key | null | undefined Attributes
defaultChecked boolean | undefined HTMLAttributes
defaultValue string | number | ReadonlyArray<string> | undefined HTMLAttributes
suppressContentEditableWarning boolean | undefined HTMLAttributes
suppressHydrationWarning boolean | undefined HTMLAttributes
accessKey string | undefined HTMLAttributes
className string | undefined HTMLAttributes
contentEditable Booleanish | "inherit" | undefined HTMLAttributes
contextMenu string | undefined HTMLAttributes
dir string | undefined HTMLAttributes
draggable Booleanish | undefined HTMLAttributes
hidden boolean | undefined HTMLAttributes
id string | undefined HTMLAttributes
lang string | undefined HTMLAttributes
placeholder string | undefined HTMLAttributes
spellCheck Booleanish | undefined HTMLAttributes
tabIndex number | undefined HTMLAttributes
translate "yes" | "no" | undefined HTMLAttributes
radioGroup string | undefined HTMLAttributes
role AriaRole | undefined HTMLAttributes
about string | undefined HTMLAttributes
datatype string | undefined HTMLAttributes
inlist any HTMLAttributes
prefix string | undefined HTMLAttributes
property string | undefined HTMLAttributes
resource string | undefined HTMLAttributes
typeof string | undefined HTMLAttributes
vocab string | undefined HTMLAttributes
autoCapitalize string | undefined HTMLAttributes
autoCorrect string | undefined HTMLAttributes
autoSave string | undefined HTMLAttributes
color string | undefined HTMLAttributes
itemProp string | undefined HTMLAttributes
itemScope boolean | undefined HTMLAttributes
itemType string | undefined HTMLAttributes
itemID string | undefined HTMLAttributes
itemRef string | undefined HTMLAttributes
results number | undefined HTMLAttributes
security string | undefined HTMLAttributes
unselectable "on" | "off" | undefined HTMLAttributes
inputMode "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined HTMLAttributes Hints at the type of data that might be entered by the user while editing the element or its contents
is string | undefined HTMLAttributes Specify that a standard HTML element should behave like a defined custom built-in element
aria-activedescendant string | undefined AriaAttributes Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-atomic boolean | "false" | "true" | undefined AriaAttributes Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-autocomplete "none" | "inline" | "list" | "both" | undefined AriaAttributes Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
aria-busy boolean | "false" | "true" | undefined AriaAttributes Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
aria-checked boolean | "false" | "mixed" | "true" | undefined AriaAttributes Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
aria-colcount number | undefined AriaAttributes Defines the total number of columns in a table, grid, or treegrid.
aria-colindex number | undefined AriaAttributes Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
aria-colspan number | undefined AriaAttributes Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
aria-controls string | undefined AriaAttributes Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-current boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined AriaAttributes Indicates the element that represents the current item within a container or set of related elements.
aria-describedby string | undefined AriaAttributes Identifies the element (or elements) that describes the object.
aria-details string | undefined AriaAttributes Identifies the element that provides a detailed, extended description for the object.
aria-disabled boolean | "false" | "true" | undefined AriaAttributes Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
aria-dropeffect "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined AriaAttributes Indicates what functions can be performed when a dragged object is released on the drop target.
aria-errormessage string | undefined AriaAttributes Identifies the element that provides an error message for the object.
aria-expanded boolean | "false" | "true" | undefined AriaAttributes Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-flowto string | undefined AriaAttributes Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
aria-grabbed boolean | "false" | "true" | undefined AriaAttributes Indicates an element's "grabbed" state in a drag-and-drop operation.
aria-haspopup boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined AriaAttributes Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-hidden boolean | "false" | "true" | undefined AriaAttributes Indicates whether the element is exposed to an accessibility API.
aria-invalid boolean | "false" | "true" | "grammar" | "spelling" | undefined AriaAttributes Indicates the entered value does not conform to the format expected by the application.
aria-keyshortcuts string | undefined AriaAttributes Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
aria-label string | undefined AriaAttributes Defines a string value that labels the current element.
aria-labelledby string | undefined AriaAttributes Identifies the element (or elements) that labels the current element.
aria-level number | undefined AriaAttributes Defines the hierarchical level of an element within a structure.
aria-live "off" | "assertive" | "polite" | undefined AriaAttributes Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-modal boolean | "false" | "true" | undefined AriaAttributes Indicates whether an element is modal when displayed.
aria-multiline boolean | "false" | "true" | undefined AriaAttributes Indicates whether a text box accepts multiple lines of input or only a single line.
aria-multiselectable boolean | "false" | "true" | undefined AriaAttributes Indicates that the user may select more than one item from the current selectable descendants.
aria-orientation "horizontal" | "vertical" | undefined AriaAttributes Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
aria-owns string | undefined AriaAttributes Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
aria-placeholder string | undefined AriaAttributes Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
aria-posinset number | undefined AriaAttributes Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
aria-pressed boolean | "false" | "mixed" | "true" | undefined AriaAttributes Indicates the current "pressed" state of toggle buttons.
aria-readonly boolean | "false" | "true" | undefined AriaAttributes Indicates that the element is not editable, but is otherwise operable.
aria-relevant "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined AriaAttributes Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
aria-required boolean | "false" | "true" | undefined AriaAttributes Indicates that user input is required on the element before a form may be submitted.
aria-roledescription string | undefined AriaAttributes Defines a human-readable, author-localized description for the role of an element.
aria-rowcount number | undefined AriaAttributes Defines the total number of rows in a table, grid, or treegrid.
aria-rowindex number | undefined AriaAttributes Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
aria-rowspan number | undefined AriaAttributes Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
aria-selected boolean | "false" | "true" | undefined AriaAttributes Indicates the current "selected" state of various widgets.
aria-setsize number | undefined AriaAttributes Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
aria-sort "none" | "ascending" | "descending" | "other" | undefined AriaAttributes Indicates if items in a table or grid are sorted in ascending or descending order.
aria-valuemax number | undefined AriaAttributes Defines the maximum allowed value for a range widget.
aria-valuemin number | undefined AriaAttributes Defines the minimum allowed value for a range widget.
aria-valuenow number | undefined AriaAttributes Defines the current value for a range widget.
aria-valuetext string | undefined AriaAttributes Defines the human readable text alternative of aria-valuenow for a range widget.
dangerouslySetInnerHTML type | undefined DOMAttributes
onCopy ClipboardEventHandler | undefined DOMAttributes
onCopyCapture ClipboardEventHandler | undefined DOMAttributes
onCut ClipboardEventHandler | undefined DOMAttributes
onCutCapture ClipboardEventHandler | undefined DOMAttributes
onPaste ClipboardEventHandler | undefined DOMAttributes
onPasteCapture ClipboardEventHandler | undefined DOMAttributes
onCompositionEnd CompositionEventHandler | undefined DOMAttributes
onCompositionEndCapture CompositionEventHandler | undefined DOMAttributes
onCompositionStart CompositionEventHandler | undefined DOMAttributes
onCompositionStartCapture CompositionEventHandler | undefined DOMAttributes
onCompositionUpdate CompositionEventHandler | undefined DOMAttributes
onCompositionUpdateCapture CompositionEventHandler | undefined DOMAttributes
onFocus FocusEventHandler | undefined DOMAttributes
onFocusCapture FocusEventHandler | undefined DOMAttributes
onBlur FocusEventHandler | undefined DOMAttributes
onBlurCapture FocusEventHandler | undefined DOMAttributes
onChange FormEventHandler | undefined DOMAttributes
onChangeCapture FormEventHandler | undefined DOMAttributes
onBeforeInput FormEventHandler | undefined DOMAttributes
onBeforeInputCapture FormEventHandler | undefined DOMAttributes
onInput FormEventHandler | undefined DOMAttributes
onInputCapture FormEventHandler | undefined DOMAttributes
onReset FormEventHandler | undefined DOMAttributes
onResetCapture FormEventHandler | undefined DOMAttributes
onSubmit FormEventHandler | undefined DOMAttributes
onSubmitCapture FormEventHandler | undefined DOMAttributes
onInvalid FormEventHandler | undefined DOMAttributes
onInvalidCapture FormEventHandler | undefined DOMAttributes
onLoad ReactEventHandler | undefined DOMAttributes
onLoadCapture ReactEventHandler | undefined DOMAttributes
onError ReactEventHandler | undefined DOMAttributes
onErrorCapture ReactEventHandler | undefined DOMAttributes
onKeyDown KeyboardEventHandler | undefined DOMAttributes
onKeyDownCapture KeyboardEventHandler | undefined DOMAttributes
onKeyPress KeyboardEventHandler | undefined DOMAttributes
onKeyPressCapture KeyboardEventHandler | undefined DOMAttributes
onKeyUp KeyboardEventHandler | undefined DOMAttributes
onKeyUpCapture KeyboardEventHandler | undefined DOMAttributes
onAbort ReactEventHandler | undefined DOMAttributes
onAbortCapture ReactEventHandler | undefined DOMAttributes
onCanPlay ReactEventHandler | undefined DOMAttributes
onCanPlayCapture ReactEventHandler | undefined DOMAttributes
onCanPlayThrough ReactEventHandler | undefined DOMAttributes
onCanPlayThroughCapture ReactEventHandler | undefined DOMAttributes
onDurationChange ReactEventHandler | undefined DOMAttributes
onDurationChangeCapture ReactEventHandler | undefined DOMAttributes
onEmptied ReactEventHandler | undefined DOMAttributes
onEmptiedCapture ReactEventHandler | undefined DOMAttributes
onEncrypted ReactEventHandler | undefined DOMAttributes
onEncryptedCapture ReactEventHandler | undefined DOMAttributes
onEnded ReactEventHandler | undefined DOMAttributes
onEndedCapture ReactEventHandler | undefined DOMAttributes
onLoadedData ReactEventHandler | undefined DOMAttributes
onLoadedDataCapture ReactEventHandler | undefined DOMAttributes
onLoadedMetadata ReactEventHandler | undefined DOMAttributes
onLoadedMetadataCapture ReactEventHandler | undefined DOMAttributes
onLoadStart ReactEventHandler | undefined DOMAttributes
onLoadStartCapture ReactEventHandler | undefined DOMAttributes
onPause ReactEventHandler | undefined DOMAttributes
onPauseCapture ReactEventHandler | undefined DOMAttributes
onPlay ReactEventHandler | undefined DOMAttributes
onPlayCapture ReactEventHandler | undefined DOMAttributes
onPlaying ReactEventHandler | undefined DOMAttributes
onPlayingCapture ReactEventHandler | undefined DOMAttributes
onProgress ReactEventHandler | undefined DOMAttributes
onProgressCapture ReactEventHandler | undefined DOMAttributes
onRateChange ReactEventHandler | undefined DOMAttributes
onRateChangeCapture ReactEventHandler | undefined DOMAttributes
onSeeked ReactEventHandler | undefined DOMAttributes
onSeekedCapture ReactEventHandler | undefined DOMAttributes
onSeeking ReactEventHandler | undefined DOMAttributes
onSeekingCapture ReactEventHandler | undefined DOMAttributes
onStalled ReactEventHandler | undefined DOMAttributes
onStalledCapture ReactEventHandler | undefined DOMAttributes
onSuspend ReactEventHandler | undefined DOMAttributes
onSuspendCapture ReactEventHandler | undefined DOMAttributes
onTimeUpdate ReactEventHandler | undefined DOMAttributes
onTimeUpdateCapture ReactEventHandler | undefined DOMAttributes
onVolumeChange ReactEventHandler | undefined DOMAttributes
onVolumeChangeCapture ReactEventHandler | undefined DOMAttributes
onWaiting ReactEventHandler | undefined DOMAttributes
onWaitingCapture ReactEventHandler | undefined DOMAttributes
onAuxClick MouseEventHandler | undefined DOMAttributes
onAuxClickCapture MouseEventHandler | undefined DOMAttributes
onClick MouseEventHandler | undefined DOMAttributes
onClickCapture MouseEventHandler | undefined DOMAttributes
onContextMenu MouseEventHandler | undefined DOMAttributes
onContextMenuCapture MouseEventHandler | undefined DOMAttributes
onDoubleClick MouseEventHandler | undefined DOMAttributes
onDoubleClickCapture MouseEventHandler | undefined DOMAttributes
onDrag DragEventHandler | undefined DOMAttributes
onDragCapture DragEventHandler | undefined DOMAttributes
onDragEnd DragEventHandler | undefined DOMAttributes
onDragEndCapture DragEventHandler | undefined DOMAttributes

Readme

Keywords

none

Package Sidebar

Install

npm i @component-controls/design-tokens

Weekly Downloads

1

Version

4.0.3

License

MIT

Unpacked Size

5.49 MB

Total Files

132

Last publish

Collaborators

  • atanasster