uinix-theme-spec-theme-ui

The theme-ui theme spec usable by uinix-theme.

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-theme-ui

Use

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

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

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


console.log(theme);

Yields the following theme object.

const theme = {
  borders: {},
  borderStyles: {},
  borderWidths: {},
  colors: {
    brand: {
      primary: 'red',
      link: 'blue',
    },
  },
  fonts: {},
  fontSizes: {},
  fontWeights: {},
  letterSpacings: {},
  lineHeights: {},
  opacities: {},
  radii: {},
  shadows: {},
  sizes: {},
  space: {
    s: 4,
    m: 8,
    l: 16,
  },
  transforms: {},
  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 and theme-ui for more details.

API

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

spec (ThemeSpec)

A theme-ui theme spec, usable by a theme renderer.

Related

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

License

MIT © Chris Zhou