Skip to content

Web Token Diff Report

Generated: Phase 5 - Validation Comparison: sageox-mono/apps/web/src/styles/tokens.css vs sageox-design/platforms/web/tokens.css Status: Report only - no fixes applied

Summary

Category Original Generated Status
Brand Colors Full scales Partial (core only) Subset
Semantic Colors Multiple systems Success/Error only Subset
Typography Complete Complete Match
Spacing Complete Complete Match
Shadows Complete Not generated Missing
Z-Index Complete Not generated Missing
Animations Complete Not generated Missing
Terminal Complete Not generated Missing
Dark Mode Complete Not generated Missing

Token Comparison

Brand Colors

Token Original Generated Match
--ox-sage-50 through 900 Present Present Yes
--ox-copper-50 through 900 Present Present Yes
--ox-charcoal-50 through 900 Present Present Yes
--ox-brand-accent #4f6a48 Not generated Missing

Legacy Aliases

Token Original Generated
--ox-primary-* Present (alias to sage) Not generated
--ox-slate-* Present (alias to charcoal) Not generated
--ox-accent-* Present (alias to sage) Not generated

Note: Legacy aliases intentionally not generated. Decision: Keep only canonical tokens.

Semantic Colors

Token Original Generated Match
--ox-warn-50 through 900 Present Not generated Missing
--ox-danger-50 through 900 Present Not generated Missing
--ox-success-50 through 900 Present Present Yes
--ox-warning-50 through 900 Present Not generated Missing
--ox-error-50 through 900 Present Present Yes
--ox-progress-50 through 900 Present Not generated Missing
--ox-info-50 through 900 Present Not generated Missing
--ox-pending-50 through 900 Present Not generated Missing
--ox-disabled-50 through 900 Present Not generated Missing
--ox-admin-50 through 900 Present Not generated Missing

Typography

Token Original Generated Match
--font-sans Present Present Yes
--font-mono Present Present Yes
--text-xs through 6xl Present Present Yes
--leading-* Present Present Yes
--font-light through bold Present Present Yes
--tracking-* Present Not generated Missing

Spacing

Token Original Generated Match
--space-0 through 12 Present Present Yes
--radius-* Present Present Yes

Not Generated (Intentional for Phase 4)

These tokens exist in the original but were not included in the minimal Phase 4 output:

  • Shadow system (--shadow-*)
  • Z-index system (--z-*)
  • Animation/transition tokens
  • Terminal colors (--terminal-*)
  • Surface tokens (--ox-surface-*)
  • Button tokens (--ox-btn-*)
  • Focus states
  • Semantic bridge tokens
  • Node/edge diagram tokens
  • Container dimensions
  • Opacity system
  • Glass morphism
  • Gradient overlays
  • Dark mode overrides
  • Media query responsive overrides

Value Comparison

Exact Matches

All generated tokens have identical hex values to the original:

--ox-sage-500: #7a8f78 ✓
--ox-copper-500: #c47a4a ✓
--ox-charcoal-900: #111518 ✓
--ox-success-500: #4f9e76 ✓
--ox-error-500: #c63838 ✓

Case Sensitivity

Original uses lowercase hex. Generated uses lowercase hex. Match.

Recommendations

For Full Parity

To match the original tokens.css exactly, the compiler would need to generate:

  1. All 30+ color scales
  2. Legacy aliases (if desired)
  3. Semantic bridge tokens
  4. Surface/button/focus tokens
  5. Shadow system
  6. Z-index system
  7. Animation tokens
  8. Terminal colors
  9. Diagram tokens
  10. Container dimensions
  11. Opacity system
  12. Glass morphism
  13. Dark mode block

Current Subset Is Intentional

Phase 4 generates a minimal subset to validate the token pipeline works. Full generation deferred until Phase 6 (after human approval).

Mismatch Summary

Type Count
Missing tokens ~200+
Value mismatches 0
Extra tokens 0

Conclusion: Generated subset is accurate. Full parity requires extended compiler.