/* eslint-disable @typescript-eslint/no-require-imports */
const colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
	theme: {
		fontFamily: {
			sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji'],
		},
		extend: {
			colors: {
				// primary color used by the projet, easily swappable
				'primary': colors.amber,
				'gtk-neutral': { // https://blog.gtk.org/files/2019/01/color-palette.png
					100: '#F6F5F4',
					200: '#DEDDDA',
					300: '#C0BFBC',
					400: '#9A9996',
					500: '#77767B',
					600: '#5E5C64',
					700: '#3D3846',
					800: '#241F31',
				},
				'gtk-blue': {
					100: '#99C1F1',
					200: '#62A0EA',
					300: '#3584E4',
					400: '#1C71D8',
					500: '#1C71D8',
				},
				'gtk-green': {
					100: '#8FF0A4',
					200: '#57E389',
					300: '#57E389',
					400: '#2EC27E',
					500: '#26A269',
				},
				'gtk-yellow': {
					100: '#F9F06B',
					200: '#F8E45C',
					300: '#F6D32D',
					400: '#F5C211',
					500: '#E5A50A',
				},
				'gtk-orange': {
					100: '#99C1F1',
					200: '#62A0EA',
					300: '#3584E4',
					400: '#1C71D8',
					500: '#1C71D8',
				},
				'gtk-red': {
					100: '#99C1F1',
					200: '#62A0EA',
					300: '#3584E4',
					400: '#1C71D8',
					500: '#1C71D8',
				},
				'gtk-purple': {
					100: '#99C1F1',
					200: '#62A0EA',
					300: '#3584E4',
					400: '#1C71D8',
					500: '#1C71D8',
				},
				'gtk-brown': {
					100: '#99C1F1',
					200: '#62A0EA',
					300: '#3584E4',
					400: '#1C71D8',
					500: '#1C71D8',
				},
			},
			container: {
				// default the container to center the content
				center: true,
				padding: {
					// add a default padding to the container
					DEFAULT: '1rem'
				}
			},
		},
	}
}