@loword/loword-design-system 0.0.5 → 0.0.6

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.
Files changed (26) hide show
  1. package/dist/index.css +9 -0
  2. package/package.json +5 -2
  3. package/src/styles/carousel.css +9 -0
  4. package/src/styles/color.css +185 -0
  5. package/src/styles/components/badge.css +41 -0
  6. package/src/styles/components/bread-crumb.css +23 -0
  7. package/src/styles/components/button.css +183 -0
  8. package/src/styles/components/editor.css +147 -0
  9. package/src/styles/components/icon.css +29 -0
  10. package/src/styles/components/index.css +9 -0
  11. package/src/styles/components/input.css +52 -0
  12. package/src/styles/components/modal.css +25 -0
  13. package/src/styles/components/shared.css +52 -0
  14. package/src/styles/components/spinner.css +38 -0
  15. package/src/styles/focus.css +12 -0
  16. package/src/styles/gradient.css +41 -0
  17. package/src/styles/layout.css +19 -0
  18. package/src/styles/motion.css +235 -0
  19. package/src/styles/radius.css +8 -0
  20. package/src/styles/responsive.css +42 -0
  21. package/src/styles/scrollbar.css +59 -0
  22. package/src/styles/slider.css +65 -0
  23. package/src/styles/spacing.css +592 -0
  24. package/src/styles/text-utils.css +7 -0
  25. package/src/styles/typography.css +171 -0
  26. package/src/theme.css +19 -0
