vscode-codeimg/uno.config.ts at master · subframe7536/vscode-codeimg · 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 type { Theme } from 'unocss/preset-mini'

import { presetIcons, presetWind3, transformerVariantGroup } from 'unocss'
import { presetClassCompletion } from 'unocss-preset-completion'
import { defineConfig } from 'unocss/vite'

export default defineConfig<Theme>({
  presets: [
    presetWind3(),
    presetIcons({
      scale: 1.2,
      unit: 'rem',
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
    }),
    presetClassCompletion(),
  ],
  shortcuts: [
    {
      'ui-outline': 'outline-none ring-(2 ring offset-2)',
      'glass-border': 'glass-border-light dark:glass-border-dark',
      'flash': 'overflow-hidden pos-relative after:(animate-[move_.75s_ease-in-out] content-empty absolute -translate-x-100% bg-[linear-gradient(45deg,#fff0_40%,#fff9,#fff0_60%)] -inset-50%)',
    },
    [/ui-disable(-\d+)?$/, ([, num]) => `cursor-not-allowed opacity-${num ? num.substring(1) : 50} pointer-events-none`],
  ],
  rules: [
    [/^config-style-padding$/, () => ({ padding: 'var(--padding)' })],
    [/^config-style-bg$/, () => ({ background: 'var(--bg)' })],
    [/^config-style-radius$/, () => ({ 'border-radius': 'var(--radius)' })],
    [/^config-style-liga$/, () => ({ 'font-feature-settings': 'var(--liga)' })],
    [/^config-style-tab$/, () => ({ 'tab-size': 'var(--tab,2)' })],
    [/^bg-pattern$/, () => ({
      'background-image': 'linear-gradient(45deg, #6663 25%, transparent 0), linear-gradient(-45deg, #6663 25%, transparent 0), linear-gradient(45deg, transparent 75%, #6663 0), linear-gradient(-45deg, transparent 75%, #6663 0)',
      'background-position': '0 0, 0 10px, 10px -10px, -10px 0',
      'background-size': '20px 20px',
    })],
    [/^shadow-none$/, () => ({ 'box-shadow': 'none' })],
    [/^title-size$/, () => ({
      'font-size': 'calc(var(--vscode-editor-font-size) * 0.8)',
    })],
    [/^glass-border-dark$/, () => ({
      'box-shadow': '0 0 0 1px rgba(0 0 0 / 0.1), 0 0 0 1px rgba(0 0 0 / 0.9), inset 0 0 0 1.5px rgba(255 255 255 / 0.4), 0 30px 55px 0 rgba(0 0 0 / 0.4)',
    })],
    [/^glass-border-light$/, () => ({
      'box-shadow': '0 0 15px rgba(0 0 0 / .2), 0 0 0 1px rgba(0 0 0 / .1), 0 0 0 1px rgb(0 0 0 / .05), inset 0 0 0 1px rgba(255 255 255 / .15), rgba(0 0 0 / 0.45) 0 25px 20px -20px',
    })],
    [/^traffic-light-color$/, () => ({
      'background-color': '#ff544d',
      'box-shadow': '1.3rem 0 0 0 #ffbd2e, 2.6rem 0 0 0 #28c93f',
    })],
    [/^traffic-light-plain$/, () => ({
      'background-color': 'var(--vscode-editor-inactiveSelectionBackground)',
      'box-shadow': '1.4rem 0 0 0 var(--vscode-editor-inactiveSelectionBackground), 2.8rem 0 0 0 var(--vscode-editor-inactiveSelectionBackground)',
    })],
  ],
  transformers: [
    transformerVariantGroup(),
  ],
  theme: {
    breakpoints: {
      mini: '540px',
    },
  },
  preflights: [
    {
      getCSS: () => `
        body {
          padding: 1.5rem;
          background: transparent !important;
        }
        ::selection {
          background: var(--vscode-selection-background);
        }
        @keyframes move { to { transform: translateX(100%); } }
      `,
    },
  ],
  safelist: [
    'shadow-none',
    'shadow-sm',
    'shadow-lg',
    'shadow-2xl',
    'w-48',
    'w-12',
    'h-56',
    'h-4',
  ],
})