books/tailwind.config.js

module.exports = {
  purge: false,
  theme: {
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    fontSize: {
      xs: '11px',
      sm: '12px',
      base: '13px',
      lg: '14px',
      xl: '18px',
      '2xl': '20px',
      '3xl': '24px',
      '4xl': '28px',
    },
    extend: {
      maxHeight: {
        64: '16rem',
      },
      minWidth: {
        40: '10rem',
        56: '14rem',
      },
      maxWidth: {
        32: '8rem',
        56: '14rem',
      },
      spacing: {
        7: '1.75rem',
        14: '3.5rem',
        18: '4.5rem',
        28: '7rem',
        72: '18rem',
        80: '20rem',
      },
      boxShadow: {
        'outline-px': '0 0 0 1px rgba(66, 153, 225, 0.5)',
        DEFAULT: '0 2px 4px 0 rgba(0, 0, 0, 0.05)',
        md: '0 0 2px 0 rgba(0, 0, 0, 0.10), 0 2px 4px 0 rgba(0, 0, 0, 0.08)',
        button: '0 0.5px 0 0 rgba(0, 0, 0, 0.08)',
      },
      borderRadius: {
        sm: '0.25rem', // 4px
        DEFAULT: '0.313rem', // 5px
        md: '0.375rem', // 6px
        lg: '0.5rem', // 8px
        xl: '0.75rem', // 12px
      },
      gridColumn: {
        'span-full': '1 / -1',
      },
      colors: {
        black: '#1E293B',
        gray: {
          25: '#fcfcfd',
          50: '#f8f9fc',
          100: '#f2f4f8',
          200: '#ebeff5',
          300: '#e2e8f0',
          400: '#cad5e2',
          500: '#9aa8bc',
          600: '#8493a9',
          700: '#64748b',
          800: '#475569',
          900: '#334155',
        },
        red: {
          100: '#fff5f5',
          200: '#fed7d7',
          300: '#feb2b2',
          400: '#fc8181',
          500: '#f56565',
          600: '#e53e3e',
          700: '#c53030',
          800: '#9b2c2c',
          900: '#742a2a',
        },
        orange: {
          100: '#fffaf0',
          200: '#feebc8',
          300: '#fbd38d',
          400: '#f6ad55',
          500: '#ed8936',
          600: '#dd6b20',
          700: '#c05621',
          800: '#9c4221',
          900: '#7b341e',
        },
        yellow: {
          100: '#fffff0',
          200: '#fefcbf',
          300: '#faf089',
          400: '#f6e05e',
          500: '#ecc94b',
          600: '#d69e2e',
          700: '#b7791f',
          800: '#975a16',
          900: '#744210',
        },
        green: {
          100: '#f0fff4',
          200: '#c6f6d5',
          300: '#9ae6b4',
          400: '#68d391',
          500: '#48bb78',
          600: '#38a169',
          700: '#2f855a',
          800: '#276749',
          900: '#22543d',
        },
        teal: {
          100: '#e6fffa',
          200: '#b2f5ea',
          300: '#81e6d9',
          400: '#4fd1c5',
          500: '#38b2ac',
          600: '#319795',
          700: '#2c7a7b',
          800: '#285e61',
          900: '#234e52',
        },
        blue: {
          100: '#e5f3ff',
          200: '#cce7ff',
          300: '#99d0ff',
          400: '#66b8ff',
          500: '#33a1ff',
          600: '#2490ef',
          700: '#006ecc',
          800: '#005299',
          900: '#003766',
        },
        indigo: {
          100: '#ebf4ff',
          200: '#c3dafe',
          300: '#a3bffa',
          400: '#7f9cf5',
          500: '#667eea',
          600: '#5a67d8',
          700: '#4c51bf',
          800: '#434190',
          900: '#3c366b',
        },
        purple: {
          100: '#faf5ff',
          200: '#e9d8fd',
          300: '#d6bcfa',
          400: '#b794f4',
          500: '#9f7aea',
          600: '#805ad5',
          700: '#6b46c1',
          800: '#553c9a',
          900: '#44337a',
        },
        pink: {
          100: '#fdf7f8',
          200: '#fbeef1',
          300: '#f7dee5',
          400: '#eec3d2',
          500: '#df9eb8',
          600: '#cf82a7',
          700: '#ac688b',
          800: '#8f5b79',
          900: '#70485f',
        },
      },
    },
  },
  variants: {
    margin: ['responsive', 'first', 'last', 'hover', 'focus'],
    backgroundColor: ['responsive', 'first', 'hover', 'focus', 'focus-within'],
    display: ['group-hover'],
  },
  plugins: [require('tailwindcss-rtl')],
};

