@procore/core-react/dist/Token/Token.styles.js

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { Button } from '../Button';
import { getTypographyIntent } from '../Typography';
import { colors } from '../_styles/colors';
import { getEllipsis, getFocus } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledLabel",
  componentId: "core-12_44_0__sc-zqi94b-0"
})(["", " ", " flex:0 1 auto;"], getTypographyIntent('body'), getEllipsis);
export var StyledRemove = /*#__PURE__*/styled(Button).withConfig({
  displayName: "StyledRemove",
  componentId: "core-12_44_0__sc-zqi94b-1"
})(["border-radius:100%;color:", ";flex:0 0 auto;height:16px;margin:0 -", "px 0 ", "px;padding:0;width:16px;&:hover{background:", ";color:", ";}&:disabled,&[aria-disabled='true']{color:", ";}"], colors.white, spacing.sm, spacing.sm, colors.white, colors.blue40, colors.white);
export var StyledToken = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledToken",
  componentId: "core-12_44_0__sc-zqi94b-2"
})(["align-items:center;background-color:", ";border-radius:200px;border:1px solid transparent;color:", ";cursor:default;display:inline-flex;height:24px;line-height:1;max-width:360px;min-width:48px;padding:", "px ", "px;&:hover,&.hover{background-color:", ";}", " ", " ", ""], colors.blue50, colors.white, spacing.xs, spacing.md, colors.blue45, function (_ref) {
  var _ref$$focused = _ref.$focused,
    $focused = _ref$$focused === void 0 ? false : _ref$$focused,
    _ref$$disabled = _ref.$disabled,
    $disabled = _ref$$disabled === void 0 ? false : _ref$$disabled;
  return $focused && css(["", " background-color:", ";", ""], getFocus(), colors.blue45, !$disabled && css(["", "{background-color:", ";color:", ";}"], StyledRemove, colors.white, colors.blue45));
}, function (_ref2) {
  var _ref2$$disabled = _ref2.$disabled,
    $disabled = _ref2$$disabled === void 0 ? false : _ref2$$disabled;
  return $disabled && css(["background-color:", ";border-color:transparent;box-shadow:none;pointer-events:none;"], colors.gray70);
}, function (_ref3) {
  var _ref3$$error = _ref3.$error,
    $error = _ref3$$error === void 0 ? false : _ref3$$error;
  return $error && css(["&,&:hover{background-color:", ";}"], colors.red50);
});
//# sourceMappingURL=Token.styles.js.map