mirror of
https://github.com/block/bitcoin-treasury.git
synced 2025-04-19 06:31:19 +00:00
90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
|
import type { Config } from "tailwindcss";
|
||
|
|
import plugin from "tailwindcss/plugin";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
darkMode: ["class", '[data-theme="dark"]'],
|
||
|
|
content: ["./app/**/*.{js,ts,jsx,tsx,mdx}"],
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
fontFamily: {
|
||
|
|
sans: ["Cash Sans", "sans-serif"],
|
||
|
|
mono: ["Cash Sans Mono", "monospace"],
|
||
|
|
},
|
||
|
|
colors: {
|
||
|
|
bgApp: "var(--background-app)",
|
||
|
|
bgSubtle: "var(--background-subtle)",
|
||
|
|
bgStandard: "var(--background-standard)",
|
||
|
|
bgProminent: "var(--background-prominent)",
|
||
|
|
|
||
|
|
borderSubtle: "var(--border-subtle)",
|
||
|
|
borderStandard: "var(--border-standard)",
|
||
|
|
|
||
|
|
textProminent: "var(--text-prominent)",
|
||
|
|
textStandard: "var(--text-standard)",
|
||
|
|
textSubtle: "var(--text-subtle)",
|
||
|
|
textPlaceholder: "var(--text-placeholder)",
|
||
|
|
|
||
|
|
iconProminent: "var(--icon-prominent)",
|
||
|
|
iconStandard: "var(--icon-standard)",
|
||
|
|
iconSubtle: "var(--icon-subtle)",
|
||
|
|
iconExtraSubtle: "var(--icon-extra-subtle)",
|
||
|
|
slate: "var(--slate)",
|
||
|
|
blockTeal: "var(--block-teal)",
|
||
|
|
blockOrange: "var(--block-orange)",
|
||
|
|
},
|
||
|
|
keyframes: {
|
||
|
|
appearDown: {
|
||
|
|
"0%": { opacity: "0", transform: "translateY(-8px)" },
|
||
|
|
"100%": { opacity: "1", transform: "translateY(0px)" },
|
||
|
|
},
|
||
|
|
fadeIn: {
|
||
|
|
"0%": { opacity: "0" },
|
||
|
|
"100%": { opacity: "1" },
|
||
|
|
},
|
||
|
|
flapDownTop: {
|
||
|
|
from: { transform: "rotateX(0deg)" },
|
||
|
|
"50%, to": { transform: "rotateX(90deg)" },
|
||
|
|
},
|
||
|
|
flapDownBottom: {
|
||
|
|
"from, 50%": { transform: "rotateX(90deg)" },
|
||
|
|
"90%": { transform: "rotateX(20deg)" },
|
||
|
|
"80%, to": { transform: "rotateX(0deg)" },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
animation: {
|
||
|
|
appearDown: "appearDown 250ms ease-in forwards",
|
||
|
|
fadeIn: "fadeIn 250ms ease-in forwards 1s",
|
||
|
|
flapDownTop: "flapDownTop 300ms ease-in forwards",
|
||
|
|
flapDownBottom: "flapDownBottom 300ms ease-out forwards",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
plugins: [
|
||
|
|
plugin(function ({ addUtilities }) {
|
||
|
|
const newUtilities = {
|
||
|
|
".clip-path-\\[polygon\\(0_50\\%\\,100\\%_50\\%\\,100\\%_0\\,0_0\\)\\]":
|
||
|
|
{
|
||
|
|
clipPath: "polygon(0 50%, 100% 50%, 100% 0, 0 0)",
|
||
|
|
},
|
||
|
|
".clip-path-\\[polygon\\(0_100\\%\\,100\\%_100\\%\\,100\\%_50\\%\\,0_50\\%\\)\\]":
|
||
|
|
{
|
||
|
|
clipPath: "polygon(0 100%, 100% 100%, 100% 50%, 0 50%)",
|
||
|
|
},
|
||
|
|
".rotate-x-50": {
|
||
|
|
transform: "rotateX(50deg)",
|
||
|
|
},
|
||
|
|
".shadow-inner-top": {
|
||
|
|
boxShadow: "inset 0 -3px 5px -4px rgba(0, 0, 0, 0.2)",
|
||
|
|
},
|
||
|
|
".shadow-inner-bottom": {
|
||
|
|
boxShadow: "inset 0 3px 5px -4px rgba(0, 0, 0, 0.2)",
|
||
|
|
},
|
||
|
|
".shadow-outer-bottom": {
|
||
|
|
boxShadow: "0px 6px 6px 0px rgba(0, 0, 0, 0.8)",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
addUtilities(newUtilities);
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
} satisfies Config;
|