Kroket

Kroket generates tokens and utility classes for your Sass project, as well as a JSON file for your tokens.

Based on Gorko and Goron by Andy Bell.

Features

Create Sass and JSON files from your tokens

With Kroket, you can use a single JavaScript file to create Sass and JSON files with your colors, sizes etc. This is ideal if you use these items outside your CSS (for example, in JavaScript or PHP) and want a single source of truth.

Sass

@import 'config';

body {
    background-color: get-color('primary');
}

JavaScript

const tokens = require('tokens.json');

console.log(tokens.color.primary);

PHP

$tokens = json_decode(file_get_contents('path/to/tokens.json'), true);

var_dump($tokens['color']['primary']);

Automatically create (responsive) utility classes

Kroket automatically creates utility classes from your config. For example, let's say this is (part of) your config:

const colors = {
  primary: '#ff00ff',
  light: '#ffffff',
  dark: '#252525',
};

const sizes = {
  300: '0.8rem',
  700: '1.95rem',
};

const config = {
  breakpoints: {
    sm: '32em',
    md: '48em',
    lg: '68em',
  },
  utilities: {
    'bg': {
      items: colors,
      output: 'standard',
      property: 'background',
    },
    'text': {
      items: sizes,
      output: 'responsive',
      property: 'font-size',
    },
};

This config will generate the following classes for you:

• .bg-primary
• .bg-light
• .bg-dark
• .text-300
• .text-700
• .sm:text-300
• .sm:text-700
• .md:text-300
• .md:text-700
• .lg:text-300
• .lg:text-700

Helpful mixins and functions

Kroket comes with a bunch of helpful Sass mixins and functions. These work especially well with our custom VS Code extension.

.card {
    @include apply-utility('font', 'heading');

    background-color: get-color('white');

    @include media-query('md') {
        font-size: get-size('500');
        border-top-left-radius: get-utility('radius', 'large');
    }
}

Installation

npm install kroket

Usage

CLI

npx kroket

Node

const kroket = require('kroket');

kroket();

Gulp

const kroket = require('kroket');

function runKroket(done) {
    kroket();
    done();
}

function watch() {
    gulp.watch('./kroket.config.js', runKroket);
}

gulp.task('default', gulp.series(runKroket, watch));

Configuration

You can add a file called kroket.config.js to the root of your project to customize the output. If you don't specify a file, Kroket uses the default config:

const colors = {
  primary: '#ff00ff',
  light: '#ffffff',
  dark: '#252525',
};

const fonts = {
  base: 'Helvetica, sans-serif',
  serif: 'Georgia, serif',
};

const sizes = {
  300: '0.8rem',
  400: '1rem',
  500: '1.25rem',
  600: '1.56rem',
  700: '1.95rem',
  800: '2.44rem',
  900: '3.05rem',
};

module.exports = {
  outputPath: {
    sass: {
      config: 'src/scss/_config.scss',
      utilities: 'src/scss/_utilities.scss',
    },
    json: 'build/tokens.json',
  },
  items: {
    color: {
      items: colors,
      output: ['sass', 'json'],
    },
    size: {
      items: sizes,
      output: ['sass', 'json'],
    },
  },
  breakpoints: {
    sm: '32em',
    md: '48em',
    lg: '68em',
  },
  utilities: {
    'bg': {
      items: colors,
      output: 'standard',
      property: 'background',
    },
    'color': {
      items: colors,
      output: 'standard',
      property: 'color',
    },
    'font': {
      items: fonts,
      output: 'standard',
      property: 'font-family',
    },
    'gap-top': {
      items: sizes,
      output: 'standard',
      property: 'margin-top',
    },
    'gap-bottom': {
      items: sizes,
      output: 'standard',
      property: 'margin-bottom',
    },
    'leading': {
      items: {
        tight: '1.2',
        mid: '1.5',
        loose: '1.7',
      },
      output: 'standard',
      property: 'line-height',
    },
    'measure': {
      items: {
        long: '75ch',
        short: '60ch',
        compact: '40ch',
      },
      output: 'standard',
      property: 'max-width',
    },
    'text': {
      items: sizes,
      output: 'responsive',
      property: 'font-size',
    },
    'weight': {
      items: {
        light: '300',
        regular: '400',
        mid: '600',
        bold: '700',
      },
      output: 'standard',
      property: 'font-weight',
    },
  },
};