CSS in JS / UI Components

css-in-js.js

/* ===== Token ===== */

// font-size: px to rem Auto Calc
export const fz = (px) => {
    /* if html element has font-size get root fontSize
     *     => const fontSize = getComputedStyle( document.documentElement).fontSize
     */
    const fontSize = getComputedStyle(
        document.querySelector('body')
    ).fontSize
    console.log(fontSize)
    // calc for px to rem
    const fzCalc = px / parseFloat(fontSize)
    // 小数点の表示桁数
    const fzNum = parseFloat(fzCalc.toFixed(3))
    return `font-size:` + fzNum + 'rem;'
}

// Mixin
export const fx_center = () => {
    return `
    display: flex;
    align-items: center;
    justify-content: center;
`
}

// bg-color
export const bgc = (bgColor) => {
    return `
    background-color: ${bgColor};
`
}

// color
export const color = (c) => {
    return `
    color: ${c};
`
}

// ui function
export const grid = (
    col_start,
    col_end,
    row_start,
    row_end
) => {
    return `
        // TODO: for IE AutoPrefix
        grid-column: ${col_start} / ${col_end}; // Horizontal ↑↓
        grid-row: ${row_start} / ${row_end}; // Vertical ←→
    `
}

// UI Component
export const block = {
    db: `display: block;`,
    df: `display: flex;`,
    dg: `display: grid;`,
}

// UI Component
export const c = {
    main: 'tomato',
    accent: '#1EC18D',
    dark: '#234',

    gray: {
        g50: `#fafafa`,
        g100: `#f5f5f5`,
        g200: `#eeeeee`,
        g300: `#e0e0e0`,
        g400: `#bdbdbd`,
        g500: `#9e9e9e`,
        g600: `#757575`,
        g700: `#616161`,
        g800: `#424242`,
        g900: `#212121`,
    },
}


/* ===== UseCase ===== */
import * as React from 'react'
import * as ui from '../components/ui'

// ===== Styling Start =====
const texColor = 'ghostwhite'

const Wrapper = styled.div`
    ${ui.fz(16)};
    ${ui.block.dg}
    ${ui.bgc(ui.c.gray.g800)};
    color: ${texColor};
    // TODO: Autoprefix for IE
    grid-template-columns: 50% 1fr;
    grid-template-rows: 60px 1fr 40px;
    min-height: 100vh;
`
const Header = styled.header`
    // col(Horizontal), row(Vertical)
    ${ui.grid(1, 4, 1, 2)};
    ${ui.bgc(ui.c.gray.g400)};
`
const Header__Mol_Title = styled.div`
    ${ui.fx_center}
    ${ui.color(ui.c.main)};
    ${ui.fz(24)};
    ${ui.bgc(ui.c.dark)};
    height: 60px;
`
// Atomic
const TextArea__Org = styled.div`
    // col(Horizontal), row(Vertical)
    ${ui.grid(1, 2, 2, 3)}
`
const TextArea = styled.textarea`
    ${ui.block.df}
    ${ui.bgc(ui.c.gray.g900)};
    ${ui.fz(16)};
    color: ${texColor};
    width: 100%;
    height: 100%;
    padding: 24px;
    border: none;
    resize: none;
    &:hover {
        background-color: #222;
        transition: 0.3s;
    }
`
const Preview = styled.div`
    // col, row
    ${ui.grid(2, 3, 2, 3)}
    padding: 24px;
    ${ui.fz(18)};
    background-color: #212;
    line-height: 1.75;
`
const Footer = styled.footer`
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    ${ui.fx_center}
    background-color: #111;
`
// ===== Styling End =====