@undp/design-system-react/tailwind.config.js

React based design system for UNDP

/* eslint-disable no-undef */
/* eslint-disable @typescript-eslint/no-require-imports */
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class'],
  content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
  theme: {
    backgroundImage: {
      'double-red':
        'linear-gradient(var(--dark-red), var(--dark-red)), linear-gradient(var(--dark-red), var(--dark-red))',
      'double-white':
        'linear-gradient(var(--white), var(--white)), linear-gradient(var(--white), var(--white))',
    },
    colors: {
      'custom-color-100': 'var(--custom-color-100)',
      'custom-color-200': 'var(--custom-color-200)',
      'custom-color-300': 'var(--custom-color-300)',
      'custom-color-400': 'var(--custom-color-400)',
      'custom-color-500': 'var(--custom-color-500)',
      'custom-color-600': 'var(--custom-color-600)',
      'custom-color-700': 'var(--custom-color-700)',
      'custom-foreground': 'var(--custom-foreground)',
      primary: {
        DEFAULT: 'var(--black)',
        'blue-100': 'var(--blue-100)',
        'blue-200': 'var(--blue-200)',
        'blue-300': 'var(--blue-300)',
        'blue-400': 'var(--blue-400)',
        'blue-500': 'var(--blue-500)',
        'blue-600': 'var(--blue-600)',
        'blue-700': 'var(--blue-700)',
        white: 'var(--white)',
        'gray-100': 'var(--gray-100)',
        'gray-200': 'var(--gray-200)',
        'gray-300': 'var(--gray-300)',
        'gray-400': 'var(--gray-400)',
        'gray-500': 'var(--gray-500)',
        'gray-550': 'var(--gray-550)',
        'gray-600': 'var(--gray-600)',
        'gray-650': 'var(--gray-650)',
        'gray-700': 'var(--gray-700)',
        black: 'var(--black)',
      },
      accent: {
        'light-yellow': 'var(--light-yellow)',
        yellow: 'var(--yellow)',
        'dark-yellow': 'var(--dark-yellow)',
        'light-red': 'var(--light-red)',
        red: 'var(--red)',
        'dark-red': 'var(--dark-red)',
        'light-green': 'var(--light-green)',
        green: 'var(--green)',
        'dark-green': 'var(--dark-green)',
        'light-azure': 'var(--light-azure)',
        azure: 'var(--azure)',
        'dark-azure': 'var(--dark-azure)',
      },
      sdgColors: {
        'sdg-1': 'var(--sdg-1)',
        'sdg-2': 'var(--sdg-2)',
        'sdg-3': 'var(--sdg-3)',
        'sdg-4': 'var(--sdg-4)',
        'sdg-5': 'var(--sdg-5)',
        'sdg-6': 'var(--sdg-6)',
        'sdg-7': 'var(--sdg-7)',
        'sdg-8': 'var(--sdg-8)',
        'sdg-9': 'var(--sdg-9)',
        'sdg-10': 'var(--sdg-10)',
        'sdg-11': 'var(--sdg-11)',
        'sdg-12': 'var(--sdg-12)',
        'sdg-13': 'var(--sdg-13)',
        'sdg-14': 'var(--sdg-14)',
        'sdg-15': 'var(--sdg-15)',
        'sdg-16': 'var(--sdg-16)',
        'sdg-17': 'var(--sdg-17)',
      },
    },
    borderRadius: {
      DEFAULT: '0',
      sm: '.125rem',
      lg: '.25rem',
      xl: '.5rem',
      full: '9999px',
    },
    keyframes: {
      'accordion-down': {
        from: { height: '0' },
        to: { height: 'var(--radix-accordion-content-height)' },
      },
      'accordion-up': {
        from: { height: 'var(--radix-accordion-content-height)' },
        to: { height: '0' },
      },
    },
    animation: {
      'accordion-down': 'accordion-down 0.2s ease-out',
      'accordion-up': 'accordion-up 0.2s ease-out',
      spin: 'spin 1s linear infinite',
    },
    fontFamily: {
      sans: ['ProximaNova', 'proxima-nova', 'Helvetica Neue', 'Roboto', 'sans-serif'],
      'sans-ar': ['Noto Sans Arabic', 'sans-serif'],
      'sans-az': ['Noto Sans', 'sans-serif'],
      'sans-bn': ['UN Bangla', 'sans-serif'],
      'sans-he': ['Noto Sans Hebrew', 'sans-serif'],
      'sans-hi': ['Noto Sans Devanagari', 'sans-serif'],
      'sans-jp': ['Noto Sans JP', 'sans-serif'],
      'sans-ka': ['Noto Sans Georgian', 'sans-serif'],
      'sans-km': ['Noto Sans Khmer', 'sans-serif'],
      'sans-ko': ['Noto Sans KR', 'sans-serif'],
      'sans-my': ['Noto Sans Myanmar', 'sans-serif'],
      'sans-ne': ['Noto Sans', 'sans-serif'],
      'sans-zh': ['Noto Sans SC', 'sans-serif'],
      serif: ['serif'],
      heading: [
        'SohneBreit',
        'ProximaNova',
        'proxima-nova',
        'Helvetica Neue',
        'Roboto',
        'sans-serif',
      ],
      mono: ['monospace'],
    },
    boxShadow: { header: '0 3px 6px rgb(0 0 0 / 10%)' },
    height: {
      header: '7.1875rem',
      inherit: 'inherit',
    },
    lineHeight: { 0: '0' },
    textAlign: ['rtl'],
  },
  plugins: [require('tailwindcss-animate')],
  corePlugins: { preflight: false },
};