baseui/tag/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Text = exports.StartEnhancerContainer = exports.Root = exports.Action = void 0;
exports.customOnRamp = customOnRamp;
var _tint = _interopRequireDefault(require("polished/lib/color/tint.js"));
var _shade = _interopRequireDefault(require("polished/lib/color/shade.js"));
var _styles = require("../styles");
var _constants = require("./constants");
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.
*/

function customOnRamp(color, unit) {
  // This is a temporary fix to prevent the tag from crashing when the color is not defined
  if (!color && !(unit === '0' || unit === '1000')) {
    return undefined;
  }
  switch (unit) {
    case '0':
      return 'white';
    case '50':
      return (0, _tint.default)(0.8, color);
    case '100':
      return (0, _tint.default)(0.6, color);
    case '200':
      return (0, _tint.default)(0.4, color);
    case '300':
      return (0, _tint.default)(0.2, color);
    case '400':
      return color;
    case '500':
      return (0, _shade.default)(0.2, color);
    case '600':
      return (0, _shade.default)(0.4, color);
    case '700':
      return (0, _shade.default)(0.6, color);
    case '800':
      return (0, _shade.default)(0.8, color);
    case '1000':
      return 'black';
    default:
      return color;
  }
}
const COLOR_STATE = {
  disabled: 'disabled',
  primary: 'primary',
  secondary: 'secondary'
};

