feat: [M3-9404] - 4.0.0 Design Tokens - New Spacing & Badge Tokens

[jaalah-akamai]

Description 📝

We've renamed and improved our spacing tokens to eliminate confusion. The new naming convention now uses pixel values (like "s8" which corresponds to 8px instead of abstract numbers), which aligns with how UX designers work in Figma. While designers can now reference these more intuitive pixel-based names / values, our code still uses REM units behind the scenes for proper scaling and accessibility. This change creates a better workflow between design and development teams, as both can refer to the same token names despite working in different unit systems.

Changes 🔄

Badge [BREAKING]

• New badge group type accent introduced
• Moved old badge styles under the subtle group

Spacing Tokens [BREAKING]
Pixel values are transformed to REM in code

Old → New
0 → S0 (0px)
10 → S2 (2px)
20 → S4 (4px)
30 → S6 (6px)
40 → S8 (8px)
50 → S12 (12px)
60 → S16 (16px)
70 → S24 (24px)
80 → S32 (32px)
90 → S48 (48px)

Added new spacing tokens:
S20 (20px)
S28 (28px)
S36 (36px)
S40 (40px)
S64 (64px)
S72 (72px)
S96 (96px)

You can use these in cloud manager like so

Old → New
theme.tokens.spacing[50] → theme.tokens.spacing.S12

Target release date 🗓️

3/11

Preview 📷

How to test 🧪

Verification steps

• pnpm install && pnpm dev
• Ensure there's no linting, typescript or other build errors
• Ensure no visual regression from previous

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All unit tests are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[github-actions]

Coverage Report: ✅
Base Coverage: 80.17%
Current Coverage: 80.17%

[linode-gh-bot]

Cloud Manager UI test results

🎉 530 passing tests on test run #2 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	530 Passing	3 Skipped	108m 38s