curls/dist/es/Text/styles.js

💪 Responsive, expressive UI primitives for React written with Style Hooks and Emotion

import {css} from '@emotion/core'
import {colorize, memoTheme, memoValue, unit, get} from '../utils'
import * as dT from './defaultTheme'
export const weight = {
  '100': {
    name: 'nudg5n',
    styles: 'font-weight:100;',
  },
  '200': {
    name: '1jdtvb9',
    styles: 'font-weight:200;',
  },
  '300': {
    name: 'kaq1dv',
    styles: 'font-weight:300;',
  },
  '400': {
    name: 'pelz90',
    styles: 'font-weight:400;',
  },
  '500': {
    name: '10rvbm3',
    styles: 'font-weight:500;',
  },
  '600': {
    name: '35ezg3',
    styles: 'font-weight:600;',
  },
  '700': {
    name: '1vg6q84',
    styles: 'font-weight:700;',
  },
  '800': {
    name: 'ty7r4z',
    styles: 'font-weight:800;',
  },
  '900': {
    name: 'fdajvm',
    styles: 'font-weight:900;',
  },
}
export const size = memoTheme((size, theme) => {
  let scale = get(theme.text, 'scale', dT),
    fontSize = scale[size],
    typeOfFontSize = typeof fontSize
  if (typeOfFontSize === 'function') fontSize = fontSize(theme)
  else if (typeOfFontSize !== 'object')
    fontSize =
      /*#__PURE__*/
      css('font-size:', unit(fontSize, get(theme.text, 'sizeUnit', dT)), ';')
  const isLeg = get(theme.text, 'legible', dT).indexOf(size) > -1
  return (
    /*#__PURE__*/
    css(
      fontSize,
      ';',
      optimizeFor[isLeg ? 'legibility' : 'speed'],
      ';',
      isLeg && antialias,
      ';'
    )
  )
})
export const family = memoTheme((v, t) =>
  /*#__PURE__*/
  css('font-family:', get(t.text, 'families', dT)[v] || v, ';')
)
export const lineHeight = memoValue(v =>
  /*#__PURE__*/
  css('line-height:', v, ';')
)
export const color = (v, t) => colorize('color', v, t) // colorize implements nullIfFalse

export const aligned = {
  left: {
    name: '13brihr',
    styles: 'text-align:left;',
  },
  center: {
    name: 'xi606m',
    styles: 'text-align:center;',
  },
  right: {
    name: 's2uf1z',
    styles: 'text-align:right;',
  },
  justified: {
    name: 'tpvos8',
    styles: 'text-align:justify;',
  },
  inherit: {
    name: '10kv7gu',
    styles: 'text-align:inherit;',
  },
}
export const optimizeFor = {
    speed: {
      name: 'bbtsvy',
      styles: 'text-rendering:speed;',
    },
    legibility: {
      name: 'af5abj',
      styles: 'text-rendering:optimizeLegibility;',
    },
  },
  antialias = {
    name: '5258a8',
    styles:
      '-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;',
  },
  ellipsis = {
    name: '43f8d8',
    styles:
      'max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow-x:hidden;',
  }