@3w-witim/ui 0.1.0

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.
@@ -0,0 +1,134 @@
1
+ /** WITIM design tokens for Tailwind — consumes CSS vars from tokens.css (theme-aware) */
2
+ module.exports = {
3
+ "theme": {
4
+ "extend": {
5
+ "colors": {
6
+ "witim": {
7
+ "primary": {
8
+ "10": "var(--color-witim-primary-10)",
9
+ "20": "var(--color-witim-primary-20)",
10
+ "30": "var(--color-witim-primary-30)",
11
+ "40": "var(--color-witim-primary-40)",
12
+ "50": "var(--color-witim-primary-50)",
13
+ "60": "var(--color-witim-primary-60)",
14
+ "70": "var(--color-witim-primary-70)",
15
+ "80": "var(--color-witim-primary-80)",
16
+ "90": "var(--color-witim-primary-90)",
17
+ "100": "var(--color-witim-primary-100)"
18
+ },
19
+ "red": {
20
+ "10": "var(--color-witim-red-10)",
21
+ "20": "var(--color-witim-red-20)",
22
+ "30": "var(--color-witim-red-30)",
23
+ "40": "var(--color-witim-red-40)",
24
+ "50": "var(--color-witim-red-50)",
25
+ "60": "var(--color-witim-red-60)",
26
+ "70": "var(--color-witim-red-70)",
27
+ "80": "var(--color-witim-red-80)",
28
+ "90": "var(--color-witim-red-90)",
29
+ "100": "var(--color-witim-red-100)"
30
+ },
31
+ "gray": {
32
+ "10": "var(--color-witim-gray-10)",
33
+ "20": "var(--color-witim-gray-20)",
34
+ "30": "var(--color-witim-gray-30)",
35
+ "40": "var(--color-witim-gray-40)",
36
+ "50": "var(--color-witim-gray-50)",
37
+ "60": "var(--color-witim-gray-60)",
38
+ "70": "var(--color-witim-gray-70)",
39
+ "80": "var(--color-witim-gray-80)",
40
+ "90": "var(--color-witim-gray-90)",
41
+ "100": "var(--color-witim-gray-100)"
42
+ }
43
+ },
44
+ "bg": {
45
+ "base": "var(--color-bg-base)",
46
+ "subtle": "var(--color-bg-subtle)",
47
+ "emphasis": "var(--color-bg-emphasis)"
48
+ },
49
+ "surface": {
50
+ "default": "var(--color-surface-default)",
51
+ "raised": "var(--color-surface-raised)",
52
+ "sunken": "var(--color-surface-sunken)",
53
+ "hover": "var(--color-surface-hover)",
54
+ "pressed": "var(--color-surface-pressed)"
55
+ },
56
+ "text": {
57
+ "strong": "var(--color-text-strong)",
58
+ "default": "var(--color-text-default)",
59
+ "subtle": "var(--color-text-subtle)",
60
+ "disabled": "var(--color-text-disabled)",
61
+ "on-brand": "var(--color-text-on-brand)"
62
+ },
63
+ "border": {
64
+ "subtle": "var(--color-border-subtle)",
65
+ "default": "var(--color-border-default)",
66
+ "strong": "var(--color-border-strong)",
67
+ "focus": "var(--color-border-focus)"
68
+ },
69
+ "brand": {
70
+ "solid": "var(--color-brand-solid)",
71
+ "solid-hover": "var(--color-brand-solid-hover)",
72
+ "solid-pressed": "var(--color-brand-solid-pressed)",
73
+ "subtle": "var(--color-brand-subtle)",
74
+ "text": "var(--color-brand-text)",
75
+ "border": "var(--color-brand-border)",
76
+ "soft": "var(--color-brand-soft)"
77
+ },
78
+ "danger": {
79
+ "solid": "var(--color-danger-solid)",
80
+ "solid-hover": "var(--color-danger-solid-hover)",
81
+ "subtle": "var(--color-danger-subtle)",
82
+ "text": "var(--color-danger-text)",
83
+ "border": "var(--color-danger-border)"
84
+ },
85
+ "sidebar": {
86
+ "bg": "var(--color-sidebar-bg)",
87
+ "accent": "var(--color-sidebar-accent)",
88
+ "fg": "var(--color-sidebar-fg)",
89
+ "accent-fg": "var(--color-sidebar-accent-fg)"
90
+ },
91
+ "rail": {
92
+ "active": "var(--color-rail-active)",
93
+ "active-fg": "var(--color-rail-active-fg)"
94
+ },
95
+ "chart": {
96
+ "muted": "var(--color-chart-muted)"
97
+ },
98
+ "presence": {
99
+ "away-bg": "var(--color-presence-away-bg)",
100
+ "away-fg": "var(--color-presence-away-fg)",
101
+ "offline": "var(--color-presence-offline)"
102
+ }
103
+ },
104
+ "boxShadow": {
105
+ "xs": "var(--shadow-xs)",
106
+ "sm": "var(--shadow-sm)",
107
+ "md": "var(--shadow-md)",
108
+ "lg": "var(--shadow-lg)",
109
+ "xl": "var(--shadow-xl)",
110
+ "card": "var(--elevation-card)",
111
+ "dropdown": "var(--elevation-dropdown)",
112
+ "popover": "var(--elevation-popover)",
113
+ "modal": "var(--elevation-modal)",
114
+ "toast": "var(--elevation-toast)"
115
+ },
116
+ // Foundation radius 바인딩 (값 보존): rounded=xs(4) · rounded-lg=sm(8) · rounded-full.
117
+ // 20px(radius-lg)은 rounded-[var(--radius-lg)]로 사용. md/xl/2xl/3xl는 Tailwind 기본 유지.
118
+ "borderRadius": {
119
+ "DEFAULT": "var(--radius-xs)",
120
+ "lg": "var(--radius-sm)",
121
+ "full": "var(--radius-full)"
122
+ },
123
+ // Foundation border-width 바인딩 (값 보존): border=1 · border-2=2.
124
+ "borderWidth": {
125
+ "DEFAULT": "var(--border-width-1)",
126
+ "2": "var(--border-width-2)"
127
+ },
128
+ // Foundation typography(글꼴) 바인딩.
129
+ "fontFamily": {
130
+ "sans": "var(--font-sans)"
131
+ }
132
+ }
133
+ }
134
+ };