/*
 * 208, 100, 50
 * 209,  62, 50
 */
feat: New Frappe Accounting Design - Add tailwindcss - Implement Sidebar 2019-10-03 13:46:12 +00:00			`module.exports = {`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`purge: false,`
feat: New Frappe Accounting Design - Add tailwindcss - Implement Sidebar 2019-10-03 13:46:12 +00:00			`theme: {`
feat: Add Inter font 2019-10-04 17:55:28 +00:00			`fontFamily: {`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`sans: ['Inter', 'sans-serif'],`
fix: Customize tailwind theme - Expose tailwind theme config in theme.js 2019-11-19 17:34:45 +00:00			`},`
chore: bump tailwind to 2, postcss 7 compat mode 2021-11-02 12:30:45 +00:00			`screens: {`
			`sm: '640px',`
			`md: '768px',`
			`lg: '1024px',`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`xl: '1280px',`
chore: bump tailwind to 2, postcss 7 compat mode 2021-11-02 12:30:45 +00:00			`},`
fix: Customize tailwind theme - Expose tailwind theme config in theme.js 2019-11-19 17:34:45 +00:00			`fontSize: {`
			`xs: '11px',`
			`sm: '12px',`
			`base: '13px',`
			`lg: '14px',`
			`xl: '18px',`
			`'2xl': '20px',`
			`'3xl': '24px',`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`'4xl': '28px',`
feat: Add Inter font 2019-10-04 17:55:28 +00:00			`},`
fix: QuickEditForm - Create a new document - Rename a document - Auto save document on value change 2019-10-05 21:41:16 +00:00			`extend: {`
feat: Link field with create new doc 2019-10-06 12:33:21 +00:00			`maxHeight: {`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`64: '16rem',`
feat: Link field with create new doc 2019-10-06 12:33:21 +00:00			`},`
feat: InvoiceForm - SalesInvoice List with badges in Status column - QuickEdit view in InvoiceForm and ListView - Native Date control for now - Wrap Quick Edit and Invoice Form in keep-alive 2019-10-11 09:55:50 +00:00			`minWidth: {`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`40: '10rem',`
			`56: '14rem',`
feat: InvoiceForm - SalesInvoice List with badges in Status column - QuickEdit view in InvoiceForm and ListView - Native Date control for now - Wrap Quick Edit and Invoice Form in keep-alive 2019-10-11 09:55:50 +00:00			`},`
feat: Add Make Payment button - Generic Dropdown component 2019-10-29 19:33:26 +00:00			`maxWidth: {`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`32: '8rem',`
			`56: '14rem',`
feat: Add Make Payment button - Generic Dropdown component 2019-10-29 19:33:26 +00:00			`},`
fix: QuickEditForm - Create a new document - Rename a document - Auto save document on value change 2019-10-05 21:41:16 +00:00			`spacing: {`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`7: '1.75rem',`
			`14: '3.5rem',`
			`18: '4.5rem',`
			`28: '7rem',`
			`72: '18rem',`
			`80: '20rem',`
fix: QuickEditForm - Create a new document - Rename a document - Auto save document on value change 2019-10-05 21:41:16 +00:00			`},`
			`boxShadow: {`
