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-neutral-200)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-700)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-300)dark var(--c-juli-neutral-800)
  7. --shadow-raised……light 0 0.75rem 2rem -0.5rem color-mix(in oklch, var(--c-juli-teal-950) 22%, transparent)dark 0 0.75rem 2rem -0.5rem color-mix(in oklch, var(--c-juli-neutral-950) 60%, transparent)
  8. --focus-ring……light var(--c-juli-teal-700)dark var(--c-juli-green-300)
  9. --surface-action……light var(--c-juli-green-300)dark var(--c-juli-green-500)
  10. --text-on-action……light var(--c-juli-teal-700)dark var(--c-juli-neutral-950)
  11. --status-available-surface……light var(--c-juli-green-200)dark var(--c-juli-green-900)
  12. --status-available-text……light var(--c-juli-teal-700)dark var(--c-juli-green-300)
  13. --status-reserved-surface……light var(--c-juli-neutral-100)dark var(--c-juli-neutral-800)
  14. --status-reserved-text……light var(--c-juli-yellow-900)dark var(--c-juli-yellow-200)
  15. --status-coming-soon-surface……light var(--c-juli-teal-100)dark var(--c-juli-teal-700)
  16. --status-coming-soon-text……light var(--c-juli-teal-700)dark var(--c-juli-teal-100)
  17. --status-let-surface……light var(--c-juli-neutral-200)dark var(--c-juli-neutral-800)
  18. --status-let-text……light var(--c-juli-neutral-700)dark var(--c-juli-neutral-300)
  19. --flag-new-surface……light var(--c-juli-teal-700)dark var(--c-juli-neutral-200)
  20. --flag-new-text……light var(--c-juli-green-300)dark var(--c-juli-teal-700)
  21. --flag-open-house-surface……light var(--c-juli-green-300)dark var(--c-juli-green-300)
  22. --flag-open-house-text……light var(--c-juli-teal-700)dark var(--c-juli-teal-700)
  23. --status-pill-border……light transparentdark var(--c-juli-teal-700)