Migration from Theme UI

Motivation

The ecosystem behind Theme UI is growing fast. It’d be great to have a converter available for their own theme format. Also, a detailed documentation page which compares the differences between theme specs would also be very useful.

Basic example

/* theme.treat.js */

import { createTheme, fromThemeUI } from 'glaze';

export default createTheme(fromThemeUI({
  // Theme UI tokens, e.g.:
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#07c',
    secondary: '#05a',
    accent: '#609',
    muted: '#f6f6f6',
  },
  fonts: {
    body: 'system-ui, sans-serif',
    heading: 'system-ui, sans-serif',
    monospace: 'Menlo, monospace',
  },
  fontWeights: {
    body: 400,
    heading: 700,
    bold: 700,
  },
  lineHeights: {
    body: 1.5,
    heading: 1.125,
  },
}));

This would even allow using existing Theme UI presets, e.g.:

/* theme.treat.js */

import { bootstrap } from '@theme-ui/presets'
import { createTheme, fromThemeUI } from 'glaze';

export default createTheme(fromThemeUI({
  ...bootstrap,
  colors: {
    ...bootstrap.colors,
    brand: '#123456',
  },
}));

[hennessyevan]

Yeah, I’ve never personally used anything other than pixels. That all makes the kind of sense that does 👍 I’ll get a draft PR going.

[hennessyevan]

I’d be willing to take a stab at this.