Overview

import { AltaColorPalette } from '@component-controls/design-tokens';
<AltaColorPalette
  palette={{
    'color-1': '#fbce4a',
    'color-2': '#fcfbe8',
    'color-3': '#fff4d5',
    'color-4': '#f6cab7',
    'color-5': '#ec96ad',
    'color-6': '#ca589d',
  }}
/>

import { AntdHorzColorPalette } from '@component-controls/design-tokens';
<AntdHorzColorPalette
  palette={{
    'red-1': '#fff1f0',
    'red-2': '#ffccc7',
    'red-3': '#ffa39e',
    'red-4': '#ff7875',
    'red-5': '#ff4d4f',
    'red-6': '#f5222d',
    'red-7': '#cf1322',
    'red-8': '#a8071a',
  }}
/>

import { AntdVertColorPalette } from '@component-controls/design-tokens';
<AntdVertColorPalette
  palette={{
    'green-1': '#f6ffed',
    'green-2': '#d9f7be',
    'green-3': '#b7eb8f',
    'green-4': '#95de64',
    'green-5': '#73d13d',
    'green-6': '#52c41a',
    'green-7': '#389e0d',
    'green-8': '#237804',
    'green-9': '#135200',
    'green-10': '#092b00',
  }}
/>

import { AnvilColorPalette } from '@component-controls/design-tokens';
<AnvilColorPalette
  palette={{
    Critical: { value: '#f94d32', name: 'Red400' },
    Warning: { value: '#ffc902', name: 'Yellow400' },
    Success: { value: '#18a761', name: 'Green500' },
    Info: { value: '#2270ee', name: 'Blue400' },
    Border: { value: '#dfe0e1', name: 'Neutral60' },
    Accent: { value: '#f5f5f5', name: 'Neutral40' },
  }}
/>

import { AtlassianColorPalette } from '@component-controls/design-tokens';
<AtlassianColorPalette
  palette={{
    'Poppy surprise': { value: '#FF5630', name: 'R300' },
    'Golden state': { value: '#FFAB00', name: 'Y300' },
    'Fine pine': { value: '#36B37E', name: 'G300' },
    Tamarama: { value: '#00B8D9', name: 'T300' },
    "Da' juice": { value: '#6554C0', name: 'P300' },
    Critical: { value: '#f94d32', name: 'Red400' },
  }}
/>

import { AudiDSColorPalette } from '@component-controls/design-tokens';
<AudiDSColorPalette
  palette={{
    'Poppy surprise': { value: '#FF5630', name: 'R300' },
    'Golden state': { value: '#FFAB00', name: 'Y300' },
    'Fine pine': { value: '#36B37E', name: 'G300' },
    Tamarama: { value: '#00B8D9', name: 'T300' },
    "Da' juice": { value: '#6554C0', name: 'P300' },
    Critical: { value: '#f94d32', name: 'Red400' },
  }}
/>

import { BackpackColorPalette } from '@component-controls/design-tokens';
<BackpackColorPalette
  palette={{
    'Poppy surprise': { value: '#FF5630', name: 'R300' },
    'Golden state': { value: '#FFAB00', name: 'Y300' },
    'Fine pine': { value: '#36B37E', name: 'G300' },
    Tamarama: { value: '#00B8D9', name: 'T300', dark: '#084eb2' },
    "Da' juice": { value: '#6554C0', name: 'P300' },
    Critical: { value: '#f94d32', name: 'Red400' },
  }}
/>

import { BaseWebColorPalette } from '@component-controls/design-tokens';
<BaseWebColorPalette
  palette={{
    yellow50: '#FFFAF0',
    yellow100: '#FFF2D9',
    yellow200: '#FFE3AC',
    yellow300: '#FFCF70',
    yellow400: '#FFC043',
    yellow500: '#BC8B2C',
    yellow600: '#997328',
    yellow700: '#674D1B',
  }}
/>

