twcss/src/main/constants.js

Fast minimalist utility-first CSS runtime inspired by Tailwind and Twind

// Generator helpers.
export const COLUMNS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
export const WIDTHS = [0, 1, 2, 4, 8]
export const OPACITIES = [0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100]
export const DURATIONS = [75, 100, 150, 200, 300, 500, 700, 1000]
export const SCALES = [0, 50, 75, 90, 95, 100, 105, 110, 125, 150]
export const SKEWS = [0, 1, 2, 3, 6, 12]
export const ORIGINS = ['center', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left']
export const RADII = [
  ['-xs', '2px'],
  ['-sm', '4px'],
  ['-md', '6px'],
  ['-lg', '8px'],
  ['-xl', '12px'],
  ['-2xl', '16px'],
  ['-3xl', '24px'],
  ['-full', '50%'],
  ['-none', 0],
]
export const Z_INDEXES = [0, 10, 20, 30, 40, 50, 'auto']
export const LINE_CLAMPS = [1, 2, 3, 4, 5, 6, 'none']
export const BRIGHTNESS_LEVELS = [0, 50, 75, 90, 95, 100, 105, 110, 125, 150, 200]
export const CONTRAST_LEVELS = [0, 50, 75, 100, 125, 150, 200]
export const SATURATE_LEVELS = [0, 50, 75, 100, 150, 200]
export const HUE_ROTATE_DEGREES = [0, 15, 30, 60, 90, 180]
export const ROTATE_DEGREES = [0, 1, 2, 3, 6, 12, 45, 90, 180]
export const STROKE_WIDTHS = [0, 1, 2]
export const BLEND_MODES = ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity']
export const ANIM_TIME = '250ms'

// Compiler helpers.
export const PSEUDO = ['before', 'after', 'placeholder', 'file', 'marker', 'selection', 'backdrop', 'first-letter', 'first-line']
export const STATES = ['hover', 'focus', 'focus-visible', 'active']
export const HIGH_PRIORITY_RULES = ['col-start', 'row-start', 'hidden', '-none']
export const STRING_SIZES = {
  auto: 'auto',
  px: '1px',
  full: '100%',
  screen: '100vw',
  dvw: '100vw',
  dvh: '100vh',
  lvw: '100lvw',
  lvh: '100lvh',
  svw: '100svw',
  svh: '100svh',
  min: 'min-content',
  max: 'max-content',
  fit: 'fit-content',
}