@carbon/themes/src/component-tokens/tag/tokens.js

Themes for applying color in the Carbon Design System

/**
 * Copyright IBM Corp. 2022, 2024
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import {
  red20,
  red40,
  red50,
  red70,
  red80,
  red20Hover,
  red70Hover,
  magenta20,
  magenta40,
  magenta50,
  magenta70,
  magenta80,
  magenta20Hover,
  magenta70Hover,
  purple20,
  purple40,
  purple50,
  purple70,
  purple80,
  purple20Hover,
  purple70Hover,
  blue20,
  blue40,
  blue50,
  blue70,
  blue80,
  blue20Hover,
  blue70Hover,
  cyan20,
  cyan40,
  cyan50,
  cyan70,
  cyan80,
  cyan20Hover,
  cyan70Hover,
  teal20,
  teal40,
  teal50,
  teal70,
  teal80,
  teal20Hover,
  teal70Hover,
  green20,
  green40,
  green50,
  green70,
  green80,
  green20Hover,
  green70Hover,
  gray10,
  gray20,
  gray40,
  gray50,
  gray70,
  gray100,
  gray20Hover,
  gray70Hover,
  warmGray10,
  warmGray20,
  warmGray40,
  warmGray50,
  warmGray70,
  warmGray100,
  warmGray20Hover,
  warmGray70Hover,
  coolGray10,
  coolGray20,
  coolGray40,
  coolGray50,
  coolGray70,
  coolGray100,
  coolGray20Hover,
  coolGray70Hover,
} from '@carbon/colors';

export const tagBackgroundRed = {
  whiteTheme: red20,
  g10: red20,
  g90: red70,
  g100: red70,
};

export const tagColorRed = {
  whiteTheme: red70,
  g10: red70,
  g90: red20,
  g100: red20,
};

export const tagHoverRed = {
  whiteTheme: red20Hover,
  g10: red20Hover,
  g90: red70Hover,
  g100: red70Hover,
};

export const tagBackgroundMagenta = {
  whiteTheme: magenta20,
  g10: magenta20,
  g90: magenta70,
  g100: magenta70,
};

export const tagColorMagenta = {
  whiteTheme: magenta70,
  g10: magenta70,
  g90: magenta20,
  g100: magenta20,
};

export const tagHoverMagenta = {
  whiteTheme: magenta20Hover,
  g10: magenta20Hover,
  g90: magenta70Hover,
  g100: magenta70Hover,
};

export const tagBackgroundPurple = {
  whiteTheme: purple20,
  g10: purple20,
  g90: purple70,
  g100: purple70,
};

export const tagColorPurple = {
  whiteTheme: purple70,
  g10: purple70,
  g90: purple20,
  g100: purple20,
};

export const tagHoverPurple = {
  whiteTheme: purple20Hover,
  g10: purple20Hover,
  g90: purple70Hover,
  g100: purple70Hover,
};

export const tagBackgroundBlue = {
  whiteTheme: blue20,
  g10: blue20,
  g90: blue70,
  g100: blue70,
};

export const tagColorBlue = {
  whiteTheme: blue70,
  g10: blue70,
  g90: blue20,
  g100: blue20,
};

export const tagHoverBlue = {
  whiteTheme: blue20Hover,
  g10: blue20Hover,
  g90: blue70Hover,
  g100: blue70Hover,
};

export const tagBackgroundCyan = {
  whiteTheme: cyan20,
  g10: cyan20,
  g90: cyan70,
  g100: cyan70,
};

export const tagColorCyan = {
  whiteTheme: cyan70,
  g10: cyan70,
  g90: cyan20,
  g100: cyan20,
};

export const tagHoverCyan = {
  whiteTheme: cyan20Hover,
  g10: cyan20Hover,
  g90: cyan70Hover,
  g100: cyan70Hover,
};
export const tagBackgroundTeal = {
  whiteTheme: teal20,
  g10: teal20,
  g90: teal70,
  g100: teal70,
};
export const tagColorTeal = {
  whiteTheme: teal70,
  g10: teal70,
  g90: teal20,
  g100: teal20,
};

export const tagHoverTeal = {
  whiteTheme: teal20Hover,
  g10: teal20Hover,
  g90: teal70Hover,
  g100: teal70Hover,
};

export const tagBackgroundGreen = {
  whiteTheme: green20,
  g10: green20,
  g90: green70,
  g100: green70,
};

export const tagColorGreen = {
  whiteTheme: green70,
  g10: green70,
  g90: green20,
  g100: green20,
};

export const tagHoverGreen = {
  whiteTheme: green20Hover,
  g10: green20Hover,
  g90: green70Hover,
  g100: green70Hover,
};

export const tagBackgroundGray = {
  whiteTheme: gray20,
  g10: gray20,
  g90: gray70,
  g100: gray70,
};

export const tagColorGray = {
  whiteTheme: gray100,
  g10: gray100,
  g90: gray10,
  g100: gray10,
};

export const tagHoverGray = {
  whiteTheme: gray20Hover,
  g10: gray20Hover,
  g90: gray70Hover,
  g100: gray70Hover,
};

export const tagBackgroundCoolGray = {
  whiteTheme: coolGray20,
  g10: coolGray20,
  g90: coolGray70,
  g100: coolGray70,
};

export const tagColorCoolGray = {
  whiteTheme: coolGray100,
  g10: coolGray100,
  g90: coolGray10,
  g100: coolGray10,
};

export const tagHoverCoolGray = {
  whiteTheme: coolGray20Hover,
  g10: coolGray20Hover,
  g90: coolGray70Hover,
  g100: coolGray70Hover,
};

export const tagBackgroundWarmGray = {
  whiteTheme: warmGray20,
  g10: warmGray20,
  g90: warmGray70,
  g100: warmGray70,
};

export const tagColorWarmGray = {
  whiteTheme: warmGray100,
  g10: warmGray100,
  g90: warmGray10,
  g100: warmGray10,
};

export const tagHoverWarmGray = {
  whiteTheme: warmGray20Hover,
  g10: warmGray20Hover,
  g90: warmGray70Hover,
  g100: warmGray70Hover,
};

export const tagBorderRed = {
  whiteTheme: red40,
  g10: red40,
  g90: red50,
  g100: red50,
};

export const tagBorderBlue = {
  whiteTheme: blue40,
  g10: blue40,
  g90: blue50,
  g100: blue50,
};

export const tagBorderCyan = {
  whiteTheme: cyan40,
  g10: cyan40,
  g90: cyan50,
  g100: cyan50,
};

export const tagBorderTeal = {
  whiteTheme: teal40,
  g10: teal40,
  g90: teal50,
  g100: teal50,
};

export const tagBorderGreen = {
  whiteTheme: green40,
  g10: green40,
  g90: green50,
  g100: green50,
};

export const tagBorderMagenta = {
  whiteTheme: magenta40,
  g10: magenta40,
  g90: magenta50,
  g100: magenta50,
};

export const tagBorderPurple = {
  whiteTheme: purple40,
  g10: purple40,
  g90: purple50,
  g100: purple50,
};

export const tagBorderGray = {
  whiteTheme: gray40,
  g10: gray40,
  g90: gray50,
  g100: gray50,
};

export const tagBorderCoolGray = {
  whiteTheme: coolGray40,
  g10: coolGray40,
  g90: coolGray50,
  g100: coolGray50,
};

export const tagBorderWarmGray = {
  whiteTheme: warmGray40,
  g10: warmGray40,
  g90: warmGray50,
  g100: warmGray50,
};