feat(style): remove deprecated semantic spacing tokens#3320
feat(style): remove deprecated semantic spacing tokens#3320rivka-ungar merged 8 commits intovibe4from
Conversation
Remove legacy spacing CSS custom properties (--spacing-xs, --spacing-small, --spacing-medium, --spacing-large, --spacing-xl, --spacing-xxl, --spacing-xxxl) from @vibe/style and replace all internal usages with numeric spacing tokens (--space-4, --space-8, --space-16, --space-24, --space-32, --space-48, --space-64). - Remove 7 deprecated token definitions from spacing.scss - Update 77 SCSS files across core, components, base, and docs packages - Update Flex component to use token map instead of dynamic interpolation - Update stylelint config to remove old tokens from allowed vars - Update VIBE4_CHANGELOG.md and VIBE4_MIGRATION_GUIDE.md - Keep use-new-spacing-tokens stylelint rule as migration aid for consumers BREAKING CHANGE: Semantic spacing tokens (--spacing-xs, --spacing-small, --spacing-medium, --spacing-large, --spacing-xl, --spacing-xxl, --spacing-xxxl) have been removed. Use numeric spacing tokens instead. Run `npx stylelint --fix "**/*.scss"` with @vibe/style/use-new-spacing-tokens rule enabled to auto-fix. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Review Summary by Qodo
WalkthroughsDescription• Remove 7 deprecated semantic spacing tokens from @vibe/style • Replace all internal usages across 77+ SCSS files with numeric tokens • Update Flex component to use explicit token map instead of interpolation • Update stylelint config and migration documentation for consumers File Changes1. packages/style/src/spacing.scss
|
Code Review by Qodo
1. Docs reference removed spacing vars
|
![qodo-free-for-open-source-projects[bot]](https://avatars.githubusercontent.com/in/1068000?s=60&v=4){kind=small}
| padding: var(--space-16) 12px var(--space-8); | ||
| } | ||
|
|
||
| .large { | ||
| padding: var(--spacing-medium) 12px var(--spacing-small); | ||
| padding: var(--space-16) 12px var(--space-8); |
There was a problem hiding this comment.
1. Hardcoded 12px in listtitle 📘 Rule violation ✓ Correctness
next/ListTitle.module.scss uses hardcoded 12px values where an equivalent spacing token exists (--space-12). This violates the SCSS module design token requirement.
Agent Prompt
## Issue description
SCSS module styling uses hardcoded `12px` spacing values even though an equivalent design token (`--space-12`) exists.
## Issue Context
Rule 3 requires SCSS modules to use design tokens instead of hardcoded values where applicable.
## Fix Focus Areas
- packages/core/src/components/next/List/ListTitle/ListTitle.module.scss[14-18]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Resolve conflicts between spacing token removal and input padding reduction. Take vibe4's new padding values with new token names: - BaseInput: --space-12 for inline-start (vibe4's reduced padding) - TextField: --space-12 for inline-start, --space-4 for inline-end - TextArea: uniform --space-8 padding - Dropdown Trigger: removed padding-inline-start from selectedItem Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Persistent review updated to latest commit 4af42da |
With old spacing tokens removed, each pixel value now maps to only one CSS variable. Update test expectation for the single-var warning format and remove the now-unnecessary recommended array from spacing props config. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
📦 Bundle Size Analysis Changed Components
Unchanged Components
📊 Summary:
|
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Persistent review updated to latest commit a32fd0b |
| #### Design Tokens — Spacing | ||
|
|
||
| - **Change**: TBD | ||
| - **Reason**: TBD | ||
| - **Migration**: TBD | ||
| - **Codemod**: ❌ Manual | ||
| - [x] **Status**: Complete | ||
| - **Change**: Removed deprecated semantic spacing CSS custom properties (`--spacing-xs`, `--spacing-small`, `--spacing-medium`, `--spacing-large`, `--spacing-xl`, `--spacing-xxl`, `--spacing-xxxl`) from `@vibe/style`. All internal usages replaced with numeric spacing tokens (`--space-4`, `--space-8`, `--space-16`, `--space-24`, `--space-32`, `--space-48`, `--space-64`). | ||
| - **Reason**: The numeric naming convention is more scalable, unambiguous, and consistent with modern design token practices. The semantic names (`small`, `medium`, `large`) don't scale beyond `xxxl` and create ambiguity about exact values. | ||
| - **Migration**: Replace all usages of old spacing tokens with their numeric equivalents. Run `npx stylelint --fix "**/*.scss"` with `@vibe/style/use-new-spacing-tokens` rule enabled to auto-fix. | ||
| - **Codemod**: ✅ Stylelint auto-fix via `@vibe/style/use-new-spacing-tokens` rule |
There was a problem hiding this comment.
1. Docs reference removed spacing vars 🐞 Bug ✓ Correctness
After removing --spacing-* tokens from @vibe/style, the v4 changelog/migration guide still describe the “Input Padding” change using var(--spacing-medium)/var(--spacing-small), which are no longer defined. Consumers may copy these snippets and end up with broken/ineffective CSS variables.
Agent Prompt
### Issue description
The PR removes legacy semantic spacing CSS vars (`--spacing-*`), but some v4 documentation sections still reference those removed tokens (notably the “Input Padding” change). This makes the migration guidance inaccurate post-change.
### Issue Context
Consumers rely on VIBE4_CHANGELOG.md and VIBE4_MIGRATION_GUIDE.md for copy/paste-ready examples. After removing the token definitions, any remaining references to `--spacing-small`/`--spacing-medium` will not resolve.
### Fix Focus Areas
- VIBE4_CHANGELOG.md[508-513]
- VIBE4_MIGRATION_GUIDE.md[536-572]
- packages/style/src/spacing.scss[1-14]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Update 20 snapshots reflecting --spacing-* → --space-* token changes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Persistent review updated to latest commit c14492b |
…ve-deprecated-spacing-tokens
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Persistent review updated to latest commit e0b8507 |
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Persistent review updated to latest commit 274b3ed |
1 participant
User description
Summary
--spacing-xs,--spacing-small,--spacing-medium,--spacing-large,--spacing-xl,--spacing-xxl,--spacing-xxxl) from@vibe/style--space-4,--space-8,--space-16,--space-24,--space-32,--space-48,--space-64)var(--spacing-${gap})interpolationprops-to-allowed-vars.js) to remove old tokens from allowed vars listuse-new-spacing-tokensstylelint rule as migration aid for external consumers (auto-fix enabled)Breaking Changes
--spacing-xs--space-4--spacing-small--space-8--spacing-medium--space-16--spacing-large--space-24--spacing-xl--space-32--spacing-xxl--space-48--spacing-xxxl--space-64Migration for Consumers
Run stylelint auto-fix to migrate all usages automatically:
npx stylelint --fix "**/*.scss"The
@vibe/style/use-new-spacing-tokensrule will replace all legacy token references.Task Link
Monday.com Task
Test Plan
🤖 Generated with Claude Code
PR Type
Enhancement
Description
Remove 7 deprecated semantic spacing tokens from
@vibe/styleReplace all internal usages across 77+ SCSS files with numeric tokens
Update Flex component to use explicit token map instead of dynamic interpolation
Update stylelint config and migration documentation for consumers
Diagram Walkthrough
File Walkthrough
1 files
Remove deprecated semantic spacing token definitions1 files
Replace dynamic spacing interpolation with explicit token map1 files
Remove deprecated tokens from stylelint allowed vars list3 files
Update example comments to use new numeric tokensDocument spacing token removal and migration pathAdd comprehensive spacing token migration guide1 files
Update stylelint test expectations for single token13 files
Replace deprecated spacing tokens with numeric equivalentsReplace deprecated spacing tokens with numeric equivalentsReplace deprecated spacing tokens with numeric equivalentsUpdate utility spacing variable map with new tokensReplace deprecated spacing tokens with numeric equivalentsReplace deprecated spacing tokens with numeric equivalentsReplace deprecated spacing tokens with numeric equivalentsReplace deprecated spacing tokens with numeric equivalentsReplace deprecated spacing tokens with numeric equivalentsReplace deprecated spacing tokens with numeric equivalentsReplace deprecated spacing tokens with numeric equivalentsReplace deprecated spacing tokens with numeric equivalentsReplace deprecated spacing tokens with numeric equivalents67 files