// Probably best to bake this into the theme once we hit our next major.
// @ts-ignore
const pick = (theme, light, dark) => theme.name && theme.name.includes('dark') ? dark : light;
const neutralColorStates = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.disabled]: (theme, color) => ({
    color: theme.colors.tagNeutralFontDisabled,
    backgroundColor: pick(theme, theme.colors.gray50, theme.colors.gray100Dark),
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.primary]: (theme, color) => ({
    color: theme.colors.tagNeutralSolidFont,
    backgroundColor: theme.colors.tagNeutralSolidBackground,
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.secondary]: (theme, color) => ({
    color: theme.colors.tagNeutralOutlinedFont,
    backgroundColor: theme.colors.tagNeutralOutlinedBackground,
    borderColor: null
  })
};
const primaryColorStates = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.disabled]: (theme, color) => ({
    color: theme.colors.tagPrimaryFontDisabled,
    backgroundColor: pick(theme, theme.colors.gray50, theme.colors.gray100Dark),
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.primary]: (theme, color) => ({
    color: theme.colors.tagPrimarySolidFont,
    backgroundColor: theme.colors.tagPrimarySolidBackground,
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.secondary]: (theme, color) => ({
    color: theme.colors.tagPrimaryOutlinedFont,
    backgroundColor: theme.colors.tagPrimaryOutlinedBackground,
    borderColor: null
  })
};
const blueColorStates = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.disabled]: (theme, color) => ({
    color: theme.colors.tagAccentFontDisabled,
    backgroundColor: pick(theme, theme.colors.blue50, theme.colors.blue100Dark),
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.primary]: (theme, color) => ({
    color: theme.colors.tagAccentSolidFont,
    backgroundColor: theme.colors.tagAccentSolidBackground,
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.secondary]: (theme, color) => ({
    color: theme.colors.tagAccentOutlinedFont,
    backgroundColor: theme.colors.tagAccentOutlinedBackground,
    borderColor: null
  })
};
const greenColorStates = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.disabled]: (theme, color) => ({
    color: theme.colors.tagPositiveFontDisabled,
    backgroundColor: pick(theme, theme.colors.green50, theme.colors.green100Dark),
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.primary]: (theme, color) => ({
    color: theme.colors.tagPositiveSolidFont,
    backgroundColor: theme.colors.tagPositiveSolidBackground,
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.secondary]: (theme, color) => ({
    color: theme.colors.tagPositiveOutlinedFont,
    backgroundColor: theme.colors.tagPositiveOutlinedBackground,
    borderColor: null
  })
};
const yellowColorStates = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.disabled]: (theme, color) => ({
    color: theme.colors.tagWarningFontDisabled,
    backgroundColor: pick(theme, theme.colors.yellow50, theme.colors.yellow100Dark),
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.primary]: (theme, color) => ({
    color: theme.colors.tagWarningSolidFont,
    backgroundColor: theme.colors.tagWarningSolidBackground,
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.secondary]: (theme, color) => ({
    color: theme.colors.tagWarningOutlinedFont,
    backgroundColor: theme.colors.tagWarningOutlinedBackground,
    borderColor: null
  })
};
const redColorStates = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.disabled]: (theme, color) => ({
    color: theme.colors.tagNegativeFontDisabled,
    backgroundColor: pick(theme, theme.colors.red50, theme.colors.red100Dark),
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.primary]: (theme, color) => ({
    color: theme.colors.tagNegativeSolidFont,
    backgroundColor: theme.colors.tagNegativeSolidBackground,
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.secondary]: (theme, color) => ({
    color: theme.colors.tagNegativeOutlinedFont,
    backgroundColor: theme.colors.tagNegativeOutlinedBackground,
    borderColor: null
  })
};
const limeColorStates = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.disabled]: (theme, color) => ({
    color: pick(theme, theme.colors.lime300, theme.colors.lime400Dark),
    backgroundColor: pick(theme, theme.colors.lime50, theme.colors.lime100Dark),
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.primary]: (theme, color) => ({
    color: pick(theme, theme.colors.white, theme.colors.lime900Dark),
    backgroundColor: pick(theme, theme.colors.lime600, theme.colors.lime400Dark),
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.secondary]: (theme, color) => ({
    color: pick(theme, theme.colors.lime700, theme.colors.lime700Dark),
    backgroundColor: pick(theme, theme.colors.lime50, theme.colors.lime100Dark),
    borderColor: null
  })
};
const tealColorStates = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.disabled]: (theme, color) => ({
    color: pick(theme, theme.colors.teal300, theme.colors.teal400Dark),
    backgroundColor: pick(theme, theme.colors.teal50, theme.colors.teal100Dark),
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.primary]: (theme, color) => ({
    color: pick(theme, theme.colors.white, theme.colors.teal900Dark),
    backgroundColor: pick(theme, theme.colors.teal600, theme.colors.teal400Dark),
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.secondary]: (theme, color) => ({
    color: pick(theme, theme.colors.teal700, theme.colors.teal700Dark),
    backgroundColor: pick(theme, theme.colors.teal50, theme.colors.teal100Dark),
    borderColor: null
  })
};
const orangeColorStates = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.disabled]: (theme, color) => ({
    color: pick(theme, theme.colors.orange300, theme.colors.orange400Dark),
    backgroundColor: pick(theme, theme.colors.orange50, theme.colors.orange100Dark),
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.primary]: (theme, color) => ({
    color: pick(theme, theme.colors.white, theme.colors.orange900Dark),
    backgroundColor: pick(theme, theme.colors.orange600, theme.colors.orange400Dark),
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.secondary]: (theme, color) => ({
    color: pick(theme, theme.colors.orange700, theme.colors.orange700Dark),
    backgroundColor: pick(theme, theme.colors.orange50, theme.colors.orange100Dark),
    borderColor: null
  })
};
const purpleColorStates = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.disabled]: (theme, color) => ({
    color: pick(theme, theme.colors.purple300, theme.colors.purple400Dark),
    backgroundColor: pick(theme, theme.colors.purple50, theme.colors.purple100Dark),
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.primary]: (theme, color) => ({
    color: pick(theme, theme.colors.white, theme.colors.purple900Dark),
    backgroundColor: pick(theme, theme.colors.purple600, theme.colors.purple400Dark),
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.secondary]: (theme, color) => ({
    color: pick(theme, theme.colors.purple700, theme.colors.purple700Dark),
    backgroundColor: pick(theme, theme.colors.purple50, theme.colors.purple100Dark),
    borderColor: null
  })
};
const brownColorStates = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.disabled]: (theme, color) => ({
    color: pick(theme, theme.colors.amber200, theme.colors.amber400Dark),
    backgroundColor: null,
    borderColor: pick(theme, theme.colors.amber200, theme.colors.amber400Dark)
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.primary]: (theme, color) => ({
    color: pick(theme, theme.colors.white, theme.colors.gray900Dark),
    backgroundColor: pick(theme, theme.colors.amber600, theme.colors.amber400Dark),
    borderColor: null
  }),
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // @ts-ignore
  [COLOR_STATE.secondary]: (theme, color) => ({
    color: pick(theme, theme.colors.amber600, theme.colors.amber600Dark),
    backgroundColor: null,
    borderColor: pick(theme, theme.colors.amber600, theme.colors.amber600Dark)
  })
};
const customColorStates = {
  // @ts-ignore
  [COLOR_STATE.disabled]: (theme, color) => ({
    color: customOnRamp(color, theme.colors.tagFontDisabledRampUnit),
    backgroundColor: null,
    borderColor: customOnRamp(color, theme.colors.tagSolidDisabledRampUnit)
  }),
  // @ts-ignore
  [COLOR_STATE.primary]: (theme, color) => ({
    color: customOnRamp(color, theme.colors.tagSolidFontRampUnit),
    backgroundColor: customOnRamp(color, theme.colors.tagSolidRampUnit),
    borderColor: null
  }),
  // @ts-ignore
  [COLOR_STATE.secondary]: (theme, color) => ({
    color: customOnRamp(color, theme.colors.tagOutlinedFontRampUnit),
    backgroundColor: null,
    borderColor: customOnRamp(color, theme.colors.tagOutlinedRampUnit)
  })
};
const colorMap = {
  [_constants.KIND.neutral]: neutralColorStates,
  [_constants.KIND.primary]: primaryColorStates,
  [_constants.KIND.accent]: blueColorStates,
  [_constants.KIND.positive]: greenColorStates,
  [_constants.KIND.warning]: yellowColorStates,
  [_constants.KIND.negative]: redColorStates,
  [_constants.KIND.black]: primaryColorStates,
  [_constants.KIND.blue]: blueColorStates,
  [_constants.KIND.green]: greenColorStates,
  [_constants.KIND.red]: redColorStates,
  [_constants.KIND.yellow]: yellowColorStates,
  [_constants.KIND.orange]: orangeColorStates,
  [_constants.KIND.purple]: purpleColorStates,
  [_constants.KIND.brown]: brownColorStates,
  [_constants.KIND.lime]: limeColorStates,
  [_constants.KIND.teal]: tealColorStates,
  [_constants.KIND.custom]: customColorStates
};

