tailwind.config.js

/*
 * Copyright (C) 2024 Das Land Schleswig-Holstein vertreten durch den
 * Ministerpräsidenten des Landes Schleswig-Holstein
 * Staatskanzlei
 * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
 *
 * Lizenziert unter der EUPL, Version 1.2 oder - sobald
 * diese von der Europäischen Kommission genehmigt wurden -
 * Folgeversionen der EUPL ("Lizenz");
 * Sie dürfen dieses Werk ausschließlich gemäß
 * dieser Lizenz nutzen.
 * Eine Kopie der Lizenz finden Sie hier:
 *
 * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
 *
 * Sofern nicht durch anwendbare Rechtsvorschriften
 * gefordert oder in schriftlicher Form vereinbart, wird
 * die unter der Lizenz verbreitete Software "so wie sie
 * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
 * ausdrücklich oder stillschweigend - verbreitet.
 * Die sprachspezifischen Genehmigungen und Beschränkungen
 * unter der Lizenz sind dem Lizenztext zu entnehmen.
 */
/* eslint-env node */
/* eslint @typescript-eslint/no-var-requires: "off" */

const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const { join } = require('path');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), ...createGlobPatternsForDependencies(__dirname)],
  darkMode: 'class',
  theme: {
    extend: {
      animation: {
        dash: 'dash 1.5s ease-in-out infinite',
        'spin-slow': 'spin 2s linear infinite',
        fadeIn: 'fade-in 0.2s ease-in-out 1',
      },
      keyframes: {
        dash: {
          from: {
            'stroke-dasharray': '0 150',
            'stroke-dashoffset': '0',
          },
          '50%': {
            'stroke-dasharray': '42 150',
            'stroke-dashoffset': '-10',
          },
          to: {
            'stroke-dasharray': '42 150',
            'stroke-dashoffset': '-49',
          },
        },
        'fade-in': {
          '0%': {
            opacity: 0,
          },
          '100%': {
            opacity: 1,
          },
        },
      },
      borderWidth: {
        3: '3px',
      },
      maxHeight: {
        120: '480px',
      },
      colors: {
        ozgblue: {
          50: 'hsl(200, 100%, 96%)',
          100: 'hsl(200, 100%, 92%)',
          200: 'hsl(199, 100%, 85%)',
          300: 'hsl(197, 100%, 76%)',
          400: 'hsl(199, 100%, 64%)',
          500: 'hsl(204, 100%, 56%)',
          600: 'hsl(209, 100%, 51%)',
          650: 'hsl(210, 79%, 46%)',
          700: 'hsl(213, 100%, 48%)',
          750: 'hsl(212, 80%, 42%)',
          800: 'hsl(215, 92%, 40%)',
          900: 'hsl(213, 85%, 33%)',
          DEFAULT: 'hsl(215, 75%, 22%)',
        },
        ozggray: {
          100: 'hsl(0, 0%, 92%)',
          200: 'hsla(0, 0%, 94%)',
          300: 'hsla(0, 0%, 77%)',
          600: 'hsla(0, 0%, 0%, 0.4)',
          700: 'hsl(213, 27%, 84%)',
          800: 'hsl(0, 0%, 43%)',
          900: 'hsl(0, 0%, 24%)',
          DEFAULT: 'hsl(0, 0%, 98%)',
        },
        background: {
          50: 'hsl(var(--color-background-50) / <alpha-value>)',
          100: 'hsl(var(--color-background-100) / <alpha-value>)',
          150: 'hsl(var(--color-background-150) / <alpha-value>)',
          200: 'hsl(var(--color-background-200) / <alpha-value>)',
          DEFAULT: 'hsl(var(--color-background-100) / <alpha-value>)',
        },
        grayborder: {
          DEFAULT: 'hsl(var(--color-grayborder) / <alpha-value>)',
        },
        bewilligt: {
          100: 'hsl(var(--color-bewilligt-100) / <alpha-value>)',
          700: 'hsl(var(--color-bewilligt-700) / <alpha-value>)',
          DEFAULT: 'hsl(var(--color-bewilligt-700) / <alpha-value>)',
        },
        abgelehnt: {
          100: 'hsl(var(--color-abgelehnt-100) / <alpha-value>)',
          700: 'hsl(var(--color-abgelehnt-500) / <alpha-value>)',
          DEFAULT: 'hsl(var(--color-abgelehnt-500) / <alpha-value>)',
        },
        selected: {
          light: 'hsl(212, 58%, 94%)',
          DEFAULT: 'hsl(216, 85%, 34%)',
        },
        pdf: {
          DEFAULT: 'hsl(var(--color-pdf) / <alpha-value>)',
        },
        doc: {
          DEFAULT: 'hsl(var(--color-doc) / <alpha-value>)',
        },
        mainbg: 'hsl(var(--color-mainbg) / <alpha-value>)',
        modalBg: 'hsl(var(--color-modal-bg) / <alpha-value>)',
        dropdownBg: 'hsl(var(--color-dropdown-bg) / <alpha-value>)',
        grayBackdrop: 'hsla(var(--color-gray-backdrop))',
        primary: {
          600: 'hsl(var(--color-primary-600) / <alpha-value>)',
          DEFAULT: 'hsl(var(--color-primary-600) / <alpha-value>)',
        },
        'primary-hover': {
          600: 'hsla(var(--color-primary-600-hover))',
          DEFAULT: 'hsla(var(--color-primary-600-hover))',
        },
        text: 'hsl(var(--text) / <alpha-value>)',
        whitetext: 'hsl(var(--color-text-white) / <alpha-value>)',
        warning: 'hsl(var(--warning))',
        error: 'hsl(var(--color-error))',
        focus: 'hsl(var(--color-focus))',
        disabled: {
          dark: 'hsl(var(--color-disabled-dark) / <alpha-value>)',
          DEFAULT: 'hsl(var(--color-disabled) / <alpha-value>)',
        },
      },
      backdropBlur: {
        1: '1px',
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
};