# baseColors.js

const primary = 'bada55'
const secondary = '111111'
const interactive = '#676767'

# config.js

import baseColors as colors

const nrma = {
    colors: {
        primary: {
            DEFAULT: colors.primary,
            subdued: lighten(colors.primary, 20%),
            hovered: darken(colors.primary, 20%)
        },
        secondary: {
            DEFAULT: colors.secondary,
            subdued: lighten(colors.secondary, 20%),
            hovered: darken(colors.secondary, 20%)
        },
        interactive: {
            DEFAULT: colors.interactive
        }
    }
}

<i class="text-secondary-subdued hover:text-secondary-hover" />

const Color = require('color')
const lighten = (clr, val) => Color(clr).lighten(val).rgb().string()
const darken = (clr, val) => Color(clr).darken(val).rgb().string()

module.exports = {
  theme: {
    colors: {
      brand: {
        DEFAULT: 'hotpink', // => .bg-brand
        hover: lighten('hotpink', 0.1), // => .bg-brand-lighter
        subdued: darken('hotpink', 0.1), // => .bg-brand-darker
      },
    },
  },
}