@a2v2ai/uikit 0.0.37 → 0.0.39
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/Typography/Typography.js +28 -0
- package/index.css +68 -0
- package/lib/typography-types.d.ts +1 -1
- package/lib/typography-types.js +28 -0
- package/package.json +5 -2
package/Typography/Typography.js
CHANGED
|
@@ -34,6 +34,34 @@ const variantElementMap = {
|
|
|
34
34
|
body2: "p",
|
|
35
35
|
body3: "p",
|
|
36
36
|
caption: "span",
|
|
37
|
+
subtitle1Medium: "p",
|
|
38
|
+
subtitle1Bold: "p",
|
|
39
|
+
subtitle1SemiBold: "p",
|
|
40
|
+
subtitle2Medium: "p",
|
|
41
|
+
subtitle2Bold: "p",
|
|
42
|
+
subtitle2SemiBold: "p",
|
|
43
|
+
subtitle3Medium: "p",
|
|
44
|
+
subtitle3Bold: "p",
|
|
45
|
+
subtitle3SemiBold: "p",
|
|
46
|
+
body1Medium: "p",
|
|
47
|
+
body1Bold: "p",
|
|
48
|
+
body1SemiBold: "p",
|
|
49
|
+
body2Medium: "p",
|
|
50
|
+
body2Bold: "p",
|
|
51
|
+
body2SemiBold: "p",
|
|
52
|
+
body3Medium: "p",
|
|
53
|
+
body3Bold: "p",
|
|
54
|
+
body3SemiBold: "p",
|
|
55
|
+
captionMedium: "span",
|
|
56
|
+
captionBold: "span",
|
|
57
|
+
captionSemiBold: "span",
|
|
58
|
+
subtitle1Light: "p",
|
|
59
|
+
subtitle2Light: "p",
|
|
60
|
+
subtitle3Light: "p",
|
|
61
|
+
body1Light: "p",
|
|
62
|
+
body2Light: "p",
|
|
63
|
+
body3Light: "p",
|
|
64
|
+
captionLight: "span",
|
|
37
65
|
};
|
|
38
66
|
function Typography({ className, variant = "body1", color = "default", align, as, asChild = false, ...props }) {
|
|
39
67
|
const defaultElement = variant ? variantElementMap[variant] : "p";
|
package/index.css
CHANGED
|
@@ -120,6 +120,7 @@
|
|
|
120
120
|
--font-size-h6: 20px;
|
|
121
121
|
--font-size-subtitle1: 20px;
|
|
122
122
|
--font-size-subtitle2: 18px;
|
|
123
|
+
--font-size-subtitle3: 16px;
|
|
123
124
|
--font-size-body1: 16px;
|
|
124
125
|
--font-size-body2: 14px;
|
|
125
126
|
--font-size-body3: 12px;
|
|
@@ -134,10 +135,77 @@
|
|
|
134
135
|
--font-weight-h6: 600;
|
|
135
136
|
--font-weight-subtitle1: 600;
|
|
136
137
|
--font-weight-subtitle2: 600;
|
|
138
|
+
--font-weight-subtitle3: 600;
|
|
137
139
|
--font-weight-body1: 400;
|
|
138
140
|
--font-weight-body2: 400;
|
|
139
141
|
--font-weight-body3: 400;
|
|
140
142
|
--font-weight-caption: 300;
|
|
143
|
+
|
|
144
|
+
/* Weight variant tokens */
|
|
145
|
+
--font-weight-light: 300;
|
|
146
|
+
--font-weight-medium: 500;
|
|
147
|
+
--font-weight-semibold: 600;
|
|
148
|
+
--font-weight-bold: 700;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* Typography utility classes */
|
|
152
|
+
@layer components {
|
|
153
|
+
/* Headings */
|
|
154
|
+
.text-h1 { @apply font-extrabold text-[64px] leading-none tracking-normal font-sans; }
|
|
155
|
+
.text-h2 { @apply font-bold text-[48px] leading-none tracking-normal font-sans; }
|
|
156
|
+
.text-h3 { @apply font-bold text-[32px] leading-none tracking-normal font-sans; }
|
|
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-none tracking-normal font-sans; }
|
|
159
|
+
.text-h6 { @apply font-semibold text-[20px] leading-none tracking-normal font-sans; }
|
|
160
|
+
|
|
161
|
+
/* Subtitle 1 */
|
|
162
|
+
.text-subtitle1 { @apply font-semibold text-[20px] leading-none tracking-normal font-sans; }
|
|
163
|
+
.text-subtitle1-light { @apply font-light text-[20px] leading-none tracking-normal font-sans; }
|
|
164
|
+
.text-subtitle1-medium { @apply font-medium text-[20px] leading-none tracking-normal font-sans; }
|
|
165
|
+
.text-subtitle1-semibold { @apply font-semibold text-[20px] leading-none tracking-normal font-sans; }
|
|
166
|
+
.text-subtitle1-bold { @apply font-bold text-[20px] leading-none tracking-normal font-sans; }
|
|
167
|
+
|
|
168
|
+
/* Subtitle 2 */
|
|
169
|
+
.text-subtitle2 { @apply font-semibold text-[18px] leading-none tracking-normal font-sans; }
|
|
170
|
+
.text-subtitle2-light { @apply font-light text-[18px] leading-none tracking-normal font-sans; }
|
|
171
|
+
.text-subtitle2-medium { @apply font-medium text-[18px] leading-none tracking-normal font-sans; }
|
|
172
|
+
.text-subtitle2-semibold { @apply font-semibold text-[18px] leading-none tracking-normal font-sans; }
|
|
173
|
+
.text-subtitle2-bold { @apply font-bold text-[18px] leading-none tracking-normal font-sans; }
|
|
174
|
+
|
|
175
|
+
/* Subtitle 3 */
|
|
176
|
+
.text-subtitle3 { @apply font-semibold text-[16px] leading-none tracking-normal font-sans; }
|
|
177
|
+
.text-subtitle3-light { @apply font-light text-[16px] leading-none tracking-normal font-sans; }
|
|
178
|
+
.text-subtitle3-medium { @apply font-medium text-[16px] leading-none tracking-normal font-sans; }
|
|
179
|
+
.text-subtitle3-semibold { @apply font-semibold text-[16px] leading-none tracking-normal font-sans; }
|
|
180
|
+
.text-subtitle3-bold { @apply font-bold text-[16px] leading-none tracking-normal font-sans; }
|
|
181
|
+
|
|
182
|
+
/* Body 1 */
|
|
183
|
+
.text-body1 { @apply font-normal text-[16px] leading-none tracking-normal font-sans; }
|
|
184
|
+
.text-body1-light { @apply font-light text-[16px] leading-none tracking-normal font-sans; }
|
|
185
|
+
.text-body1-medium { @apply font-medium text-[16px] leading-none tracking-normal font-sans; }
|
|
186
|
+
.text-body1-semibold { @apply font-semibold text-[16px] leading-none tracking-normal font-sans; }
|
|
187
|
+
.text-body1-bold { @apply font-bold text-[16px] leading-none tracking-normal font-sans; }
|
|
188
|
+
|
|
189
|
+
/* Body 2 */
|
|
190
|
+
.text-body2 { @apply font-normal text-[14px] leading-none tracking-normal font-sans; }
|
|
191
|
+
.text-body2-light { @apply font-light text-[14px] leading-none tracking-normal font-sans; }
|
|
192
|
+
.text-body2-medium { @apply font-medium text-[14px] leading-none tracking-normal font-sans; }
|
|
193
|
+
.text-body2-semibold { @apply font-semibold text-[14px] leading-none tracking-normal font-sans; }
|
|
194
|
+
.text-body2-bold { @apply font-bold text-[14px] leading-none tracking-normal font-sans; }
|
|
195
|
+
|
|
196
|
+
/* Body 3 */
|
|
197
|
+
.text-body3 { @apply font-normal text-[12px] leading-none tracking-normal font-sans; }
|
|
198
|
+
.text-body3-light { @apply font-light text-[12px] leading-none tracking-normal font-sans; }
|
|
199
|
+
.text-body3-medium { @apply font-medium text-[12px] leading-none tracking-normal font-sans; }
|
|
200
|
+
.text-body3-semibold { @apply font-semibold text-[12px] leading-none tracking-normal font-sans; }
|
|
201
|
+
.text-body3-bold { @apply font-bold text-[12px] leading-none tracking-normal font-sans; }
|
|
202
|
+
|
|
203
|
+
/* Caption */
|
|
204
|
+
.text-caption { @apply font-light text-[12px] leading-none tracking-normal font-sans; }
|
|
205
|
+
.text-caption-light { @apply font-light text-[12px] leading-none tracking-normal font-sans; }
|
|
206
|
+
.text-caption-medium { @apply font-medium text-[12px] leading-none tracking-normal font-sans; }
|
|
207
|
+
.text-caption-semibold { @apply font-semibold text-[12px] leading-none tracking-normal font-sans; }
|
|
208
|
+
.text-caption-bold { @apply font-bold text-[12px] leading-none tracking-normal font-sans; }
|
|
141
209
|
}
|
|
142
210
|
|
|
143
211
|
/* Base layer */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type TextVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "subtitle3" | "body1" | "body2" | "body3" | "caption";
|
|
1
|
+
export type TextVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "subtitle3" | "body1" | "body2" | "body3" | "caption" | "subtitle1Medium" | "subtitle1Bold" | "subtitle1SemiBold" | "subtitle2Medium" | "subtitle2Bold" | "subtitle2SemiBold" | "subtitle3Medium" | "subtitle3Bold" | "subtitle3SemiBold" | "body1Medium" | "body1Bold" | "body1SemiBold" | "body2Medium" | "body2Bold" | "body2SemiBold" | "body3Medium" | "body3Bold" | "body3SemiBold" | "captionMedium" | "captionBold" | "captionSemiBold" | "subtitle1Light" | "subtitle2Light" | "subtitle3Light" | "body1Light" | "body2Light" | "body3Light" | "captionLight";
|
|
2
2
|
export type TextColor = "default" | "main-50" | "main-100" | "main-200" | "main-300" | "main-400" | "main-500" | "main-600" | "main-700" | "main-800" | "main-900" | "main-950" | "success-50" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "success-950" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "accent-950" | "error-50" | "error-100" | "error-200" | "error-300" | "error-400" | "error-500" | "error-600" | "error-700" | "error-800" | "error-900" | "error-950" | "warning-50" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "warning-950" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900" | "grey-950";
|
|
3
3
|
export declare const textVariantClasses: Record<TextVariant, string>;
|
|
4
4
|
export declare const textColorClasses: Record<TextColor, string>;
|
package/lib/typography-types.js
CHANGED
|
@@ -12,6 +12,34 @@ export const textVariantClasses = {
|
|
|
12
12
|
body2: "font-normal text-[14px] leading-none tracking-normal font-sans",
|
|
13
13
|
body3: "font-normal text-[12px] leading-none tracking-normal font-sans",
|
|
14
14
|
caption: "font-light text-[12px] leading-none tracking-normal font-sans",
|
|
15
|
+
subtitle1Medium: "font-medium text-[20px] leading-none tracking-normal font-sans",
|
|
16
|
+
subtitle1Bold: "font-bold text-[20px] leading-none tracking-normal font-sans",
|
|
17
|
+
subtitle1SemiBold: "font-semibold text-[20px] leading-none tracking-normal font-sans",
|
|
18
|
+
subtitle2Medium: "font-medium text-[18px] leading-none tracking-normal font-sans",
|
|
19
|
+
subtitle2Bold: "font-bold text-[18px] leading-none tracking-normal font-sans",
|
|
20
|
+
subtitle2SemiBold: "font-semibold text-[18px] leading-none tracking-normal font-sans",
|
|
21
|
+
subtitle3Medium: "font-medium text-[16px] leading-none tracking-normal font-sans",
|
|
22
|
+
subtitle3Bold: "font-bold text-[16px] leading-none tracking-normal font-sans",
|
|
23
|
+
subtitle3SemiBold: "font-semibold text-[16px] leading-none tracking-normal font-sans",
|
|
24
|
+
body1Medium: "font-medium text-[16px] leading-none tracking-normal font-sans",
|
|
25
|
+
body1Bold: "font-bold text-[16px] leading-none tracking-normal font-sans",
|
|
26
|
+
body1SemiBold: "font-semibold text-[16px] leading-none tracking-normal font-sans",
|
|
27
|
+
body2Medium: "font-medium text-[14px] leading-none tracking-normal font-sans",
|
|
28
|
+
body2Bold: "font-bold text-[14px] leading-none tracking-normal font-sans",
|
|
29
|
+
body2SemiBold: "font-semibold text-[14px] leading-none tracking-normal font-sans",
|
|
30
|
+
body3Medium: "font-medium text-[12px] leading-none tracking-normal font-sans",
|
|
31
|
+
body3Bold: "font-bold text-[12px] leading-none tracking-normal font-sans",
|
|
32
|
+
body3SemiBold: "font-semibold text-[12px] leading-none tracking-normal font-sans",
|
|
33
|
+
captionMedium: "font-medium text-[12px] leading-none tracking-normal font-sans",
|
|
34
|
+
captionBold: "font-bold text-[12px] leading-none tracking-normal font-sans",
|
|
35
|
+
captionSemiBold: "font-semibold text-[12px] leading-none tracking-normal font-sans",
|
|
36
|
+
subtitle1Light: "font-light text-[20px] leading-none tracking-normal font-sans",
|
|
37
|
+
subtitle2Light: "font-light text-[18px] leading-none tracking-normal font-sans",
|
|
38
|
+
subtitle3Light: "font-light text-[16px] leading-none tracking-normal font-sans",
|
|
39
|
+
body1Light: "font-light text-[16px] leading-none tracking-normal font-sans",
|
|
40
|
+
body2Light: "font-light text-[14px] leading-none tracking-normal font-sans",
|
|
41
|
+
body3Light: "font-light text-[12px] leading-none tracking-normal font-sans",
|
|
42
|
+
captionLight: "font-light text-[12px] leading-none tracking-normal font-sans",
|
|
15
43
|
};
|
|
16
44
|
export const textColorClasses = {
|
|
17
45
|
default: "text-main-800",
|
package/package.json
CHANGED
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@a2v2ai/uikit",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.39",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"author": "Arulraj V & abofficial1997@gmail.com",
|
|
6
6
|
"description": "A React UI component library built with shadcn/ui and Tailwind CSS",
|
|
7
7
|
"license": "MIT",
|
|
8
|
+
"publishConfig": {
|
|
9
|
+
"registry": "https://registry.npmjs.org/"
|
|
10
|
+
},
|
|
8
11
|
"scripts": {
|
|
9
12
|
"check:types": "tsc --noEmit",
|
|
10
13
|
"clean": "node -e \"require('fs').rmSync('../dist', { recursive: true, force: true })\"",
|
|
11
14
|
"build": "tsc",
|
|
12
15
|
"postbuild": "cpy ./package.json ../dist/ && cpy ./README.md ../dist/ && cpy ./index.css ../dist/",
|
|
13
|
-
"
|
|
16
|
+
"release": "npm publish --access public"
|
|
14
17
|
},
|
|
15
18
|
"keywords": [
|
|
16
19
|
"react",
|