baseui/themes/light-theme/color-semantic-tokens.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _colorFoundationTokens = _interopRequireDefault(require("./color-foundation-tokens"));
var _util = require("../../styles/util");
var _colorPrimitiveTokens = _interopRequireDefault(require("../../tokens/color-primitive-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.
*/
var _default = (
// themePrimitives or foundation colors
foundation = _colorFoundationTokens.default) => {
  const core = {
    // Background
    backgroundPrimary: foundation.primaryB,
    backgroundSecondary: _colorPrimitiveTokens.default.gray50,
    backgroundTertiary: _colorPrimitiveTokens.default.gray100,
    backgroundInversePrimary: foundation.primaryA,
    backgroundInverseSecondary: _colorPrimitiveTokens.default.gray900,
    // Content
    contentPrimary: foundation.primaryA,
    contentSecondary: _colorPrimitiveTokens.default.gray800,
    contentTertiary: _colorPrimitiveTokens.default.gray700,
    contentInversePrimary: foundation.primaryB,
    contentInverseSecondary: _colorPrimitiveTokens.default.gray200,
    contentInverseTertiary: _colorPrimitiveTokens.default.gray400,
    // Border
    borderOpaque: _colorPrimitiveTokens.default.gray50,
    borderTransparent: (0, _util.hexToRgb)(foundation.primaryA, '0.08') || (0, _util.hexToRgb)(_colorFoundationTokens.default.primaryA, '0.08') || '',
    borderSelected: foundation.primaryA,
    borderInverseOpaque: _colorPrimitiveTokens.default.gray800,
    borderInverseTransparent: (0, _util.hexToRgb)(foundation.primaryB, '0.2') || (0, _util.hexToRgb)(_colorFoundationTokens.default.primaryB, '0.2') || '',
    borderInverseSelected: foundation.primaryB,
    // brand default
    brandBackgroundPrimary: _colorPrimitiveTokens.default.brandDefault600,
    brandBackgroundSecondary: _colorPrimitiveTokens.default.brandDefault50,
    brandBackgroundTertiary: _colorPrimitiveTokens.default.white,
    brandBackgroundDisabled: _colorPrimitiveTokens.default.brandDefault50,
    brandContentPrimary: _colorPrimitiveTokens.default.brandDefault600,
    brandContentOnPrimary: _colorPrimitiveTokens.default.white,
    brandContentOnSecondary: _colorPrimitiveTokens.default.brandDefault700,
    brandContentOnTertiary: _colorPrimitiveTokens.default.black,
    brandContentOnGradient: _colorPrimitiveTokens.default.white,
    brandContentDisabled: _colorPrimitiveTokens.default.brandDefault300,
    brandBorderAccessible: _colorPrimitiveTokens.default.brandDefault600,
    brandBorderSubtle: _colorPrimitiveTokens.default.brandDefault100
  };
  const coreExtensions = {
    // Backgrounds
    backgroundStateDisabled: _colorPrimitiveTokens.default.gray50,
    backgroundOverlay: (0, _util.hexToRgb)(_colorPrimitiveTokens.default.black, '0.5') || '',
    backgroundOverlayArt: (0, _util.hexToRgb)(_colorPrimitiveTokens.default.black, '0.00') || '',
    backgroundAccent: foundation.accent,
    backgroundNegative: foundation.negative,
    backgroundWarning: foundation.warning,
    backgroundPositive: foundation.positive,
    backgroundAccentLight: _colorPrimitiveTokens.default.blue50,
    backgroundNegativeLight: _colorPrimitiveTokens.default.red50,
    backgroundWarningLight: _colorPrimitiveTokens.default.yellow50,
    backgroundPositiveLight: _colorPrimitiveTokens.default.green50,
    backgroundAlwaysDark: _colorPrimitiveTokens.default.black,
    backgroundAlwaysLight: _colorPrimitiveTokens.default.white,
    // Content
    contentStateDisabled: _colorPrimitiveTokens.default.gray400,
    contentOnColor: _colorPrimitiveTokens.default.white,
    contentOnColorInverse: _colorPrimitiveTokens.default.black,
    contentAccent: _colorPrimitiveTokens.default.blue600,
    contentNegative: _colorPrimitiveTokens.default.red600,
    contentWarning: _colorPrimitiveTokens.default.yellow600,
    contentPositive: _colorPrimitiveTokens.default.green600,
    tagRedContentSecondary: _colorPrimitiveTokens.default.red700,
    // Border
    borderStateDisabled: _colorPrimitiveTokens.default.gray50,
    borderAccent: _colorPrimitiveTokens.default.blue600,
    borderAccentLight: _colorPrimitiveTokens.default.blue300,
    borderNegative: _colorPrimitiveTokens.default.red600,
    borderNegativeLight: _colorPrimitiveTokens.default.red300,
    borderWarning: _colorPrimitiveTokens.default.yellow600,
    borderWarningLight: _colorPrimitiveTokens.default.yellow200,
    borderPositive: _colorPrimitiveTokens.default.green600,
    borderPositiveLight: _colorPrimitiveTokens.default.green300,
    tagRedBorderSecondarySelected: _colorPrimitiveTokens.default.red700,
    // Programs
    safety: _colorPrimitiveTokens.default.blue600,
    eatsGreen400: _colorPrimitiveTokens.default.green600,
    freightBlue400: _colorPrimitiveTokens.default.cobalt400,
    rewardsTier1: _colorPrimitiveTokens.default.blue600,
    rewardsTier2: _colorPrimitiveTokens.default.yellow300,
    rewardsTier3: _colorPrimitiveTokens.default.platinum400,
    rewardsTier4: _colorPrimitiveTokens.default.black,
    membership: _colorPrimitiveTokens.default.yellow600
  };
  /** @deprecated these tokens are deprecated */
  const deprecated = {
    jumpRed400: _colorPrimitiveTokens.default.red400,
    backgroundOverlayLight: coreExtensions.backgroundOverlay,
    backgroundOverlayDark: coreExtensions.backgroundOverlay,
    backgroundLightAccent: coreExtensions.backgroundAccentLight,
    backgroundLightPositive: coreExtensions.backgroundPositiveLight,
    backgroundLightWarning: coreExtensions.backgroundWarningLight,
    backgroundLightNegative: coreExtensions.backgroundNegativeLight
  };
  const tagTokens = {
    tagGrayBackgroundPrimary: _colorPrimitiveTokens.default.gray600,
    tagGrayBackgroundSecondary: _colorPrimitiveTokens.default.gray50,
    tagGrayContentPrimary: _colorPrimitiveTokens.default.white,
    tagGrayContentSecondary: _colorPrimitiveTokens.default.gray700,
    tagGrayBackgroundStateDisabled: _colorPrimitiveTokens.default.gray50,
    tagGrayContentStateDisabled: _colorPrimitiveTokens.default.gray300,
    tagGrayBorderPrimaryUnselected: _colorPrimitiveTokens.default.gray700,
    tagGrayBorderSecondaryUnselected: _colorPrimitiveTokens.default.gray100,
    tagGrayBorderSecondarySelected: _colorPrimitiveTokens.default.gray600,
    tagRedBackgroundPrimary: _colorPrimitiveTokens.default.red600,
    tagRedBackgroundSecondary: _colorPrimitiveTokens.default.red50,
    tagRedContentPrimary: _colorPrimitiveTokens.default.white,
    tagRedContentSecondary: _colorPrimitiveTokens.default.red700,
    tagRedBackgroundStateDisabled: _colorPrimitiveTokens.default.red50,
    tagRedContentStateDisabled: _colorPrimitiveTokens.default.red300,
    tagRedBorderPrimaryUnselected: _colorPrimitiveTokens.default.red700,
    tagRedBorderSecondaryUnselected: _colorPrimitiveTokens.default.red100,
    tagRedBorderSecondarySelected: _colorPrimitiveTokens.default.red700,
    tagOrangeBackgroundPrimary: _colorPrimitiveTokens.default.orange600,
    tagOrangeBackgroundSecondary: _colorPrimitiveTokens.default.orange50,
    tagOrangeContentPrimary: _colorPrimitiveTokens.default.white,
    tagOrangeContentSecondary: _colorPrimitiveTokens.default.orange700,
    tagOrangeBackgroundStateDisabled: _colorPrimitiveTokens.default.orange50,
    tagOrangeContentStateDisabled: _colorPrimitiveTokens.default.orange300,
    tagYellowBackgroundPrimary: _colorPrimitiveTokens.default.yellow300,
    tagOrangeBorderPrimaryUnselected: _colorPrimitiveTokens.default.orange700,
    tagYellowBackgroundSecondary: _colorPrimitiveTokens.default.yellow50,
    tagOrangeBorderSecondaryUnselected: _colorPrimitiveTokens.default.orange100,
    tagOrangeBorderSecondarySelected: _colorPrimitiveTokens.default.orange700,
    tagYellowContentPrimary: _colorPrimitiveTokens.default.black,
    tagYellowContentSecondary: _colorPrimitiveTokens.default.yellow700,
    tagYellowBackgroundStateDisabled: _colorPrimitiveTokens.default.yellow50,
    tagYellowContentStateDisabled: _colorPrimitiveTokens.default.yellow200,
    tagYellowBorderPrimaryUnselected: _colorPrimitiveTokens.default.yellow400,
    tagYellowBorderSecondaryUnselected: _colorPrimitiveTokens.default.yellow100,
    tagYellowBorderSecondarySelected: _colorPrimitiveTokens.default.yellow700,
    tagGreenBackgroundPrimary: _colorPrimitiveTokens.default.green600,
    tagGreenBackgroundSecondary: _colorPrimitiveTokens.default.green50,
    tagGreenContentPrimary: _colorPrimitiveTokens.default.white,
    tagGreenContentSecondary: _colorPrimitiveTokens.default.green700,
    tagGreenBackgroundStateDisabled: _colorPrimitiveTokens.default.green50,
    tagGreenContentStateDisabled: _colorPrimitiveTokens.default.green300,
    tagGreenBorderPrimaryUnselected: _colorPrimitiveTokens.default.green700,
    tagBlueBackgroundPrimary: _colorPrimitiveTokens.default.blue600,
    tagBlueBackgroundSecondary: _colorPrimitiveTokens.default.blue50,
    tagGreenBorderSecondaryUnselected: _colorPrimitiveTokens.default.green100,
    tagBlueContentPrimary: _colorPrimitiveTokens.default.white,
    tagGreenBorderSecondarySelected: _colorPrimitiveTokens.default.green700,
    tagBlueContentSecondary: _colorPrimitiveTokens.default.blue700,
    tagBlueBackgroundStateDisabled: _colorPrimitiveTokens.default.blue50,
    tagBlueContentStateDisabled: _colorPrimitiveTokens.default.blue300,
    tagBlueBorderPrimaryUnselected: _colorPrimitiveTokens.default.blue700,
    tagPurpleBackgroundPrimary: _colorPrimitiveTokens.default.purple600,
    tagPurpleBackgroundSecondary: _colorPrimitiveTokens.default.purple50,
    tagBlueBorderSecondaryUnselected: _colorPrimitiveTokens.default.blue100,
    tagBlueBorderSecondarySelected: _colorPrimitiveTokens.default.blue700,
    tagPurpleContentPrimary: _colorPrimitiveTokens.default.white,
    tagPurpleContentSecondary: _colorPrimitiveTokens.default.purple700,
    tagPurpleBackgroundStateDisabled: _colorPrimitiveTokens.default.purple50,
    tagPurpleContentStateDisabled: _colorPrimitiveTokens.default.purple300,
    tagPurpleBorderPrimaryUnselected: _colorPrimitiveTokens.default.purple700,
    tagMagentaBackgroundPrimary: _colorPrimitiveTokens.default.magenta600,
    tagPurpleBorderSecondaryUnselected: _colorPrimitiveTokens.default.purple100,
    tagMagentaBackgroundSecondary: _colorPrimitiveTokens.default.magenta50,
    tagPurpleBorderSecondarySelected: _colorPrimitiveTokens.default.purple700,
    tagMagentaContentPrimary: _colorPrimitiveTokens.default.white,
    tagMagentaContentSecondary: _colorPrimitiveTokens.default.magenta700,
    tagMagentaBackgroundStateDisabled: _colorPrimitiveTokens.default.magenta50,
    tagMagentaContentStateDisabled: _colorPrimitiveTokens.default.magenta300,
    tagMagentaBorderPrimaryUnselected: _colorPrimitiveTokens.default.magenta700,
    tagMagentaBorderSecondaryUnselected: _colorPrimitiveTokens.default.magenta100,
    tagMagentaBorderSecondarySelected: _colorPrimitiveTokens.default.magenta700,
    tagTealBackgroundPrimary: _colorPrimitiveTokens.default.teal600,
    tagTealBackgroundSecondary: _colorPrimitiveTokens.default.teal50,
    tagTealContentPrimary: _colorPrimitiveTokens.default.white,
    tagTealContentSecondary: _colorPrimitiveTokens.default.teal700,
    tagTealBackgroundStateDisabled: _colorPrimitiveTokens.default.teal50,
    tagTealContentStateDisabled: _colorPrimitiveTokens.default.teal300,
    tagTealBorderPrimaryUnselected: _colorPrimitiveTokens.default.teal700,
    tagTealBorderSecondaryUnselected: _colorPrimitiveTokens.default.teal100,
    tagTealBorderSecondarySelected: _colorPrimitiveTokens.default.teal700,
    tagLimeBackgroundPrimary: _colorPrimitiveTokens.default.lime600,
    tagLimeBackgroundSecondary: _colorPrimitiveTokens.default.lime50,
    tagLimeContentPrimary: _colorPrimitiveTokens.default.white,
    tagLimeContentSecondary: _colorPrimitiveTokens.default.lime700,
    tagLimeBackgroundStateDisabled: _colorPrimitiveTokens.default.lime50,
    tagLimeContentStateDisabled: _colorPrimitiveTokens.default.lime300,
    tagLimeBorderPrimaryUnselected: _colorPrimitiveTokens.default.lime700,
    tagLimeBorderSecondaryUnselected: _colorPrimitiveTokens.default.lime100,
    tagLimeBorderSecondarySelected: _colorPrimitiveTokens.default.lime700
  };
  const hoveredAndPressedColors = {
    hoverOverlayInverseAlpha: 'rgba(255, 255, 255, 0.1)',
    hoverOverlayAlpha: 'rgba(0, 0, 0, 0.04)',
    hoverNegativeAlpha: 'rgba(222, 17, 53, 0.1)',
    pressedOverlayAlpha: 'rgba(0, 0, 0, 0.08)',
    pressedOverlayInverseAlpha: 'rgba(255, 255, 255, 0.2)',
    pressedNegativeAlpha: 'rgba(222, 17, 53, 0.15)'
  };
  return {
    ...core,
    ...coreExtensions,
    ...tagTokens,
    ...hoveredAndPressedColors,
    ...deprecated
  };
};
exports.default = _default;