@sil/themer/themer.json

Sass Variable Theming

{
  "outputs":{
    "ts": "./src/data/theme.ts",
    "js": "./src/data/theme.js",
    "json": "./src/data/theme.json",
    "scss": "./src/style/theme.scss"
  },
  "colors": {
    "background": "#ffffff",
    "foreground": "#111111"
  },

  "settings": {
    "prefix": "my-project",
    "styleOutput": true,
    "classBasedProperties": true,
    "generateBase": true,
    "generateTypography": true,
    "generateColors": true,
    "generateColorModes": true,
    "colorModes": true,
    "colorShades": true,
    "colorPercentages": false,
    "colorSteps": [10, 25, 50, 75, 90],
    "colorText": true,
    "breakpointNames": ["small", "medium", "large"],
    "breakpointSizes": [0, 720, 1200]
  }
}