@kusitms/tokens 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.
Files changed (6) hide show
  1. package/package.json +25 -0
  2. package/src/index.css +132 -0
  3. package/src/raw-tokens.json +1095 -0
  4. package/src/themes.css +132 -0
  5. package/src/tokens.json +166 -0
  6. package/src/typography.css +325 -0
package/src/themes.css ADDED
@@ -0,0 +1,132 @@
1
+ @theme inline {
2
+ --color-cool-netural-1: var(--cool-netural-1);
3
+ --color-cool-netural-5: var(--cool-netural-5);
4
+ --color-cool-netural-10: var(--cool-netural-10);
5
+ --color-cool-netural-20: var(--cool-netural-20);
6
+ --color-cool-netural-30: var(--cool-netural-30);
7
+ --color-cool-netural-40: var(--cool-netural-40);
8
+ --color-cool-netural-50: var(--cool-netural-50);
9
+ --color-cool-netural-60: var(--cool-netural-60);
10
+ --color-cool-netural-70: var(--cool-netural-70);
11
+ --color-cool-netural-80: var(--cool-netural-80);
12
+ --color-cool-netural-90: var(--cool-netural-90);
13
+ --color-cool-netural-95: var(--cool-netural-95);
14
+ --color-netural-5: var(--netural-5);
15
+ --color-netural-10: var(--netural-10);
16
+ --color-netural-20: var(--netural-20);
17
+ --color-netural-30: var(--netural-30);
18
+ --color-netural-40: var(--netural-40);
19
+ --color-netural-50: var(--netural-50);
20
+ --color-netural-60: var(--netural-60);
21
+ --color-netural-70: var(--netural-70);
22
+ --color-netural-80: var(--netural-80);
23
+ --color-netural-90: var(--netural-90);
24
+ --color-netural-95: var(--netural-95);
25
+ --color-blue-5: var(--blue-5);
26
+ --color-blue-10: var(--blue-10);
27
+ --color-blue-20: var(--blue-20);
28
+ --color-blue-30: var(--blue-30);
29
+ --color-blue-40: var(--blue-40);
30
+ --color-blue-50: var(--blue-50);
31
+ --color-blue-60: var(--blue-60);
32
+ --color-blue-70: var(--blue-70);
33
+ --color-blue-80: var(--blue-80);
34
+ --color-blue-90: var(--blue-90);
35
+ --color-blue-95: var(--blue-95);
36
+ --color-orange-5: var(--orange-5);
37
+ --color-orange-10: var(--orange-10);
38
+ --color-orange-20: var(--orange-20);
39
+ --color-orange-30: var(--orange-30);
40
+ --color-orange-40: var(--orange-40);
41
+ --color-orange-50: var(--orange-50);
42
+ --color-orange-60: var(--orange-60);
43
+ --color-orange-70: var(--orange-70);
44
+ --color-orange-80: var(--orange-80);
45
+ --color-orange-90: var(--orange-90);
46
+ --color-orange-95: var(--orange-95);
47
+ --color-green-5: var(--green-5);
48
+ --color-green-10: var(--green-10);
49
+ --color-green-20: var(--green-20);
50
+ --color-green-30: var(--green-30);
51
+ --color-green-40: var(--green-40);
52
+ --color-green-50: var(--green-50);
53
+ --color-green-60: var(--green-60);
54
+ --color-green-70: var(--green-70);
55
+ --color-green-80: var(--green-80);
56
+ --color-green-90: var(--green-90);
57
+ --color-green-95: var(--green-95);
58
+ --color-red-5: var(--red-5);
59
+ --color-red-10: var(--red-10);
60
+ --color-red-20: var(--red-20);
61
+ --color-red-30: var(--red-30);
62
+ --color-red-40: var(--red-40);
63
+ --color-red-50: var(--red-50);
64
+ --color-red-60: var(--red-60);
65
+ --color-red-70: var(--red-70);
66
+ --color-red-80: var(--red-80);
67
+ --color-red-90: var(--red-90);
68
+ --color-red-95: var(--red-95);
69
+ --color-sky-blue-5: var(--sky-blue-5);
70
+ --color-sky-blue-10: var(--sky-blue-10);
71
+ --color-sky-blue-20: var(--sky-blue-20);
72
+ --color-sky-blue-30: var(--sky-blue-30);
73
+ --color-sky-blue-40: var(--sky-blue-40);
74
+ --color-sky-blue-50: var(--sky-blue-50);
75
+ --color-sky-blue-60: var(--sky-blue-60);
76
+ --color-sky-blue-70: var(--sky-blue-70);
77
+ --color-sky-blue-80: var(--sky-blue-80);
78
+ --color-sky-blue-90: var(--sky-blue-90);
79
+ --color-sky-blue-95: var(--sky-blue-95);
80
+ --color-indigo-5: var(--indigo-5);
81
+ --color-indigo-10: var(--indigo-10);
82
+ --color-indigo-20: var(--indigo-20);
83
+ --color-indigo-30: var(--indigo-30);
84
+ --color-indigo-40: var(--indigo-40);
85
+ --color-indigo-50: var(--indigo-50);
86
+ --color-indigo-60: var(--indigo-60);
87
+ --color-indigo-70: var(--indigo-70);
88
+ --color-indigo-80: var(--indigo-80);
89
+ --color-indigo-90: var(--indigo-90);
90
+ --color-indigo-95: var(--indigo-95);
91
+ --color-common-0: var(--common-0);
92
+ --color-common-100: var(--common-100);
93
+ --color-brand-logo: var(--brand-logo);
94
+ --color-status-positive: var(--status-positive);
95
+ --color-status-negative: var(--status-negative);
96
+ --color-status-cautionary: var(--status-cautionary);
97
+ --color-brand-primary: var(--brand-primary);
98
+ --color-brand-secondary: var(--brand-secondary);
99
+ --color-brand-assisitve: var(--brand-assisitve);
100
+ --color-brand-tertiary: var(--brand-tertiary);
101
+ --color-brand-strong: var(--brand-strong);
102
+ --color-label-normal: var(--label-normal);
103
+ --color-label-strong: var(--label-strong);
104
+ --color-label-light: var(--label-light);
105
+ --color-label-alternative: var(--label-alternative);
106
+ --color-label-disable: var(--label-disable);
107
+ --color-label-assitive: var(--label-assitive);
108
+ --color-label-contrast: var(--label-contrast);
109
+ --color-label-netural: var(--label-netural);
110
+ --color-line-normal: var(--line-normal);
111
+ --color-line-neutral: var(--line-neutral);
112
+ --color-line-alternative: var(--line-alternative);
113
+ --color-line-strong: var(--line-strong);
114
+ --color-fill-normal: var(--fill-normal);
115
+ --color-fill-strong: var(--fill-strong);
116
+ --color-fill-alternative: var(--fill-alternative);
117
+ --color-fill-primary: var(--fill-primary);
118
+ --color-fill-secondary: var(--fill-secondary);
119
+ --color-fill-positive: var(--fill-positive);
120
+ --color-fill-cautionary: var(--fill-cautionary);
121
+ --color-fill-destructive: var(--fill-destructive);
122
+ --color-fill-netural: var(--fill-netural);
123
+ --color-fill-transparent-white: var(--fill-transparent-white);
124
+ --color-fill-transparent-black: var(--fill-transparent-black);
125
+ --color-effect-dimmer: var(--effect-dimmer);
126
+ --color-static-white: var(--static-white);
127
+ --color-static-black: var(--static-black);
128
+ --color-interaction-hover: var(--interaction-hover);
129
+ --color-interaction-pressed: var(--interaction-pressed);
130
+ --color-interaction-hover-inverse: var(--interaction-hover-inverse);
131
+ --color-interaction-dim: var(--interaction-dim);
132
+ }
package/src/tokens.json ADDED
@@ -0,0 +1,166 @@
1
+ {
2
+ "coolNetural": {
3
+ "1": "#f7f7f8",
4
+ "5": "#edeeef",
5
+ "10": "#dcdddf",
6
+ "20": "#babbc1",
7
+ "30": "#9798a1",
8
+ "40": "#777982",
9
+ "50": "#5b5c63",
10
+ "60": "#484950",
11
+ "70": "#35373b",
12
+ "80": "#27282b",
13
+ "90": "#17171a",
14
+ "95": "#0e0e10"
15
+ },
16
+ "netural": {
17
+ "5": "#f1f1f1",
18
+ "10": "#e5e5e5",
19
+ "20": "#c9c9c9",
20
+ "30": "#b0b0b0",
21
+ "40": "#989898",
22
+ "50": "#7f7f7f",
23
+ "60": "#666666",
24
+ "70": "#4b4b4b",
25
+ "80": "#323232",
26
+ "90": "#1d1d1d",
27
+ "95": "#111111"
28
+ },
29
+ "blue": {
30
+ "5": "#eff4ff",
31
+ "10": "#dce5fe",
32
+ "20": "#baccfe",
33
+ "30": "#98b1fe",
34
+ "40": "#7c99fd",
35
+ "50": "#5c7dfb",
36
+ "60": "#3e5efa",
37
+ "70": "#223dc9",
38
+ "80": "#051c94",
39
+ "90": "#0b1a65",
40
+ "95": "#0a154d"
41
+ },
42
+ "orange": {
43
+ "5": "#fffcf7",
44
+ "10": "#fef4e6",
45
+ "20": "#fee6c6",
46
+ "30": "#ffd49c",
47
+ "40": "#ffc06e",
48
+ "50": "#ffa938",
49
+ "60": "#ff9200",
50
+ "70": "#d47800",
51
+ "80": "#9c5800",
52
+ "90": "#663a00",
53
+ "95": "#361e00"
54
+ },
55
+ "green": {
56
+ "5": "#f2fff6",
57
+ "10": "#d9ffe6",
58
+ "20": "#acfcc7",
59
+ "30": "#7df5a5",
60
+ "40": "#49e57d",
61
+ "50": "#1ed45a",
62
+ "60": "#00bf40",
63
+ "70": "#009632",
64
+ "80": "#006e25",
65
+ "90": "#004517",
66
+ "95": "#00240c"
67
+ },
68
+ "red": {
69
+ "5": "#fffafa",
70
+ "10": "#feecec",
71
+ "20": "#fed5d5",
72
+ "30": "#ffb5b5",
73
+ "40": "#ff8c8c",
74
+ "50": "#ff6363",
75
+ "60": "#ff4242",
76
+ "70": "#e52222",
77
+ "80": "#b00c0c",
78
+ "90": "#730303",
79
+ "95": "#3b0101"
80
+ },
81
+ "skyBlue": {
82
+ "5": "#f0faff",
83
+ "10": "#e0f5ff",
84
+ "20": "#c2ebff",
85
+ "30": "#a3e2ff",
86
+ "40": "#79d4ff",
87
+ "50": "#3dc1ff",
88
+ "60": "#00a6f5",
89
+ "70": "#006899",
90
+ "80": "#004566",
91
+ "90": "#002333",
92
+ "95": "#021a25"
93
+ },
94
+ "indigo": {
95
+ "5": "#f3f2ff",
96
+ "10": "#e3e2fe",
97
+ "20": "#cac6fe",
98
+ "30": "#afaafd",
99
+ "40": "#948bfc",
100
+ "50": "#7366fc",
101
+ "60": "#5640f9",
102
+ "70": "#3d18d8",
103
+ "80": "#24079d",
104
+ "90": "#140364",
105
+ "95": "#0b0147"
106
+ },
107
+ "common": {
108
+ "0": "#ffffff",
109
+ "100": "#000000"
110
+ },
111
+ "brand": {
112
+ "logo": "#18181b",
113
+ "primary": "#3e5efa",
114
+ "secondary": "#7c99fd",
115
+ "assisitve": "#e3e2fe",
116
+ "tertiary": "#baccfe",
117
+ "strong": "#223dc9"
118
+ },
119
+ "status": {
120
+ "positive": "#00bf40",
121
+ "negative": "#ff4242",
122
+ "cautionary": "#ff9200"
123
+ },
124
+ "label": {
125
+ "normal": "#17171a",
126
+ "strong": "#000000",
127
+ "light": "#5b5c63",
128
+ "alternative": "#777982",
129
+ "disable": "#babbc1",
130
+ "assitive": "#9798a1",
131
+ "contrast": "#ffffff",
132
+ "netural": "#484950"
133
+ },
134
+ "line": {
135
+ "normal": "#70737c38",
136
+ "neutral": "#70737c29",
137
+ "alternative": "#70737c14",
138
+ "strong": "#babbc1"
139
+ },
140
+ "fill": {
141
+ "normal": "#ffffff",
142
+ "strong": "#dcdddf",
143
+ "alternative": "#edeeef",
144
+ "primary": "#eff4ff",
145
+ "secondary": "#f3f2ff",
146
+ "positive": "#f2fff6",
147
+ "cautionary": "#fffcf7",
148
+ "destructive": "#fffafa",
149
+ "netural": "#f7f7f8",
150
+ "transparentWhite": "#ffffff4d",
151
+ "transparentBlack": "#00000026"
152
+ },
153
+ "effect": {
154
+ "dimmer": "#17171985"
155
+ },
156
+ "static": {
157
+ "white": "#ffffff",
158
+ "black": "#000000"
159
+ },
160
+ "interaction": {
161
+ "hover": "#ffffff40",
162
+ "pressed": "#00000014",
163
+ "hoverInverse": "#0000000f",
164
+ "dim": "#17171abf"
165
+ }
166
+ }
package/src/typography.css ADDED
@@ -0,0 +1,325 @@
1
+ @theme {
2
+ /* =========================
3
+ PC/Display
4
+ ========================= */
5
+ /* PC/Display/64-b */
6
+ --text-pc-64b: 64px;
7
+ --text-pc-64b--line-height: 84px;
8
+ --text-pc-64b--letter-spacing: -0.02em;
9
+ --text-pc-64b--font-weight: 700;
10
+
11
+ /* PC/Display/64-sb */
12
+ --text-pc-64sb: 64px;
13
+ --text-pc-64sb--line-height: 84px;
14
+ --text-pc-64sb--letter-spacing: -0.02em;
15
+ --text-pc-64sb--font-weight: 600;
16
+
17
+ /* PC/Display/48-b */
18
+ --text-pc-48b: 48px;
19
+ --text-pc-48b--line-height: 62px;
20
+ --text-pc-48b--letter-spacing: -0.018em;
21
+ --text-pc-48b--font-weight: 700;
22
+
23
+ /* PC/Display/48-sb */
24
+ --text-pc-48sb: 48px;
25
+ --text-pc-48sb--line-height: 62px;
26
+ --text-pc-48sb--letter-spacing: -0.018em;
27
+ --text-pc-48sb--font-weight: 600;
28
+
29
+ /* PC/Display/40-b */
30
+ --text-pc-40b: 40px;
31
+ --text-pc-40b--line-height: 52px;
32
+ --text-pc-40b--letter-spacing: -0.016em;
33
+ --text-pc-40b--font-weight: 700;
34
+
35
+ /* PC/Display/40-sb */
36
+ --text-pc-40sb: 40px;
37
+ --text-pc-40sb--line-height: 52px;
38
+ --text-pc-40sb--letter-spacing: -0.016em;
39
+ --text-pc-40sb--font-weight: 600;
40
+
41
+ /* =========================
42
+ PC/Title
43
+ ========================= */
44
+ /* PC/Title/36-b */
45
+ --text-pc-36b: 36px;
46
+ --text-pc-36b--line-height: 48px;
47
+ --text-pc-36b--letter-spacing: -0.014em;
48
+ --text-pc-36b--font-weight: 700;
49
+
50
+ /* PC/Title/36-sb */
51
+ --text-pc-36sb: 36px;
52
+ --text-pc-36sb--line-height: 48px;
53
+ --text-pc-36sb--letter-spacing: -0.014em;
54
+ --text-pc-36sb--font-weight: 600;
55
+
56
+ /* PC/Title/36-m */
57
+ --text-pc-36m: 36px;
58
+ --text-pc-36m--line-height: 48px;
59
+ --text-pc-36m--letter-spacing: -0.014em;
60
+ --text-pc-36m--font-weight: 500;
61
+
62
+ /* PC/Title/32-b */
63
+ --text-pc-32b: 32px;
64
+ --text-pc-32b--line-height: 42px;
65
+ --text-pc-32b--letter-spacing: -0.012em;
66
+ --text-pc-32b--font-weight: 700;
67
+
68
+ /* PC/Title/32-sb */
69
+ --text-pc-32sb: 32px;
70
+ --text-pc-32sb--line-height: 42px;
71
+ --text-pc-32sb--letter-spacing: -0.012em;
72
+ --text-pc-32sb--font-weight: 600;
73
+
74
+ /* PC/Title/32-m */
75
+ --text-pc-32m: 32px;
76
+ --text-pc-32m--line-height: 42px;
77
+ --text-pc-32m--letter-spacing: -0.012em;
78
+ --text-pc-32m--font-weight: 500;
79
+
80
+ /* PC/Title/30-b */
81
+ --text-pc-30b: 30px;
82
+ --text-pc-30b--line-height: 40px;
83
+ --text-pc-30b--letter-spacing: -0.012em;
84
+ --text-pc-30b--font-weight: 700;
85
+
86
+ /* PC/Title/30-m */
87
+ --text-pc-30m: 30px;
88
+ --text-pc-30m--line-height: 40px;
89
+ --text-pc-30m--letter-spacing: -0.012em;
90
+ --text-pc-30m--font-weight: 500;
91
+
92
+ /* =========================
93
+ Mobile/Display
94
+ ========================= */
95
+ /* Mobile/Display/40-b */
96
+ --text-mobile-40b: 40px;
97
+ --text-mobile-40b--line-height: 52px;
98
+ --text-mobile-40b--letter-spacing: -0.014em;
99
+ --text-mobile-40b--font-weight: 700;
100
+
101
+ /* Mobile/Display/40-sb */
102
+ --text-mobile-40sb: 40px;
103
+ --text-mobile-40sb--line-height: 52px;
104
+ --text-mobile-40sb--letter-spacing: -0.014em;
105
+ --text-mobile-40sb--font-weight: 600;
106
+
107
+ /* Mobile/Display/32-b */
108
+ --text-mobile-32b: 32px;
109
+ --text-mobile-32b--line-height: 42px;
110
+ --text-mobile-32b--letter-spacing: -0.012em;
111
+ --text-mobile-32b--font-weight: 700;
112
+
113
+ /* Mobile/Display/32-sb */
114
+ --text-mobile-32sb: 32px;
115
+ --text-mobile-32sb--line-height: 42px;
116
+ --text-mobile-32sb--letter-spacing: -0.012em;
117
+ --text-mobile-32sb--font-weight: 600;
118
+
119
+ /* =========================
120
+ Mobile/Title
121
+ ========================= */
122
+ /* Mobile/Title/28-b */
123
+ --text-mobile-28b: 28px;
124
+ --text-mobile-28b--line-height: 38px;
125
+ --text-mobile-28b--letter-spacing: -0.01em;
126
+ --text-mobile-28b--font-weight: 700;
127
+
128
+ /* Mobile/Title/28-sb */
129
+ --text-mobile-28sb: 28px;
130
+ --text-mobile-28sb--line-height: 38px;
131
+ --text-mobile-28sb--letter-spacing: -0.01em;
132
+ --text-mobile-28sb--font-weight: 600;
133
+
134
+ /* Mobile/Title/24-b */
135
+ --text-mobile-24b: 24px;
136
+ --text-mobile-24b--line-height: 34px;
137
+ --text-mobile-24b--letter-spacing: -0.008em;
138
+ --text-mobile-24b--font-weight: 700;
139
+
140
+ /* Mobile/Title/24-sb */
141
+ --text-mobile-24sb: 24px;
142
+ --text-mobile-24sb--line-height: 34px;
143
+ --text-mobile-24sb--letter-spacing: -0.008em;
144
+ --text-mobile-24sb--font-weight: 600;
145
+
146
+ /* =========================
147
+ Common/Headline
148
+ ========================= */
149
+ /* Common/Headline/24-b */
150
+ --text-headline-24b: 24px;
151
+ --text-headline-24b--line-height: 36px;
152
+ --text-headline-24b--letter-spacing: -0.008em;
153
+ --text-headline-24b--font-weight: 700;
154
+
155
+ /* Common/Headline/24-sb */
156
+ --text-headline-24sb: 24px;
157
+ --text-headline-24sb--line-height: 36px;
158
+ --text-headline-24sb--letter-spacing: -0.008em;
159
+ --text-headline-24sb--font-weight: 600;
160
+
161
+ /* Common/Headline/24-m */
162
+ --text-headline-24m: 24px;
163
+ --text-headline-24m--line-height: 36px;
164
+ --text-headline-24m--letter-spacing: -0.008em;
165
+ --text-headline-24m--font-weight: 500;
166
+
167
+ /* Common/Headline/24-r */
168
+ --text-headline-24r: 24px;
169
+ --text-headline-24r--line-height: 36px;
170
+ --text-headline-24r--letter-spacing: -0.008em;
171
+ --text-headline-24r--font-weight: 400;
172
+
173
+ /* Common/Headline/20-b */
174
+ --text-headline-20b: 20px;
175
+ --text-headline-20b--line-height: 32px;
176
+ --text-headline-20b--letter-spacing: -0.008em;
177
+ --text-headline-20b--font-weight: 700;
178
+
179
+ /* Common/Headline/20-sb */
180
+ --text-headline-20sb: 20px;
181
+ --text-headline-20sb--line-height: 32px;
182
+ --text-headline-20sb--letter-spacing: -0.008em;
183
+ --text-headline-20sb--font-weight: 600;
184
+
185
+ /* Common/Headline/20-m */
186
+ --text-headline-20m: 20px;
187
+ --text-headline-20m--line-height: 32px;
188
+ --text-headline-20m--letter-spacing: -0.008em;
189
+ --text-headline-20m--font-weight: 500;
190
+
191
+ /* Common/Headline/20-r */
192
+ --text-headline-20r: 20px;
193
+ --text-headline-20r--line-height: 32px;
194
+ --text-headline-20r--letter-spacing: -0.008em;
195
+ --text-headline-20r--font-weight: 400;
196
+
197
+ /* =========================
198
+ Common/Body
199
+ ========================= */
200
+ /* Common/Body/18-b */
201
+ --text-body-18b: 18px;
202
+ --text-body-18b--line-height: 26px;
203
+ --text-body-18b--letter-spacing: -0.005em;
204
+ --text-body-18b--font-weight: 700;
205
+
206
+ /* Common/Body/18-sb */
207
+ --text-body-18sb: 18px;
208
+ --text-body-18sb--line-height: 26px;
209
+ --text-body-18sb--letter-spacing: -0.005em;
210
+ --text-body-18sb--font-weight: 600;
211
+
212
+ /* Common/Body/18-m */
213
+ --text-body-18m: 18px;
214
+ --text-body-18m--line-height: 26px;
215
+ --text-body-18m--letter-spacing: -0.005em;
216
+ --text-body-18m--font-weight: 500;
217
+
218
+ /* Common/Body/18-r */
219
+ --text-body-18r: 18px;
220
+ --text-body-18r--line-height: 26px;
221
+ --text-body-18r--letter-spacing: -0.005em;
222
+ --text-body-18r--font-weight: 400;
223
+
224
+ /* Common/Body/16-b */
225
+ --text-body-16b: 16px;
226
+ --text-body-16b--line-height: 24px;
227
+ --text-body-16b--letter-spacing: -0.0025em;
228
+ --text-body-16b--font-weight: 700;
229
+
230
+ /* Common/Body/16-sb */
231
+ --text-body-16sb: 16px;
232
+ --text-body-16sb--line-height: 24px;
233
+ --text-body-16sb--letter-spacing: -0.0025em;
234
+ --text-body-16sb--font-weight: 600;
235
+
236
+ /* Common/Body/16-m */
237
+ --text-body-16m: 16px;
238
+ --text-body-16m--line-height: 24px;
239
+ --text-body-16m--letter-spacing: -0.0025em;
240
+ --text-body-16m--font-weight: 500;
241
+
242
+ /* Common/Body/16-r */
243
+ --text-body-16r: 16px;
244
+ --text-body-16r--line-height: 24px;
245
+ --text-body-16r--letter-spacing: -0.0025em;
246
+ --text-body-16r--font-weight: 400;
247
+
248
+ /* =========================
249
+ Common/Label
250
+ ========================= */
251
+ /* Common/Label/14-b */
252
+ --text-label-14b: 14px;
253
+ --text-label-14b--line-height: 20px;
254
+ --text-label-14b--letter-spacing: 0.0125em;
255
+ --text-label-14b--font-weight: 700;
256
+
257
+ /* Common/Label/14-sb */
258
+ --text-label-14sb: 14px;
259
+ --text-label-14sb--line-height: 20px;
260
+ --text-label-14sb--letter-spacing: 0.0125em;
261
+ --text-label-14sb--font-weight: 600;
262
+
263
+ /* Common/Label/14-m */
264
+ --text-label-14m: 14px;
265
+ --text-label-14m--line-height: 20px;
266
+ --text-label-14m--letter-spacing: 0.0125em;
267
+ --text-label-14m--font-weight: 500;
268
+
269
+ /* Common/Label/14-r */
270
+ --text-label-14r: 14px;
271
+ --text-label-14r--line-height: 20px;
272
+ --text-label-14r--letter-spacing: 0.0125em;
273
+ --text-label-14r--font-weight: 400;
274
+
275
+ /* Common/Label/13-b */
276
+ --text-label-13b: 13px;
277
+ --text-label-13b--line-height: 18px;
278
+ --text-label-13b--letter-spacing: 0.012em;
279
+ --text-label-13b--font-weight: 700;
280
+
281
+ /* Common/Label/13-sb */
282
+ --text-label-13sb: 13px;
283
+ --text-label-13sb--line-height: 18px;
284
+ --text-label-13sb--letter-spacing: 0.012em;
285
+ --text-label-13sb--font-weight: 600;
286
+
287
+ /* Common/Label/13-m */
288
+ --text-label-13m: 13px;
289
+ --text-label-13m--line-height: 18px;
290
+ --text-label-13m--letter-spacing: 0.012em;
291
+ --text-label-13m--font-weight: 500;
292
+
293
+ /* Common/Label/13-r */
294
+ --text-label-13r: 13px;
295
+ --text-label-13r--line-height: 18px;
296
+ --text-label-13r--letter-spacing: 0.012em;
297
+ --text-label-13r--font-weight: 400;
298
+
299
+ /* =========================
300
+ Common/Caption
301
+ ========================= */
302
+ /* Common/Caption/12-sb */
303
+ --text-caption-12sb: 12px;
304
+ --text-caption-12sb--line-height: 18px;
305
+ --text-caption-12sb--letter-spacing: 0.014em;
306
+ --text-caption-12sb--font-weight: 600;
307
+
308
+ /* Common/Caption/12-r */
309
+ --text-caption-12r: 12px;
310
+ --text-caption-12r--line-height: 18px;
311
+ --text-caption-12r--letter-spacing: 0.014em;
312
+ --text-caption-12r--font-weight: 400;
313
+
314
+ /* Common/Caption/11-sb */
315
+ --text-caption-11sb: 11px;
316
+ --text-caption-11sb--line-height: 16px;
317
+ --text-caption-11sb--letter-spacing: 0.015em;
318
+ --text-caption-11sb--font-weight: 600;
319
+
320
+ /* Common/Caption/11-r */
321
+ --text-caption-11r: 11px;
322
+ --text-caption-11r--line-height: 16px;
323
+ --text-caption-11r--letter-spacing: 0.015em;
324
+ --text-caption-11r--font-weight: 400;
325
+ }