@remember-web/mixin 0.3.1 → 0.4.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.
Files changed (13) hide show
  1. package/dist/colors/token.css +50 -0
  2. package/dist/mediaQuery/token.css +10 -0
  3. package/dist/preset.css +4 -0
  4. package/dist/spacing/token.css +47 -0
  5. package/dist/typography/font.css +60 -0
  6. package/dist/typography/token.css +167 -0
  7. package/package.json +27 -3
  8. package/src/colors/token.css +50 -0
  9. package/src/mediaQuery/token.css +10 -0
  10. package/src/preset.css +4 -0
  11. package/src/spacing/token.css +47 -0
  12. package/src/typography/font.css +60 -0
  13. package/src/typography/token.css +167 -0
package/dist/colors/token.css ADDED
@@ -0,0 +1,50 @@
1
+ @theme {
2
+ /* Primary */
3
+ --color-primary-100: #000000;
4
+ --color-primary-200: #FFFFFF;
5
+
6
+ /* Secondary */
7
+ --color-secondary-100: #FF6A0D;
8
+
9
+ /* Contents - txt/label/border/divider */
10
+ --color-contents-000: #000000;
11
+ --color-contents-100: #424242;
12
+ --color-contents-150: #808080;
13
+ --color-contents-200: #BDBDBD;
14
+ --color-contents-300: #D4D4D4;
15
+ --color-contents-999: #FFFFFF;
16
+
17
+ /* Disabled - disabled CTA */
18
+ --color-disabled: #D4D4D4;
19
+ --color-disabled-role-red: #F7ABAB;
20
+ --color-disabled-secondary: #FFE3D1;
21
+
22
+ /* Role - Accent/Error/Link */
23
+ --color-role-red: #ED4E4E;
24
+ --color-role-yellow: #EDC84E;
25
+ --color-role-blue: #0B69EB;
26
+ --color-role-green: #239E7B;
27
+
28
+ /* Background */
29
+ --color-bg-100: #FFFFFF;
30
+ --color-bg-200: #FAFAFA;
31
+ --color-bg-300: #F2F2F2;
32
+ --color-bg-modal-100: #FFFFFF;
33
+ --color-bg-modal-200: #FAFAFA;
34
+ --color-bg-role-red: #FFF5F5;
35
+ --color-bg-secondary-100: #FFF4ED;
36
+ --color-bg-highlight: #FCF5DC;
37
+ --color-bg-tiny-highlight: #FAEDC3;
38
+ --color-bg-role-yellow: #FFFDF5;
39
+ --color-bg-role-blue: #EDF4FF;
40
+ --color-bg-role-green: #D9FCF2;
41
+
42
+ /* Divider */
43
+ --color-divider: #D4D4D4;
44
+ --color-divider-lite: #EBEBEB;
45
+
46
+ /* Fixed */
47
+ --color-fixed-white: #FFFFFF;
48
+ --color-fixed-bg-white: #FFFFFF;
49
+ --color-fixed-black: #000000;
50
+ }
package/dist/mediaQuery/token.css ADDED
@@ -0,0 +1,10 @@
1
+ /**
2
+ * RUI Breakpoint Tokens for Tailwind v4
3
+ */
4
+ @custom-variant mobile (@media (max-width: 767px));
5
+ @custom-variant desktop (@media (min-width: 768px));
6
+ @custom-variant phone (@media (max-width: 430px));
7
+
8
+ @theme {
9
+ --breakpoint-*: initial;
10
+ }
package/dist/preset.css ADDED
@@ -0,0 +1,4 @@
1
+ @import './colors/token.css';
2
+ @import './typography/token.css';
3
+ @import './mediaQuery/token.css';
4
+ @import './spacing/token.css';
package/dist/spacing/token.css ADDED
@@ -0,0 +1,47 @@
1
+ @theme {
2
+ --text-*: initial;
3
+ --leading-*: initial;
4
+ --spacing-*: initial;
5
+ --radius-*: initial;
6
+
7
+ /* Spacing - 정적 값 */
8
+ --spacing-0: 0px;
9
+ --spacing-2: 2px;
10
+ --spacing-4: 4px;
11
+ --spacing-8: 8px;
12
+ --spacing-12: 12px;
13
+ --spacing-16: 16px;
14
+ --spacing-20: 20px;
15
+ --spacing-24: 24px;
16
+ --spacing-32: 32px;
17
+ --spacing-40: 40px;
18
+ --spacing-44: 44px;
19
+ --spacing-48: 48px;
20
+ --spacing-52: 52px;
21
+ --spacing-56: 56px;
22
+ --spacing-64: 64px;
23
+ --spacing-72: 72px;
24
+ --spacing-80: 80px;
25
+
26
+ /* radius */
27
+ --radius-0: 0px;
28
+ --radius-2: 2px;
29
+ --radius-4: 4px;
30
+ --radius-8: 8px;
31
+ --radius-12: 12px;
32
+ --radius-16: 16px;
33
+ --radius-20: 20px;
34
+ --radius-24: 24px;
35
+ --radius-32: 32px;
36
+ --radius-40: 40px;
37
+ --radius-44: 44px;
38
+ --radius-48: 48px;
39
+ --radius-52: 52px;
40
+ --radius-56: 56px;
41
+ --radius-64: 64px;
42
+ --radius-72: 72px;
43
+ --radius-80: 80px;
44
+
45
+ /* Max Width */
46
+ --max-width-content: 1120px;
47
+ }
package/dist/typography/font.css ADDED
@@ -0,0 +1,60 @@
1
+ @font-face {
2
+ font-family: 'Pretendard';
3
+ font-weight: 400;
4
+ font-display: swap;
5
+ font-style: normal;
6
+ src:
7
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-Regular.subset.woff2')
8
+ format('woff2'),
9
+ /* Super Modern Browsers */
10
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-Regular.subset.woff')
11
+ format('woff');
12
+ }
13
+ @font-face {
14
+ font-family: 'Pretendard';
15
+ font-weight: 500;
16
+ font-display: swap;
17
+ font-style: normal;
18
+ src:
19
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-Medium.subset.woff2')
20
+ format('woff2'),
21
+ /* Super Modern Browsers */
22
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-Medium.subset.woff')
23
+ format('woff');
24
+ }
25
+ @font-face {
26
+ font-family: 'Pretendard';
27
+ font-weight: 600;
28
+ font-display: swap;
29
+ font-style: normal;
30
+ src:
31
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-SemiBold.subset.woff2')
32
+ format('woff2'),
33
+ /* Super Modern Browsers */
34
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-SemiBold.subset.woff')
35
+ format('woff');
36
+ }
37
+ @font-face {
38
+ font-family: 'Pretendard';
39
+ font-weight: 700;
40
+ font-display: swap;
41
+ font-style: normal;
42
+ src:
43
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-Bold.subset.woff2')
44
+ format('woff2'),
45
+ /* Super Modern Browsers */
46
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-Bold.subset.woff')
47
+ format('woff');
48
+ }
49
+ @font-face {
50
+ font-family: 'Pretendard';
51
+ font-weight: 800;
52
+ font-display: swap;
53
+ font-style: normal;
54
+ src:
55
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-ExtraBold.subset.woff2')
56
+ format('woff2'),
57
+ /* Super Modern Browsers */
58
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-ExtraBold.subset.woff')
59
+ format('woff');
60
+ }
package/dist/typography/token.css ADDED
@@ -0,0 +1,167 @@
1
+ /**
2
+ * RUI Typography Utility Classes
3
+ *
4
+ * TYPOGRAPHY_STYLES를 기반으로 생성된 유틸리티 클래스
5
+ * 플러그인 없이 CSS만으로 사용 가능
6
+ */
7
+ @theme {
8
+ --font-sans: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif
9
+ }
10
+
11
+ /* Display Title */
12
+ @utility typography-display-title1 {
13
+ font-size: 48px;
14
+ line-height: 1.3;
15
+ font-weight: 700;
16
+ }
17
+
18
+ @utility typography-display-title2 {
19
+ font-size: 40px;
20
+ line-height: 1.3;
21
+ font-weight: 700;
22
+ }
23
+
24
+ @utility typography-display-title3 {
25
+ font-size: 32px;
26
+ line-height: 1.3;
27
+ font-weight: 700;
28
+ }
29
+
30
+ /* Headline */
31
+ @utility typography-headline {
32
+ font-size: 24px;
33
+ line-height: 1.3;
34
+ font-weight: 600;
35
+ }
36
+
37
+ /* Title */
38
+ @utility typography-title1 {
39
+ font-size: 20px;
40
+ line-height: 1.3;
41
+ font-weight: 600;
42
+ }
43
+
44
+ @utility typography-title2 {
45
+ font-size: 18px;
46
+ line-height: 1.3;
47
+ font-weight: 600;
48
+ }
49
+
50
+ /* SubTitle */
51
+ @utility typography-sub-title1 {
52
+ font-size: 16px;
53
+ line-height: 1.3;
54
+ font-weight: 600;
55
+ }
56
+
57
+ @utility typography-sub-title2 {
58
+ font-size: 14px;
59
+ line-height: 1.3;
60
+ font-weight: 600;
61
+ }
62
+
63
+ /* Display Body */
64
+ @utility typography-display-body {
65
+ font-size: 20px;
66
+ line-height: 1.45;
67
+ font-weight: 400;
68
+ }
69
+
70
+ /* UI Body */
71
+ @utility typography-ui-body1 {
72
+ font-size: 18px;
73
+ line-height: 1.45;
74
+ font-weight: 400;
75
+ }
76
+
77
+ @utility typography-ui-body1-bold {
78
+ font-size: 18px;
79
+ line-height: 1.45;
80
+ font-weight: 600;
81
+ }
82
+
83
+ @utility typography-ui-body2 {
84
+ font-size: 16px;
85
+ line-height: 1.45;
86
+ font-weight: 400;
87
+ }
88
+
89
+ @utility typography-ui-body2-bold {
90
+ font-size: 16px;
91
+ line-height: 1.45;
92
+ font-weight: 600;
93
+ }
94
+
95
+ @utility typography-ui-body3 {
96
+ font-size: 14px;
97
+ line-height: 1.45;
98
+ font-weight: 400;
99
+ }
100
+
101
+ @utility typography-ui-body3-bold {
102
+ font-size: 14px;
103
+ line-height: 1.45;
104
+ font-weight: 600;
105
+ }
106
+
107
+ /* Article Body */
108
+ @utility typography-article-body1 {
109
+ font-size: 18px;
110
+ line-height: 1.55;
111
+ font-weight: 400;
112
+ }
113
+
114
+ @utility typography-article-body1-bold {
115
+ font-size: 18px;
116
+ line-height: 1.55;
117
+ font-weight: 600;
118
+ }
119
+
120
+ @utility typography-article-body2 {
121
+ font-size: 16px;
122
+ line-height: 1.6;
123
+ font-weight: 400;
124
+ }
125
+
126
+ @utility typography-article-body2-bold {
127
+ font-size: 16px;
128
+ line-height: 1.6;
129
+ font-weight: 600;
130
+ }
131
+
132
+ @utility typography-article-body3 {
133
+ font-size: 14px;
134
+ line-height: 1.6;
135
+ font-weight: 400;
136
+ }
137
+
138
+ @utility typography-article-body3-bold {
139
+ font-size: 14px;
140
+ line-height: 1.6;
141
+ font-weight: 600;
142
+ }
143
+
144
+ /* Caption */
145
+ @utility typography-caption1 {
146
+ font-size: 12px;
147
+ line-height: 1.35;
148
+ font-weight: 500;
149
+ }
150
+
151
+ @utility typography-caption1-bold {
152
+ font-size: 12px;
153
+ line-height: 1.35;
154
+ font-weight: 600;
155
+ }
156
+
157
+ @utility typography-caption2 {
158
+ font-size: 10px;
159
+ line-height: 1.35;
160
+ font-weight: 500;
161
+ }
162
+
163
+ @utility typography-caption2-bold {
164
+ font-size: 10px;
165
+ line-height: 1.35;
166
+ font-weight: 600;
167
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remember-web/mixin",
3
- "version": "0.3.1",
3
+ "version": "0.4.0",
4
4
  "description": "Remember Web Mixins",
5
5
  "homepage": "https://dramancompany.github.io/remember-web-packages/",
6
6
  "author": "Remember",
@@ -31,11 +31,35 @@
31
31
  "import": "./dist/src/index.esm.js",
32
32
  "require": "./dist/src/index.cjs.js",
33
33
  "types": "./dist/src/index.d.ts"
34
+ },
35
+ "./preset.css": {
36
+ "style": "./dist/preset.css",
37
+ "default": "./dist/preset.css"
38
+ },
39
+ "./colors.css": {
40
+ "style": "./dist/colors/token.css",
41
+ "default": "./dist/colors/token.css"
42
+ },
43
+ "./spacing.css": {
44
+ "style": "./dist/spacing/token.css",
45
+ "default": "./dist/spacing/token.css"
46
+ },
47
+ "./typography.css": {
48
+ "style": "./dist/typography/token.css",
49
+ "default": "./dist/typography/token.css"
50
+ },
51
+ "./mediaQuery.css": {
52
+ "style": "./dist/mediaQuery/token.css",
53
+ "default": "./dist/mediaQuery/token.css"
54
+ },
55
+ "./font.css": {
56
+ "style": "./dist/typography/font.css",
57
+ "default": "./dist/typography/font.css"
34
58
  }
