plexus/tailwind.config.js at main · villetacore/plexus · 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
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  darkMode: ["class", "[data-theme]"],
  theme: {
    extend: {
      colors: {
        surface: {
          0: "var(--surface-0)",
          1: "var(--surface-1)",
          2: "var(--surface-2)",
          3: "var(--surface-3)",
        },
        accent: {
          DEFAULT: "var(--accent)",
          2:       "var(--accent2)",
          muted:   "var(--accent-muted)",
          fg:      "var(--accent-fg)",
        },
        border:   "var(--border)",
        muted:    "var(--muted)",
        fg:       "var(--fg)",
        "fg-muted": "var(--fg-muted)",
        danger:   "var(--danger)",
        success:  "var(--success)",
        warning:  "var(--warning)",
      },
      fontFamily: {
        sans:    ["var(--font-sans)"],
        display: ["var(--font-display)"],
        mono:    ["var(--font-mono)"],
      },
      borderRadius: {
        xs: "var(--radius-xs)",
        sm: "var(--radius-sm)",
        DEFAULT: "var(--radius)",
        lg: "var(--radius-lg)",
        xl: "var(--radius-xl)",
      },
      animation: {
        "fade-in":    "fadeIn    0.15s ease-out",
        "slide-up":   "slideUp   0.2s  ease-out",
        "slide-down": "slideDown 0.18s ease-out",
        "scale-in":   "scaleIn   0.15s ease-out",
        "message-in": "messageIn 0.2s  ease-out",
        "bounce-dot": "bounceDot 0.9s  infinite",
        pulse2:       "pulse2    2s    cubic-bezier(0.4,0,0.6,1) infinite",
      },
      keyframes: {
        fadeIn:    { from: { opacity: "0" },                             to: { opacity: "1" } },
        slideUp:   { from: { opacity: "0", transform: "translateY(8px)" }, to: { opacity: "1", transform: "translateY(0)" } },
        slideDown: { from: { opacity: "0", transform: "translateY(-6px)" }, to: { opacity: "1", transform: "translateY(0)" } },
        scaleIn:   { from: { opacity: "0", transform: "scale(0.95)" },   to: { opacity: "1", transform: "scale(1)" } },
        messageIn: { from: { opacity: "0", transform: "translateY(6px) scale(0.97)" }, to: { opacity: "1", transform: "none" } },
        bounceDot: {
          "0%,60%,100%": { transform: "translateY(0)" },
          "30%":          { transform: "translateY(-4px)" },
        },
        pulse2:    { "0%,100%": { opacity: "1" }, "50%": { opacity: "0.4" } },
      },
      boxShadow: {
        glow: "0 0 20px var(--glow)",
        "glow-sm": "0 0 10px var(--glow)",
      },
    },
  },
  plugins: [],
};