twcss
Version:
Fast minimalist utility-first CSS runtime inspired by Tailwind and Twind
50 lines (48 loc) • 1.99 kB
JavaScript
// 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',
}