@@ -396,25 +396,28 @@ export type Elements = {
396396export type Variables = {
397397 /**
398398 * The primary color used throughout the components. Set this to your brand color.
399- * @default #42434D
399+ * @default '#2F3037'
400400 */
401401 colorPrimary ?: CssColorOrScale ;
402402 /**
403403 * The color of text appearing on top of an element that with a background color of {@link Variables.colorPrimary},
404404 * eg: solid primary buttons.
405- * @default white
405+ * @default ' white'
406406 */
407407 colorTextOnPrimaryBackground ?: CssColor ;
408408 /**
409409 * The color used to indicate errors or destructive actions. Set this to your brand's danger color.
410+ * @default '#EF4444'
410411 */
411412 colorDanger ?: CssColorOrScale ;
412413 /**
413414 * The color used to indicate an action that completed successfully or a positive result.
415+ * @default '#22C543'
414416 */
415417 colorSuccess ?: CssColorOrScale ;
416418 /**
417419 * The color used for potentially destructive actions or when the user's attention is required.
420+ * @default '#F36B16'
418421 */
419422 colorWarning ?: CssColorOrScale ;
420423 /**
@@ -426,79 +429,73 @@ export type Variables = {
426429 colorNeutral ?: CssColorOrAlphaScale ;
427430 /**
428431 * The default text color.
429- * @default #131316
432+ * @default '#212126'
430433 */
431434 colorText ?: CssColor ;
432435 /**
433436 * The text color for elements of lower importance, eg: a subtitle text.
434- * @default A lighter shade of {@link Variables.colorText}
437+ * This color is a lighter shade of {@link Variables.colorText}.
438+ * @default '#747686'
435439 */
436440 colorTextSecondary ?: CssColor ;
437- /**
438- * The text color for elements of even lower importance.
439- * @default An lighter shade of {@link Variables.colorTextSecondary}
440- */
441- colorTextTertiary ?: CssColor ;
442- /**
443- * The text color for labels.
444- * @default #42434D
445- */
446- colorTextLabel ?: CssColor ;
447441 /**
448442 * The background color for the card container.
443+ * @default 'white'
449444 */
450445 colorBackground ?: CssColor ;
451446 /**
452447 * The default text color inside input elements. To customise the input background color instead, use {@link Variables.colorInputBackground}.
453- * @default The value of { @link Variables.colorInputText}
448+ * @default 'black'
454449 */
455450 colorInputText ?: CssColor ;
456451 /**
457452 * The background color for all input elements.
453+ * @default 'white'
458454 */
459455 colorInputBackground ?: CssColor ;
460456 /**
461457 * The color of the avatar shimmer
462- * @default rgba(255, 255, 255, 0.36)
458+ * @default ' rgba(255, 255, 255, 0.36)'
463459 */
464460 colorShimmer ?: CssColor ;
465461 /**
466462 * The default font that will be used in all components.
467463 * This can be the name of a custom font loaded by your code or the name of a web-safe font ((@link WebSafeFont})
468464 * If a specific fontFamily is not provided, the components will inherit the font of the parent element.
469- * @default inherit
465+ * @default ' inherit'
470466 * @example
471467 * { fontFamily: 'Montserrat' }
472468 */
473469 fontFamily ?: FontFamily ;
474470 /**
475471 * The default font that will be used in all buttons. See {@link Variables.fontFamily} for details.
476472 * If not provided, {@link Variables.fontFamily} will be used instead.
477- * @default inherit
473+ * @default ' inherit'
478474 */
479475 fontFamilyButtons ?: FontFamily ;
480476 /**
481- * The value will be used as the base `md` to calculate all the other scale values (`2xs`, ` xs`, `sm`, `lg` and `xl`).
477+ * The value will be used as the base `md` to calculate all the other scale values (`xs`, `sm`, `lg` and `xl`).
482478 * By default, this value is relative to the root fontSize of the html element.
483- * @default 1rem;
479+ * @default '0.8125rem'
484480 */
485481 fontSize ?: CssLengthUnit ;
486482 /**
487- * The font weight the components will use. By default, the components will use the 400, 500 and 600 weights for normal, medium and bold
488- * text respectively. You can override the default weights by passing a {@FontWeightScale } object
489- * @default { normal: 400, medium: 500, bold: 600 };
483+ * The font weight the components will use. By default, the components will use the 400, 500, 600 and 700 weights
484+ * for normal, medium, semibold and bold text respectively.
485+ * You can override the default weights by passing a {@FontWeightScale } object
486+ * @default { normal: 400, medium: 500, semibold: 600, bold: 700 };
490487 */
491488 fontWeight ?: FontWeightScale ;
492489 /**
493490 * The size that will be used as the `md` base borderRadius value. This is used as the base to calculate the `sm`, `lg`, `xl`,
494491 * our components use. As a general rule, the bigger an element is, the larger its borderRadius is going to be.
495492 * eg: the Card element uses 'xl'
496- * @default 0.375rem
493+ * @default ' 0.375rem'
497494 */
498495 borderRadius ?: CssLengthUnit ;
499496 /**
500497 * The base spacing unit that all margins, paddings and gaps between the elements are derived from.
501- * @default 1rem
498+ * @default ' 1rem'
502499 */
503500 spacingUnit ?: CssLengthUnit ;
504501} ;
0 commit comments