package/src/styles/typography.css ADDED
@@ -0,0 +1,171 @@
1
+ @theme {
2
+ --font-pretendard: 'var(--font-pretendard)', sans-serif;
3
+
4
+ /* typography */
5
+ --text-display10: 10px;
6
+ --leading-display10: 14px;
7
+ --tracking-display10: -1px;
8
+
9
+ --text-display12: 12px;
10
+ --leading-display12: 16px;
11
+ --tracking-display12: -1px;
12
+
13
+ --text-display14: 14px;
14
+ --leading-display14: 18px;
15
+ --tracking-display14: -1px;
16
+
17
+ --text-display16: 16px;
18
+ --leading-display16: 20px;
19
+ --tracking-display16: -1px;
20
+
21
+ --text-display18: 18px;
22
+ --leading-display18: 22px;
23
+ --tracking-display18: -1px;
24
+
25
+ --text-display20: 20px;
26
+ --leading-display20: 24px;
27
+ --tracking-display20: -1px;
28
+
29
+ --text-display24: 24px;
30
+ --leading-display24: 28px;
31
+ --tracking-display24: -1px;
32
+
33
+ --text-display28: 28px;
34
+ --leading-display28: 32px;
35
+ --tracking-display28: -1px;
36
+
37
+ --text-display30: 30px;
38
+ --leading-display30: 36px;
39
+ --tracking-display30: -1px;
40
+
41
+ --text-display32: 32px;
42
+ --leading-display32: 38px;
43
+ --tracking-display32: -1px;
44
+
45
+ --text-display36: 36px;
46
+ --leading-display36: 42px;
47
+ --tracking-display36: -1px;
48
+
49
+ --text-display40: 40px;
50
+ --leading-display40: 48px;
51
+ --tracking-display40: -1px;
52
+
53
+ --text-display64: 64px;
54
+ --leading-display64: 72px;
55
+ --tracking-display64: -1px;
56
+
57
+ --text-display80: 80px;
58
+ --leading-display80: 88px;
59
+ --tracking-display80: -1px;
60
+
61
+ --text-display120: 120px;
62
+ --leading-display120: 128px;
63
+ --tracking-display120: -1px;
64
+
65
+ /* font-weight */
66
+ --font-light: 300;
67
+ --font-regular: 400;
68
+ --font-medium: 500;
69
+ --font-semibold: 550;
70
+ --font-bold: 600;
71
+ --font-extrabold: 700;
72
+ --font-black: 900;
73
+ }
74
+
75
+ @utility display10 {
76
+ font-size: var(--text-display10);
77
+ line-height: var(--leading-display10);
78
+ letter-spacing: var(--tracking-display10);
79
+ }
80
+ @utility display12 {
81
+ font-size: var(--text-display12);
82
+ line-height: var(--leading-display12);
83
+ letter-spacing: var(--tracking-display12);
84
+ }
85
+ @utility display14 {
86
+ font-size: var(--text-display14);
87
+ line-height: var(--leading-display14);
88
+ letter-spacing: var(--tracking-display14);
89
+ }
90
+ @utility display16 {
91
+ font-size: var(--text-display16);
92
+ line-height: var(--leading-display16);
93
+ letter-spacing: var(--tracking-display16);
94
+ }
95
+ @utility display18 {
96
+ font-size: var(--text-display18);
97
+ line-height: var(--leading-display18);
98
+ letter-spacing: var(--tracking-display18);
99
+ }
100
+ @utility display20 {
101
+ font-size: var(--text-display20);
102
+ line-height: var(--leading-display20);
103
+ letter-spacing: var(--tracking-display20);
104
+ }
105
+ @utility display24 {
106
+ font-size: var(--text-display24);
107
+ line-height: var(--leading-display24);
108
+ letter-spacing: var(--tracking-display24);
109
+ }
110
+ @utility display28 {
111
+ font-size: var(--text-display28);
112
+ line-height: var(--leading-display28);
113
+ letter-spacing: var(--tracking-display28);
114
+ }
115
+ @utility display30 {
116
+ font-size: var(--text-display30);
117
+ line-height: var(--leading-display30);
118
+ letter-spacing: var(--tracking-display30);
119
+ }
120
+ @utility display32 {
121
+ font-size: var(--text-display32);
122
+ line-height: var(--leading-display32);
123
+ letter-spacing: var(--tracking-display32);
124
+ }
125
+ @utility display36 {
126
+ font-size: var(--text-display36);
127
+ line-height: var(--leading-display36);
128
+ letter-spacing: var(--tracking-display36);
129
+ }
130
+ @utility display40 {
131
+ font-size: var(--text-display40);
132
+ line-height: var(--leading-display40);
133
+ letter-spacing: var(--tracking-display40);
134
+ }
135
+ @utility display64 {
136
+ font-size: var(--text-display64);
137
+ line-height: var(--leading-display64);
138
+ letter-spacing: var(--tracking-display64);
139
+ }
140
+ @utility display80 {
141
+ font-size: var(--text-display80);
142
+ line-height: var(--leading-display80);
143
+ letter-spacing: var(--tracking-display80);
144
+ }
145
+ @utility display120 {
146
+ font-size: var(--text-display120);
147
+ line-height: var(--leading-display120);
148
+ letter-spacing: var(--tracking-display120);
149
+ }
150
+
151
+ @utility light {
152
+ font-weight: var(--font-light);
153
+ }
154
+ @utility regular {
155
+ font-weight: var(--font-regular);
156
+ }
157
+ @utility medium {
158
+ font-weight: var(--font-medium);
159
+ }
160
+ @utility semibold {
161
+ font-weight: var(--font-semibold);
162
+ }
163
+ @utility bold {
164
+ font-weight: var(--font-bold);
165
+ }
166
+ @utility extrabold {
167
+ font-weight: var(--font-extrabold);
168
+ }
169
+ @utility black {
170
+ font-weight: var(--font-black);
171
+ }
package/src/theme.css ADDED
@@ -0,0 +1,19 @@
1
+ /**
2
+ * theme.css — 소비처(ledu-mono 등)의 Tailwind 컴파일러가 직접 처리하는
3
+ * raw @theme/@utility 진입점.
4
+ *
5
+ * 컴파일된 dist/index.css(styles.css)와 달리 토큰·유틸 정의가 원문 그대로 남아있어,
6
+ * 소비처가 자기 코드에 대해 `display40`, `bg-mono600` 같은 클래스를 on-demand로 생성할 수 있다.
7
+ *
8
+ * 주의:
9
+ * - `@import 'tailwindcss'`를 넣지 않는다. 소비처가 이미 import하므로 중복되면 충돌난다.
10
+ * - 컴포넌트 스타일(components/*, slider/carousel 등)은 포함하지 않는다 — styles.css가 담당.
11
+ */
12
+ @import './styles/color.css';
13
+ @import './styles/typography.css';
14
+ @import './styles/text-utils.css';
15
+ @import './styles/radius.css';
16
+ @import './styles/spacing.css';
17
+ @import './styles/layout.css';
18
+ @import './styles/gradient.css';
19
+ @import './styles/motion.css';