Developers Digest
406 lines
10 KiB
TypeScript
406 lines
10 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-require-imports */
|
|
import defaultTheme from "tailwindcss/defaultTheme";
|
|
import type { Config } from "tailwindcss";
|
|
|
|
import colorsJson from "./colors.json";
|
|
|
|
const colors = Object.keys(colorsJson).reduce(
|
|
(acc, key) => {
|
|
acc[key] = `var(--${key})`;
|
|
|
|
return acc;
|
|
},
|
|
{} as Record<string, string>
|
|
);
|
|
|
|
const sizes = Array.from({ length: 1000 }, (_, i) => i).reduce(
|
|
(acc, curr) => {
|
|
acc[curr] = `${curr}px`;
|
|
|
|
return acc;
|
|
},
|
|
{
|
|
max: "max-content",
|
|
unset: "unset",
|
|
full: "100%",
|
|
inherit: "inherit",
|
|
"1/2": "50%",
|
|
"1/3": "33.3%",
|
|
"2/3": "66.6%",
|
|
"1/4": "25%",
|
|
"1/6": "16.6%",
|
|
"2/6": "33.3%",
|
|
"3/6": "50%",
|
|
"4/6": "66.6%",
|
|
"5/6": "83.3%"
|
|
} as Record<string, string>
|
|
);
|
|
|
|
const opacities = Array.from({ length: 100 }, (_, i) => i).reduce(
|
|
(acc, curr) => {
|
|
acc[curr] = curr / 100 + "";
|
|
|
|
return acc;
|
|
},
|
|
{} as Record<string, string>
|
|
);
|
|
|
|
const transitionDurations = Array.from({ length: 60 }, (_, i) => i).reduce(
|
|
(acc, curr) => {
|
|
acc[curr] = curr * 50 + "";
|
|
|
|
return acc;
|
|
},
|
|
{} as Record<string, string>
|
|
);
|
|
|
|
const themeConfig: Config = {
|
|
darkMode: "class",
|
|
content: [
|
|
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./components-new/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./styling-reference/ai-ready-website/app/**/*.{ts,tsx}",
|
|
"./styling-reference/ai-ready-website/components/**/*.{ts,tsx}",
|
|
"./styling-reference/ai-ready-website/components-new/**/*.{ts,tsx}",
|
|
],
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: "2rem",
|
|
screens: {
|
|
"2xl": "1400px",
|
|
},
|
|
},
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ["var(--font-geist-sans)", "var(--font-inter)", ...defaultTheme.fontFamily.sans],
|
|
mono: ["var(--font-geist-mono)", ...defaultTheme.fontFamily.mono],
|
|
ascii: ["var(--font-roboto-mono)", ...defaultTheme.fontFamily.mono]
|
|
},
|
|
fontSize: {
|
|
"title-h1": [
|
|
"60px",
|
|
{
|
|
"lineHeight": "64px",
|
|
"letterSpacing": "-0.3px",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"title-h2": [
|
|
"52px",
|
|
{
|
|
"lineHeight": "56px",
|
|
"letterSpacing": "-0.52px",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"title-h3": [
|
|
"40px",
|
|
{
|
|
"lineHeight": "44px",
|
|
"letterSpacing": "-0.4px",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"title-h4": [
|
|
"32px",
|
|
{
|
|
"lineHeight": "36px",
|
|
"letterSpacing": "-0.32px",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"title-h5": [
|
|
"24px",
|
|
{
|
|
"lineHeight": "32px",
|
|
"letterSpacing": "-0.24px",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"body-x-large": [
|
|
"20px",
|
|
{
|
|
"lineHeight": "28px",
|
|
"letterSpacing": "-0.1px",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"body-large": [
|
|
"16px",
|
|
{
|
|
"lineHeight": "24px",
|
|
"letterSpacing": "0px",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"body-medium": [
|
|
"14px",
|
|
{
|
|
"lineHeight": "20px",
|
|
"letterSpacing": "0.14px",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"body-small": [
|
|
"13px",
|
|
{
|
|
"lineHeight": "20px",
|
|
"letterSpacing": "0px",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"body-input": [
|
|
"15px",
|
|
{
|
|
"lineHeight": "24px",
|
|
"letterSpacing": "0px",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"label-x-large": [
|
|
"20px",
|
|
{
|
|
"lineHeight": "28px",
|
|
"letterSpacing": "-0.1px",
|
|
"fontWeight": "450"
|
|
}
|
|
],
|
|
"label-large": [
|
|
"16px",
|
|
{
|
|
"lineHeight": "24px",
|
|
"letterSpacing": "0px",
|
|
"fontWeight": "450"
|
|
}
|
|
],
|
|
"label-medium": [
|
|
"14px",
|
|
{
|
|
"lineHeight": "20px",
|
|
"letterSpacing": "0px",
|
|
"fontWeight": "450"
|
|
}
|
|
],
|
|
"label-small": [
|
|
"13px",
|
|
{
|
|
"lineHeight": "20px",
|
|
"letterSpacing": "0px",
|
|
"fontWeight": "450"
|
|
}
|
|
],
|
|
"label-x-small": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "20px",
|
|
"letterSpacing": "0px",
|
|
"fontWeight": "450"
|
|
}
|
|
],
|
|
"mono-medium": [
|
|
"14px",
|
|
{
|
|
"lineHeight": "22px",
|
|
"letterSpacing": "0px",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"mono-small": [
|
|
"13px",
|
|
{
|
|
"lineHeight": "20px",
|
|
"letterSpacing": "0px",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"mono-x-small": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "16px",
|
|
"letterSpacing": "0px",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"title-blog": [
|
|
"28px",
|
|
{
|
|
"lineHeight": "36px",
|
|
"letterSpacing": "-0.28px",
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
colors: {
|
|
transparent: "transparent",
|
|
current: "currentColor",
|
|
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))",
|
|
},
|
|
...colors
|
|
},
|
|
screens: {
|
|
xs: { min: "390px" },
|
|
"xs-max": { max: "389px" },
|
|
sm: { min: "576px" },
|
|
"sm-max": { max: "575px" },
|
|
md: { min: "768px" },
|
|
"md-max": { max: "767px" },
|
|
lg: { min: "996px" },
|
|
"lg-max": { max: "995px" },
|
|
xl: { min: "1200px" },
|
|
"xl-max": { max: "1199px" }
|
|
},
|
|
opacity: opacities,
|
|
spacing: {
|
|
...sizes,
|
|
'root': 'var(--root-padding)'
|
|
},
|
|
width: sizes,
|
|
maxWidth: sizes,
|
|
height: sizes,
|
|
inset: sizes,
|
|
borderWidth: sizes,
|
|
backdropBlur: Array.from({ length: 20 }, (_, i) => i).reduce(
|
|
(acc, curr) => {
|
|
acc[curr] = curr + "px";
|
|
|
|
return acc;
|
|
},
|
|
{} as Record<string, string>
|
|
),
|
|
transitionTimingFunction: { DEFAULT: "cubic-bezier(0.25, 0.1, 0.25, 1)" },
|
|
transitionDuration: {
|
|
DEFAULT: "200ms",
|
|
...transitionDurations
|
|
},
|
|
transitionDelay: {
|
|
...transitionDurations
|
|
},
|
|
borderRadius: (() => {
|
|
const radius: Record<string | number, string> = {
|
|
full: "999px",
|
|
inherit: "inherit",
|
|
0: "0px",
|
|
lg: "var(--radius)",
|
|
md: "calc(var(--radius) - 2px)",
|
|
sm: "calc(var(--radius) - 4px)",
|
|
};
|
|
|
|
for (let i = 1; i <= 32; i += 1) {
|
|
radius[i] = `${i}px`;
|
|
}
|
|
|
|
return radius;
|
|
})()
|
|
}
|
|
},
|
|
plugins: [
|
|
({
|
|
addUtilities, matchUtilities
|
|
}: any) => {
|
|
addUtilities({
|
|
// Inside-border utilities are defined in inside-border-fix.css to avoid Tailwind variant conflicts
|
|
'.mask-border': {
|
|
"mask": "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
|
|
"mask-composite": "exclude",
|
|
"pointer-events": "none"
|
|
},
|
|
".center-x": { "@apply absolute left-1/2 -translate-x-1/2": {} },
|
|
".center-y": { "@apply absolute top-1/2 -translate-y-1/2": {} },
|
|
".center": { "@apply absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2": {} },
|
|
".flex-center": { "@apply flex items-center justify-center": {} },
|
|
".overlay": { "@apply absolute top-0 left-0 w-full h-full rounded-inherit": {} },
|
|
".text-gradient": { "@apply !bg-clip-text !text-transparent": {} }
|
|
});
|
|
matchUtilities(
|
|
{
|
|
'cw': (value: string) => {
|
|
const width = parseInt(value);
|
|
|
|
return {
|
|
width: value,
|
|
left: `calc(50% - ${width / 2}px)`
|
|
};
|
|
},
|
|
'ch': (value: string) => {
|
|
const height = parseInt(value);
|
|
|
|
return {
|
|
height: value,
|
|
top: `calc(50% - ${height / 2}px)`
|
|
};
|
|
},
|
|
'cs': (value: string) => {
|
|
const size = parseInt(value);
|
|
|
|
return {
|
|
width: size,
|
|
height: size,
|
|
left: `calc(50% - ${size / 2}px)`,
|
|
top: `calc(50% - ${size / 2}px)`
|
|
};
|
|
},
|
|
'cmw': (value: string) => {
|
|
const [maxWidth, paddingX] = value.split(',').map((v) => parseInt(v));
|
|
|
|
const width = paddingX ? `calc(100% - ${paddingX * 2}px)` : '100%';
|
|
|
|
return {
|
|
maxWidth: maxWidth,
|
|
width,
|
|
left: `calc(50% - (min(${maxWidth}px, ${width}) / 2))`
|
|
};
|
|
},
|
|
'mw': (value: string) => {
|
|
const [maxWidth, paddingX] = value.split(',').map((v) => parseInt(v));
|
|
|
|
const width = paddingX ? `calc(100% - ${paddingX * 2}px)` : '100%';
|
|
|
|
return {
|
|
maxWidth: maxWidth,
|
|
width
|
|
};
|
|
}
|
|
},
|
|
{ values: sizes }
|
|
);
|
|
},
|
|
require("tailwind-gradient-mask-image"),
|
|
require("@tailwindcss/typography"),
|
|
]
|
|
};
|
|
|
|
export default themeConfig; |