Colors

Our color system provides a set of utility functions to manage colors consistently across your application. These functions allow you to generate Tailwind CSS classes for various color applications, create gradients, adjust opacity, and more.

Basic Usage

The getColors function is the primary way to generate color classes. It accepts a color name or preset and an object specifying which components (background, text, border, etc.) should be colored.

import { getColors } from '@/utils/colors';

const buttonClasses = getColors('primary', {
  bg: { hover: true },
  text: { shade: '50' },
  border: { shade: '700' },
});

const cardClasses = getColors('blue', {
  bg: { shade: '100' },
  text: { shade: '800' },
});
  

Gradients

You can create gradient backgrounds using the getGradient function.

import { getGradient } from '@/utils/colors';

const gradientClasses = getGradient('to-r', 'blue', '400', 'purple', '600');
  

Opacity

You can adjust the opacity of a color using the withOpacity function.

import { withOpacity, getColors } from '@/utils/colors';

const overlayClasses = withOpacity(getColors('black', { bg: {} }), 0.5);
  

Custom Color Schemes

You can create custom color schemes for more complex use cases.

import { createCustomColorScheme } from '@/utils/colors';
import { twMerge } from 'tailwind-merge';

const customScheme = createCustomColorScheme({
  bg: { light: 'bg-custom-light', dark: 'bg-custom-dark' },
  text: { light: 'text-custom-light', dark: 'text-custom-dark' },
  border: { light: 'border-custom-light', dark: 'border-custom-dark' },
});

const customClasses = twMerge([
  customScheme('bg'),
  customScheme('text', { dark: true }),
  customScheme('border', { hover: true }),
]);
  

Accessibility

The isAccessible function provides a simple way to check if two colors have sufficient contrast.

import { isAccessible } from '@/utils/colors';

const isButtonAccessible = isAccessible('bg-blue-700', 'text-yellow-300');
  

Context-Aware Color Adjustment

The adjustColorForContext function allows you to adjust colors based on light or dark contexts.

import { adjustColorForContext } from '@/utils/colors';

const adjustedShade = adjustColorForContext('blue', '300', 'dark');
  

Generating Color Palettes

You can generate a complete color palette with specific shades for each color component using the generateColorPalette function.

import { generateColorPalette } from '@/utils/colors';

const colorPalette = generateColorPalette({
  bg: '100',
  text: '700',
  border: '200',
  ring: '400',
  shadow: '300'
});

// Usage example
const blueClasses = [
  colorPalette.blue.bg,
  colorPalette.blue.text,
  colorPalette.blue.border
].join(' ');

console.log(blueClasses); // Output: bg-blue-100 text-blue-700 border-blue-200
  

This function generates an object containing all color names, each with the specified component shades. You can then easily access and combine these classes as needed.

API Reference

Here’s a quick reference for the main functions in the color utility:

• getColors(colorOrPreset, components): Generates Tailwind CSS classes for the specified color and components.
• getGradient(direction, fromColor, fromShade, toColor, toShade): Creates a gradient background class.
• withOpacity(colorClass, opacity): Applies opacity to a color class.
• createCustomColorScheme(scheme): Creates a custom color scheme for complex use cases.
• isAccessible(bgColor, textColor): Checks if two colors have sufficient contrast for accessibility.
• adjustColorForContext(color, shade, context): Adjusts a color shade based on light or dark context.
• generateColorPalette(options): Generates a complete color palette with specified shades for each color component.

This color system provides a flexible and powerful way to manage colors in your application. By using these utility functions, you can ensure consistency in your color usage and easily adapt to different themes or contexts.