DmNote/tailwind.config.js at main · DmNote-App/DmNote · 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
/** @type {import('tailwindcss').Config} */

// 색·모션·그림자 값의 단일 소스는 src/renderer/styles/tokens.css
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx,html}'],
  theme: {
    extend: {
      borderRadius: {
        md: 'var(--ui-radius-inner)',
        surface: 'var(--ui-radius-surface)',
        popup: 'var(--ui-radius-popup)',
        modal: 'var(--ui-radius-modal)',
      },
      colors: {
        app: 'var(--ui-bg-app)',
        panel: 'var(--ui-bg-panel)',
        'panel-detached': 'var(--ui-bg-panel-detached)',
        surface: 'var(--ui-bg-surface)',
        elevated: 'var(--ui-bg-elevated)',
        inset: 'var(--ui-bg-inset)',
        'inset-solid': 'var(--ui-bg-inset-solid)',
        glass: 'var(--ui-glass)',
        'glass-heavy': 'var(--ui-glass-heavy)',
        'glass-dim': 'var(--ui-glass-dim)',
        'glass-panel': 'var(--ui-glass-panel)',
        'glass-panel-solid': 'var(--ui-glass-panel-solid)',
        'glass-dim-solid': 'var(--ui-glass-dim-solid)',
        line: {
          DEFAULT: 'var(--ui-line)',
          strong: 'var(--ui-line-strong)',
        },
        fill: {
          DEFAULT: 'var(--ui-fill)',
          hover: 'var(--ui-fill-hover)',
          active: 'var(--ui-fill-active)',
          faint: 'var(--ui-fill-faint)',
        },
        fg: {
          DEFAULT: 'var(--ui-fg)',
          strong: 'var(--ui-fg-strong)',
          muted: 'var(--ui-fg-muted)',
          caption: 'var(--ui-fg-caption)',
          faint: 'var(--ui-fg-faint)',
          disabled: 'var(--ui-fg-disabled)',
        },
        scrim: 'var(--ui-scrim)',
        control: {
          knob: 'var(--ui-control-knob)',
          'track-off': 'var(--ui-control-track-off)',
          'track-off-hover': 'var(--ui-control-track-off-hover)',
        },
        handle: {
          DEFAULT: 'var(--ui-handle-fill)',
          ring: 'var(--ui-handle-ring)',
        },
        accent: {
          DEFAULT: 'var(--ui-accent)',
          hover: 'var(--ui-accent-hover)',
          active: 'var(--ui-accent-active)',
          muted: 'var(--ui-accent-muted)',
          fg: 'var(--ui-accent-fg)',
          deep: 'var(--ui-accent-deep)',
          'deep-hover': 'var(--ui-accent-deep-hover)',
          'deep-active': 'var(--ui-accent-deep-active)',
        },
        danger: {
          DEFAULT: 'var(--ui-danger)',
          hover: 'var(--ui-danger-hover)',
          active: 'var(--ui-danger-active)',
          muted: 'var(--ui-danger-muted)',
          'muted-hover': 'var(--ui-danger-muted-hover)',
          'muted-active': 'var(--ui-danger-muted-active)',
          fg: 'var(--ui-danger-fg)',
        },
        success: {
          DEFAULT: 'var(--ui-success)',
          muted: 'var(--ui-success-muted)',
        },
        warning: {
          DEFAULT: 'var(--ui-warning)',
          muted: 'var(--ui-warning-muted)',
        },
      },
      fontFamily: {
        sans: [
          'Pretendard Variable',
          'Pretendard',
          '-apple-system',
          'BlinkMacSystemFont',
          'system-ui',
          'Segoe UI',
          'sans-serif',
        ],
      },
      transitionDuration: {
        fast: '120ms',
        base: '180ms',
        slow: '240ms',
      },
      transitionTimingFunction: {
        'out-expo': 'cubic-bezier(0.16, 1, 0.3, 1)',
        'in-out-smooth': 'cubic-bezier(0.65, 0, 0.35, 1)',
      },
      boxShadow: {
        'elevation-1': 'var(--ui-shadow-1)',
        'elevation-2': 'var(--ui-shadow-2)',
        'elevation-3': 'var(--ui-shadow-3)',
        'elevation-popup': 'var(--ui-shadow-popup)',
        'elevation-chrome': 'var(--ui-shadow-chrome)',
        'elevation-panel': 'var(--ui-shadow-panel)',
        handle: 'var(--ui-handle-shadow)',
        'focus-ring': 'var(--ui-focus-ring)',
        'danger-ring': 'var(--ui-danger-ring)',
      },
    },
  },
  plugins: [
    function ({ addUtilities }) {
      addUtilities({
        // 타이포그래피 스케일 — 위계는 크기+웨이트+행간 세트로만 표현
        '.text-caption': {
          fontSize: '11px',
          lineHeight: '16px',
          letterSpacing: '0.01em',
          fontWeight: '500',
        },
        '.text-body': {
          fontSize: '12px',
          lineHeight: '18px',
          letterSpacing: '0',
          fontWeight: '500',
        },
        '.text-label': {
          fontSize: '13px',
          lineHeight: '18px',
          letterSpacing: '0',
          fontWeight: '500',
        },
        '.text-title': {
          fontSize: '14px',
          lineHeight: '20px',
          letterSpacing: '-0.01em',
          fontWeight: '600',
        },
        '.text-heading': {
          fontSize: '16px',
          lineHeight: '22px',
          letterSpacing: '-0.014em',
          fontWeight: '700',
        },
      });
    },
  ],
};