How to use the @zendeskgarden/react-theming.getLineHeight function in @zendeskgarden/react-theming

To help you get started, we’ve selected a few @zendeskgarden/react-theming examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github zendeskgarden / react-components / packages / tags / src / styled / StyledTag.ts View on Github external
if (props.size === 'small') {
      padding = props.theme.space.base * 1.5;
      minWidth = props.theme.space.base * 6;
    } else if (props.size === 'large') {
      minWidth = props.theme.space.base * 12;
    } else {
      minWidth = props.theme.space.base * 7.5;
    }
  }

  return css`
    border-radius: ${borderRadius};
    padding: 0 ${math(`${padding} * 1px`)};
    min-width: ${minWidth && math(`${minWidth} * 1px`)};
    height: ${math(`${height} * 1px`)};
    line-height: ${getLineHeight(height, fontSize)};
    font-size: ${fontSize};

    & > * {
      min-width: ${minWidth ? math(`${minWidth - padding * 2} * 1px`) : '2em'};
    }

    & ${StyledAvatar} {
      /* stylelint-disable-next-line property-no-unknown */
      margin-${props.theme.rtl ? 'right' : 'left'}: ${math(`${padding - avatarMargin} * -1px`)};
      /* stylelint-disable-next-line property-no-unknown */
      margin-${props.theme.rtl ? 'left' : 'right'}: ${math(`${avatarTextMargin} * 1px`)};
      border-radius: ${avatarBorderRadius};
      width: ${math(`${avatarSize} * 1px`)};
      min-width: ${math(`${avatarSize} * 1px`)}; /* prevent flex shrink */
      height: ${math(`${avatarSize} * 1px`)};
    }
github zendeskgarden / react-components / packages / chrome / src / styled / header / StyledBaseHeaderItem.ts View on Github external
const sizeStyles = (props: IStyledBaseHeaderItemProps & ThemeProps) => {
  const size = props.theme.space.base * 7.5;

  return css`
    padding: 0 3px;
    min-width: ${size}px;
    height: ${props.maxY ? '100%' : `${size}px`};
    line-height: ${getLineHeight(size, props.theme.fontSizes.md)};
  `;
};
github zendeskgarden / react-components / packages / notifications / src / styled / StyledBase.ts View on Github external
  line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
  font-size: ${props => props.theme.fontSizes.md};