@hitachivantara/uikit-styles/dist/tokens/colors.js

UI Kit styling solution.

import { indigo } from "../palette.js";
import { ds5Colors, oldVizColors, getColors } from "./colorsCompat.js";
const base = {
  /** @deprecated use `textLight` instead */
  base_light: "#FBFCFC",
  /** @deprecated use `textDark` instead */
  base_dark: "#414141"
};
const categorical = {
  cat1: "#95AFE8",
  cat2: "#E89E5D",
  cat3: "#73BAA5",
  cat4: "#6F749F",
  cat5: "#D17A7C",
  cat6: "#FFDA8A",
  cat7: "#7DC1DB",
  cat8: "#B67EA3",
  cat9: "#F2BC66",
  cat10: "#2D86B3",
  cat11: "#FC9AAA",
  cat12: "#8EBA8C"
};
const common = {
  ...base,
  ...categorical,
  ...oldVizColors
};
const light = {
  ...getColors(ds5Colors, "light"),
  primary: ds5Colors.primary[0],
  primaryDeep: ds5Colors.primary_80[0],
  primaryStrong: ds5Colors.primary_80[0],
  primarySubtle: ds5Colors.primary_20[0],
  primaryDimmed: ds5Colors.primary_20[0],
  positive: ds5Colors.positive[0],
  positiveDeep: ds5Colors.positive_120[0],
  positiveStrong: ds5Colors.positive_80[0],
  positiveDimmed: ds5Colors.positive_20,
  positiveSubtle: ds5Colors.positive_20,
  positiveBorder: ds5Colors.positive_20,
  warning: ds5Colors.warning[0],
  warningDeep: ds5Colors.warning_140[0],
  warningStrong: ds5Colors.warning_120[0],
  warningDimmed: ds5Colors.warning_20,
  warningSubtle: ds5Colors.warning_20,
  warningBorder: ds5Colors.warning_20,
  negative: ds5Colors.negative[0],
  negativeDeep: ds5Colors.negative_120[0],
  negativeStrong: ds5Colors.negative_80[0],
  negativeDimmed: ds5Colors.negative_20,
  negativeSubtle: ds5Colors.negative_20,
  negativeBorder: ds5Colors.negative_20,
  info: ds5Colors.neutral[0],
  infoDeep: ds5Colors.neutral[0],
  infoStrong: ds5Colors.neutral[0],
  infoDimmed: ds5Colors.neutral_20,
  infoSubtle: ds5Colors.neutral_20,
  infoBorder: ds5Colors.neutral_20,
  accent: indigo[600],
  accentDeep: indigo[800],
  accentStrong: indigo[700],
  accentSubtle: indigo[100],
  accentDimmed: indigo[50],
  accentBorder: indigo[200],
  text: ds5Colors.secondary[0],
  textSubtle: ds5Colors.secondary_80[0],
  textDisabled: ds5Colors.secondary_60[0],
  textDimmed: ds5Colors.atmo1[0],
  textLight: base.base_light,
  textDark: base.base_dark,
  border: ds5Colors.atmo4[0],
  borderSubtle: ds5Colors.atmo3[0],
  borderStrong: ds5Colors.secondary_80[0],
  borderDisabled: ds5Colors.secondary_60[0],
  bgPage: ds5Colors.atmo2[0],
  bgContainer: ds5Colors.atmo1[0],
  bgPageSecondary: ds5Colors.atmo3[0],
  bgContainerSecondary: ds5Colors.atmo1[0],
  bgHover: ds5Colors.primary_20[0],
  bgDisabled: ds5Colors.atmo3[0],
  bgOverlay: `color-mix(in srgb, ${ds5Colors.atmo4[0]} 80%, transparent)`,
  dimmer: "#FFFFFF",
  shad1: "rgba(65, 65, 65, 0.12)",
  shadow: "0 2px 12px rgba(65,65,65,0.12)",
  ...categorical
};
const dark = {
  ...getColors(ds5Colors, "dark"),
  primary: ds5Colors.primary[1],
  primaryDeep: ds5Colors.primary_80[1],
  primaryStrong: ds5Colors.primary_80[1],
  primarySubtle: ds5Colors.primary_20[1],
  primaryDimmed: ds5Colors.primary_20[1],
  positive: ds5Colors.positive[1],
  positiveDeep: ds5Colors.positive_120[1],
  positiveStrong: ds5Colors.positive_80[1],
  positiveDimmed: ds5Colors.positive_20,
  positiveSubtle: ds5Colors.positive_20,
  positiveBorder: ds5Colors.positive_20,
  warning: ds5Colors.warning[1],
  warningDeep: ds5Colors.warning_140[1],
  warningStrong: ds5Colors.warning_120[1],
  warningDimmed: ds5Colors.warning_20,
  warningSubtle: ds5Colors.warning_20,
  warningBorder: ds5Colors.warning_20,
  negative: ds5Colors.negative[1],
  negativeDeep: ds5Colors.negative_120[1],
  negativeStrong: ds5Colors.negative_80[1],
  negativeDimmed: ds5Colors.negative_20,
  negativeSubtle: ds5Colors.negative_20,
  negativeBorder: ds5Colors.negative_20,
  info: ds5Colors.neutral[1],
  infoDeep: ds5Colors.neutral[1],
  infoStrong: ds5Colors.neutral[1],
  infoDimmed: ds5Colors.neutral_20,
  infoSubtle: ds5Colors.neutral_20,
  infoBorder: ds5Colors.neutral_20,
  accent: indigo[500],
  accentDeep: indigo[700],
  accentStrong: indigo[600],
  accentSubtle: indigo[900],
  accentDimmed: indigo[950],
  accentBorder: indigo[800],
  text: ds5Colors.secondary[1],
  textSubtle: ds5Colors.secondary_80[1],
  textDisabled: ds5Colors.secondary_60[1],
  textDimmed: ds5Colors.atmo1[1],
  textLight: base.base_light,
  textDark: base.base_dark,
  border: ds5Colors.atmo4[1],
  borderSubtle: ds5Colors.atmo3[1],
  borderStrong: ds5Colors.secondary_80[0],
  borderDisabled: ds5Colors.secondary_60[0],
  bgPage: ds5Colors.atmo2[1],
  bgContainer: ds5Colors.atmo1[1],
  bgPageSecondary: ds5Colors.atmo3[1],
  bgContainerSecondary: ds5Colors.atmo1[1],
  bgHover: ds5Colors.primary_20[1],
  bgDisabled: ds5Colors.atmo3[1],
  bgOverlay: `color-mix(in srgb, ${ds5Colors.atmo4[1]} 80%, transparent)`,
  dimmer: "#000000",
  shad1: "rgba(0,0,0,.16)",
  shadow: "0 3px 5px rgba(0,0,0,.16)",
  ...categorical
};
const colors = {
  common,
  light,
  dark
};
export {
  colors
};