ISA-Frontend/tailwind-plugins/button.plugin.js

const plugin = require('tailwindcss/plugin');

module.exports = plugin(function ({ addComponents, theme, addBase, addUtilities }) {
  addBase({
    '.btn': {
      '--btn-height': theme('spacing.12'),
      '--btn-padding': `${theme('spacing.1')} ${theme('spacing.4')}`,
      '--btn-min-width': theme('spacing.12'),
      '--btn-background-color': theme('colors.components.button.DEFAULT'),
      '--btn-color': theme('colors.components.button.content'),
      '--btn-border-radius': theme('borderRadius.DEFAULT'),
      '--btn-hover-background-color': theme('colors.components.button.hover.DEFAULT'),
      '--btn-hover-color': theme('colors.components.button.hover.content'),
      '--btn-active-background-color': theme('colors.components.button.active.DEFAULT'),
      '--btn-active-color': theme('colors.components.button.active.content'),
      '--btn-disabled-background-color': theme('colors.components.button.disabled.DEFAULT'),
      '--btn-disabled-color': theme('colors.components.button.disabled.content'),
    },
    '.btn-icon': {
      '--btn-padding': theme('spacing.0'),
    },
    '.btn-light': {
      '--btn-background-color': theme('colors.button.light.DEFAULT'),
      '--btn-color': theme('colors.button.light.content'),
    },
    '.btn-white': {
      '--btn-background-color': theme('colors.white'),
      '--btn-color': theme('colors.black'),
      '--btn-hover-background-color': theme('colors.white'),
      '--btn-hover-color': theme('colors.black'),
      '--btn-active-background-color': theme('colors.white'),
      '--btn-active-color': theme('colors.black'),
    },
    '.btn-label': {
      '--btn-background-color': 'transparent',
      '--btn-hover-background-color': 'transparent',
      '--btn-hover-color': 'inherit',
    },
  });

  for (const key in theme('colors.accent')) {
    addUtilities({
      [`.btn-accent-${key}`]: {
        '--btn-background-color': theme(`colors.accent.${key}.DEFAULT`),
        '--btn-color': theme(`colors.accent.${key}.content`),
        '--btn-hover-background-color': theme(`colors.accent.${key}.hover.DEFAULT`),
        '--btn-hover-color': theme(`colors.accent.${key}.hover.content`),
        '--btn-active-background-color': theme(`colors.accent.${key}.active.DEFAULT`),
        '--btn-active-color': theme(`colors.accent.${key}.active.content`),
      },
    });
  }

  addComponents({
    '.btn': {
      display: 'inline-grid',
      placeItems: 'center',
      gridGap: theme('spacing.2'),
      gridAutoFlow: 'column',
      padding: 'var(--btn-padding)',
      height: 'var(--btn-height)',
      minWidth: 'var(--btn-min-width)',
      backgroundColor: 'var(--btn-background-color)',
      color: 'var(--btn-color)',
      borderRadius: 'var(--btn-border-radius)',
      '&:hover': {
        backgroundColor: 'var(--btn-hover-background-color)',
        color: 'var(--btn-hover-color)',
      },
      '&:active': {
        backgroundColor: 'var(--btn-active-background-color)',
        color: 'var(--btn-active-color)',
      },
      '&:disabled': {
        backgroundColor: 'var(--btn-disabled-background-color)',
        color: 'var(--btn-disabled-color)',
        cursor: 'default',
      },
    },
  });

  /** Bitte nicht mehr benutzen!! */
  addComponents({
    '.isa-button, .isa-cta-button, .isa-icon-button': {
      display: 'inline-block',
      padding: theme('spacing.2'),
      backgroundColor: theme('colors.white'),
      color: theme('colors.black'),
      borderRadius: theme('borderRadius.DEFAULT'),
      borderColor: theme('colors.cadet-blue'),
      borderStyle: 'solid',
      borderWidth: theme('borderWidth.DEFAULT'),
      fontWeight: theme('fontWeight.bold'),
    },
    '.isa-cta-button': {
      padding: `${theme('spacing.4')} ${theme('spacing.9')}`,
      backgroundColor: theme('colors.white'),
      color: theme('colors.brand'),
      borderRadius: theme('borderRadius.full'),
      borderColor: theme('colors.brand'),
      borderWidth: theme('borderWidth.2'),
      fontSize: theme('fontSize.lg'),
    },
    '.isa-button-primary': {
      backgroundColor: theme('colors.brand'),
      color: theme('colors.white'),
    },
    '.isa-icon-button': {
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: theme('spacing.7'),
      height: theme('spacing.7'),
    },
    '.isa-button:disabled, .isa-cta-button:disabled, .isa-icon-button:disabled': {
      backgroundColor: '#596470',
      borderColor: '#596470',
      color: theme('colors.white'),
    },
  });
});