@patreon/studio/module/components/Box/utils.js

Patreon Studio Design System

import { css } from 'styled-components';
import { tokens } from '../../tokens';
import { convertLegacyUnitValue } from '../../utilities/legacy-units';
import { cssForResponsiveProp, hasResponsiveValue, mergeResponsive } from '../../utilities/opaque-responsive';
const responsiveLayout = (ruleName, base, top, right, left, bottom, vertical, horizontal) => {
    const unifiedTop = mergeResponsive([base, vertical, top]);
    const unifiedRight = mergeResponsive([base, horizontal, right]);
    const unifiedBottom = mergeResponsive([base, vertical, bottom]);
    const unifiedLeft = mergeResponsive([base, horizontal, left]);
    return css `
    ${cssForResponsiveProp(`${ruleName}-top`, unifiedTop, convertLegacyUnitValue)};
    ${cssForResponsiveProp(`${ruleName}-right`, unifiedRight, convertLegacyUnitValue)};
    ${cssForResponsiveProp(`${ruleName}-bottom`, unifiedBottom, convertLegacyUnitValue)};
    ${cssForResponsiveProp(`${ruleName}-left`, unifiedLeft, convertLegacyUnitValue)};
  `;
};
export const getPadding = ({ p, pt, pr, pl, pb, pv, ph }) => responsiveLayout('padding', p, pt, pr, pl, pb, pv, ph);
export const getMargin = ({ m, mt, mr, ml, mb, mv, mh }) => responsiveLayout('margin', m, mt, mr, ml, mb, mv, mh);
const convertBorderValue = ({ border, borderColor, borderStrokeWidth, borderStyle, }) => {
    if (border && typeof border === 'boolean') {
        return `${borderStyle} ${borderStrokeWidth ?? tokens.global.borderWidth.thin} ${borderColor}`;
    }
    else if (border) {
        return border;
    }
    return 'none';
};
export const getBorder = ({ b, bt, br, bb, bl, borderColor, borderStrokeWidth, borderStyle }) => {
    const convertValue = (value) => convertBorderValue({
        border: value,
        borderColor,
        borderStrokeWidth,
        borderStyle,
    });
    if (hasResponsiveValue(b)) {
        return cssForResponsiveProp('border', b, convertValue);
    }
    return css `
    ${cssForResponsiveProp('border-top', bt, convertValue)};
    ${cssForResponsiveProp('border-right', br, convertValue)};
    ${cssForResponsiveProp('border-bottom', bb, convertValue)};
    ${cssForResponsiveProp('border-left', bl, convertValue)};
  `;
};
//# sourceMappingURL=utils.js.map