Bilibili-Gate/uno.config.ts at main · magicdawn/Bilibili-Gate · 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
import { presetRemToPx } from '@unocss/preset-rem-to-px'
import { createRemToPxProcessor } from '@unocss/preset-wind4/utils'
import { defineConfig, presetWind3, presetWind4, transformerDirectives, transformerVariantGroup } from 'unocss'

const usingWind3 = defineConfig({
  presets: [
    presetRemToPx() as any,
    presetWind3({
      preflight: 'on-demand',
      dark: { dark: '.bilibili-gate-using-dark', light: '.bilibili-gate-using-light' },
    }),
  ],
})

const usingWind4 = defineConfig({
  presets: [
    presetWind4({
      preflights: {
        reset: false,
        theme: { mode: 'on-demand', process: createRemToPxProcessor() },
      },
      dark: { dark: '.bilibili-gate-using-dark' },
    }),
  ],
  postprocess: [createRemToPxProcessor()],
})

/**
 * 影响 @unocss/eslint-config className 顺序
 * - wind4 有 bug, 会按照 alphabetical 排序
 */

// const USE_WIND4 = false
// const usingConfig = USE_WIND4 ? usingWind4 : usingWind3
const usingConfig = usingWind3

export default defineConfig({
  ...usingConfig,

  transformers: [transformerDirectives(), transformerVariantGroup()],

  // https://github.com/unocss/unocss/issues/1620
  blocklist: ['container'],

  theme: {
    colors: {
      gate: {
        primary: {
          DEFAULT: 'var(--bilibili-gate--primary-color)',
          lv: {
            1: 'var(--bilibili-gate--primary-color--lv1)',
            2: 'var(--bilibili-gate--primary-color--lv2)',
            3: 'var(--bilibili-gate--primary-color--lv3)',
          },
        },
        border: 'var(--bilibili-gate--border-color)',
        text: 'var(--bilibili-gate--text-color)',
        bg: {
          DEFAULT: 'var(--bilibili-gate--bg)',
          lv: {
            1: 'var(--bilibili-gate--bg--lv1)',
            2: 'var(--bilibili-gate--bg--lv2)',
            3: 'var(--bilibili-gate--bg--lv3)',
          },
        },
      },
      bili: {
        brand: {
          pink: 'var(--brand_pink)',
          blue: 'var(--brand_blue)',
        },
      },
    },
    zIndex: {
      // 'gate-toast': 'var(--bilibili-gate--z-toast)',
    },
    borderRadius: {
      'gate-video-card': 'var(--bilibili-gate--video-card--border-radius)',
    },
  },

  shortcuts: {
    'flex-v-center': 'flex items-center',
    'flex-center': 'flex items-center justify-center',
    'inline-flex-center': 'inline-flex items-center justify-center',

    'icon-only-round-button': 'flex-center size-32px p-0 rounded-50%',
    'inline-icon-only-round-button': 'inline-flex-center size-32px p-0 rounded-50%',
  },
})