@praetorian-chariot/ui/tailwind.config.js

The UI component library for Chariot, built with Tailwind CSS and React.

import { chariotColors } from "./theme.mjs";

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ['selector', '[data-theme="dark"]'],
  theme: {
    extend: {
      colors: chariotColors.colors,
      backgroundImage: {
        'gradient': 'var(--chariot-background-gradient)',
      },
      fontFamily: {
        sans: ['Inter var', 'Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        mono: ['IBM Plex Mono', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'monospace'],
      }
    }
  },
  plugins: [
    function({ addUtilities, theme }) {
      const chariotColors = theme('colors');
      const utilities = {};
      
      // Generate opacity variants for all Chariot colors
      Object.keys(chariotColors).forEach(colorName => {
        if (colorName.startsWith('chariot-')) {
          // Generate background color utilities with opacity support
          utilities[`.bg-${colorName}`] = {
            'background-color': `rgb(var(--${colorName}))`
          };
          
          // Generate text color utilities with opacity support  
          utilities[`.text-${colorName}`] = {
            'color': `rgb(var(--${colorName}))`
          };
          
          // Generate border color utilities with opacity support
          utilities[`.border-${colorName}`] = {
            'border-color': `rgb(var(--${colorName}))`
          };
          
          // Generate stroke color utilities with opacity support
          utilities[`.stroke-${colorName}`] = {
            'stroke': `rgb(var(--${colorName}))`
          };
          
          // Generate fill color utilities with opacity support
          utilities[`.fill-${colorName}`] = {
            'fill': `rgb(var(--${colorName}))`
          };
          
          // Generate ring color utilities with opacity support
          utilities[`.ring-${colorName}`] = {
            '--tw-ring-color': `rgb(var(--${colorName}))`
          };
        }
      });
      
      addUtilities(utilities);
    }
  ],
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", 
    "./.storybook/**/*.{ts,tsx,js,jsx}",
    "./src/index.css",
    "./theme.mjs",
    "./tailwind.config.js"
  ],
};