UNPKG

twcss

Version:

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

50 lines (48 loc) 1.99 kB
// 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', }