tamia-theme

Simple theming for static sites. Works well with Emotion.

Installation

npm install tamia-theme

Usage

Set up a component library

Create a theme.js file in the root folder:

const space = 8;
module.exports = {
  fonts: {
    heading: '"Avenir Next", "Helvetica Neue", sans-serif',
    body: '"Lora", "Merriweather", "Georgia", serif'
  },
  space: {
    xxs: `${space / 4}px`,
    xs: `${space / 2}px`,
    s: `${space}px`,
    m: `${space * 2}px`,
    l: `${space * 4}px`,
    xl: `${space * 8}px`,
    xxl: `${space * 16}px`
  }
};

And use it like this in your components:

import React from 'react';
import styled from 'react-emotion';
import theme from 'tamia-theme';

const Container = styled.div`
  display: flex;
  margin-bottom: ${theme.space.xl};
`;

Set up an app

Create a theme.js file in the root folder:

const merge = require('lodash/merge');
const theme = require('@unicorn/component-library/theme');
module.exports = merge(theme, {
  fonts: {
    heading: '"Avenir Next", "Helvetica Neue", sans-serif',
    body: '"Lora", "Merriweather", "Georgia", serif'
  }
});

And use it in your components the same way as described above.

Babel plugin

The Babel plugin will inline theme variables inside template literals, so babel-plugin-emotion could extract those styles.

Add the plugin to your .babelrc:

{
  "plugins": [
    "tamia-theme/babel",
    [
      "emotion",
      {
        "extractStatic": true
      }
    ]
  ]
}

Change log

The change log can be found on the Releases page.

Contributing

Everyone is welcome to contribute. Please take a moment to review the contributing guidelines.

Authors and license

Artem Sapegin and contributors.

MIT License, see the included License.md file.