baseui/themes/dark-theme/color-component-tokens.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _colorSemanticTokens = _interopRequireDefault(require("./color-semantic-tokens"));
var _tokens = require("../../tokens");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

const defaultSemanticColors = (0, _colorSemanticTokens.default)();
const tagHoverBackground = `rgba(255, 255, 255, 0.2)`;

/* ---- Component colors ---- */
var _default = (semanticColors = defaultSemanticColors) => ({
  //Banner
  bannerActionLowInfo: _tokens.primitiveDarkColors.blue100Dark,
  bannerActionLowNegative: _tokens.primitiveDarkColors.red200Dark,
  bannerActionLowPositive: _tokens.primitiveDarkColors.green200Dark,
  bannerActionLowWarning: _tokens.primitiveDarkColors.yellow200Dark,
  bannerActionHighInfo: _tokens.primitiveDarkColors.blue300Dark,
  bannerActionHighNegative: _tokens.primitiveDarkColors.red300Dark,
  bannerActionHighPositive: _tokens.primitiveDarkColors.green300Dark,
  bannerActionHighWarning: _tokens.primitiveDarkColors.yellow300Dark,
  // BottomNavigation
  bottomNavigationText: _tokens.primitiveDarkColors.gray600Dark,
  bottomNavigationSelectedText: semanticColors.contentPrimary,
  // Buttons
  buttonPrimaryFill: semanticColors.backgroundInversePrimary,
  buttonPrimaryText: semanticColors.contentInversePrimary,
  buttonPrimaryHover: _tokens.primitiveDarkColors.gray700Dark,
  buttonPrimaryActive: _tokens.primitiveDarkColors.gray600Dark,
  buttonPrimarySelectedFill: semanticColors.backgroundInversePrimary,
  buttonPrimarySelectedText: semanticColors.contentInversePrimary,
  buttonPrimarySpinnerForeground: semanticColors.backgroundAccent,
  buttonPrimarySpinnerBackground: semanticColors.backgroundPrimary,
  buttonSecondaryFill: semanticColors.backgroundTertiary,
  buttonSecondaryText: semanticColors.contentPrimary,
  buttonSecondaryHover: _tokens.primitiveDarkColors.gray300Dark,
  buttonSecondaryActive: _tokens.primitiveDarkColors.gray400Dark,
  buttonSecondarySelectedFill: semanticColors.backgroundInversePrimary,
  buttonSecondarySelectedText: semanticColors.contentInversePrimary,
  buttonSecondarySpinnerForeground: semanticColors.backgroundAccent,
  buttonSecondarySpinnerBackground: semanticColors.backgroundPrimary,
  buttonTertiaryFill: 'transparent',
  buttonTertiaryText: semanticColors.contentPrimary,
  buttonTertiaryHover: _tokens.primitiveDarkColors.gray100Dark,
  buttonTertiaryActive: _tokens.primitiveDarkColors.gray200Dark,
  buttonTertiarySelectedFill: semanticColors.backgroundInversePrimary,
  buttonTertiarySelectedText: semanticColors.contentInversePrimary,
  buttonTertiaryDisabledActiveFill: semanticColors.backgroundStateDisabled,
  buttonTertiaryDisabledActiveText: semanticColors.contentStateDisabled,
  buttonTertiarySpinnerForeground: semanticColors.backgroundAccent,
  buttonTertiarySpinnerBackground: semanticColors.backgroundTertiary,
  buttonDisabledFill: semanticColors.backgroundStateDisabled,
  buttonDisabledText: semanticColors.contentStateDisabled,
  buttonDisabledActiveFill: semanticColors.backgroundStateDisabled,
  buttonDisabledActiveText: semanticColors.contentStateDisabled,
  buttonDisabledSpinnerForeground: semanticColors.contentStateDisabled,
  buttonDisabledSpinnerBackground: semanticColors.backgroundPrimary,
  // Breadcrumbs
  breadcrumbsText: semanticColors.contentPrimary,
  breadcrumbsSeparatorFill: semanticColors.contentTertiary,
  // Datepicker
  calendarBackground: semanticColors.backgroundPrimary,
  calendarForeground: semanticColors.contentPrimary,
  calendarForegroundDisabled: semanticColors.contentStateDisabled,
  calendarHeaderBackground: semanticColors.backgroundPrimary,
  calendarHeaderForeground: semanticColors.contentPrimary,
  calendarHeaderBackgroundActive: semanticColors.backgroundInversePrimary,
  calendarHeaderForegroundDisabled: semanticColors.contentStateDisabled,
  calendarDayForegroundPseudoSelected: semanticColors.backgroundInversePrimary,
  calendarDayBackgroundPseudoSelectedHighlighted: semanticColors.backgroundTertiary,
  calendarDayForegroundPseudoSelectedHighlighted: semanticColors.contentPrimary,
  calendarDayBackgroundSelected: semanticColors.backgroundInversePrimary,
  calendarDayForegroundSelected: semanticColors.contentInversePrimary,
  calendarDayBackgroundSelectedHighlighted: semanticColors.backgroundInversePrimary,
  calendarDayForegroundSelectedHighlighted: semanticColors.contentInversePrimary,
  // Combobox
  comboboxListItemFocus: semanticColors.backgroundSecondary,
  comboboxListItemHover: semanticColors.backgroundTertiary,
  // FileUploader
  fileUploaderBackgroundColor: semanticColors.backgroundSecondary,
  fileUploaderBackgroundColorActive: semanticColors.backgroundPrimary,
  fileUploaderBorderColorActive: semanticColors.borderSelected,
  fileUploaderBorderColorDefault: semanticColors.borderOpaque,
  fileUploaderMessageColor: semanticColors.contentPrimary,
  // Links
  linkText: semanticColors.contentPrimary,
  linkVisited: _tokens.primitiveDarkColors.gray500Dark,
  linkHover: _tokens.primitiveDarkColors.gray700Dark,
  linkActive: _tokens.primitiveDarkColors.gray600Dark,
  // List
  listHeaderFill: semanticColors.backgroundPrimary,
  listBodyFill: semanticColors.backgroundPrimary,
  // ProgressSteps
  progressStepsCompletedText: semanticColors.contentInversePrimary,
  progressStepsCompletedFill: semanticColors.backgroundInversePrimary,
  progressStepsActiveText: semanticColors.contentInversePrimary,
  progressStepsActiveFill: semanticColors.backgroundInversePrimary,
  // Modal
  modalCloseColor: semanticColors.contentPrimary,
  modalCloseColorHover: _tokens.primitiveDarkColors.gray700Dark,
  modalCloseColorFocus: _tokens.primitiveDarkColors.gray600Dark,
  // Notification
  notificationInfoBackground: semanticColors.backgroundAccentLight,
  notificationInfoText: semanticColors.contentPrimary,
  notificationPositiveBackground: semanticColors.backgroundPositiveLight,
  notificationPositiveText: semanticColors.contentPrimary,
  notificationWarningBackground: semanticColors.backgroundWarningLight,
  notificationWarningText: semanticColors.contentPrimary,
  notificationNegativeBackground: semanticColors.backgroundNegativeLight,
  notificationNegativeText: semanticColors.contentPrimary,
  // Tag

  // Custom ramps
  tagFontDisabledRampUnit: '600',
  tagSolidFontRampUnit: '0',
  tagSolidRampUnit: '600',
  tagOutlinedFontRampUnit: '500',
  tagOutlinedRampUnit: '500',
  // Deprecated
  tagSolidHoverRampUnit: '500',
  tagSolidActiveRampUnit: '400',
  tagSolidDisabledRampUnit: '700',
  tagSolidFontHoverRampUnit: '100',
  tagLightRampUnit: '700',
  tagLightHoverRampUnit: '700',
  tagLightActiveRampUnit: '600',
  tagLightFontRampUnit: '100',
  tagLightFontHoverRampUnit: '100',
  tagOutlinedActiveRampUnit: '300',
  tagOutlinedHoverRampUnit: '800',
  tagOutlinedFontHoverRampUnit: '100',
  // Neutral
  tagNeutralFontDisabled: _tokens.primitiveDarkColors.gray400Dark,
  tagNeutralOutlinedDisabled: _tokens.primitiveDarkColors.gray400Dark,
  tagNeutralSolidFont: _tokens.primitiveDarkColors.gray900Dark,
  tagNeutralSolidBackground: _tokens.primitiveDarkColors.gray400Dark,
  tagNeutralOutlinedBackground: _tokens.primitiveDarkColors.gray100Dark,
  tagNeutralOutlinedFont: _tokens.primitiveDarkColors.gray700Dark,
  // Deprecated
  tagNeutralSolidHover: _tokens.primitiveDarkColors.gray700Dark,
  tagNeutralSolidActive: _tokens.primitiveDarkColors.gray600Dark,
  tagNeutralSolidDisabled: _tokens.primitiveDarkColors.gray100Dark,
  tagNeutralSolidFontHover: _tokens.primitiveDarkColors.gray800Dark,
  tagNeutralLightBackground: _tokens.primitiveDarkColors.gray100Dark,
  tagNeutralLightHover: _tokens.primitiveDarkColors.gray800Dark,
  tagNeutralLightActive: _tokens.primitiveDarkColors.gray700Dark,
  tagNeutralLightDisabled: _tokens.primitiveDarkColors.gray400Dark,
  tagNeutralLightFont: _tokens.primitiveDarkColors.gray900Dark,
  tagNeutralLightFontHover: _tokens.primitiveDarkColors.gray800Dark,
  tagNeutralOutlinedActive: _tokens.primitiveDarkColors.gray700Dark,
  tagNeutralOutlinedFontHover: _tokens.primitiveDarkColors.gray700Dark,
  tagNeutralOutlinedHover: tagHoverBackground,
  // Primary
  tagPrimaryOutlinedFont: _tokens.primitiveDarkColors.gray700Dark,
  tagPrimaryOutlinedBackground: _tokens.primitiveDarkColors.gray100Dark,
  tagPrimarySolidFont: _tokens.primitiveDarkColors.gray900Dark,
  tagPrimarySolidBackground: _tokens.primitiveDarkColors.gray400Dark,
  tagPrimaryFontDisabled: _tokens.primitiveDarkColors.gray400Dark,
  tagPrimaryOutlinedDisabled: _tokens.primitiveDarkColors.gray400Dark,
  // Deprecated
  tagPrimarySolidHover: _tokens.primitiveDarkColors.gray300Dark,
  tagPrimarySolidActive: _tokens.primitiveDarkColors.gray200Dark,
  tagPrimarySolidDisabled: _tokens.primitiveDarkColors.gray100Dark,
  tagPrimarySolidFontHover: _tokens.primitiveDarkColors.gray800Dark,
  tagPrimaryLightBackground: _tokens.primitiveDarkColors.gray100Dark,
  tagPrimaryLightHover: _tokens.primitiveDarkColors.gray200Dark,
  tagPrimaryLightActive: _tokens.primitiveDarkColors.gray300Dark,
  tagPrimaryLightDisabled: _tokens.primitiveDarkColors.gray400Dark,
  tagPrimaryLightFont: _tokens.primitiveDarkColors.gray900Dark,
  tagPrimaryLightFontHover: _tokens.primitiveDarkColors.gray800Dark,
  tagPrimaryOutlinedActive: _tokens.primitiveDarkColors.gray700Dark,
  tagPrimaryOutlinedFontHover: _tokens.primitiveDarkColors.gray700Dark,
  tagPrimaryOutlinedHover: tagHoverBackground,
  // Accent
  tagAccentOutlinedFont: _tokens.primitiveDarkColors.blue700Dark,
  tagAccentOutlinedBackground: _tokens.primitiveDarkColors.blue100Dark,
  tagAccentSolidFont: _tokens.primitiveDarkColors.blue900Dark,
  tagAccentSolidBackground: _tokens.primitiveDarkColors.blue500Dark,
  tagAccentFontDisabled: _tokens.primitiveDarkColors.blue400Dark,
  tagAccentOutlinedDisabled: _tokens.primitiveDarkColors.blue400Dark,
  // Deprecated
  tagAccentSolidHover: _tokens.primitiveDarkColors.blue300Dark,
  tagAccentSolidActive: _tokens.primitiveDarkColors.blue200Dark,
  tagAccentSolidDisabled: _tokens.primitiveDarkColors.blue100Dark,
  tagAccentSolidFontHover: _tokens.primitiveDarkColors.gray800Dark,
  tagAccentLightBackground: _tokens.primitiveDarkColors.blue100Dark,
  tagAccentLightHover: _tokens.primitiveDarkColors.blue200Dark,
  tagAccentLightActive: _tokens.primitiveDarkColors.blue300Dark,
  tagAccentLightDisabled: _tokens.primitiveDarkColors.blue400Dark,
  tagAccentLightFont: _tokens.primitiveDarkColors.blue900Dark,
  tagAccentLightFontHover: _tokens.primitiveDarkColors.blue800Dark,
  tagAccentOutlinedActive: _tokens.primitiveDarkColors.blue700Dark,
  tagAccentOutlinedFontHover: _tokens.primitiveDarkColors.blue700Dark,
  tagAccentOutlinedHover: tagHoverBackground,
  // Positive
  tagPositiveFontDisabled: _tokens.primitiveDarkColors.green400Dark,
  tagPositiveOutlinedDisabled: _tokens.primitiveDarkColors.green400Dark,
  tagPositiveSolidFont: _tokens.primitiveDarkColors.green900Dark,
  tagPositiveSolidBackground: _tokens.primitiveDarkColors.green500Dark,
  tagPositiveOutlinedBackground: _tokens.primitiveDarkColors.green100Dark,
  tagPositiveOutlinedFont: _tokens.primitiveDarkColors.green700Dark,
  // Deprecated
  tagPositiveSolidHover: _tokens.primitiveDarkColors.green300Dark,
  tagPositiveSolidActive: _tokens.primitiveDarkColors.green200Dark,
  tagPositiveSolidDisabled: _tokens.primitiveDarkColors.green100Dark,
  tagPositiveSolidFontHover: _tokens.primitiveDarkColors.gray800Dark,
  tagPositiveLightBackground: _tokens.primitiveDarkColors.green100Dark,
  tagPositiveLightHover: _tokens.primitiveDarkColors.green200Dark,
  tagPositiveLightActive: _tokens.primitiveDarkColors.green300Dark,
  tagPositiveLightDisabled: _tokens.primitiveDarkColors.green400Dark,
  tagPositiveLightFont: _tokens.primitiveDarkColors.green900Dark,
  tagPositiveLightFontHover: _tokens.primitiveDarkColors.green800Dark,
  tagPositiveOutlinedActive: _tokens.primitiveDarkColors.green700Dark,
  tagPositiveOutlinedFontHover: _tokens.primitiveDarkColors.green700Dark,
  tagPositiveOutlinedHover: tagHoverBackground,
  // Warning
  tagWarningOutlinedFont: _tokens.primitiveDarkColors.yellow700Dark,
  tagWarningOutlinedBackground: _tokens.primitiveDarkColors.yellow100Dark,
  tagWarningSolidFont: _tokens.primitiveDarkColors.yellow50Dark,
  tagWarningSolidBackground: _tokens.primitiveDarkColors.yellow700Dark,
  tagWarningFontDisabled: _tokens.primitiveDarkColors.yellow400Dark,
  tagWarningOutlinedDisabled: _tokens.primitiveDarkColors.yellow400Dark,
  // Deprecated
  tagWarningSolidHover: _tokens.primitiveDarkColors.yellow300Dark,
  tagWarningSolidActive: _tokens.primitiveDarkColors.yellow200Dark,
  tagWarningSolidDisabled: _tokens.primitiveDarkColors.yellow100Dark,
  tagWarningSolidFontHover: _tokens.primitiveDarkColors.gray800Dark,
  tagWarningLightBackground: _tokens.primitiveDarkColors.yellow100Dark,
  tagWarningLightHover: _tokens.primitiveDarkColors.yellow200Dark,
  tagWarningLightActive: _tokens.primitiveDarkColors.yellow300Dark,
  tagWarningLightDisabled: _tokens.primitiveDarkColors.yellow400Dark,
  tagWarningLightFont: _tokens.primitiveDarkColors.yellow900Dark,
  tagWarningLightFontHover: _tokens.primitiveDarkColors.yellow800Dark,
  tagWarningOutlinedActive: _tokens.primitiveDarkColors.yellow700Dark,
  tagWarningOutlinedFontHover: _tokens.primitiveDarkColors.yellow700Dark,
  tagWarningOutlinedHover: tagHoverBackground,
  // Negative
  tagNegativeOutlinedFont: _tokens.primitiveDarkColors.red700Dark,
  tagNegativeOutlinedBackground: _tokens.primitiveDarkColors.red100Dark,
  tagNegativeSolidFont: _tokens.primitiveDarkColors.gray900Dark,
  tagNegativeSolidBackground: _tokens.primitiveDarkColors.red500Dark,
  tagNegativeFontDisabled: _tokens.primitiveDarkColors.red400Dark,
  tagNegativeOutlinedDisabled: _tokens.primitiveDarkColors.red400Dark,
  // Deprecated
  tagNegativeSolidHover: _tokens.primitiveDarkColors.red300Dark,
  tagNegativeSolidActive: _tokens.primitiveDarkColors.red200Dark,
  tagNegativeSolidDisabled: _tokens.primitiveDarkColors.red100Dark,
  tagNegativeSolidFontHover: _tokens.primitiveDarkColors.gray800Dark,
  tagNegativeLightBackground: _tokens.primitiveDarkColors.red100Dark,
  tagNegativeLightHover: _tokens.primitiveDarkColors.red200Dark,
  tagNegativeLightActive: _tokens.primitiveDarkColors.red300Dark,
  tagNegativeLightDisabled: _tokens.primitiveDarkColors.red400Dark,
  tagNegativeLightFont: _tokens.primitiveDarkColors.red900Dark,
  tagNegativeLightFontHover: _tokens.primitiveDarkColors.red800Dark,
  tagNegativeOutlinedActive: _tokens.primitiveDarkColors.red700Dark,
  tagNegativeOutlinedFontHover: _tokens.primitiveDarkColors.red700Dark,
  tagNegativeOutlinedHover: tagHoverBackground,
  // Table
  tableHeadBackgroundColor: semanticColors.backgroundPrimary,
  tableBackground: semanticColors.backgroundPrimary,
  tableStripedBackground: semanticColors.backgroundSecondary,
  tableFilter: semanticColors.contentTertiary,
  tableFilterHeading: semanticColors.contentPrimary,
  tableFilterBackground: semanticColors.backgroundPrimary,
  tableFilterFooterBackground: semanticColors.backgroundSecondary,
  // Toast
  toastText: semanticColors.contentOnColor,
  toastPrimaryText: semanticColors.contentOnColor,
  toastInfoBackground: semanticColors.backgroundAccent,
  toastInfoText: semanticColors.contentOnColor,
  toastPositiveBackground: semanticColors.backgroundPositive,
  toastPositiveText: semanticColors.contentOnColor,
  toastWarningBackground: semanticColors.backgroundWarning,
  toastWarningText: semanticColors.contentOnColorInverse,
  toastNegativeBackground: semanticColors.backgroundNegative,
  toastNegativeText: semanticColors.contentOnColor,
  // Toggle
  toggleFill: semanticColors.backgroundPrimary,
  toggleFillChecked: semanticColors.contentPrimary,
  toggleFillDisabled: semanticColors.contentStateDisabled,
  toggleTrackFill: semanticColors.backgroundTertiary,
  toggleTrackFillDisabled: semanticColors.backgroundStateDisabled,
  // Tick
  tickFill: semanticColors.backgroundPrimary,
  tickFillHover: _tokens.primitiveDarkColors.gray100Dark,
  tickFillActive: _tokens.primitiveDarkColors.gray200Dark,
  tickFillSelected: semanticColors.contentPrimary,
  tickFillSelectedHover: _tokens.primitiveDarkColors.gray800Dark,
  tickFillSelectedHoverActive: _tokens.primitiveDarkColors.gray700Dark,
  tickFillError: semanticColors.backgroundPrimary,
  tickFillErrorHover: _tokens.primitiveDarkColors.gray100Dark,
  tickFillErrorHoverActive: _tokens.primitiveDarkColors.gray200Dark,
  tickFillErrorSelected: semanticColors.contentNegative,
  tickFillErrorSelectedHover: _tokens.primitiveDarkColors.red500Dark,
  tickFillErrorSelectedHoverActive: _tokens.primitiveDarkColors.red400Dark,
  tickFillDisabled: semanticColors.backgroundStateDisabled,
  tickBorder: semanticColors.contentTertiary,
  tickBorderError: semanticColors.borderNegative,
  tickMarkFill: semanticColors.contentInversePrimary,
  tickMarkFillError: semanticColors.contentOnColor,
  tickMarkFillDisabled: semanticColors.contentInversePrimary,
  // Slider/Toggle
  sliderTrackFill: 'transparent',
  sliderHandleFill: semanticColors.contentPrimary,
  sliderHandleFillDisabled: semanticColors.backgroundStateDisabled,
  sliderHandleInnerFill: semanticColors.contentPrimary,
  sliderTrackFillHover: _tokens.primitiveDarkColors.gray300Dark,
  sliderTrackFillActive: _tokens.primitiveDarkColors.gray400Dark,
  sliderTrackFillDisabled: semanticColors.backgroundStateDisabled,
  sliderHandleInnerFillDisabled: semanticColors.backgroundStateDisabled,
  sliderHandleInnerFillSelectedHover: _tokens.primitiveDarkColors.gray600Dark,
  sliderHandleInnerFillSelectedActive: _tokens.primitiveDarkColors.gray700Dark,
  // Inputs
  inputBorder: semanticColors.borderOpaque,
  inputFill: semanticColors.backgroundSecondary,
  inputFillError: semanticColors.backgroundPrimary,
  inputFillDisabled: semanticColors.backgroundStateDisabled,
  inputFillActive: semanticColors.backgroundPrimary,
  inputFillPositive: semanticColors.backgroundPrimary,
  inputTextDisabled: semanticColors.contentStateDisabled,
  inputBorderError: semanticColors.borderNegative,
  inputBorderPositive: semanticColors.borderPositive,
  inputEnhancerFill: semanticColors.contentPrimary,
  inputEnhancerFillDisabled: semanticColors.contentStateDisabled,
  inputEnhancerTextDisabled: semanticColors.contentStateDisabled,
  inputPlaceholder: semanticColors.contentTertiary,
  inputPlaceholderDisabled: semanticColors.contentStateDisabled,
  // Menu
  menuFill: semanticColors.backgroundPrimary,
  menuFillHover: semanticColors.backgroundSecondary,
  menuFontDefault: semanticColors.contentPrimary,
  menuFontDisabled: semanticColors.contentStateDisabled,
  menuFontHighlighted: semanticColors.contentPrimary,
  menuFontSelected: semanticColors.contentPrimary,
  // Tab
  tabBarFill: semanticColors.backgroundPrimary,
  tabColor: semanticColors.contentTertiary,
  // Spinner
  spinnerTrackFill: semanticColors.backgroundTertiary,
  // Progress bar
  progressbarTrackFill: semanticColors.backgroundTertiary,
  // Tooltip
  tooltipBackground: semanticColors.backgroundInverseSecondary,
  tooltipText: semanticColors.contentInversePrimary,
  // Rating
  ratingInactiveFill: _tokens.primitiveDarkColors.gray500Dark,
  ratingStroke: _tokens.primitiveDarkColors.gray700Dark
});
exports.default = _default;