Crunchy Data Tailwind config

app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--gray-50: 250 250 250;
	--gray-100: 244 244 245;
	--gray-200: 228 228 231;
	--gray-300: 161 161 170;
	--gray-400: 212 212 216;
	--gray-500: 113 113 122;
	--gray-600: 82 82 91;
	--gray-700: 63 63 70;
	--gray-800: 39 39 42;
	--gray-900: 24 24 27;
	--gray-1000: 6 9 14;
	--gray-1100: 2 2 3;

	--brand: 43 103 240

	/* GLOBAL COLORS */
	--brand: var(--brand);
	--danger: 220 38 38; /** danger-600 **/
	--danger-hover: 185 28 28; /** danger-700 **/
	--info: 2 132 199; /** info-600 **/
	--info-hover: 3 105 161; /** info-700 **/
  --success: 5 150 105; /** success-600 **/
	--success-hover: 4 120 87; /** success-700 **/
  --warning: 245 158 11; /** warning-500 **/
  --warning-hover: 217 119 6; /** warning-600 **/
	/** TEXT COLORS **/
  --text-secondary: var(--gray-500);
	--text-primary: var(--gray-900);
	/** BORDER **/
	--border-default: var(--gray-200);
	/** BACKGROUND COLORS **/
	--bg-base: var(--gray-100);
	--bg-layer-1: 255 255 255;
	--bg-layer-2: var(--gray-50);
	--bg-border: var(--border-default);
	/** RING **/
	--ring-default: var(--brand);
	--ring-ghost: var(--gray-300);
	--font-sans: 'Arimo';
	--font-display: 'Plus Jakarta Sans';
	--font-mono: ui-monospace;

	/** STRIPE VARS **/
  --s-text-primary: rgb(var(--text-primary));
  --s-text-secondary: rgb(var(--text-secondary))
	--s-border-radius: theme('borderRadius.md');
	--s-primary: theme('colors.crunchy.DEFAULT');
	--s-danger: theme('colors.danger.500');
	--s-warning: theme('colors.warning.500');
	--s-success: theme('colors.success.500');
}

.dark {
	/** TEXT COLORS **/
  --text-secondary: var(--gray-400);
	--text-primary: 255 255 255;
	/** BORDER **/
	--border-default: var(--gray-700);
	/** BACKGROUND COLORS **/
	--bg-base: var(--gray-1100);
	--bg-layer-1: var(--gray-1000);
	--bg-layer-2: var(--gray-900);
	--bg-border: var(--border-default);
	/** RING **/
	--ring-ghost: var(--gray-700);

  /** STRIPE VARS **/
  --s-text-primary: rgb(var(--text-primary));
  --s-text-secondary: rgb(var(--text-secondary))
}

tailwind.config.js

const { red, emerald, blue, zinc, amber } = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')

/** @typedef {import('tailwindcss/tailwind-config').TailwindConfig} TailwindConfig */
/** @typedef {import('@utils/type').TailwindColor} TailwindColor */

/**
 * @template T
 * @typedef {T extends TailwindConfig ? T : never} AsTailwindConfig
 */

/**
 * Type helper for our Tailwind config.
 * This returns the type for the config object itself, rather than the generic `TailwindConfig`
 * type.
 * @type {<T>(config: AsTailwindConfig<T>) => T}
 */
const castConfig = config => config

/**
 * Function used to apply opacity modifiers to css variable colors
 * @param {string} variable
 * @returns string
 */
function withOpacityValue(variable) {
	return ({ opacityValue }) => {
		if (opacityValue === undefined) {
			return `rgb(var(${variable}))`
		}
		return `rgb(var(${variable}) / ${opacityValue})`
	}
}

const crunchy = {
	'brighter': '#00D6F1',
	'bright': '#00A7FF',
	'DEFAULT': '#2B67F0',
	'dark-hover': '#092E83',
	'dark': '#07215D',
}

/**
 * @type TailwindColor
 */
const danger = red

/**
 * @type TailwindColor
 */
const info = blue

/**
 * @type TailwindColor
 */
const success = emerald

/**
 * @type TailwindColor
 */
const warning = amber

/**
 * @type TailwindColor
 */
const gray = zinc

const config = castConfig({
	content: [
		'./src/components/**/*.js',
		'./src/components/**/*.jsx',
		'./src/components/**/*.ts',
		'./src/components/**/*.tsx',
		'./src/app/**/*.js',
		'./src/app/**/*.jsx',
		'./src/app/**/*.ts',
		'./src/app/**/*.tsx',
		'./src/client/**/*.tsx',
		'./src/views/**/*.liquid',
		'./src/stylesheets/**/*.css',
	],
	safelist: ['even:bg-gray-50', 'bg-gray-50'],
	darkMode: 'class', // or 'media' or 'class'
	theme: {
		touchAction: {
			none: 'none',
		},
		extend: {
			backgroundColor: {
				base: withOpacityValue('--bg-base'),
				layer: {
					'1': withOpacityValue('--bg-layer-1'),
					'2': withOpacityValue('--bg-layer-2'),
				},
				border: withOpacityValue('--border-default'),
			},
			borderColor: {
				DEFAULT: withOpacityValue('--border-default'),
			},
			borderWidth: {
				'3': '3px',
			},
			colors: {
				gray: {
					...gray,
					'1000': '#06090E',
					'1100': '#020203',
				},
				accent: {
					DEFAULT: '#6BFBCE',
					bright: '#8FFFDB',
					dark: '#4FD1A8',
				},
				crunchy,
				danger: {
					...danger,
					DEFAULT: withOpacityValue('--danger'),
					hover: withOpacityValue('--danger-hover'),
				},
				info: {
					...info,
					DEFAULT: withOpacityValue('--info'),
					hover: withOpacityValue('--info-hover'),
				},
				success: {
					...success,
					DEFAULT: withOpacityValue('--success'),
					hover: withOpacityValue('--success-hover'),
				},
				warning: {
					...warning,
					DEFAULT: withOpacityValue('--warning'),
					hover: withOpacityValue('--warning-hover'),
				},
			},
			ringColor: {
				DEFAULT: withOpacityValue('--ring-default'),
				ghost: withOpacityValue('--ring-ghost'),
				danger: withOpacityValue('--danger'),
			},
			rotate: {
				'20': '20deg',
				'-20': '-20deg',
			},
			fontFamily: {
				display: ['var(--font-display)', ...defaultTheme.fontFamily.sans],
				sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
			},
			textColor: {
				secondary: withOpacityValue('--text-secondary'),
				primary: withOpacityValue('--text-primary'),
			},
			transitionDuration: {
				'0': '0ms',
			},
			transitionProperty: {
				left: 'left',
				width: 'width',
			},
			screens: {
				print: { raw: 'print' },
			},
		},
	},
	plugins: [
		require('@tailwindcss/forms'),
		// Allow access to form styles via CSS classes.
		require('@tailwindcss/forms')({ strategy: 'class' }),
		require('@tailwindcss/typography'),
	],
})

module.exports = config