@aveonline/ui-react/dist/tailwind.config.js

Home base for Aveonline design system - ecosystem react

/* eslint-disable @typescript-eslint/no-var-requires */
/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './src/ui/atoms/**/*.{ts,tsx}',
    './src/ui/molecules/**/*.{ts,tsx}',
    './src/ui/templates/**/*.{ts,tsx}'
  ],
  theme: {
    screens: {
      sm: '489px',
      md: '768px',
      lg: '1039px',
      xl: '1440px'
    },
    extend: {
      colors: {
        ave: {
          white: 'var(--ave-white)',
          gray: 'var(--ave-gray)',
          primary: 'var(--ave-primary)',
          secondary: 'var(--ave-secondary)',
          active: 'var(--ave-active)'
        },
        letter: {
          default: 'var(--colors-letter-default)',
          subdued: 'var(--colors-letter-subdued)',
          disabled: 'var(--colors-letter-disabled)',
          warning: 'var(--colors-letter-warning)',
          critical: 'var(--colors-letter-critical)',
          success: 'var(--colors-letter-success)',
          brand: 'var(--colors-letter-brand)',
          on: 'var(--colors-letter-on)'
        },
        action: {
          primary: {
            default: 'var(--colors-action-primary-default)',
            hovered: 'var(--colors-action-primary-hovered)',
            active: 'var(--colors-action-primary-active)',
            pressed: 'var(--colors-action-primary-pressed)',
            disabled: 'var(--colors-action-primary-disabled)',
            brand: 'var(--colors-action-primary-brand)'
          },
          secondary: {
            default: 'var(--colors-action-secondary-default)',
            hovered: 'var(--colors-action-secondary-hovered)',
            active: 'var(--colors-action-secondary-active)',
            pressed: 'var(--colors-action-secondary-pressed)',
            disabled: 'var(--colors-action-secondary-disabled)',
            subdued: 'var(--colors-action-secondary-subdued)'
          },
          critical: {
            default: 'var(--colors-action-critical-default)',
            hovered: 'var(--colors-action-critical-hovered)',
            active: 'var(--colors-action-critical-active)',
            pressed: 'var(--colors-action-critical-pressed)',
            disabled: 'var(--colors-action-critical-disabled)'
          },
          opacity: {
            default: 'var(--colors-action-opacity-default)',
            hovered: 'var(--colors-action-opacity-hovered)',
            active: 'var(--colors-action-opacity-active)',
            disabled: 'var(--colors-action-opacity-disabled)'
          },
          brand: {
            active: 'var(--colors-action-brand-active)'
          }
        },
        border: {
          default: 'var(--colors-border-default)',
          subdued: 'var(--colors-border-subdued)',
          hovered: 'var(--colors-border-hovered)',
          active: 'var(--colors-border-active)',
          disabled: 'var(--colors-border-disabled)',
          brand: 'var(--colors-border-brand)',
          success: {
            default: 'var(--colors-border-success-default)',
            subdued: 'var(--colors-border-success-subdued)'
          },
          critical: {
            default: 'var(--colors-border-critical-default)',
            subdued: 'var(--colors-border-critical-subdued)',
            disabled: 'var(--colors-border-critical-disabled)'
          },
          shadow: {
            subdued: 'var(--colors-border-shadow-subdued)'
          }
        },
        interactive: {
          default: 'var(--colors-interactive-default)',
          hovered: 'var(--colors-interactive-hovered)',
          active: 'var(--colors-interactive-active)',
          disabled: 'var(--colors-interactive-disabled)',
          critical: {
            default: 'var(--colors-interactive-critical-default)',
            hovered: 'var(--colors-interactive-critical-hovered)',
            active: 'var(--colors-interactive-critical-active)',
            disabled: 'var(--colors-interactive-critical-disabled)'
          }
        },
        icon: {
          default: 'var(--colors-icon-default)',
          subdued: 'var(--colors-icon-subdued)',
          hovered: 'var(--colors-icon-hovered)',
          active: 'var(--colors-icon-active)',
          disabled: 'var(--colors-icon-disabled)',
          critical: 'var(--colors-icon-critical)',
          warning: 'var(--colors-icon-warning)',
          success: 'var(--colors-icon-success)',
          on: 'var(--colors-icon-on)',
          brand: 'var(--colors-icon-brand)'
        },
        focused: {
          default: 'var(--colors-focused-default)'
        },
        surface: {
          default: 'var(--colors-surface-default)',
          subdued: 'var(--colors-surface-subdued)',
          hovered: 'var(--colors-surface-hovered)',
          active: 'var(--colors-surface-active)',
          pressed: 'var(--colors-surface-pressed)',
          disabled: 'var(--colors-surface-disabled)',
          brand: 'var(--colors-surface-brand)',
          action: {
            default: 'var(--colors-surface-action-default)',
            subdued: 'var(--colors-surface-action-subdued)',
            hovered: 'var(--colors-surface-action-hovered)',
            active: 'var(--colors-surface-action-active)',
            disabled: 'var(--colors-surface-action-disabled)'
          },
          warning: {
            default: 'var(--colors-surface-warning-default)',
            subdued: 'var(--colors-surface-warning-subdued)',
            hovered: 'var(--colors-surface-warning-hovered)',
            active: 'var(--colors-surface-warning-active)'
          },
          success: {
            default: 'var(--colors-surface-success-default)',
            subdued: 'var(--colors-surface-success-subdued)',
            hovered: 'var(--colors-surface-success-hovered)',
            active: 'var(--colors-surface-success-active)'
          },
          critical: {
            default: 'var(--colors-surface-critical-default)',
            subdued: 'var(--colors-surface-critical-subdued)',
            hovered: 'var(--colors-surface-critical-hovered)',
            active: 'var(--colors-surface-critical-active)',
            disabled: 'var(--colors-surface-critical-disabled)'
          },
          neutral: {
            default: 'var(--colors-surface-neutral-default)',
            subdued: 'var(--colors-surface-neutral-subdued)',
            hovered: 'var(--colors-surface-neutral-hovered)',
            active: 'var(--colors-surface-neutral-active)',
            disabled: 'var(--colors-surface-neutral-disabled)'
          }
        },
        background: {
          default: 'var(--colors-background-default)',
          hovered: 'var(--colors-background-hovered)',
          active: 'var(--colors-background-active)',
          selected: 'var(--colors-background-selected)',
          modal: 'var(--colors-background-modal)'
        },
        radial: {
          10: 'var(--colors-radial-10)',
          20: 'var(--colors-radial-20)',
          30: 'var(--colors-radial-30)',
          40: 'var(--colors-radial-40)',
          50: 'var(--colors-radial-50)',
          60: 'var(--colors-radial-60)',
          70: 'var(--colors-radial-70)',
          80: 'var(--colors-radial-80)',
          90: 'var(--colors-radial-90)',
          100: 'var(--colors-radial-100)'
        },
        base: {
          surface: 'var(--colors-base-surface)',
          primary: 'var(--colors-base-primary)',
          secondary: 'var(--colors-base-secondary)',
          interactive: 'var(--colors-base-interactive)',
          brand: 'var(--colors-base-brand)',
          critical: 'var(--colors-base-critical)',
          warning: 'var(--colors-base-warning)',
          success: 'var(--colors-base-success)'
        },
        special: {
          one: 'var(--colors-special-one)',
          oneBack: 'var(--colors-special-one-back)',
          two: 'var(--colors-special-two)',
          twoBack: 'var(--colors-special-two-back)',
          three: 'var(--colors-special-three)',
          threeBack: 'var(--colors-special-three-back)',
          four: 'var(--colors-special-four)',
          fourBack: 'var(--colors-special-four-back)'
        }
      },
      fontSize: {
        xxs: 'var(--font-size-xxs)',
        xs: 'var(--font-size-xs)',
        sm: 'var(--font-size-sm)',
        md: 'var(--font-size-md)',
        lg: 'var(--font-size-lg)',
        xl: 'var(--font-size-xl)',
        xxl: 'var(--font-size-xxl)'
      },
      lineHeight: {
        xxs: 'var(--line-height-xxs)',
        xs: 'var(--line-height-xs)',
        sm: 'var(--line-height-sm)',
        md: 'var(--line-height-md)',
        lg: 'var(--line-height-lg)',
        xl: 'var(--line-height-xl)',
        xxl: 'var(--line-height-xxl)'
      },
      fontWeight: {
        regular: 'var(--font-weight-regular)',
        medium: 'var(--font-weight-medium)',
        bold: 'var(--font-weight-bold)'
      },
      borderRadius: {
        xs: 'var(--border-radius-xs)',
        sm: 'var(--border-radius-sm)',
        md: 'var(--border-radius-md)'
      },
      boxShadow: {
        card: 'var(--box-shadow-card)',
        popover: 'var(--box-shadow-popover)',
        popup: 'var(--box-shadow-popup)',
        pressed: 'var(--box-shadow-pressed)'
      },
      spacing: {
        xxs: 'var(--spacing-xxs)',
        xs: 'var(--spacing-xs)',
        sm: 'var(--spacing-sm)',
        md: 'var(--spacing-md)',
        lg: 'var(--spacing-lg)',
        xl: 'var(--spacing-xl)',
        xxl: 'var(--spacing-xxl)',
        '1xl': 'var(--spacing-1xl)'
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans]
      },
      animation: {
        'spin-slow': 'spin 3s linear infinite'
      }
    }
  },
  variants: {
    extend: {
      backgroundColor: ['checked', 'active'],
      textColor: ['checked', 'active'],
      borderColor: ['checked', 'hover', 'active'],
      fill: ['hover', 'focus']
    }
  },
  plugins: [require('@tailwindcss/forms')]
}