Skip to content

Instantly share code, notes, and snippets.

@AshCoolman
Last active February 16, 2019 12:27
Show Gist options
  • Save AshCoolman/7de50aa9aba0bf7232ef0b4df903b735 to your computer and use it in GitHub Desktop.
Save AshCoolman/7de50aa9aba0bf7232ef0b4df903b735 to your computer and use it in GitHub Desktop.
Styled utility functions package

Styled utility functions package

I try and resist putting stuff in this package. But its just for overflow when theme/markup doesn't cut it, and if I CONTINUALLY reuse some styles.

Package structure

.
├── defaultTheme
│   └── index.js
├── index.js
└── render
    └── index.js

defaultTheme.js

import { setLightness } from 'polished';
import c from '@project/colors';

export default {
  page: {
    background: {
      color: setLightness(0.9, c.brand.grey),
    },
    color: c.brand.black,
    colorSecondary: c.brandLight.black,
  },
 ....etc...

render/index.js

import c from '@project/colors';

export const error = ({ error = false }) => (error
  ? `
  color: ${c.brand.error};
`
  : EMPTY);

....etc...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment