wootsbot/glaze

CSS-in-JS framework for building approachable design systems.

💡 Motivation

When styling HTML elements, quite a few approaches may come to mind, including:

Utility-first/Atomic CSS, as implemented by Tailwind CSS, StyleSheet and CSS-Zero
- Fully static, but customizable upfront
- Embraces reusability with no duplicated rules
Constraint-based layouts, popularized by Theme UI
- Highly dynamic, thankfully to Emotion
- One-off styles can be defined naturally

Baking the benefits outlined above into a single package, glaze was born.

🚀 Key features

Simple API inspired by inline styles
Near-zero runtime built upon treat
Personalizable design tokens inherited from Tailwind CSS and Theme UI
Composable property aliases and shorthands mapped to scales
- E.g. paddingX or px for defining horizontal padding

🚧 In development

Responsive values defined as an array
Pseudo-class support

📚 Usage

Install the package and its peer dependencies:
```
npm install glaze treat react-treat
```

Define a theme, preferably by overriding the default tokens:

/* theme.treat.js */

import { createTheme, defaultTokens } from 'glaze';

export default createTheme({
  ...defaultTokens,

  // Customization
  scales: {
    ...defaultTokens.scales,
    color: {
      red: '#f8485e',
    },
  },
});

Apply the theme through ThemeProvider:

📝 A Gatsby plugin is available for this task.

import { ThemeProvider } from 'glaze';
import theme from './theme.treat';

export default function Layout({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

Style elements with the sx function:

import { useStyling } from 'glaze';

export default function Component() {
  const sx = useStyling();

  return (
    <p
      className={sx({
        px: 4, // Sets padding-left and padding-right to 1rem
        color: 'white',
        bg: 'red', // Sets background to #f8485e
      })}
    >
      Hello, world!
    </p>
  );
}

Please refer to the treat documentation for:
- Setting up static style extraction and server-side rendering
- Applying a selector-based globalStyle

🤔 How it works

The sx function maps themed values to statically generated class names
- If that fails, the style gets injected dynamically through the CSSOM
Dynamic styles which are not in use by any component get removed

Rule handling

Transform each alias to its corresponding CSS property name or custom shorthand
Resolve values from the scales available
- CSS properties associated with a custom shorthand are resolved one by one

Example

Given the theme below:

import { createTheme } from 'glaze';

export default createTheme({
  scales: {
    spacing: { 4: '1rem' },
  },
  shorthands: {
    paddingX: ['paddingLeft', 'paddingRight'],
  },
  aliases: {
    px: 'paddingX',
  },
  resolvers: {
    paddingLeft: 'spacing',
    paddingRight: 'spacing',
  },
});