baseui
Version:
A React Component library implementing the Base design language
469 lines (464 loc) • 18.3 kB
JavaScript
"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");
var DeprecatedStyles = _interopRequireWildcard(require("./deprecated-styles"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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 blueColorStates = {
[COLOR_STATE.disabled]: theme => ({
color: theme.colors.tagBlueContentStateDisabled,
backgroundColor: theme.colors.tagBlueBackgroundStateDisabled,
borderColor: null
}),
[COLOR_STATE.primary]: theme => ({
color: theme.colors.tagBlueContentPrimary,
backgroundColor: theme.colors.tagBlueBackgroundPrimary,
borderColor: theme.colors.tagBlueBorderPrimaryUnselected
}),
[COLOR_STATE.secondary]: theme => ({
color: theme.colors.tagBlueContentSecondary,
backgroundColor: theme.colors.tagBlueBackgroundSecondary,
borderColor: theme.colors.tagBlueBorderSecondaryUnselected
})
};
const greenColorStates = {
[COLOR_STATE.disabled]: theme => ({
color: theme.colors.tagGreenContentStateDisabled,
backgroundColor: theme.colors.tagGreenBackgroundStateDisabled,
borderColor: null
}),
[COLOR_STATE.primary]: theme => ({
color: theme.colors.tagGreenContentPrimary,
backgroundColor: theme.colors.tagGreenBackgroundPrimary,
borderColor: theme.colors.tagGreenBorderPrimaryUnselected
}),
[COLOR_STATE.secondary]: theme => ({
color: theme.colors.tagGreenContentSecondary,
backgroundColor: theme.colors.tagGreenBackgroundSecondary,
borderColor: theme.colors.tagGreenBorderSecondaryUnselected
})
};
const yellowColorStates = {
[COLOR_STATE.disabled]: theme => ({
color: theme.colors.tagYellowContentStateDisabled,
backgroundColor: theme.colors.tagYellowBackgroundStateDisabled,
borderColor: null
}),
[COLOR_STATE.primary]: theme => ({
color: theme.colors.tagYellowContentPrimary,
backgroundColor: theme.colors.tagYellowBackgroundPrimary,
borderColor: theme.colors.tagYellowBorderPrimaryUnselected
}),
[COLOR_STATE.secondary]: theme => ({
color: theme.colors.tagYellowContentSecondary,
backgroundColor: theme.colors.tagYellowBackgroundSecondary,
borderColor: theme.colors.tagYellowBorderSecondaryUnselected
})
};
const redColorStates = {
[COLOR_STATE.disabled]: theme => ({
color: theme.colors.tagRedContentStateDisabled,
backgroundColor: theme.colors.tagRedBackgroundStateDisabled,
borderColor: null
}),
[COLOR_STATE.primary]: theme => ({
color: theme.colors.tagRedContentPrimary,
backgroundColor: theme.colors.tagRedBackgroundPrimary,
borderColor: theme.colors.tagRedBorderPrimaryUnselected
}),
[COLOR_STATE.secondary]: theme => ({
color: theme.colors.tagRedContentSecondary,
backgroundColor: theme.colors.tagRedBackgroundSecondary,
borderColor: theme.colors.tagRedBorderSecondaryUnselected
})
};
const limeColorStates = {
[COLOR_STATE.disabled]: theme => ({
color: theme.colors.tagLimeContentStateDisabled,
backgroundColor: theme.colors.tagLimeBackgroundStateDisabled,
borderColor: null
}),
[COLOR_STATE.primary]: theme => ({
color: theme.colors.tagLimeContentPrimary,
backgroundColor: theme.colors.tagLimeBackgroundPrimary,
borderColor: theme.colors.tagLimeBorderPrimaryUnselected
}),
[COLOR_STATE.secondary]: theme => ({
color: theme.colors.tagLimeContentSecondary,
backgroundColor: theme.colors.tagLimeBackgroundSecondary,
borderColor: theme.colors.tagLimeBorderSecondaryUnselected
})
};
const tealColorStates = {
[COLOR_STATE.disabled]: theme => ({
color: theme.colors.tagTealContentStateDisabled,
backgroundColor: theme.colors.tagTealBackgroundStateDisabled,
borderColor: null
}),
[COLOR_STATE.primary]: theme => ({
color: theme.colors.tagTealContentPrimary,
backgroundColor: theme.colors.tagTealBackgroundPrimary,
borderColor: theme.colors.tagTealBorderPrimaryUnselected
}),
[COLOR_STATE.secondary]: theme => ({
color: theme.colors.tagTealContentSecondary,
backgroundColor: theme.colors.tagTealBackgroundSecondary,
borderColor: theme.colors.tagTealBorderSecondaryUnselected
})
};
const orangeColorStates = {
[COLOR_STATE.disabled]: theme => ({
color: theme.colors.tagOrangeContentStateDisabled,
backgroundColor: theme.colors.tagOrangeBackgroundStateDisabled,
borderColor: null
}),
[COLOR_STATE.primary]: theme => ({
color: theme.colors.tagOrangeContentPrimary,
backgroundColor: theme.colors.tagOrangeBackgroundPrimary,
borderColor: theme.colors.tagOrangeBorderPrimaryUnselected
}),
[COLOR_STATE.secondary]: theme => ({
color: theme.colors.tagOrangeContentSecondary,
backgroundColor: theme.colors.tagOrangeBackgroundSecondary,
borderColor: theme.colors.tagOrangeBorderSecondaryUnselected
})
};
const purpleColorStates = {
[COLOR_STATE.disabled]: theme => ({
color: theme.colors.tagPurpleContentStateDisabled,
backgroundColor: theme.colors.tagPurpleBackgroundStateDisabled,
borderColor: null
}),
[COLOR_STATE.primary]: theme => ({
color: theme.colors.tagPurpleContentPrimary,
backgroundColor: theme.colors.tagPurpleBackgroundPrimary,
borderColor: theme.colors.tagPurpleBorderPrimaryUnselected
}),
[COLOR_STATE.secondary]: theme => ({
color: theme.colors.tagPurpleContentSecondary,
backgroundColor: theme.colors.tagPurpleBackgroundSecondary,
borderColor: theme.colors.tagPurpleBorderSecondaryUnselected
})
};
const magentaColorStates = {
[COLOR_STATE.disabled]: theme => ({
color: theme.colors.tagMagentaContentStateDisabled,
backgroundColor: theme.colors.tagMagentaBackgroundStateDisabled,
borderColor: null
}),
[COLOR_STATE.primary]: theme => ({
color: theme.colors.tagMagentaContentPrimary,
backgroundColor: theme.colors.tagMagentaBackgroundPrimary,
borderColor: theme.colors.tagMagentaBorderPrimaryUnselected
}),
[COLOR_STATE.secondary]: theme => ({
color: theme.colors.tagMagentaContentSecondary,
backgroundColor: theme.colors.tagMagentaBackgroundSecondary,
borderColor: theme.colors.tagMagentaBorderSecondaryUnselected
})
};
const grayColorStates = {
[COLOR_STATE.disabled]: theme => ({
color: theme.colors.tagGrayContentStateDisabled,
backgroundColor: theme.colors.tagGrayBackgroundStateDisabled,
borderColor: null
}),
[COLOR_STATE.primary]: theme => ({
color: theme.colors.tagGrayContentPrimary,
backgroundColor: theme.colors.tagGrayBackgroundPrimary,
borderColor: theme.colors.tagGrayBorderPrimaryUnselected
}),
[COLOR_STATE.secondary]: theme => ({
color: theme.colors.tagGrayContentSecondary,
backgroundColor: theme.colors.tagGrayBackgroundSecondary,
borderColor: theme.colors.tagGrayBorderSecondaryUnselected
})
};
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]: DeprecatedStyles.deprecatedNeutralColorStates,
[_constants.KIND.primary]: DeprecatedStyles.deprecatedPrimaryColorStates,
[_constants.KIND.accent]: DeprecatedStyles.deprecatedBlueColorStates,
[_constants.KIND.positive]: DeprecatedStyles.deprecatedGreenColorStates,
[_constants.KIND.warning]: DeprecatedStyles.deprecatedYellowColorStates,
[_constants.KIND.negative]: DeprecatedStyles.deprecatedRedColorStates,
[_constants.KIND.black]: DeprecatedStyles.deprecatedPrimaryColorStates,
[_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]: DeprecatedStyles.deprecatedBrownColorStates,
[_constants.KIND.lime]: limeColorStates,
[_constants.KIND.teal]: tealColorStates,
[_constants.KIND.magenta]: magentaColorStates,
[_constants.KIND.gray]: grayColorStates,
[_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.xSmall]: $theme.sizing.scale100,
[_constants.SIZE.small]: $theme.sizing.scale300,
[_constants.SIZE.medium]: $theme.sizing.scale300,
[_constants.SIZE.large]: $theme.sizing.scale500
}[$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
}) => {
const paddingMagnitude = {
[_constants.SIZE.xSmall]: $theme.sizing.scale100,
[_constants.SIZE.small]: $theme.sizing.scale300,
[_constants.SIZE.medium]: $theme.sizing.scale300,
[_constants.SIZE.large]: $theme.sizing.scale500
}[$size];
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
} = props;
const borderRadius = $size === _constants.SIZE.small || $size === _constants.SIZE.xSmall ? $theme.borders.radius200 : $theme.borders.radius300;
const paddingMagnitude = {
[_constants.SIZE.xSmall]: $theme.sizing.scale100,
[_constants.SIZE.small]: $theme.sizing.scale200,
[_constants.SIZE.medium]: $theme.sizing.scale300,
[_constants.SIZE.large]: $theme.sizing.scale400
}[$size];
const paddingLongitude = {
[_constants.SIZE.xSmall]: $theme.sizing.scale0,
[_constants.SIZE.small]: $theme.sizing.scale100,
[_constants.SIZE.medium]: $theme.sizing.scale100,
[_constants.SIZE.large]: $theme.sizing.scale300
}[$size];
const isActionable = !$disabled && ($clickable || $closeable);
const borderWidthValue = {
[_constants.SIZE.xSmall]: '1px',
[_constants.SIZE.small]: '1px',
[_constants.SIZE.medium]: '1px',
[_constants.SIZE.large]: '2px'
}[$size];
const {
color,
backgroundColor,
borderColor
} = colorMap[$kind][getColorStateFromProps(props)]($theme, $color);
// previously, only secondary and disabled custom tags had borders
// now, it extends to actionable tags as well
const showBorder = $kind === _constants.KIND.custom && ($hierarchy === _constants.HIERARCHY.secondary || $disabled) || $kind !== _constants.KIND.custom && isActionable && !!borderColor;
const borderWidth = showBorder ? borderWidthValue : 0;
return {
...{
[_constants.SIZE.xSmall]: $theme.typography.LabelXSmall,
[_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.xSmall]: '20px',
[_constants.SIZE.small]: '24px',
[_constants.SIZE.medium]: '32px',
[_constants.SIZE.large]: '40px'
}[$size],
justifyContent: 'space-between',
marginTop: '5px',
marginBottom: '5px',
marginLeft: '5px',
marginRight: '5px',
paddingTop: paddingLongitude,
paddingBottom: paddingLongitude,
paddingLeft: paddingMagnitude,
paddingRight: paddingMagnitude,
outline: 'none',
...(isActionable ? {
// adding overlay component to cover both border and content area for hovered and pressed state
position: 'relative',
'::before': {
content: "''",
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
borderTopLeftRadius: 'inherit',
borderTopRightRadius: 'inherit',
borderBottomRightRadius: 'inherit',
borderBottomLeftRadius: 'inherit',
backgroundColor: 'transparent',
pointerEvents: 'none'
},
// end of overlay
// Applies only on devices that support hovering, like desktop computers.
'@media (hover: hover)': {
':hover::before': {
backgroundColor: $theme.colors.hoverOverlayAlpha,
// this box shadow is used to extend the overlay to the border
boxShadow: `0 0 0 ${borderWidth} ${$theme.colors.hoverOverlayAlpha}`
}
},
':active::before': {
backgroundColor: $theme.colors.pressedOverlayAlpha,
// this box shadow is used to extend the overlay to the border
boxShadow: `0 0 0 ${borderWidth} ${$theme.colors.pressedOverlayAlpha}`
}
} : {}),
':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';