@figr-design/identity-code-lib/tailwind.config.js

This repo contains code for components exported from Figrs design system generator (Identity).

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{ts,tsx}"],
  prefix: "tw-figr-",
  theme: {
    extend: {
      colors: {
        background: "hsl(var(--background))", // Transparent
        base: {
          white: "var(--tw-figr-color-base-white)",
          black: "var(--tw-figr-color-base-black)"
        },
        primary: {
          DEFAULT: "var(--tw-figr-color-primary)",
          600: "var(--tw-figr-color-primary-600)"
        },
        secondary: {
          DEFAULT: "var(--tw-figr-color-secondary)",
          200: "var(--tw-figr-color-secondary-200)",
          700: "var(--tw-figr-color-secondary-700)",
          1000: "var(--tw-figr-color-secondary-1000)"
        },
        neutral: {
          100: "var(--tw-figr-color-neutral-100)",
          200: "var(--tw-figr-color-neutral-200)",
          300: "var(--tw-figr-color-neutral-300)",
          400: "var(--tw-figr-color-neutral-400)",
          500: "var(--tw-figr-color-neutral-500)",
          700: "var(--tw-figr-color-neutral-700)"
        },
        error: {
          100: "var(--tw-figr-color-error-100)",
          200: "var(--tw-figr-color-error-200)",
          300: "var(--tw-figr-color-error-300)"
        }
      },
      borderRadius: {
        xxs: "var(--tw-figr-radius-xxs)",
        xs: "var(--tw-figr-radius-xs)",
        s: "var(--tw-figr-radius-s)",
        sm: "var(--tw-figr-radius-sm)",
        m: "var(--tw-figr-radius-m)",
        ml: "var(--tw-figr-radius-ml)",
        lg: "var(--tw-figr-radius-lg)",
        xl: "var(--tw-figr-radius-xl)"
      },
      fontFamily: {
        primary: ["var(--tw-figr-font-primary)", "sans-serif"],
        secondary: ["var(--tw-figr-font-secondary)", "sans-serif"]
      },
      spacing: {
        xxs: "var(--tw-figr-spacing-xxs)",
        xs: "var(--tw-figr-spacing-xs)",
        s: "var(--tw-figr-spacing-s)",
        sm: "var(--tw-figr-spacing-sm)",
        m: "var(--tw-figr-spacing-m)",
        ml: "var(--tw-figr-spacing-ml)",
        l: "var(--tw-figr-spacing-l)"
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" }
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" }
        }
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out"
      },
      fontSize: {
        "desktop-caption-accent": [
          "var(--tw-figr-text-desktop-body-caption-accent-font-size)",
          {
            lineHeight:
              "var(--tw-figr-text-desktop-body-caption-accent-line-height)",
            fontWeight:
              "var(--tw-figr-text-desktop-body-caption-accent-font-weight)"
          }
        ],
        "desktop-caption-regular": [
          "var(--tw-figr-text-desktop-body-caption-regular-font-size)",
          {
            lineHeight:
              "var(--tw-figr-text-desktop-body-caption-regular-line-height)",
            fontWeight:
              "var(--tw-figr-text-desktop-body-caption-regular-font-weight)"
          }
        ],
        "desktop-caption-bold": [
          "var(--tw-figr-text-desktop-body-caption-bold-font-size)",
          {
            lineHeight:
              "var(--tw-figr-text-desktop-body-caption-bold-line-height)",
            fontWeight:
              "var(--tw-figr-text-desktop-body-caption-bold-font-weight)"
          }
        ],
        "desktop-content-accent": [
          "var(--tw-figr-text-desktop-body-content-accent-font-size)",
          {
            lineHeight:
              "var(--tw-figr-text-desktop-body-content-accent-line-height)",
            fontWeight:
              "var(--tw-figr-text-desktop-body-content-accent-font-weight)"
          }
        ],
        "desktop-content-regular": [
          "var(--tw-figr-text-desktop-body-content-regular-font-size)",
          {
            lineHeight:
              "var(--tw-figr-text-desktop-body-content-regular-line-height)",
            fontWeight:
              "var(--tw-figr-text-desktop-body-content-regular-font-weight)"
          }
        ],
        "desktop-highlight-accent": [
          "var(--tw-figr-text-desktop-body-highlight-accent-font-size)",
          {
            lineHeight:
              "var(--tw-figr-text-desktop-body-highlight-accent-line-height)",
            fontWeight:
              "var(--tw-figr-text-desktop-body-highlight-accent-font-weight)"
          }
        ],
        "desktop-heading-4": [
          "var(--tw-figr-text-desktop-headings-heading-4-font-size)",
          {
            lineHeight:
              "var(--tw-figr-text-desktop-headings-heading-4-line-height)",
            fontWeight:
              "var(--tw-figr-text-desktop-headings-heading-4-font-weight)"
          }
        ],
        "desktop-feature-accent": [
          "var(--tw-figr-text-desktop-body-feature-accent-font-size)",
          {
            lineHeight:
              "var(--tw-figr-text-desktop-body-feature-accent-line-height)",
            fontWeight:
              "var(--tw-figr-text-desktop-body-feature-accent-font-weight)"
          }
        ]
      }
    }
  },
  plugins: [require("tailwindcss-animate")]
};