commit 85dc419b254d087bbc1e5b0929586202e1b1b538
parent d806a4de6c617600d8a82f8a3c38fe3a731a6c69
Author: triesap <triesap@radroots.dev>
Date: Thu, 22 Jan 2026 16:51:45 +0000
app: fix tailwind theme utilities
- replace daisyui theme plugin with css variables
- restore app theme tokens for custom text utilities
- convert rounded-touch and size utilities to @utility
- simplify input/select utilities to avoid missing classes
Diffstat:
3 files changed, 157 insertions(+), 102 deletions(-)
diff --git a/app/app.css b/app/app.css
@@ -14,6 +14,47 @@
@source "./src/**/*.rs";
@source "../crates/**/*.rs";
+@theme {
+ --font-sans: "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ --font-sansd: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ --font-serif: ui-serif, Georgia, "Times New Roman", serif;
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+ --text-guide: 1.25rem;
+ --text-form_base: 1.08rem;
+ --text-line_label: 1.3rem;
+ --text-trellis_ti: 0.8rem;
+ --text-line_d: 1.05rem;
+ --text-nav_prev: 1.09rem;
+ --text-nav_curr: 1.09rem;
+ --text-env_ti: 1.05rem;
+ --text-env_btnc: 1.1rem;
+ --text-env_btnl: 1.1rem;
+
+ --radius-input_form: 8px;
+ --radius-entry: 1.05rem;
+ --radius-touch: 1.25rem;
+
+ --border-width-line: 1px;
+ --border-width-edge: 2px;
+
+ --animate-spin-slow: spin 3s linear infinite;
+}
+
+@utility rounded-touch {
+ border-radius: var(--radius-xl);
+}
+
+@utility h-line {
+ height: var(--size-line);
+ min-height: var(--size-line);
+}
+
+@utility h-line_button {
+ height: var(--size-line-button);
+ min-height: var(--size-line-button);
+}
+
@layer base {
html {
font-family: var(--font-sans);
@@ -104,20 +145,6 @@
backdrop-filter: blur(18px) saturate(180%);
}
- .rounded-touch {
- border-radius: var(--radius-xl);
- }
-
- .h-line {
- height: var(--size-line);
- min-height: var(--size-line);
- }
-
- .h-line_button {
- height: var(--size-line-button);
- min-height: var(--size-line-button);
- }
-
[data-ui="dialog-overlay"],
[data-ui="sheet-overlay"] {
position: fixed;
diff --git a/app/stylesheets/apps-ui.css b/app/stylesheets/apps-ui.css
@@ -44,10 +44,6 @@
@apply flex flex-row w-full px-2 items-center;
}
-@utility el-textarea {
- @apply w-full p-0 pl-2 py-3 rounded-touch;
-}
-
.el-textarea-ly1:focus {
border-color: hsl(var(--ly1-focus));
}
@@ -64,10 +60,6 @@
}
@utility el-input {
- @apply input w-full p-0;
-}
-
-@utility el-input {
@apply flex flex-row w-full p-0 justify-center items-center border-0 focus:border-0 outline-0 focus:outline-0 bg-transparent disabled:bg-transparent font-sans font-[400] placeholder:font-[400] text-form_base;
}
@@ -76,7 +68,7 @@
}
@utility el-textarea {
- @apply flex flex-row w-full p-0 justify-center items-center border-0 focus:border-0 outline-0 focus:outline-0 bg-transparent disabled:bg-transparent font-sans font-[400] placeholder:font-[400] text-form_base;
+ @apply flex flex-row w-full p-0 pl-2 py-3 justify-center items-center border-0 focus:border-0 outline-0 focus:outline-0 bg-transparent disabled:bg-transparent font-sans font-[400] placeholder:font-[400] text-form_base rounded-touch;
}
@utility el-select-centered {
diff --git a/crates/ui-tokens/assets/themes/theme_os.css b/crates/ui-tokens/assets/themes/theme_os.css
@@ -1,83 +1,119 @@
-@plugin "daisyui/theme" {
- name: "os_dark";
- default: false;
- prefersdark: true;
+:root,
+:root[data-theme="os_light"] {
+ color-scheme: light;
+ --ly0: 240 24% 96%;
+ --ly0-w: 248 17% 98%;
+ --ly0-a: 240 6% 83%;
+ --ly0-edge: 0 0% 87%;
+ --ly0-blur: 179 7% 96%;
+ --ly0-gl: 240 2% 55%;
+ --ly0-gl-a: 240 2% 60%;
+ --ly0-gl-pl: 240 2% 78%;
+ --ly0-gl-hl: 219 92% 59%;
+ --ly0-gl-hl-a: 211 100% 40%;
+ --ly0-gl-shade: 230 3% 54%;
+ --ly0-gl-label: 240 2% 53%;
+ --ly1: 0 0% 100%;
+ --ly1-a: 240 6% 83%;
+ --ly1-edge: 274 4% 90%;
+ --ly1-err: 0 0% 0%;
+ --ly1-focus: 240 15% 94%;
+ --ly1-gl: 0 0% 10%;
+ --ly1-gl-a: 0 0% 10%;
+ --ly1-gl-d: 0 0% 20%;
+ --ly1-gl-pl: 240 2% 78%;
+ --ly1-gl-hl: 211 100% 50%;
+ --ly1-gl-hl-a: 211 100% 40%;
+ --ly1-gl-shade: 240 2% 55%;
+ --ly1-gl-label: 240 2% 53%;
+ --ly2: 240 5% 90%;
+ --ly2-a: 240 5% 95%;
+ --ly2-edge: 242 2% 88%;
+ --ly2-gl: 240 2% 55%;
+ --ly2-gl-a: 240 2% 45%;
+ --ly2-gl-d: 240 2% 65%;
+ --ly2-gl-pl: 240 2% 78%;
+ --ly2-gl-hl: 211 100% 50%;
+ --ly2-gl-hl-a: 211 100% 40%;
+ --ly2-gl-shade: 240 2% 55%;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="os_light"]) {
color-scheme: dark;
- --color-ly0: hsl(0, 0%, 7%);
- --color-ly0-w: hsl(0, 0%, 7%);
- --color-ly0-a: hsl(240, 2%, 23%);
- --color-ly0-edge: hsl(274, 4%, 11%);
- --color-ly0-blur: hsl(0, 0%, 12%);
- --color-ly0-gl: hsl(230, 3%, 56%);
- --color-ly0-gl-a: hsl(230, 3%, 51%);
- --color-ly0-gl-pl: hsl(30, 1%, 99%);
- --color-ly0-gl-hl: hsl(210, 100%, 52%);
- --color-ly0-gl-hl-a: hsl(210, 91%, 21%);
- --color-ly0-gl-shade: hsl(240, 3%, 57%);
- --color-ly0-gl-label: hsl(240, 3%, 55%);
- --color-ly1: hsl(240, 4%, 11%);
- --color-ly1-a: hsl(240, 2%, 23%);
- --color-ly1-edge: hsl(240, 3%, 19%);
- --color-ly1-err: hsl(0, 0%, 0%);
- --color-ly1-focus: hsl(240, 4%, 20%);
- --color-ly1-gl: hsl(30, 100%, 100%);
- --color-ly1-gl-a: hsl(30, 1%, 90%);
- --color-ly1-gl-d: hsl(240, 1%, 82%);
- --color-ly1-gl-pl: hsl(30, 1%, 99%);
- --color-ly1-gl-hl: hsl(210, 100%, 52%);
- --color-ly1-gl-hl-a: hsl(210, 100%, 62%);
- --color-ly1-gl-shade: hsl(230, 4%, 61%);
- --color-ly1-gl-label: hsl(30, 1%, 99%);
- --color-ly2: hsl(240, 2%, 18%);
- --color-ly2-a: hsl(240, 3%, 15%);
- --color-ly2-edge: hsl(240, 2%, 23%);
- --color-ly2-gl: hsl(240, 3%, 73%);
- --color-ly2-gl-a: hsl(230, 4%, 51%);
- --color-ly2-gl-d: hsl(240, 3%, 63%);
- --color-ly2-gl-pl: hsl(240, 2%, 40%);
- --color-ly2-gl-hl: hsl(210, 100%, 52%);
- --color-ly2-gl-hl-a: hsl(210, 100%, 42%);
- --color-ly2-gl-shade: hsl(230, 4%, 61%);
+ --ly0: 0 0% 7%;
+ --ly0-w: 0 0% 7%;
+ --ly0-a: 240 2% 23%;
+ --ly0-edge: 274 4% 11%;
+ --ly0-blur: 0 0% 12%;
+ --ly0-gl: 230 3% 56%;
+ --ly0-gl-a: 230 3% 51%;
+ --ly0-gl-pl: 30 1% 99%;
+ --ly0-gl-hl: 210 100% 52%;
+ --ly0-gl-hl-a: 210 91% 21%;
+ --ly0-gl-shade: 240 3% 57%;
+ --ly0-gl-label: 240 3% 55%;
+ --ly1: 240 4% 11%;
+ --ly1-a: 240 2% 23%;
+ --ly1-edge: 240 3% 19%;
+ --ly1-err: 0 0% 0%;
+ --ly1-focus: 240 4% 20%;
+ --ly1-gl: 30 100% 100%;
+ --ly1-gl-a: 30 1% 90%;
+ --ly1-gl-d: 240 1% 82%;
+ --ly1-gl-pl: 30 1% 99%;
+ --ly1-gl-hl: 210 100% 52%;
+ --ly1-gl-hl-a: 210 100% 62%;
+ --ly1-gl-shade: 230 4% 61%;
+ --ly1-gl-label: 30 1% 99%;
+ --ly2: 240 2% 18%;
+ --ly2-a: 240 3% 15%;
+ --ly2-edge: 240 2% 23%;
+ --ly2-gl: 240 3% 73%;
+ --ly2-gl-a: 230 4% 51%;
+ --ly2-gl-d: 240 3% 63%;
+ --ly2-gl-pl: 240 2% 40%;
+ --ly2-gl-hl: 210 100% 52%;
+ --ly2-gl-hl-a: 210 100% 42%;
+ --ly2-gl-shade: 230 4% 61%;
+ }
}
-@plugin "daisyui/theme" {
- name: "os_light";
- default: false;
- prefersdark: false;
- color-scheme: light;
- --color-ly0: hsl(240, 24%, 96%);
- --color-ly0-w: hsl(248, 17%, 98%);
- --color-ly0-a: hsl(240, 6%, 83%);
- --color-ly0-edge: hsl(0, 0%, 87%);
- --color-ly0-blur: hsl(179, 7%, 96%);
- --color-ly0-gl: hsl(240, 2%, 55%);
- --color-ly0-gl-a: hsl(240, 2%, 60%);
- --color-ly0-gl-pl: hsl(240, 2%, 78%);
- --color-ly0-gl-hl: hsl(219, 92%, 59%);
- --color-ly0-gl-hl-a: hsl(211, 100%, 40%);
- --color-ly0-gl-shade: hsl(230, 3%, 54%);
- --color-ly0-gl-label: hsl(240, 2%, 53%);
- --color-ly1: hsl(0, 0%, 100%);
- --color-ly1-a: hsl(240, 6%, 83%);
- --color-ly1-edge: hsl(274, 4%, 90%);
- --color-ly1-err: hsl(0, 0%, 0%);
- --color-ly1-focus: hsl(240, 15%, 94%);
- --color-ly1-gl: hsl(0, 0%, 10%);
- --color-ly1-gl-a: hsl(0, 0%, 10%);
- --color-ly1-gl-d: hsl(0, 0%, 20%);
- --color-ly1-gl-pl: hsl(240, 2%, 78%);
- --color-ly1-gl-hl: hsl(211, 100%, 50%);
- --color-ly1-gl-hl-a: hsl(211, 100%, 40%);
- --color-ly1-gl-shade: hsl(240, 2%, 55%);
- --color-ly1-gl-label: hsl(240, 2%, 53%);
- --color-ly2: hsl(240, 5%, 90%);
- --color-ly2-a: hsl(240, 5%, 95%);
- --color-ly2-edge: hsl(242, 2%, 88%);
- --color-ly2-gl: hsl(240, 2%, 55%);
- --color-ly2-gl-a: hsl(240, 2%, 45%);
- --color-ly2-gl-d: hsl(240, 2%, 65%);
- --color-ly2-gl-pl: hsl(240, 2%, 78%);
- --color-ly2-gl-hl: hsl(211, 100%, 50%);
- --color-ly2-gl-hl-a: hsl(211, 100%, 40%);
- --color-ly2-gl-shade: hsl(240, 2%, 55%);
+:root[data-theme="os_dark"] {
+ color-scheme: dark;
+ --ly0: 0 0% 7%;
+ --ly0-w: 0 0% 7%;
+ --ly0-a: 240 2% 23%;
+ --ly0-edge: 274 4% 11%;
+ --ly0-blur: 0 0% 12%;
+ --ly0-gl: 230 3% 56%;
+ --ly0-gl-a: 230 3% 51%;
+ --ly0-gl-pl: 30 1% 99%;
+ --ly0-gl-hl: 210 100% 52%;
+ --ly0-gl-hl-a: 210 91% 21%;
+ --ly0-gl-shade: 240 3% 57%;
+ --ly0-gl-label: 240 3% 55%;
+ --ly1: 240 4% 11%;
+ --ly1-a: 240 2% 23%;
+ --ly1-edge: 240 3% 19%;
+ --ly1-err: 0 0% 0%;
+ --ly1-focus: 240 4% 20%;
+ --ly1-gl: 30 100% 100%;
+ --ly1-gl-a: 30 1% 90%;
+ --ly1-gl-d: 240 1% 82%;
+ --ly1-gl-pl: 30 1% 99%;
+ --ly1-gl-hl: 210 100% 52%;
+ --ly1-gl-hl-a: 210 100% 62%;
+ --ly1-gl-shade: 230 4% 61%;
+ --ly1-gl-label: 30 1% 99%;
+ --ly2: 240 2% 18%;
+ --ly2-a: 240 3% 15%;
+ --ly2-edge: 240 2% 23%;
+ --ly2-gl: 240 3% 73%;
+ --ly2-gl-a: 230 4% 51%;
+ --ly2-gl-d: 240 3% 63%;
+ --ly2-gl-pl: 240 2% 40%;
+ --ly2-gl-hl: 210 100% 52%;
+ --ly2-gl-hl-a: 210 100% 42%;
+ --ly2-gl-shade: 230 4% 61%;
}