import { BeelineColorPalette } from '@component-controls/design-tokens';
<BeelineColorPalette
  palette={{
    'Blue 5': '#001b38',
    'Blue Accessibility': '#0352a0',
    'Blue Primary': '#0575e6',
    'Blue 1': '#4fa7ff',
    'Blue 2': '#85dfff',
    'Blue 3': '#ecf5ff',
    'Blue 4': '#FBFDFF',
  }}
/>

import { BoltColorPalette } from '@component-controls/design-tokens';
<BoltColorPalette
  palette={{
    Navy: { value: '#001f5f', varName: 'var(--bolt-color-navy)' },
    Teal: { value: '#10a5ac', varName: 'var(--bolt-color-teal)' },
    Orange: { value: '#f76923', varName: 'var(--bolt-color-orange)' },
    Yellow: { value: '#ffc836', varName: 'var(--bolt-color-yellow)' },
    Wine: { value: '#661d34', varName: 'var(--bolt-color-wine)' },
    Pink: { value: '#e63690', varName: 'var(--bolt-color-pink)' },
    Berry: { value: '#ac1361', varName: 'var(--bolt-color-berry)' },
    Violet: { value: '#5f67b9', varName: 'var(--bolt-color-violet)' },
    Gray: { value: '#8d8e99', varName: 'var(--bolt-color-gray)' },
    Black: { value: '#151619', varName: 'var(--bolt-color-black)' },
    White: { value: '#ffffff', varName: 'var(--bolt-color-white)' },
  }}
/>

import { CanvasColorPalette } from '@component-controls/design-tokens';
<CanvasColorPalette
  palette={{
    Primary: { value: '#ff8f59', name: 'SORBET', sass: '$color-sorbet' },
    Shade: {
      value: '#e68250',
      name: 'SORBET_DARK',
      sass: '$color-sorbet-dark',
    },
    'Medium Tint': {
      value: '#ffc7ac',
      name: 'SORBET_MEDIUM',
      sass: '$color-sorbet-medium',
    },
    'Light Tint': {
      value: '#fff3ee',
      name: 'SORBET_LIGHT',
      sass: '$color-sorbet-light',
    },
  }}
/>

import { CedarColorPalette } from '@component-controls/design-tokens';
<CedarColorPalette
  palette={{
    primary: {
      name: 'cdr-color-text-primary',
      value: 'rgba(12, 11, 8, 0.75)',
      description: 'The default, primary text color',
    },
    brand: {
      name: 'cdr-color-text-brand',
      value: '#113731',
      description: 'Text set in our primary brand color',
    },
    sale: {
      name: 'cdr-color-text-sale',
      value: '#cc0000',
      description: 'The color of sale text',
    },
    success: {
      name: 'cdr-color-text-success',
      value: '#2e6b34',
      description: 'Color of success messages',
    },
    warning: {
      name: 'cdr-color-text-warning',
      value: '#854714',
      description: 'Color of warning messages',
    },
  }}
/>

import { CometColorPalette } from '@component-controls/design-tokens';
<CometColorPalette
  palette={{
    'midnight-30': {
      name: '30',
      value: '#0C518D',
      sass: '$comet-color-midnight-30',
    },
    'midnight-40': {
      name: '40',
      value: '#106CBC',
      sass: '$comet-color-midnight-40',
    },
    'midnight-50': {
      name: '50',
      value: '#1487EB',
      sass: '$comet-color-midnight-50',
    },
    'midnight-60': {
      name: '60',
      value: '#439FEF',
      sass: '$comet-color-midnight-60',
    },
  }}
/>

import { DuetColorPalette } from '@component-controls/design-tokens';
<DuetColorPalette
  palette={{
    'Gray Darker': {
      value: '#657787',
      description:
        'Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts.',
      sass: '$color-gray-darker',
      varName: 'var(--color-gray-darker)',
      status: 'ok',
    },
    'Gray Dark': {
      value: '#909599',
      description:
        'Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text.',
      sass: '$color-gray-dark',
      varName: 'var(--color-gray-dark)',
      status: 'ok',
    },
    'Data 01': {
      value: '#7a01c4',
      description:
        'Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.',
      sass: '$color-data-01',
      varName: 'var(--color-data-01)',
      status: 'warning',
    },
    'Data 06': {
      value: '#c21565',
      description:
        'Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.',
      sass: '$color-data-06',
      varName: 'var(--color-data-06)',
      status: 'error',
    },
  }}
