my-personal-blog/uno.config.ts at main · Yusaku01/my-personal-blog · 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
import { defineConfig, presetTypography, presetIcons } from 'unocss';
import presetWind3 from '@unocss/preset-wind3';
import transformerVariantGroup from '@unocss/transformer-variant-group';
import transformerDirectives from '@unocss/transformer-directives';

export default defineConfig({
  safelist: ['i-ic-round-content-copy', 'i-ic-round-check', 'i-ic-round-list', 'i-ic-round-close'],
  presets: [
    presetWind3(), // Tailwind互換の基本機能
    presetTypography({
      cssExtend: {
        p: {
          'font-size': 'var(--fs-body)',
        },
        h1: {
          'font-size': 'var(--fs-h1)',
        },
        h2: {
          'font-size': 'var(--fs-h2)',
        },
        h3: {
          'font-size': 'var(--fs-h3)',
        },
        h4: {
          'font-size': 'var(--fs-h4)',
        },
        h5: {
          'font-size': 'var(--fs-h5)',
        },
        h6: {
          'font-size': 'var(--fs-h6)',
        },
      },
    }), // Tailwindの@tailwindcss/typographyの代替
    presetIcons({
      scale: 1.2,
      mode: 'auto',
      prefix: 'i-',
      extraProperties: {
        display: 'inline-block',
        'vertical-align': 'middle',
      },
      collections: {
        ic: () => import('@iconify-json/ic/icons.json').then((i) => i.default),
      },
      // cdn: 'https://esm.sh/', // ← collections指定したら不要です
    }),
  ],
  transformers: [
    transformerVariantGroup(), // バリアント機能の拡張
    transformerDirectives(), // CSSディレクティブ
  ],
  theme: {
    // tailwind.config.mjsからの設定移行
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
    extend: {
      typography: {
        DEFAULT: {
          css: {
            maxWidth: 'none',
          },
        },
      },
      colors: {
        // モノトーンカラーパレットの拡張
        gray: {
          50: '#f9fafb',
          100: '#f3f4f6',
          200: '#e5e7eb',
          300: '#d1d5db',
          400: '#9ca3af',
          500: '#6b7280',
          600: '#4b5563',
          700: '#374151',
          800: '#1f2937',
          900: '#111827',
          950: '#030712',
        },
      },
    },
  },
  // カスタムルールや省略形
  shortcuts: {
    // コンテナ用の省略形
    'container-base': 'px-4 mx-auto',
    'container-sm': 'max-w-2xl px-4 mx-auto',
    'container-md': 'max-w-4xl px-4 mx-auto',
    'container-lg': 'max-w-[1132px] px-4 mx-auto',
    'container-xl': 'max-w-6xl px-4 mx-auto',
    'container-2xl': 'max-w-7xl px-4 mx-auto',

    // カードコンポーネント用の省略形
    'card-base':
      'bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-200 h-full',
    'card-hoverable': 'lg:hover:shadow-md',

    // ボタン用の省略形
    'btn-primary':
      'px-6 py-3 bg-gray-800 text-white rounded-md lg:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors disabled:opacity-70 dark:bg-white dark:text-gray-900 dark:lg:hover:bg-gray-300 dark:focus:ring-gray-300 dark:focus:ring-offset-gray-300 font-bold tracking-wide',

    // サイズバリアント
    'btn-sm': 'px-3 py-1.5 text-sm rounded',
    'btn-md': 'px-4 py-2 text-base rounded-md',
    'btn-lg': 'px-6 py-3 text-lg rounded-lg',

    // 入力フィールド用の省略形
    'input-base':
      'w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-offset-0 transition-colors',
    'input-primary': 'border-gray-300 focus:border-gray-500 focus:ring-gray-500',
    'input-error': 'border-red-300 focus:border-red-500 focus:ring-red-500',

    // 見出し用の省略形
    'heading-base': 'font-semibold text-gray-900 dark:text-white',
    'heading-h1': '[font-size:var(--fs-h1)]',
    'heading-h2': '[font-size:var(--fs-h2)]',
    'heading-h3': '[font-size:var(--fs-h3)]',
    'heading-h4': '[font-size:var(--fs-h4)]',
    'heading-h5': '[font-size:var(--fs-h5)]',
    'heading-h6': '[font-size:var(--fs-h6)]',

    // ブログ関連の省略形
    'blog-search-form': 'mb-8 max-w-xl mx-auto relative',
    'blog-search-input':
      'w-full px-4 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 bg-white dark:bg-white dark:border-none',
    'blog-search-button':
      'absolute top-0 right-0 px-4 py-2 text-sm bg-gray-800 text-white lg:hover:opacity-70 transition-all duration-300 rounded-r-md h-full font-bold leading-loose dark:border-none',
    'blog-load-more-button':
      'mx-auto mt-8 px-6 py-2 bg-gray-800 text-white rounded-md lg:hover:opacity-70 transition-all duration-300 dark:bg-gray-200 dark:text-gray-800 font-bold',

    // アスペクト比
    'aspect-thumnail': 'aspect-[40/21]',
  },
  rules: [],
});