sugar

sugar

Core plugin for the sugar design system

• Prerequisites
• Installation
  • npm
  • Yarn
  • pnpm
• Setup
• Usage
• Configuration

Prerequisites

• NodeJS 14+
• A functioning Tailwind setup

Installation

Install @singlestone/sugar with your NodeJS package manager of choice.

npm

$ npm install -D @singlestone/sugar

Yarn

$ yarn add -D @singlestone/sugar

pnpm

$ pnpm install -D @singlestone/sugar

Setup

After installation, add Sugar to your tailwind.config.js like so:

// tailwind.config.js
module.exports = {
  mode: "jit",
  content: [
    // change this to fit your project as necessary
    "./src/**/*.{ts,tsx}",
    "./index.html",
  ],
  plugins: [require("@singlestone/sugar").sugarCorePlugin()],
};

Usage

Once you've followed the Installation and Setup process, you can use the CSS classes generated in your JavaScript and HTML.

Check out our Storybook for examples on how to do so.

Configuration

You can customize the colors that Sugar uses by default by providing colors objects in your Tailwind config.

// tailwind.config.js
const colors = require("tailwindcss/colors");

module.exports = {
  mode: "jit",
  content: [
    // change this to fit your project as necessary
    "./src/**/*.{ts,tsx}",
    "./index.html",
  ],
  theme: {
    extend: {
      colors: {
        // You can use built in Tailwind colors!
        accent: colors.purple,
        // You can provide your own colors!
        // Make sure to provide the full range of colors when possible.
        // At the very least, provide the below entries:
        // 50, 200, 400, and 600
        destructive: {
          50: "#fef2f2",
          100: "#fee2e2",
          200: "#fecaca",
          300: "#fca5a5",
          400: "#f87171",
          500: "#ef4444",
          600: "#dc2626",
          700: "#b91c1c",
          800: "#991b1b",
          900: "#7f1d1d",
        },
        neutral: colors.slate,
      },
    },
  },
  plugins: [require("@singlestone/sugar").sugarCorePlugin()],
};