RO-Nation.live/tailwind.config.ts at main · ChristianRelf/RO-Nation.live · 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
import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./src/**/*.{ts,tsx,mdx}"],
  theme: {
    extend: {
      colors: {
        bg: "rgb(var(--bg-rgb) / <alpha-value>)",
        elev: "rgb(var(--elev-rgb) / <alpha-value>)",
        surface: "rgb(var(--surface-rgb) / <alpha-value>)",
        line: {
          DEFAULT: "var(--line)",
          strong: "var(--line-strong)",
        },
        fg: "rgb(var(--fg-rgb) / <alpha-value>)",
        muted: "rgb(var(--muted-rgb) / <alpha-value>)",
        faint: "rgb(var(--faint-rgb) / <alpha-value>)",
        // `ink` is the readable colour ON that ground. Anything drawn on
        // bg-accent must be text-accent-ink, never text-white - a brand with a
        // light accent flips it to near-black. Same for paper.
        accent: {
          DEFAULT: "rgb(var(--accent-rgb) / <alpha-value>)",
          soft: "var(--accent-soft)",
          hi: "rgb(var(--accent-hi-rgb) / <alpha-value>)",
          ink: "rgb(var(--accent-ink-rgb) / <alpha-value>)",
        },
        paper: {
          DEFAULT: "rgb(var(--paper-rgb) / <alpha-value>)",
          ink: "rgb(var(--paper-ink-rgb) / <alpha-value>)",
        },
      },
      fontFamily: {
        sans: ["var(--font-sans)", "system-ui", "sans-serif"],
        display: ["var(--font-display)", "Impact", "sans-serif"],
        mono: ["var(--font-mono)", "ui-monospace", "monospace"],
      },
      letterSpacing: {
        kicker: "0.22em",
      },
      transitionTimingFunction: {
        // The site's existing settle, named so components stop retyping the tuple.
        settle: "cubic-bezier(0.16, 1, 0.3, 1)",
        // Mechanical: fast out, hard stop. The rail's detent, the view tabs.
        detent: "cubic-bezier(0.2, 0.9, 0.2, 1)",
      },
      maxWidth: {
        shell: "1240px",
      },
      borderRadius: {
        // The brand's corner. RNL is 3px; a partner can go sharp (0) or soft.
        brand: "var(--radius)",
      },
      keyframes: {
        // Slide a strip left by exactly its own width. Its identical twin sits
        // immediately to its right, so at the end of the cycle the twin is
        // pixel-for-pixel where the first strip started and the loop restarts
        // invisibly. (At -50% the pair only spanned 1.5 strip widths, which left
        // a blank band on screen whenever the strips were narrow.)
        marquee: {
          "0%": { transform: "translateX(0)" },
          "100%": { transform: "translateX(-100%)" },
        },
        "fade-up": {
          "0%": { opacity: "0", transform: "translateY(14px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        glow: {
          "0%, 100%": { opacity: "0.55" },
          "50%": { opacity: "0.9" },
        },
      },
      animation: {
        marquee: "marquee 40s linear infinite",
        "marquee-fast": "marquee 22s linear infinite",
        "fade-up": "fade-up 0.7s cubic-bezier(0.16,1,0.3,1) both",
        glow: "glow 6s ease-in-out infinite",
      },
    },
  },
  plugins: [],
};

export default config;