dragonflight/services/web-ui/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './public/**/*.html',
    './src/**/*.{css,js}',
  ],
  safelist: [
    { pattern: /^wd-/ },
    { pattern: /^is-/ },
    'nav-dev-badge',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // ── Surfaces (5-step depth, tinted toward brand hue 266) ──
        'bg-deep':    'oklch(8% 0.011 266)',
        'bg-base':    'oklch(11% 0.010 266)',
        'bg-panel':   'oklch(15% 0.013 266)',
        'bg-surface': 'oklch(19% 0.014 266)',
        'bg-raised':  'oklch(24% 0.015 266)',
        'bg-hover':   'oklch(28% 0.015 266)',

        // ── Accent (brand) ──
        accent: {
          DEFAULT: 'oklch(45% 0.20 266)',
          subtle:  'oklch(55% 0.20 266 / 0.12)',
          border:  'oklch(55% 0.20 266 / 0.36)',
        },

        // ── Text ──
        'text-primary':   'oklch(94% 0.008 266)',
        'text-secondary': 'oklch(72% 0.014 266)',
        // tertiary bumped from 52% to 56% per a11y section in the spec
        'text-tertiary':  'oklch(56% 0.012 266)',
        'text-disabled':  'oklch(38% 0.010 266)',

        // ── Borders ──
        'border-faint':   'oklch(22% 0.013 266)',
        'border-default': 'oklch(28% 0.015 266)',
        'border-strong':  'oklch(38% 0.018 266)',

        // ── Status / semantic signal ──
        'signal-good': 'oklch(70% 0.18 148)',
        'signal-bad':  'oklch(64% 0.22 25)',
        'signal-warn': 'oklch(80% 0.16 90)',
        'signal-idle': 'oklch(58% 0.012 266)',
        'signal-good-bg': 'oklch(70% 0.18 148 / 0.12)',
        'signal-bad-bg':  'oklch(64% 0.22 25  / 0.12)',
        'signal-warn-bg': 'oklch(80% 0.16 90  / 0.12)',
      },
      fontFamily: {
        sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'system-ui', 'sans-serif'],
        mono: ['"JetBrains Mono"', 'ui-monospace', '"SF Mono"', 'Consolas', 'monospace'],
      },
      fontSize: {
        // tighter scale per density target
        'xs':   ['11px', { lineHeight: '1.4' }],
        'sm':   ['13px', { lineHeight: '1.5' }],
        'base': ['14px', { lineHeight: '1.5' }],
        'md':   ['16px', { lineHeight: '1.4' }],
        'lg':   ['18px', { lineHeight: '1.4' }],
        'xl':   ['22px', { lineHeight: '1.3' }],
        '2xl':  ['28px', { lineHeight: '1.2' }],
        '3xl':  ['40px', { lineHeight: '1.1' }],
        'tc':   ['64px', { lineHeight: '1' }], // tally-grade timecode
      },
      borderRadius: {
        'sm': '4px',
        'md': '6px',
        'lg': '8px',
      },
      transitionTimingFunction: {
        'out-quart': 'cubic-bezier(0.25, 1, 0.5, 1)',
        'out-expo':  'cubic-bezier(0.16, 1, 0.3, 1)',
      },
      transitionDuration: {
        '120': '120ms',
        '180': '180ms',
        '240': '240ms',
      },
      zIndex: {
        'dropdown': '40',
        'overlay':  '80',
        'panel':    '90',
        'toast':   '200',
      },
    },
  },
  plugins: [
    require('flyonui'),
  ],
};