Files
outline/app/components/Text.ts
2022-02-17 20:59:40 -08:00

31 lines
716 B
TypeScript

import styled from "styled-components";
type Props = {
type?: "secondary" | "tertiary";
size?: "small" | "xsmall";
};
/**
* Use this component for all interface text that should not be selectable
* by the user, this is the majority of UI text explainers, notes, headings.
*/
const Text = styled.p<Props>`
margin-top: 0;
color: ${(props) =>
props.type === "secondary"
? props.theme.textSecondary
: props.type === "tertiary"
? props.theme.textTertiary
: props.theme.text};
font-size: ${(props) =>
props.size === "small"
? "14px"
: props.size === "xsmall"
? "13px"
: "inherit"};
white-space: normal;
user-select: none;
`;
export default Text;