/>

import { ETradeColorPalette } from '@component-controls/design-tokens';
<ETradeColorPalette
  palette={{
    Purple: {
      value: '#5627d8',
      description: 'Text links and other interactive elements',
      sass: '$link-color',
    },
    'Negative red': {
      value: '#cc0000',
      name: 'Error state',
      description: 'Data trending down',
      sass: '$negative',
    },
    'Positive green': {
      value: '#107a1b',
      name: 'Success state',
      description: 'Data trending up',
      sass: '$positive',
      css: '.text-positive',
    },
    'Background accent color': {
      value: '#f1ecff',
      description: 'Background color',
      sass: '$background-accent-color-1',
      css: '.background-accent-color-1',
    },
  }}
/>

import { FinastraColorPalette } from '@component-controls/design-tokens';
<FinastraColorPalette
  palette={{
    'C 100 - dark': {
      value: '#2D2D2D',
    },
    'C 100': {
      value: '#414141',
      name: 'C',
      primary: true,
    },
    'C 75': {
      value: '#707070',
    },
    'C 50': {
      value: '#9F9F9F',
    },
    'C 25': {
      value: '#CECECE',
    },
  }}
/>

import { FishTankColorPalette } from '@component-controls/design-tokens';
<FishTankColorPalette
  palette={{
    'highlight-1': {
      sass: '$color-highlight-1',
      value: '#FFF8B0',
    },
    'highlight-2': {
      sass: '$color-highlight-2',
      value: '#E3F7FF',
    },
    'highlight-3': {
      sass: '$color-highlight-3',
      value: '#E0FFE0',
    },
  }}
/>

import { GovUKColorPalette } from '@component-controls/design-tokens';
<GovUKColorPalette
  palette={{
    'brand-colour': {
      sass: '$govuk-brand-colour',
      value: '#1d70b8',
    },
    'hover-colour': {
      sass: '$govuk-link-hover-colour',
      value: '#003078',
    },
    'visited-colour': {
      sass: '$govuk-link-visited-colour',
      value: '#4c2c92',
    },
    red: {
      varName: 'govuk-colour("red")',
      value: '#d4351c',
    },
  }}
/>

import { HelpScoutColorPalette } from '@component-controls/design-tokens';
<HelpScoutColorPalette
  palette={{
    lavender: { value: '#9FA6FF', name: '500', primary: true },
    'lavender-100': { value: '#F9F9FF', name: '100' },
    'lavender-200': { value: '#EBECFF', name: '200' },
    'lavender-300': { value: '#D9DCFD', name: '300' },
    'lavender-400': { value: '#B9BEFF', name: '400' },
    'lavender-500': { value: '#9FA6FF', name: '500' },
    'lavender-600': { value: '#818AEC', name: '600' },
  }}
/>

import { ColorTabs, IBMDLColorPalette } from '@component-controls/design-tokens';
<ColorTabs>
  {display => (
    <IBMDLColorPalette
      display={display}
      palette={{
        'Red 100': '#2d0709',
        'Red 90': '#520408',
        'Red 80': '#750e13',
        'Red 70': '#a2191f',
        'Red 60': '#da1e28',
      }}
    />
  )}
</ColorTabs>

