Files
docs-app/tailwind.config.js
2026-04-01 09:38:50 +02:00

102 lines
3.6 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
const { blobBg } = require("./src/utils/backgrounds/svgs");
module.exports = {
darkMode: "class",
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./src/styles/**/*.css",
],
theme: {
extend: {
height: {
18: "72px",
},
text: {
"2xs": "10px",
},
backgroundImage: {
"blob-bg": blobBg,
},
colors: {
// Brand colors
"brand-primary": "var(--brand-primary)",
"brand-primary-hover": "var(--brand-primary-hover)",
"brand-primary-light": "var(--brand-primary-light)",
"brand-primary-text": "var(--brand-primary-text)",
"brand-primary-contrast": "var(--brand-primary-contrast)",
"brand-secondary": "var(--brand-secondary)",
"brand-secondary-hover": "var(--brand-secondary-hover)",
"brand-secondary-light": "var(--brand-secondary-light)",
"brand-secondary-text": "var(--brand-secondary-text)",
"brand-secondary-contrast": "var(--brand-secondary-contrast)",
"brand-secondary-gradient-start":
"var(--brand-secondary-gradient-start)",
"brand-secondary-gradient-end": "var(--brand-secondary-gradient-end)",
"brand-tertiary": "var(--brand-tertiary)",
"brand-tertiary-hover": "var(--brand-tertiary-hover)",
"brand-tertiary-light": "var(--brand-tertiary-light)",
"brand-tertiary-text": "var(--brand-tertiary-text)",
"brand-tertiary-contrast": "var(--brand-tertiary-contrast)",
"brand-tertiary-gradient-start": "var(--brand-tertiary-gradient-start)",
"brand-tertiary-gradient-end": "var(--brand-tertiary-gradient-end)",
// Background gradients and glass
"glass-gradient-start": "var(--glass-gradient-start)",
"glass-gradient-end": "var(--glass-gradient-end)",
"background-color": "var(--background-color)",
"glass-hover-gradient-start": "var(--glass-hover-gradient-start)",
"glass-hover-gradient-end": "var(--glass-hover-gradient-end)",
// Neutral system
"neutral-background": "var(--neutral-background)",
"neutral-surface": "var(--neutral-surface)",
"neutral-background-secondary": "var(--neutral-background-secondary)",
"neutral-background-tertiary": "var(--neutral-background-tertiary)",
"neutral-background-quaternary": "var(--neutral-background-quaternary)",
"neutral-background-quinary": "var(--neutral-background-quinary)",
"neutral-text": "var(--neutral-text)",
"neutral-text-secondary": "var(--neutral-text-secondary)",
"neutral-border": "var(--neutral-border)",
"neutral-border-subtle": "var(--neutral-border-subtle)",
// Code Block Background
"background-brand-code": "var(--background-brand-code)",
},
},
fontFamily: {
heading: ["var(--heading-font)", ...defaultTheme.fontFamily.serif],
body: ["var(--body-font)", ...defaultTheme.fontFamily.sans],
mono: [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
"Liberation Mono",
"Courier New",
"monospace",
],
},
},
plugins: [
({ addUtilities }) => {
addUtilities({
".brand-glass-hover-gradient": {
"background-image":
"linear-gradient(to bottom right, var(--glass-gradient-hover-start), var(--glass-gradient-hover-end))",
},
".grid-cols-docs-layout": {
"grid-template-columns": "1fr 256px",
},
});
},
],
};