@greaming/gds 0.0.1 → 0.0.3
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.
- package/README.md +35 -30
- package/package.json +5 -3
- package/theme.css +351 -5
- package/dist/vite.svg +0 -1
package/README.md
CHANGED
|
@@ -1,52 +1,57 @@
|
|
|
1
|
-
# GDS
|
|
2
|
-
Greaming Design System
|
|
1
|
+
# GDS (Greaming Design System)
|
|
3
2
|
|
|
4
|
-
|
|
3
|
+
이 레포는 **Figma 토큰(JSON)**을 기준으로
|
|
4
|
+
Tailwind에서 쓰는 **`theme.css`**를 자동 생성합니다.
|
|
5
5
|
|
|
6
|
-
##
|
|
6
|
+
## 1) 토큰 위치
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
- `src/tokens/color.json`
|
|
9
|
+
- `src/tokens/font.json`
|
|
10
|
+
- `src/tokens/shape.json`
|
|
11
|
+
- `src/tokens/typescale.json`
|
|
12
|
+
|
|
13
|
+
## 2) `theme.css` 생성
|
|
10
14
|
|
|
11
15
|
```sh
|
|
12
|
-
|
|
13
|
-
pnpm add ../GDS
|
|
14
|
-
pnpm -C ../GDS install
|
|
15
|
-
pnpm -C ../GDS build
|
|
16
|
+
pnpm tokens:build
|
|
16
17
|
```
|
|
17
18
|
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
`theme.css`는 **자동 생성 파일**입니다. 직접 수정하지 마세요.
|
|
20
|
+
|
|
21
|
+
## 3) 프론트 적용
|
|
20
22
|
|
|
21
|
-
|
|
22
|
-
레지스트리에서 사용할 때.
|
|
23
|
+
1. 설치
|
|
23
24
|
|
|
24
25
|
```sh
|
|
25
26
|
pnpm add @greaming/gds
|
|
26
|
-
pnpm up @greaming/gds
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
`theme.css`는 `@theme`를 사용하므로 Tailwind 빌드에서 처리돼야 합니다.
|
|
32
|
-
앱의 전역 CSS(Tailwind를 import하는 파일)에서 아래처럼 import 하세요:
|
|
29
|
+
2. 전역 CSS import
|
|
33
30
|
|
|
34
31
|
```css
|
|
35
|
-
@import "tailwindcss/theme";
|
|
36
32
|
@import "@greaming/gds/theme.css";
|
|
37
|
-
@import "tailwindcss
|
|
33
|
+
@import "tailwindcss";
|
|
38
34
|
```
|
|
39
35
|
|
|
40
|
-
|
|
36
|
+
## 4) 예시 (각 요소 1회)
|
|
41
37
|
|
|
42
|
-
```
|
|
43
|
-
<button
|
|
38
|
+
```tsx
|
|
39
|
+
<button className="display-large bg-secondary text-on-secondary rounded-medium state-layer secondary-opacity-8">
|
|
40
|
+
GDS Button
|
|
41
|
+
</button>
|
|
44
42
|
```
|
|
45
43
|
|
|
46
|
-
|
|
44
|
+
- `display-large`: 타이포그래피(폰트/크기/자간/행간 포함)
|
|
45
|
+
- `bg-secondary`: 컬러 토큰
|
|
46
|
+
- `text-on-secondary`: 컬러 토큰
|
|
47
|
+
- `rounded-medium`: 라운드 토큰
|
|
48
|
+
- `state-layer`: 재사용 가능한 hover 오버레이 동작
|
|
49
|
+
- `secondary-opacity-8`: 오버레이 컬러 토큰
|
|
47
50
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
`state-layer`는 `::before` 레이어를 만들어 hover 시에만 보이게 합니다.
|
|
52
|
+
오버레이 색상은 `primary-opacity-8`, `secondary-opacity-10`처럼 토큰 클래스로 지정합니다.
|
|
53
|
+
|
|
54
|
+
## 5) 폰트 파일
|
|
55
|
+
|
|
56
|
+
`theme.css`는 **폰트 이름만 정의**합니다.
|
|
57
|
+
실제 폰트 파일(.woff2)은 **프론트 레포에서 로드**해야 합니다.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@greaming/gds",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.3",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"module": "./dist/index.js",
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
"@types/react-dom": "^19.2.3",
|
|
32
32
|
"@vitejs/plugin-react": "^5.1.1",
|
|
33
33
|
"eslint": "^9.39.1",
|
|
34
|
+
"eslint-config-prettier": "^10.1.8",
|
|
34
35
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
35
36
|
"eslint-plugin-react-refresh": "^0.4.24",
|
|
36
37
|
"globals": "^16.5.0",
|
|
@@ -45,8 +46,9 @@
|
|
|
45
46
|
},
|
|
46
47
|
"scripts": {
|
|
47
48
|
"dev": "vite",
|
|
48
|
-
"build": "vite build",
|
|
49
|
+
"build": "pnpm tokens:build && vite build",
|
|
49
50
|
"typecheck": "tsc --noEmit",
|
|
50
|
-
"lint": "eslint ."
|
|
51
|
+
"lint": "eslint .",
|
|
52
|
+
"tokens:build": "node scripts/generate-tokens.mjs"
|
|
51
53
|
}
|
|
52
54
|
}
|
package/theme.css
CHANGED
|
@@ -1,8 +1,354 @@
|
|
|
1
|
+
/* AUTO-GENERATED: do not edit directly. */
|
|
1
2
|
@theme {
|
|
2
|
-
--color-
|
|
3
|
-
--color-
|
|
4
|
-
--color-
|
|
3
|
+
--color-error: rgb(255 90 90);
|
|
4
|
+
--color-on-primary: rgb(252 252 252);
|
|
5
|
+
--color-on-secondary: rgb(18 19 21);
|
|
6
|
+
--color-on-surface: rgb(18 19 21);
|
|
7
|
+
--color-on-surface-variant-bright: rgb(252 252 252);
|
|
8
|
+
--color-on-surface-variant-dim: rgb(35 36 38);
|
|
9
|
+
--color-on-surface-variant-highest: rgb(243 243 243);
|
|
10
|
+
--color-on-surface-variant-low: rgb(182 182 183);
|
|
11
|
+
--color-on-surface-variant-lowest: rgb(133 133 134);
|
|
12
|
+
--color-outline: rgb(35 36 38);
|
|
13
|
+
--color-outline-variant: rgb(182 182 183);
|
|
14
|
+
--color-primary: rgb(18 19 21);
|
|
15
|
+
--color-secondary: rgb(198 240 101);
|
|
16
|
+
--color-secondary-variant: rgb(133 179 26);
|
|
17
|
+
--color-surface: rgb(252 252 252);
|
|
18
|
+
--color-surface-variant-high: rgb(243 243 243);
|
|
19
|
+
--color-surface-variant-low: rgb(231 231 231);
|
|
20
|
+
--color-surface-variant-lowest: rgb(84 85 86);
|
|
21
|
+
--color-state-layers-error-opacity-8: rgb(240 238 233 / 0.08);
|
|
22
|
+
--color-state-layers-error-opacity-10: rgb(240 238 233 / 0.1);
|
|
23
|
+
--color-state-layers-error-opacity-16: rgb(240 238 233 / 0.16);
|
|
24
|
+
--color-state-layers-error-container-opacity-8: rgb(249 222 220 / 0.08);
|
|
25
|
+
--color-state-layers-error-container-opacity-10: rgb(249 222 220 / 0.1);
|
|
26
|
+
--color-state-layers-error-container-opacity-16: rgb(249 222 220 / 0.16);
|
|
27
|
+
--color-state-layers-primary-opacity-8: rgb(18 19 21 / 0.08);
|
|
28
|
+
--color-state-layers-primary-opacity-10: rgb(18 19 21 / 0.1);
|
|
29
|
+
--color-state-layers-primary-opacity-16: rgb(18 19 21 / 0.16);
|
|
30
|
+
--color-state-layers-primary-container-opacity-8: rgb(18 19 21 / 0.08);
|
|
31
|
+
--color-state-layers-primary-container-opacity-10: rgb(18 19 21 / 0.1);
|
|
32
|
+
--color-state-layers-primary-container-opacity-16: rgb(18 19 21 / 0.16);
|
|
33
|
+
--color-state-layers-secondary-opacity-8: rgb(18 19 21 / 0.08);
|
|
34
|
+
--color-state-layers-secondary-opacity-10: rgb(18 19 21 / 0.1);
|
|
35
|
+
--color-state-layers-secondary-opacity-16: rgb(18 19 21 / 0.16);
|
|
36
|
+
--color-state-layers-secondary-container-opacity-8: rgb(18 19 21 / 0.08);
|
|
37
|
+
--color-state-layers-secondary-container-opacity-10: rgb(18 19 21 / 0.1);
|
|
38
|
+
--color-state-layers-secondary-container-opacity-16: rgb(18 19 21 / 0.16);
|
|
39
|
+
--color-state-layers-surface-container-opacity-8: rgb(18 19 21 / 0.08);
|
|
40
|
+
--color-state-layers-surface-container-opacity-10: rgb(18 19 21 / 0.1);
|
|
41
|
+
--color-state-layers-surface-container-opacity-16: rgb(18 19 21 / 0.16);
|
|
42
|
+
--color-state-layers-surface-variant-opacity-8: rgb(231 229 225 / 0.08);
|
|
43
|
+
--color-state-layers-surface-variant-opacity-10: rgb(231 229 225 / 0.1);
|
|
44
|
+
--color-state-layers-surface-variant-opacity-16: rgb(231 229 225 / 0.16);
|
|
45
|
+
--font-brand: "Knewave";
|
|
46
|
+
--font-plain: "Pretendard";
|
|
47
|
+
--font-weight-bold: 700;
|
|
48
|
+
--font-weight-medium: 500;
|
|
49
|
+
--font-weight-regular: 400;
|
|
50
|
+
--font-weight-semi-bold: 600;
|
|
51
|
+
--tracking-none: 0;
|
|
52
|
+
--tracking-small: 0.1px;
|
|
53
|
+
--radius-extra-extra-large: 48px;
|
|
54
|
+
--radius-extra-large: 28px;
|
|
55
|
+
--radius-extra-large-increased: 32px;
|
|
56
|
+
--radius-extra-small: 4px;
|
|
57
|
+
--radius-full: 1000px;
|
|
58
|
+
--radius-large: 16px;
|
|
59
|
+
--radius-large-increased: 20px;
|
|
60
|
+
--radius-medium: 12px;
|
|
61
|
+
--radius-none: 0;
|
|
62
|
+
--radius-small: 8px;
|
|
63
|
+
--text-body-large: 16px;
|
|
64
|
+
--text-body-large--line-height: 24px;
|
|
65
|
+
--text-body-large--letter-spacing: 0.5px;
|
|
66
|
+
--text-body-medium: 14px;
|
|
67
|
+
--text-body-medium--line-height: 20px;
|
|
68
|
+
--text-body-medium--letter-spacing: 0.25px;
|
|
69
|
+
--text-body-small: 12px;
|
|
70
|
+
--text-body-small--line-height: 16px;
|
|
71
|
+
--text-body-small--letter-spacing: 0.4px;
|
|
72
|
+
--text-body-xlarge: 18px;
|
|
73
|
+
--text-body-xlarge--line-height: 24px;
|
|
74
|
+
--text-body-xlarge--letter-spacing: 0.65px;
|
|
75
|
+
--text-display-large: 52px;
|
|
76
|
+
--text-display-large--line-height: 62px;
|
|
77
|
+
--text-display-large--letter-spacing: -0.25px;
|
|
78
|
+
--text-display-medium: 45px;
|
|
79
|
+
--text-display-medium--line-height: 52px;
|
|
80
|
+
--text-display-medium--letter-spacing: 0;
|
|
81
|
+
--text-display-small: 36px;
|
|
82
|
+
--text-display-small--line-height: 44px;
|
|
83
|
+
--text-display-small--letter-spacing: 0;
|
|
84
|
+
--text-label-large: 14px;
|
|
85
|
+
--text-label-large--line-height: 20px;
|
|
86
|
+
--text-label-large--letter-spacing: 0.1px;
|
|
87
|
+
--text-label-medium: 12px;
|
|
88
|
+
--text-label-medium--line-height: 16px;
|
|
89
|
+
--text-label-medium--letter-spacing: 0.5px;
|
|
90
|
+
--text-label-small: 11px;
|
|
91
|
+
--text-label-small--line-height: 16px;
|
|
92
|
+
--text-label-small--letter-spacing: 0.5px;
|
|
93
|
+
--text-label-xlarge: 16px;
|
|
94
|
+
--text-label-xlarge--line-height: 24px;
|
|
95
|
+
--text-label-xlarge--letter-spacing: 0.1px;
|
|
96
|
+
--text-label-xxlarge: 18px;
|
|
97
|
+
--text-label-xxlarge--line-height: 24px;
|
|
98
|
+
--text-label-xxlarge--letter-spacing: 0.1px;
|
|
99
|
+
--text-label-xxxlarge: 20px;
|
|
100
|
+
--text-label-xxxlarge--line-height: 26px;
|
|
101
|
+
--text-label-xxxlarge--letter-spacing: 0;
|
|
102
|
+
--text-main-title-large: 32px;
|
|
103
|
+
--text-main-title-large--line-height: 40px;
|
|
104
|
+
--text-main-title-large--letter-spacing: 0;
|
|
105
|
+
--text-main-title-medium: 28px;
|
|
106
|
+
--text-main-title-medium--line-height: 36px;
|
|
107
|
+
--text-main-title-medium--letter-spacing: 0;
|
|
108
|
+
--text-main-title-small: 24px;
|
|
109
|
+
--text-main-title-small--line-height: 32px;
|
|
110
|
+
--text-main-title-small--letter-spacing: 0;
|
|
111
|
+
--text-sub-title-large: 18px;
|
|
112
|
+
--text-sub-title-large--line-height: 26px;
|
|
113
|
+
--text-sub-title-large--letter-spacing: 0.15px;
|
|
114
|
+
--text-sub-title-medium: 16px;
|
|
115
|
+
--text-sub-title-medium--line-height: 24px;
|
|
116
|
+
--text-sub-title-medium--letter-spacing: 0.15px;
|
|
117
|
+
--text-sub-title-small: 14px;
|
|
118
|
+
--text-sub-title-small--line-height: 20px;
|
|
119
|
+
--text-sub-title-small--letter-spacing: 0.1px;
|
|
120
|
+
--text-sub-title-xlarge: 20px;
|
|
121
|
+
--text-sub-title-xlarge--line-height: 28px;
|
|
122
|
+
--text-sub-title-xlarge--letter-spacing: 0;
|
|
123
|
+
}
|
|
5
124
|
|
|
6
|
-
|
|
7
|
-
|
|
125
|
+
@layer utilities {
|
|
126
|
+
.state-layer {
|
|
127
|
+
position: relative;
|
|
128
|
+
overflow: hidden;
|
|
129
|
+
}
|
|
130
|
+
.state-layer::before {
|
|
131
|
+
content: "";
|
|
132
|
+
position: absolute;
|
|
133
|
+
inset: 0;
|
|
134
|
+
background-color: var(--state-layer-color, transparent);
|
|
135
|
+
opacity: 0;
|
|
136
|
+
transition: opacity 150ms ease;
|
|
137
|
+
pointer-events: none;
|
|
138
|
+
}
|
|
139
|
+
.state-layer:hover::before {
|
|
140
|
+
opacity: 1;
|
|
141
|
+
}
|
|
142
|
+
.error-opacity-8 {
|
|
143
|
+
--state-layer-color: var(--color-state-layers-error-opacity-8);
|
|
144
|
+
}
|
|
145
|
+
.error-opacity-10 {
|
|
146
|
+
--state-layer-color: var(--color-state-layers-error-opacity-10);
|
|
147
|
+
}
|
|
148
|
+
.error-opacity-16 {
|
|
149
|
+
--state-layer-color: var(--color-state-layers-error-opacity-16);
|
|
150
|
+
}
|
|
151
|
+
.error-container-opacity-8 {
|
|
152
|
+
--state-layer-color: var(--color-state-layers-error-container-opacity-8);
|
|
153
|
+
}
|
|
154
|
+
.error-container-opacity-10 {
|
|
155
|
+
--state-layer-color: var(--color-state-layers-error-container-opacity-10);
|
|
156
|
+
}
|
|
157
|
+
.error-container-opacity-16 {
|
|
158
|
+
--state-layer-color: var(--color-state-layers-error-container-opacity-16);
|
|
159
|
+
}
|
|
160
|
+
.primary-opacity-8 {
|
|
161
|
+
--state-layer-color: var(--color-state-layers-primary-opacity-8);
|
|
162
|
+
}
|
|
163
|
+
.primary-opacity-10 {
|
|
164
|
+
--state-layer-color: var(--color-state-layers-primary-opacity-10);
|
|
165
|
+
}
|
|
166
|
+
.primary-opacity-16 {
|
|
167
|
+
--state-layer-color: var(--color-state-layers-primary-opacity-16);
|
|
168
|
+
}
|
|
169
|
+
.primary-container-opacity-8 {
|
|
170
|
+
--state-layer-color: var(--color-state-layers-primary-container-opacity-8);
|
|
171
|
+
}
|
|
172
|
+
.primary-container-opacity-10 {
|
|
173
|
+
--state-layer-color: var(--color-state-layers-primary-container-opacity-10);
|
|
174
|
+
}
|
|
175
|
+
.primary-container-opacity-16 {
|
|
176
|
+
--state-layer-color: var(--color-state-layers-primary-container-opacity-16);
|
|
177
|
+
}
|
|
178
|
+
.secondary-opacity-8 {
|
|
179
|
+
--state-layer-color: var(--color-state-layers-secondary-opacity-8);
|
|
180
|
+
}
|
|
181
|
+
.secondary-opacity-10 {
|
|
182
|
+
--state-layer-color: var(--color-state-layers-secondary-opacity-10);
|
|
183
|
+
}
|
|
184
|
+
.secondary-opacity-16 {
|
|
185
|
+
--state-layer-color: var(--color-state-layers-secondary-opacity-16);
|
|
186
|
+
}
|
|
187
|
+
.secondary-container-opacity-8 {
|
|
188
|
+
--state-layer-color: var(--color-state-layers-secondary-container-opacity-8);
|
|
189
|
+
}
|
|
190
|
+
.secondary-container-opacity-10 {
|
|
191
|
+
--state-layer-color: var(--color-state-layers-secondary-container-opacity-10);
|
|
192
|
+
}
|
|
193
|
+
.secondary-container-opacity-16 {
|
|
194
|
+
--state-layer-color: var(--color-state-layers-secondary-container-opacity-16);
|
|
195
|
+
}
|
|
196
|
+
.surface-container-opacity-8 {
|
|
197
|
+
--state-layer-color: var(--color-state-layers-surface-container-opacity-8);
|
|
198
|
+
}
|
|
199
|
+
.surface-container-opacity-10 {
|
|
200
|
+
--state-layer-color: var(--color-state-layers-surface-container-opacity-10);
|
|
201
|
+
}
|
|
202
|
+
.surface-container-opacity-16 {
|
|
203
|
+
--state-layer-color: var(--color-state-layers-surface-container-opacity-16);
|
|
204
|
+
}
|
|
205
|
+
.surface-variant-opacity-8 {
|
|
206
|
+
--state-layer-color: var(--color-state-layers-surface-variant-opacity-8);
|
|
207
|
+
}
|
|
208
|
+
.surface-variant-opacity-10 {
|
|
209
|
+
--state-layer-color: var(--color-state-layers-surface-variant-opacity-10);
|
|
210
|
+
}
|
|
211
|
+
.surface-variant-opacity-16 {
|
|
212
|
+
--state-layer-color: var(--color-state-layers-surface-variant-opacity-16);
|
|
213
|
+
}
|
|
214
|
+
.body-large {
|
|
215
|
+
font-family: var(--font-plain);
|
|
216
|
+
font-weight: var(--font-weight-regular);
|
|
217
|
+
font-size: var(--text-body-large);
|
|
218
|
+
line-height: var(--text-body-large--line-height);
|
|
219
|
+
letter-spacing: var(--text-body-large--letter-spacing);
|
|
220
|
+
}
|
|
221
|
+
.body-medium {
|
|
222
|
+
font-family: var(--font-plain);
|
|
223
|
+
font-weight: var(--font-weight-regular);
|
|
224
|
+
font-size: var(--text-body-medium);
|
|
225
|
+
line-height: var(--text-body-medium--line-height);
|
|
226
|
+
letter-spacing: var(--text-body-medium--letter-spacing);
|
|
227
|
+
}
|
|
228
|
+
.body-small {
|
|
229
|
+
font-family: var(--font-plain);
|
|
230
|
+
font-weight: var(--font-weight-regular);
|
|
231
|
+
font-size: var(--text-body-small);
|
|
232
|
+
line-height: var(--text-body-small--line-height);
|
|
233
|
+
letter-spacing: var(--text-body-small--letter-spacing);
|
|
234
|
+
}
|
|
235
|
+
.body-xlarge {
|
|
236
|
+
font-family: var(--font-plain);
|
|
237
|
+
font-weight: var(--font-weight-regular);
|
|
238
|
+
font-size: var(--text-body-xlarge);
|
|
239
|
+
line-height: var(--text-body-xlarge--line-height);
|
|
240
|
+
letter-spacing: var(--text-body-xlarge--letter-spacing);
|
|
241
|
+
}
|
|
242
|
+
.display-large {
|
|
243
|
+
font-family: var(--font-brand);
|
|
244
|
+
font-weight: var(--font-weight-regular);
|
|
245
|
+
font-size: var(--text-display-large);
|
|
246
|
+
line-height: var(--text-display-large--line-height);
|
|
247
|
+
letter-spacing: var(--text-display-large--letter-spacing);
|
|
248
|
+
}
|
|
249
|
+
.display-medium {
|
|
250
|
+
font-family: var(--font-brand);
|
|
251
|
+
font-weight: var(--font-weight-regular);
|
|
252
|
+
font-size: var(--text-display-medium);
|
|
253
|
+
line-height: var(--text-display-medium--line-height);
|
|
254
|
+
letter-spacing: var(--text-display-medium--letter-spacing);
|
|
255
|
+
}
|
|
256
|
+
.display-small {
|
|
257
|
+
font-family: var(--font-brand);
|
|
258
|
+
font-weight: var(--font-weight-regular);
|
|
259
|
+
font-size: var(--text-display-small);
|
|
260
|
+
line-height: var(--text-display-small--line-height);
|
|
261
|
+
letter-spacing: var(--text-display-small--letter-spacing);
|
|
262
|
+
}
|
|
263
|
+
.label-large {
|
|
264
|
+
font-family: var(--font-plain);
|
|
265
|
+
font-weight: var(--font-weight-medium);
|
|
266
|
+
font-size: var(--text-label-large);
|
|
267
|
+
line-height: var(--text-label-large--line-height);
|
|
268
|
+
letter-spacing: var(--text-label-large--letter-spacing);
|
|
269
|
+
}
|
|
270
|
+
.label-medium {
|
|
271
|
+
font-family: var(--font-plain);
|
|
272
|
+
font-weight: var(--font-weight-medium);
|
|
273
|
+
font-size: var(--text-label-medium);
|
|
274
|
+
line-height: var(--text-label-medium--line-height);
|
|
275
|
+
letter-spacing: var(--text-label-medium--letter-spacing);
|
|
276
|
+
}
|
|
277
|
+
.label-small {
|
|
278
|
+
font-family: var(--font-plain);
|
|
279
|
+
font-weight: var(--font-weight-medium);
|
|
280
|
+
font-size: var(--text-label-small);
|
|
281
|
+
line-height: var(--text-label-small--line-height);
|
|
282
|
+
letter-spacing: var(--text-label-small--letter-spacing);
|
|
283
|
+
}
|
|
284
|
+
.label-xlarge {
|
|
285
|
+
font-family: var(--font-plain);
|
|
286
|
+
font-weight: var(--font-weight-regular);
|
|
287
|
+
font-size: var(--text-label-xlarge);
|
|
288
|
+
line-height: var(--text-label-xlarge--line-height);
|
|
289
|
+
letter-spacing: var(--text-label-xlarge--letter-spacing);
|
|
290
|
+
}
|
|
291
|
+
.label-xxlarge {
|
|
292
|
+
font-family: var(--font-plain);
|
|
293
|
+
font-weight: var(--font-weight-regular);
|
|
294
|
+
font-size: var(--text-label-xxlarge);
|
|
295
|
+
line-height: var(--text-label-xxlarge--line-height);
|
|
296
|
+
letter-spacing: var(--text-label-xxlarge--letter-spacing);
|
|
297
|
+
}
|
|
298
|
+
.label-xxxlarge {
|
|
299
|
+
font-family: var(--font-plain);
|
|
300
|
+
font-weight: var(--font-weight-regular);
|
|
301
|
+
font-size: var(--text-label-xxxlarge);
|
|
302
|
+
line-height: var(--text-label-xxxlarge--line-height);
|
|
303
|
+
letter-spacing: var(--text-label-xxxlarge--letter-spacing);
|
|
304
|
+
}
|
|
305
|
+
.main-title-large {
|
|
306
|
+
font-family: var(--font-plain);
|
|
307
|
+
font-weight: var(--font-weight-regular);
|
|
308
|
+
font-size: var(--text-main-title-large);
|
|
309
|
+
line-height: var(--text-main-title-large--line-height);
|
|
310
|
+
letter-spacing: var(--text-main-title-large--letter-spacing);
|
|
311
|
+
}
|
|
312
|
+
.main-title-medium {
|
|
313
|
+
font-family: var(--font-plain);
|
|
314
|
+
font-weight: var(--font-weight-regular);
|
|
315
|
+
font-size: var(--text-main-title-medium);
|
|
316
|
+
line-height: var(--text-main-title-medium--line-height);
|
|
317
|
+
letter-spacing: var(--text-main-title-medium--letter-spacing);
|
|
318
|
+
}
|
|
319
|
+
.main-title-small {
|
|
320
|
+
font-family: var(--font-plain);
|
|
321
|
+
font-weight: var(--font-weight-regular);
|
|
322
|
+
font-size: var(--text-main-title-small);
|
|
323
|
+
line-height: var(--text-main-title-small--line-height);
|
|
324
|
+
letter-spacing: var(--text-main-title-small--letter-spacing);
|
|
325
|
+
}
|
|
326
|
+
.sub-title-large {
|
|
327
|
+
font-family: var(--font-plain);
|
|
328
|
+
font-weight: var(--font-weight-regular);
|
|
329
|
+
font-size: var(--text-sub-title-large);
|
|
330
|
+
line-height: var(--text-sub-title-large--line-height);
|
|
331
|
+
letter-spacing: var(--text-sub-title-large--letter-spacing);
|
|
332
|
+
}
|
|
333
|
+
.sub-title-medium {
|
|
334
|
+
font-family: var(--font-plain);
|
|
335
|
+
font-weight: var(--font-weight-medium);
|
|
336
|
+
font-size: var(--text-sub-title-medium);
|
|
337
|
+
line-height: var(--text-sub-title-medium--line-height);
|
|
338
|
+
letter-spacing: var(--text-sub-title-medium--letter-spacing);
|
|
339
|
+
}
|
|
340
|
+
.sub-title-small {
|
|
341
|
+
font-family: var(--font-plain);
|
|
342
|
+
font-weight: var(--font-weight-medium);
|
|
343
|
+
font-size: var(--text-sub-title-small);
|
|
344
|
+
line-height: var(--text-sub-title-small--line-height);
|
|
345
|
+
letter-spacing: var(--text-sub-title-small--letter-spacing);
|
|
346
|
+
}
|
|
347
|
+
.sub-title-xlarge {
|
|
348
|
+
font-family: var(--font-plain);
|
|
349
|
+
font-weight: var(--font-weight-regular);
|
|
350
|
+
font-size: var(--text-sub-title-xlarge);
|
|
351
|
+
line-height: var(--text-sub-title-xlarge--line-height);
|
|
352
|
+
letter-spacing: var(--text-sub-title-xlarge--letter-spacing);
|
|
353
|
+
}
|
|
8
354
|
}
|
package/dist/vite.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|