@a2v2ai/uikit 0.0.38 → 0.0.40
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/Slider/Slider.tsx +2 -2
- package/Typography/Typography.stories.tsx +63 -0
- package/Typography/Typography.tsx +7 -0
- package/index.css +68 -0
- package/lib/typography-types.ts +14 -0
- package/package.json +1 -1
package/Slider/Slider.tsx
CHANGED
|
@@ -19,9 +19,9 @@ const Slider = React.forwardRef<
|
|
|
19
19
|
{...props}
|
|
20
20
|
>
|
|
21
21
|
<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-grey-300">
|
|
22
|
-
<SliderPrimitive.Range className="absolute h-full bg-
|
|
22
|
+
<SliderPrimitive.Range className="absolute h-full bg-accent-600" />
|
|
23
23
|
</SliderPrimitive.Track>
|
|
24
|
-
<SliderPrimitive.Thumb className="block size-3 rounded-full border border-
|
|
24
|
+
<SliderPrimitive.Thumb className="block size-3 rounded-full border border-accent-600 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-600 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
|
|
25
25
|
</SliderPrimitive.Root>
|
|
26
26
|
))
|
|
27
27
|
Slider.displayName = SliderPrimitive.Root.displayName
|
|
@@ -47,6 +47,13 @@ const meta: Meta<typeof Typography> = {
|
|
|
47
47
|
"captionMedium",
|
|
48
48
|
"captionBold",
|
|
49
49
|
"captionSemiBold",
|
|
50
|
+
"subtitle1Light",
|
|
51
|
+
"subtitle2Light",
|
|
52
|
+
"subtitle3Light",
|
|
53
|
+
"body1Light",
|
|
54
|
+
"body2Light",
|
|
55
|
+
"body3Light",
|
|
56
|
+
"captionLight",
|
|
50
57
|
],
|
|
51
58
|
},
|
|
52
59
|
color: {
|
|
@@ -111,6 +118,13 @@ export const AllVariants: Story = {
|
|
|
111
118
|
<Typography variant="captionMedium">Typography / Caption Medium</Typography>
|
|
112
119
|
<Typography variant="captionBold">Typography / Caption Bold</Typography>
|
|
113
120
|
<Typography variant="captionSemiBold">Typography / Caption SemiBold</Typography>
|
|
121
|
+
<Typography variant="subtitle1Light">Typography / Subtitle 1 Light</Typography>
|
|
122
|
+
<Typography variant="subtitle2Light">Typography / Subtitle 2 Light</Typography>
|
|
123
|
+
<Typography variant="subtitle3Light">Typography / Subtitle 3 Light</Typography>
|
|
124
|
+
<Typography variant="body1Light">Typography / Body 1 Light</Typography>
|
|
125
|
+
<Typography variant="body2Light">Typography / Body 2 Light</Typography>
|
|
126
|
+
<Typography variant="body3Light">Typography / Body 3 Light</Typography>
|
|
127
|
+
<Typography variant="captionLight">Typography / Caption Light</Typography>
|
|
114
128
|
</Flex>
|
|
115
129
|
),
|
|
116
130
|
}
|
|
@@ -423,3 +437,52 @@ export const CaptionSemiBold: Story = {
|
|
|
423
437
|
children: "Caption SemiBold - The quick brown fox jumps over the lazy dog",
|
|
424
438
|
},
|
|
425
439
|
}
|
|
440
|
+
|
|
441
|
+
export const Subtitle1Light: Story = {
|
|
442
|
+
args: {
|
|
443
|
+
variant: "subtitle1Light",
|
|
444
|
+
children: "Subtitle 1 Light",
|
|
445
|
+
},
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
export const Subtitle2Light: Story = {
|
|
449
|
+
args: {
|
|
450
|
+
variant: "subtitle2Light",
|
|
451
|
+
children: "Subtitle 2 Light",
|
|
452
|
+
},
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
export const Subtitle3Light: Story = {
|
|
456
|
+
args: {
|
|
457
|
+
variant: "subtitle3Light",
|
|
458
|
+
children: "Subtitle 3 Light",
|
|
459
|
+
},
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
export const Body1Light: Story = {
|
|
463
|
+
args: {
|
|
464
|
+
variant: "body1Light",
|
|
465
|
+
children: "Body 1 Light - The quick brown fox jumps over the lazy dog",
|
|
466
|
+
},
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
export const Body2Light: Story = {
|
|
470
|
+
args: {
|
|
471
|
+
variant: "body2Light",
|
|
472
|
+
children: "Body 2 Light - The quick brown fox jumps over the lazy dog",
|
|
473
|
+
},
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
export const Body3Light: Story = {
|
|
477
|
+
args: {
|
|
478
|
+
variant: "body3Light",
|
|
479
|
+
children: "Body 3 Light - The quick brown fox jumps over the lazy dog",
|
|
480
|
+
},
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
export const CaptionLight: Story = {
|
|
484
|
+
args: {
|
|
485
|
+
variant: "captionLight",
|
|
486
|
+
children: "Caption Light - The quick brown fox jumps over the lazy dog",
|
|
487
|
+
},
|
|
488
|
+
}
|
|
@@ -68,6 +68,13 @@ const variantElementMap: Record<
|
|
|
68
68
|
captionMedium: "span",
|
|
69
69
|
captionBold: "span",
|
|
70
70
|
captionSemiBold: "span",
|
|
71
|
+
subtitle1Light: "p",
|
|
72
|
+
subtitle2Light: "p",
|
|
73
|
+
subtitle3Light: "p",
|
|
74
|
+
body1Light: "p",
|
|
75
|
+
body2Light: "p",
|
|
76
|
+
body3Light: "p",
|
|
77
|
+
captionLight: "span",
|
|
71
78
|
};
|
|
72
79
|
|
|
73
80
|
type TypographyProps<T extends React.ElementType = "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 */
|
package/lib/typography-types.ts
CHANGED
|
@@ -33,6 +33,13 @@ export type TextVariant =
|
|
|
33
33
|
| "captionMedium"
|
|
34
34
|
| "captionBold"
|
|
35
35
|
| "captionSemiBold"
|
|
36
|
+
| "subtitle1Light"
|
|
37
|
+
| "subtitle2Light"
|
|
38
|
+
| "subtitle3Light"
|
|
39
|
+
| "body1Light"
|
|
40
|
+
| "body2Light"
|
|
41
|
+
| "body3Light"
|
|
42
|
+
| "captionLight"
|
|
36
43
|
|
|
37
44
|
export type TextColor =
|
|
38
45
|
| "default"
|
|
@@ -144,6 +151,13 @@ export const textVariantClasses: Record<TextVariant, string> = {
|
|
|
144
151
|
captionMedium: "font-medium text-[12px] leading-none tracking-normal font-sans",
|
|
145
152
|
captionBold: "font-bold text-[12px] leading-none tracking-normal font-sans",
|
|
146
153
|
captionSemiBold: "font-semibold text-[12px] leading-none tracking-normal font-sans",
|
|
154
|
+
subtitle1Light: "font-light text-[20px] leading-none tracking-normal font-sans",
|
|
155
|
+
subtitle2Light: "font-light text-[18px] leading-none tracking-normal font-sans",
|
|
156
|
+
subtitle3Light: "font-light text-[16px] leading-none tracking-normal font-sans",
|
|
157
|
+
body1Light: "font-light text-[16px] leading-none tracking-normal font-sans",
|
|
158
|
+
body2Light: "font-light text-[14px] leading-none tracking-normal font-sans",
|
|
159
|
+
body3Light: "font-light text-[12px] leading-none tracking-normal font-sans",
|
|
160
|
+
captionLight: "font-light text-[12px] leading-none tracking-normal font-sans",
|
|
147
161
|
}
|
|
148
162
|
|
|
149
163
|
export const textColorClasses: Record<TextColor, string> = {
|