@a2v2ai/uikit 0.0.40 → 1.0.1
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 +109 -40
- package/lib/typography-types.ts +40 -40
- package/package.json +1 -1
package/index.css
CHANGED
|
@@ -85,6 +85,75 @@
|
|
|
85
85
|
--color-accent-900: #1E3A8A;
|
|
86
86
|
--color-accent-950: #172554;
|
|
87
87
|
|
|
88
|
+
/* Categorical palette — for charts, CRM range bands, and other multi-series
|
|
89
|
+
UI where the semantic families (success/warning/error/accent) aren't enough.
|
|
90
|
+
Values mirror the canonical Tailwind ramps so existing usages are unchanged. */
|
|
91
|
+
|
|
92
|
+
/* Orange */
|
|
93
|
+
--color-orange-50: #FFF7ED;
|
|
94
|
+
--color-orange-100: #FFEDD5;
|
|
95
|
+
--color-orange-200: #FED7AA;
|
|
96
|
+
--color-orange-300: #FDBA74;
|
|
97
|
+
--color-orange-400: #FB923C;
|
|
98
|
+
--color-orange-500: #F97316;
|
|
99
|
+
--color-orange-600: #EA580C;
|
|
100
|
+
--color-orange-700: #C2410C;
|
|
101
|
+
--color-orange-800: #9A3412;
|
|
102
|
+
--color-orange-900: #7C2D12;
|
|
103
|
+
--color-orange-950: #431407;
|
|
104
|
+
|
|
105
|
+
/* Purple */
|
|
106
|
+
--color-purple-50: #FAF5FF;
|
|
107
|
+
--color-purple-100: #F3E8FF;
|
|
108
|
+
--color-purple-200: #E9D5FF;
|
|
109
|
+
--color-purple-300: #D8B4FE;
|
|
110
|
+
--color-purple-400: #C084FC;
|
|
111
|
+
--color-purple-500: #A855F7;
|
|
112
|
+
--color-purple-600: #9333EA;
|
|
113
|
+
--color-purple-700: #7E22CE;
|
|
114
|
+
--color-purple-800: #6B21A8;
|
|
115
|
+
--color-purple-900: #581C87;
|
|
116
|
+
--color-purple-950: #3B0764;
|
|
117
|
+
|
|
118
|
+
/* Pink */
|
|
119
|
+
--color-pink-50: #FDF2F8;
|
|
120
|
+
--color-pink-100: #FCE7F3;
|
|
121
|
+
--color-pink-200: #FBCFE8;
|
|
122
|
+
--color-pink-300: #F9A8D4;
|
|
123
|
+
--color-pink-400: #F472B6;
|
|
124
|
+
--color-pink-500: #EC4899;
|
|
125
|
+
--color-pink-600: #DB2777;
|
|
126
|
+
--color-pink-700: #BE185D;
|
|
127
|
+
--color-pink-800: #9D174D;
|
|
128
|
+
--color-pink-900: #831843;
|
|
129
|
+
--color-pink-950: #500724;
|
|
130
|
+
|
|
131
|
+
/* Teal */
|
|
132
|
+
--color-teal-50: #F0FDFA;
|
|
133
|
+
--color-teal-100: #CCFBF1;
|
|
134
|
+
--color-teal-200: #99F6E4;
|
|
135
|
+
--color-teal-300: #5EEAD4;
|
|
136
|
+
--color-teal-400: #2DD4BF;
|
|
137
|
+
--color-teal-500: #14B8A6;
|
|
138
|
+
--color-teal-600: #0D9488;
|
|
139
|
+
--color-teal-700: #0F766E;
|
|
140
|
+
--color-teal-800: #115E59;
|
|
141
|
+
--color-teal-900: #134E4A;
|
|
142
|
+
--color-teal-950: #042F2E;
|
|
143
|
+
|
|
144
|
+
/* Indigo */
|
|
145
|
+
--color-indigo-50: #EEF2FF;
|
|
146
|
+
--color-indigo-100: #E0E7FF;
|
|
147
|
+
--color-indigo-200: #C7D2FE;
|
|
148
|
+
--color-indigo-300: #A5B4FC;
|
|
149
|
+
--color-indigo-400: #818CF8;
|
|
150
|
+
--color-indigo-500: #6366F1;
|
|
151
|
+
--color-indigo-600: #4F46E5;
|
|
152
|
+
--color-indigo-700: #4338CA;
|
|
153
|
+
--color-indigo-800: #3730A3;
|
|
154
|
+
--color-indigo-900: #312E81;
|
|
155
|
+
--color-indigo-950: #1E1B4B;
|
|
156
|
+
|
|
88
157
|
|
|
89
158
|
/* Neutral colors */
|
|
90
159
|
--color-background-neutral-0: #ffffff;
|
|
@@ -151,61 +220,61 @@
|
|
|
151
220
|
/* Typography utility classes */
|
|
152
221
|
@layer components {
|
|
153
222
|
/* 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-
|
|
223
|
+
.text-h1 { @apply font-extrabold text-[64px] leading-[1.3] tracking-normal font-sans; }
|
|
224
|
+
.text-h2 { @apply font-bold text-[48px] leading-[1.3] tracking-normal font-sans; }
|
|
225
|
+
.text-h3 { @apply font-bold text-[32px] leading-[1.3] tracking-normal font-sans; }
|
|
157
226
|
.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-
|
|
227
|
+
.text-h5 { @apply font-bold text-[20px] leading-[1.3] tracking-normal font-sans; }
|
|
228
|
+
.text-h6 { @apply font-semibold text-[20px] leading-[1.3] tracking-normal font-sans; }
|
|
160
229
|
|
|
161
230
|
/* 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-
|
|
231
|
+
.text-subtitle1 { @apply font-semibold text-[20px] leading-[1.3] tracking-normal font-sans; }
|
|
232
|
+
.text-subtitle1-light { @apply font-light text-[20px] leading-[1.3] tracking-normal font-sans; }
|
|
233
|
+
.text-subtitle1-medium { @apply font-medium text-[20px] leading-[1.3] tracking-normal font-sans; }
|
|
234
|
+
.text-subtitle1-semibold { @apply font-semibold text-[20px] leading-[1.3] tracking-normal font-sans; }
|
|
235
|
+
.text-subtitle1-bold { @apply font-bold text-[20px] leading-[1.3] tracking-normal font-sans; }
|
|
167
236
|
|
|
168
237
|
/* 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-
|
|
238
|
+
.text-subtitle2 { @apply font-semibold text-[18px] leading-[1.3] tracking-normal font-sans; }
|
|
239
|
+
.text-subtitle2-light { @apply font-light text-[18px] leading-[1.3] tracking-normal font-sans; }
|
|
240
|
+
.text-subtitle2-medium { @apply font-medium text-[18px] leading-[1.3] tracking-normal font-sans; }
|
|
241
|
+
.text-subtitle2-semibold { @apply font-semibold text-[18px] leading-[1.3] tracking-normal font-sans; }
|
|
242
|
+
.text-subtitle2-bold { @apply font-bold text-[18px] leading-[1.3] tracking-normal font-sans; }
|
|
174
243
|
|
|
175
244
|
/* 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-
|
|
245
|
+
.text-subtitle3 { @apply font-semibold text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
246
|
+
.text-subtitle3-light { @apply font-light text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
247
|
+
.text-subtitle3-medium { @apply font-medium text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
248
|
+
.text-subtitle3-semibold { @apply font-semibold text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
249
|
+
.text-subtitle3-bold { @apply font-bold text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
181
250
|
|
|
182
251
|
/* 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-
|
|
252
|
+
.text-body1 { @apply font-normal text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
253
|
+
.text-body1-light { @apply font-light text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
254
|
+
.text-body1-medium { @apply font-medium text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
255
|
+
.text-body1-semibold { @apply font-semibold text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
256
|
+
.text-body1-bold { @apply font-bold text-[16px] leading-[1.3] tracking-normal font-sans; }
|
|
188
257
|
|
|
189
258
|
/* 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-
|
|
259
|
+
.text-body2 { @apply font-normal text-[14px] leading-[1.3] tracking-normal font-sans; }
|
|
260
|
+
.text-body2-light { @apply font-light text-[14px] leading-[1.3] tracking-normal font-sans; }
|
|
261
|
+
.text-body2-medium { @apply font-medium text-[14px] leading-[1.3] tracking-normal font-sans; }
|
|
262
|
+
.text-body2-semibold { @apply font-semibold text-[14px] leading-[1.3] tracking-normal font-sans; }
|
|
263
|
+
.text-body2-bold { @apply font-bold text-[14px] leading-[1.3] tracking-normal font-sans; }
|
|
195
264
|
|
|
196
265
|
/* 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-
|
|
266
|
+
.text-body3 { @apply font-normal text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
267
|
+
.text-body3-light { @apply font-light text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
268
|
+
.text-body3-medium { @apply font-medium text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
269
|
+
.text-body3-semibold { @apply font-semibold text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
270
|
+
.text-body3-bold { @apply font-bold text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
202
271
|
|
|
203
272
|
/* 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-
|
|
273
|
+
.text-caption { @apply font-light text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
274
|
+
.text-caption-light { @apply font-light text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
275
|
+
.text-caption-medium { @apply font-medium text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
276
|
+
.text-caption-semibold { @apply font-semibold text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
277
|
+
.text-caption-bold { @apply font-bold text-[12px] leading-[1.3] tracking-normal font-sans; }
|
|
209
278
|
}
|
|
210
279
|
|
|
211
280
|
/* 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> = {
|