tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./ibps-ide/**/*.{js,jsx,ts,tsx}"],
  darkMode: "selector",
  theme: {
    fontFamily: {
      sans: [
        "-apple-system",
        "BlinkMacSystemFont",
        "Roboto",
        "Inter",
        "ui-sans-serif",
        "system-ui",
      ],
      mono: ["Chivo Mono", "SF Mono", "Menlo", "Cascadia Mono", "mono"],
    },
    extend: {
      colors: {
        idedark: {
          50: "hsl(var(--theme-dark-50) / <alpha-value>)",
          100: "hsl(var(--theme-dark-100) / <alpha-value>)",
          200: "hsl(var(--theme-dark-200) / <alpha-value>)",
          300: "hsl(var(--theme-dark-300) / <alpha-value>)",
          400: "hsl(var(--theme-dark-400) / <alpha-value>)",
          500: "hsl(var(--theme-dark-500) / <alpha-value>)",
          600: "hsl(var(--theme-dark-600) / <alpha-value>)",
          700: "hsl(var(--theme-dark-700) / <alpha-value>)",
          800: "hsl(var(--theme-dark-800) / <alpha-value>)",
          900: "hsl(var(--theme-dark-900) / <alpha-value>)",
          950: "hsl(var(--theme-dark-950) / <alpha-value>)",
          1000: "hsl(var(--theme-dark-1000) / <alpha-value>)",
          1100: "hsl(var(--theme-dark-1100) / <alpha-value>)",
          accent: "hsl(var(--theme-dark-accent) / <alpha-value>)",
          border: "hsl(var(--theme-dark-border) / <alpha-value>)",
        },
        idelight: {
          whitish: "hsl(var(--theme-light-whitish) / <alpha-value>)",
          50: "hsl(var(--theme-light-50) / <alpha-value>)",
          100: "hsl(var(--theme-light-100) / <alpha-value>)",
          200: "hsl(var(--theme-light-200) / <alpha-value>)",
          300: "hsl(var(--theme-light-300) / <alpha-value>)",
          400: "hsl(var(--theme-light-400) / <alpha-value>)",
          500: "hsl(var(--theme-light-500) / <alpha-value>)",
          600: "hsl(var(--theme-light-600) / <alpha-value>)",
          700: "hsl(var(--theme-light-700) / <alpha-value>)",
          800: "hsl(var(--theme-light-800) / <alpha-value>)",
          900: "hsl(var(--theme-light-900) / <alpha-value>)",
          950: "hsl(var(--theme-light-950) / <alpha-value>)",
          1000: "hsl(var(--theme-light-1000) / <alpha-value>)",
          1100: "hsl(var(--theme-light-1100) / <alpha-value>)",
          accent: "hsl(var(--theme-light-accent) / <alpha-value>)",
        },
      },
    },
  },
  plugins: [],
};