atomsystem 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 (27) hide show
  1. package/README.md +5 -0
  2. package/app/component/Button/Button.tsx +46 -0
  3. package/app/component/Card/Card.tsx +57 -0
  4. package/app/component/CodeBlock/CodeBlock.tsx +30 -0
  5. package/app/component/GlobalNav/GlobalNav.tsx +111 -0
  6. package/app/component/Input/Input.tsx +306 -0
  7. package/app/component/Theme/Theme.tsx +118 -0
  8. package/app/component/component.css +42 -0
  9. package/build/dark.variables.css +275 -0
  10. package/build/digitalFont.variables.css +267 -0
  11. package/build/global.variables.css +267 -0
  12. package/build/inputCircle.variables.css +268 -0
  13. package/build/inputStandard.variables.css +268 -0
  14. package/build/standard.variables.css +293 -0
  15. package/package.json +39 -0
  16. package/token.json +1179 -0
  17. package/tokens/buildMergeCss.js +87 -0
  18. package/tokens/buildTokenSplit.js +81 -0
  19. package/tokens/setorder/token_dark.json +390 -0
  20. package/tokens/setorder/token_digitalFont.json +6 -0
  21. package/tokens/setorder/token_global.json +888 -0
  22. package/tokens/token/dark.json +904 -0
  23. package/tokens/token/digitalFont.json +882 -0
  24. package/tokens/token/global.json +882 -0
  25. package/tokens/token/inputCircle.json +888 -0
  26. package/tokens/token/inputStandard.json +888 -0
  27. package/tokens/token/standard.json +976 -0
