tailwind.config.js

/*
Copyright 2019 Iguazio Systems Ltd.

Licensed under the Apache License, Version 2.0 (the "License") with
an addition restriction as set forth herein. You may not use this
file except in compliance with the License. You may obtain a copy of
the License at http://www.apache.org/licenses/LICENSE-2.0.

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied. See the License for the specific language governing
permissions and limitations under the License.

In addition, you may not use the software for any purposes that are
illegal under applicable law, and the grant of the foregoing license
under the Apache 2.0 license is conditioned upon your compliance with
such restriction.
*/
/** @type {import('tailwindcss').Config} */

module.exports = {
  darkMode: ['class'],
  content: [
    './src/nextGenComponents/**/*.{js,jsx,ts,tsx}',
    './node_modules/iguazio.dashboard-react-controls/dist/nextGenComponents/**/*.{js,mjs}'
  ],
  corePlugins: {
    preflight: false
  },
  theme: {
    extend: {
      fontFamily: {
        sans: ['Roboto', 'sans-serif']
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)'
      },
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        // ── igz design-system tokens — backed by CSS variables so they can be
        //    overridden at runtime without rebuilding the stylesheet. ──────────
        igz: {
          'light-purple': 'var(--igz-light-purple, #869CFF)',
          purple: 'var(--igz-purple, #5f52cc)',
          'dark-purple': 'var(--igz-dark-purple, #5f52cc)',
          green: 'var(--igz-green, #2AB57D)',
          primary: 'var(--igz-primary, #4B4760)',
          'accent-hover': 'var(--igz-accent-hover, #869CFF14)',
          secondary: 'var(--igz-secondary, #7F7989)',
          gray: 'var(--igz-gray, #C4C2C8)',
          'gray-light': 'var(--igz-gray-light, #E9E8EB)',
          'hover-bg': 'var(--igz-hover-bg, #483F561F)',
          'tab-active-bg': 'var(--igz-tab-active-bg, #f5f7ff)',
          link: 'var(--igz-link, #2563eb)'
        },
        status: {
          running: 'var(--igz-status-running)',
          ready: 'var(--igz-status-ready)',
          deploying: 'var(--igz-status-deploying)',
          failed: 'var(--igz-status-failed)',
          error: 'var(--igz-status-error)',
          completed: 'var(--igz-status-completed)'
        },
        'border-secondary': 'var(--igz-border-secondary, #ccc)',
        // ── shadcn/ui semantic tokens ─────────────────────────────────────────
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))'
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))'
        },
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))'
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))'
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))'
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))'
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))'
        },
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        chart: {
          1: 'hsl(var(--chart-1))',
          2: 'hsl(var(--chart-2))',
          3: 'hsl(var(--chart-3))',
          4: 'hsl(var(--chart-4))',
          5: 'hsl(var(--chart-5))'
        },
        sidebar: {
          DEFAULT: 'hsl(var(--sidebar-background))',
          foreground: 'hsl(var(--sidebar-foreground))',
          primary: 'hsl(var(--sidebar-primary))',
          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
          accent: 'hsl(var(--sidebar-accent))',
          'active-accent': 'hsl(var(--sidebar-active-accent))',
          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
          'active-accent-foreground': 'hsl(var(--sidebar-active-accent-foreground))',
          border: 'hsl(var(--sidebar-border))',
          ring: 'hsl(var(--sidebar-ring))'
        },
        tooltip: {
          DEFAULT: 'hsl(var(--tooltip))',
          foreground: 'hsl(var(--tooltip-foreground))'
        },
        dropdown: {
          border: 'hsla(var(--dropdown-border))'
        }
      },
      fontSize: {
        body: ['15px', { lineHeight: '1.4' }],
        'body-sm': ['14px', { lineHeight: '1.4' }]
      },
      boxShadow: {
        dropdown: '0 0 30px 0 rgba(0, 0, 0, 0.15)',
        'stat-card': '0 8px 30px 0 rgba(127, 121, 137, 0.06)',
        card: '0px 3px 10px rgba(0, 0, 0, 0.07)'
      }
    }
  },
  plugins: [
    require('tailwindcss-animate'),
    function ({ addComponents }) {
      addComponents({
        '.status-dot': { '@apply inline-block w-2 h-2 rounded-full': {} }
      })
    }
  ]
}