@ds-tools/theme.css

Convert system-ui themes to css variables

 

install

yarn add @ds-tools/theme.css --dev

 

usage

Add it to your package.json

{
  "scripts": {
    "css": "theme.css --path examples/theme.js"
  }
}

 

input:

A theme that follows the system-ui spec

/* theme.js */

const theme = {
  space: [0, 4, 8, 16, 32, 64],
  radii: [0, 2, 5, 10],
  fontSizes: [0, 11, 12, 14, 16, 20],
  colors: {
    white: "#fff",
    blues: {
      100: "#EFF8FF",
      500: "#3793E0",
      900: "#203D54"
    }
  }
};

export default theme;

output:

/* theme.css */

:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 32px;
  --space-5: 64px;

  --radii-0: 0px;
  --radii-1: 2px;
  --radii-2: 5px;
  --radii-3: 10px;

  --fontSizes-0: 0px;
  --fontSizes-1: 11px;
  --fontSizes-2: 12px;
  --fontSizes-3: 14px;
  --fontSizes-4: 16px;
  --fontSizes-5: 20px;

  --colors-white: #fff;
  --colors-blues-100: #eff8ff;
  --colors-blues-500: #3793e0;
  --colors-blues-900: #203d54;
}

 

license

MIT © siddharthkp