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

const config: Config = {
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./lib/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        canvas: "#0A0E14",
        surface: "#0F141C",
        panel: "#131A24",
        elevated: "#18212E",
        hairline: "#1E2733",
        line: "#273140",
        ink: "#E6EDF3",
        muted: "#8B98AC",
        faint: "#5C6779",
        // Semantic status palette (like a real ops console)
        pass: "#39D98A",     // beginner / success / completed
        info: "#37C6F0",     // intermediate / info / links
        adv: "#A78BFA",      // advanced
        warn: "#F0B429",     // in-progress / warning
        danger: "#F87171",   // errors
      },
      fontFamily: {
        display: ["var(--font-display)", "system-ui", "sans-serif"],
        sans: ["var(--font-sans)", "system-ui", "sans-serif"],
        mono: ["var(--font-mono)", "ui-monospace", "monospace"],
      },
      letterSpacing: {
        tightest: "-0.04em",
      },
      boxShadow: {
        glow: "0 0 0 1px rgba(57,217,138,0.20), 0 0 40px -8px rgba(57,217,138,0.35)",
        "glow-info": "0 0 0 1px rgba(55,198,240,0.20), 0 0 40px -8px rgba(55,198,240,0.35)",
        panel: "0 1px 0 0 rgba(255,255,255,0.03) inset, 0 24px 60px -30px rgba(0,0,0,0.9)",
      },
      backgroundImage: {
        "grid-fade":
          "linear-gradient(to bottom, transparent, #0A0E14 90%), radial-gradient(circle at 50% 0%, rgba(55,198,240,0.06), transparent 60%)",
      },
      keyframes: {
        blink: { "0%,49%": { opacity: "1" }, "50%,100%": { opacity: "0" } },
        "fade-up": {
          from: { opacity: "0", transform: "translateY(16px)" },
          to: { opacity: "1", transform: "translateY(0)" },
        },
        "scan": {
          from: { transform: "translateY(-100%)" },
          to: { transform: "translateY(100%)" },
        },
        "pulse-node": {
          "0%,100%": { boxShadow: "0 0 0 0 rgba(57,217,138,0.5)" },
          "50%": { boxShadow: "0 0 0 6px rgba(57,217,138,0)" },
        },
      },
      animation: {
        blink: "blink 1.05s steps(1) infinite",
        "fade-up": "fade-up 0.6s cubic-bezier(0.22,1,0.36,1) both",
        scan: "scan 6s linear infinite",
        "pulse-node": "pulse-node 2.2s ease-out infinite",
      },
    },
  },
  plugins: [],
};

export default config;