%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.632e77b3fb93bc8da5b589b869bc0037/static/js/common/components/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.632e77b3fb93bc8da5b589b869bc0037/static/js/common/components/Text.js |
import styled, { css } from "styled-components"; import { ifProp, switchProp, theme } from "styled-tools"; const KINDS = { HEADLINE: "headline", TITLE: "title", LABEL: "label", BODY: "body", LINK: "link", }; const SIZES = { LARGE: "large", MEDIUM: "medium", SMALL: "small", }; const ALIGNMENT = { RIGHT: "right", CENTER: "center", }; export const styles = css` font-family: "Poppins"; font-style: normal; ${ifProp( "color", ({ color }) => css` color: ${theme(`color.${color}`)} !important; `, css` color: ${theme("color.neutral.primary")} !important; ; `, )} ${ifProp( "disabled", css` opacity: 0.38; `, )} ${switchProp("alignment", { [ALIGNMENT.RIGHT]: css` text-align: right; `, })} ${switchProp("alignment", { [ALIGNMENT.CENTER]: css` text-align: center; `, })} ${switchProp("kind", { [KINDS.HEADLINE]: switchProp("size", { [SIZES.LARGE]: css` font-weight: 500; font-size: 32px; line-height: 40px; `, [SIZES.MEDIUM]: css` font-weight: 500; font-size: 28px; line-height: 36px; `, [SIZES.SMALL]: css` font-weight: 500; font-size: 24px; line-height: 32px; `, }), })} ${switchProp("kind", { [KINDS.TITLE]: switchProp("size", { [SIZES.LARGE]: css` font-weight: 500; font-size: 20px; line-height: 28px; `, [SIZES.MEDIUM]: css` font-weight: 500; font-size: 18px; line-height: 26px; `, [SIZES.SMALL]: css` font-weight: 500; font-size: 16px; line-height: 24px; `, }), })} ${switchProp("kind", { [KINDS.LABEL]: switchProp("size", { [SIZES.LARGE]: css` font-weight: 500; font-size: 16px; line-height: 24px; `, [SIZES.MEDIUM]: css` font-weight: 500; font-size: 14px; line-height: 20px; `, [SIZES.SMALL]: css` font-weight: 500; font-size: 12px; line-height: 16px; `, }), })} ${switchProp("kind", { [KINDS.BODY]: switchProp("size", { [SIZES.LARGE]: css` font-weight: 400; font-size: 16px; line-height: 24px; `, [SIZES.MEDIUM]: css` font-weight: 400; font-size: 14px; line-height: 20px; `, [SIZES.SMALL]: css` font-weight: 400; font-size: 12px; line-height: 16px; `, }), })} ${switchProp("kind", { [KINDS.LINK]: switchProp("size", { [SIZES.MEDIUM]: css` font-weight: 400; font-size: 14px; line-height: 20px; text-decoration-line: underline; `, }), })} `; export const Text = styled.div` ${styles} `; export { KINDS as TEXT_KINDS, SIZES as TEXT_SIZES, ALIGNMENT as TEXT_ALIGNMENT };