35
59
  },
36
60
  "dependencies": {
37
61
  "@babel/runtime": "^7.24.4",
38
- "@remember-web/shared": "^0.1.0"
62
+ "@remember-web/shared": "^0.1.2"
39
63
  },
40
64
  "devDependencies": {
41
65
  "@babel/core": "^7.24.4",
@@ -57,7 +81,7 @@
57
81
  "typescript": "^5.4.5"
58
82
  },
59
83
  "peerDependencies": {
60
- "react": "^18.2.0",
84
+ "react": "^18.0.0 || ^19.0.0",
61
85
  "styled-components": ">=6"
62
86
  }
63
87
  }
package/src/colors/token.css ADDED
@@ -0,0 +1,50 @@
1
+ @theme {
2
+ /* Primary */
3
+ --color-primary-100: #000000;
4
+ --color-primary-200: #FFFFFF;
5
+
6
+ /* Secondary */
7
+ --color-secondary-100: #FF6A0D;
8
+
9
+ /* Contents - txt/label/border/divider */
10
+ --color-contents-000: #000000;
11
+ --color-contents-100: #424242;
12
+ --color-contents-150: #808080;
13
+ --color-contents-200: #BDBDBD;
14
+ --color-contents-300: #D4D4D4;
15
+ --color-contents-999: #FFFFFF;
16
+
17
+ /* Disabled - disabled CTA */
18
+ --color-disabled: #D4D4D4;
19
+ --color-disabled-role-red: #F7ABAB;
20
+ --color-disabled-secondary: #FFE3D1;
21
+
22
+ /* Role - Accent/Error/Link */
23
+ --color-role-red: #ED4E4E;
24
+ --color-role-yellow: #EDC84E;
25
+ --color-role-blue: #0B69EB;
26
+ --color-role-green: #239E7B;
27
+
28
+ /* Background */
29
+ --color-bg-100: #FFFFFF;
30
+ --color-bg-200: #FAFAFA;
31
+ --color-bg-300: #F2F2F2;
32
+ --color-bg-modal-100: #FFFFFF;
33
+ --color-bg-modal-200: #FAFAFA;
34
+ --color-bg-role-red: #FFF5F5;
35
+ --color-bg-secondary-100: #FFF4ED;
36
+ --color-bg-highlight: #FCF5DC;
37
+ --color-bg-tiny-highlight: #FAEDC3;
38
+ --color-bg-role-yellow: #FFFDF5;
39
+ --color-bg-role-blue: #EDF4FF;
40
+ --color-bg-role-green: #D9FCF2;
41
+
42
+ /* Divider */
43
+ --color-divider: #D4D4D4;
44
+ --color-divider-lite: #EBEBEB;
45
+
46
+ /* Fixed */
47
+ --color-fixed-white: #FFFFFF;
48
+ --color-fixed-bg-white: #FFFFFF;
49
+ --color-fixed-black: #000000;
50
+ }
package/src/mediaQuery/token.css ADDED
@@ -0,0 +1,10 @@
1
+ /**
2
+ * RUI Breakpoint Tokens for Tailwind v4
3
+ */
4
+ @custom-variant mobile (@media (max-width: 767px));
5
+ @custom-variant desktop (@media (min-width: 768px));
6
+ @custom-variant phone (@media (max-width: 430px));
7
+
8
+ @theme {
9
+ --breakpoint-*: initial;
10
+ }
package/src/preset.css ADDED
@@ -0,0 +1,4 @@
1
+ @import './colors/token.css';
2
+ @import './typography/token.css';
3
+ @import './mediaQuery/token.css';
4
+ @import './spacing/token.css';
package/src/spacing/token.css ADDED
@@ -0,0 +1,47 @@
1
+ @theme {
2
+ --text-*: initial;
3
+ --leading-*: initial;
4
+ --spacing-*: initial;
5
+ --radius-*: initial;
6
+
7
+ /* Spacing - 정적 값 */
8
+ --spacing-0: 0px;
9
+ --spacing-2: 2px;
10
+ --spacing-4: 4px;
11
+ --spacing-8: 8px;
12
+ --spacing-12: 12px;
13
+ --spacing-16: 16px;
14
+ --spacing-20: 20px;
15
+ --spacing-24: 24px;
16
+ --spacing-32: 32px;
17
+ --spacing-40: 40px;
18
+ --spacing-44: 44px;
19
+ --spacing-48: 48px;
20
+ --spacing-52: 52px;
21
+ --spacing-56: 56px;
22
+ --spacing-64: 64px;
23
+ --spacing-72: 72px;
24
+ --spacing-80: 80px;
25
+
26
+ /* radius */
27
+ --radius-0: 0px;
28
+ --radius-2: 2px;
29
+ --radius-4: 4px;
30
+ --radius-8: 8px;
31
+ --radius-12: 12px;
32
+ --radius-16: 16px;
33
+ --radius-20: 20px;
34
+ --radius-24: 24px;
35
+ --radius-32: 32px;
36
+ --radius-40: 40px;
37
+ --radius-44: 44px;
38
+ --radius-48: 48px;
39
+ --radius-52: 52px;
40
+ --radius-56: 56px;
41
+ --radius-64: 64px;
42
+ --radius-72: 72px;
43
+ --radius-80: 80px;
44
+
45
+ /* Max Width */
46
+ --max-width-content: 1120px;
47
+ }
package/src/typography/font.css ADDED
@@ -0,0 +1,60 @@
1
+ @font-face {
2
+ font-family: 'Pretendard';
3
+ font-weight: 400;
4
+ font-display: swap;
5
+ font-style: normal;
6
+ src:
7
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-Regular.subset.woff2')
8
+ format('woff2'),
9
+ /* Super Modern Browsers */
10
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-Regular.subset.woff')
11
+ format('woff');
12
+ }
13
+ @font-face {
14
+ font-family: 'Pretendard';
15
+ font-weight: 500;
16
+ font-display: swap;
17
+ font-style: normal;
18
+ src:
19
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-Medium.subset.woff2')
20
+ format('woff2'),
21
+ /* Super Modern Browsers */
22
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-Medium.subset.woff')
23
+ format('woff');
24
+ }
25
+ @font-face {
26
+ font-family: 'Pretendard';
27
+ font-weight: 600;
28
+ font-display: swap;
29
+ font-style: normal;
30
+ src:
31
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-SemiBold.subset.woff2')
32
+ format('woff2'),
33
+ /* Super Modern Browsers */
34
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-SemiBold.subset.woff')
35
+ format('woff');
36
+ }
37
+ @font-face {
38
+ font-family: 'Pretendard';
39
+ font-weight: 700;
40
+ font-display: swap;
41
+ font-style: normal;
42
+ src:
43
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-Bold.subset.woff2')
44
+ format('woff2'),
45
+ /* Super Modern Browsers */
46
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-Bold.subset.woff')
47
+ format('woff');
48
+ }
49
+ @font-face {
50
+ font-family: 'Pretendard';
51
+ font-weight: 800;
52
+ font-display: swap;
53
+ font-style: normal;
54
+ src:
55
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-ExtraBold.subset.woff2')
56
+ format('woff2'),
57
+ /* Super Modern Browsers */
58
+ url('https://cdn.rememberapp.co.kr/assets/font/Pretendard-ExtraBold.subset.woff')
59
+ format('woff');
60
+ }
package/src/typography/token.css ADDED
@@ -0,0 +1,167 @@
1
+ /**
2
+ * RUI Typography Utility Classes
3
+ *
4
+ * TYPOGRAPHY_STYLES를 기반으로 생성된 유틸리티 클래스
5
+ * 플러그인 없이 CSS만으로 사용 가능
6
+ */
7
+ @theme {
8
+ --font-sans: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif
9
+ }
10
+
11
+ /* Display Title */
12
+ @utility typography-display-title1 {
13
+ font-size: 48px;
14
+ line-height: 1.3;
15
+ font-weight: 700;
16
+ }
17
+
18
+ @utility typography-display-title2 {
19
+ font-size: 40px;
20
+ line-height: 1.3;
21
+ font-weight: 700;
22
+ }
23
+
24
+ @utility typography-display-title3 {
25
+ font-size: 32px;
26
+ line-height: 1.3;
27
+ font-weight: 700;
28
+ }
29
+
30
+ /* Headline */
31
+ @utility typography-headline {
32
+ font-size: 24px;
33
+ line-height: 1.3;
34
+ font-weight: 600;
35
+ }
36
+
37
+ /* Title */
38
+ @utility typography-title1 {
39
+ font-size: 20px;
40
+ line-height: 1.3;
41
+ font-weight: 600;
42
+ }
43
+
44
+ @utility typography-title2 {
45
+ font-size: 18px;
46
+ line-height: 1.3;
47
+ font-weight: 600;
48
+ }
49
+
50
+ /* SubTitle */
51
+ @utility typography-sub-title1 {
52
+ font-size: 16px;
53
+ line-height: 1.3;
54
+ font-weight: 600;
55
+ }
56
+
57
+ @utility typography-sub-title2 {
58
+ font-size: 14px;
59
+ line-height: 1.3;
60
+ font-weight: 600;
61
+ }
62
+
63
+ /* Display Body */
64
+ @utility typography-display-body {
65
+ font-size: 20px;
66
+ line-height: 1.45;
67
+ font-weight: 400;
68
+ }
69
+
70
+ /* UI Body */
71
+ @utility typography-ui-body1 {
72
+ font-size: 18px;
73
+ line-height: 1.45;
74
+ font-weight: 400;
75
+ }
76
+
77
+ @utility typography-ui-body1-bold {
78
+ font-size: 18px;
79
+ line-height: 1.45;
80
+ font-weight: 600;
81
+ }
82
+
83
+ @utility typography-ui-body2 {
84
+ font-size: 16px;
85
+ line-height: 1.45;
86
+ font-weight: 400;
87
+ }
88
+
89
+ @utility typography-ui-body2-bold {
90
+ font-size: 16px;
91
+ line-height: 1.45;
92
+ font-weight: 600;
93
+ }
94
+
95
+ @utility typography-ui-body3 {
96
+ font-size: 14px;
97
+ line-height: 1.45;
98
+ font-weight: 400;
99
+ }
100
+
101
+ @utility typography-ui-body3-bold {
102
+ font-size: 14px;
103
+ line-height: 1.45;
104
+ font-weight: 600;
105
+ }
106
+
107
+ /* Article Body */
108
+ @utility typography-article-body1 {
109
+ font-size: 18px;
110
+ line-height: 1.55;
111
+ font-weight: 400;
112
+ }
113
+
114
+ @utility typography-article-body1-bold {
115
+ font-size: 18px;
116
+ line-height: 1.55;
117
+ font-weight: 600;
118
+ }
119
+
120
+ @utility typography-article-body2 {
121
+ font-size: 16px;
122
+ line-height: 1.6;
123
+ font-weight: 400;
124
+ }
125
+
126
+ @utility typography-article-body2-bold {
127
+ font-size: 16px;
128
+ line-height: 1.6;
129
+ font-weight: 600;
130
+ }
131
+
132
+ @utility typography-article-body3 {
133
+ font-size: 14px;
134
+ line-height: 1.6;
135
+ font-weight: 400;
136
+ }
137
+
138
+ @utility typography-article-body3-bold {
139
+ font-size: 14px;
140
+ line-height: 1.6;
141
+ font-weight: 600;
142
+ }
143
+
144
+ /* Caption */
145
+ @utility typography-caption1 {
146
+ font-size: 12px;
147
+ line-height: 1.35;
148
+ font-weight: 500;
149
+ }
150
+
151
+ @utility typography-caption1-bold {
152
+ font-size: 12px;
153
+ line-height: 1.35;
154
+ font-weight: 600;
155
+ }
156
+
157
+ @utility typography-caption2 {
158
+ font-size: 10px;
159
+ line-height: 1.35;
160
+ font-weight: 500;
161
+ }
162
+
163
+ @utility typography-caption2-bold {
164
+ font-size: 10px;
165
+ line-height: 1.35;
166
+ font-weight: 600;
167
+ }