creactive 0.0.95 → 0.0.96

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.
@@ -188,212 +188,250 @@ export interface ThemeContextValue {
188
188
  */
189
189
  colorForegroundInverse900: Color;
190
190
  /**
191
- * Base font family token.
192
- * Supposed to be used by most components.
193
- * If you don't known what font family to use - use this one.
191
+ * Base font family.
192
+ * @see FONT_FAMILY_BASE
194
193
  */
195
194
  fontFamilyBase: string;
196
195
  /**
197
- * Base thin font weight token.
198
- * Ideal for very delicate and decorative, large, elegant hero text.
196
+ * Base thin font weight.
197
+ * @see FONT_WEIGHT_BASE_THIN
198
+ * @default 100
199
199
  */
200
200
  fontWeightBaseThin: FontWeight;
201
201
  /**
202
- * Base extra-light font weight token.
203
- * Use for large, airy headings or subtle interface elements.
204
- * Slightly more readable than extra-thin, but still decorative.
202
+ * Base extra-light font weight.
203
+ * @see FONT_WEIGHT_BASE_EXTRALIGHT
204
+ * @default 200
205
205
  */
206
206
  fontWeightBaseExtraLight: FontWeight;
207
207
  /**
208
- * Base light font weight token.
209
- * Suitable for subheadings, muted captions, and soft labels.
208
+ * Base light font weight.
209
+ * @see FONT_WEIGHT_BASE_LIGHT
210
+ * @default 300
210
211
  */
211
212
  fontWeightBaseLight: FontWeight;
212
213
  /**
213
- * Base regular font weight token.
214
- * For the most common text elements in your interface.
215
- * When unsure about font weight, this is the default option.
214
+ * Base regular font weight.
215
+ * @see FONT_WEIGHT_BASE_REGULAR
216
+ * @default 400
216
217
  */
217
218
  fontWeightBaseRegular: FontWeight;
218
219
  /**
219
- * Base medium font weight token.
220
- * Suitable for labels, buttons, and small subheadings.
221
- * Slightly emphasized, providing better readability.
220
+ * Base medium font weight.
221
+ * @see FONT_WEIGHT_BASE_MEDIUM
222
+ * @default 500
222
223
  */
223
224
  fontWeightBaseMedium: FontWeight;
224
225
  /**
225
- * Base semi-bold font weight token.
226
- * Provides stronger emphasis without being overwhelming.
227
- * Ideal for section headers, emphasized text, and card titles.
226
+ * Base semi-bold font weight.
227
+ * @see FONT_WEIGHT_BASE_SEMIBOLD
228
+ * @default 600
228
229
  */
229
230
  fontWeightBaseSemibold: FontWeight;
230
231
  /**
231
- * Base bold font weight token.
232
- * For high emphasis on important elements.
233
- * Use for main headings and strong call-to-action buttons.
232
+ * Base bold font weight.
233
+ * @see FONT_WEIGHT_BASE_BOLD
234
+ * @default 700
234
235
  */
235
236
  fontWeightBaseBold: FontWeight;
236
237
  /**
237
- * Extra-bold font weight token.
238
- * Perfect for promo banners and large impactful headings.
238
+ * Extra-bold font weight.
239
+ * @see FONT_WEIGHT_BASE_EXTRABOLD
240
+ * @default 800
239
241
  */
240
242
  fontWeightBaseExtraBold: FontWeight;
241
243
  /**
242
- * Base black font weight token.
243
- * Extreme emphasis for rare, dramatic cases.
244
- * Great for headlines in posters and highly attention-grabbing elements.
244
+ * Base black font weight.
245
+ * @see FONT_WEIGHT_BASE_BLACK
246
+ * @default 900
245
247
  */
246
248
  fontWeightBaseBlack: FontWeight;
247
249
  /**
248
- * Base 2 times extra-small font size token.
249
- * Use this size for tiny text elements like captions.
250
- * It represents the smallest readable text in your interface.
250
+ * Base 2 times extra-small font size.
251
+ * @see FONT_SIZE_BASE_X2S
252
+ * @default 12
251
253
  */
252
254
  fontSizeBaseX2S: number;
253
255
  /**
254
- * Base extra-small font size token.
255
- * Suitable for subtitles or the smallest readable text, for example.
256
+ * Base extra-small font size.
257
+ * @see FONT_SIZE_BASE_XS
258
+ * @default 14
256
259
  */
257
260
  fontSizeBaseXS: number;
258
261
  /**
259
- * Base small font size token.
260
- * Can be used for smaller labels or captions among medium text.
261
- * Also suitable for titles in smaller 2x small text.
262
+ * Base small font size.
263
+ * @see FONT_SIZE_BASE_SM
264
+ * @default 16
262
265
  */
263
266
  fontSizeBaseSM: number;
264
267
  /**
265
- * Base medium font size token.
266
- * Intended for most text elements.
267
- * If unsure about which font size to use, this is the default option.
268
+ * Base medium font size.
269
+ * @see FONT_SIZE_BASE_MD
270
+ * @default 18
268
271
  */
269
272
  fontSizeBaseMD: number;
270
273
  /**
271
- * Base large font size token.
272
- * Suitable for fourth-level page titles.
273
- * Can also be used for larger labels or captions among medium text.
274
+ * Base large font size.
275
+ * @see FONT_SIZE_BASE_LG
276
+ * @default 20
274
277
  */
275
278
  fontSizeBaseLG: number;
276
279
  /**
277
- * Base extra-large font size token.
278
- * Ideal for third-level page titles.
279
- * Can also be used for larger labels or captions within medium text.
280
+ * Base extra-large font size.
281
+ * @see FONT_SIZE_BASE_XL
282
+ * @default 24
280
283
  */
281
284
  fontSizeBaseXL: number;
282
285
  /**
283
- * Base 2 times extra-large font size token.
284
- * Typically used for second-level page titles.
286
+ * Base 2 times extra-large font size.
287
+ * @see FONT_SIZE_BASE_X2L
288
+ * @default 30
285
289
  */
286
290
  fontSizeBaseX2L: number;
287
291
  /**
288
- * Base 3 times extra-large font size token.
289
- * Designed for first-level page titles.
290
- * Can also be used for labels or captions within huge text.
292
+ * Base 3 times extra-large font size.
293
+ * @see FONT_SIZE_BASE_X3L
294
+ * @default 36
291
295
  */
292
296
  fontSizeBaseX3L: number;
293
297
  /**
294
- * Base 4 times extra-large font size token.
295
- * Ideal for huge text labels and captions.
298
+ * Base 4 times extra-large font size.
299
+ * @see FONT_SIZE_BASE_X4L
300
+ * @default 48
296
301
  */
297
302
  fontSizeBaseX4L: number;
298
303
  /**
299
- * Base 5 times extra-large font size token.
300
- * Use this size for enormous text elements like hero titles.
301
- * It should be the largest font size in your interface.
304
+ * Base 5 times extra-large font size.
305
+ * @see FONT_SIZE_BASE_X5L
306
+ * @default 60
302
307
  */
303
308
  fontSizeBaseX5L: number;
304
309
  /**
305
- * Base none line height token.
306
- * Use for elements with no line height, like buttons, badges, and tags.
310
+ * Base none line height.
311
+ * @see LINE_HEIGHT_BASE_NONE
312
+ * @default 1
307
313
  */
308
314
  lineHeightBaseNone: number;
309
315
  /**
310
- * Base tight line height token.
311
- * For compact text elements with closely packed lines.
316
+ * Base tight line height.
317
+ * @see LINE_HEIGHT_BASE_TIGHT
318
+ * @default 1.25
312
319
  */
313
320
  lineHeightBaseTight: number;
314
321
  /**
315
- * Base snug line height token.
316
- * Ideal for compact text that still needs some breathing room.
322
+ * Base snug line height.
323
+ * @see LINE_HEIGHT_BASE_SNUG
324
+ * @default 1.375
317
325
  */
318
326
  lineHeightBaseSnug: number;
319
327
  /**
320
- * Base normal line height token.
321
- * Standard line height for most text elements.
322
- * Use for general content in your interface.
328
+ * Base normal line height.
329
+ * @see LINE_HEIGHT_BASE_NORMAL
330
+ * @default 1.5
323
331
  */
324
332
  lineHeightBaseNormal: number;
325
333
  /**
326
- * Base relaxed line height token.
327
- * Provides more space between lines.
328
- * Ideal for body text or large blocks of content.
334
+ * Base relaxed line height.
335
+ * @see LINE_HEIGHT_BASE_RELAXED
336
+ * @default 1.625
329
337
  */
330
338
  lineHeightBaseRelaxed: number;
331
339
  /**
332
- * Base loose line height token.
333
- * Very spacious and airy, great for large headings.
334
- * Suitable for text elements that need a lot of breathing room.
340
+ * Base loose line height.
341
+ * @see LINE_HEIGHT_BASE_LOOSE
342
+ * @default 2
335
343
  */
336
344
  lineHeightBaseLoose: number;
337
345
  /**
338
- * Base 2 times extra-small spacing token.
339
- * Rarely used – best for tight icon/text gaps or hairline adjustments.
346
+ * Base 6 times extra-small spacing.
347
+ * @see SPACING_BASE_X6S
348
+ * @default 2
349
+ */
350
+ spacingBaseX6S: number;
351
+ /**
352
+ * Base 5 times extra-small spacing.
353
+ * @see SPACING_BASE_X5S
354
+ * @default 4
355
+ */
356
+ spacingBaseX5S: number;
357
+ /**
358
+ * Base 4 times extra-small spacing.
359
+ * @see SPACING_BASE_X4S
360
+ * @default 6
361
+ */
362
+ spacingBaseX4S: number;
363
+ /**
364
+ * Base 3 times extra-small spacing.
365
+ * @see SPACING_BASE_X3S
366
+ * @default 8
367
+ */
368
+ spacingBaseX3S: number;
369
+ /**
370
+ * Base 2 times extra-small spacing.
371
+ * @see SPACING_BASE_X2S
372
+ * @default 10
340
373
  */
341
374
  spacingBaseX2S: number;
342
375
  /**
343
- * Extra-small base spacing token.
344
- * Ideal for compact elements like tag paddings or small icon separation.
376
+ * Base extra-small spacing.
377
+ * @see SPACING_BASE_XS
378
+ * @default 12
345
379
  */
346
380
  spacingBaseXS: number;
347
381
  /**
348
- * Small base spacing token.
349
- * Great for dense layouts, or minor gaps.
382
+ * Base small spacing.
383
+ * @see SPACING_BASE_SM
384
+ * @default 14
350
385
  */
351
386
  spacingBaseSM: number;
352
387
  /**
353
- * Base medium spacing token.
354
- * Good default for most components like cards, inputs, or buttons.
388
+ * Base medium spacing.
389
+ * @see SPACING_BASE_MD
390
+ * @default 16
355
391
  */
356
392
  spacingBaseMD: number;
357
393
  /**
358
- * Large base spacing token.
359
- * Nice for separating grouped elements or setting consistent gaps.
394
+ * Base large spacing.
395
+ * @see SPACING_BASE_LG
396
+ * @default 18
360
397
  */
361
398
  spacingBaseLG: number;
362
399
  /**
363
- * Extra-large base spacing token.
364
- * Useful between sections or to give components more breathing.
400
+ * Base extra-large spacing.
401
+ * @see SPACING_BASE_XL
402
+ * @default 20
365
403
  */
366
404
  spacingBaseXL: number;
367
405
  /**
368
- * Base 2 times extra-large spacing token.
369
- * Fits well in modals or larger layout divisions.
406
+ * Base 2 times extra-large spacing.
407
+ * @see SPACING_BASE_X2L
408
+ * @default 24
370
409
  */
371
410
  spacingBaseX2L: number;
372
411
  /**
373
- * Base 3 times extra-large spacing token.
374
- * Helps emphasize hierarchy between layout blocks.
412
+ * Base 3 times extra-large spacing.
413
+ * @see SPACING_BASE_X3L
414
+ * @default 28
375
415
  */
376
416
  spacingBaseX3L: number;
377
417
  /**
378
- * Base 4 times extra-large spacing token.
379
- * Ideal for responsive paddings, section and outer margins.
418
+ * Base 4 times extra-large spacing.
419
+ * @see SPACING_BASE_X4L
420
+ * @default 32
380
421
  */
381
422
  spacingBaseX4L: number;
382
423
  /**
383
- * Base 5 times extra-large spacing token.
384
- * Great for container paddings, grid gaps, or large components.
424
+ * Base 5 times extra-large spacing.
425
+ * @see SPACING_BASE_X5L
426
+ * @default 36
385
427
  */
386
428
  spacingBaseX5L: number;
387
429
  /**
388
- * Base 6 times extra-large spacing token.
389
- * Works well in modal layouts or for generous top-level spacing.
430
+ * Base 6 times extra-large spacing.
431
+ * @see SPACING_BASE_X6L
432
+ * @default 40
390
433
  */
391
434
  spacingBaseX6L: number;
392
- /**
393
- * Base 7 times extra-large spacing token.
394
- * Used for large layout sections or when significant whitespace is needed.
395
- */
396
- spacingBaseX7L: number;
397
435
  /**
398
436
  * Small base border width token.
399
437
  * @default 0.5