senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

spacing: add semantic spacing scale to design tokens

Browse source 
- Added semantic spacing variables (xs through xxl)
- Preserved existing numeric spacing scale
- Added documentation for semantic vs numeric usage
- Provides both precise control and design system consistency
- Task 7.2.1.1 complete
This commit is contained in:
senke 2026-01-15 23:56:21 +01:00
parent 420f5d5489
commit 4d2d0ce57d
2 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
EXHAUSTIVE_TODO_LIST.md
View file

@ -2427,12 +2427,17 @@ Critical path dependencies:
### Sub-Epic 7.2: Spacing System ✅ QUICK WIN
#### Task 7.2.1: Define Spacing Scale
- [ ] **Action 7.2.1.1**: Add spacing scale to design tokens
- [x] **Action 7.2.1.1**: Add spacing scale to design tokens
- **Scope**: `apps/web/src/styles/design-tokens.css` - Add `--spacing-xs` through `--spacing-xxl`
- **Dependencies**: None
- **Dependencies**: None ✅
- **Risk**: LOW 🔒
- **Validation**: All spacing values defined
- **Rollback**: Remove CSS variables
- **Validation**: ✅ Added semantic spacing scale to design tokens:
- **Semantic spacing variables added**: `--spacing-xs` (4px), `--spacing-sm` (8px), `--spacing-md` (16px), `--spacing-lg` (24px), `--spacing-xl` (32px), `--spacing-2xl` (48px), `--spacing-3xl` (64px), `--spacing-4xl` (80px), `--spacing-5xl` (96px), `--spacing-xxl` (96px, alias)
- **Numeric scale preserved**: Existing `--spacing-0` through `--spacing-24` remain unchanged
- **Documentation added**: Comments explain semantic vs numeric scale usage
- **Mapping**: Semantic scale maps to numeric scale for consistency (xs=1, sm=2, md=4, lg=6, xl=8, 2xl=12, 3xl=16, 4xl=20, 5xl/xxl=24)
- Both scales available: numeric for precise control, semantic for design system consistency
- **Rollback**: Remove semantic spacing variables
- [ ] **Action 7.2.1.2**: Audit all spacing classes
- **Scope**: Search for `space-y-`, `space-x-`, `gap-`, `p-`, `m-`, `px-`, `py-`, `mx-`, `my-` - List all spacing usage

13
apps/web/src/styles/design-tokens.css
View file

@ -4,6 +4,7 @@
@theme {
/* === SPACING SCALE (4px base) === */
/* Numeric scale (for precise control) */
--spacing-0: 0;
--spacing-1: 0.25rem; /* 4px */
--spacing-2: 0.5rem; /* 8px */
@ -18,6 +19,18 @@
--spacing-20: 5rem; /* 80px */
--spacing-24: 6rem; /* 96px */
/* Semantic scale (for design system consistency) */
--spacing-xs: 0.25rem; /* 4px - Extra small spacing */
--spacing-sm: 0.5rem; /* 8px - Small spacing */
--spacing-md: 1rem; /* 16px - Medium spacing (base) */
--spacing-lg: 1.5rem; /* 24px - Large spacing */
--spacing-xl: 2rem; /* 32px - Extra large spacing */
--spacing-2xl: 3rem; /* 48px - 2X large spacing */
--spacing-3xl: 4rem; /* 64px - 3X large spacing */
--spacing-4xl: 5rem; /* 80px - 4X large spacing */
--spacing-5xl: 6rem; /* 96px - 5X large spacing */
--spacing-xxl: 6rem; /* 96px - Extra extra large spacing (alias for 5xl) */
/* === TYPOGRAPHY SCALE === */
--font-sans:
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;