How to use @synerise/ds-typography - 10 common examples

import styled from 'styled-components';
import { macro } from '@synerise/ds-typography';
import { IconContainer } from '@synerise/ds-icon/dist/Icon.styles';

// eslint-disable-next-line import/prefer-default-export
export const AddContentButtonWrapper = styled.div`
  display: flex;
  width: 100%;
  .ant-btn {
    ${macro.h200};
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: transparent;
    color: ${({ theme }): string => theme.palette['grey-500']};
    svg {
      color: ${({ theme }): string => theme.palette['grey-500']};
      fill: ${({ theme }): string => theme.palette['grey-500']};
    }
    ${IconContainer} {
      margin-right: 12px;
    }

    &:hover {
      color: ${({ theme }): string => theme.palette['grey-600']};

import * as React from 'react';
import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
import Badge from 'antd/lib/badge';
import { macro } from '@synerise/ds-typography';

// eslint-disable-next-line react/jsx-props-no-spreading
export default styled(({ flag, outlined, ...rest }) => )`
&& {
  .ant-scroll-number-only{
    height: 18px;
    & > p {
      ${macro.h200};
      color: inherit;
      line-height: 18px;
      height: 18px;
    }
  }
  .ant-badge-count {
    box-shadow: none;
    height: 18px;
    padding: 0 5px;
    line-height: 18px;
    min-width: 18px;
  }
  ${(props): FlattenSimpleInterpolation | false =>
    css`
      ${props.outlined &&
        css`

// eslint-disable-next-line react/jsx-props-no-spreading
export default styled(({ backgroundColor, hasStatus, pressed, ...rest }) => )`
  && {
    ${(props): string => applyBgColors(props)};
    ${(props): string | false => applyDisabledStyles(props)};
    transition: background 0.3s ease;

    .ant-avatar-string {
      width: 100%;
      height: 100%;
      left: 0;
      position: relative;
      transform: none !important;
      ${(props): string => applyFontSize(props)};
      ${macro.flexCentered}
      & > div {
        max-width: 100%;
        max-height: 100%;
        svg {
          width: 100%;
          height: 100%;
        }
      }
    }
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

width: 100%;
`;

export const Name = styled(Label)`
  && {
    color: ${(props): string => props.theme.palette['grey-600']};
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    cursor: initial;
  }
`;

export const SizeOrError = styled(Typography.Text)`
  && {
    color: ${(props): string => props.theme.palette['grey-600']};
  }
`;

export const RemoveButtonWrapper = styled.div`
  display: none;
  background-color: #fff;
  z-index: 100;
  border: 0;
  border-radius: 8px;
  padding: 0;
  margin: 0;
  height: 16px;
  width: 16px;
  position: absolute;

}
`;

export const Title = styled(Typography.Title)`
  width: 100%;
  color: ${(props): string => props.theme.palette['grey-800']};
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  && {
    margin: 0;
  }
`;

export const Description = styled(Typography.Text)`
  font-weight: normal;
  display: block;
  padding: 12px 0 0;
  margin: 8px 0 0;

  background-image: linear-gradient(
    to right,
    ${(props): string => props.theme.palette['grey-300']} 33%,
    rgba(255, 255, 255, 0) 0%
  );
  background-repeat: repeat-x;
  background-size: 4px 1px;
  background-position: top;
`;

export const ActionButtons = styled.div`

import styled, { SimpleInterpolation } from 'styled-components';
import Typography, { Label as TypographyLabel } from '@synerise/ds-typography';
import Button from '@synerise/ds-button';
import { IconContainer } from '@synerise/ds-icon/dist/Icon.styles';

export const Container = styled.div`
  width: 100%;
`;

export const Description = styled(Typography.Text)<{ hasError?: boolean }>`
  && {
    margin: ${(props): SimpleInterpolation => (props.hasError ? '4px 0 0' : '8px 0 0')};
    display: block;
    color: ${(props): string => props.theme.palette['grey-500']};
  }
`;

export const DropAreaContainer = styled.div<{ canUploadMore: boolean }>`
  width: 100%;
  margin: ${(props): string => (props.canUploadMore ? '12px 0 0' : '0')};
`;

export const DropAreaLabel = styled(Typography.Text)`
  color: ${(props): string => props.theme.palette['grey-500']};
  font-weight: 500;
`;

export const DropAreaLabel = styled(Typography.Text)`
  color: ${(props): string => props.theme.palette['grey-500']};
  font-weight: 500;
`;

export const LargeDropAreaLabel = styled(TypographyLabel)`
  && {
    font-size: 14px;
    margin: 4px 0 0;
    display: block;
    color: ${(props): string => props.theme.palette['grey-500']};
  }
`;

export const LargeDropAreaDescription = styled(Typography.Text)`
  && {
    margin: 4px 0 0;
    display: block;
    color: ${(props): string => props.theme.palette['grey-500']};
  }
`;

export const DropAreaButton = styled.button<{ isDropping?: boolean; hasError?: boolean; mode: string }>`
  display: flex;
  align-items: center;
  border: 1px dashed ${(props): string => props.theme.palette['grey-300']};
  padding: 11px 12px;
  border-radius: 3px;
  cursor: pointer;
  background-color: transparent;
  width: 100%;

}
`;

export const CardTabLabel = styled.span`
  ${macro.h300};
  color: ${({ theme }): string => theme.palette['grey-600']};
  line-height: 20px;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
`;

export const CardTabTag = styled.div`
  ${macro.h200}
  color: ${({ theme }): string => theme.palette.white};
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 3px;
`;

export const CardTabPrefix = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 12px;

height: 24px;
  display: none;
  svg {
    color: ${({ theme }): string => theme.palette['grey-500']}
    fill: ${({ theme }): string => theme.palette['grey-500']} 
  }
  .ds-card-tabs__remove-icon {
    svg {
      color: ${({ theme }): string => theme.palette['red-600']}
      fill: ${({ theme }): string => theme.palette['red-600']} 
    }
  }
`;

export const CardTabLabel = styled.span`
  ${macro.h300};
  color: ${({ theme }): string => theme.palette['grey-600']};
  line-height: 20px;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
`;

export const CardTabTag = styled.div`
  ${macro.h200}
  color: ${({ theme }): string => theme.palette.white};
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;

import styled from 'styled-components';
import { macro } from '@synerise/ds-typography';
import { ItemActionsWrapper } from '../ItemActions/ItemActions.styles';

export const ItemLabel = styled.span`
  ${macro.h300};
  color: ${({ theme }): string => theme.palette['grey-600']};
  height: 24px;
  display: inline-block;
  align-items: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
  line-height: 24px;
  max-width: 100%;
`;

export const ItemLabelWrapper = styled.div`
  flex: 1;
  overflow: hidden;
  height: 24px;