@mzc-fe/design-system 0.0.10 → 0.0.11-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tailwind-theme.css +80 -0
- package/package.json +3 -2
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tailwind CSS v4 테마 선언 파일 (Single Source of Truth)
|
|
3
|
+
*
|
|
4
|
+
* DS 내부 빌드와 소비자 앱 모두에서 사용되는 @theme 등록 정보입니다.
|
|
5
|
+
* - DS 내부: index.css에서 import하여 Tailwind 유틸리티 클래스 생성에 사용
|
|
6
|
+
* - 소비자 앱: dist/tailwind-theme.css로 배포되어 커스텀 색상·간격 유틸리티 생성
|
|
7
|
+
*
|
|
8
|
+
* 소비자 앱 사용법:
|
|
9
|
+
* @import '@mzc-fe/design-system/dist/design-system.css';
|
|
10
|
+
* @import '@mzc-fe/design-system/dist/tailwind-theme.css';
|
|
11
|
+
* @import 'tailwindcss';
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
@theme inline {
|
|
15
|
+
/* === Spacing === */
|
|
16
|
+
--spacing: 4px;
|
|
17
|
+
|
|
18
|
+
/* === Colors === */
|
|
19
|
+
--color-accent-1: var(--accent-1);
|
|
20
|
+
--color-accent-2: var(--accent-2);
|
|
21
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
22
|
+
--color-background: var(--background);
|
|
23
|
+
--color-border: var(--border);
|
|
24
|
+
--color-card: var(--card);
|
|
25
|
+
--color-card-foreground: var(--card-foreground);
|
|
26
|
+
--color-foreground: var(--foreground);
|
|
27
|
+
--color-input: var(--input);
|
|
28
|
+
--color-muted: var(--muted);
|
|
29
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
30
|
+
--color-popover: var(--popover);
|
|
31
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
32
|
+
--color-primary: var(--primary);
|
|
33
|
+
--color-primary-weak: var(--primary-weak);
|
|
34
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
35
|
+
--color-ring: var(--ring);
|
|
36
|
+
--color-ring-offset: var(--ring-offset);
|
|
37
|
+
--color-secondary: var(--secondary);
|
|
38
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
39
|
+
--color-chart-1: var(--chart-1);
|
|
40
|
+
--color-chart-2: var(--chart-2);
|
|
41
|
+
--color-chart-3: var(--chart-3);
|
|
42
|
+
--color-chart-4: var(--chart-4);
|
|
43
|
+
--color-chart-5: var(--chart-5);
|
|
44
|
+
--color-sidebar: var(--sidebar);
|
|
45
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
46
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
47
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
48
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
49
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
50
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
51
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
52
|
+
--color-error: var(--error);
|
|
53
|
+
--color-error-subtle: var(--error-subtle);
|
|
54
|
+
--color-error-foreground: var(--error-foreground);
|
|
55
|
+
--color-error-muted-foreground: var(--error-muted-foreground);
|
|
56
|
+
--color-error-accent-foreground: var(--error-accent-foreground);
|
|
57
|
+
--color-error-muted-background: var(--error-muted-background);
|
|
58
|
+
--color-error-muted-border: var(--error-muted-border);
|
|
59
|
+
--color-safe: var(--safe);
|
|
60
|
+
--color-safe-subtle: var(--safe-subtle);
|
|
61
|
+
--color-safe-foreground: var(--safe-foreground);
|
|
62
|
+
--color-safe-muted-foreground: var(--safe-muted-foreground);
|
|
63
|
+
--color-safe-accent-foreground: var(--safe-accent-foreground);
|
|
64
|
+
--color-safe-muted-background: var(--safe-muted-background);
|
|
65
|
+
--color-safe-muted-border: var(--safe-muted-border);
|
|
66
|
+
--color-warning: var(--warning);
|
|
67
|
+
--color-warning-subtle: var(--warning-subtle);
|
|
68
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
69
|
+
--color-warning-muted-foreground: var(--warning-muted-foreground);
|
|
70
|
+
--color-warning-accent-foreground: var(--warning-accent-foreground);
|
|
71
|
+
--color-warning-muted-background: var(--warning-muted-background);
|
|
72
|
+
--color-warning-muted-border: var(--warning-muted-border);
|
|
73
|
+
--color-info: var(--info);
|
|
74
|
+
--color-info-subtle: var(--info-subtle);
|
|
75
|
+
--color-info-foreground: var(--info-foreground);
|
|
76
|
+
--color-info-muted-foreground: var(--info-muted-foreground);
|
|
77
|
+
--color-info-accent-foreground: var(--info-accent-foreground);
|
|
78
|
+
--color-info-muted-background: var(--info-muted-background);
|
|
79
|
+
--color-info-muted-border: var(--info-muted-border);
|
|
80
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mzc-fe/design-system",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.11-rc.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
"types": "./dist/index.d.ts",
|
|
18
18
|
"import": "./dist/index.js"
|
|
19
19
|
},
|
|
20
|
-
"./dist/design-system.css": "./dist/design-system.css"
|
|
20
|
+
"./dist/design-system.css": "./dist/design-system.css",
|
|
21
|
+
"./dist/tailwind-theme.css": "./dist/tailwind-theme.css"
|
|
21
22
|
},
|
|
22
23
|
"peerDependencies": {
|
|
23
24
|
"react": ">=18.0.0",
|