OpenNoodl/dev-docs/tasks/phase-9-styles-overhaul/CLEANUP-SUBTASKS/TASK-000E-typography-spacing/CHANGELOG.md

TASK-000E: Typography & Spacing Tokens - CHANGELOG

Overview

Added comprehensive typography and spacing token systems to enable consistent sizing, spacing, and visual rhythm across the application.

Status: ✅ COMPLETE
Date: December 30, 2025
Effort: ~30 minutes
Risk: Low

---

Changes Made

1. Enhanced Typography System

File: packages/noodl-core-ui/src/styles/custom-properties/fonts.css

Added:

• ✅ Font size scale (xs → 3xl) from 10px to 24px
• ✅ Line height tokens (none → loose)
• ✅ Letter spacing tokens (tighter → widest)
• ✅ Semantic text style presets (body, small, label, code)
• ✅ Updated font families with fallbacks
• ✅ Added medium (500) font weight

New Tokens:

/* Font sizes */
--font-size-xs, --font-size-sm, --font-size-base, --font-size-md,
--font-size-lg, --font-size-xl, --font-size-2xl, --font-size-3xl

/* Line heights */
--line-height-none, --line-height-tight, --line-height-snug,
--line-height-normal, --line-height-relaxed, --line-height-loose

/* Letter spacing */
--letter-spacing-tighter → --letter-spacing-widest

/* Semantic styles */
--text-body-*, --text-small-*, --text-label-*, --text-code-*

2. New Spacing System

File Created: packages/noodl-core-ui/src/styles/custom-properties/spacing.css

Added:

• ✅ 4px-based spacing scale (0 → 96px)
• ✅ Semantic spacing aliases (panel, card, button, input, icon)
• ✅ Border radius scale (none → full)
• ✅ Shadow system (sm → popup)
• ✅ Transition timing & easing functions
• ✅ Z-index scale for layering

Token Categories:

/* Spacing scale: 31 tokens from 0 to 96px */
--spacing-0, --spacing-px, --spacing-0-5, --spacing-1 ... --spacing-24

/* Semantic spacing */
--spacing-panel-*, --spacing-card-*, --spacing-section-*,
--spacing-input-*, --spacing-button-*, --spacing-icon-*

/* Border radius: 9 tokens */
--radius-none, --radius-sm, --radius-default ... --radius-full

/* Shadows: 8 tokens */
--shadow-sm, --shadow-default ... --shadow-popup

/* Transitions: 7 tokens */
--transition-fast, --transition-default, --transition-slow,
--transition-ease, --transition-ease-in/out/in-out

/* Z-index: 8 tokens */
--z-base, --z-dropdown, --z-sticky ... --z-tooltip

3. Editor Spacing Copy

File Created: packages/noodl-editor/src/editor/src/styles/custom-properties/spacing.css

• Identical copy for editor package consistency

4. Import Wiring

Updated Files:

✅ packages/noodl-core-ui/.storybook/preview.ts

import '../src/styles/custom-properties/spacing.css';

✅ packages/noodl-editor/src/editor/index.ts

import '../editor/src/styles/custom-properties/spacing.css';

✅ packages/noodl-editor/src/frames/viewer-frame/index.js

import '../../editor/src/styles/custom-properties/spacing.css';

---

Verification

✅ Type Safety

• No TypeScript compilation errors
• All CSS imports resolve correctly

✅ Token Availability

• All tokens accessible via var(--token-name)
• No missing variable warnings

✅ Build System

• CSS files properly imported in all entry points
• Storybook preview includes spacing tokens
• Editor and viewer frame have access to tokens

---

Usage Examples

Typography

.title {
  font-family: var(--font-family);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.code {
  font-family: var(--font-family-code);
  font-size: var(--font-size-sm);
}

Spacing & Layout

.panel {
  padding: var(--spacing-panel-padding);
  gap: var(--spacing-panel-gap);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.button {
  padding: var(--spacing-button-padding-y) var(--spacing-button-padding-x);
  gap: var(--spacing-button-gap);
  transition: all var(--transition-default) var(--transition-ease);
}

---

Next Steps

These tokens are now ready for use in:

✅ TASK-000F: Component Buttons & Inputs

• Apply spacing tokens to button padding
• Use font tokens for button text
• Implement consistent radius/shadows

✅ TASK-000G: Component Dialogs & Panels

• Use semantic spacing for layouts
• Apply shadow tokens for elevation
• Implement consistent z-index layering

---

Token Summary

Total Tokens Added: ~85 tokens

Category	Count	Base
Font Sizes	8	10px → 24px
Font Weights	5	300 → 700
Line Heights	6	1 → 2
Letter Spacing	6	-0.05em → 0.1em
Semantic Text	12	Preset combinations
Spacing Scale	31	0px → 96px (4px base)
Semantic Space	16	Component aliases
Border Radius	9	0 → 9999px
Shadows	8	sm → popup
Transitions	7	Timing & easing
Z-Index	8	0 → 700

---

Files Modified

Created (3)

• packages/noodl-core-ui/src/styles/custom-properties/spacing.css
• packages/noodl-editor/src/editor/src/styles/custom-properties/spacing.css
• dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-000-styles-overhaul/TASK-000E-typography-spacing/CHANGELOG.md

Modified (4)

• packages/noodl-core-ui/src/styles/custom-properties/fonts.css
• packages/noodl-core-ui/.storybook/preview.ts
• packages/noodl-editor/src/editor/index.ts
• packages/noodl-editor/src/frames/viewer-frame/index.js

---

Foundation Health

✅ All tokens follow naming conventions
✅ Semantic aliases point to base tokens
✅ No hardcoded values in semantic tokens
✅ Consistent 4px spacing rhythm
✅ Comprehensive documentation in CSS comments
✅ TypeScript build passes
✅ Ready for component implementation

---

Task Status: ✅ COMPLETE - Typography & Spacing Foundation Established