Rewrite CSSX: unified Tailwind-style utility token system

Replace the three-layer cssx system (macro + value functions + class
components) with a single token resolver. Tokens like "bg-yellow-199",
"hover:bg-rose-500", "md:text-xl" are parsed into CSS declarations.

Two delivery mechanisms, same token format:
- tw() function: returns inline style string for :style
- ~cssx/tw macro: injects JIT class + <style> onto first child element

The resolver handles: colours (21 names, any shade 0-950), spacing,
typography, display, max-width, rounded, opacity, w/h, gap, text
decoration, cursor, overflow, transitions. States (hover/focus/active)
and responsive breakpoints (sm/md/lg/xl/2xl) for class-based usage.

Next step: replace macro/function approach with spec-level primitives
(defcontext/provide/context + spread) so ~cssx/tw becomes a proper
component returning spread values, with rules collected via context.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-13 01:37:35 +00:00
parent 7c969f9192
commit c2efa192c5
3 changed files with 449 additions and 155 deletions

View File

@@ -2,19 +2,18 @@
(defcomp ~not-found/content (&key (path :as string?))
(div :class "max-w-3xl mx-auto px-4 py-12 text-center"
(h1 :style (cssx (:text (colour "stone" 800) (size "3xl") (weight "bold")))
(h1 :style (tw "text-stone-800 text-3xl font-bold")
"404")
(p :class "mt-4"
:style (cssx (:text (colour "stone" 500) (size "lg")))
:style (tw "text-stone-500 text-lg")
"Page not found")
(when path
(p :class "mt-2"
:style (cssx (:text (colour "stone" 400) (size "sm") (family "mono")))
:style (tw "text-stone-400 text-sm font-mono")
path))
(a :href "/sx/"
:sx-get "/sx/" :sx-target "#main-panel" :sx-select "#main-panel"
:sx-swap "outerHTML" :sx-push-url "true"
:class "inline-block mt-6 px-4 py-2 rounded border transition-colors"
:style (cssx (:text (colour "violet" 700) (size "sm"))
(:border (colour "violet" 200)))
:style (tw "text-violet-700 text-sm border-violet-200")
"Back to home")))