text: /* eslint-disable import/no-commonjs */
  /* Note: this file is used for styling the documentation website, not the javascript
   * dropdown. */
  const _ = require('lodash');
  const algoliaColors = {
    moon: '#f5f5fa',
    proton: '#c5c9e0',
    nova: '#848ab8',
    telluric: '#5d6494', // Text
    solstice: '#3a416f', // Headers
    cosmos: '#21243d',
    nebula: '#5468ff', // links
  
    'moon--1': '#EBEBF2', // input focus
  
    'neptune-2': '#3A46A1',
    'neptune-1': '#5560B5',
    neptune: '#707BCC',
    'neptune--1': '#8D97E3',
    'neptune--2': '#A6B0F9',
  
    'mercury-2': '#008FBA',
    'mercury-1': '#2DA7CB',
    mercury: '#5BBFDD',
    'mercury--1': '#88d6ee',
    'mercury--2': '#b5eeff',
  
    'jupiter-2': '#3ab2bd',
    'jupiter-1': '#61c5c8',
    jupiter: '#89d9d3',
    'jupiter--1': '#b0ecde',
    'jupiter--2': '#d7ffe9',
  
    'saturn-2': '#ec8b63',
    'saturn-1': '#f3a57e',
    saturn: '#f8be9a',
    'saturn--1': '#fcd7b7',
    'saturn--2': '#fdf1d4',
  
    'mars-2': '#ed5a6a',
    'mars-1': '#f27885',
    mars: '#f695a0',
    'mars--1': '#fbb3ba',
    'mars--2': '#ffd0d5',
  
    'venus-2': '#ae3e88',
    'venus-1': '#d44fa4',
    venus: '#ea71bc',
    'venus--1': '#f89ad3',
    'venus--2': '#ffcae9',
  };
  const colors = {
    ...algoliaColors,
    transparent: 'transparent',
    inherit: 'inherit',
    'white-pure': '#FFF',
    'black-pure': '#000',
    white: algoliaColors.moon,
    black: algoliaColors.cosmos,
    grey: algoliaColors.proton,
    'grey-1': algoliaColors.nova,
    'grey-2': algoliaColors.telluric,
    'grey-3': algoliaColors.solstice,
  
    red: algoliaColors.mars,
    orange: algoliaColors.saturn,
    yellow: algoliaColors['saturn--2'],
    green: algoliaColors.jupiter,
    teal: algoliaColors.mercury,
    blue: algoliaColors.nebula,
    indigo: algoliaColors.neptune,
    purple: algoliaColors['venus-2'],
    pink: algoliaColors.venus,
  
    // Alpha
    'black-10': 'rgba(0, 0, 0, .10)',
    'black-25': 'rgba(0, 0, 0, .25)',
    'black-50': 'rgba(0, 0, 0, .50)',
    'black-65': 'rgba(0, 0, 0, .65)',
    'black-75': 'rgba(0, 0, 0, .75)',
    'black-90': 'rgba(0, 0, 0, .90)',
    'white-10': 'rgba(255, 255, 255, .10)',
    'white-25': 'rgba(255, 255, 255, .25)',
    'white-50': 'rgba(255, 255, 255, .50)',
    'white-65': 'rgba(255, 255, 255, .65)',
    'white-75': 'rgba(255, 255, 255, .75)',
    'white-90': 'rgba(255, 255, 255, .90)',
  };
  
  const screenSizes = {
    sm: '576px',
    md: '768px',
    lg: '992px',
    xl: '1200px',
  };
  
  const dimensionScale = {
    auto: 'auto',
    '0': '0',
    '0x': '.25rem',
    '05': '.5rem',
    '05x': '.75rem',
    '1': '1rem',
    '1x': '1.5rem',
    '2': '2rem',
    '2x': '3rem',
    '3': '4rem',
    '3x': '6rem',
    '4': '8rem',
    '4x': '12rem',
    '5': '16rem',
    '10': '10%',
    '20': '20%',
    '25': '25%',
    '30': '30%',
    '33': 'calc(100% / 3)',
    '40': '40%',
    '50': '50%',
    '60': '60%',
    '66': 'calc(100% / 1.5)',
    '70': '70%',
    '75': '75%',
    '80': '80%',
    '90': '90%',
    '100': '100%',
    '100vw': '100vw',
    '100vh': '100vh',
    ...screenSizes,
  };
  
  const fontScale = {
    '-2': '0.75rem',
    '-1': '0.875rem',
    '0': '0px',
    '1': '1rem', // 16px
    '2': '1.125rem', // 18px
    '3': '1.25rem', // 20px
    '4': '1.5rem', // 24px
    '5': '1.875rem', // 30px
    '6': '2.25rem', // 36px
    '7': '3rem', // 48px
    '8': '3.5rem', // 56px
  };
  
  // Leading (line-height) uses values proportional to the current font-size.
  // In addition, it also allows setting it to exact values found in the font and
  // dimension scales.
  // .leading-2 => Proportional to the current font size
  // .leading-text-2 => Using exact font size
  // .leading-h-2 => Using exact dimension size
  const leadingScale = {
    0: '1',
    1: '1.25',
    2: '1.5',
  };
  _.each(dimensionScale, (value, key) => {
    leadingScale[`h-${key}`] = value;
  });
  _.each(fontScale, (value, key) => {
    leadingScale[`text-${key}`] = value;
  });
  
  const fontWeight = {
    hairline: 100,
    thin: 200,
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800,
    black: 900,
  };
  
  const borderRadius = {
    '0': '0',
    '1': '.125rem',
    '2': '.25rem',
    '3': '.5rem',
    auto: '6px',
    '100': '9999px',
  };
  
  const zIndex = {
    auto: 'auto',
    '-2': -20,
    '-1': -10,
    '0': 0,
    '1': 10,
    '2': 20,
    '3': 30,
    '4': 40,
    '5': 50,
  };
  
  const opacity = {
    '0': '0',
    '15': '.15',
    '25': '.25',
    '50': '.5',
    '75': '.75',
    '100': '1',
  };
  
  const boxShadow = {
    button:
      '0 7px 14px -3px rgba(45, 35, 66, 0.3), 0 2px 4px 0 rgba(45, 35, 66, 0.4), inset 0 -2px 0 0 #cfd1e3',
    'button-up':
      '0 11px 16px -3px rgba(45, 35, 66, 0.3), 0 4px 5px 0 rgba(45, 35, 66, 0.4), inset 0 -2px 0 0 #cfd1e3',
    'button-down':
      'inset 0 2px 0 1px rgba(132, 138, 184, 0.11), inset 0 2px 9px 0 rgba(93, 100, 148, 0.5), inset 0 -1px 0 1px #fff',
  
    'button-primary':
      '0 7px 14px -3px rgba(45, 35, 66, 0.3), 0 2px 4px 0 rgba(45, 35, 66, 0.4), inset 0 -2px 0 0 #4b58ba;',
    'button-primary-up':
      '0 11px 16px -3px rgba(45, 35, 66, 0.3), 0 4px 5px 0 rgba(45, 35, 66, 0.4), inset 0 -2px 0 0 #4b58ba;',
    'button-primary-down':
      'inset 0 2px 0 1px rgba(132, 138, 184, 0.11), inset 0 2px 9px 0 rgba(93, 100, 148, 0.5), inset 0 -1px 0 1px #5468ff;',
  
    '1':
      '0 5px 15px 0 rgba(37, 44, 97, 0.15), 0 2px 4px 0 rgba(93, 100, 148, 0.2)',
    none: 'none',
  };
  
  // Use font-weight without prefixes (.bold, .thin, etc)
  const customFontWeight = _.reduce(fontWeight, (result, value, key) =>
    _.assign(result, {
      [`${key}`]: { fontWeight: value },
    })
  );
  const customUtilities = {
    'text-outline': {
      'text-shadow':
        '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000',
    },
    'bg-blur': {
      filter: 'blur(10px)',
    },
  };
  const customFlexbox = {
    flrnw: {
      flexDirection: 'row',
    },
    flrw: {
      flexDirection: 'row',
      flexWrap: 'wrap',
    },
    flcnw: {
      flexDirection: 'column',
    },
    flcw: {
      flexDirection: 'column',
      flexWrap: 'wrap',
    },
    fln: {
      flex: 'none',
    },
    fla: {
      flex: '1 1 auto',
      minWidth: 0,
      minHeight: 0,
    },
    flccv: {
      justifyContent: 'center',
    },
    flcch: {
      alignItems: 'center',
    },
    flrcv: {
      alignItems: 'center',
    },
    flrch: {
      justifyContent: 'center',
    },
    flc: {
      alignItems: 'center',
      justifyContent: 'center',
    },
    flral: {
      justifyContent: 'flex-start',
    },
    flrar: {
      justifyContent: 'flex-end',
    },
    flcat: {
      justifyContent: 'flex-start',
    },
    flcab: {
      justifyContent: 'flex-end',
    },
    flspa: {
      justifyContent: 'space-around',
    },
    flspb: {
      justifyContent: 'space-between',
    },
  };
  // Use the dimension scale for top/right/bottom/left positioning
  const customPositions = _.reduce(
    dimensionScale,
    (result, value, key) =>
      _.assign(result, {
        [`top-${key}`]: { top: value },
        [`right-${key}`]: { top: value },
        [`bottom-${key}`]: { top: value },
        [`left-${key}`]: { top: value },
      }),
    {}
  );
  // Add calculated height and width with cropped parts, like .h-100vh-3
  const customCroppedVhVw = _.reduce(
    dimensionScale,
    (result, value, key) => {
      // Only do it for simple scale and half/scales
      const isSimpleScale = key.length === 1;
      const isHalfScale = key.length === 2 && key[1] === 'x';
      if (!(isSimpleScale || isHalfScale)) {
        return result;
      }
      return _.assign(result, {
        [`h-100vh-${key}`]: { height: `calc(100vh - ${value})` },
        [`w-100vw-${key}`]: { width: `calc(100vw - ${value})` },
      });
    },
    {}
  );
  
  function addCustomClasses(customClasses) {
    return ({ addUtilities }) => {
      const prefixedClasses = _.mapKeys(customClasses, (value, key) => `.${key}`);
      addUtilities(prefixedClasses);
    };
  }
  
  const plugins = [
    addCustomClasses(customFontWeight),
    addCustomClasses(customFlexbox),
    addCustomClasses(customUtilities),
    addCustomClasses(customPositions),
    addCustomClasses(customCroppedVhVw),
  ];
  
  module.exports = {
    theme: {
      width: dimensionScale,
      minWidth: dimensionScale,
      maxWidth: dimensionScale,
      height: dimensionScale,
      minHeight: dimensionScale,
      maxHeight: dimensionScale,
      padding: dimensionScale,
      margin: dimensionScale,
  
      fontSize: fontScale,
  
      lineHeight: leadingScale,
  
      fontWeight,
  
      colors,
      textColor: colors,
      backgroundColor: colors,
      borderColor: global.Object.assign(
        { default: colors['grey-light'] },
        colors
      ),
  
      zIndex,
      opacity,
      borderRadius,
      boxShadow,
  
      screens: {
        ...screenSizes,
        print: { raw: 'print' },
      },
      borderWidth: {
        default: '1px',
        '0': '0',
        '1': '2px',
        '2': '4px',
        '3': '8px',
      },
      fontFamily: {
        sans: [
          'system-ui',
          'BlinkMacSystemFont',
          '-apple-system',
          'Segoe UI',
          'Roboto',
          'Oxygen',
          'Ubuntu',
          'Cantarell',
          'Fira Sans',
          'Droid Sans',
          'Helvetica Neue',
          'sans-serif',
        ],
        serif: [
          'Constantia',
          'Lucida Bright',
          'Lucidabright',
          'Lucida Serif',
          'Lucida',
          'DejaVu Serif',
          'Bitstream Vera Serif',
          'Liberation Serif',
          'Georgia',
          'serif',
        ],
        mono: [
          'Menlo',
          'Monaco',
          'Consolas',
          'Liberation Mono',
          'Courier New',
          'monospace',
        ],
      },
      // Letter-spacing
      letterSpacing: {
        tight: '-0.05em',
        normal: '0',
        wide: '0.05em',
        poppins: '1.5px',
      },
      fill: {
        current: 'currentColor',
      },
      stroke: {
        current: 'currentColor',
      },
    },
    plugins,
  
    variants: {
      appearance: ['responsive'],
      backgroundAttachment: ['responsive'],
      backgroundColor: ['responsive', 'hover', 'focus'],
      backgroundPosition: ['responsive'],
      backgroundRepeat: ['responsive'],
      backgroundSize: ['responsive'],
      borderColor: ['responsive', 'hover'],
      borderRadius: ['responsive'],
      borderStyle: ['responsive'],
      borderWidth: ['responsive'],
      cursor: ['responsive'],
      display: ['responsive'],
      flexGrow: ['responsive'],
      float: ['responsive'],
      fontFamily: ['responsive'],
      fontWeight: ['responsive', 'hover'],
      height: ['responsive'],
      lineHeight: ['responsive'],
      listStyleType: ['responsive'],
      margin: ['responsive'],
      maxHeight: ['responsive'],
      maxWidth: ['responsive'],
      minHeight: ['responsive'],
      minWidth: ['responsive'],
      opacity: ['responsive'],
      overflow: ['responsive'],
      padding: ['responsive'],
      pointerEvents: ['responsive'],
      position: ['responsive'],
      resize: ['responsive'],
      boxShadow: ['responsive', 'hover'],
      fill: [],
      stroke: [],
      textAlign: ['responsive'],
      textColor: ['responsive', 'hover'],
      fontSize: ['responsive'],
      textStyle: ['responsive', 'hover'],
      letterSpacing: ['responsive'],
      userSelect: ['responsive'],
      verticalAlign: ['responsive'],
      visibility: ['responsive'],
      whitespace: ['responsive'],
      width: ['responsive'],
      zIndex: ['responsive'],
    },
  
    prefix: '',
    important: false,
    separator: '_',
  };
  