coop/rose-ash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewrite CSSX: unified Tailwind-style utility token system

Browse Source 
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:
giles
2026-03-13 01:37:35 +00:00
parent 7c969f9192
commit c2efa192c5
3 changed files with 449 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
sx/sx/layouts.sx
View File

@@ -5,7 +5,7 @@
;; Nav components — logo header, sibling arrows, children links
;; ---------------------------------------------------------------------------
;; CSSX replaces Tailwind text-*/bg-*/font-* classes — computed via cssx.sx
;; Styling via cssx-style utility tokens (cssx.sx) — same format as ~cssx/tw
;; Logo + tagline + copyright — always shown at top of page area.
;; The header itself is an island so the "reactive" word can cycle colours
@@ -21,23 +21,21 @@
(shade (signal 500))
(current-family (computed (fn ()
(nth families (mod (deref idx) (len families)))))))
(div :style (str (display "block") (max-w (get cssx-max-widths "3xl"))
(mx-auto) (px 4) (pt 8) (pb 4) (align "center"))
(div :style (tw "block max-w-3xl mx-auto px-4 pt-8 pb-4 text-center")
;; Logo — only this navigates home
(a :href "/sx/"
:sx-get "/sx/" :sx-target "#main-panel" :sx-select "#main-panel"
:sx-swap "outerHTML" :sx-push-url "true"
:style (str (display "block") (decoration "none"))
:style (tw "block no-underline")
(lake :id "logo"
(span :style (str (display "block") (mb 2)
(cssx (:text (colour "violet" 699) (size "4xl") (weight "bold") (family "mono"))))
(span :style (tw "block mb-2 text-violet-699 text-4xl font-bold font-mono")
"(<sx>)")))
;; Tagline — clicking "reactive" cycles colour.
(p :style (str (mb 1) (cssx (:text (colour "stone" 500) (size "lg"))))
(p :style (tw "mb-1 text-stone-500 text-lg")
"The framework-free "
(span
:style (str (cssx (:text (colour (deref current-family) (deref shade))
(weight "bold")))
:style (str "color:" (colour (deref current-family) (deref shade)) ";"
(tw "font-bold")
"cursor:pointer;transition:color 0.3s,font-weight 0.3s;")
:on-click (fn (e)
(batch (fn ()
@@ -47,11 +45,10 @@
" hypermedium")
;; Lake: server morphs copyright on navigation without disturbing signals.
(lake :id "copyright"
(p :style (cssx (:text (colour "stone" 400) (size "xs")))
(p :style (tw "text-stone-400 text-xs")
"© Giles Bradshaw 2026"
(when path
(span :style (str (cssx (:text (colour "stone" 300) (size "xs")))
"margin-left:0.5em;")
(span :style (str (tw "text-stone-300 text-xs") "margin-left:0.5em;")
(str "· " path))))))))
@@ -80,7 +77,7 @@
:sx-select "#main-panel" :sx-swap "outerHTML"
:sx-push-url "true"
:class "text-right"
:style (cssx (:text (colour "stone" 500) (size "sm")))
:style (tw "text-stone-500 text-sm")
(str "← " (get prev-node "label")))
(a :href (get node "href")
:sx-get (get node "href") :sx-target "#main-panel"
@@ -88,15 +85,15 @@
:sx-push-url "true"
:class "text-center px-4"
:style (if is-leaf
(cssx (:text (colour "violet" 700) (size "2xl") (weight "bold")))
(cssx (:text (colour "violet" 700) (size "lg") (weight "semibold"))))
(tw "text-violet-700 text-2xl font-bold")
(tw "text-violet-700 text-lg font-semibold"))
(get node "label"))
(a :href (get next-node "href")
:sx-get (get next-node "href") :sx-target "#main-panel"
:sx-select "#main-panel" :sx-swap "outerHTML"
:sx-push-url "true"
:class "text-left"
:style (cssx (:text (colour "stone" 500) (size "sm")))
:style (tw "text-stone-500 text-sm")
(str (get next-node "label") " →")))))))
;; Children links — shown as clearly clickable buttons.
@@ -109,8 +106,7 @@
:sx-select "#main-panel" :sx-swap "outerHTML"
:sx-push-url "true"
:class "px-3 py-1.5 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")
(get item "label")))
items))))

9
sx/sx/not-found.sx
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")))