AlphaFuturesProMax/binance-design/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        binance: {
          yellow: '#F0B90B',
          gold: '#FFD000',
          lightGold: '#F8D12F',
          activeYellow: '#D0980B',
          dark: '#222126',
          darkCard: '#2B2F36',
        },
        focus: {
          blue: '#1EAEDB',
        },
        surface: {
          white: '#FFFFFF',
          snow: '#F5F5F5',
        },
        text: {
          ink: '#1E2026',
          primary: '#1E2026',
          secondary: '#32313A',
          slate: '#848E9C',
          steel: '#686A6C',
          muted: '#777E90',
          hoverDark: '#1A1A1A',
        },
        semantic: {
          green: '#0ECB81',
          red: '#F6465D',
        },
        binanceBorder: {
          light: '#E6E8EA',
          gold: '#FFD000',
        },
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      fontFamily: {
        binance: ['Inter', 'Arial', 'sans-serif'],
        mono: ['JetBrains Mono', 'Fira Code', 'SF Mono', 'monospace'],
      },
      fontSize: {
        'display-hero': ['60px', { lineHeight: '1.08', fontWeight: '700' }],
        'display-secondary': ['34px', { lineHeight: '1.00', fontWeight: '700' }],
        'heading-1': ['28px', { lineHeight: '1.00', fontWeight: '500' }],
        'heading-2': ['24px', { lineHeight: '1.00', fontWeight: '700' }],
        'heading-3': ['24px', { lineHeight: '1.00', fontWeight: '600' }],
        'heading-4': ['20px', { lineHeight: '1.25', fontWeight: '600' }],
        'body-large': ['20px', { lineHeight: '1.50', fontWeight: '500' }],
        'body': ['16px', { lineHeight: '1.50', fontWeight: '500' }],
        'body-semibold': ['16px', { lineHeight: '1.30', fontWeight: '600' }],
        'body-bold': ['16px', { lineHeight: '1.50', fontWeight: '700' }],
        'button': ['16px', { lineHeight: '1.25', fontWeight: '600', letterSpacing: '0.16px' }],
        'button-small': ['14.4px', { lineHeight: '1.60', fontWeight: '600', letterSpacing: '0.72px' }],
        'caption': ['14px', { lineHeight: '1.43', fontWeight: '500' }],
        'caption-semibold': ['14px', { lineHeight: '1.50', fontWeight: '600' }],
        'small': ['12px', { lineHeight: '1.00', fontWeight: '600' }],
        'tiny': ['11px', { lineHeight: '1.00', fontWeight: '500' }],
      },
      borderRadius: {
        'pill': '50px',
        'card': '12px',
        'data': '8px',
        'button': '6px',
        'micro': '2px',
        xl: "calc(var(--radius) + 4px)",
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
        xs: "calc(var(--radius) - 6px)",
      },
      boxShadow: {
        'card': 'rgba(32, 32, 37, 0.05) 0px 3px 5px 0px',
        'card-hover': 'rgba(8, 8, 8, 0.05) 0px 3px 5px 5px',
        'pill': 'rgb(153,153,153) 0px 2px 10px -3px',
        'heavy': 'rgba(0,0,0) 0px 32px 37px',
        xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
      },
      spacing: {
        'space-1': '4px',
        'space-2': '8px',
        'space-3': '12px',
        'space-4': '16px',
        'space-5': '20px',
        'space-6': '24px',
        'space-7': '32px',
        'space-8': '48px',
        'space-9': '64px',
        'space-10': '80px',
      },
      maxWidth: {
        'container': '1200px',
      },
      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" },
        },
        "caret-blink": {
          "0%,70%,100%": { opacity: "1" },
          "20%,50%": { opacity: "0" },
        },
        "fade-in": {
          from: { opacity: "0", transform: "translateY(10px)" },
          to: { opacity: "1", transform: "translateY(0)" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "caret-blink": "caret-blink 1.25s ease-out infinite",
        "fade-in": "fade-in 0.5s ease-out forwards",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}