npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@component-controls/design-tokens

v4.0.3

Published

Component controls design tokens components.

Downloads

47

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

atanassteratanasster

Keywords

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