mirror of
https://github.com/unraid/api.git
synced 2026-01-05 16:09:49 -06:00
275 lines
8.8 KiB
TypeScript
275 lines
8.8 KiB
TypeScript
import "dotenv/config";
|
|
import type { Config } from "tailwindcss";
|
|
import type { PluginAPI } from "tailwindcss/types/config";
|
|
import typography from "@tailwindcss/typography";
|
|
import animate from "tailwindcss-animate";
|
|
import remToRem from "./src/lib/tailwind-rem-to-rem";
|
|
|
|
export default <Partial<Config>>{
|
|
content: ["./src/components/**/*.{js,vue,ts}", "./src/composables/**/*.vue"],
|
|
darkMode: ["selector"],
|
|
safelist: [
|
|
"dark",
|
|
"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: {
|
|
container: {
|
|
center: true,
|
|
padding: "2rem",
|
|
screens: {
|
|
"2xl": "1400px",
|
|
},
|
|
},
|
|
extend: {
|
|
fontFamily: {
|
|
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",
|
|
|
|
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",
|
|
|
|
// unraid colors
|
|
"yellow-accent": "#E9BF41",
|
|
"orange-dark": "#f15a2c",
|
|
orange: "#ff8c2f",
|
|
// palettes generated from https://uicolors.app/create
|
|
"unraid-red": {
|
|
DEFAULT: "#E22828",
|
|
"50": "#fef2f2",
|
|
"100": "#ffe1e1",
|
|
"200": "#ffc9c9",
|
|
"300": "#fea3a3",
|
|
"400": "#fc6d6d",
|
|
"500": "#f43f3f",
|
|
"600": "#e22828",
|
|
"700": "#bd1818",
|
|
"800": "#9c1818",
|
|
"900": "#821a1a",
|
|
"950": "#470808",
|
|
},
|
|
|
|
"unraid-green": {
|
|
DEFAULT: "#63A659",
|
|
"50": "#f5f9f4",
|
|
"100": "#e7f3e5",
|
|
"200": "#d0e6cc",
|
|
"300": "#aad1a4",
|
|
"400": "#7db474",
|
|
"500": "#63a659",
|
|
"600": "#457b3e",
|
|
"700": "#396134",
|
|
"800": "#314e2d",
|
|
"900": "#284126",
|
|
"950": "#122211",
|
|
},
|
|
"header-text-primary": "var(--header-text-primary)",
|
|
"header-text-secondary": "var(--header-text-secondary)",
|
|
"header-background-color": "var(--header-background-color)",
|
|
// ShadCN
|
|
border: "hsl(var(--border))",
|
|
input: "hsl(var(--input))",
|
|
ring: "hsl(var(--ring))",
|
|
background: "hsl(var(--background))",
|
|
foreground: "hsl(var(--foreground))",
|
|
primary: {
|
|
DEFAULT: "hsl(var(--primary))",
|
|
foreground: "hsl(var(--primary-foreground))",
|
|
},
|
|
secondary: {
|
|
DEFAULT: "hsl(var(--secondary))",
|
|
foreground: "hsl(var(--secondary-foreground))",
|
|
},
|
|
destructive: {
|
|
DEFAULT: "hsl(var(--destructive))",
|
|
foreground: "hsl(var(--destructive-foreground))",
|
|
},
|
|
muted: {
|
|
DEFAULT: "hsl(var(--muted))",
|
|
foreground: "hsl(var(--muted-foreground))",
|
|
},
|
|
accent: {
|
|
DEFAULT: "hsl(var(--accent))",
|
|
foreground: "hsl(var(--accent-foreground))",
|
|
},
|
|
popover: {
|
|
DEFAULT: "hsl(var(--popover))",
|
|
foreground: "hsl(var(--popover-foreground))",
|
|
},
|
|
card: {
|
|
DEFAULT: "hsl(var(--card))",
|
|
foreground: "hsl(var(--card-foreground))",
|
|
},
|
|
},
|
|
// 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",
|
|
},
|
|
spacing: {
|
|
"4.5": "1.125rem",
|
|
"-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",
|
|
},
|
|
maxWidth: {
|
|
"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)" },
|
|
},
|
|
keyframes: {
|
|
"accordion-down": {
|
|
from: { height: "0" },
|
|
to: { height: "var(--radix-accordion-content-height)" },
|
|
},
|
|
"accordion-up": {
|
|
from: { height: "var(--radix-accordion-content-height)" },
|
|
to: { height: "0" },
|
|
},
|
|
"collapsible-down": {
|
|
from: { height: "0" },
|
|
to: { height: "var(--radix-collapsible-content-height)" },
|
|
},
|
|
"collapsible-up": {
|
|
from: { height: "var(--radix-collapsible-content-height)" },
|
|
to: { height: "0" },
|
|
},
|
|
},
|
|
animation: {
|
|
"accordion-down": "accordion-down 0.2s ease-out",
|
|
"accordion-up": "accordion-up 0.2s ease-out",
|
|
"collapsible-down": "collapsible-down 0.2s ease-in-out",
|
|
"collapsible-up": "collapsible-up 0.2s ease-in-out",
|
|
},
|
|
/**
|
|
* @todo modify prose classes to use pixels for webgui…sadge https://tailwindcss.com/docs/typography-plugin#customizing-the-default-theme
|
|
*/
|
|
|
|
typography: (theme: PluginAPI["theme"]) => ({
|
|
DEFAULT: {
|
|
css: {
|
|
color: theme("colors.foreground"),
|
|
a: {
|
|
color: theme("colors.primary"),
|
|
textDecoration: "underline",
|
|
"&:hover": {
|
|
color: theme("colors.primary-foreground"),
|
|
},
|
|
},
|
|
"--tw-prose-body": theme("colors.foreground"),
|
|
"--tw-prose-headings": theme("colors.foreground"),
|
|
"--tw-prose-lead": theme("colors.foreground"),
|
|
"--tw-prose-links": theme("colors.primary"),
|
|
"--tw-prose-bold": theme("colors.foreground"),
|
|
"--tw-prose-counters": theme("colors.foreground"),
|
|
"--tw-prose-bullets": theme("colors.foreground"),
|
|
"--tw-prose-hr": theme("colors.foreground"),
|
|
"--tw-prose-quotes": theme("colors.foreground"),
|
|
"--tw-prose-quote-borders": theme("colors.foreground"),
|
|
"--tw-prose-captions": theme("colors.foreground"),
|
|
"--tw-prose-code": theme("colors.foreground"),
|
|
"--tw-prose-pre-code": theme("colors.foreground"),
|
|
"--tw-prose-pre-bg": theme("colors.background"),
|
|
"--tw-prose-th-borders": theme("colors.foreground"),
|
|
"--tw-prose-td-borders": theme("colors.foreground"),
|
|
"--tw-prose-invert-body": theme("colors.background"),
|
|
"--tw-prose-invert-headings": theme("colors.background"),
|
|
"--tw-prose-invert-lead": theme("colors.background"),
|
|
"--tw-prose-invert-links": theme("colors.primary"),
|
|
"--tw-prose-invert-bold": theme("colors.background"),
|
|
"--tw-prose-invert-counters": theme("colors.background"),
|
|
"--tw-prose-invert-bullets": theme("colors.background"),
|
|
"--tw-prose-invert-hr": theme("colors.background"),
|
|
"--tw-prose-invert-quotes": theme("colors.background"),
|
|
"--tw-prose-invert-quote-borders": theme("colors.background"),
|
|
"--tw-prose-invert-captions": theme("colors.background"),
|
|
"--tw-prose-invert-code": theme("colors.background"),
|
|
"--tw-prose-invert-pre-code": theme("colors.background"),
|
|
"--tw-prose-invert-pre-bg": theme("colors.foreground"),
|
|
"--tw-prose-invert-th-borders": theme("colors.background"),
|
|
"--tw-prose-invert-td-borders": theme("colors.background"),
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
plugins: [
|
|
typography,
|
|
animate,
|
|
remToRem({
|
|
baseFontSize: 16,
|
|
newFontSize: Number(process.env.VITE_TAILWIND_BASE_FONT_SIZE) || 10,
|
|
}),
|
|
],
|
|
};
|