import { LightningColorPalette } from '@component-controls/design-tokens';
<LightningColorPalette
  columns={[
    {
      title: 'Released',
      name: 'released',
      render: value => <div style={{ textAlign: 'right' }}>{value}</div>,
    },
    {
      title: 'Themeable',
      name: 'themeable',
      render: value => (
        <div style={{ textAlign: 'center' }}>{value ? 'Yes' : 'No'}</div>
      ),
    },
    {
      title: 'Support',
      name: 'support',
      render: value => (
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }}
        >
          <div
            style={{
              textAlign: 'center',
              width: '1.5rem',
              height: '1.5rem',
              lineHeight: '1.5rem',
              fontSize: '.625rem',
              color: '#fff',
              backgroundColor: value === 'GA' ? '#54c473' : '#6488e3',
            }}
          >
            {value}
          </div>
        </div>
      ),
    },
  ]}
  palette={{
    BRAND_DISABLED: {
      value: '#c9c7c5',
      description: 'Disabled state of BRAND_A11Y',
      sass: '$brand-disabled',
      released: '2.6.0',
      themeable: true,
      support: 'GA',
    },
    PALETTE_GRAY_1: {
      value: '#ffffff',
      description: 'Background color a branded app header',
      sass: '$brand-header',
      released: '2.6.0',
      themeable: true,
      support: 'I',
    },
    BRAND_HEADER_CONTRAST: {
      value: '#5e5e5e',
      description:
        'Variant of BRAND_HEADER that is accessible with BRAND_HEADER',
      sass: '$brand-header-contrast',
      released: '2.6.0',
      themeable: true,
      support: 'I',
    },
    BRAND_HEADER_CONTRAST_WARM: {
      value: '#bf0201',
      description:
        'Variant of BRAND_HEADER_CONTRAST that provides a warm color',
      sass: '$brand-header-contrast-warm',
      released: '2.6.0',
      themeable: true,
      support: 'I',
    },
    BRAND_PRIMARY: {
      value: '#1589ee',
      description: 'Primary brand color',
      sass: '$brand-primary',
      released: '2.6.0',
      themeable: true,
      support: 'GA',
    },
  }}
/>

import { LiquidColorPalette } from '@component-controls/design-tokens';
<LiquidColorPalette
  palette={{
    'Vibrant Magenta': '#EB3C96',
    'Rich Blue': '#0F69AF',
    'Vibrant Cyan': '#2DBECD',
    'Vibrant Green': '#A5CD50',
    'Rich Red': '#E61E50',
    'Vibrant Yellow': '#FFC832',
    'Rich Green': '#149B5F',
  }}
/>

import { MorningstarColorPalette } from '@component-controls/design-tokens';
<MorningstarColorPalette
  palette={{
    Error: {
      value: '#ff0000',
      sass: '$mds-feedback-color-error',
    },
    Warning: {
      value: '#f5c400',
      sass: '$mds-feedback-color-warning',
    },
    Success: {
      value: '#00af41',
      sass: '$mds-feedback-color-success',
    },
    'Success Background': {
      value: '#e5f7eb',
      sass: '$mds-feedback-color-success-background',
    },
    Active: {
      value: '#004376',
      sass: '$mds-interactive-color-primary-active',
    },
  }}
/>

import { OPatternColorPalette } from '@component-controls/design-tokens';
<OPatternColorPalette
  palette={{
    Primary: {
      value: '#107CB2',
      sass: '$primary-color',
    },
    PrimaryLight: {
      value: '#b7d8e8',
      description: '30% of $primary-color',
      sass: '$primary-color-light',
    },
    Alert: {
      value: '#D8400F',
      sass: '$alert-color',
    },
    AlertLight: {
      value: '#f3c6b7',
      description: '30% of $alert-color',
      sass: '$alert-color-light',
    },
    Weather: {
      value: '#990099',
      sass: '$weather-color',
    },
  }}
/>

import { PajamasColorPalette } from '@component-controls/design-tokens';
<PajamasColorPalette
  palette={{
    '$orange-50': '#fdf1dd',
    '$orange-100': '#f5d9a8',
    '$orange-200': '#e9be74',
    '$orange-300': '#d99530',
    '$orange-400': '#c17d10',
    '$orange-500': '#ab6100',
    '$orange-600': '#9e5400',
    '$orange-700': '#8f4700',
    '$orange-800': '#703800',
    '$orange-900': '#5c2900',
    '$orange-950': '#421f00',
  }}
/>

