BlogPost/tailwind.config.js at master · Kanyandula/BlogPost · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: [
    "./templates/**/*.html",
    "./blog/templates/**/*.html",
    "./account/templates/**/*.html",
    "./personal/templates/**/*.html",
  ],
  theme: {
    extend: {
      colors: {
        "background": "var(--color-background)",
        "primary": "var(--color-primary)",
        "primary-container": "var(--color-primary-container)",
        "primary-fixed": "var(--color-primary-fixed)",
        "primary-fixed-dim": "var(--color-primary-fixed-dim)",
        "on-primary": "var(--color-on-primary)",
        "on-primary-container": "var(--color-on-primary-container)",
        "on-primary-fixed": "#002020",
        "on-primary-fixed-variant": "#224d4e",
        "secondary": "var(--color-secondary)",
        "secondary-container": "var(--color-secondary-container)",
        "secondary-fixed": "#dce1ff",
        "secondary-fixed-dim": "var(--color-secondary-fixed-dim)",
        "on-secondary": "var(--color-on-secondary)",
        "on-secondary-container": "#1d3989",
        "on-secondary-fixed": "#00164e",
        "on-secondary-fixed-variant": "#264191",
        "tertiary": "var(--color-tertiary)",
        "tertiary-container": "var(--color-tertiary-container)",
        "tertiary-fixed": "var(--color-tertiary-fixed)",
        "tertiary-fixed-dim": "var(--color-tertiary-fixed-dim)",
        "on-tertiary": "var(--color-on-tertiary)",
        "on-tertiary-container": "var(--color-on-tertiary-container)",
        "on-tertiary-fixed": "var(--color-on-tertiary-fixed)",
        "on-tertiary-fixed-variant": "#653e00",
        "surface": "var(--color-surface)",
        "surface-bright": "var(--color-background)",
        "surface-dim": "#d9dadb",
        "surface-tint": "#3b6566",
        "surface-variant": "var(--color-surface-container-highest)",
        "surface-container": "var(--color-surface-container)",
        "surface-container-low": "var(--color-surface-container-low)",
        "surface-container-high": "var(--color-surface-container-high)",
        "surface-container-highest": "var(--color-surface-container-highest)",
        "surface-container-lowest": "var(--color-surface-container-lowest)",
        "on-surface": "var(--color-on-surface)",
        "on-surface-variant": "var(--color-on-surface-variant)",
        "on-background": "var(--color-on-surface)",
        "outline": "var(--color-outline)",
        "outline-variant": "var(--color-outline-variant)",
        "error": "var(--color-error)",
        "error-container": "var(--color-error-container)",
        "on-error": "var(--color-on-error)",
        "on-error-container": "var(--color-on-error-container)",
        "inverse-surface": "#2e3132",
        "inverse-on-surface": "#f0f1f2",
        "inverse-primary": "#a3cfcf",
      },
      fontFamily: {
        "headline": ["Inter", "sans-serif"],
        "body": ["Inter", "sans-serif"],
        "label": ["Inter", "sans-serif"],
      },
      borderRadius: {
        "DEFAULT": "0.25rem",
        "lg": "0.5rem",
        "xl": "0.75rem",
        "full": "9999px",
      },
      // Post bodies use `prose prose-lg`. The stock prose-lg rhythm
      // (line-height 1.78, h2 ~56px top) is airier than the design
      // reference; tighten leading + heading gaps while keeping 18px type.
      "typography": {
        // Drive every prose color off the --color-* custom properties so
        // headings/bold/links/quotes/code track the .dark token swap.
        // Without this the plugin's stock vars stay light-mode dark gray
        // and headings/bold are invisible on the dark surface.
        "DEFAULT": {
          "css": {
            "--tw-prose-body": "var(--color-on-surface)",
            "--tw-prose-headings": "var(--color-on-surface)",
            "--tw-prose-lead": "var(--color-on-surface-variant)",
            "--tw-prose-links": "var(--color-primary)",
            "--tw-prose-bold": "var(--color-on-surface)",
            "--tw-prose-counters": "var(--color-on-surface-variant)",
            "--tw-prose-bullets": "var(--color-outline)",
            "--tw-prose-hr": "var(--color-outline-variant)",
            "--tw-prose-quotes": "var(--color-on-surface)",
            "--tw-prose-quote-borders": "var(--color-primary)",
            "--tw-prose-captions": "var(--color-on-surface-variant)",
            "--tw-prose-code": "var(--color-on-surface)",
            "--tw-prose-pre-code": "var(--color-on-surface)",
            "--tw-prose-pre-bg": "var(--color-surface-container)",
            "--tw-prose-th-borders": "var(--color-outline)",
            "--tw-prose-td-borders": "var(--color-outline-variant)",
          },
        },
        "lg": {
          "css": {
            "lineHeight": "1.6",
            "h2": { "marginTop": "1.6em", "marginBottom": "0.8em" },
            "h3": { "marginTop": "1.4em", "marginBottom": "0.5em" },
          },
        },
      },
    },
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
  ],
}