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

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { StyledRequiredContainer } from '../Required/Required.styles';
import { getTypographyIntent, semiboldRules, StyledTypography } from '../Typography/Typography.styles';
import { colors } from '../_styles/colors';
import { spacing } from '../_styles/spacing';
export var StyledH1 = /*#__PURE__*/styled.h1.withConfig({
  displayName: "StyledH1",
  componentId: "core-12_44_0__sc-172j5qh-0"
})(["color:", ";", " margin:0;"], colors.gray15, getTypographyIntent('h1'));
export var StyledH2 = /*#__PURE__*/styled.h2.withConfig({
  displayName: "StyledH2",
  componentId: "core-12_44_0__sc-172j5qh-1"
})(["color:", ";", " margin:0;"], colors.gray15, getTypographyIntent('h2'));
export var StyledH3 = /*#__PURE__*/styled.h3.withConfig({
  displayName: "StyledH3",
  componentId: "core-12_44_0__sc-172j5qh-2"
})(["color:", ";", " margin:0;"], colors.gray15, getTypographyIntent('h3'));
var topMarginRules = function topMarginRules() {
  return css(["& + &,p + &,ol + &,ul + &{margin-top:", "px;}"], spacing.lg);
};

// Should this be on Typography? body | label
/** Small icons align with font and line height */
export function getSmallIconBodyTextRules() {
  var space = spacing.xs;
  var spaceWhenTouch = spacing.sm;
  return css(["& > [data-qa^='ci']{height:16px;width:16px;vertical-align:middle;margin-left:", "px;&[tabindex='0']{margin-left:", "px;}&:first-child{margin-left:0;margin-right:", "px;vertical-align:sub;&[tabindex='0']{margin-right:", "px;}}}"], space, spaceWhenTouch, space, spaceWhenTouch);
}
export var StyledP = /*#__PURE__*/styled.p.withConfig({
  displayName: "StyledP",
  componentId: "core-12_44_0__sc-172j5qh-3"
})(["color:", ";", " ", " ", ""], colors.gray15, getTypographyIntent('body'), topMarginRules, semiboldRules);
export var StyledUL = /*#__PURE__*/styled.ul.withConfig({
  displayName: "StyledUL",
  componentId: "core-12_44_0__sc-172j5qh-4"
})(["color:", ";margin:0;padding:0;", " ", " padding-left:", "px;list-style-type:", ";"], colors.gray15, getTypographyIntent('body'), topMarginRules, spacing.lg, function (props) {
  return props.$listStyleType || 'disc';
});
export var StyledOL = /*#__PURE__*/styled(StyledUL).attrs({
  as: 'ol'
}).withConfig({
  displayName: "StyledOL",
  componentId: "core-12_44_0__sc-172j5qh-5"
})(["list-style-type:", ";"], function (props) {
  return props.$listStyleType || 'decimal';
});
export var StyledLabel = /*#__PURE__*/styled(StyledTypography).attrs(function (props) {
  return {
    as: props.as || 'label',
    $intent: 'label'
  };
}).withConfig({
  displayName: "StyledLabel",
  componentId: "core-12_44_0__sc-172j5qh-6"
})(["", " ", " > ", "{margin-left:", "px;vertical-align:top;}"], function (_ref) {
  var _ref$$block = _ref.$block,
    $block = _ref$$block === void 0 ? false : _ref$$block;
  return $block && "display: block;";
}, getSmallIconBodyTextRules, StyledRequiredContainer, spacing.xs);

/**
 * An unstyled `button`, browser reset
 */
export function getUnstyledButton() {
  return css(["border:none;background:none;font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;text-transform:none;-webkit-appearance:button;"]);
}
/**
 * An unstyled `button`, browser reset
 */
export var StyledUnstyledButton = /*#__PURE__*/styled.button.withConfig({
  displayName: "StyledUnstyledButton",
  componentId: "core-12_44_0__sc-172j5qh-7"
})(["", ""], getUnstyledButton);

/**
 * An a styled component a
 */
export var StyledAnchor = /*#__PURE__*/styled.a.withConfig({
  displayName: "StyledAnchor",
  componentId: "core-12_44_0__sc-172j5qh-8"
})([""]);
//# sourceMappingURL=Semantic.styles.js.map