988617617c
- Rename CSS classes from BEM double-dash (btn--primary) to flat utility-style single-dash (btn-primary) - Move button CSS from inline Clojure string in gen.clj to src/ui/button.css next to button.cljc - gen.clj now auto-collects all src/ui/*.css files via babashka.fs glob - Replace clojure.java.io with babashka.fs throughout gen.clj - Update AGENTS.md to reflect new conventions
65 lines
2.5 KiB
Clojure
65 lines
2.5 KiB
Clojure
(ns ui.theme-test
|
|
(:require [clojure.test :refer [deftest is testing]]
|
|
[clojure.string :as str]
|
|
[ui.css.gen :as gen]
|
|
[ui.theme :as theme]))
|
|
|
|
(deftest css-var-test
|
|
(testing "generates correct CSS var reference"
|
|
(is (= "var(--accent)" (theme/css-var :accent)))
|
|
(is (= "var(--bg-0)" (theme/css-var :bg-0)))
|
|
(is (= "var(--shadow-2)" (theme/css-var :shadow-2)))))
|
|
|
|
(deftest token->css-var-test
|
|
(testing "converts keyword to CSS variable name"
|
|
(is (= "--accent" (gen/token->css-var :accent)))
|
|
(is (= "--bg-0" (gen/token->css-var :bg-0)))))
|
|
|
|
(deftest generate-css-test
|
|
(let [token-data (gen/read-tokens "src/theme/tokens.edn")
|
|
css (gen/generate-css token-data)]
|
|
|
|
(testing "contains :root block"
|
|
(is (str/includes? css ":root {")))
|
|
|
|
(testing "contains all base tokens as CSS variables"
|
|
(doseq [token [:bg-0 :bg-1 :bg-2 :fg-0 :fg-1 :fg-2
|
|
:accent :danger :success
|
|
:border-0 :border-1 :border-2
|
|
:shadow-0 :shadow-1 :shadow-2 :shadow-3
|
|
:radius-sm :radius-md :radius-lg]]
|
|
(is (str/includes? css (str "--" (name token) ":"))
|
|
(str "Missing token: " (name token)))))
|
|
|
|
(testing "contains dark theme data attribute selector"
|
|
(is (str/includes? css "[data-theme=\"dark\"]")))
|
|
|
|
(testing "contains dark theme media query"
|
|
(is (str/includes? css "@media (prefers-color-scheme: dark)")))
|
|
|
|
(testing "dark media query excludes explicit light theme"
|
|
(is (str/includes? css ":root:not([data-theme=\"light\"])")))
|
|
|
|
(testing "contains button component CSS"
|
|
(is (str/includes? css ".btn {"))
|
|
(is (str/includes? css ".btn-primary {"))
|
|
(is (str/includes? css ".btn-secondary {"))
|
|
(is (str/includes? css ".btn-ghost {"))
|
|
(is (str/includes? css ".btn-danger {"))
|
|
(is (str/includes? css ".btn-sm {"))
|
|
(is (str/includes? css ".btn-lg {"))
|
|
(is (str/includes? css ".btn:disabled {")))))
|
|
|
|
(deftest tokens-roundtrip-test
|
|
(testing "tokens.edn parses without error"
|
|
(let [data (gen/read-tokens "src/theme/tokens.edn")]
|
|
(is (map? (:tokens data)))
|
|
(is (map? (get-in data [:themes :dark])))))
|
|
|
|
(testing "dark theme has same keys as base tokens"
|
|
(let [data (gen/read-tokens "src/theme/tokens.edn")
|
|
base-keys (set (keys (:tokens data)))
|
|
dark-keys (set (keys (get-in data [:themes :dark])))]
|
|
(is (= base-keys dark-keys)
|
|
"Dark theme should override all base tokens"))))
|