curls
Version:
💪 Responsive, expressive UI primitives for React written with Style Hooks and Emotion
293 lines (287 loc) • 6.84 kB
JavaScript
import {css} from '@emotion/core'
import {
directionalScale,
isDirectional,
colorize,
unit,
memoValue,
memoTheme,
get,
} from '../utils'
import * as dT from './defaultTheme'
const ws = /\s+/,
overflow = {
auto: {
name: '1v8x7dw',
styles: 'overflow:auto;',
},
autoX: {
name: 'ayshjd',
styles: 'overflow-x:auto;',
},
autoY: {
name: '13v3rg8',
styles: 'overflow-y:auto;',
},
hidden: {
name: 'i6bazn',
styles: 'overflow:hidden;',
},
hiddenX: {
name: '1kzo3b9',
styles: 'overflow-x:hidden;',
},
hiddenY: {
name: '144vlu9',
styles: 'overflow-y:hidden;',
},
scroll: {
name: 'xdees7',
styles: 'overflow:scroll;',
},
scrollX: {
name: '13ad1he',
styles: 'overflow-x:scroll;',
},
scrollY: {
name: '15bvnbz',
styles: 'overflow-y:scroll;',
},
touch: {
name: '1ojwqei',
styles: '-webkit-overflow-scrolling:touch;',
},
}
export const ov = memoValue(value => {
const vals = value.split(ws)
if (vals.length === 1) return overflow[value]
let CSS = [],
i = 0
for (; i < vals.length; i++)
CSS.push(
/*#__PURE__*/
css(overflow[vals[i]], ';')
)
return CSS
}),
z = memoValue(value =>
/*#__PURE__*/
css('z-index:', value, ';')
),
sh = memoTheme((v, t) => get(t.box, 'getBoxShadow', dT)(v, t)),
bg = (value, theme) => colorize('background', value, theme),
// colorize memoizes
bc = (value, theme) => colorize('border-color', value, theme),
// colorize memoizes
w = memoTheme((v, t) =>
/*#__PURE__*/
css('width:', unit(v, t.sizeUnit), ';')
),
h = memoTheme((v, t) =>
/*#__PURE__*/
css('height:', unit(v, t.sizeUnit), ';')
),
minW = memoTheme((v, t) =>
/*#__PURE__*/
css('min-width:', unit(v, t.sizeUnit), ';')
),
minH = memoTheme((v, t) =>
/*#__PURE__*/
css('min-height:', unit(v, t.sizeUnit), ';')
),
maxW = memoTheme((v, t) =>
/*#__PURE__*/
css('max-width:', unit(v, t.sizeUnit), ';')
),
maxH = memoTheme((v, t) =>
/*#__PURE__*/
css('max-height:', unit(v, t.sizeUnit), ';')
),
t = memoTheme((v, t) =>
/*#__PURE__*/
css('top:', unit(v, get(t.box, 'posUnit', dT)), ';')
),
r = memoTheme((v, t) =>
/*#__PURE__*/
css('right:', unit(v, get(t.box, 'posUnit', dT)), ';')
),
b = memoTheme((v, t) =>
/*#__PURE__*/
css('bottom:', unit(v, get(t.box, 'posUnit', dT)), ';')
),
l = memoTheme((v, t) =>
/*#__PURE__*/
css('left:', unit(v, get(t.box, 'posUnit', dT)), ';')
),
pos = {
relative: {
name: '79elbk',
styles: 'position:relative;',
},
absolute: {
name: '12efcmn',
styles: 'position:absolute;',
},
fixed: {
name: '1b7bwed',
styles: 'position:fixed;',
},
sticky: {
name: 'jkcygd',
styles: 'position:relative;position:sticky;top:0;',
},
static: {
name: '1vu2yqv',
styles: 'position:static;',
},
unset: {
name: '8dn4zy',
styles: 'position:unset;',
},
initial: {
name: '17d8e68',
styles: 'position:initial;',
},
inherit: {
name: '18nsqm8',
styles: 'position:inherit;',
},
},
d = {
block: {
name: '13o7eu2',
styles: 'display:block;',
},
inlineBlock: {
name: '1baulvz',
styles: 'display:inline-block;',
},
flex: {
name: 'k008qs',
styles: 'display:flex;',
},
inlineFlex: {
name: 'vxcmzt',
styles: 'display:inline-flex;',
},
inline: {
name: '6n7j50',
styles: 'display:inline;',
},
grid: {
name: 'lgj0h8',
styles: 'display:grid;',
},
inlineGrid: {
name: '19rux3o',
styles: 'display:inline-grid;',
},
table: {
name: 'z920ed',
styles: 'display:table;',
},
inlineTable: {
name: 'ngbczj',
styles: 'display:inline-table;',
},
tableCell: {
name: '2qghsv',
styles: 'display:table-cell;',
},
tableRow: {
name: 'ds3kc',
styles: 'display:table-row;',
},
tableColumn: {
name: '1qhzju6',
styles: 'display:table-column;',
},
contents: {
name: '1obf64m',
styles: 'display:contents;',
},
listItem: {
name: '1wt922f',
styles: 'display:list-item;',
},
none: {
name: '1hyfx7x',
styles: 'display:none;',
},
}
const getDefaultScale = (property, scale, value, scaleUnit) => {
const scaleValue = scale[value]
if (process.env.NODE_ENV !== 'production')
if (scaleValue === void 0)
throw new Error(
"Unrecognized scale value for '" + property + "': " + value
)
return (
/*#__PURE__*/
css(property, ':', unit(scaleValue, scaleUnit), ';')
)
}
export const bw = memoTheme((value, theme) => {
const bwScale = get(theme.box, 'borderWidthScale', dT),
bwUnit = get(theme.box, 'borderWidthUnit', dT)
if (isDirectional(value))
return (
/*#__PURE__*/
css(
'border-style:solid;',
directionalScale('border-{XYZ}-width', bwScale, value, bwUnit),
';'
)
)
else
return (
/*#__PURE__*/
css(
'border-style:solid;',
getDefaultScale('border-width', bwScale, value, bwUnit)
)
)
})
const borderRadiusDirections = {
_: ['top-right', 'bottom-right', 'bottom-left', 'top-left'],
t: ['top-right', 'top-left'],
r: ['top-right', 'bottom-right'],
b: ['bottom-right', 'bottom-left'],
l: ['top-left', 'bottom-left'],
tl: ['top-left'],
tr: ['top-right'],
br: ['bottom-right'],
bl: ['bottom-left'],
}
export const br = memoTheme((value, theme) => {
const brScale = get(theme.box, 'borderRadiusScale', dT),
brUnit = get(theme.box, 'borderRadiusUnit', dT)
if (isDirectional(value)) {
return directionalScale(
'border-{XYZ}-radius',
brScale,
value,
brUnit,
borderRadiusDirections
)
} else return getDefaultScale('border-radius', brScale, value, brUnit)
})
var _ref = {
name: '42igfv',
styles: 'margin:auto;',
}
export const m = memoTheme((value, theme) => {
const {spacingScale, spacingUnit} = theme
if (isDirectional(value))
return directionalScale('margin-{XYZ}', spacingScale, value, spacingUnit)
else
return typeof value === 'string' && value.trim() === 'auto'
? _ref
: getDefaultScale('margin', spacingScale, value, spacingUnit)
})
export const p = memoTheme((value, theme) => {
const {spacingScale, spacingUnit} = theme
if (isDirectional(value))
return directionalScale('padding-{XYZ}', spacingScale, value, spacingUnit)
else return getDefaultScale('padding', spacingScale, value, spacingUnit)
})