@solfacil/girassol/windi.config.ts

Girassol design system

import { defineConfig } from 'windicss/helpers'

import typography from 'windicss/plugin/typography'

import {
  borders,
  colors,
  effects,
  misc,
  screens,
  spacing,
  typography as typos,
  utilities,
} from './theme/solfacil/'

export default defineConfig({
  darkMode: 'class',
  attributify: false,
  extract: {
    include: [
      'index.html',
      'src/**/*.@(vue|scss)',
      'assets/**/*.scss',
      'components/**/*.@(vue|scss)',
      'pages/**/*.@(vue|scss)',
      'layouts/**/*.@(vue|scss)',
    ],
  },
  safelist: [
    'icon-size-small',
    'icon-size-medium',
    'icon-size-large',
    'icon-size-x-large',
    'icon-size-giga',
    'illustration-size-micro',
    'illustration-size-xs',
    'illustration-size-sm',
    'illustration-size-medium',
    'illustration-size-large',
    'illustration-size-xl',
    'illustration-size-2xl',
    'illustration-size-mega',
    'illustration-size-giga',
  ],

  plugins: [
    typography(),
    utilities.outlinesForFocus,
    utilities.maxLines,
    utilities.debug,
    utilities.placeholder,
    utilities.componentTypos,
    utilities.scrollbarBase,
    utilities.iconSizes,
    utilities.resetFillFields,
    utilities.textColorsBase,
    utilities.illustrationsSizes,
  ],
  theme: {
    extend: {
      ...misc,
    },

    screens,
    ...colors,
    ...typos,
    ...effects,
    ...borders,
    ...spacing,
  },
})