uinix-theme-spec

The default uinix-theme spec.

Visit the Theme Playground for interactive demos.

Contents

• Install
• Use
• API
• Related
• License

Install

This package is ESM-only and requires Node 12+.

npm install uinix-theme-spec

Use

uinix-theme-spec can be used officially with uinix-theme or uinix-ui.

import {createTheme} from 'uinix-theme';
import themeSpec from 'uinix-theme-spec';

const theme = createTheme({
  colors: {
    brand: {
      primary: 'red',
      link: 'blue',
    },
  },
  spacings: {
    s: 4,
    m: 8,
    l: 16,
  },
  unsupportedThemeProperty: {}
}, themeSpec);


console.log(theme);

Yields the following theme object.

const theme = {
  animations: {},
  backgrounds: {},
  borders: {},
  borderStyles: {},
  borderWidths: {},
  colors: {
    brand: {
      primary: 'red',
      link: 'blue',
    },
  },
  filters: {},
  fontFamilies: {},
  fontSizes: {},
  fontWeights: {},
  images: {},
  keyframes: {},
  letterSpacings: {},
  lineHeights: {},
  opacities: {},
  radii: {},
  shadows: {},
  sizes: {},
  spacings: {
    s: 4,
    m: 8,
    l: 16,
  },
  transforms: {},
  transitions: {},
  zIndices: {},
};

Apply the theme and themeSpec to a theme renderer.

import {createThemeRenderer} from 'uinix-theme';

const renderer = createThemeRenderer({
  theme,
  themeSpec,
});

Initialize the renderer and render a themed style.

const style = {
  color: 'brand.primary',
  padding: 'm',
  ':hover > a': {
    color: 'brand.link',
    padding: 's',
  },
};

renderer.renderStyle(style);

Yields the following rendered CSS

.x {
  color: red;
  padding: 8px;
}
.x:hover > a {
  color: blue;
  padding: 4px
}

See uinix-theme for more details.

API

uinix-theme-spec only has a single default export.

spec (ThemeSpec)

A theme spec, usable by a theme renderer.

Related

• uinix-theme
• uinix-theme-spec-theme-ui
• uinix-ui

License

MIT © Chris Zhou