tailwind.config.ts

import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'

export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
        mono: ['JetBrains Mono', ...defaultTheme.fontFamily.mono],
      },
      colors: {
        'moody-blue': {
          '50': '#ebedff',
          '100': '#e0e5ff',
          '200': '#c2c9ff',
          '300': '#9ea6ff',
          '400': '#7070ff', // `--color-fill-secondary` from assets/css/tailwind.css
          '500': '#6a5df9',
          '600': '#593fee',
          '700': '#4c31d3',
          '800': '#3c29a8',
          '900': '#352985',
          '950': '#21184e',
        },
        'rad': {
          // as defined in assets/css/tailwind.css
          'background-default': 'var(--color-background-default)',
          'background-dip': 'var(--color-background-dip)',
          'background-float': 'var(--color-background-float)',
          'border-contrast': 'var(--color-border-contrast)',
          'border-default': 'var(--color-border-default)',
          'border-error': 'var(--color-border-error)',
          'border-focus': 'var(--color-border-focus)',
          'border-hint': 'var(--color-border-hint)',
          'border-match-background': 'var(--color-border-match-background)',
          'border-merged': 'var(--color-border-merged)',
          'border-primary-hover': 'var(--color-border-primary-hover)',
          'border-primary': 'var(--color-border-primary)',
          'border-selected': 'var(--color-border-selected)',
          'border-success': 'var(--color-border-success)',
          'border-warning': 'var(--color-border-warning)',
          'fill-counter-emphasized': 'var(--color-fill-counter-emphasized)',
          'fill-counter': 'var(--color-fill-counter)',
          'fill-danger': 'var(--color-fill-danger)',
          'fill-delegate': 'var(--color-fill-delegate)',
          'fill-diff-green-light': 'var(--color-fill-diff-green-light)',
          'fill-diff-green': 'var(--color-fill-diff-green)',
          'fill-diff-red-light': 'var(--color-fill-diff-red-light)',
          'fill-diff-red': 'var(--color-fill-diff-red)',
          'fill-float-hover': 'var(--color-fill-float-hover)',
          'fill-float': 'var(--color-fill-float)',
          'fill-ghost-hover': 'var(--color-fill-ghost-hover)',
          'fill-ghost': 'var(--color-fill-ghost)',
          'fill-gray': 'var(--color-fill-gray)',
          'fill-merged': 'var(--color-fill-merged)',
          'fill-primary-hover': 'var(--color-fill-primary-hover)',
          'fill-primary': 'var(--color-fill-primary)',
          'fill-private': 'var(--color-fill-private)',
          'fill-secondary-counter': 'var(--color-fill-secondary-counter)',
          'fill-secondary-hover': 'var(--color-fill-secondary-hover)',
          'fill-secondary': 'var(--color-fill-secondary)',
          'fill-selected': 'var(--color-fill-selected)',
          'fill-separator': 'var(--color-fill-separator)',
          'fill-success': 'var(--color-fill-success)',
          'fill-warning': 'var(--color-fill-warning)',
          'fill-yellow-iconic': 'var(--color-fill-yellow-iconic)',
          'fill-yellow': 'var(--color-fill-yellow)',
          'foreground-black': 'var(--color-foreground-black)',
          'foreground-contrast': 'var(--color-foreground-contrast)',
          'foreground-dim': 'var(--color-foreground-dim)',
          'foreground-disabled': 'var(--color-foreground-disabled)',
          'foreground-emphasized-hover': 'var(--color-foreground-emphasized-hover)',
          'foreground-emphasized': 'var(--color-foreground-emphasized)',
          'foreground-match-background': 'var(--color-foreground-match-background)',
          'foreground-primary-hover': 'var(--color-foreground-primary-hover)',
          'foreground-primary': 'var(--color-foreground-primary)',
          'foreground-red': 'var(--color-foreground-red)',
          'foreground-success': 'var(--color-foreground-success)',
          'foreground-white': 'var(--color-foreground-white)',
          'foreground-yellow': 'var(--color-foreground-yellow)',
        },
      },
    },
  },
} satisfies Partial<Config>