0.0.51 • Published 10 months ago

untheme v0.0.51

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

untheme

🎨 A universal tokenized theme manager to implement dynamic design systems.

 Release Notes

Configuration

  1. Install the module
[npm|yarn|pnpm] add untheme
  1. Create an untheme instance w/ your design tokens
// ~/untheme.ts
import { defineUntheme } from "untheme";

export default defineUntheme({
  tokens: {
    blue: "#0096ff",
    green: "#00a36c",
    orange: "#ff5733",
  },
  themes: {
    theme1: {
      primary: "blue",
      secondary: "orange",
    },
    theme2: {
      primary: "green",
      secondary: "blue",
    },
  },
  modes: {
    light: {
      active: "primary",
    },
    dark: {
      active: "secondary",
    },
  },
  roles: {
    button: "primary",
    link: "active",
  },
});
  1. Paint a picture w/ Bob Ross, you are done!

Features

Taking inspiration from the Material 3 Design Tokens specification, untheme was built to provide a system to implement a tokenized design system in JS/TS applications. Using untheme, we can define:

  • Reference tokens that represent static CSS values that will be applied for styling
  • Theme tokens that resolve to any available reference tokens and comprise a unique theme
  • Mode tokens that resolve to any available reference or system tokens and implement color modes (light, dark)
  • Role tokens that resolve to any available reference, system, or mode tokens and are useful in components

The configuration functions are full type-safe and any modern IDE will be able to take advantage of the extremely helpful type-hints.

Utilities

Instatiating an untheme config will expose several useful utilities:

// ~/utils/example.ts
import untheme from "~/untheme";

// access a flattened untheme config using a given theme/mode
const unthemeConfig = untheme.use("theme1", "dark");

// resolve a given token/theme/mode to it's base CSS value
const unthemePrimaryValue = untheme.resolve("primary", "theme2", "light");

// access a list of available themes
const unthemeThemes = untheme.themes();

// access a list of available tokens
const unthemeTokens = untheme.tokens();

Integrations

untheme can be integrated w/ frameworks like nuxt & unocss to take your design system further:

ProjectDescription
nuxt-untheme
unocss-preset-untheme

If you have an idea for an integration, please let me know and I will see if I can help out!

License

MIT License © 2024-PRESENT Alexander Thorwaldson

0.0.42

10 months ago

0.0.43

10 months ago

0.0.44

10 months ago

0.0.45

10 months ago

0.0.46

10 months ago

0.0.47

10 months ago

0.0.51

10 months ago

0.0.50

10 months ago

0.0.48

10 months ago

0.0.49

10 months ago

0.0.40

1 year ago

0.0.41

1 year ago

0.0.37

1 year ago

0.0.38

1 year ago

0.0.39

1 year ago

0.0.32

1 year ago

0.0.33

1 year ago

0.0.34

1 year ago

0.0.35

1 year ago

0.0.36

1 year ago

0.0.31

1 year ago

0.0.30

1 year ago

0.0.29

1 year ago

0.0.28

1 year ago

0.0.25

1 year ago

0.0.26

1 year ago

0.0.27

1 year ago

0.0.20

1 year ago

0.0.21

1 year ago

0.0.22

1 year ago

0.0.23

1 year ago

0.0.24

1 year ago

0.0.11

1 year ago

0.0.12

1 year ago

0.0.13

1 year ago

0.0.14

1 year ago

0.0.15

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.17

1 year ago

0.0.18

1 year ago

0.0.19

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

1.0.0

1 year ago