@gingersnap/toolbox/src/tokens/tailwind.preset.ts

A comprehensive Vue 3 component library with Tailwind CSS integration, built with JavaScript

const tailwindPreset = {
  theme: {
    extend: {
      fontFamily: {
        inter: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif']
      },
      colors: {
        primary: {
          DEFAULT: 'var(--color-primary)',
          hover: 'var(--color-primary-hover)',
          focus: 'var(--color-primary-focus)',
          light: 'var(--color-primary-light)',
          muted: 'var(--color-primary-muted)'
        },
        secondary: {
          DEFAULT: 'var(--color-secondary)',
          hover: 'var(--color-secondary-hover)',
          focus: 'var(--color-secondary-focus)',
          light: 'var(--color-secondary-light)',
          muted: 'var(--color-secondary-muted)'
        },
        success: {
          DEFAULT: 'var(--color-success)',
          hover: 'var(--color-success-hover)',
          focus: 'var(--color-success-focus)',
          light: 'var(--color-success-light)',
          muted: 'var(--color-success-muted)'
        },
        danger: {
          DEFAULT: 'var(--color-danger)',
          hover: 'var(--color-danger-hover)',
          focus: 'var(--color-danger-focus)',
          light: 'var(--color-danger-light)',
          muted: 'var(--color-danger-muted)'
        }
      },
      borderRadius: {
        base: 'var(--radius-base)'
      },
      boxShadow: {
        base: 'var(--shadow-base)'
      }
    }
  },
  plugins: []
}

export default tailwindPreset