feat(typeTokens): L3-10719 Create a small and medium semantic text token for badges

[smarks8]

Jira ticket

L3-10719

Screenshots

Figma link

Figma Link - Badge Type

Summary

We need new semantic text tokens for badges to ensure consistency across Seldon and Remix. We’ll introduce two semantic tokens:

badgeSmall for No Reserve

badgeMedium for Sale Card status

Change List (describe the changes made to the files)

This pull request introduces new typography variants for badges, updating both the codebase and documentation to support and showcase badgeSmall and badgeMedium styles. The changes ensure badges have dedicated font sizes and styling tokens across TypeScript, SCSS, and Storybook documentation, and update their usage in key components.

Typography system updates

• Added badgeSmall and badgeMedium to the TextVariants enum in types.ts to enable usage throughout the codebase.
• Defined new SCSS variables and token mappings for badge font sizes in _vars.scss, and integrated these tokens into the main typography mixins and token lists. [1] [2] [3] [4] [5]
• Updated the _text-showcase.scss file to include badge-specific styles for showcase and documentation purposes.

Component usage updates

• Changed ObjectTile and SaleCard components to use the new badge variants (badgeSmall and badgeMedium) for their badge text elements, replacing the previous label variants. [1] [2]

Documentation enhancements

• Extended the Storybook MDX documentation to display and describe the new badge typography tokens, including their specs and usage examples.

These updates collectively ensure that badge text styling is consistent, maintainable, and well-documented across the design system.

Acceptance Test (how to verify the PR)

• Verify the styling in the text showcase file
• Verify that lot object tile and sale card badge type changes look ok (prob via chromatic)

Regression Test

• (Optional) Add verification steps to make sure this PR doesn't break old functionality

Evidence of testing

• Post logs, screenshots, etc

Things to look for during review

• PR title should correctly describe the most significant type of commit. I.e. feat(scope): ... if a minor release should be triggered.
• All commit messages follow convention and are appropriate for the changes
• All references to phillips class prefix are using the prefix variable
• All major areas have a data-testid attribute.
• Document all props with jsdoc comments
• All strings should be translatable.
• Unit tests should be written and should have a coverage of 90% or higher in all areas.

New Components

• Are there any accessibility considerations that need to be taken into account and tested?
• Default story called "Playground" should be created for all new components
• Create a jsdoc comment that has an Overview section and a link to the Figma design for the component
• Export the component and its typescript type from the index.ts file
• Import the component scss file into the componentStyles.scss file.

[netlify]

✅ Deploy Preview for phillips-seldon ready!

Name	Link
🔨 Latest commit	aab7c03
🔍 Latest deploy log	https://app.netlify.com/projects/phillips-seldon/deploys/6978deb200daec000814eea5
😎 Deploy Preview	https://deploy-preview-795--phillips-seldon.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

🚀 Storybook preview is ready.

• Preview: https://68b9f094608b90f3cfec5a06-izlqadgmga.chromatic.com/
• Chromatic build: https://www.chromatic.com/build?appId=68b9f094608b90f3cfec5a06&number=300

[Copilot]

Pull request overview

This PR introduces two new semantic typography tokens (badgeSmall and badgeMedium) for badges to ensure consistent styling across the design system. The changes add proper typography tokens specifically for badge elements, replacing the previous practice of using generic label variants for badges.

Changes:

• Added badgeSmall and badgeMedium typography variants with responsive font sizes
• Updated ObjectTile to use badgeSmall for "No Reserve" badges
• Updated SaleCard to use badgeMedium for status badges

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/components/Text/types.ts	Added badgeSmall and badgeMedium to the TextVariants enum
src/scss/_vars.scss	Defined SCSS variables for badge font sizes and added badge tokens to the token list
src/scss/_type.scss	Implemented mixins for badge typography using label-styles with appropriate font sizes
src/design/type-tokens/_text-showcase.scss	Added showcase styles for badge tokens
src/design/type-tokens/type-tokens.mdx	Added documentation section displaying badge token specifications and usage
src/patterns/ObjectTile/ObjectTile.tsx	Changed badge from labelSmall to badgeSmall variant
src/patterns/SaleCard/SaleCard.tsx	Changed badge from labelSmall to badgeMedium variant

[zhenpanda]

LGTM

[Zach-OfAllTrades]

Looks good!