fix: Customize tailwind theme - Expose tailwind theme config in theme.js 2019-11-19 17:34:45 +00:00			`'outline-px': '0 0 0 1px rgba(66, 153, 225, 0.5)',`
chore: bump tailwind to 2, postcss 7 compat mode 2021-11-02 12:30:45 +00:00			`DEFAULT: '0 2px 4px 0 rgba(0, 0, 0, 0.05)',`
fix: Customize tailwind theme - Expose tailwind theme config in theme.js 2019-11-19 17:34:45 +00:00			`md: '0 0 2px 0 rgba(0, 0, 0, 0.10), 0 2px 4px 0 rgba(0, 0, 0, 0.08)',`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`button: '0 0.5px 0 0 rgba(0, 0, 0, 0.08)',`
feat: Misc - Table control - FormControl (size=small) - DatabaseSelector - SetupWizard - Tax Quick Edit - AutoComplete - Link extends from AutoComplete 2019-10-13 12:03:01 +00:00			`},`
			`borderRadius: {`
fix: Standardise rounded scale 2019-12-11 09:38:20 +00:00			`sm: '0.25rem', // 4px`
chore: bump tailwind to 2, postcss 7 compat mode 2021-11-02 12:30:45 +00:00			`DEFAULT: '0.313rem', // 5px`
fix: Standardise rounded scale 2019-12-11 09:38:20 +00:00			`md: '0.375rem', // 6px`
			`lg: '0.5rem', // 8px`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`xl: '0.75rem', // 12px`
feat: Misc - Table control - FormControl (size=small) - DatabaseSelector - SetupWizard - Tax Quick Edit - AutoComplete - Link extends from AutoComplete 2019-10-13 12:03:01 +00:00			`},`
fix(ui): use inline validations 2022-01-10 08:17:23 +00:00			`gridColumn: {`
			`'span-full': '1 / -1',`
			`},`
fix: Use grays from palette 2019-10-22 19:07:46 +00:00			`colors: {`
incr: remove min restrictions - minor color update - increase dashboard colors by 100 2022-06-10 07:45:56 +00:00			`black: '#1E293B',`
fix: Use grays from palette 2019-10-22 19:07:46 +00:00			`gray: {`
incr: update colors 2022-06-09 12:27:11 +00:00			`25: '#fcfcfd',`
incr(ui): change grays - more linear interpolation and slate 2022-06-09 11:22:16 +00:00			`50: '#f8f9fc',`
			`100: '#f2f4f8',`
			`200: '#ebeff5',`
			`300: '#e2e8f0',`
			`400: '#cad5e2',`
			`500: '#9aa8bc',`
			`600: '#8493a9',`
			`700: '#64748b',`
			`800: '#475569',`
			`900: '#334155',`
chore: bump tailwind to 2, postcss 7 compat mode 2021-11-02 12:30:45 +00:00			`},`
			`red: {`
			`100: '#fff5f5',`
			`200: '#fed7d7',`
			`300: '#feb2b2',`
			`400: '#fc8181',`
			`500: '#f56565',`
			`600: '#e53e3e',`
			`700: '#c53030',`
			`800: '#9b2c2c',`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`900: '#742a2a',`
chore: bump tailwind to 2, postcss 7 compat mode 2021-11-02 12:30:45 +00:00			`},`
			`orange: {`
			`100: '#fffaf0',`
			`200: '#feebc8',`
			`300: '#fbd38d',`
			`400: '#f6ad55',`
			`500: '#ed8936',`
			`600: '#dd6b20',`
			`700: '#c05621',`
			`800: '#9c4221',`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`900: '#7b341e',`
chore: bump tailwind to 2, postcss 7 compat mode 2021-11-02 12:30:45 +00:00			`},`
			`yellow: {`
			`100: '#fffff0',`
			`200: '#fefcbf',`
			`300: '#faf089',`
			`400: '#f6e05e',`
			`500: '#ecc94b',`
			`600: '#d69e2e',`
			`700: '#b7791f',`
			`800: '#975a16',`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`900: '#744210',`
chore: bump tailwind to 2, postcss 7 compat mode 2021-11-02 12:30:45 +00:00			`},`
			`green: {`
			`100: '#f0fff4',`
			`200: '#c6f6d5',`
			`300: '#9ae6b4',`
			`400: '#68d391',`
			`500: '#48bb78',`
			`600: '#38a169',`
			`700: '#2f855a',`
			`800: '#276749',`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`900: '#22543d',`
