hollo/uno.config.ts at main · fedify-dev/hollo · 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
import {
  defineConfig,
  presetIcons,
  presetTypography,
  presetWebFonts,
  presetWind4,
} from "unocss";

export default defineConfig({
  presets: [
    presetWind4({
      preflights: { reset: true },
      dark: "media",
    }),
    presetIcons({
      scale: 1,
      extraProperties: {
        display: "inline-block",
        "vertical-align": "-0.125em",
      },
    }),
    presetTypography(),
    presetWebFonts({
      provider: "bunny",
      fonts: {
        sans: [
          { name: "Inter", weights: ["400", "500", "600", "700"] },
          { name: "Noto Sans KR", weights: ["400", "500", "700"] },
          { name: "Noto Sans JP", weights: ["400", "500", "700"] },
          { name: "Noto Sans SC", weights: ["400", "500", "700"] },
        ],
        mono: [{ name: "JetBrains Mono", weights: ["400", "500", "700"] }],
      },
    }),
  ],
  preflights: [
    {
      getCSS: () => `
        :root {
          --un-bg-opacity: 100%;
          --un-text-opacity: 100%;
          --un-border-opacity: 100%;
          --un-ring-opacity: 100%;
          --un-divide-opacity: 100%;
          --un-placeholder-opacity: 100%;
        }
        input:where(:not([type="file"], [type="checkbox"], [type="radio"])),
        textarea,
        select {
          border-style: solid;
          border-width: 1px;
        }
        button:not(:disabled), [role="button"]:not(:disabled) {
          cursor: pointer;
        }
        button:disabled, [role="button"][aria-disabled="true"] {
          cursor: not-allowed;
        }
        ::selection {
          background-color: rgb(var(--theme-200));
          color: rgb(var(--theme-900));
        }
        @media (prefers-color-scheme: dark) {
          ::selection {
            background-color: rgb(var(--theme-800));
            color: rgb(var(--theme-100));
          }
        }
        /* UnoCSS sorts the .dark:divide-* rule alphabetically before the
           .divide-* rule (dark < divide), so the light value would win in
           dark mode.  Pin a sensible default for both schemes here. */
        .divide-y > :not(:last-child) {
          border-color: rgb(229 229 229);
        }
        @media (prefers-color-scheme: dark) {
          .divide-y > :not(:last-child) {
            border-color: rgb(38 38 38);
          }
        }
        @media (prefers-color-scheme: dark) {
          .shiki, .shiki span {
            color: var(--shiki-dark) !important;
            background-color: var(--shiki-dark-bg) !important;
            font-style: var(--shiki-dark-font-style) !important;
            font-weight: var(--shiki-dark-font-weight) !important;
            text-decoration: var(--shiki-dark-text-decoration) !important;
          }
        }
      `,
    },
  ],
  theme: {
    colors: {
      brand: {
        50: "rgb(var(--theme-50))",
        100: "rgb(var(--theme-100))",
        200: "rgb(var(--theme-200))",
        300: "rgb(var(--theme-300))",
        400: "rgb(var(--theme-400))",
        500: "rgb(var(--theme-500))",
        600: "rgb(var(--theme-600))",
        700: "rgb(var(--theme-700))",
        800: "rgb(var(--theme-800))",
        900: "rgb(var(--theme-900))",
        950: "rgb(var(--theme-950))",
        DEFAULT: "rgb(var(--theme-500))",
      },
    },
  },
  content: {
    pipeline: {
      include: [/\.(tsx|ts)($|\?)/],
    },
  },
});