Commit @dd547e087ebb194554ed8f4f5486268a06710e9d

임동욱 07-27

style: edupay-app 색상 토큰 이식 및 라이트/다크 시맨틱 컬러 정의

Co-Authored-By: Claude Opus 5

@dd547e087ebb194554ed8f4f5486268a06710e9d

beb4650

dd547e0

app/globals.css

--- app/globals.css

+++ app/globals.css


 @import "tailwindcss";
 
+/* 색상 토큰 출처: edupay-app lib/ui/core/tokens/app_colors.dart
+   (Figma: FOX PAY 1차 제작시안, node 91:10205). 다크 값은 edupay-app에 대응
+   다크 시안이 없어 "임의 도출 — 정식 다크 시안 확정 시 교체". */
 :root {
+  /* Brand */
+  --primary: #502ef5;
+  --primary-container: #6d5ce7;
+  --on-primary: #ffffff;
+  --on-primary-container: #e2e0fb;
+  --secondary: #877aec;
+
+  /* Surface / background (원 토큰: surface / gray0) */
   --background: #ffffff;
-  --foreground: #171717;
-  /* 임시 값, 디자인 확정 전 — 에러/위험 상태 표시용 (initial-security-setup, 로그인 실패 메시지) */
-  --danger: #dc2626;
+  --surface: #ffffff;
+  --surface-muted: #f5f7fa;
+
+  /* Foreground / text (원 토큰: onSurface 계열) */
+  --foreground: #2c3038;
+  --foreground-muted: #565d6b;
+  --foreground-subtle: #6b7486;
+
+  /* Border (원 토큰: outline 계열) */
+  --border: #dae0ed;
+  --border-subtle: #e1e6f1;
+
+  /* Status */
+  --danger: #ec2e2f;
+  --success: #21b770;
+  --warning: #ffb020;
+
+  /* Overlay */
+  --scrim: rgb(0 0 0 / 0.6);
 }
 
 @theme inline {
+  --color-primary: var(--primary);
+  --color-primary-container: var(--primary-container);
+  --color-on-primary: var(--on-primary);
+  --color-on-primary-container: var(--on-primary-container);
+  --color-secondary: var(--secondary);
+
   --color-background: var(--background);
+  --color-surface: var(--surface);
+  --color-surface-muted: var(--surface-muted);
+
   --color-foreground: var(--foreground);
+  --color-foreground-muted: var(--foreground-muted);
+  --color-foreground-subtle: var(--foreground-subtle);
+
+  --color-border: var(--border);
+  --color-border-subtle: var(--border-subtle);
+
   --color-danger: var(--danger);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+
+  --color-scrim: var(--scrim);
+
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-    /* 임시 값, 디자인 확정 전 */
-    --danger: #f87171;
+    /* 임의 도출 — 정식 다크 시안 확정 시 교체 */
+    --primary: #877aec;
+    --primary-container: #502ef5;
+    --on-primary: #ffffff;
+    --on-primary-container: #e2e0fb;
+    --secondary: #9b92ff;
+
+    --background: #14161b;
+    --surface: #1e2128;
+    --surface-muted: #2c3038;
+
+    --foreground: #f5f7fa;
+    --foreground-muted: #bbc4d8;
+    --foreground-subtle: #8790a3;
+
+    --border: #424752;
+    --border-subtle: #343943;
+
+    --danger: #ff5c5d;
+    --success: #3acb93;
+    --warning: #ffc24d;
+
+    --scrim: rgb(0 0 0 / 0.7);
   }
 }
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,26 +1,92 @@
1	1	@import "tailwindcss";
2	2
	3	+/* 색상 토큰 출처: edupay-app lib/ui/core/tokens/app_colors.dart
	4	+ (Figma: FOX PAY 1차 제작시안, node 91:10205). 다크 값은 edupay-app에 대응
	5	+ 다크 시안이 없어 "임의 도출 — 정식 다크 시안 확정 시 교체". */
3	6	:root {
	7	+ /* Brand */
	8	+ --primary: #502ef5;
	9	+ --primary-container: #6d5ce7;
	10	+ --on-primary: #ffffff;
	11	+ --on-primary-container: #e2e0fb;
	12	+ --secondary: #877aec;
	13	+
	14	+ /* Surface / background (원 토큰: surface / gray0) */
4	15	--background: #ffffff;
5		- --foreground: #171717;
6		- /* 임시 값, 디자인 확정 전 — 에러/위험 상태 표시용 (initial-security-setup, 로그인 실패 메시지) */
7		- --danger: #dc2626;
	16	+ --surface: #ffffff;
	17	+ --surface-muted: #f5f7fa;
	18	+
	19	+ /* Foreground / text (원 토큰: onSurface 계열) */
	20	+ --foreground: #2c3038;
	21	+ --foreground-muted: #565d6b;
	22	+ --foreground-subtle: #6b7486;
	23	+
	24	+ /* Border (원 토큰: outline 계열) */
	25	+ --border: #dae0ed;
	26	+ --border-subtle: #e1e6f1;
	27	+
	28	+ /* Status */
	29	+ --danger: #ec2e2f;
	30	+ --success: #21b770;
	31	+ --warning: #ffb020;
	32	+
	33	+ /* Overlay */
	34	+ --scrim: rgb(0 0 0 / 0.6);
8	35	}
9	36
10	37	@theme inline {
	38	+ --color-primary: var(--primary);
	39	+ --color-primary-container: var(--primary-container);
	40	+ --color-on-primary: var(--on-primary);
	41	+ --color-on-primary-container: var(--on-primary-container);
	42	+ --color-secondary: var(--secondary);
	43	+
11	44	--color-background: var(--background);
	45	+ --color-surface: var(--surface);
	46	+ --color-surface-muted: var(--surface-muted);
	47	+
12	48	--color-foreground: var(--foreground);
	49	+ --color-foreground-muted: var(--foreground-muted);
	50	+ --color-foreground-subtle: var(--foreground-subtle);
	51	+
	52	+ --color-border: var(--border);
	53	+ --color-border-subtle: var(--border-subtle);
	54	+
13	55	--color-danger: var(--danger);
	56	+ --color-success: var(--success);
	57	+ --color-warning: var(--warning);
	58	+
	59	+ --color-scrim: var(--scrim);
	60	+
14	61	--font-sans: var(--font-geist-sans);
15	62	--font-mono: var(--font-geist-mono);
16	63	}
17	64
18	65	@media (prefers-color-scheme: dark) {
19	66	:root {
20		- --background: #0a0a0a;
21		- --foreground: #ededed;
22		- /* 임시 값, 디자인 확정 전 */
23		- --danger: #f87171;
	67	+ /* 임의 도출 — 정식 다크 시안 확정 시 교체 */
	68	+ --primary: #877aec;
	69	+ --primary-container: #502ef5;
	70	+ --on-primary: #ffffff;
	71	+ --on-primary-container: #e2e0fb;
	72	+ --secondary: #9b92ff;
	73	+
	74	+ --background: #14161b;
	75	+ --surface: #1e2128;
	76	+ --surface-muted: #2c3038;
	77	+
	78	+ --foreground: #f5f7fa;
	79	+ --foreground-muted: #bbc4d8;
	80	+ --foreground-subtle: #8790a3;
	81	+
	82	+ --border: #424752;
	83	+ --border-subtle: #343943;
	84	+
	85	+ --danger: #ff5c5d;
	86	+ --success: #3acb93;
	87	+ --warning: #ffc24d;
	88	+
	89	+ --scrim: rgb(0 0 0 / 0.7);
24	90	}
25	91	}
26	92

Delete comment