commit e2404b61557a9a8d358c4d5a1f15a04ec6aeb1cb
parent 49242e02eaddad9137f619a964b015472a8b9696
Author: triesap <triesap@radroots.dev>
Date: Thu, 22 Jan 2026 17:23:24 +0000
app: adjust daisyui theme wiring
- move daisyui token mapping into app stylesheets
- drop daisyui plugin use to keep tailwind v4 compatible
- fix theme css application using HtmlElement style
- ignore app node_modules and lock daisyui install
Diffstat:
6 files changed, 278 insertions(+), 74 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,7 @@ logs/
# OS
.DS_Store
+app/node_modules/
Thumbs.db
# secrets
@@ -29,4 +30,4 @@ justfile
*dev*.toml
*dev*.json
-refs
-\ No newline at end of file
+refs
diff --git a/app/app.css b/app/app.css
@@ -4,7 +4,7 @@
@import "../crates/ui-tokens/assets/themes/layout.css";
@import "../crates/ui-tokens/assets/themes/screens.css";
@import "../crates/ui-tokens/assets/themes/theme_os.css";
-@import "../crates/ui-tokens/assets/themes/daisyui.css";
+@import "./stylesheets/daisyui.css";
@import "./stylesheets/apps-base.css";
@import "./stylesheets/apps-ui.css";
@import "./stylesheets/styles-maplibre-gl.css";
diff --git a/app/package-lock.json b/app/package-lock.json
@@ -0,0 +1,178 @@
+{
+ "name": "radroots-app",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "radroots-app",
+ "devDependencies": {
+ "daisyui": "^4.12.0"
+ }
+ },
+ "node_modules/camelcase-css": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+ "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">= 6"
+ }
+ },
+ "node_modules/css-selector-tokenizer": {
+ "version": "0.8.0",
+ "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+ "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "cssesc": "^3.0.0",
+ "fastparse": "^1.1.2"
+ }
+ },
+ "node_modules/cssesc": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+ "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+ "dev": true,
+ "license": "MIT",
+ "bin": {
+ "cssesc": "bin/cssesc"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/culori": {
+ "version": "3.3.0",
+ "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
+ "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+ }
+ },
+ "node_modules/daisyui": {
+ "version": "4.12.24",
+ "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.24.tgz",
+ "integrity": "sha512-JYg9fhQHOfXyLadrBrEqCDM6D5dWCSSiM6eTNCRrBRzx/VlOCrLS8eDfIw9RVvs64v2mJdLooKXY8EwQzoszAA==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "css-selector-tokenizer": "^0.8",
+ "culori": "^3",
+ "picocolors": "^1",
+ "postcss-js": "^4"
+ },
+ "engines": {
+ "node": ">=16.9.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/daisyui"
+ }
+ },
+ "node_modules/fastparse": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+ "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/nanoid": {
+ "version": "3.3.11",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+ "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+ "dev": true,
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "license": "MIT",
+ "peer": true,
+ "bin": {
+ "nanoid": "bin/nanoid.cjs"
+ },
+ "engines": {
+ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+ }
+ },
+ "node_modules/picocolors": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+ "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+ "dev": true,
+ "license": "ISC"
+ },
+ "node_modules/postcss": {
+ "version": "8.5.6",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+ "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+ "dev": true,
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ {
+ "type": "tidelift",
+ "url": "https://tidelift.com/funding/github/npm/postcss"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "license": "MIT",
+ "peer": true,
+ "dependencies": {
+ "nanoid": "^3.3.11",
+ "picocolors": "^1.1.1",
+ "source-map-js": "^1.2.1"
+ },
+ "engines": {
+ "node": "^10 || ^12 || >=14"
+ }
+ },
+ "node_modules/postcss-js": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+ "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+ "dev": true,
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "camelcase-css": "^2.0.1"
+ },
+ "engines": {
+ "node": "^12 || ^14 || >= 16"
+ },
+ "peerDependencies": {
+ "postcss": "^8.4.21"
+ }
+ },
+ "node_modules/source-map-js": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+ "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+ "dev": true,
+ "license": "BSD-3-Clause",
+ "peer": true,
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ }
+ }
+}
diff --git a/app/src/theme.rs b/app/src/theme.rs
@@ -81,6 +81,7 @@ fn app_theme_prefers_dark() -> bool {
#[cfg(target_arch = "wasm32")]
fn app_theme_apply_name(name: &str) -> RadrootsAppThemeResult<()> {
+ use leptos::wasm_bindgen::JsCast;
let Some(window) = web_sys::window() else {
return Err(RadrootsAppThemeError::Unavailable);
};
@@ -93,8 +94,10 @@ fn app_theme_apply_name(name: &str) -> RadrootsAppThemeResult<()> {
root.set_attribute("data-theme", name)
.map_err(|_| RadrootsAppThemeError::Unavailable)?;
let color_scheme = if name == "os_dark" { "dark" } else { "light" };
- let style = root.style();
- style
+ let html = root
+ .dyn_into::<web_sys::HtmlElement>()
+ .map_err(|_| RadrootsAppThemeError::Unavailable)?;
+ html.style()
.set_property("color-scheme", color_scheme)
.map_err(|_| RadrootsAppThemeError::Unavailable)?;
Ok(())
diff --git a/app/stylesheets/daisyui.css b/app/stylesheets/daisyui.css
@@ -0,0 +1,92 @@
+:root,
+:root[data-theme="os_light"] {
+ color-scheme: light;
+ --p: var(--accent);
+ --pc: var(--accent-contrast);
+ --s: var(--accent);
+ --sc: var(--accent-contrast);
+ --a: var(--accent);
+ --ac: var(--accent-contrast);
+ --n: var(--bg-elevated);
+ --nc: var(--text-primary);
+ --b1: var(--bg-app);
+ --b2: var(--bg-grouped);
+ --b3: var(--bg-elevated);
+ --bc: var(--text-primary);
+ --in: var(--accent);
+ --inc: var(--accent-contrast);
+ --su: var(--success);
+ --suc: var(--accent-contrast);
+ --wa: var(--warning);
+ --wac: var(--accent-contrast);
+ --er: var(--destructive);
+ --erc: var(--accent-contrast);
+ --rounded-box: 1rem;
+ --rounded-btn: 0.75rem;
+ --rounded-badge: 0.5rem;
+ --border-btn: 1px;
+ --tab-border: 1px;
+ --tab-radius: 0.75rem;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="os_light"]) {
+ color-scheme: dark;
+ --p: var(--accent);
+ --pc: var(--accent-contrast);
+ --s: var(--accent);
+ --sc: var(--accent-contrast);
+ --a: var(--accent);
+ --ac: var(--accent-contrast);
+ --n: var(--bg-elevated);
+ --nc: var(--text-primary);
+ --b1: var(--bg-app);
+ --b2: var(--bg-grouped);
+ --b3: var(--bg-elevated);
+ --bc: var(--text-primary);
+ --in: var(--accent);
+ --inc: var(--accent-contrast);
+ --su: var(--success);
+ --suc: var(--accent-contrast);
+ --wa: var(--warning);
+ --wac: var(--accent-contrast);
+ --er: var(--destructive);
+ --erc: var(--accent-contrast);
+ --rounded-box: 1rem;
+ --rounded-btn: 0.75rem;
+ --rounded-badge: 0.5rem;
+ --border-btn: 1px;
+ --tab-border: 1px;
+ --tab-radius: 0.75rem;
+ }
+}
+
+:root[data-theme="os_dark"] {
+ color-scheme: dark;
+ --p: var(--accent);
+ --pc: var(--accent-contrast);
+ --s: var(--accent);
+ --sc: var(--accent-contrast);
+ --a: var(--accent);
+ --ac: var(--accent-contrast);
+ --n: var(--bg-elevated);
+ --nc: var(--text-primary);
+ --b1: var(--bg-app);
+ --b2: var(--bg-grouped);
+ --b3: var(--bg-elevated);
+ --bc: var(--text-primary);
+ --in: var(--accent);
+ --inc: var(--accent-contrast);
+ --su: var(--success);
+ --suc: var(--accent-contrast);
+ --wa: var(--warning);
+ --wac: var(--accent-contrast);
+ --er: var(--destructive);
+ --erc: var(--accent-contrast);
+ --rounded-box: 1rem;
+ --rounded-btn: 0.75rem;
+ --rounded-badge: 0.5rem;
+ --border-btn: 1px;
+ --tab-border: 1px;
+ --tab-radius: 0.75rem;
+}
diff --git a/crates/ui-tokens/assets/themes/daisyui.css b/crates/ui-tokens/assets/themes/daisyui.css
@@ -1,69 +0,0 @@
-@plugin "daisyui" {
- themes: os_light, os_dark;
-}
-
-@plugin "daisyui/theme" {
- name: "os_light";
- default: false;
- prefersdark: false;
- color-scheme: light;
- --p: var(--accent);
- --pc: var(--accent-contrast);
- --s: var(--accent);
- --sc: var(--accent-contrast);
- --a: var(--accent);
- --ac: var(--accent-contrast);
- --n: var(--bg-elevated);
- --nc: var(--text-primary);
- --b1: var(--bg-app);
- --b2: var(--bg-grouped);
- --b3: var(--bg-elevated);
- --bc: var(--text-primary);
- --in: var(--accent);
- --inc: var(--accent-contrast);
- --su: var(--success);
- --suc: var(--accent-contrast);
- --wa: var(--warning);
- --wac: var(--accent-contrast);
- --er: var(--destructive);
- --erc: var(--accent-contrast);
- --rounded-box: 1rem;
- --rounded-btn: 0.75rem;
- --rounded-badge: 0.5rem;
- --border-btn: 1px;
- --tab-border: 1px;
- --tab-radius: 0.75rem;
-}
-
-@plugin "daisyui/theme" {
- name: "os_dark";
- default: false;
- prefersdark: true;
- color-scheme: dark;
- --p: var(--accent);
- --pc: var(--accent-contrast);
- --s: var(--accent);
- --sc: var(--accent-contrast);
- --a: var(--accent);
- --ac: var(--accent-contrast);
- --n: var(--bg-elevated);
- --nc: var(--text-primary);
- --b1: var(--bg-app);
- --b2: var(--bg-grouped);
- --b3: var(--bg-elevated);
- --bc: var(--text-primary);
- --in: var(--accent);
- --inc: var(--accent-contrast);
- --su: var(--success);
- --suc: var(--accent-contrast);
- --wa: var(--warning);
- --wac: var(--accent-contrast);
- --er: var(--destructive);
- --erc: var(--accent-contrast);
- --rounded-box: 1rem;
- --rounded-btn: 0.75rem;
- --rounded-badge: 0.5rem;
- --border-btn: 1px;
- --tab-border: 1px;
- --tab-radius: 0.75rem;
-}
