Source Foundation CLI

This command line tool converts ./source.config.json into ./css/variables.css so you can use custom properties with Tailwind CSS

{
    "hue": 190,
    "saturation": 0.2,
    "distance": 0.02,
    "primary": "blue",
    "info": "teal",
    "success": "green",
    "warning": "amber",
    "danger": "red",
    "red": 4,
    "blue": 200,
    "accentSaturation": 0.9
    ...
}

[data-theme=light], .theme-light {
    --accent-blue-100: hsla(194.4,84.03%,46.67%,0.125);
    --accent-blue-200: hsla(194.4,84.03%,46.67%,0.25);
    --accent-blue-300: hsl(196.77,86.92%,41.96%);
    --accent-blue-400: hsl(199.88,89.58%,37.65%);


    /* ... */

    --primary-100: var(--accent-blue-100);
    --primary-200: var(--accent-blue-200);
    --primary-300: var(--accent-blue-300);
    --primary-400: var(--accent-blue-400);
    
    /* ... */
}

Get started

Install npm package

npm i -D source-foundation-cli

Create source.config.json

npx source-css init

Run the command above to create your ./source.config.json. This file has the parameters to generate color palettes, typography, radii and spacing tokens.

See default config →

Generate CSS variables

The command above will read your ./source.config.json and create the CSS file ./css/variables.css.

See default CSS variables →

Import CSS variables

@import "./css/variables.css";
...
@tailwind base;
@tailwind components;
@tailwind utilities;

How it works

Colours

Neutrals

Neutral colours are made with these parameters. Hue and saturation to set the tone and distance define the difference between adjacent shades.

{
    "hue":        190,   // Number from 0 to 360
    "saturation": 0.2,   // Number from 0.0 to 1.0
    "distance":   0.02,  // One of three values 0.02 | 0.03 | 0.04
}

See example on CodePen

Accents

Accent colours are a bit more complex than neutrals. Each colour is defined by its initial hue value.

{
    "red":    4,
    "amber":  25,
    "brown":  33,
    "green":  130,
    "teal":   180,
    "blue":   210,
    "indigo": 240,
    "violet": 260,
    "purple": 280,
    "pink":   340,
}

To generate shades there are four additional parameters.

{
    "accentSaturation":   0.90,  // sets overal saturation
    "accentMaxLuminance": 0.45,  // lightest shade
    "accentMidLuminance": 0.18,  // base shade, 18% luminance will make 4.5 : 1 contrast ratio 
    "accentMinLuminance": 0.10,  // the darkest shade
}

Accent saturation is pretty straightforward. Three others are where the magic happens. I use the luminance function to set three key shades. Mid shade is going to be the main accent colour that gives 4.5:1 contrast ratio against white. To achieve that I apply chroma.luminance(accentMidLuminance) where accentMidLuminance = 0.18. The other two parameters are for the lightest and darkest shades in the series. With three key shades, it is super easy to fill other spots with a simple colour scale function

See example on CodePen

Semantics

Semantic colours reference values from the accents.

{
    "primary": "blue",
    "info":    "teal",
    "success": "green",
    "warning": "amber",
    "danger":  "red",
}

Typography

Typography scale is set with typeScale parameter. There are three pre-calculated typography scales where values are rounded to the nearest integer that is even to four. This way text fits into 4px grid

{
    "typeScale":  "majorThird" | "minorThird" | "majorSecond"
}

Learn more about typographic scale →

Spacing & radii

Both spacing and radii use sets of pre-calculated values

Radii tokens → Spacing tokens →