cal.pub0.org/apps/storybook/tailwind.config.js

module.exports = {
  content: ["../../packages/ui/**/*.{js,ts,jsx,tsx}", "./stories/**/*.{js,ts,tsx,jsx}"],
  darkMode: "class",
  theme: {
    fontFamily: {
      cal: ["Cal Sans", "sans-serif"],
      mono: ["Roboto Mono", "monospace"],
    },
    extend: {
      colors: {
        /* your primary brand color */
        brandcontrast: "var(--brand-text-color)",
        darkmodebrand: "var(--brand-color-dark-mode)",
        darkmodebrandcontrast: "var(--brand-text-color-dark-mode)",
        bookinglightest: "var(--booking-lightest-color)",
        bookinglighter: "var(--booking-lighter-color)",
        bookinglight: "var(--booking-light-color)",
        bookingmedian: "var(--booking-median-color)",
        bookingdark: "var(--booking-dark-color)",
        bookingdarker: "var(--booking-darker-color)",
        bookinghighlight: "var(--booking-highlight-color)",
        black: "#111111",
        brand: {
          // Figure out a way to automate this for self hosted users
          // Goto https://javisperez.github.io/tailwindcolorshades to generate your brand color
          50: "#d1d5db",
          100: "#9ca3af",
          200: "#6b7280",
          300: "#4b5563",
          400: "#374151",
          500: "#111827", // Brand color
          600: "#0f1623",
          700: "#0d121d",
          800: "#0a0e17",
          900: "#080c13",
          DEFAULT: "#111827",
        },
        gray: {
          50: "#F9FAFB",
          100: "#F3F4F6",
          200: "#E5E7EB",
          300: "#D1D5DB",
          400: "#9CA3AF",
          500: "#6B7280",
          600: "#4B5563",
          700: "#374151",
          800: "#1F2937",
          900: "#111827",
        },
        neutral: {
          50: "#F8F8F8",
          100: "#F5F5F5",
          200: "#E1E1E1",
          300: "#CFCFCF",
          400: "#ACACAC",
          500: "#888888",
          600: "#494949",
          700: "#3E3E3E",
          800: "#313131",
          900: "#292929",
        },
        primary: {
          50: "#F4F4F4",
          100: "#E8E8E8",
          200: "#C6C6C6",
          300: "#A3A3A3",
          400: "#5F5F5F",
          500: "#1A1A1A",
          600: "#171717",
          700: "#141414",
          800: "#101010",
          900: "#0D0D0D",
        },
        secondary: {
          50: "#F5F8F7",
          100: "#EBF0F0",
          200: "#CDDAD9",
          300: "#AEC4C2",
          400: "#729894",
          500: "#356C66",
          600: "#30615C",
          700: "#28514D",
          800: "#20413D",
          900: "#223B41",
        },
        red: {
          50: "#FFF5F5",
          100: "#FFE3E2",
          200: "#FFC9C9",
          300: "#FEA8A8",
          400: "#FF8787",
          500: "#FF6B6B",
          600: "#FA5352",
          700: "#F03E3F",
          800: "#E03130",
          900: "#C92B2B",
        },
        orange: {
          50: "#FFF4E5",
          100: "#FFE8CC",
          200: "#FFD8A8",
          300: "#FFBF78",
          400: "#FFA94E",
          500: "#FF922B",
          600: "#FD7E14",
          700: "#F76706",
          800: "#E8580C",
          900: "#D94810",
        },
        green: {
          50: "#EBFCEE",
          100: "#D2F9D9",
          200: "#B1F2BA",
          300: "#8CE99A",
          400: "#69DB7C",
          500: "#51CF66",
          600: "#40C057",
          700: "#36B24D",
          800: "#2F9E44",
          900: "#2B8A3E",
        },
        blue: {
          50: "#E7F5FF",
          100: "#D0EBFF",
          200: "#A4D8FF",
          300: "#74C0FC",
          400: "#4DABF7",
          500: "#339AF0",
          600: "#238BE6",
          700: "#1C7ED7",
          800: "#1971C2",
          900: "#1763AB",
        },
      },
      fontFamily: {
        cal: ["inter", "sans-serif"],
        mono: ["Roboto Mono", "monospace"],
      },
      maxHeight: (theme) => ({
        0: "0",
        97: "25rem",
        ...theme("spacing"),
        full: "100%",
        screen: "100vh",
      }),
      minHeight: (theme) => ({
        0: "0",
        ...theme("spacing"),
        full: "100%",
        screen: "100vh",
      }),
      minWidth: (theme) => ({
        0: "0",
        ...theme("spacing"),
        full: "100%",
        screen: "100vw",
      }),
      maxWidth: (theme, { breakpoints }) => ({
        0: "0",
        ...theme("spacing"),
        ...breakpoints(theme("screens")),
        full: "100%",
        screen: "100vw",
      }),
    },
  },
};