tailwind.config.ts

// This is just a sample config used by Storybook. It is not being used
// anywhere in the actual package. It is mainly used as sample to demonstrate the
// usage of Uikit.

import type { Config } from 'tailwindcss';

import { presets as uikitPresets } from './src';
import plugin from 'tailwindcss/plugin';

// Theme/app levels styles.
const appTheme = plugin(({ addComponents, theme }) => {
  addComponents({
    // variant props
    // Background Color
    // Border Color
    // Text Color
    '.btn': {
      // default btn.
      borderWidth: theme('borderWidth.DEFAULT'),
      borderRadius: theme('borderRadius.DEFAULT'),
      fontWeight: theme('fontWeight.bold'),
      lineHeight: theme('lineHeight.relaxed'),
      letterSpacing: theme('letterSpacing.wider'),
      borderColor: theme('colors.transparent'),
      color: theme('colors.primary.950'),

      '&:hover': {
        boxShadow: theme('boxShadow.DEFAULT'),
      },

      '&:disabled': {
        opacity: '0.3',
      },

      '&-lg': {
        letterSpacing: theme('letterSpacing.wide'),
        lineHeight: theme('lineHeight.normal'),
      },

      '&-xs': {
        letterSpacing: theme('letterSpacing.widest'),
      },

      '&-solid': {
        backgroundColor: theme('colors.primary.950'),
        color: theme('colors.white'),
      },

      '&-translucent': {
        // Tailwind is amazing :D
        // https://github.com/tailwindlabs/tailwindcss/discussions/2049#discussioncomment-39950
        '@apply bg-primary-950/40': {},
        '&:hover': {
          '@apply bg-primary-950/50': {},
        },
        color: theme('colors.white'),
        borderColor: theme('colors.white'),
      },

      '&-outline': {
        borderColor: theme('colors.primary.950'),
      },
    },

    '.img': {
      '&-placeholder': {
        backgroundColor: theme('colors.gray.100'),
      },
    },
  });
});

const config: Config = {
  // https://zach.codes/build-your-own-flexible-component-library-using-tsdx-typescript-tailwind-css-headless-ui/
  content: ['./src/**/*.{ts,tsx}', './stories/**/*.{ts,tsx}'],
  presets: [uikitPresets],
  // Config being used in ketch theme.
  theme: {
    fontFamily: {
      primary: ['Nunito Sans', 'sans-serif'],
      // Add other fonts here as needed.
      secondary: [],
      tertiary: [],
      accent: [],
    },
    lineHeight: {
      none: '100%',
      tight: '110%',
      snug: '120%',
      normal: '130%',
      relaxed: '140%',
      loose: '150%',
    },
    letterSpacing: {
      tighter: '-0.025em',
      tight: '-0.01em',
      normal: '0',
      wide: '0.01em',
      wider: '0.025em',
      widest: '0.05em',
      extrawide: '0.1em',
    },
    boxShadow: {
      // default shadows- down direction
      sm: '0px 2px 1px 0px rgba(0, 0, 0, 0.05)',
      DEFAULT: '0px 4px 4px 0px rgba(0, 0, 0, 0.25)',
      md: '0px 4px 6px -1px rgba(0, 0, 0, 0.10)',
      lg: '0px 10px 15px -3px rgba(0, 0, 0, 0.10)',
      xl: '0px 20px 25px -5px rgba(0, 0, 0, 0.10)',
      '2xl': '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
    },
    extend: {
      letterSpacing: {
        extrawide: '0.1em',
      },
      colors: {
        primary: {
          950: '#0A0A0A',
        },
        // add secondary color if needed.
        success: {
          50: '#ECFDF5',
          200: '#A7F3D0',
          600: '#059669',
          700: '#047857',
        },
        danger: {
          50: '#FEF2F2',
          200: '#FECACA',
          600: '#DC2626',
          700: '#B91C1C',
        },
        warning: {
          50: '#FFF7ED',
          200: '#FED7AA',
          600: '#EA580C',
          700: '#C2410C',
        },
        info: {
          50: '#EFF6FF',
          200: '#BFDBFE',
          600: '#2563EB',
          700: '#1D4ED8',
        },
        neutral: {
          50: '#FAFAFA',
          200: '#E5E5E5',
          300: '#D4D4D4',
          500: '#737373',
          950: '#0A0A0A',
        },
      },
      boxShadow: {
        // center shadows
        'c-sm': '0px 0px 1px 0px rgba(0, 0, 0, 0.05)',
        c: '0px 0px 3px 0px rgba(0, 0, 0, 0.10)',
        'c-md': '0px 0px 6px -1px rgba(0, 0, 0, 0.10)',
        'c-lg': '0px 0px 15px -3px rgba(0, 0, 0, 0.10)',
        'c-xl': '0px 0px 25px -5px rgba(0, 0, 0, 0.10)',
        'c-2xl': '0px 0px 50px -12px rgba(0, 0, 0, 0.25)',

        // up/top-shadow shadow
        't-sm': '0px -2px 1px 0px rgba(0, 0, 0, 0.05)',
        t: '0px -1px 3px 0px rgba(0, 0, 0, 0.10)',
        't-md': '0px -4px 6px -1px rgba(0, 0, 0, 0.10)',
        't-lg': '0px -10px 15px -3px rgba(0, 0, 0, 0.10)',
        't-xl': '0px -20px 25px -5px rgba(0, 0, 0, 0.10)',
        't-2xl': '0px -25px 50px -12px rgba(0, 0, 0, 0.25)',
      },
    },
  },
  plugins: [appTheme],
  safelist: [
    // {
    //   // build everything only for testing.
    //   // SHOULD NEVER BE USED IN ACTUAL APP.
    //   pattern: /.*/,
    // },
  ],
};

export default config;