ato/tailwind.config.cjs at main · JangoCG/ato · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
const plugin = require("tailwindcss/plugin");

const sizes = {
  "2xs": "1.4rem",
  xs: "1.8rem",
  sm: "2.0rem",
  md: "2.3rem",
  lg: "2.6rem",
};

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class", '[data-resolved-appearance="dark"]'],
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      keyframes: {
        blinkRing: {
          "0%, 49%": { "--tw-ring-color": "var(--primary)" },
          "50%, 99%": { "--tw-ring-color": "transparent" },
          "100%": { "--tw-ring-color": "var(--primary)" },
        },
      },
      animation: {
        blinkRing: "blinkRing 150ms step-start 400ms infinite",
      },
      opacity: {
        disabled: "0.3",
      },
      height: sizes,
      width: sizes,
      minHeight: sizes,
      minWidth: sizes,
      lineHeight: {
        xs: "calc(1.75rem - 2px)",
        sm: "calc(2.0rem - 2px)",
        md: "calc(2.5rem - 2px)",
      },
      transitionProperty: {
        grid: "grid",
      },
    },
    fontFamily: {
      mono: [
        "var(--font-family-editor)",
        "IBM Plex Mono",
        "JetBrains Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Monaco",
        "monospace",
      ],
      sans: [
        "var(--font-family-interface)",
        "IBM Plex Sans",
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "sans-serif",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
      ],
    },
    fontSize: {
      "4xs": "0.6rem",
      "3xs": "0.675rem",
      "2xs": "0.75rem",
      xs: "0.8rem",
      sm: "0.9rem",
      base: "1rem",
      lg: "1.12rem",
      xl: "1.25rem",
      "2xl": "1.5rem",
      "3xl": "2rem",
      "4xl": "2.5rem",
      "5xl": "3rem",
      editor: "var(--editor-font-size)",
      shrink: "0.8em",
    },
    boxShadow: {
      DEFAULT: "0 1px 3px 0 var(--shadow)",
      lg: "0 10px 15px -3px var(--shadow)",
    },
    colors: {
      transparent: "transparent",
      placeholder: "var(--textSubtlest)",
      shadow: "var(--shadow)",
      backdrop: "var(--backdrop)",
      selection: "var(--selection)",
      surface: "var(--surface)",
      "surface-highlight": "var(--surfaceHighlight)",
      "surface-active": "var(--surfaceActive)",
      text: "var(--text)",
      "text-subtle": "var(--textSubtle)",
      "text-subtlest": "var(--textSubtlest)",
      border: "var(--border)",
      "border-subtle": "var(--borderSubtle)",
      "border-focus": "var(--borderFocus)",
      primary: "var(--primary)",
      danger: "var(--danger)",
      secondary: "var(--secondary)",
      success: "var(--success)",
      info: "var(--info)",
      notice: "var(--notice)",
      warning: "var(--warning)",
    },
  },
  plugins: [
    require("@tailwindcss/container-queries"),
    plugin(function ({ addVariant }) {
      addVariant("hocus", ["&:hover", "&:focus-visible", "&.focus:focus"]);
      addVariant("focus-visible-or-class", ["&:focus-visible", "&.focus:focus"]);
    }),
  ],
};