Vuedation/uno.config.ts at main · annrie/Vuedation · 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
118
import {
  createLocalFontProcessor,
} from '@unocss/preset-web-fonts/local'
import {
  defineConfig,
  presetAttributify,
  presetTypography,
  presetUno,
  presetWebFonts,
} from 'unocss'
import presetIcons from '@unocss/preset-icons'
import transformerVariantGroup from '@unocss/transformer-variant-group'
import transformerDirectives from '@unocss/transformer-directives'
import transformerCompileClass from '@unocss/transformer-compile-class'
import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx'
import { presetHeroPatterns } from '@julr/unocss-preset-heropatterns'
import { presetExtra } from 'unocss-preset-extra'
import presetRemToPx from '@unocss/preset-rem-to-px'
const FormKitVariants = require('@formkit/themes/unocss')

export default defineConfig({
  theme: {
    breakpoints: {
      sm: '320px',
      md: '640px',
      tb: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
     colors: {
       'white': '#fefefe',
       'black': '#0a0a0a',
       'primary': '#1779ba',
       'secondary': '#767676',
       'success': '#3adb76',
       'warning': '#ffae00',
       'alert': '#cc4b37',
       'jis-red': '#ff4b00',
       'jis-orange': '"#f6aa00',
       'jis-yellow': '#f2e700',
       'jis-green': '#00b06b',
       'jis-blue': '#1971ff',
       'jis-magenta': '#990'
     },
     backgroundColor: (theme) => ({
       ...theme('colors'),
       'white': '#fefefe',
       'black': '#0a0a0a',
       'red': '#ff4b00', // rgb (255,75,0)
       'orange': '#f6aa00', // rgb (246,170,0)
       'yellow': '#f2e700', // rgb (242,231,0)
       'green': '#00b06b', // rgb (0,176,107)
       'blue': '#1971ff', //  rgb (25,113,255)
       'magenta': '#990', // rgb (153,0,153)
       'main': '#42b883',
       'primary': '#1779ba',
       'secondary': '#767676',
       'success': '#3adb76',
       'warning': '#ffae00',
       'alert': '#cc4b37',
     }),
  },
  shortcuts: [
    [
      'btn',
      'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50',
    ],
    [
      'icon-btn',
      'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600',
    ],
  ],
  presets: [
    presetUno({
      dark: 'class',
    }),
    presetAttributify(),
    presetIcons({
      // scale: 1.2,
      // warn: true,
      display: 'inline-block',
      'vertical-align': 'middle',
    }),
    presetTypography(),
    presetHeroPatterns(),
//    presetRemToPx(),
    presetExtra(),
    presetWebFonts({
      fonts: {
        sans: 'DM Sans',
        serif: 'DM Serif Display',
        mono: 'DM Mono',
      },
      processors: createLocalFontProcessor(),
    }),
  ],
  variants: [
    // hover:
    (matcher) => {
      if (!matcher.startsWith('hover:')) return matcher
      return {
        // slice `hover:` prefix and passed to the next variants and rules
        matcher: matcher.slice(6),
        selector: (s) => `${s}:hover`,
      }
    },
  ],
  rules: [[/^m-(\d)$/, ([, d]) => ({margin: `${d / 4}rem`})]],
  transformers: [transformerDirectives(), transformerVariantGroup(),transformerCompileClass(),transformerAttributifyJsx()],
  safelist: 'prose prose-sm m-auto text-left'.split(' '),
	blocklist: ['container'],
  content: [
    './src/**/*.{html,js,ts,jsx,tsx,vue,svelte,astro}',
    './node_modules/@formkit/themes/dist/unocss/genesis/index.cjs',
  ],
  plugins: [FormKitVariants],
})