floscr/clj-ui-framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: centralize body base styles in theme.css

Browse Source 
Move font-family, background, color, margin, and transition from
duplicated inline <style> blocks in each dev target into the CSS
generator (base-css). Dev pages now only set page-specific padding.

Also fixes hiccup target rendering the wrong font due to hiccup2
HTML-escaping quotes inside <style> tags, and adds missing <!DOCTYPE>.
This commit is contained in:
Florian Schroedl
2026-03-03 11:04:27 +01:00
parent 42ddb56d65
commit 6b4899f8bf
4 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
dev/hiccup/src/dev/hiccup.clj
View File

@@ -32,13 +32,14 @@
(defn page [] (defn page []
(str (str
"<!DOCTYPE html>\n"
(h/html (h/html
[:html [:html
[:head [:head
[:meta {:charset "utf-8"}] [:meta {:charset "utf-8"}]
[:meta {:name "viewport" :content "width=device-width, initial-scale=1"}] [:meta {:name "viewport" :content "width=device-width, initial-scale=1"}]
[:link {:rel "stylesheet" :href "/theme.css"}] [:link {:rel "stylesheet" :href "/theme.css"}]
[:style "body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 2rem; background: var(--bg-0); color: var(--fg-0); margin: 0; transition: background-color 0.2s, color 0.2s; }"]] [:style (h/raw "body { padding: 2rem; }")]]
[:body [:body
[:div {:style "max-width: 800px; margin: 0 auto;"} [:div {:style "max-width: 800px; margin: 0 auto;"}
[:div {:style "display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;"} [:div {:style "display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;"}

9
dev/replicant/public/index.html
View File

@@ -5,14 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/theme.css" /> <link rel="stylesheet" href="/theme.css" />
<style> <style>
body { body { padding: 2rem; }
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
padding: 2rem;
background: var(--bg-0);
color: var(--fg-0);
margin: 0;
transition: background-color 0.2s, color 0.2s;
}
</style> </style>
</head> </head>
<body> <body>

9
dev/squint/index.html
View File

@@ -5,14 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/theme.css" /> <link rel="stylesheet" href="/theme.css" />
<style> <style>
body { body { padding: 2rem; }
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
padding: 2rem;
background: var(--bg-0);
color: var(--fg-0);
margin: 0;
transition: background-color 0.2s, color 0.2s;
}
</style> </style>
</head> </head>
<body> <body>

14
src/ui/css/gen.clj
View File

@@ -21,6 +21,17 @@
(map (fn [[k v]] (str " " (token->css-var k) ": " v ";"))) (map (fn [[k v]] (str " " (token->css-var k) ": " v ";")))
(str/join "\n"))) (str/join "\n")))
(defn base-css
"Generate base body/reset styles."
[]
"body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
margin: 0;
background: var(--bg-0);
color: var(--fg-0);
transition: background-color 0.2s, color 0.2s;
}")
(defn component-css-button (defn component-css-button
"Generate BEM-lite CSS for the button component." "Generate BEM-lite CSS for the button component."
[] []
@@ -94,8 +105,9 @@
" :root:not([data-theme=\"light\"]) {\n" " :root:not([data-theme=\"light\"]) {\n"
(str/replace (tokens->css-block dark-tokens) #"(?m)^ " " ") (str/replace (tokens->css-block dark-tokens) #"(?m)^ " " ")
"\n }\n}") "\n }\n}")
base (base-css)
components (component-css-button)] components (component-css-button)]
(str/join "\n\n" [root-block dark-attr dark-media components ""]))) (str/join "\n\n" [root-block dark-attr dark-media base components ""])))
(defn build-theme! (defn build-theme!
"Read tokens from file and write generated CSS to output." "Read tokens from file and write generated CSS to output."