Whisper/tailwind.config.js at main · JetP1ane/Whisper · 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
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        // Mode-aware tokens. Variables defined in styles/globals.css
        // resolve to the dark palette by default and the light palette
        // when `<html>` has the `light` class.
        bg: {
          base: "rgb(var(--bg-base) / <alpha-value>)",
          raised: "rgb(var(--bg-raised) / <alpha-value>)",
          inset: "rgb(var(--bg-inset) / <alpha-value>)",
          panel: "rgb(var(--bg-panel) / <alpha-value>)",
          hover: "rgb(var(--bg-hover) / <alpha-value>)",
          active: "rgb(var(--bg-active) / <alpha-value>)",
        },
        border: {
          subtle: "rgb(var(--border-subtle) / <alpha-value>)",
          default: "rgb(var(--border-default) / <alpha-value>)",
          strong: "rgb(var(--border-strong) / <alpha-value>)",
        },
        text: {
          primary: "rgb(var(--text-primary) / <alpha-value>)",
          secondary: "rgb(var(--text-secondary) / <alpha-value>)",
          tertiary: "rgb(var(--text-tertiary) / <alpha-value>)",
          disabled: "rgb(var(--text-disabled) / <alpha-value>)",
        },
        // Noctis Whisper brand gold, anchored on #F6B32D at the 500 step.
        // Steps follow HSL(40, 92%, L%) with L sweeping 96 → 18 across
        // 50 → 900, matching Tailwind's standard neutral progression
        // shape so existing utility classes (e.g. `bg-accent-500/10`)
        // produce predictable contrast.
        accent: {
          50: "#fdf6e6",
          100: "#fbe9c1",
          200: "#f8d894",
          300: "#f6c768",
          400: "#f6bd4a",
          500: "#f6b32d",
          600: "#d8951a",
          700: "#ab7515",
          800: "#7d5610",
          900: "#533a08",
        },
        // Neutral muted tone for chrome: timestamps, secondary metadata,
        // dividers, pill backgrounds where the accent gold would be too
        // loud. #8F8F8F is exactly mid-grey, readable on both the dark
        // and light surfaces.
        muted: "#8F8F8F",
        // Semantic state colors. status.ok stays emerald deliberately —
        // it's the universal "all good / connected / delivered" signal,
        // and merging it with the gold brand accent would muddy the
        // affordance. Change later if you want gold-as-success too.
        status: {
          ok: "#10b981",
          warn: "#f59e0b",
          err: "#ef4444",
        },
      },
      fontFamily: {
        sans: ['"Inter"', "-apple-system", "BlinkMacSystemFont", "system-ui", "sans-serif"],
        mono: ['"JetBrains Mono"', '"SF Mono"', "ui-monospace", "monospace"],
      },
      fontSize: {
        xs: ["11px", "16px"],
        sm: ["12px", "18px"],
        base: ["13px", "20px"],
        md: ["14px", "22px"],
        lg: ["16px", "24px"],
      },
      animation: {
        "fade-in": "fade-in 150ms ease-out",
        "slide-up": "slide-up 200ms ease-out",
      },
      keyframes: {
        "fade-in": {
          from: { opacity: "0" },
          to: { opacity: "1" },
        },
        "slide-up": {
          from: { opacity: "0", transform: "translateY(4px)" },
          to: { opacity: "1", transform: "translateY(0)" },
        },
      },
    },
  },
  plugins: [],
};