manny-portfolio/tailwind.config.js at main · tunnelslug/manny-portfolio · 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
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,css}",
  ],
  darkMode: "class",
  theme: {
    // Override the default colors to strictly use our custom theme palette.
    // Preventing any default tailwind colors (like red-500, gray-800) from being used.
    colors: {
      transparent: "transparent",
      current: "currentColor",
      bg: "var(--color-bg)",
      "bg-2": "var(--color-bg-2)",
      "bg-emphasis": "var(--color-bg-emphasis)",
      surface: "var(--color-surface)",
      "surface-hover": "var(--color-surface-hover)",
      border: "var(--color-border)",
      "border-subtle": "var(--color-border-subtle)",
      "border-strong": "var(--color-border-strong)",
      text: "var(--color-text)",
      "text-muted": "var(--color-text-muted)",
      "text-subtle": "var(--color-text-subtle)",
      "text-on-emphasis": "var(--color-text-on-emphasis)",
      accent: "var(--color-accent)",
      "accent-strong": "var(--color-accent-strong)",
      "accent-bg": "var(--color-accent-bg)",
      "accent-bg-hover": "var(--color-accent-bg-hover)",
      "accent-border": "var(--color-accent-border)",
      "accent-border-strong": "var(--color-accent-border-strong)",
      "accent-ring": "var(--color-accent-ring)",
      tezontle: "var(--color-tezontle)",
      grant: "var(--color-grant)",
      "grant-bg": "var(--color-grant-bg)",
      revoke: "var(--color-revoke)",
      "revoke-bg": "var(--color-revoke-bg)",
      pending: "var(--color-pending)",
      "pending-bg": "var(--color-pending-bg)",
      success: "var(--color-success)",
    },
    // Custom font definitions mapping display, sans, and mono to IBM Plex
    fontFamily: {
      display: ["IBM Plex Sans", "ui-sans-serif", "system-ui", "Segoe UI", "sans-serif"],
      sans: ["IBM Plex Sans", "ui-sans-serif", "system-ui", "Segoe UI", "sans-serif"],
      mono: ["IBM Plex Mono", "ui-monospace", "SF Mono", "Menlo", "monospace"],
    },
    // Custom radii mapping to design tokens
    borderRadius: {
      none: "var(--radius-none)",
      sm: "var(--radius-sm)",
      md: "var(--radius-md)",
      lg: "var(--radius-lg)",
      xl: "var(--radius-xl)",
      pill: "var(--radius-pill)",
      full: "var(--radius-full)",
    },
    extend: {
      spacing: {
        "space-1": "var(--space-1)",
        "space-2": "var(--space-2)",
        "space-3": "var(--space-3)",
        "space-4": "var(--space-4)",
        "space-5": "var(--space-5)",
        "space-6": "var(--space-6)",
        "space-7": "var(--space-7)",
        "space-8": "var(--space-8)",
        "space-9": "var(--space-9)",
        "space-10": "var(--space-10)",
        "space-12": "var(--space-12)",
        "space-14": "var(--space-14)",
        "space-20": "var(--space-20)",
        "space-24": "var(--space-24)",
      },
      transitionProperty: {
        "btn": "var(--btn-ink), opacity, transform",
        "ghost": "var(--ghost-ink), color, border-color, opacity, transform",
      },
      transitionTimingFunction: {
        "ease-out": "var(--ease-out)",
        "ease-in-out": "var(--ease-in-out)",
      },
      transitionDuration: {
        "fast": "var(--motion-fast)",
        "base": "var(--motion-base)",
        "slow": "var(--motion-slow)",
      },
      boxShadow: {
        "hover": "var(--shadow-hover)",
        "sm": "var(--shadow-sm)",
      },
    },
  },
  plugins: [],
};