plane/packages/tailwind-config-custom/tailwind.config.js

import colors from "tailwindcss/colors";

/** @type {import('tailwindcss').Config} */
export const darkMode = "class";
export const content = {
  relative: true,
  files: [
    "./components/**/*.tsx",
    "./constants/**/*.{js,ts,jsx,tsx}",
    "./layouts/**/*.tsx",
    "./pages/**/*.tsx",
    "./ui/**/*.tsx",
    "../packages/ui/**/*.{js,ts,jsx,tsx}",
    "../packages/editor/**/src/**/*.{js,ts,jsx,tsx}",
  ],
};
export const theme = {
  boxShadow: {
    "custom-shadow-2xs": "var(--color-shadow-2xs)",
    "custom-shadow-xs": "var(--color-shadow-xs)",
    "custom-shadow-sm": "var(--color-shadow-sm)",
    "custom-shadow-rg": "var(--color-shadow-rg)",
    "custom-shadow-md": "var(--color-shadow-md)",
    "custom-shadow-lg": "var(--color-shadow-lg)",
    "custom-shadow-xl": "var(--color-shadow-xl)",
    "custom-shadow-2xl": "var(--color-shadow-2xl)",
    "custom-shadow-3xl": "var(--color-shadow-3xl)",
    "custom-shadow-4xl": "var(--color-shadow-4xl)",
    "custom-sidebar-shadow-2xs": "var(--color-sidebar-shadow-2xs)",
    "custom-sidebar-shadow-xs": "var(--color-sidebar-shadow-xs)",
    "custom-sidebar-shadow-sm": "var(--color-sidebar-shadow-sm)",
    "custom-sidebar-shadow-rg": "var(--color-sidebar-shadow-rg)",
    "custom-sidebar-shadow-md": "var(--color-sidebar-shadow-md)",
    "custom-sidebar-shadow-lg": "var(--color-sidebar-shadow-lg)",
    "custom-sidebar-shadow-xl": "var(--color-sidebar-shadow-xl)",
    "custom-sidebar-shadow-2xl": "var(--color-sidebar-shadow-2xl)",
    "custom-sidebar-shadow-3xl": "var(--color-sidebar-shadow-3xl)",
    "custom-sidebar-shadow-4xl": "var(--color-sidebar-shadow-4xl)",
    "onboarding-shadow-sm": "var(--color-onboarding-shadow-sm)",
  },
  colors: {
    inherit: colors.inherit,
    current: colors.current,
    transparent: colors.transparent,
    black: colors.black,
    white: colors.white,
    primary: {
      page: {
        "surface-light": "var(--color-primary-10)",
        "surface-medium": "var(--color-primary-20)",
      },
      component: {
        "surface-light": "var(--color-primary-30)",
        "surface-medium": "var(--color-primary-40)",
        "surface-dark": "var(--color-primary-50)",
      },
      border: {
        subtle: "var(--color-primary-60)",
        medium: "var(--color-primary-70)",
        strong: "var(--color-primary-80)",
      },
      solid: "var(--color-primary-90)",
      text: {
        subtle: "var(--color-primary-100)",
        medium: "var(--color-primary-110)",
        strong: "var(--color-primary-120)",
      },
      10: "var(--color-primary-10)",
      20: "var(--color-primary-20)",
      30: "var(--color-primary-30)",
      40: "var(--color-primary-40)",
      50: "var(--color-primary-50)",
      60: "var(--color-primary-60)",
      70: "var(--color-primary-70)",
      80: "var(--color-primary-80)",
      90: "var(--color-primary-90)",
      100: "var(--color-primary-100)",
      110: "var(--color-primary-110)",
      120: "var(--color-primary-120)",
      DEFAULT: "var(--color-primary-90)",
    },
    neutral: {
      page: {
        "surface-default": "var(--color-neutral-0)",
        "surface-light": "var(--color-neutral-10)",
        "surface-medium": "var(--color-neutral-20)",
      },
      component: {
        "surface-light": "var(--color-neutral-30)",
        "surface-medium": "var(--color-neutral-40)",
        "surface-dark": "var(--color-neutral-50)",
      },
      border: {
        subtle: "var(--color-neutral-60)",
        medium: "var(--color-neutral-70)",
        strong: "var(--color-neutral-80)",
      },
      solid: "var(--color-neutral-90)",
      text: {
        subtle: "var(--color-neutral-100)",
        medium: "var(--color-neutral-110)",
        strong: "var(--color-neutral-120)",
      },
      10: "var(--color-neutral-10)",
      20: "var(--color-neutral-20)",
      30: "var(--color-neutral-30)",
      40: "var(--color-neutral-40)",
      50: "var(--color-neutral-50)",
      60: "var(--color-neutral-60)",
      70: "var(--color-neutral-70)",
      80: "var(--color-neutral-80)",
      90: "var(--color-neutral-90)",
      100: "var(--color-neutral-100)",
      110: "var(--color-neutral-110)",
      120: "var(--color-neutral-120)",
      DEFAULT: "var(--color-neutral-90)",
    },
    success: {
      page: {
        "surface-light": "var(--color-success-10)",
        "surface-medium": "var(--color-success-20)",
      },
      component: {
        "surface-light": "var(--color-success-30)",
        "surface-medium": "var(--color-success-40)",
        "surface-dark": "var(--color-success-50)",
      },
      border: {
        subtle: "var(--color-success-60)",
        medium: "var(--color-success-70)",
        strong: "var(--color-success-80)",
      },
      solid: "var(--color-success-90)",
      text: {
        subtle: "var(--color-success-100)",
        medium: "var(--color-success-110)",
        strong: "var(--color-success-120)",
      },
      10: "var(--color-success-10)",
      20: "var(--color-success-20)",
      30: "var(--color-success-30)",
      40: "var(--color-success-40)",
      50: "var(--color-success-50)",
      60: "var(--color-success-60)",
      70: "var(--color-success-70)",
      80: "var(--color-success-80)",
      90: "var(--color-success-90)",
      100: "var(--color-success-100)",
      110: "var(--color-success-110)",
      120: "var(--color-success-120)",
      DEFAULT: "var(--color-success-90)",
    },
    warning: {
      page: {
        "surface-light": "var(--color-warning-10)",
        "surface-medium": "var(--color-warning-20)",
      },
      component: {
        "surface-light": "var(--color-warning-30)",
        "surface-medium": "var(--color-warning-40)",
        "surface-dark": "var(--color-warning-50)",
      },
      border: {
        subtle: "var(--color-warning-60)",
        medium: "var(--color-warning-70)",
        strong: "var(--color-warning-80)",
      },
      solid: "var(--color-warning-90)",
      text: {
        subtle: "var(--color-warning-100)",
        medium: "var(--color-warning-110)",
        strong: "var(--color-warning-120)",
      },
      10: "var(--color-warning-10)",
      20: "var(--color-warning-20)",
      30: "var(--color-warning-30)",
      40: "var(--color-warning-40)",
      50: "var(--color-warning-50)",
      60: "var(--color-warning-60)",
      70: "var(--color-warning-70)",
      80: "var(--color-warning-80)",
      90: "var(--color-warning-90)",
      100: "var(--color-warning-100)",
      110: "var(--color-warning-110)",
      120: "var(--color-warning-120)",
      DEFAULT: "var(--color-warning-90)",
    },
    danger: {
      page: {
        "surface-light": "var(--color-danger-10)",
        "surface-medium": "var(--color-danger-20)",
      },
      component: {
        "surface-light": "var(--color-danger-30)",
        "surface-medium": "var(--color-danger-40)",
        "surface-dark": "var(--color-danger-50)",
      },
      border: {
        subtle: "var(--color-danger-60)",
        medium: "var(--color-danger-70)",
        strong: "var(--color-danger-80)",
      },
      solid: "var(--color-danger-90)",
      text: {
        subtle: "var(--color-danger-100)",
        medium: "var(--color-danger-110)",
        strong: "var(--color-danger-120)",
      },
      10: "var(--color-danger-10)",
      20: "var(--color-danger-20)",
      30: "var(--color-danger-30)",
      40: "var(--color-danger-40)",
      50: "var(--color-danger-50)",
      60: "var(--color-danger-60)",
      70: "var(--color-danger-70)",
      80: "var(--color-danger-80)",
      90: "var(--color-danger-90)",
      100: "var(--color-danger-100)",
      110: "var(--color-danger-110)",
      120: "var(--color-danger-120)",
      DEFAULT: "var(--color-danger-90)",
    },
    info: {
      page: {
        "surface-light": "var(--color-info-10)",
        "surface-medium": "var(--color-info-20)",
      },
      component: {
        "surface-light": "var(--color-info-30)",
        "surface-medium": "var(--color-info-40)",
        "surface-dark": "var(--color-info-50)",
      },
      border: {
        subtle: "var(--color-info-60)",
        medium: "var(--color-info-70)",
        strong: "var(--color-info-80)",
      },
      solid: "var(--color-info-90)",
      text: {
        subtle: "var(--color-info-100)",
        medium: "var(--color-info-110)",
        strong: "var(--color-info-120)",
      },
      10: "var(--color-info-10)",
      20: "var(--color-info-20)",
      30: "var(--color-info-30)",
      40: "var(--color-info-40)",
      50: "var(--color-info-50)",
      60: "var(--color-info-60)",
      70: "var(--color-info-70)",
      80: "var(--color-info-80)",
      90: "var(--color-info-90)",
      100: "var(--color-info-100)",
      110: "var(--color-info-110)",
      120: "var(--color-info-120)",
      DEFAULT: "var(--color-info-90)",
    },
    orange: {
      10: "var(--color-orange-10)",
      20: "var(--color-orange-20)",
      30: "var(--color-orange-30)",
      40: "var(--color-orange-40)",
      50: "var(--color-orange-50)",
      60: "var(--color-orange-60)",
      70: "var(--color-orange-70)",
      80: "var(--color-orange-80)",
      90: "var(--color-orange-90)",
      100: "var(--color-orange-100)",
      110: "var(--color-orange-110)",
      120: "var(--color-orange-120)",
    },
    sidebar: {
      neutral: {
        page: {
          "surface-default": "var(--color-neutral-0)",
          "surface-light": "var(--color-neutral-10)",
          "surface-medium": "var(--color-neutral-20)",
        },
        component: {
          "surface-light": "var(--color-neutral-30)",
          "surface-medium": "var(--color-neutral-40)",
          "surface-dark": "var(--color-neutral-50)",
        },
        border: {
          subtle: "var(--color-neutral-60)",
          medium: "var(--color-neutral-70)",
          strong: "var(--color-neutral-80)",
        },
        solid: "var(--color-neutral-90)",
        text: {
          subtle: "var(--color-neutral-100)",
          medium: "var(--color-neutral-110)",
          strong: "var(--color-neutral-120)",
        },
        10: "var(--color-neutral-10)",
        20: "var(--color-neutral-20)",
        30: "var(--color-neutral-30)",
        40: "var(--color-neutral-40)",
        50: "var(--color-neutral-50)",
        60: "var(--color-neutral-60)",
        70: "var(--color-neutral-70)",
        80: "var(--color-neutral-80)",
        90: "var(--color-neutral-90)",
        100: "var(--color-neutral-100)",
        110: "var(--color-neutral-110)",
        120: "var(--color-neutral-120)",
        DEFAULT: "var(--color-neutral-90)",
      },
    },
  },
  extend: {
    keyframes: {
      "bar-loader": {
        from: { left: "-100%" },
        to: { left: "100%" },
      },
    },
    typography: () => ({
      brand: {
        css: {
          "--tw-prose-body": "--color-neutral-120",
          "--tw-prose-p": "--color-neutral-120",
          "--tw-prose-headings": "--color-neutral-120",
          "--tw-prose-lead": "--color-neutral-120",
          "--tw-prose-links": "--color-primary-90",
          "--tw-prose-bold": "--color-neutral-120",
          "--tw-prose-counters": "--color-neutral-120",
          "--tw-prose-bullets": "--color-neutral-120",
          "--tw-prose-hr": "--color-neutral-120",
          "--tw-prose-quotes": "--color-neutral-120",
          "--tw-prose-quote-borders": "--color-neutral-70",
          "--tw-prose-code": "--color-neutral-120",
          "--tw-prose-pre-code": "--color-neutral-120",
          "--tw-prose-pre-bg": "--color-neutral-30",
          "--tw-prose-th-borders": "--color-neutral-70",
          "--tw-prose-td-borders": "--color-neutral-70",
        },
      },
    }),
    screens: {
      "3xl": "1792px",
    },
    // scale down font sizes to 90% of default
    fontSize: {
      xs: "0.675rem",
      sm: "0.7875rem",
      base: "0.9rem",
      lg: "1.0125rem",
      xl: "1.125rem",
      "2xl": "1.35rem",
      "3xl": "1.6875rem",
      "4xl": "2.25rem",
      "5xl": "2.7rem",
      "6xl": "3.375rem",
      "7xl": "4.05rem",
      "8xl": "5.4rem",
      "9xl": "7.2rem",
    },
    // scale down spacing to 90% of default
    padding: {
      0: "0",
      0.5: "0.1125rem",
      1: "0.225rem",
      1.5: "0.3375rem",
      2: "0.45rem",
      2.5: "0.5625rem",
      3: "0.675rem",
      3.5: "0.7875rem",
      4: "0.9rem",
      5: "1.125rem",
      6: "1.35rem",
      7: "1.575rem",
      8: "1.8rem",
      9: "2.025rem",
      10: "2.25rem",
      11: "2.475rem",
      12: "2.7rem",
      16: "3.6rem",
      20: "4.5rem",
      24: "5.4rem",
      32: "7.2rem",
      40: "9rem",
      48: "10.8rem",
      56: "12.6rem",
      64: "14.4rem",
      72: "16.2rem",
      80: "18rem",
      96: "21.6rem",
    },
    margin: {
      0: "0",
      0.5: "0.1125rem",
      1: "0.225rem",
      1.5: "0.3375rem",
      2: "0.45rem",
      2.5: "0.5625rem",
      3: "0.675rem",
      3.5: "0.7875rem",
      4: "0.9rem",
      5: "1.125rem",
      6: "1.35rem",
      7: "1.575rem",
      8: "1.8rem",
      9: "2.025rem",
      10: "2.25rem",
      11: "2.475rem",
      12: "2.7rem",
      16: "3.6rem",
      20: "4.5rem",
      24: "5.4rem",
      32: "7.2rem",
      40: "9rem",
      48: "10.8rem",
      56: "12.6rem",
      64: "14.4rem",
      72: "16.2rem",
      80: "18rem",
      96: "21.6rem",
    },
    space: {
      0: "0",
      0.5: "0.1125rem",
      1: "0.225rem",
      1.5: "0.3375rem",
      2: "0.45rem",
      2.5: "0.5625rem",
      3: "0.675rem",
      3.5: "0.7875rem",
      4: "0.9rem",
      5: "1.125rem",
      6: "1.35rem",
      7: "1.575rem",
      8: "1.8rem",
      9: "2.025rem",
      10: "2.25rem",
      11: "2.475rem",
      12: "2.7rem",
      16: "3.6rem",
      20: "4.5rem",
      24: "5.4rem",
      32: "7.2rem",
      40: "9rem",
      48: "10.8rem",
      56: "12.6rem",
      64: "14.4rem",
      72: "16.2rem",
      80: "18rem",
      96: "21.6rem",
    },
    gap: {
      0: "0",
      0.5: "0.1125rem",
      1: "0.225rem",
      1.5: "0.3375rem",
      2: "0.45rem",
      2.5: "0.5625rem",
      3: "0.675rem",
      3.5: "0.7875rem",
      4: "0.9rem",
      5: "1.125rem",
      6: "1.35rem",
      7: "1.575rem",
      8: "1.8rem",
      9: "2.025rem",
      10: "2.25rem",
      11: "2.475rem",
      12: "2.7rem",
      16: "3.6rem",
      20: "4.5rem",
      24: "5.4rem",
      32: "7.2rem",
      40: "9rem",
      48: "10.8rem",
      56: "12.6rem",
      64: "14.4rem",
      72: "16.2rem",
      80: "18rem",
      96: "21.6rem",
    },
    backgroundImage: {
      "onboarding-gradient-100": "var( --gradient-onboarding-100)",
      "onboarding-gradient-200": "var( --gradient-onboarding-200)",
      "onboarding-gradient-300": "var( --gradient-onboarding-300)",
    },
  },
  fontFamily: {
    custom: ["Inter", "sans-serif"],
  },
};
export const plugins = [
  require("tailwindcss-animate"),
  require("@tailwindcss/typography"),
];