// @ts-ignore
const getColorStateFromProps = props => {
  if (props.$disabled) return COLOR_STATE.disabled;
  if (props.$hierarchy === _constants.HIERARCHY.primary) return COLOR_STATE.primary;
  return COLOR_STATE.secondary;
};
const Action = exports.Action = (0, _styles.styled)('span', props => {
  const {
    $theme,
    $disabled,
    $size = _constants.SIZE.small
  } = props;
  const bottomRadiusDir = $theme.direction === 'rtl' ? 'borderBottomLeftRadius' : 'borderBottomRightRadius';
  const topRadiusDir = $theme.direction === 'rtl' ? 'borderTopLeftRadius' : 'borderTopRightRadius';
  const marginDir = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
  return {
    alignItems: 'center',
    [bottomRadiusDir]: $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0,
    [topRadiusDir]: $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0,
    cursor: $disabled ? 'not-allowed' : 'pointer',
    display: 'flex',
    [marginDir]: {
      [_constants.SIZE.small]: '8px',
      [_constants.SIZE.medium]: '12px',
      [_constants.SIZE.large]: '16px'
    }[$size],
    outline: 'none',
    transitionProperty: 'all',
    transitionDuration: 'background-color',
    transitionTimingFunction: $theme.animation.easeOutCurve
  };
});
Action.displayName = "Action";
Action.displayName = 'Action';
const StartEnhancerContainer = exports.StartEnhancerContainer = (0, _styles.styled)('div', ({
  $theme,
  $size = _constants.SIZE.small
}) => {
  let paddingMagnitude = $theme.sizing.scale300;
  if ($size === _constants.SIZE.medium) {
    paddingMagnitude = $theme.sizing.scale400;
  } else if ($size === _constants.SIZE.large) {
    paddingMagnitude = $theme.sizing.scale600;
  }
  const paddingDir = $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
  return {
    alignItems: 'center',
    display: 'flex',
    [paddingDir]: paddingMagnitude
  };
});
StartEnhancerContainer.displayName = "StartEnhancerContainer";
StartEnhancerContainer.displayName = 'StartEnhancerContainer';
const Text = exports.Text = (0, _styles.styled)('span', props => {
  const {
    $theme,
    $contentMaxWidth
  } = props;
  return {
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    maxWidth: $contentMaxWidth === null ? 'auto' : $contentMaxWidth || props.$theme.sizing.scale3200,
    order: $theme.direction === 'rtl' ? 1 : 0
  };
});
Text.displayName = "Text";
Text.displayName = 'Text';
const Root = exports.Root = (0, _styles.styled)('span', props => {
  const {
    $theme,
    $kind = _constants.KIND.primary,
    $clickable,
    $hierarchy,
    $disabled,
    $closeable,
    $isFocusVisible,
    $color,
    $size = _constants.SIZE.small,
    $contentMaxWidth
  } = props;
  const borderRadius = $size === _constants.SIZE.small ? $theme.borders.radius200 : $theme.borders.radius300;
  const paddingMagnitude = {
    [_constants.SIZE.small]: $theme.sizing.scale300,
    [_constants.SIZE.medium]: $theme.sizing.scale500,
    [_constants.SIZE.large]: $theme.sizing.scale600
  }[$size];
  const borderWidth = !$disabled && $hierarchy === _constants.HIERARCHY.primary || $kind !== _constants.KIND.custom ? 0 : '2px';
  const {
    color,
    backgroundColor,
    borderColor
  } = colorMap[$kind][getColorStateFromProps(props)]($theme, $color);
  return {
    ...{
      [_constants.SIZE.small]: $theme.typography.LabelSmall,
      [_constants.SIZE.medium]: $theme.typography.LabelMedium,
      [_constants.SIZE.large]: $theme.typography.LabelLarge
    }[$size],
    alignItems: 'center',
    color,
    backgroundColor,
    borderLeftColor: borderColor,
    borderRightColor: borderColor,
    borderTopColor: borderColor,
    borderBottomColor: borderColor,
    borderLeftStyle: 'solid',
    borderRightStyle: 'solid',
    borderTopStyle: 'solid',
    borderBottomStyle: 'solid',
    borderLeftWidth: borderWidth,
    borderRightWidth: borderWidth,
    borderTopWidth: borderWidth,
    borderBottomWidth: borderWidth,
    borderTopLeftRadius: borderRadius,
    borderTopRightRadius: borderRadius,
    borderBottomRightRadius: borderRadius,
    borderBottomLeftRadius: borderRadius,
    boxSizing: 'border-box',
    cursor: $disabled ? 'not-allowed' : $clickable ? 'pointer' : 'default',
    display: 'inline-flex',
    height: {
      [_constants.SIZE.small]: '24px',
      [_constants.SIZE.medium]: '32px',
      [_constants.SIZE.large]: '40px'
    }[$size],
    justifyContent: 'space-between',
    maxWith: $contentMaxWidth === null ? '100%' : 'auto',
    marginTop: '5px',
    marginBottom: '5px',
    marginLeft: '5px',
    marginRight: '5px',
    paddingTop: $theme.sizing.scale0,
    paddingBottom: $theme.sizing.scale0,
    paddingLeft: paddingMagnitude,
    paddingRight: paddingMagnitude,
    outline: 'none',
    ':hover': $disabled || !$clickable ? {} : {
      boxShadow: `inset 0px 0px 100px ${pick($theme, `rgba(0, 0, 0, 0.08)`, `rgba(255, 255, 255, 0.2)`)}`
    },
    ':focus': $disabled || !$clickable && !$closeable ? {} : {
      boxShadow: $isFocusVisible ? `0 0 0 3px ${$kind === _constants.KIND.accent ? $theme.colors.backgroundInversePrimary : $theme.colors.backgroundAccent}` : 'none'
    }
  };
});
Root.displayName = "Root";
Root.displayName = 'Root';