1db5e2dc56
Instrument Serif is inherently condensed and illegible at heading sizes. Playfair Display is wider, has proper variable weight support (400-900), and reads well at all sizes.
208 lines
7.7 KiB
TypeScript
208 lines
7.7 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
import tailwindcssAnimate from "tailwindcss-animate";
|
|
import typography from "@tailwindcss/typography";
|
|
import defaultTheme from "tailwindcss/defaultTheme";
|
|
|
|
export default {
|
|
darkMode: "class",
|
|
content: ["./src/**/*.{ts,tsx}"],
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: "2rem",
|
|
screens: {
|
|
"2xl": "1400px",
|
|
},
|
|
},
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ["Geist Sans", ...defaultTheme.fontFamily.sans],
|
|
mono: ["Geist Mono", ...defaultTheme.fontFamily.mono],
|
|
display: ['"Playfair Display"', "Georgia", "serif"],
|
|
},
|
|
colors: {
|
|
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))",
|
|
},
|
|
indigo: {
|
|
50: "hsl(var(--indigo-50))",
|
|
100: "hsl(var(--indigo-100))",
|
|
200: "hsl(var(--indigo-200))",
|
|
300: "hsl(var(--indigo-300))",
|
|
400: "hsl(var(--indigo-400))",
|
|
500: "hsl(var(--indigo-500))",
|
|
600: "hsl(var(--indigo-600))",
|
|
700: "hsl(var(--indigo-700))",
|
|
800: "hsl(var(--indigo-800))",
|
|
900: "hsl(var(--indigo-900))",
|
|
},
|
|
status: {
|
|
"active-bg": "hsl(var(--status-active-bg))",
|
|
"active-fg": "hsl(var(--status-active-fg))",
|
|
"active-border": "hsl(var(--status-active-border))",
|
|
"active-dot": "hsl(var(--status-active-dot))",
|
|
"success-bg": "hsl(var(--status-success-bg))",
|
|
"success-fg": "hsl(var(--status-success-fg))",
|
|
"success-border": "hsl(var(--status-success-border))",
|
|
"success-dot": "hsl(var(--status-success-dot))",
|
|
"warning-bg": "hsl(var(--status-warning-bg))",
|
|
"warning-fg": "hsl(var(--status-warning-fg))",
|
|
"warning-border": "hsl(var(--status-warning-border))",
|
|
"warning-dot": "hsl(var(--status-warning-dot))",
|
|
"error-bg": "hsl(var(--status-error-bg))",
|
|
"error-fg": "hsl(var(--status-error-fg))",
|
|
"error-border": "hsl(var(--status-error-border))",
|
|
"error-dot": "hsl(var(--status-error-dot))",
|
|
"neutral-bg": "hsl(var(--status-neutral-bg))",
|
|
"neutral-fg": "hsl(var(--status-neutral-fg))",
|
|
"neutral-border": "hsl(var(--status-neutral-border))",
|
|
"neutral-dot": "hsl(var(--status-neutral-dot))",
|
|
"urgent-bg": "hsl(var(--status-urgent-bg))",
|
|
"urgent-fg": "hsl(var(--status-urgent-fg))",
|
|
"urgent-border": "hsl(var(--status-urgent-border))",
|
|
"urgent-dot": "hsl(var(--status-urgent-dot))",
|
|
},
|
|
terminal: {
|
|
DEFAULT: "hsl(var(--terminal-bg))",
|
|
fg: "hsl(var(--terminal-fg))",
|
|
muted: "hsl(var(--terminal-muted))",
|
|
border: "hsl(var(--terminal-border))",
|
|
system: "hsl(var(--terminal-system))",
|
|
tool: "hsl(var(--terminal-tool))",
|
|
result: "hsl(var(--terminal-result))",
|
|
error: "hsl(var(--terminal-error))",
|
|
cursor: "hsl(var(--terminal-cursor))",
|
|
link: "hsl(var(--terminal-link))",
|
|
warning: "hsl(var(--terminal-warning))",
|
|
"line-number": "hsl(var(--terminal-line-number))",
|
|
},
|
|
diff: {
|
|
"add-bg": "hsl(var(--diff-add-bg))",
|
|
"add-fg": "hsl(var(--diff-add-fg))",
|
|
"add-border": "hsl(var(--diff-add-border))",
|
|
"remove-bg": "hsl(var(--diff-remove-bg))",
|
|
"remove-fg": "hsl(var(--diff-remove-fg))",
|
|
"remove-border":"hsl(var(--diff-remove-border))",
|
|
"hunk-bg": "hsl(var(--diff-hunk-bg))",
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: "var(--radius)",
|
|
md: "calc(var(--radius) - 2px)",
|
|
sm: "calc(var(--radius) - 4px)",
|
|
},
|
|
boxShadow: {
|
|
xs: "var(--shadow-xs)",
|
|
sm: "var(--shadow-sm)",
|
|
md: "var(--shadow-md)",
|
|
lg: "var(--shadow-lg)",
|
|
xl: "var(--shadow-xl)",
|
|
},
|
|
transitionDuration: {
|
|
instant: "var(--duration-instant)",
|
|
fast: "var(--duration-fast)",
|
|
normal: "var(--duration-normal)",
|
|
slow: "var(--duration-slow)",
|
|
},
|
|
transitionTimingFunction: {
|
|
default: "var(--ease-default)",
|
|
in: "var(--ease-in)",
|
|
out: "var(--ease-out)",
|
|
spring: "var(--ease-spring)",
|
|
},
|
|
zIndex: {
|
|
base: "var(--z-base)",
|
|
raised: "var(--z-raised)",
|
|
sticky: "var(--z-sticky)",
|
|
sidebar: "var(--z-sidebar)",
|
|
dropdown: "var(--z-dropdown)",
|
|
overlay: "var(--z-overlay)",
|
|
modal: "var(--z-modal)",
|
|
toast: "var(--z-toast)",
|
|
command: "var(--z-command)",
|
|
tooltip: "var(--z-tooltip)",
|
|
},
|
|
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" },
|
|
},
|
|
"status-pulse": {
|
|
"0%, 100%": { opacity: "1" },
|
|
"50%": { opacity: "0.4" },
|
|
},
|
|
shimmer: {
|
|
"0%": { backgroundPosition: "-200% 0" },
|
|
"100%": { backgroundPosition: "200% 0" },
|
|
},
|
|
"glow-pulse": {
|
|
"0%, 100%": { boxShadow: "0 0 4px var(--glow-color, hsl(239 84% 67% / 0.3))" },
|
|
"50%": { boxShadow: "0 0 12px var(--glow-color, hsl(239 84% 67% / 0.5))" },
|
|
},
|
|
"fade-in-up": {
|
|
"0%": { opacity: "0", transform: "translateY(8px)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
"fade-in": {
|
|
"0%": { opacity: "0" },
|
|
"100%": { opacity: "1" },
|
|
},
|
|
"scale-in": {
|
|
"0%": { opacity: "0", transform: "scale(0.95)" },
|
|
"100%": { opacity: "1", transform: "scale(1)" },
|
|
},
|
|
"slide-in-right": {
|
|
"0%": { opacity: "0", transform: "translateX(16px)" },
|
|
"100%": { opacity: "1", transform: "translateX(0)" },
|
|
},
|
|
},
|
|
animation: {
|
|
"accordion-down": "accordion-down 0.2s ease-out",
|
|
"accordion-up": "accordion-up 0.2s ease-out",
|
|
"status-pulse": "status-pulse 2s ease-in-out infinite",
|
|
shimmer: "shimmer 1.5s infinite",
|
|
"glow-pulse": "glow-pulse 2s ease-in-out infinite",
|
|
"fade-in-up": "fade-in-up 0.4s var(--ease-out) forwards",
|
|
"fade-in": "fade-in 0.3s var(--ease-out) forwards",
|
|
"scale-in": "scale-in 0.3s var(--ease-out) forwards",
|
|
"slide-in-right": "slide-in-right 0.3s var(--ease-out) forwards",
|
|
},
|
|
},
|
|
},
|
|
plugins: [tailwindcssAnimate, typography],
|
|
} satisfies Config;
|