chore: bump tailwind to 2, postcss 7 compat mode 2021-11-02 12:30:45 +00:00			`},`
			`teal: {`
			`100: '#e6fffa',`
			`200: '#b2f5ea',`
			`300: '#81e6d9',`
			`400: '#4fd1c5',`
			`500: '#38b2ac',`
			`600: '#319795',`
			`700: '#2c7a7b',`
			`800: '#285e61',`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`900: '#234e52',`
chore: bump tailwind to 2, postcss 7 compat mode 2021-11-02 12:30:45 +00:00			`},`
			`blue: {`
chore: switch blues - increased saturation - fixed hue, vary only lightness - 600 is Frappe blue 2022-03-01 08:47:20 +00:00			`100: '#e5f3ff',`
			`200: '#cce7ff',`
			`300: '#99d0ff',`
			`400: '#66b8ff',`
			`500: '#33a1ff',`
incr: remove min restrictions - minor color update - increase dashboard colors by 100 2022-06-10 07:45:56 +00:00			`600: '#2490ef',`
chore: switch blues - increased saturation - fixed hue, vary only lightness - 600 is Frappe blue 2022-03-01 08:47:20 +00:00			`700: '#006ecc',`
			`800: '#005299',`
			`900: '#003766',`
chore: bump tailwind to 2, postcss 7 compat mode 2021-11-02 12:30:45 +00:00			`},`
			`indigo: {`
			`100: '#ebf4ff',`
			`200: '#c3dafe',`
			`300: '#a3bffa',`
			`400: '#7f9cf5',`
			`500: '#667eea',`
			`600: '#5a67d8',`
			`700: '#4c51bf',`
			`800: '#434190',`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`900: '#3c366b',`
chore: bump tailwind to 2, postcss 7 compat mode 2021-11-02 12:30:45 +00:00			`},`
			`purple: {`
			`100: '#faf5ff',`
			`200: '#e9d8fd',`
			`300: '#d6bcfa',`
			`400: '#b794f4',`
			`500: '#9f7aea',`
			`600: '#805ad5',`
			`700: '#6b46c1',`
			`800: '#553c9a',`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`900: '#44337a',`
chore: bump tailwind to 2, postcss 7 compat mode 2021-11-02 12:30:45 +00:00			`},`
			`pink: {`
incr(ui): change grays - more linear interpolation and slate 2022-06-09 11:22:16 +00:00			`100: '#fdf7f8',`
			`200: '#fbeef1',`
			`300: '#f7dee5',`
			`400: '#eec3d2',`
			`500: '#df9eb8',`
			`600: '#cf82a7',`
			`700: '#ac688b',`
			`800: '#8f5b79',`
			`900: '#70485f',`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`},`
			`},`
			`},`
feat: New Frappe Accounting Design - Add tailwindcss - Implement Sidebar 2019-10-03 13:46:12 +00:00			`},`
			`variants: {`
fix: Standardise rounded scale 2019-12-11 09:38:20 +00:00			`margin: ['responsive', 'first', 'last', 'hover', 'focus'],`
feat: Create accounts in CoA directly - Common error handling method for documents - Add group hover in tailwind 2019-12-23 10:37:30 +00:00			`backgroundColor: ['responsive', 'first', 'hover', 'focus', 'focus-within'],`
build(tailwind): don't purge, messes up css 2021-12-07 07:48:57 +00:00			`display: ['group-hover'],`
feat: New Frappe Accounting Design - Add tailwindcss - Implement Sidebar 2019-10-03 13:46:12 +00:00			`},`
use tailwindcss-rtl package 2023-01-07 10:25:08 +00:00			`plugins: [require('tailwindcss-rtl')],`
fix: QuickEditForm - Create a new document - Rename a document - Auto save document on value change 2019-10-05 21:41:16 +00:00			`};`
chore: switch blues - increased saturation - fixed hue, vary only lightness - 600 is Frappe blue 2022-03-01 08:47:20 +00:00
			`/*`
			`* 208, 100, 50`
			`* 209, 62, 50`
			`*/`