npm package: @g2crowd/elevate-tailwind-theme
Description: Tailwind CSS theme from the Elevate engine
Author: G2
Latest version: 1.0.0

# 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

```bash
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:**

```bash
export GITHUB_TOKEN=your-github-token-here
```

3. **Install the package:**

```bash
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:

```js
// 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:

```js
// 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:

```js
// 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.