package/app/component/component.css ADDED
@@ -0,0 +1,42 @@
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ @layer base {
6
+ h1 {
7
+ @apply text-mobileH1 lg:text-h1 text-text-standard;
8
+ }
9
+ h2 {
10
+ @apply text-mobileH2 lg:text-h2 text-text-standard;
11
+ }
12
+ h3 {
13
+ @apply text-mobileH3 lg:text-h3 text-text-standard;
14
+ }
15
+ h4 {
16
+ @apply text-mobileH4 lg:text-h4 text-text-standard;
17
+ }
18
+ h5 {
19
+ @apply text-mobileH5 lg:text-h5 text-text-standard;
20
+ }
21
+ h6 {
22
+ @apply text-mobileH6 lg:text-h6 text-text-standard;
23
+ }
24
+
25
+ p {
26
+ @apply text-base text-text-standard;
27
+ }
28
+
29
+ hr {
30
+ @apply border-fill-border;
31
+ }
32
+ *:focus {
33
+ @apply outline-none;
34
+ }
35
+ }
36
+
37
+ @layer components {
38
+ .required::after {
39
+ content: "*";
40
+ @apply ml-1 text-danger;
41
+ }
42
+ }
package/build/dark.variables.css ADDED
@@ -0,0 +1,275 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --black-50: #5a5a5a;
7
+ --black-100: #555555;
8
+ --black-200: #4a4a4a;
9
+ --black-300: #444444;
10
+ --black-400: #3a3a3a;
11
+ --black-500: #333333;
12
+ --black-600: #2a2a2a;
13
+ --black-700: #222222;
14
+ --black-800: #1a1a1a;
15
+ --black-900: #111111;
16
+ --gray-50: #bbbbbb;
17
+ --gray-100: #b3b3b3;
18
+ --gray-200: #9e9e9e;
19
+ --gray-300: #999999;
20
+ --gray-400: #8e8e8e;
21
+ --gray-500: #888888;
22
+ --gray-600: #7e7e7e;
23
+ --gray-700: #777777;
24
+ --gray-800: #6e6e6e;
25
+ --gray-900: #666666;
26
+ --white-50: #fafafa;
27
+ --white-100: #f5f5f5;
28
+ --white-200: #f0f0f0;
29
+ --white-300: #ebebeb;
30
+ --white-400: #e6e6e6;
31
+ --white-500: #e0e0e0;
32
+ --white-600: #dbdbdb;
33
+ --white-700: #d6d6d6;
34
+ --white-800: #d1d1d1;
35
+ --white-900: #cccccc;
36
+ --blue-50: #f6f8fd;
37
+ --blue-100: #ccd7f5;
38
+ --blue-200: #a1b6ed;
39
+ --blue-300: #7795e4;
40
+ --blue-400: #4c73dc;
41
+ --blue-500: #2855cc;
42
+ --blue-600: #2044a2;
43
+ --blue-700: #183277;
44
+ --blue-800: #0f204d;
45
+ --blue-900: #070e22;
46
+ --green-50: #f7fdf7;
47
+ --green-100: #cef3ce;
48
+ --green-200: #a5e8a5;
49
+ --green-300: #7dde7d;
50
+ --green-400: #54d454;
51
+ --green-500: #31c331;
52
+ --green-600: #279b27;
53
+ --green-700: #1d721d;
54
+ --green-800: #124912;
55
+ --green-900: #08210a;
56
+ --red-50: #fdf7f7;
57
+ --red-100: #f6dada;
58
+ --red-200: #edb0b0;
59
+ --red-300: #e48787;
60
+ --red-400: #da5d5d;
61
+ --red-500: #d13434;
62
+ --red-600: #af2828;
63
+ --red-700: #891f1f;
64
+ --red-800: #641717;
65
+ --red-900: #3e0e0e;
66
+ --brand-primary: #2855cc;
67
+ --brand-secondary: #0f204d;
68
+ --system-success: #31c331;
69
+ --system-danger: #d13434;
70
+ --system-info: #333333;
71
+ --fill-wrapper: #111111;
72
+ --fill-card: #222222;
73
+ --fill-info: #333333;
74
+ --fill-border: #444444;
75
+ --button-text: #fafafa;
76
+ --button-primary-standard-background: #2855cc;
77
+ --button-secondary-standard-background: #0f204d;
78
+ --button-success-standard-background: #31c331;
79
+ --button-danger-standard-background: #d13434;
80
+ --button-info-standard-background: #333333;
81
+ --icon-xs: 16px;
82
+ --icon-sm: 24px;
83
+ --icon-md: 32px;
84
+ --icon-lg: 48px;
85
+ --icon-xl: 80px;
86
+ --element-xxs: 160px;
87
+ --element-xs: 240px;
88
+ --element-sm: 320px;
89
+ --element-md: 480px;
90
+ --element-lg: 640px;
91
+ --element-xl: 960px;
92
+ --element-2xl: 1280px;
93
+ --element-3xl: 1920px;
94
+ --element-4xl: 2560px;
95
+ --element-5xl: 3840px;
96
+ --spacing-nogap: 0;
97
+ --spacing-xs: 4px;
98
+ --spacing-sm: 8px;
99
+ --spacing-md: 16px;
100
+ --spacing-lg: 24px;
101
+ --spacing-xl: 48px;
102
+ --spacing-2xl: 120px;
103
+ --spacing-3xl: 240px;
104
+ --spacing-4xl: 320px;
105
+ --main-title: 'Spoqa Han Sans Neo';
106
+ --thin: 100;
107
+ --extra-light: 200;
108
+ --light: 300;
109
+ --normal: 400;
110
+ --bold: 700;
111
+ --medium: 500;
112
+ --semi-bold: 600;
113
+ --extra-bold: 800;
114
+ --black: 900;
115
+ --desktop-h1-font-family: 'Spoqa Han Sans Neo';
116
+ --desktop-h1-font-weight: 700;
117
+ --desktop-h1-font-size: 48px;
118
+ --desktop-h1-line-height: 64;
119
+ --desktop-h2-font-family: 'Spoqa Han Sans Neo';
120
+ --desktop-h2-font-weight: 700;
121
+ --desktop-h2-font-size: 40px;
122
+ --desktop-h2-line-height: 50;
123
+ --desktop-h3-font-family: 'Spoqa Han Sans Neo';
124
+ --desktop-h3-font-weight: 700;
125
+ --desktop-h3-font-size: 32px;
126
+ --desktop-h3-line-height: 48;
127
+ --desktop-h4-font-family: 'Spoqa Han Sans Neo';
128
+ --desktop-h4-font-weight: 700;
129
+ --desktop-h4-font-size: 24px;
130
+ --desktop-h4-line-height: 36;
131
+ --desktop-h5-font-family: 'Spoqa Han Sans Neo';
132
+ --desktop-h5-font-weight: 700;
133
+ --desktop-h5-font-size: 20px;
134
+ --desktop-h5-line-height: 30;
135
+ --desktop-h6-font-family: 'Spoqa Han Sans Neo';
136
+ --desktop-h6-font-weight: 700;
137
+ --desktop-h6-font-size: 18px;
138
+ --desktop-h6-line-height: 24;
139
+ --desktop-body-base-font-family: 'Spoqa Han Sans Neo';
140
+ --desktop-body-base-font-weight: 400;
141
+ --desktop-body-base-font-size: 16px;
142
+ --desktop-body-base-line-height: 24;
143
+ --desktop-body-lg-font-family: 'Spoqa Han Sans Neo';
144
+ --desktop-body-lg-font-weight: 400;
145
+ --desktop-body-lg-font-size: 18px;
146
+ --desktop-body-lg-line-height: 24;
147
+ --desktop-body-sm-font-family: 'Spoqa Han Sans Neo';
148
+ --desktop-body-sm-font-weight: 400;
149
+ --desktop-body-sm-font-size: 14px;
150
+ --desktop-body-sm-line-height: 20;
151
+ --desktop-small-font-family: 'Spoqa Han Sans Neo';
152
+ --desktop-small-font-weight: 400;
153
+ --desktop-small-font-size: 12px;
154
+ --desktop-small-line-height: 18;
155
+ --desktop-small-extra-font-family: 'Spoqa Han Sans Neo';
156
+ --desktop-small-extra-font-weight: 400;
157
+ --desktop-small-extra-font-size: 10px;
158
+ --desktop-small-extra-line-height: 16;
159
+ --mobile-h1-font-family: 'Spoqa Han Sans Neo';
160
+ --mobile-h1-font-weight: 700;
161
+ --mobile-h1-font-size: 32px;
162
+ --mobile-h1-line-height: 48;
163
+ --mobile-h2-font-size: 28px;
164
+ --mobile-h2-font-family: 'Spoqa Han Sans Neo';
165
+ --mobile-h2-font-weight: 700;
166
+ --mobile-h2-line-height: 40;
167
+ --mobile-h3-font-family: 'Spoqa Han Sans Neo';
168
+ --mobile-h3-font-weight: 700;
169
+ --mobile-h3-font-size: 24px;
170
+ --mobile-h3-line-height: 32;
171
+ --mobile-h4-font-family: 'Spoqa Han Sans Neo';
172
+ --mobile-h4-font-weight: 700;
173
+ --mobile-h4-font-size: 20px;
174
+ --mobile-h4-line-height: 28;
175
+ --mobile-h5-font-family: 'Spoqa Han Sans Neo';
176
+ --mobile-h5-font-weight: 700;
177
+ --mobile-h5-font-size: 18px;
178
+ --mobile-h5-line-height: 24;
179
+ --mobile-h6-font-family: 'Spoqa Han Sans Neo';
180
+ --mobile-h6-font-weight: 700;
181
+ --mobile-h6-font-size: 16px;
182
+ --mobile-h6-line-height: 24;
183
+ --mobile-body-lg-font-family: 'Spoqa Han Sans Neo';
184
+ --mobile-body-lg-font-weight: 400;
185
+ --mobile-body-lg-font-size: 16px;
186
+ --mobile-body-lg-line-height: 24;
187
+ --mobile-body-base-font-family: 'Spoqa Han Sans Neo';
188
+ --mobile-body-base-font-weight: 400;
189
+ --mobile-body-base-font-size: 14px;
190
+ --mobile-body-base-line-height: 20;
191
+ --mobile-body-sm-font-family: 'Spoqa Han Sans Neo';
192
+ --mobile-body-sm-font-weight: 400;
193
+ --mobile-body-sm-font-size: 12px;
194
+ --mobile-body-sm-line-height: 18;
195
+ --mobile-small-font-family: 'Spoqa Han Sans Neo';
196
+ --mobile-small-font-weight: 400;
197
+ --mobile-small-font-size: 10px;
198
+ --mobile-small-line-height: 16;
199
+ --mobile-small-extra-font-family: 'Spoqa Han Sans Neo';
200
+ --mobile-small-extra-font-weight: 400;
201
+ --mobile-small-extra-font-size: 8px;
202
+ --mobile-small-extra-line-height: 14;
203
+ --rounded-common: 4px;
204
+ --rounded-none: 0;
205
+ --rounded-xs: 4px;
206
+ --rounded-sm: 8px;
207
+ --rounded-md: 16px;
208
+ --rounded-lg: 24px;
209
+ --rounded-full: 1000px;
210
+ --shadow-none-blur: 0;
211
+ --shadow-none-spread: 0;
212
+ --shadow-none-color: #000000;
213
+ --shadow-none-type: dropShadow;
214
+ --shadow-none-offset-x: 0;
215
+ --shadow-none-offset-y: 0;
216
+ --shadow-xs-blur: 8px;
217
+ --shadow-xs-spread: 0;
218
+ --shadow-xs-color: rgba(0, 0, 0, 0.16);
219
+ --shadow-xs-type: dropShadow;
220
+ --shadow-xs-offset-x: 2px;
221
+ --shadow-xs-offset-y: 2px;
222
+ --shadow-sm-blur: 16px;
223
+ --shadow-sm-spread: 0;
224
+ --shadow-sm-color: rgba(0, 0, 0, 0.16);
225
+ --shadow-sm-type: dropShadow;
226
+ --shadow-sm-offset-x: 4px;
227
+ --shadow-sm-offset-y: 4px;
228
+ --shadow-md-blur: 32px;
229
+ --shadow-md-spread: 0;
230
+ --shadow-md-color: rgba(0, 0, 0, 0.16);
231
+ --shadow-md-type: dropShadow;
232
+ --shadow-md-offset-x: 8px;
233
+ --shadow-md-offset-y: 8px;
234
+ --shadow-lg-blur: 64px;
235
+ --shadow-lg-spread: 0;
236
+ --shadow-lg-color: rgba(0, 0, 0, 0.16);
237
+ --shadow-lg-type: dropShadow;
238
+ --shadow-lg-offset-x: 16px;
239
+ --shadow-lg-offset-y: 16px;
240
+ --shadow-xl-blur: 120px;
241
+ --shadow-xl-spread: 0;
242
+ --shadow-xl-color: rgba(0, 0, 0, 0.16);
243
+ --shadow-xl-type: dropShadow;
244
+ --shadow-xl-offset-x: 24px;
245
+ --shadow-xl-offset-y: 24px;
246
+ --visible: 1;
247
+ --opacity-90: 0.9;
248
+ --opacity-80: 0.8;
249
+ --opacity-70: 0.7;
250
+ --opacity-60: 0.6;
251
+ --opacity-50: 0.5;
252
+ --opacity-40: 0.4;
253
+ --opacity-30: 0.3;
254
+ --opacity-20: 0.2;
255
+ --opacity-10: 0.1;
256
+ --invisible: 0;
257
+ --text-standard: #999999;
258
+ --text-sub: #666666;
259
+ --card-background: #222222;
260
+ --card-border: #444444;
261
+ --table-header: #2a2a2a;
262
+ --input-text-value: #999999;
263
+ --input-text-placeholder: #5a5a5a;
264
+ --input-text-success: #2855cc;
265
+ --input-text-error: #d13434;
266
+ --input-background-value: #222222;
267
+ --input-background-standard: #2a2a2a;
268
+ --input-background-success: #070e22;
269
+ --input-background-error: #3e0e0e;
270
+ --input-background-disabled: #3a3a3a;
271
+ --input-border-standard: #444444;
272
+ --input-border-focus: #999999;
273
+ --input-border-success: #2855cc;
274
+ --input-border-error: #d13434;
275
+ }
package/build/digitalFont.variables.css ADDED
@@ -0,0 +1,267 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --black-50: #5a5a5a;
7
+ --black-100: #555555;
8
+ --black-200: #4a4a4a;
9
+ --black-300: #444444;
10
+ --black-400: #3a3a3a;
11
+ --black-500: #333333;
12
+ --black-600: #2a2a2a;
13
+ --black-700: #222222;
14
+ --black-800: #1a1a1a;
15
+ --black-900: #111111;
16
+ --gray-50: #bbbbbb;
17
+ --gray-100: #b3b3b3;
18
+ --gray-200: #9e9e9e;
19
+ --gray-300: #999999;
20
+ --gray-400: #8e8e8e;
21
+ --gray-500: #888888;
22
+ --gray-600: #7e7e7e;
23
+ --gray-700: #777777;
24
+ --gray-800: #6e6e6e;
25
+ --gray-900: #666666;
26
+ --white-50: #fafafa;
27
+ --white-100: #f5f5f5;
28
+ --white-200: #f0f0f0;
29
+ --white-300: #ebebeb;
30
+ --white-400: #e6e6e6;
31
+ --white-500: #e0e0e0;
32
+ --white-600: #dbdbdb;
33
+ --white-700: #d6d6d6;
34
+ --white-800: #d1d1d1;
35
+ --white-900: #cccccc;
36
+ --blue-50: #f6f8fd;
37
+ --blue-100: #ccd7f5;
38
+ --blue-200: #a1b6ed;
39
+ --blue-300: #7795e4;
40
+ --blue-400: #4c73dc;
41
+ --blue-500: #2855cc;
42
+ --blue-600: #2044a2;
43
+ --blue-700: #183277;
44
+ --blue-800: #0f204d;
45
+ --blue-900: #070e22;
46
+ --green-50: #f7fdf7;
47
+ --green-100: #cef3ce;
48
+ --green-200: #a5e8a5;
49
+ --green-300: #7dde7d;
50
+ --green-400: #54d454;
51
+ --green-500: #31c331;
52
+ --green-600: #279b27;
53
+ --green-700: #1d721d;
54
+ --green-800: #124912;
55
+ --green-900: #08210a;
56
+ --red-50: #fdf7f7;
57
+ --red-100: #f6dada;
58
+ --red-200: #edb0b0;
59
+ --red-300: #e48787;
60
+ --red-400: #da5d5d;
61
+ --red-500: #d13434;
62
+ --red-600: #af2828;
63
+ --red-700: #891f1f;
64
+ --red-800: #641717;
65
+ --red-900: #3e0e0e;
66
+ --brand-primary: #2855cc;
67
+ --brand-secondary: #0f204d;
68
+ --system-success: #31c331;
69
+ --system-danger: #d13434;
70
+ --system-info: #333333;
71
+ --fill-wrapper: #f0f0f0;
72
+ --fill-card: #fafafa;
73
+ --fill-border: #cccccc;
74
+ --fill-info: #ebebeb;
75
+ --button-text: #fafafa;
76
+ --button-primary-standard-background: #2855cc;
77
+ --button-primary-hover-background: #2044a2;
78
+ --button-primary-disabled-background: #ccd7f5;
79
+ --button-secondary-standard-background: #0f204d;
80
+ --button-secondary-hover-background: #070e22;
81
+ --button-secondary-disabled-background: #a1b6ed;
82
+ --button-success-standard-background: #31c331;
83
+ --button-success-hover-background: #279b27;
84
+ --button-success-disabled-background: #a5e8a5;
85
+ --button-danger-standard-background: #d13434;
86
+ --button-danger-hover-background: #af2828;
87
+ --button-danger-disabled-background: #f6dada;
88
+ --button-gray-standard-background: #333333;
89
+ --button-gray-hover-background: #2a2a2a;
90
+ --button-gray-disabled-background: #555555;
91
+ --icon-xs: 16px;
92
+ --icon-sm: 24px;
93
+ --icon-md: 32px;
94
+ --icon-lg: 48px;
95
+ --icon-xl: 80px;
96
+ --element-xxs: 160px;
97
+ --element-xs: 240px;
98
+ --element-sm: 320px;
99
+ --element-md: 480px;
100
+ --element-lg: 640px;
101
+ --element-xl: 960px;
102
+ --element-2xl: 1280px;
103
+ --element-3xl: 1920px;
104
+ --element-4xl: 2560px;
105
+ --element-5xl: 3840px;
106
+ --spacing-nogap: 0;
107
+ --spacing-xs: 4px;
108
+ --spacing-sm: 8px;
109
+ --spacing-md: 16px;
110
+ --spacing-lg: 24px;
111
+ --spacing-xl: 48px;
112
+ --spacing-2xl: 120px;
113
+ --spacing-3xl: 240px;
114
+ --spacing-4xl: 320px;
115
+ --main-title: 'Elice DigitalBaeum OTF';
116
+ --thin: 100;
117
+ --extra-light: 200;
118
+ --light: 300;
119
+ --normal: 400;
120
+ --bold: 700;
121
+ --medium: 500;
122
+ --semi-bold: 600;
123
+ --extra-bold: 800;
124
+ --black: 900;
125
+ --desktop-h1-font-family: 'Elice DigitalBaeum OTF';
126
+ --desktop-h1-font-weight: 700;
127
+ --desktop-h1-font-size: 48px;
128
+ --desktop-h1-line-height: 64;
129
+ --desktop-h2-font-family: 'Elice DigitalBaeum OTF';
130
+ --desktop-h2-font-weight: 700;
131
+ --desktop-h2-font-size: 40px;
132
+ --desktop-h2-line-height: 50;
133
+ --desktop-h3-font-family: 'Elice DigitalBaeum OTF';
134
+ --desktop-h3-font-weight: 700;
135
+ --desktop-h3-font-size: 32px;
136
+ --desktop-h3-line-height: 48;
137
+ --desktop-h4-font-family: 'Elice DigitalBaeum OTF';
138
+ --desktop-h4-font-weight: 700;
139
+ --desktop-h4-font-size: 24px;
140
+ --desktop-h4-line-height: 36;
141
+ --desktop-h5-font-family: 'Elice DigitalBaeum OTF';
142
+ --desktop-h5-font-weight: 700;
143
+ --desktop-h5-font-size: 20px;
144
+ --desktop-h5-line-height: 30;
145
+ --desktop-h6-font-family: 'Elice DigitalBaeum OTF';
146
+ --desktop-h6-font-weight: 700;
147
+ --desktop-h6-font-size: 18px;
148
+ --desktop-h6-line-height: 24;
149
+ --desktop-body-base-font-family: 'Elice DigitalBaeum OTF';
150
+ --desktop-body-base-font-weight: 400;
151
+ --desktop-body-base-font-size: 16px;
152
+ --desktop-body-base-line-height: 24;
153
+ --desktop-body-lg-font-family: 'Elice DigitalBaeum OTF';
154
+ --desktop-body-lg-font-weight: 400;
155
+ --desktop-body-lg-font-size: 18px;
156
+ --desktop-body-lg-line-height: 24;
157
+ --desktop-body-sm-font-family: 'Elice DigitalBaeum OTF';
158
+ --desktop-body-sm-font-weight: 400;
159
+ --desktop-body-sm-font-size: 14px;
160
+ --desktop-body-sm-line-height: 20;
161
+ --desktop-small-font-family: 'Elice DigitalBaeum OTF';
162
+ --desktop-small-font-weight: 400;
163
+ --desktop-small-font-size: 12px;
164
+ --desktop-small-line-height: 18;
165
+ --desktop-small-extra-font-family: 'Elice DigitalBaeum OTF';
166
+ --desktop-small-extra-font-weight: 400;
167
+ --desktop-small-extra-font-size: 10px;
168
+ --desktop-small-extra-line-height: 16;
169
+ --mobile-h1-font-family: 'Elice DigitalBaeum OTF';
170
+ --mobile-h1-font-weight: 700;
171
+ --mobile-h1-font-size: 32px;
172
+ --mobile-h1-line-height: 48;
173
+ --mobile-h2-font-size: 28px;
174
+ --mobile-h2-font-family: 'Elice DigitalBaeum OTF';
175
+ --mobile-h2-font-weight: 700;
176
+ --mobile-h2-line-height: 40;
177
+ --mobile-h3-font-family: 'Elice DigitalBaeum OTF';
178
+ --mobile-h3-font-weight: 700;
179
+ --mobile-h3-font-size: 24px;
180
+ --mobile-h3-line-height: 32;
181
+ --mobile-h4-font-family: 'Elice DigitalBaeum OTF';
182
+ --mobile-h4-font-weight: 700;
183
+ --mobile-h4-font-size: 20px;
184
+ --mobile-h4-line-height: 28;
185
+ --mobile-h5-font-family: 'Elice DigitalBaeum OTF';
186
+ --mobile-h5-font-weight: 700;
187
+ --mobile-h5-font-size: 18px;
188
+ --mobile-h5-line-height: 24;
189
+ --mobile-h6-font-family: 'Elice DigitalBaeum OTF';
190
+ --mobile-h6-font-weight: 700;
191
+ --mobile-h6-font-size: 16px;
192
+ --mobile-h6-line-height: 24;
193
+ --mobile-body-lg-font-family: 'Elice DigitalBaeum OTF';
194
+ --mobile-body-lg-font-weight: 400;
195
+ --mobile-body-lg-font-size: 16px;
196
+ --mobile-body-lg-line-height: 24;
197
+ --mobile-body-base-font-family: 'Elice DigitalBaeum OTF';
198
+ --mobile-body-base-font-weight: 400;
199
+ --mobile-body-base-font-size: 14px;
200
+ --mobile-body-base-line-height: 20;
201
+ --mobile-body-sm-font-family: 'Elice DigitalBaeum OTF';
202
+ --mobile-body-sm-font-weight: 400;
203
+ --mobile-body-sm-font-size: 12px;
204
+ --mobile-body-sm-line-height: 18;
205
+ --mobile-small-font-family: 'Elice DigitalBaeum OTF';
206
+ --mobile-small-font-weight: 400;
207
+ --mobile-small-font-size: 10px;
208
+ --mobile-small-line-height: 16;
209
+ --mobile-small-extra-font-family: 'Elice DigitalBaeum OTF';
210
+ --mobile-small-extra-font-weight: 400;
211
+ --mobile-small-extra-font-size: 8px;
212
+ --mobile-small-extra-line-height: 14;
213
+ --rounded-common: 4px;
214
+ --rounded-none: 0;
215
+ --rounded-xs: 4px;
216
+ --rounded-sm: 8px;
217
+ --rounded-md: 16px;
218
+ --rounded-lg: 24px;
219
+ --rounded-full: 1000px;
220
+ --shadow-none-blur: 0;
221
+ --shadow-none-spread: 0;
222
+ --shadow-none-color: #000000;
223
+ --shadow-none-type: dropShadow;
224
+ --shadow-none-offset-x: 0;
225
+ --shadow-none-offset-y: 0;
226
+ --shadow-xs-blur: 8px;
227
+ --shadow-xs-spread: 0;
228
+ --shadow-xs-color: rgba(0, 0, 0, 0.16);
229
+ --shadow-xs-type: dropShadow;
230
+ --shadow-xs-offset-x: 2px;
231
+ --shadow-xs-offset-y: 2px;
232
+ --shadow-sm-blur: 16px;
233
+ --shadow-sm-spread: 0;
234
+ --shadow-sm-color: rgba(0, 0, 0, 0.16);
235
+ --shadow-sm-type: dropShadow;
236
+ --shadow-sm-offset-x: 4px;
237
+ --shadow-sm-offset-y: 4px;
238
+ --shadow-md-blur: 32px;
239
+ --shadow-md-spread: 0;
240
+ --shadow-md-color: rgba(0, 0, 0, 0.16);
241
+ --shadow-md-type: dropShadow;
242
+ --shadow-md-offset-x: 8px;
243
+ --shadow-md-offset-y: 8px;
244
+ --shadow-lg-blur: 64px;
245
+ --shadow-lg-spread: 0;
246
+ --shadow-lg-color: rgba(0, 0, 0, 0.16);
247
+ --shadow-lg-type: dropShadow;
248
+ --shadow-lg-offset-x: 16px;
249
+ --shadow-lg-offset-y: 16px;
250
+ --shadow-xl-blur: 120px;
251
+ --shadow-xl-spread: 0;
252
+ --shadow-xl-color: rgba(0, 0, 0, 0.16);
253
+ --shadow-xl-type: dropShadow;
254
+ --shadow-xl-offset-x: 24px;
255
+ --shadow-xl-offset-y: 24px;
256
+ --visible: 1;
257
+ --opacity-90: 0.9;
258
+ --opacity-80: 0.8;
259
+ --opacity-70: 0.7;
260
+ --opacity-60: 0.6;
261
+ --opacity-50: 0.5;
262
+ --opacity-40: 0.4;
263
+ --opacity-30: 0.3;
264
+ --opacity-20: 0.2;
265
+ --opacity-10: 0.1;
266
+ --invisible: 0;
267
+ }