Jason Woltje
8c5a25e976
Some checks failed
ci/woodpecker/push/web Pipeline failed
Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
import forms from "@tailwindcss/forms";
|
|
import containerQueries from "@tailwindcss/container-queries";
|
|
|
|
// Tokens ported verbatim from design-samples/stitch_jasonwoltje.com/*/code.html
|
|
// Full token rationale in design-samples/stitch_jasonwoltje.com/silicon_ethos/DESIGN.md
|
|
const stitchColors = {
|
|
primary: "#81ecff",
|
|
"primary-dim": "#00d4ec",
|
|
"primary-fixed": "#00e3fd",
|
|
"primary-fixed-dim": "#00d4ec",
|
|
"primary-container": "#00e3fd",
|
|
"on-primary": "#005762",
|
|
"on-primary-container": "#004d57",
|
|
"on-primary-fixed": "#003840",
|
|
"on-primary-fixed-variant": "#005762",
|
|
|
|
secondary: "#d873ff",
|
|
"secondary-dim": "#bc00fb",
|
|
"secondary-fixed": "#f1c1ff",
|
|
"secondary-fixed-dim": "#ebadff",
|
|
"secondary-container": "#9900ce",
|
|
"on-secondary": "#39004f",
|
|
"on-secondary-container": "#fff5fc",
|
|
"on-secondary-fixed": "#580078",
|
|
"on-secondary-fixed-variant": "#8400b2",
|
|
|
|
tertiary: "#8eff71",
|
|
"tertiary-dim": "#2be800",
|
|
"tertiary-fixed": "#2ff801",
|
|
"tertiary-fixed-dim": "#2be800",
|
|
"tertiary-container": "#2ff801",
|
|
"on-tertiary": "#0d6100",
|
|
"on-tertiary-container": "#0b5800",
|
|
"on-tertiary-fixed": "#064200",
|
|
"on-tertiary-fixed-variant": "#0d6200",
|
|
|
|
error: "#ff716c",
|
|
"error-dim": "#d7383b",
|
|
"error-container": "#9f0519",
|
|
"on-error": "#490006",
|
|
"on-error-container": "#ffa8a3",
|
|
|
|
background: "#0d0e12",
|
|
"on-background": "#f7f5fc",
|
|
|
|
surface: "#0d0e12",
|
|
"surface-dim": "#0d0e12",
|
|
"surface-bright": "#2a2c32",
|
|
"surface-variant": "#24252c",
|
|
"surface-tint": "#81ecff",
|
|
"surface-container-lowest": "#000000",
|
|
"surface-container-low": "#121318",
|
|
"surface-container": "#18191e",
|
|
"surface-container-high": "#1e1f25",
|
|
"surface-container-highest": "#24252c",
|
|
"on-surface": "#f7f5fc",
|
|
"on-surface-variant": "#abaab0",
|
|
|
|
"inverse-surface": "#faf8ff",
|
|
"inverse-on-surface": "#54555a",
|
|
"inverse-primary": "#006976",
|
|
|
|
outline: "#75757a",
|
|
"outline-variant": "#47484d",
|
|
};
|
|
|
|
const config: Config = {
|
|
darkMode: "class",
|
|
content: ["./src/**/*.{ts,tsx,mdx}"],
|
|
theme: {
|
|
extend: {
|
|
colors: stitchColors,
|
|
borderRadius: {
|
|
DEFAULT: "0.125rem",
|
|
sm: "0.125rem",
|
|
md: "0.375rem",
|
|
lg: "0.25rem",
|
|
xl: "0.5rem",
|
|
"2xl": "0.75rem",
|
|
full: "9999px",
|
|
},
|
|
fontFamily: {
|
|
headline: ["var(--font-headline)", "Space Grotesk", "sans-serif"],
|
|
body: ["var(--font-body)", "Inter", "sans-serif"],
|
|
label: ["var(--font-label)", "Space Grotesk", "monospace"],
|
|
},
|
|
boxShadow: {
|
|
"neon-primary":
|
|
"0 0 32px 4px rgba(129, 236, 255, 0.25), 0 0 4px 1px rgba(129, 236, 255, 0.5)",
|
|
"neon-secondary":
|
|
"0 0 32px 4px rgba(216, 115, 255, 0.25), 0 0 4px 1px rgba(216, 115, 255, 0.5)",
|
|
},
|
|
backdropBlur: {
|
|
"2xl": "24px",
|
|
},
|
|
},
|
|
},
|
|
plugins: [forms, containerQueries],
|
|
};
|
|
|
|
export default config;
|