fix: tailwind config types

This commit is contained in:
Eli Bosley
2024-05-16 10:04:13 -04:00
committed by Zack Spear
parent e0c90037fb
commit 487f5c1865

View File

@@ -1,203 +1,201 @@
import type { Config } from 'tailwindcss';
/** @type {import('tailwindcss').Config} */
import type { Config } from "tailwindcss";
import type { PluginAPI } from "tailwindcss/types/config";
export default <Partial<Config>>{
safelist: [
'DropdownWrapper_blip',
'unraid_mark_1',
'unraid_mark_2',
'unraid_mark_3',
'unraid_mark_4',
'unraid_mark_6',
'unraid_mark_7',
'unraid_mark_8',
'unraid_mark_9',
"DropdownWrapper_blip",
"unraid_mark_1",
"unraid_mark_2",
"unraid_mark_3",
"unraid_mark_4",
"unraid_mark_6",
"unraid_mark_7",
"unraid_mark_8",
"unraid_mark_9",
],
theme: {
extend: {
fontFamily: {
'sans': 'clear-sans,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji',
sans: "clear-sans,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji",
},
colors: {
inherit: 'inherit',
transparent: 'transparent',
inherit: "inherit",
transparent: "transparent",
black: '#1c1b1b',
'grey-darkest': '#222',
'grey-darker': '#606f7b',
'grey-dark': '#383735',
'grey-mid': '#999999',
grey: '#e0e0e0',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
'grey-lightest': '#f2f2f2',
white: '#ffffff',
black: "#1c1b1b",
"grey-darkest": "#222",
"grey-darker": "#606f7b",
"grey-dark": "#383735",
"grey-mid": "#999999",
grey: "#e0e0e0",
"grey-light": "#dae1e7",
"grey-lighter": "#f1f5f8",
"grey-lightest": "#f2f2f2",
white: "#ffffff",
'orange-dark': '#f15a2c',
orange: '#ff8c2f',
'unraid-red': '#E22828',
"orange-dark": "#f15a2c",
orange: "#ff8c2f",
"unraid-red": "#E22828",
alpha: 'var(--color-alpha)',
beta: 'var(--color-beta)',
gamma: 'var(--color-gamma)',
'gamma-opaque': 'var(--color-gamma-opaque)',
alpha: "var(--color-alpha)",
beta: "var(--color-beta)",
gamma: "var(--color-gamma)",
"gamma-opaque": "var(--color-gamma-opaque)",
},
// Unfortunately due to webGUI CSS setting base HTML font-size to .65% or something we must use pixel values for web components
fontSize: {
'10px': '10px',
'12px': '12px',
'14px': '14px',
'16px': '16px',
'18px': '18px',
'20px': '20px',
'24px': '24px',
'30px': '30px',
"10px": "10px",
"12px": "12px",
"14px": "14px",
"16px": "16px",
"18px": "18px",
"20px": "20px",
"24px": "24px",
"30px": "30px",
},
spacing: {
'-8px': '-8px',
'2px': '2px',
'4px': '4px',
'6px': '6px',
'8px': '8px',
'10px': '10px',
'12px': '12px',
'14px': '14px',
'16px': '16px',
'20px': '20px',
'24px': '24px',
'28px': '28px',
'32px': '32px',
'36px': '36px',
'40px': '40px',
'64px': '64px',
'80px': '80px',
'90px': '90px',
'150px': '150px',
'160px': '160px',
'200px': '200px',
'260px': '260px',
'300px': '300px',
'310px': '310px',
'350px': '350px',
'448px': '448px',
'512px': '512px',
'640px': '640px',
'800px': '800px',
"-8px": "-8px",
"2px": "2px",
"4px": "4px",
"6px": "6px",
"8px": "8px",
"10px": "10px",
"12px": "12px",
"14px": "14px",
"16px": "16px",
"20px": "20px",
"24px": "24px",
"28px": "28px",
"32px": "32px",
"36px": "36px",
"40px": "40px",
"64px": "64px",
"80px": "80px",
"90px": "90px",
"150px": "150px",
"160px": "160px",
"200px": "200px",
"260px": "260px",
"300px": "300px",
"310px": "310px",
"350px": "350px",
"448px": "448px",
"512px": "512px",
"640px": "640px",
"800px": "800px",
},
minWidth: {
'86px': '86px',
'160px': '160px',
'260px': '260px',
'300px': '300px',
'310px': '310px',
'350px': '350px',
'800px': '800px',
"86px": "86px",
"160px": "160px",
"260px": "260px",
"300px": "300px",
"310px": "310px",
"350px": "350px",
"800px": "800px",
},
maxWidth: {
'86px': '86px',
'160px': '160px',
'260px': '260px',
'300px': '300px',
'310px': '310px',
'350px': '350px',
'640px': '640px',
'800px': '800px',
'1024px': '1024px',
"86px": "86px",
"160px": "160px",
"260px": "260px",
"300px": "300px",
"310px": "310px",
"350px": "350px",
"640px": "640px",
"800px": "800px",
"1024px": "1024px",
},
screens: {
'2xs': '470px',
xs: '530px',
tall: { raw: '(min-height: 700px)' },
"2xs": "470px",
xs: "530px",
tall: { raw: "(min-height: 700px)" },
},
/**
* @todo modify prose classes to use pixels for webgui…sadge https://tailwindcss.com/docs/typography-plugin#customizing-the-default-theme
*/
// @ts-expect-error - because spending too much time here to figure this out would cost a lot of money
typography: theme => ({
typography: (theme: PluginAPI["theme"]) => ({
DEFAULT: {
css: {
color: theme('colors.beta'),
color: theme("colors.beta"),
a: {
color: theme('colors.orange'),
textDecoration: 'underline',
'&:hover': {
color: theme('colors.orange-dark'),
color: theme("colors.orange"),
textDecoration: "underline",
"&:hover": {
color: theme("colors.orange-dark"),
},
},
'--tw-prose-body': theme('colors.beta'),
'--tw-prose-headings': theme('colors.beta'),
'--tw-prose-lead': theme('colors.beta'),
'--tw-prose-links': theme('colors.orange'),
'--tw-prose-bold': theme('colors.beta'),
'--tw-prose-counters': theme('colors.beta'),
'--tw-prose-bullets': theme('colors.beta'),
'--tw-prose-hr': theme('colors.beta'),
'--tw-prose-quotes': theme('colors.beta'),
'--tw-prose-quote-borders': theme('colors.beta'),
'--tw-prose-captions': theme('colors.beta'),
'--tw-prose-code': theme('colors.beta'),
'--tw-prose-pre-code': theme('colors.beta'),
'--tw-prose-pre-bg': theme('colors.alpha'),
'--tw-prose-th-borders': theme('colors.beta'),
'--tw-prose-td-borders': theme('colors.beta'),
'--tw-prose-invert-body': theme('colors.alpha'),
'--tw-prose-invert-headings': theme('colors.alpha'),
'--tw-prose-invert-lead': theme('colors.alpha'),
'--tw-prose-invert-links': theme('colors.orange'),
'--tw-prose-invert-bold': theme('colors.alpha'),
'--tw-prose-invert-counters': theme('colors.alpha'),
'--tw-prose-invert-bullets': theme('colors.alpha'),
'--tw-prose-invert-hr': theme('colors.alpha'),
'--tw-prose-invert-quotes': theme('colors.alpha'),
'--tw-prose-invert-quote-borders': theme('colors.alpha'),
'--tw-prose-invert-captions': theme('colors.alpha'),
'--tw-prose-invert-code': theme('colors.alpha'),
'--tw-prose-invert-code-bg': theme('colors.gamma-opaque'),
'--tw-prose-invert-pre-code': theme('colors.alpha'),
'--tw-prose-invert-pre-bg': theme('colors.beta'),
'--tw-prose-invert-th-borders': theme('colors.alpha'),
'--tw-prose-invert-td-borders': theme('colors.alpha'),
"--tw-prose-body": theme("colors.beta"),
"--tw-prose-headings": theme("colors.beta"),
"--tw-prose-lead": theme("colors.beta"),
"--tw-prose-links": theme("colors.orange"),
"--tw-prose-bold": theme("colors.beta"),
"--tw-prose-counters": theme("colors.beta"),
"--tw-prose-bullets": theme("colors.beta"),
"--tw-prose-hr": theme("colors.beta"),
"--tw-prose-quotes": theme("colors.beta"),
"--tw-prose-quote-borders": theme("colors.beta"),
"--tw-prose-captions": theme("colors.beta"),
"--tw-prose-code": theme("colors.beta"),
"--tw-prose-pre-code": theme("colors.beta"),
"--tw-prose-pre-bg": theme("colors.alpha"),
"--tw-prose-th-borders": theme("colors.beta"),
"--tw-prose-td-borders": theme("colors.beta"),
"--tw-prose-invert-body": theme("colors.alpha"),
"--tw-prose-invert-headings": theme("colors.alpha"),
"--tw-prose-invert-lead": theme("colors.alpha"),
"--tw-prose-invert-links": theme("colors.orange"),
"--tw-prose-invert-bold": theme("colors.alpha"),
"--tw-prose-invert-counters": theme("colors.alpha"),
"--tw-prose-invert-bullets": theme("colors.alpha"),
"--tw-prose-invert-hr": theme("colors.alpha"),
"--tw-prose-invert-quotes": theme("colors.alpha"),
"--tw-prose-invert-quote-borders": theme("colors.alpha"),
"--tw-prose-invert-captions": theme("colors.alpha"),
"--tw-prose-invert-code": theme("colors.alpha"),
"--tw-prose-invert-code-bg": theme("colors.gamma-opaque"),
"--tw-prose-invert-pre-code": theme("colors.alpha"),
"--tw-prose-invert-pre-bg": theme("colors.beta"),
"--tw-prose-invert-th-borders": theme("colors.alpha"),
"--tw-prose-invert-td-borders": theme("colors.alpha"),
},
},
black: {
css: {
'--tw-prose-body': theme('colors.black'),
'--tw-prose-headings': theme('colors.black'),
'--tw-prose-lead': theme('colors.black'),
'--tw-prose-links': theme('colors.black'),
'--tw-prose-bold': theme('colors.black'),
'--tw-prose-counters': theme('colors.black'),
'--tw-prose-bullets': theme('colors.black'),
'--tw-prose-hr': theme('colors.black'),
'--tw-prose-quotes': theme('colors.black'),
'--tw-prose-quote-borders': theme('colors.black'),
'--tw-prose-captions': theme('colors.black'),
'--tw-prose-code': theme('colors.black'),
'--tw-prose-pre-code': theme('colors.black'),
'--tw-prose-pre-bg': theme('colors.black'),
'--tw-prose-th-borders': theme('colors.black'),
'--tw-prose-td-borders': theme('colors.black'),
'--tw-prose-invert-body': theme('colors.grey-darkest'),
'--tw-prose-invert-headings': theme('colors.grey-darkest'),
'--tw-prose-invert-lead': theme('colors.grey-darkest'),
'--tw-prose-invert-links': theme('colors.grey-darkest'),
'--tw-prose-invert-bold': theme('colors.grey-darkest'),
'--tw-prose-invert-counters': theme('colors.grey-darkest'),
'--tw-prose-invert-bullets': theme('colors.grey-darkest'),
'--tw-prose-invert-hr': theme('colors.grey-darkest'),
'--tw-prose-invert-quotes': theme('colors.grey-darkest'),
'--tw-prose-invert-quote-borders': theme('colors.grey-darkest'),
'--tw-prose-invert-captions': theme('colors.grey-darkest'),
'--tw-prose-invert-code': theme('colors.grey-darkest'),
'--tw-prose-invert-pre-code': theme('colors.grey-darkest'),
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
'--tw-prose-invert-th-borders': theme('colors.grey-darkest'),
'--tw-prose-invert-td-borders': theme('colors.grey-darkest'),
"--tw-prose-body": theme("colors.black"),
"--tw-prose-headings": theme("colors.black"),
"--tw-prose-lead": theme("colors.black"),
"--tw-prose-links": theme("colors.black"),
"--tw-prose-bold": theme("colors.black"),
"--tw-prose-counters": theme("colors.black"),
"--tw-prose-bullets": theme("colors.black"),
"--tw-prose-hr": theme("colors.black"),
"--tw-prose-quotes": theme("colors.black"),
"--tw-prose-quote-borders": theme("colors.black"),
"--tw-prose-captions": theme("colors.black"),
"--tw-prose-code": theme("colors.black"),
"--tw-prose-pre-code": theme("colors.black"),
"--tw-prose-pre-bg": theme("colors.black"),
"--tw-prose-th-borders": theme("colors.black"),
"--tw-prose-td-borders": theme("colors.black"),
"--tw-prose-invert-body": theme("colors.grey-darkest"),
"--tw-prose-invert-headings": theme("colors.grey-darkest"),
"--tw-prose-invert-lead": theme("colors.grey-darkest"),
"--tw-prose-invert-links": theme("colors.grey-darkest"),
"--tw-prose-invert-bold": theme("colors.grey-darkest"),
"--tw-prose-invert-counters": theme("colors.grey-darkest"),
"--tw-prose-invert-bullets": theme("colors.grey-darkest"),
"--tw-prose-invert-hr": theme("colors.grey-darkest"),
"--tw-prose-invert-quotes": theme("colors.grey-darkest"),
"--tw-prose-invert-quote-borders": theme("colors.grey-darkest"),
"--tw-prose-invert-captions": theme("colors.grey-darkest"),
"--tw-prose-invert-code": theme("colors.grey-darkest"),
"--tw-prose-invert-pre-code": theme("colors.grey-darkest"),
"--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
"--tw-prose-invert-th-borders": theme("colors.grey-darkest"),
"--tw-prose-invert-td-borders": theme("colors.grey-darkest"),
},
},
}),
}
},
},
plugins: [
require('@tailwindcss/typography'),
],
plugins: [require("@tailwindcss/typography")],
};