Styled Components Mixin Functions and Theme

styled-theme.js

import styled from 'styled-components';

export const theme = {
    colors: {
        primaryColor: 'green',
        secondaryColor: 'black',
    },
    device: {
        "phone": '@media(min-width: 400px)',
        'phoneWide': '@media(min-width: 480px)',
        'phablet': '@media(min-width: 560px)',
        'tabletSmall': '@media(min-width: 640px)',
        'tabletWide': '@media(min-width: 1240px)',
        'desktop': '@media(min-width: 1248px)',
        'desktopWide': '@media(min-width: 1440px)',
    },
    
};

const { device } = theme;
const { colors } = theme;

//Mixins
const marginAuto = `
    margin-left: auto;
    margin-right: auto;
`;

function pseudoPrefix(display = 'block', pos = 'absolute', content = '') {
    return (`
        content: ${content};
        display: ${display};
        position: ${pos};
    `);
}

function responsiveRatio(x, y, pseudo = false) {
    let padding = ( y / x ) * 100;
    if (pseudo) {
        return (`
            &:before {
                ${pseudoPrefix('block','relative', '')};
                width: 100%;
                padding-top: ${padding}%;
            }
        `);
    } else {
        return `padding-top: ${padding}%;`
    }
}

function fontStack(size = false, color = false, weight = false,  lh = false) {
    return (`
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
        ${size ? 'font-size: ' + size + ';' : ''}
        ${color ? 'color: ' + color + ';' : ''}
        ${weight ? 'font-weight: ' + weight + ';' : ''}
        ${lh ? 'line-height: ' + lh + ';' : ''}
    `);
}

function inputPlaceholder(css) {
    return (`
        &.placeholder { ${css} }
        &:-moz-placeholder { ${css} }
        &::-moz-placeholder { ${css} }
        &:-ms-input-placeholder { ${css} }
        &::-webkit-input-placeholder { ${css} }
    `);
}

function z(location) {
    location === 'outdated-browser' ? location = '1' : '';
    location === 'modal' ? location = '2' : '';
    location === 'header' ? location = '3' : '';
    location === 'wrapper' ? location = '4' : '';
    location === 'footer' ? location = '5' : '';
    return location;
}

function hardware(backface = true, perspective = '1000') {
    if (backface) {
        return `
            backface-visibility: hidden;
            perspective: ${perspective}
        `;
    }
}

function truncate(boundary) {
    return `
        max-width: ${boundary};
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    `;
}

function cssTriangle(size = '6', round = false, ...Params) {
    const sizeFix = 0 - Math.round( parseInt(size) / 2.5 );
    const color = Params['0'] || 'blue';
    const direction = Params['1'] || 'down';
    return (`
        width: 0;
        height: 0;
        ${round && 'border-radius: 3px;'}
        ${direction === 'down' ? 'border-left:' + size + 'px' + ' solid transparent;' : ''}
        ${direction === 'down' ? 'border-right:' + size + 'px' + ' solid transparent;' : ''}
        ${direction === 'down' ? 'border-top:' + size + 'px' + ' solid ' + color + ';' : ''}
        ${direction === 'down' ? 'margin-top: ' + sizeFix + 'px;' : ''}

        ${direction === 'up' ? 'border-left: ' + size + 'px' + ' solid transparent;' : ''}
        ${direction === 'up' ? 'border-right: ' + size + 'px' + ' solid transparent;' : ''}
        ${direction === 'up' ? 'border-bottom: ' + size + 'px' + ' solid ' + color + ';' : ''}
        ${direction === 'up' ? 'margin-bottom: ' + sizeFix + 'px;' : ''}

        ${direction === 'right' ? 'border-top: ' + size + 'px' + ' solid transparent;' : ''}
        ${direction === 'right' ? 'border-bottom: ' + size + 'px' + ' solid transparent;' : ''}
        ${direction === 'right' ? 'border-left: ' + size + 'px' + ' solid ' + color + ';' : ''}
        ${direction === 'right' ? 'margin-right: ' + '-' + size + 'px;' : ''}

        ${direction === 'left' ? 'border-top:' + size + 'px' + ' solid transparent;' : ''}
        ${direction === 'left' ? 'border-bottom:' + size + 'px' + ' solid transparent;' : ''}
        ${direction === 'left' ? 'border-right:' + size + 'px' + ' solid ' + color + ';' : ''}
        ${direction === 'left' ? 'margin-left:' + '-' + size + 'px' : ''}
    `);
}