style: 타이포·radius·그림자 토큰 추가 및 폰트 토큰 연결
Co-Authored-By: Claude Opus 5
@35789438b839b5a69a791fe1eb90849c27db0136
--- app/globals.css
+++ app/globals.css
... | ... | @@ -58,9 +58,106 @@ |
| 58 | 58 |
|
| 59 | 59 |
--color-scrim: var(--scrim); |
| 60 | 60 |
|
| 61 |
- --font-sans: var(--font-geist-sans); |
|
| 61 |
+ /* WantedSans 연결 전에도 안전한 폴백(feature 레인이 app/layout.tsx에서 |
|
| 62 |
+ next/font/local로 --font-wanted-sans를 정의). */ |
|
| 63 |
+ --font-sans: var(--font-wanted-sans, system-ui), system-ui, |
|
| 64 |
+ "Apple SD Gothic Neo", sans-serif; |
|
| 62 | 65 |
--font-mono: var(--font-geist-mono); |
| 66 |
+ |
|
| 67 |
+ /* 타이포 토큰 출처: edupay-app lib/ui/core/tokens/app_typography.dart |
|
| 68 |
+ (Figma: FOX PAY 1차 제작시안, node 112:11439). voucher/numeric 등 앱 전용 |
|
| 69 |
+ 스타일은 어드민 무관으로 미이식. */ |
|
| 70 |
+ --text-display-lg: 3rem; |
|
| 71 |
+ --text-display-lg--line-height: 1.5; |
|
| 72 |
+ --text-display-lg--font-weight: 700; |
|
| 73 |
+ |
|
| 74 |
+ --text-display-md: 2.25rem; |
|
| 75 |
+ --text-display-md--line-height: 1.5; |
|
| 76 |
+ --text-display-md--letter-spacing: -0.72px; |
|
| 77 |
+ --text-display-md--font-weight: 700; |
|
| 78 |
+ |
|
| 79 |
+ --text-display-sm: 2rem; |
|
| 80 |
+ --text-display-sm--line-height: 1.5; |
|
| 81 |
+ --text-display-sm--letter-spacing: -0.64px; |
|
| 82 |
+ --text-display-sm--font-weight: 700; |
|
| 83 |
+ |
|
| 84 |
+ --text-headline-lg: 1.5rem; |
|
| 85 |
+ --text-headline-lg--line-height: 1.5; |
|
| 86 |
+ --text-headline-lg--letter-spacing: -0.72px; |
|
| 87 |
+ --text-headline-lg--font-weight: 700; |
|
| 88 |
+ |
|
| 89 |
+ --text-headline-md: 1.25rem; |
|
| 90 |
+ --text-headline-md--line-height: 1.5; |
|
| 91 |
+ --text-headline-md--letter-spacing: -0.6px; |
|
| 92 |
+ --text-headline-md--font-weight: 700; |
|
| 93 |
+ |
|
| 94 |
+ --text-headline-sm: 1.125rem; |
|
| 95 |
+ --text-headline-sm--line-height: 1.3; |
|
| 96 |
+ --text-headline-sm--letter-spacing: -0.54px; |
|
| 97 |
+ --text-headline-sm--font-weight: 700; |
|
| 98 |
+ |
|
| 99 |
+ --text-title-lg: 1.125rem; |
|
| 100 |
+ --text-title-lg--line-height: 1.5; |
|
| 101 |
+ --text-title-lg--font-weight: 700; |
|
| 102 |
+ |
|
| 103 |
+ --text-title-md: 1rem; |
|
| 104 |
+ --text-title-md--line-height: 1.5; |
|
| 105 |
+ --text-title-md--font-weight: 700; |
|
| 106 |
+ |
|
| 107 |
+ --text-title-sm: 0.875rem; |
|
| 108 |
+ --text-title-sm--line-height: 1.5; |
|
| 109 |
+ --text-title-sm--letter-spacing: -0.42px; |
|
| 110 |
+ --text-title-sm--font-weight: 700; |
|
| 111 |
+ |
|
| 112 |
+ --text-body-lg: 1rem; |
|
| 113 |
+ --text-body-lg--line-height: 1.5; |
|
| 114 |
+ --text-body-lg--letter-spacing: -0.48px; |
|
| 115 |
+ --text-body-lg--font-weight: 400; |
|
| 116 |
+ |
|
| 117 |
+ --text-body-md: 0.875rem; |
|
| 118 |
+ --text-body-md--line-height: 1.5; |
|
| 119 |
+ --text-body-md--font-weight: 400; |
|
| 120 |
+ |
|
| 121 |
+ --text-body-sm: 0.75rem; |
|
| 122 |
+ --text-body-sm--line-height: 1.5; |
|
| 123 |
+ --text-body-sm--font-weight: 400; |
|
| 124 |
+ |
|
| 125 |
+ --text-label-lg: 1rem; |
|
| 126 |
+ --text-label-lg--line-height: 1.4; |
|
| 127 |
+ --text-label-lg--letter-spacing: -0.48px; |
|
| 128 |
+ --text-label-lg--font-weight: 700; |
|
| 129 |
+ |
|
| 130 |
+ --text-label-md: 0.875rem; |
|
| 131 |
+ --text-label-md--letter-spacing: -0.28px; |
|
| 132 |
+ --text-label-md--font-weight: 400; |
|
| 133 |
+ |
|
| 134 |
+ --text-label-sm: 0.75rem; |
|
| 135 |
+ --text-label-sm--font-weight: 400; |
|
| 136 |
+ |
|
| 137 |
+ /* radius 토큰 출처: edupay-app lib/ui/core/tokens/app_radius.dart. |
|
| 138 |
+ Tailwind 기본 스케일과 다른 값으로 의도적 재정의(앱 일체화, §8-4 승인). |
|
| 139 |
+ pill(999)은 기본 rounded-full로 충족, card(50)은 앱 전용 미이식. */ |
|
| 140 |
+ --radius-xs: 0.25rem; |
|
| 141 |
+ --radius-sm: 0.5rem; |
|
| 142 |
+ --radius-md: 0.75rem; |
|
| 143 |
+ --radius-lg: 1rem; |
|
| 144 |
+ --radius-xl: 1.25rem; |
|
| 145 |
+ --radius-2xl: 1.5rem; |
|
| 146 |
+ |
|
| 147 |
+ /* 그림자 토큰 출처: edupay-app lib/ui/core/tokens/app_shadows.dart — |
|
| 148 |
+ 어드민 유효분만 이식(voucher inner·stacked 등 미이식). */ |
|
| 149 |
+ --shadow-card: 0 5.16px 5.16px rgb(93 100 119 / 0.12); |
|
| 150 |
+ --shadow-list-card: 0 8px 16px rgb(93 100 119 / 0.12); |
|
| 151 |
+ --shadow-dialog: 0 8px 16px rgb(0 0 0 / 0.1); |
|
| 152 |
+ --shadow-popup: 2.16px 6.32px 6px rgb(177 178 180 / 0.24); |
|
| 153 |
+ --shadow-toast: 0 10px 12px rgb(0 0 0 / 0.2); |
|
| 154 |
+ --shadow-subtle: 0 2px 4px rgb(0 0 0 / 0.08); |
|
| 63 | 155 |
} |
| 156 |
+ |
|
| 157 |
+/* 간격 토큰 매핑 (변경 없음) — edupay-app lib/ui/core/tokens/app_spacing.dart의 |
|
| 158 |
+ 4/8 grid(4·8·12·16·20·24·32·40)는 Tailwind 기본 --spacing: 0.25rem 스케일과 |
|
| 159 |
+ 정확히 일치한다: xs→p-1, sm→p-2, md→p-3, lg→p-4, xl→p-5, xxl→p-6, |
|
| 160 |
+ xxxl→p-8, xxxxl→p-10. */ |
|
| 64 | 161 |
|
| 65 | 162 |
@media (prefers-color-scheme: dark) {
|
| 66 | 163 |
:root {
|
... | ... | @@ -93,5 +190,4 @@ |
| 93 | 190 |
body {
|
| 94 | 191 |
background: var(--background); |
| 95 | 192 |
color: var(--foreground); |
| 96 |
- font-family: Arial, Helvetica, sans-serif; |
|
| 97 | 193 |
} |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?