@a2v2ai/uikit 0.0.40 → 0.0.41
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/index.css +40 -40
- package/lib/typography-types.ts +40 -40
- package/package.json +1 -1
package/index.css
CHANGED
|
@@ -151,61 +151,61 @@
|
|
|
151
151
|
/* Typography utility classes */
|
|
152
152
|
@layer components {
|
|
153
153
|
/* Headings */
|
|
154
|
-
.text-h1 { @apply font-extrabold text-[64px] leading-
|
|
155
|
-
.text-h2 { @apply font-bold text-[48px] leading-
|
|
156
|
-
.text-h3 { @apply font-bold text-[32px] leading-
|
|
154
|
+
.text-h1 { @apply font-extrabold text-[64px] leading-[1.3] tracking-normal font-sans; }
|
|
155
|
+
.text-h2 { @apply font-bold text-[48px] leading-[1.3] tracking-normal font-sans; }
|
|
156
|
+
.text-h3 { @apply font-bold text-[32px] leading-[1.3] tracking-normal font-sans; }
|
|
157
157
|
.text-h4 { @apply font-bold text-[24px] leading-[1.2] tracking-[-0.48px] font-sans; }
|
|
158
|
-
.text-h5 { @apply font-bold text-[20px] leading-
|
|
159
|
-
.text-h6 { @apply font-semibold text-[20px] leading-
|
|
158
|
+
.text-h5 { @apply font-bold text-[20px] leading-[1.3] tracking-normal font-sans; }
|
|
159
|
+
.text-h6 { @apply font-semibold text-[20px] leading-[1.3] tracking-normal font-sans; }
|
|
160
160
|
|
|
161
161
|
/* Subtitle 1 */
|
|
162
|
-
.text-subtitle1 { @apply font-semibold text-[20px] leading-
|
|
163
|
-
.text-subtitle1-light { @apply font-light text-[20px] leading-
|
|
164
|
-
.text-subtitle1-medium { @apply font-medium text-[20px] leading-
|
|
165
|
-
.text-subtitle1-semibold { @apply font-semibold text-[20px] leading-
|
|
166
|
-
.text-subtitle1-bold { @apply font-bold text-[20px] leading-
|
|
162
|
+
.text-subtitle1 { @apply font-semibold text-[20px] leading-[1.3] tracking-normal font-sans; }
|
|
163
|
+
.text-subtitle1-light { @apply font-light text-[20px] leading-[1.3] tracking-normal font-sans; }
|
|
164
|
+
.text-subtitle1-medium { @apply font-medium text-[20px] leading-[1.3] tracking-normal font-sans; }
|
|
165
|
+
.text-subtitle1-semibold { @apply font-semibold text-[20px] leading-[1.3] tracking-normal font-sans; }
|
|
166
|
+
.text-subtitle1-bold { @apply font-bold text-[20px] leading-[1.3] tracking-normal font-sans; }
|
|
167
167
|
|
|
168
168
|
/* Subtitle 2 */
|
|
169
|
-
.text-subtitle2 { @apply font-semibold text-[18px] leading-
|
|
170
|
-
.text-subtitle2-light { @apply font-light text-[18px] leading-
|
|
171
|
-
.text-subtitle2-medium { @apply font-medium text-[18px] leading-
|
|
172
|
-
.text-subtitle2-semibold { @apply font-semibold text-[18px] leading-
|
|
173
|
-
.text-subtitle2-bold { @apply font-bold text-[18px] leading-
|
|
169
|
+
.text-subtitle2 { @apply font-semibold text-[18px] leading-[1.3] tracking-normal font-sans; }
|
|
170
|
+
.text-subtitle2-light { @apply font-light text-[18px] leading-[1.3] tracking-normal font-sans; }
|
|
171
|
+
.text-subtitle2-medium { @apply font-medium text-[18px] leading-[1.3] tracking-normal font-sans; }
|
|
172
|
+
.text-subtitle2-semibold { @apply font-semibold text-[18px] leading-[1.3] tracking-normal font-sans; }
|
|
173
|
+
.text-subtitle2-bold { @apply font-bold text-[18px] leading-[1.3] tracking-normal font-sans; }
|
|
174
174
|
|
|
175
175
|
/* Subtitle 3 */
|
|
176
|
-
.text-subtitle3 { @apply font-semibold text-[16px] leading-
|
|
177
|
-
.text-subtitle3-light { @apply font-light text-[16px] leading-
|
|
178
|
-
.text-subtitle3-medium { @apply font-medium text-[16px] leading-
|
|
179
|
-
.text-subtitle3-semibold { @apply font-semibold text-[16px] leading-
|
|
180
|
-
.text-subtitle3-bold { @apply font-bold text-[16px] leading-
|
|
176
|
+
.text-subtitle3 { @apply font-semibold text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
177
|
+
.text-subtitle3-light { @apply font-light text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
178
|
+
.text-subtitle3-medium { @apply font-medium text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
179
|
+
.text-subtitle3-semibold { @apply font-semibold text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
180
|
+
.text-subtitle3-bold { @apply font-bold text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
181
181
|
|
|
182
182
|
/* Body 1 */
|
|
183
|
-
.text-body1 { @apply font-normal text-[16px] leading-
|
|
184
|
-
.text-body1-light { @apply font-light text-[16px] leading-
|
|
185
|
-
.text-body1-medium { @apply font-medium text-[16px] leading-
|
|
186
|
-
.text-body1-semibold { @apply font-semibold text-[16px] leading-
|
|
187
|
-
.text-body1-bold { @apply font-bold text-[16px] leading-
|
|
183
|
+
.text-body1 { @apply font-normal text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
184
|
+
.text-body1-light { @apply font-light text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
185
|
+
.text-body1-medium { @apply font-medium text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
186
|
+
.text-body1-semibold { @apply font-semibold text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
187
|
+
.text-body1-bold { @apply font-bold text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
188
188
|
|
|
189
189
|
/* Body 2 */
|
|
190
|
-
.text-body2 { @apply font-normal text-[14px] leading-
|
|
191
|
-
.text-body2-light { @apply font-light text-[14px] leading-
|
|
192
|
-
.text-body2-medium { @apply font-medium text-[14px] leading-
|
|
193
|
-
.text-body2-semibold { @apply font-semibold text-[14px] leading-
|
|
194
|
-
.text-body2-bold { @apply font-bold text-[14px] leading-
|
|
190
|
+
.text-body2 { @apply font-normal text-[14px] leading-[1.3] tracking-normal font-sans; }
|
|
191
|
+
.text-body2-light { @apply font-light text-[14px] leading-[1.3] tracking-normal font-sans; }
|
|
192
|
+
.text-body2-medium { @apply font-medium text-[14px] leading-[1.3] tracking-normal font-sans; }
|
|
193
|
+
.text-body2-semibold { @apply font-semibold text-[14px] leading-[1.3] tracking-normal font-sans; }
|
|
194
|
+
.text-body2-bold { @apply font-bold text-[14px] leading-[1.3] tracking-normal font-sans; }
|
|
195
195
|
|
|
196
196
|
/* Body 3 */
|
|
197
|
-
.text-body3 { @apply font-normal text-[12px] leading-
|
|
198
|
-
.text-body3-light { @apply font-light text-[12px] leading-
|
|
199
|
-
.text-body3-medium { @apply font-medium text-[12px] leading-
|
|
200
|
-
.text-body3-semibold { @apply font-semibold text-[12px] leading-
|
|
201
|
-
.text-body3-bold { @apply font-bold text-[12px] leading-
|
|
197
|
+
.text-body3 { @apply font-normal text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
198
|
+
.text-body3-light { @apply font-light text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
199
|
+
.text-body3-medium { @apply font-medium text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
200
|
+
.text-body3-semibold { @apply font-semibold text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
201
|
+
.text-body3-bold { @apply font-bold text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
202
202
|
|
|
203
203
|
/* Caption */
|
|
204
|
-
.text-caption { @apply font-light text-[12px] leading-
|
|
205
|
-
.text-caption-light { @apply font-light text-[12px] leading-
|
|
206
|
-
.text-caption-medium { @apply font-medium text-[12px] leading-
|
|
207
|
-
.text-caption-semibold { @apply font-semibold text-[12px] leading-
|
|
208
|
-
.text-caption-bold { @apply font-bold text-[12px] leading-
|
|
204
|
+
.text-caption { @apply font-light text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
205
|
+
.text-caption-light { @apply font-light text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
206
|
+
.text-caption-medium { @apply font-medium text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
207
|
+
.text-caption-semibold { @apply font-semibold text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
208
|
+
.text-caption-bold { @apply font-bold text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
209
209
|
}
|
|
210
210
|
|
|
211
211
|
/* Base layer */
|
package/lib/typography-types.ts
CHANGED
|
@@ -117,47 +117,47 @@ export type TextColor =
|
|
|
117
117
|
| "grey-950"
|
|
118
118
|
|
|
119
119
|
export const textVariantClasses: Record<TextVariant, string> = {
|
|
120
|
-
h1: "font-extrabold text-[64px] leading-
|
|
121
|
-
h2: "font-bold text-[48px] leading-
|
|
122
|
-
h3: "font-bold text-[32px] leading-
|
|
120
|
+
h1: "font-extrabold text-[64px] leading-[1.3] tracking-normal font-sans",
|
|
121
|
+
h2: "font-bold text-[48px] leading-[1.3] tracking-normal font-sans",
|
|
122
|
+
h3: "font-bold text-[32px] leading-[1.3] tracking-normal font-sans",
|
|
123
123
|
h4: "font-bold text-[24px] leading-[1.2] tracking-[-0.48px] font-sans",
|
|
124
|
-
h5: "font-bold text-[20px] leading-
|
|
125
|
-
h6: "font-semibold text-[20px] leading-
|
|
126
|
-
subtitle1: "font-semibold text-[20px] leading-
|
|
127
|
-
subtitle2: "font-semibold text-[18px] leading-
|
|
128
|
-
subtitle3: "font-semibold text-[16px] leading-
|
|
129
|
-
body1: "font-normal text-[16px] leading-
|
|
130
|
-
body2: "font-normal text-[14px] leading-
|
|
131
|
-
body3: "font-normal text-[12px] leading-
|
|
132
|
-
caption: "font-light text-[12px] leading-
|
|
133
|
-
subtitle1Medium: "font-medium text-[20px] leading-
|
|
134
|
-
subtitle1Bold: "font-bold text-[20px] leading-
|
|
135
|
-
subtitle1SemiBold: "font-semibold text-[20px] leading-
|
|
136
|
-
subtitle2Medium: "font-medium text-[18px] leading-
|
|
137
|
-
subtitle2Bold: "font-bold text-[18px] leading-
|
|
138
|
-
subtitle2SemiBold: "font-semibold text-[18px] leading-
|
|
139
|
-
subtitle3Medium: "font-medium text-[16px] leading-
|
|
140
|
-
subtitle3Bold: "font-bold text-[16px] leading-
|
|
141
|
-
subtitle3SemiBold: "font-semibold text-[16px] leading-
|
|
142
|
-
body1Medium: "font-medium text-[16px] leading-
|
|
143
|
-
body1Bold: "font-bold text-[16px] leading-
|
|
144
|
-
body1SemiBold: "font-semibold text-[16px] leading-
|
|
145
|
-
body2Medium: "font-medium text-[14px] leading-
|
|
146
|
-
body2Bold: "font-bold text-[14px] leading-
|
|
147
|
-
body2SemiBold: "font-semibold text-[14px] leading-
|
|
148
|
-
body3Medium: "font-medium text-[12px] leading-
|
|
149
|
-
body3Bold: "font-bold text-[12px] leading-
|
|
150
|
-
body3SemiBold: "font-semibold text-[12px] leading-
|
|
151
|
-
captionMedium: "font-medium text-[12px] leading-
|
|
152
|
-
captionBold: "font-bold text-[12px] leading-
|
|
153
|
-
captionSemiBold: "font-semibold text-[12px] leading-
|
|
154
|
-
subtitle1Light: "font-light text-[20px] leading-
|
|
155
|
-
subtitle2Light: "font-light text-[18px] leading-
|
|
156
|
-
subtitle3Light: "font-light text-[16px] leading-
|
|
157
|
-
body1Light: "font-light text-[16px] leading-
|
|
158
|
-
body2Light: "font-light text-[14px] leading-
|
|
159
|
-
body3Light: "font-light text-[12px] leading-
|
|
160
|
-
captionLight: "font-light text-[12px] leading-
|
|
124
|
+
h5: "font-bold text-[20px] leading-[1.3] tracking-normal font-sans",
|
|
125
|
+
h6: "font-semibold text-[20px] leading-[1.3] tracking-normal font-sans",
|
|
126
|
+
subtitle1: "font-semibold text-[20px] leading-[1.3] tracking-normal font-sans",
|
|
127
|
+
subtitle2: "font-semibold text-[18px] leading-[1.3] tracking-normal font-sans",
|
|
128
|
+
subtitle3: "font-semibold text-[16px] leading-[1.3] tracking-normal font-sans",
|
|
129
|
+
body1: "font-normal text-[16px] leading-[1.3] tracking-normal font-sans",
|
|
130
|
+
body2: "font-normal text-[14px] leading-[1.3] tracking-normal font-sans",
|
|
131
|
+
body3: "font-normal text-[12px] leading-[1.3] tracking-normal font-sans",
|
|
132
|
+
caption: "font-light text-[12px] leading-[1.3] tracking-normal font-sans",
|
|
133
|
+
subtitle1Medium: "font-medium text-[20px] leading-[1.3] tracking-normal font-sans",
|
|
134
|
+
subtitle1Bold: "font-bold text-[20px] leading-[1.3] tracking-normal font-sans",
|
|
135
|
+
subtitle1SemiBold: "font-semibold text-[20px] leading-[1.3] tracking-normal font-sans",
|
|
136
|
+
subtitle2Medium: "font-medium text-[18px] leading-[1.3] tracking-normal font-sans",
|
|
137
|
+
subtitle2Bold: "font-bold text-[18px] leading-[1.3] tracking-normal font-sans",
|
|
138
|
+
subtitle2SemiBold: "font-semibold text-[18px] leading-[1.3] tracking-normal font-sans",
|
|
139
|
+
subtitle3Medium: "font-medium text-[16px] leading-[1.3] tracking-normal font-sans",
|
|
140
|
+
subtitle3Bold: "font-bold text-[16px] leading-[1.3] tracking-normal font-sans",
|
|
141
|
+
subtitle3SemiBold: "font-semibold text-[16px] leading-[1.3] tracking-normal font-sans",
|
|
142
|
+
body1Medium: "font-medium text-[16px] leading-[1.3] tracking-normal font-sans",
|
|
143
|
+
body1Bold: "font-bold text-[16px] leading-[1.3] tracking-normal font-sans",
|
|
144
|
+
body1SemiBold: "font-semibold text-[16px] leading-[1.3] tracking-normal font-sans",
|
|
145
|
+
body2Medium: "font-medium text-[14px] leading-[1.3] tracking-normal font-sans",
|
|
146
|
+
body2Bold: "font-bold text-[14px] leading-[1.3] tracking-normal font-sans",
|
|
147
|
+
body2SemiBold: "font-semibold text-[14px] leading-[1.3] tracking-normal font-sans",
|
|
148
|
+
body3Medium: "font-medium text-[12px] leading-[1.3] tracking-normal font-sans",
|
|
149
|
+
body3Bold: "font-bold text-[12px] leading-[1.3] tracking-normal font-sans",
|
|
150
|
+
body3SemiBold: "font-semibold text-[12px] leading-[1.3] tracking-normal font-sans",
|
|
151
|
+
captionMedium: "font-medium text-[12px] leading-[1.3] tracking-normal font-sans",
|
|
152
|
+
captionBold: "font-bold text-[12px] leading-[1.3] tracking-normal font-sans",
|
|
153
|
+
captionSemiBold: "font-semibold text-[12px] leading-[1.3] tracking-normal font-sans",
|
|
154
|
+
subtitle1Light: "font-light text-[20px] leading-[1.3] tracking-normal font-sans",
|
|
155
|
+
subtitle2Light: "font-light text-[18px] leading-[1.3] tracking-normal font-sans",
|
|
156
|
+
subtitle3Light: "font-light text-[16px] leading-[1.3] tracking-normal font-sans",
|
|
157
|
+
body1Light: "font-light text-[16px] leading-[1.3] tracking-normal font-sans",
|
|
158
|
+
body2Light: "font-light text-[14px] leading-[1.3] tracking-normal font-sans",
|
|
159
|
+
body3Light: "font-light text-[12px] leading-[1.3] tracking-normal font-sans",
|
|
160
|
+
captionLight: "font-light text-[12px] leading-[1.3] tracking-normal font-sans",
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
export const textColorClasses: Record<TextColor, string> = {
|