Elevate Tailwind Theme

A shareable Tailwind CSS theme extracted from the Elevate engine. This package provides a consistent design system theme that can be used in your Tailwind configuration.

Installation

npm install elevate-tailwind-config
# or
yarn add elevate-tailwind-config

Installing from GitHub Packages

This package is hosted on GitHub Packages. You'll need to configure your project to authenticate with GitHub Packages:

1. Create or update .npmrc in your project root:

@g2crowd:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

2. Set your GitHub personal access token as an environment variable:

export GITHUB_TOKEN=your-github-token-here

3. Install the package:

npm install @g2crowd/elevate-tailwind-config
# or
yarn add @g2crowd/elevate-tailwind-config

Usage

Basic Usage

Use the Elevate theme in your Tailwind configuration by extending your theme:

// tailwind.config.js
const elevateTheme = require('@g2crowd/elevate-tailwind-config');

module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './public/**/*.html',
  ],
  theme: {
    extend: {
      ...elevateTheme
    }
  }
};

Selective Usage

You can use specific parts of the theme:

// tailwind.config.js
const elevateTheme = require('@g2crowd/elevate-tailwind-config');

module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './public/**/*.html',
  ],
  theme: {
    extend: {
      // Use only specific theme properties
      colors: elevateTheme.backgroundColor,
      fontFamily: elevateTheme.fontFamily,
      spacing: elevateTheme.spacing,
      // Add your own customizations
      colors: {
        ...elevateTheme.backgroundColor,
        'my-brand': '#ff0000',
      }
    }
  }
};

Advanced Usage - Individual Theme Parts

You can also access individual theme parts for more granular customization:

// tailwind.config.js
const { palette, dataColors, backgroundColors, foregroundColors, borderColors } = require('@g2crowd/elevate-tailwind-config');

module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './public/**/*.html',
  ],
  theme: {
    extend: {
      colors: {
        // Use Elevate's color palette
        ...palette,
        // Add custom colors
        'my-brand': '#ff0000',
      },
      backgroundColor: {
        // Use Elevate's background colors
        ...backgroundColors,
      },
      // ... other theme settings
    }
  }
};

Features

• Consistent Design System: Use the same design system across different projects
• Flexible Integration: Easily extend or override parts of the theme
• Rich Color Palette: Comprehensive color system with semantic colors for different UI states
• Responsive: Built-in responsive design with consistent breakpoints
• Typography: Typography scales for consistent text sizing
• Spacing: Comprehensive spacing system for consistent layout

Theme Components

Colors

The Elevate color system includes:

• Base Palette: Foundation colors including neutral, purple, rorange (red-orange), blue, green, and yellow
• Semantic Colors: Application-specific colors like primary, success, warning, info, and critical
• Background Colors: Specialized background colors for different UI elements
• Foreground (Text) Colors: Text colors for various UI states
• Border Colors: Border colors for different UI elements

Typography

Consistent typography system with:

• Font families for different text types (body, heading, label)
• Font size scale (xs to 4xl)
• Line height scale
• Font weights (light to black)

Spacing

Comprehensive spacing system with increments from 0 to 100.

Border Radius

Variety of border radius options for different UI elements, including:

• Size-based (xs, sm, md, lg, xl)
• Special shapes (pill)
• Directional corners (t, r, b, l)

Box Shadows

Multiple shadow options for depth and elevation effects.