tcb_devportal/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-sans)'],
        'sf-pro': ['SF Pro Display', 'system-ui', '-apple-system', 'sans-serif'],
      },
      container: {
        padding: {
          DEFAULT: '20px',
          lg: '0.5rem',
          xl: '4rem',
          '2xl': '7rem',
        },
      },
      colors: {
        grey: {
          1: '#303030',
          2: '#C4C4C4',
          3: '#ECECEC',
          4: '#A6A6A6',
          5: '#616161',
          6: '#595959',
          7: '#F5F6F7',
          8: '#F5F5F5',
          9: '#E3E4E5',
          10: '#DEDEDE',
          11: '#F5F6F8',
          12: '#F6F6F6',
          13: '#D8D8D8',
          14: '#B3B3B3',
        },
        'blue-grey': {
          1: '#8BA7BE',
          2: '#C5D8E8',
        },
        blue: {
          1: '#DBEAFE',
          2: '#3393FF',
          3: '#0A84FF',
          4: '#0062C4',
          5: '#0066CC',
          6: '#EAF4FF',
        },
        yellow: {
          1: '#FEFCE8',
        },
        red: {
          1: '#CC0000',
          2: '#ED1C24',
          3: '#ED1B24',
          4: '#FFE2E0',
          5: '#8C201A',
          6: '#FFE6E6'
        },
        green: {
          1: '#30BB25',
          2: '#E9F9E6',
        },
        black: {
          1: '#1A1A1A',
          2: '#212121',
          3: '#A2A2A2',
          4: '#333333'
        },
        yellow: {
          1: '#FFF7D9',
          2: '#8C7000'
        }
      },

      backgroundImage: {
        'apiproduct-listing-hor': 'linear-gradient(269.92deg, rgba(220, 230, 232, 0) 8.47%, rgba(208, 234, 235, 0.722533) 23.18%, #CCEBEC 43.17%, #CCEBEC 62.95%, #B5DFE0 99.93%)',
        'apiproduct-listing-ver': 'linear-gradient(180deg, rgba(218, 236, 238, 0) 30.77%, #DAECEE 66.83%)',

        'apiproduct-detail-hor': 'linear-gradient(270deg, rgba(218, 236, 238, 0) 0%, #DAECEE 40%)',
        'apiproduct-detail-ver': 'linear-gradient(180deg, rgba(218, 236, 238, 0) 30.77%, #DAECEE 66.83%)',


        'dark-sky-grey-ver': 'linear-gradient(180deg, rgba(163, 201, 202, 0) 0%, #A3C9CA 60%)',
        'dark-sky-grey-hor': 'linear-gradient(270deg, rgba(163, 201, 202, 0) 0%, #A3C9CA 40%)',

        'sky-grey-ver': 'linear-gradient(180deg, rgba(184, 217, 218, 0) 0%, #B8D9DA 60%)',
        'sky-grey-hor': 'linear-gradient(270deg, rgba(184, 217, 218, 0) 0%, #B8D9DA 40%)',

        'light-sky-grey-ver': 'linear-gradient(180deg, rgba(214, 235, 236, 0) 0%, #D6EBEC 60%)',
        'light-sky-grey-hor': 'linear-gradient(270deg, rgba(214, 235, 236, 0) 0%, #D6EBEC 40%)',

        'blue-ver': 'linear-gradient(180deg, rgba(216, 238, 254, 0) 0%, #D8EEFE 60%)',
        'blue-hor': 'linear-gradient(270deg, rgba(216, 238, 254, 0) 0%, #D8EEFE 40%)',

        'light-blue-ver': 'linear-gradient(180deg, rgba(231, 245, 254, 0) 0%, #E7F5FE 60%)',
        'light-blue-hor': 'linear-gradient(270deg, rgba(231, 245, 254, 0) 0%, #E7F5FE 40%)',

        'white-blue-ver': 'linear-gradient(180deg, rgba(248, 252, 255, 0) 0%, #F8FCFF 60%)',
        'white-blue-hor': 'linear-gradient(270deg, rgba(248, 252, 255, 0) 0%, #F8FCFF 40%)',

        'white-ver': 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 60%)',
        'white-hor': 'linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 40%)',

        'light-grey-ver': 'linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, #F0F0F0 60%)',
        'light-grey-hor': 'linear-gradient(270deg, rgba(240, 240, 240, 0) 0%, #F0F0F0 40%)',

        'grey-ver': 'linear-gradient(180deg, rgba(229, 229, 229, 0) 0%, #E5E5E5 60%)',
        'grey-hor': 'linear-gradient(180deg, rgba(229, 229, 229, 0) 0%, #E5E5E5 60%)',

        'grey-blue-ver': 'linear-gradient(180deg, rgba(129, 143, 152, 0) 0%, #818F98 60%)',
        'grey-blue-hor': 'linear-gradient(270deg, rgba(129, 143, 152, 0) 0%, #818F98 40%)',

        'dark-grey-ver': 'linear-gradient(180deg, rgba(44, 48, 52, 0) 0%, #2C3034 60%)',
        'dark-grey-hor': 'linear-gradient(270deg, rgba(44, 48, 52, 0) 0%, #2C3034 40%)',

        'blue': 'linear-gradient(360deg, rgba(218, 236, 238, 0.1) -32.51%, rgba(218, 236, 238, 0.5) 100%)'
      },

      keyframes: {
        'slide-down': {
          from: { transform: 'translateY(-100%)', opacity: '0' },
          to: { transform: 'translateY(0)', opacity: '1' },
        },
        'slide-up': {
          from: { transform: 'translateY(0)', opacity: '1' },
          to: { transform: 'translateY(-100%)', opacity: '0' },
        },
      },
      animation: {
        'slide-down': 'slide-down 0.3s ease-out forwards',
        'slide-up': 'slide-up 0.3s ease-in forwards',
      },

      fontSize: {
        'display-lg-desktop': [
          '56px',
          {
            lineHeight: "130%",
            fontWeight: "500",
          }
        ],
        'display-lg-mobile': [
          '48px',
          {
            lineHeight: "80px",
            fontWeight: "500",
          }
        ],
        'display-md-desktop': [
          '48px',
          {
            lineHeight: "130%",
            fontWeight: "500",
          }
        ],
        'display-md-mobile': [
          '40px',
          {
            lineHeight: "130%",
            fontWeight: "500",
          }
        ],
        'display-sm-desktop': [
          '28px',
          {
            lineHeight: "34px",
            fontWeight: "600",
          }
        ],
        'headline-lg-desktop': [
          '40px',
          {
            lineHeight: "100%",
            fontWeight: "300",
          }
        ],
        'headline-lg-mobile': [
          '32px',
          {
            lineHeight: "100%",
            fontWeight: "300",
          }
        ],
        'headline-md-desktop': [
          '32px',
          {
            lineHeight: "100%",
            fontWeight: "300",
          }
        ],
        'headline-md-mobile': [
          '28px',
          {
            lineHeight: "100%",
            fontWeight: "300",
          }
        ],
        'title-lg-emphasize': [
          '24px',
          {
            lineHeight: "36px",
            fontWeight: "600",
          }
        ],
        'title-lg': [
          '24px',
          {
            lineHeight: "36px",
            fontWeight: "400",
          }
        ],
        'title-md-emphasize': [
          '20px',
          {
            lineHeight: "28px",
            fontWeight: "700",
          }
        ],
        'title-md': [
          '20px',
          {
            lineHeight: "28px",
            fontWeight: "500",
          }
        ],
        'body-emphasize': [
          '16px',
          {
            lineHeight: "24px",
            fontWeight: "700",
          }
        ],
        'body-body': [
          '16px',
          {
            lineHeight: "24px",
            fontWeight: "400",
          }
        ],
        'body-sm': [
          '15px',
          {
            lineHeight: "20px",
            fontWeight: "400",
          }
        ],
        'body-label': [
          '14px',
          {
            lineHeight: "20px",
            fontWeight: "600",
            textTransform: "uppercase",
          }
        ],
        'body-link': [
          '16px',
          {
            lineHeight: "24px",
            fontWeight: "400",
            textDecoration: "underline",
          }
        ],
        'body-helptext-emphasize': [
          '14px',
          {
            lineHeight: "20px",
            fontWeight: "600",
          }
        ],
        'body-helptext': [
          '14px',
          {
            lineHeight: "20px",
            fontWeight: "400",
          }
        ],
      },
    },
  },
  plugins: [],
};