import { PatternFlyColorPalette } from '@component-controls/design-tokens';
<PatternFlyColorPalette
  palette={{
    hover: {
      css: '--pf-global--primary-color--200',
      name: 'Hover',
      value: '#004080',
      description:
        'This color is most commonly used as the hover or focus state for components that use the default primary color, such as buttons and dropdowns.',
    },
    link: {
      css: '--pf-global--primary-color--100',
      value: '#0066CC',
      description:
        'This color is most commonly used as a link text and icon color for many components, such as navigation and accordions. Blue icons use the same primary color variable as the blue text.',
    },
    dangerAlertIcon: {
      css: '--pf-global--primary-color--100',
      name: 'alert icon',
      value: '#470000',
      description:
        'This color is used as the icon color for the danger alert component.',
    },
    dangerAlertTitle: {
      css: '--pf-global--danger-color--200',
      name: 'alert title',
      value: '#A30000',
      description:
        'This color is used as the title color for the danger alert as well as the background color for the danger button.',
    },
    dangerAlertIconBackground: {
      css: '--pf-global--danger-color--100',
      name: 'alert icon background',
      value: '#C9190B',
      description:
        'This color is most commonly used as an indication of danger or error for components, such as alerts and form inputs.',
    },
  }}
/>

import { PhotonColorPalette } from '@component-controls/design-tokens';
<PhotonColorPalette
  palette={{
    'Teal 50': '#00feff',
    'Teal 60': '#00c8d7',
    'Teal 70': '#008ea4',
    'Teal 80': '#005a71',
    'Teal 90': '#002d3e',
  }}
/>

import { PrimerColorPalette } from '@component-controls/design-tokens';
<PrimerColorPalette
  palette={{
    Yellow: { value: '#ffd33d', sass: '$yellow-500', primary: true },
    'yellow-400': { value: '#ffdf5d', sass: '$yellow-400' },
    'yellow-500': { value: '#ffd33d', sass: '$yellow-500' },
    'yellow-600': { value: '#f9c513', sass: '$yellow-600' },
    'yellow-700': { value: '#dbab09', sass: '$yellow-700' },
  }}
/>

import { SeedsColorPalette } from '@component-controls/design-tokens';
<SeedsColorPalette
  palette={{
    'Purple.700': {
      value: '#6f5ed3',
      variants: ['purple.700'],
      description:
        'Use Purple 700 to highlight or draw attention to important information that has no interaction. When using our primary purple with our primary green, green should always be the dominant color of the two.',
    },
    'Aqua.1100': {
      value: '#002838',
      variants: ['aqua.1100'],
      description:
        'Use Aqua 1100 for dark backgrounds and solid drop shadows. Aqua 1100 should not be used on text.',
    },
    'Aqua.600': {
      value: '#0797ae',
      variants: ['aqua.600'],
      description:
        'Use Aqua 600 for in-app text links and to highlight or draw attention to important information that has no interaction. Aqua is also the primary spot illustration color and is used for color blocking.',
    },
    Primary: {
      value: '#2079c3',
      name: 'Primary CTA',
      variants: ['cta.primary', 'blue.700'],
    },
    Secondary: {
      value: '#364141',
      name: 'Secondary CTA',
      variants: ['cta.scondary', 'neutral.800'],
    },
  }}
/>

import { SeekColorPalette } from '@component-controls/design-tokens';
<SeekColorPalette
  palette={{
    '@sk-blue-darker': '#001b38',
    '@sk-blue-dark': '#042763',
    '@sk-blue': '#0d3880',
    '@sk-blue-light': '#184da8',
    '@sk-blue-lighter': '#2765cf',
    '@sk-pink': '#e60278',
    '@sk-green': '#157e00',
  }}
/>

import { SkylineColorPalette } from '@component-controls/design-tokens';
<SkylineColorPalette
  palette={{
    Green: {
      value: '#1a801b',
      scss: 'get-hue(green)',
    },
    'Gray 500': {
      value: '#8b8b8b',
      scss: 'get-gray(500)',
    },
    'Gray 600': {
      value: '#757575',
      scss: 'get-gray(600)',
    },
    'Gray 700': {
      value: '#616161',
      scss: 'get-gray(700)',
    },
  }}
/>