@activecollab/components/dist/esm/components/Typography/Styles.js

ActiveCollab Components

import styled, { css } from "styled-components";
import { BoxSizingStyle } from "../BoxSizingStyle";
import { FontStyle } from "../FontStyle";
const colors = {
  primary: {
    "color": "var(--color-theme-900)"
  },
  secondary: {
    "color": "var(--color-theme-700)"
  },
  tertiary: {
    "color": "var(--color-theme-600)"
  },
  quaternary: {
    "color": "var(--color-theme-transparent-500)"
  },
  "theme-primary": {
    "color": "var(--color-primary)"
  },
  "theme-secondary": {
    "color": "var(--color-secondary)"
  },
  "page-paper": {
    "color": "var(--page-paper-main)"
  },
  "only-white": {
    "color": "var(--only-white)"
  },
  "only-black": {
    "color": "var(--only-black)"
  },
  success: {
    "color": "var(--color-sucess-green)"
  },
  alert: {
    "color": "var(--red-alert)"
  },
  warning: {
    "color": "var(--warning)"
  }
};
export const StyledTypography = styled.div.withConfig({
  displayName: "Styles__StyledTypography",
  componentId: "sc-mskw5w-0"
})(["", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, props => colors[props.$color], props => props.$variant === "Title 1" && css(["", ""], {
  "fontSize": "2rem"
}), props => props.$variant === "Title 2" && css(["", ""], {
  "fontSize": "1.675rem"
}), props => props.$variant === "Header 2" && css(["", ""], {
  "fontSize": "1.125rem"
}), props => (props.$variant === "Header 3" || props.$variant === "Body 1") && css(["", ""], {
  "fontSize": "1rem"
}), props => props.$variant === "Body 2" && css(["", ""], {
  "fontSize": "0.875rem"
}), props => props.$variant === "Caption 1" && css(["", ""], {
  "fontSize": "0.75rem"
}), props => props.$variant === "Caption 2" && css(["", ""], {
  "fontSize": "0.625rem"
}), props => props.$italic ? css(["font-style:italic;"]) : css(["font-style:normal;"]), props => props.$tabularNums ? css(["font-variant-numeric:tabular-nums;"]) : css(["font-variant-numeric:normal;"]), props => props.$letterSpacing === "regular" && css(["", ""], {
  "letterSpacing": "0.02em"
}), props => props.$letterSpacing === "tight" && css(["", ""], {
  "letterSpacing": "0em"
}), props => props.$letterSpacing === "wide" && css(["", ""], {
  "letterSpacing": "0.08em"
}), props => props.$lineHeight === "regular" && css(["", ""], {
  "lineHeight": "1.375"
}), props => props.$lineHeight === "tight" && css(["", ""], {
  "lineHeight": "1"
}), props => props.$lineHeight === "loose" && css(["", ""], {
  "lineHeight": "1.625"
}), props => props.$align === "left" && css(["text-align:left;"]), props => props.$align === "right" && css(["text-align:right;"]), props => props.$align === "center" && css(["text-align:center;"]), props => props.$align === "justify" && css(["text-align:justify;"]), props => props.$decoration === "none" && css(["text-decoration:none;"]), props => props.$decoration === "underline" && css(["text-decoration:underline;"]), props => props.$decoration === "line-through" && css(["text-decoration:line-through;"]), props => props.$transform === "regular" && css(["text-transform:none;"]), props => props.$transform === "uppercase" && css(["text-transform:uppercase;"]), props => props.$transform === "lowercase" && css(["text-transform:lowercase;"]), props => props.$transform === "capitalize" && css(["text-transform:capitalize;"]), props => props.$overflow === "visible" && css(["overflow:visible;"]), props => props.$overflow === "ellipsis" && css(["text-overflow:ellipsis;"]), props => props.$overflow === "truncate" && css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]), props => props.$whitespace === "regular" && css(["white-space:normal;"]), props => props.$whitespace === "no-wrap" && css(["white-space:nowrap;"]), props => props.$whitespace === "pre" && css(["white-space:pre;"]), props => props.$whitespace === "pre-wrap" && css(["white-space:pre-wrap;"]), props => props.$whitespace === "pre-line" && css(["white-space:pre-line;"]), props => props.$whitespace === "break-spaces" && css(["white-space:break-spaces;"]), props => props.$wordBreak === "regular" && css(["overflow-wrap:normal;word-break:normal;"]), props => props.$wordBreak === "smart" && css(["overflow-wrap:break-word;"]), props => props.$wordBreak === "all" && css(["word-break:break-all;"]), props => props.$weight === "regular" && css(["", ""], {
  "fontWeight": "400"
}), props => props.$weight === "light" && css(["", ""], {
  "fontWeight": "300"
}), props => props.$weight === "medium" && css(["", ""], {
  "fontWeight": "500"
}), props => props.$weight === "bold" && css(["", ""], {
  "fontWeight": "700"
}));
StyledTypography.displayName = "StyledTypography";
//# sourceMappingURL=Styles.js.map