Juli Living Showcase

Semantic tokens

Role-named mappings onto the primitives. Components read only these, which is what lets a tone context (ADR 0013) re-point a whole subtree without any component knowing. The resolved value under each swatch updates live when you toggle the theme — that is the light/dark behaviour these tokens encode.

Contrast between these pairs is not eyeballed: pnpm check:contrastmeasures all 180 of them across both modes and all five tones on every build. AA fails, AAA warns (ADR 0007, ADR 0032).

  1. --surface-default……light var(--c-juli-yellow-50)dark var(--c-juli-teal-950)
  2. --surface-elevated……light var(--c-white)dark var(--c-juli-teal-900)
  3. --text-default……light var(--c-juli-teal-800)dark var(--c-juli-green-50)
  4. --text-strong……light var(--c-juli-teal-700)dark var(--c-juli-green-100)
  5. --text-muted……light var(--c-juli-green-700)dark var(--c-juli-green-400)
  6. --border-subtle……light var(--c-juli-neutral-200)dark var(--c-juli-neutral-800)
  7. --focus-ring……light var(--c-juli-teal-700)dark var(--c-juli-green-300)
  8. --surface-action……light var(--c-juli-green-400)dark var(--c-juli-green-500)
  9. --text-on-action……light var(--c-juli-teal-800)dark var(--c-juli-neutral-950)
  10. --status-available-surface……light var(--c-juli-green-200)dark var(--c-juli-green-900)
  11. --status-available-text……light var(--c-juli-green-900)dark var(--c-juli-green-300)
  12. --status-reserved-surface……light var(--c-juli-neutral-100)dark var(--c-juli-neutral-800)
  13. --status-reserved-text……light var(--c-juli-yellow-900)dark var(--c-juli-yellow-200)
  14. --status-coming-soon-surface……light var(--c-juli-teal-100)dark var(--c-juli-teal-700)
  15. --status-coming-soon-text……light var(--c-juli-teal-700)dark var(--c-juli-teal-100)
  16. --status-let-surface……light var(--c-juli-neutral-200)dark var(--c-juli-neutral-800)
  17. --status-let-text……light var(--c-juli-neutral-700)dark var(--c-juli-neutral-300)
  18. --flag-new-surface……light var(--c-juli-yellow-300)dark var(--c-juli-yellow-300)
  19. --flag-new-text……light var(--c-juli-neutral-950)dark var(--c-juli-neutral-950)
  20. --flag-open-house-surface……light var(--c-juli-green-300)dark var(--c-juli-green-300)
  21. --flag-open-house-text……light var(--c-juli-neutral-950)dark var(--c-juli-neutral-950)
  22. --status-pill-border……light transparentdark var(--c-juli-teal-700)