ISA-Frontend/tailwind.config.js

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./apps/**/*.{html,ts}', './libs/**/*.{html,ts}', './libs/**/*.scss'],
  darkMode: 'media', // or 'media' or 'class',
  theme: {
    screens: {
      'isa-desktop': '1024px',
      'isa-desktop-l': '1440px',
      'isa-desktop-xl': '1920px',

      'desktop-small': '1024px',
      'desktop': '1280px',
      'desktop-large': '1440px',
      'desktop-x-large': '1920px',
      'desktop-xx-large': '2736px',
    },
    zIndex: {
      dropdown: 50,
      sticky: 100,
      fixed: 150,
      modalBackdrop: 200,
      modal: 250,
      popover: 300,
      tooltip: 350,
    },
    fontFamily: {
      sans: ['Open Sans'],
    },
    extend: {
      width: {
        'content': '120rem',
        'desktop-small': '1024px',
        'desktop': '1440px',
        'desktop-x-large': '1920px',
        'desktop-xx-large': '2736px',
      },
      height: {
        'split-screen-tablet': 'calc(100vh - 15.5rem)',
        'split-screen-desktop': 'calc(100vh - 14rem)',
      },
      maxHeight: {
        'split-screen-tablet': 'calc(100vh - 15.5rem)',
        'split-screen-desktop': 'calc(100vh - 14rem)',
      },
      gridTemplateColumns: {
        'split-screen': '31rem 1fr',
      },
      gap: {
        'px-1': '1px',
        'px-2': '2px',
        'split-screen': '1.5rem',
      },
      maxWidth: {
        content: '120rem',
      },
      spacing: {
        'cta-x-l': '25px',
        'cta-y-l': '20px',
        'px-2': '2px',
        'px-3': '3px',
        'px-4': '4px',
        'px-5': '5px',
        'px-8': '8px',
        'px-10': '10px',
        'px-15': '15px',
        'px-20': '20px',
        'px-25': '25px',
        'px-30': '30px',
        'px-35': '35px',
        'px-40': '40px',
        'px-50': '50px',
        'px-100': '100px',
        'px-150': '150px',
      },
      padding: {
        card: '20px',
      },
      colors: {
        'isa': {
          black: '#000000',
          white: '#FFFFFF',
          accent: {
            red: '#DF001B',
            blue: '#354ACB',
            green: '#26830C',
          },
          shades: {
            red: {
              600: '#C60018',
              700: '#B30016',
            },
          },
          secondary: {
            100: '#EBEFFF',
            200: '#B9C4FF',
            300: '#8FA0FF',
            400: '#6E82FE',
            500: '#556AEB',
            600: '#354ACB',
            700: '#1D2F99',
            800: '#0C1A66',
            900: '#020A33',
          },
          neutral: {
            100: '#F8F9FA',
            200: '#E9ECEF',
            300: '#DEE2E6',
            400: '#CED4DA',
            500: '#A5ACB4',
            600: '#6C757D',
            700: '#495057',
            800: '#343A40',
            900: '#212529',
          },
        },

        'warning': '#be8100',
        'brand': '#f70400',
        'ucla-blue': '#5a728a',
        'wild-blue-yonder': '#9cb1c6',
        'dark-cerulean': '#1f466c',
        'cool-grey': '#89949e',
        'glitter': '#e9f0f8',
        'munsell': '#edeff0',
        'onyx': '#171717',
        // active: '#1f466c',
        // inactive: '#3980c6',
        // disabled: '#b0cce8',
        'customer': '#e6eff9',
        'font-customer': '#557eb8',
        'active-customer': '#1f466c',
        'inactive-customer': '#557596',
        'disabled-customer': '#d7e6f4',
        'branch': '#edeff0',
        'font-branch': '#557eb8',
        'active-branch': '#596470',
        'inactive-branch': '#9ca5b0',
        'disabled-branch': '#c6cbd2',
        'dark-goldenrod': '#be8100',
        'cadet': '#596470',
        'cadet-blue': '#AEB7C1',
        'control-border': '#E1EBF5',
        'background-liste': '#F5F7FA',
        'accent-teal': '#008079',
        'accent-green': '#26830C',
        'accent-orange': '#F66131',
        'accent-darkblue': '#557596',

        'background': {
          DEFAULT: '#EDEFF0',
          content: '#000000',
        },
        'surface': {
          DEFAULT: '#ffffff',
          content: '#000000',
          2: {
            DEFAULT: '#F5F7FA',
            content: '#000000',
          },
        },
        'components': {
          menu: {
            DEFAULT: '#ffffff',
            content: '#000000',
            seperator: '#E6EFF9',
            hover: {
              DEFAULT: '#D8DFE5',
              content: '#000000',
              border: '#0556B4',
            },
          },
          button: {
            DEFAULT: '#AEB7C1',
            content: '#000000',
            light: {
              DEFAULT: '#D8DFE5',
              content: '#000000',
            },
            hover: {
              DEFAULT: '#596470',
              content: '#ffffff',
            },
            active: {
              DEFAULT: '#596470',
              content: '#ffffff',
            },
            disabled: {
              DEFAULT: '#FFFFFF',
              content: '#888888',
            },
          },
        },

        'accent': {
          1: {
            DEFAULT: '#324BC9',
            content: '#ffffff',
            hover: {
              DEFAULT: '#2b40ab',
              content: '#ffffff',
            },
            active: {
              DEFAULT: '#2b40ab',
              content: '#ffffff',
            },
          },
          2: {
            DEFAULT: '#D52A5D',
            content: '#ffffff',
            hover: {
              DEFAULT: '#9d3453',
              content: '#ffffff',
            },
            active: {
              DEFAULT: '#9d3453',
              content: '#ffffff',
            },
          },
        },
      },
      boxShadow: {
        'input': '0 6px 24px 0 rgba(214, 215, 217, 0.8)',
        'autocomplete-option': '0 6px 8px 0 rgba(214,215,217,.8)',
        'card': '0px -2px 24px 0px rgba(220, 226, 233, 0.8)',
        'cta': '0px 0px 15px 0px rgba(0, 0, 0, 0.5)',
        'action': '0 0 20px 0 #596470',
        'overlay': '0px 0px 16px 0px rgba(0, 0, 0, 0.15)',
      },
      borderRadius: {
        DEFAULT: '0.3125rem',
        customerCard: '10px',
        filter: '20px',
        autocomplete: '30px',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('./tailwind-plugins/label.plugin.js'),
    require('./tailwind-plugins/button.plugin.js'),
    require('./tailwind-plugins/input.plugin'),
    require('./tailwind-plugins/menu.plugin.js'),
    require('./tailwind-plugins/select-bullet.plugin.js'),
    require('./tailwind-plugins/section.plugin.js'),
    require('./tailwind-plugins/typography.plugin.js'),
    plugin(({ addVariant }) => {
      addVariant('open', '&.open');
    }),
  ],
};