Files
indiekit-blog/tailwind.config.js
svemagie d2fa2fb809 fix(a11y): improve colour contrast and fix semantic heading elements
- Bump all post-type label colours from -600 to -700 (light) and
  -400 to -300 (dark) in blog.njk to meet WCAG AA/AAA contrast
  ratios (green/teal/sky labels were failing AA at ~3-4:1)
- Replace four <p role="heading" aria-level="2"> in footer with
  real <h2> elements for robust screen-reader support
- Bump footer link text from surface-600 to surface-700 (light)
  and surface-400 to surface-300 (dark)
- Update hero.njk accent job-title and "Read more" link from
  accent-600 to accent-700 / accent-400 to accent-300
- Update Tailwind typography prose link token from accent-600/400
  to accent-700/300
- Tighten .p-category and .post-meta base styles in tailwind.css
  (surface-600→700 light, surface-300→200 / surface-400→300)
- Bump hashtag link colours in tailwind.css (accent-600→700)
- Fix sparkline colour in notes.njk (teal-600→700 / teal-400→300)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-14 15:28:43 +01:00

87 lines
1.9 KiB
JavaScript

import typography from "@tailwindcss/typography";
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./*.njk",
"./content/**/*.md",
"./docs/**/*.md",
"./.interface-design/**/*.md",
"./_includes/**/*.njk",
"./_includes/**/*.md",
"./js/**/*.js",
"./lib/**/*.js",
],
darkMode: "class",
theme: {
extend: {
colors: {
// Warm stone — surfaces, text, structure
surface: {
50: "#faf8f5",
100: "#f4f2ee",
200: "#e8e5df",
300: "#d5d0c8",
400: "#a09a90",
500: "#7a746a",
600: "#5c5750",
700: "#3f3b35",
800: "#2a2722",
900: "#1c1b19",
950: "#0f0e0d",
},
// Warm amber — default interactive, CTAs, focus rings
accent: {
50: "#fffbeb",
100: "#fef3c7",
200: "#fde68a",
300: "#fcd34d",
400: "#fbbf24",
500: "#f59e0b",
600: "#d97706",
700: "#b45309",
800: "#92400e",
900: "#78350f",
950: "#451a03",
},
},
fontFamily: {
sans: [
'"Inter"',
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"sans-serif",
],
mono: [
"ui-monospace",
"SF Mono",
"Monaco",
"Cascadia Code",
"monospace",
],
},
maxWidth: {
content: "720px",
wide: "1200px",
},
typography: (theme) => ({
DEFAULT: {
css: {
"--tw-prose-links": theme("colors.accent.700"),
maxWidth: "none",
},
},
invert: {
css: {
"--tw-prose-links": theme("colors.accent.300"),
},
},
}),
},
},
plugins: [typography],
};