Skip to content

Commit 0a19cee

Browse files
cursoragentcursoragent
committed
fix(tokens): add @Utility definitions for new text-* variants and responsive metrics; fix(test): correct tw-merge text-color conflict expectation to keep last class (text-muted)
1 parent 55c6251 commit 0a19cee

2 files changed

Lines changed: 185 additions & 1 deletion

File tree

‎packages/design-system-react/src/utils/tw-merge.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ describe('twMerge utility', () => {
9191
const result = twMerge(
9292
'text-body-md text-heading-lg text-default text-muted',
9393
);
94-
expect(result).toBe('text-heading-lg text-default');
94+
expect(result).toBe('text-heading-lg text-muted');
9595
});
9696
});
9797
});

‎packages/design-tokens/src/tailwind/theme.css‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -502,3 +502,187 @@
502502
@utility shadow-default { --shadow-color: var(--color-shadow-default) !important; }
503503
@utility shadow-primary { --shadow-color: var(--color-shadow-primary) !important; }
504504
@utility shadow-error { --shadow-color: var(--color-shadow-error) !important; }
505+
506+
/* New typography shortcut utilities (unprefixed) */
507+
@utility text-display-lg {
508+
font-size: var(--typography-s-display-lg-font-size);
509+
line-height: var(--typography-s-display-lg-line-height);
510+
letter-spacing: var(--typography-s-display-lg-letter-spacing);
511+
}
512+
@media (min-width: 48rem) {
513+
.text-display-lg {
514+
font-size: var(--typography-l-display-lg-font-size);
515+
line-height: var(--typography-l-display-lg-line-height);
516+
letter-spacing: var(--typography-l-display-lg-letter-spacing);
517+
}
518+
}
519+
520+
@utility text-display-md {
521+
font-size: var(--typography-s-display-md-font-size);
522+
line-height: var(--typography-s-display-md-line-height);
523+
letter-spacing: var(--typography-s-display-md-letter-spacing);
524+
}
525+
@media (min-width: 48rem) {
526+
.text-display-md {
527+
font-size: var(--typography-l-display-md-font-size);
528+
line-height: var(--typography-l-display-md-line-height);
529+
letter-spacing: var(--typography-l-display-md-letter-spacing);
530+
}
531+
}
532+
533+
@utility text-heading-lg {
534+
font-size: var(--typography-s-heading-lg-font-size);
535+
line-height: var(--typography-s-heading-lg-line-height);
536+
letter-spacing: var(--typography-s-heading-lg-letter-spacing);
537+
}
538+
@media (min-width: 48rem) {
539+
.text-heading-lg {
540+
font-size: var(--typography-l-heading-lg-font-size);
541+
line-height: var(--typography-l-heading-lg-line-height);
542+
letter-spacing: var(--typography-l-heading-lg-letter-spacing);
543+
}
544+
}
545+
546+
@utility text-heading-md {
547+
font-size: var(--typography-s-heading-md-font-size);
548+
line-height: var(--typography-s-heading-md-line-height);
549+
letter-spacing: var(--typography-s-heading-md-letter-spacing);
550+
}
551+
@media (min-width: 48rem) {
552+
.text-heading-md {
553+
font-size: var(--typography-l-heading-md-font-size);
554+
line-height: var(--typography-l-heading-md-line-height);
555+
letter-spacing: var(--typography-l-heading-md-letter-spacing);
556+
}
557+
}
558+
559+
@utility text-heading-sm {
560+
font-size: var(--typography-s-heading-sm-font-size);
561+
line-height: var(--typography-s-heading-sm-line-height);
562+
letter-spacing: var(--typography-s-heading-sm-letter-spacing);
563+
}
564+
@media (min-width: 48rem) {
565+
.text-heading-sm {
566+
font-size: var(--typography-l-heading-sm-font-size);
567+
line-height: var(--typography-l-heading-sm-line-height);
568+
letter-spacing: var(--typography-l-heading-sm-letter-spacing);
569+
}
570+
}
571+
572+
@utility text-body-lg {
573+
/* Use medium metrics to align with default BodyLg weight */
574+
font-size: var(--typography-s-body-lg-medium-font-size);
575+
line-height: var(--typography-s-body-lg-medium-line-height);
576+
letter-spacing: var(--typography-s-body-lg-medium-letter-spacing);
577+
}
578+
@media (min-width: 48rem) {
579+
.text-body-lg {
580+
font-size: var(--typography-l-body-lg-medium-font-size);
581+
line-height: var(--typography-l-body-lg-medium-line-height);
582+
letter-spacing: var(--typography-l-body-lg-medium-letter-spacing);
583+
}
584+
}
585+
586+
@utility text-body-md {
587+
font-size: var(--typography-s-body-md-font-size);
588+
line-height: var(--typography-s-body-md-line-height);
589+
letter-spacing: var(--typography-s-body-md-letter-spacing);
590+
}
591+
@media (min-width: 48rem) {
592+
.text-body-md {
593+
font-size: var(--typography-l-body-md-font-size);
594+
line-height: var(--typography-l-body-md-line-height);
595+
letter-spacing: var(--typography-l-body-md-letter-spacing);
596+
}
597+
}
598+
599+
@utility text-body-sm {
600+
font-size: var(--typography-s-body-sm-font-size);
601+
line-height: var(--typography-s-body-sm-line-height);
602+
letter-spacing: var(--typography-s-body-sm-letter-spacing);
603+
}
604+
@media (min-width: 48rem) {
605+
.text-body-sm {
606+
font-size: var(--typography-l-body-sm-font-size);
607+
line-height: var(--typography-l-body-sm-line-height);
608+
letter-spacing: var(--typography-l-body-sm-letter-spacing);
609+
}
610+
}
611+
612+
@utility text-body-xs {
613+
font-size: var(--typography-s-body-xs-font-size);
614+
line-height: var(--typography-s-body-xs-line-height);
615+
letter-spacing: var(--typography-s-body-xs-letter-spacing);
616+
}
617+
@media (min-width: 48rem) {
618+
.text-body-xs {
619+
font-size: var(--typography-l-body-xs-font-size);
620+
line-height: var(--typography-l-body-xs-line-height);
621+
letter-spacing: var(--typography-l-body-xs-letter-spacing);
622+
}
623+
}
624+
625+
@utility text-page-heading {
626+
font-size: var(--typography-s-page-heading-font-size);
627+
line-height: var(--typography-s-page-heading-line-height);
628+
letter-spacing: var(--typography-s-page-heading-letter-spacing);
629+
}
630+
@media (min-width: 48rem) {
631+
.text-page-heading {
632+
font-size: var(--typography-l-page-heading-font-size);
633+
line-height: var(--typography-l-page-heading-line-height);
634+
letter-spacing: var(--typography-l-page-heading-letter-spacing);
635+
}
636+
}
637+
638+
@utility text-section-heading {
639+
font-size: var(--typography-s-section-heading-font-size);
640+
line-height: var(--typography-s-section-heading-line-height);
641+
letter-spacing: var(--typography-s-section-heading-letter-spacing);
642+
}
643+
@media (min-width: 48rem) {
644+
.text-section-heading {
645+
font-size: var(--typography-l-section-heading-font-size);
646+
line-height: var(--typography-l-section-heading-line-height);
647+
letter-spacing: var(--typography-l-section-heading-letter-spacing);
648+
}
649+
}
650+
651+
@utility text-button-label-md {
652+
font-size: var(--typography-s-button-label-md-font-size);
653+
line-height: var(--typography-s-button-label-md-line-height);
654+
letter-spacing: var(--typography-s-button-label-md-letter-spacing);
655+
}
656+
@media (min-width: 48rem) {
657+
.text-button-label-md {
658+
font-size: var(--typography-l-button-label-md-font-size);
659+
line-height: var(--typography-l-button-label-md-line-height);
660+
letter-spacing: var(--typography-l-button-label-md-letter-spacing);
661+
}
662+
}
663+
664+
@utility text-button-label-lg {
665+
font-size: var(--typography-s-button-label-lg-font-size);
666+
line-height: var(--typography-s-button-label-lg-line-height);
667+
letter-spacing: var(--typography-s-button-label-lg-letter-spacing);
668+
}
669+
@media (min-width: 48rem) {
670+
.text-button-label-lg {
671+
font-size: var(--typography-l-button-label-lg-font-size);
672+
line-height: var(--typography-l-button-label-lg-line-height);
673+
letter-spacing: var(--typography-l-button-label-lg-letter-spacing);
674+
}
675+
}
676+
677+
@utility text-amount-display-lg {
678+
font-size: var(--typography-s-amount-display-lg-font-size);
679+
line-height: var(--typography-s-amount-display-lg-line-height);
680+
letter-spacing: var(--typography-s-amount-display-lg-letter-spacing);
681+
}
682+
@media (min-width: 48rem) {
683+
.text-amount-display-lg {
684+
font-size: var(--typography-l-amount-display-lg-font-size);
685+
line-height: var(--typography-l-amount-display-lg-line-height);
686+
letter-spacing: var(--typography-l-amount-display-lg-letter-spacing);
687+
}
688+
}

0 commit comments

Comments
 (0)