(defisland
  ()
  (let
    ((colour (signal "violet")))
    (div
      (~tw
        :tokens (str
          "rounded-lg p-4 transition-all duration-300 bg-"
          (deref colour)
          "-100 border border-"
          (deref colour)
          "-300"))
      (h4
        (~tw
          :tokens (str "text-" (deref colour) "-800 font-semibold text-lg"))
        (str "Theme: " (deref colour)))
      (p
        (~tw :tokens "text-stone-600 text-sm mt-2 mb-3")
        "Click to change theme. Reactive spreads surgically update classes.")
      (div
        (~tw :tokens "flex gap-2 flex-wrap")
        (button
          :on-click (fn (e) (reset! colour "violet"))
          (~tw
            :tokens "bg-violet-500 text-white px-3 py-1.5 rounded text-sm font-medium")
          "Violet")
        (button
          :on-click (fn (e) (reset! colour "rose"))
          (~tw
            :tokens "bg-rose-500 text-white px-3 py-1.5 rounded text-sm font-medium")
          "Rose")
        (button
          :on-click (fn (e) (reset! colour "amber"))
          (~tw
            :tokens "bg-amber-500 text-white px-3 py-1.5 rounded text-sm font-medium")
          "Amber")
        (button
          :on-click (fn (e) (reset! colour "emerald"))
          (~tw
            :tokens "bg-emerald-500 text-white px-3 py-1.5 rounded text-sm font-medium")
          "Emerald")))))
