commit d1138a402022193a2381eb5e08701032f4104592
parent 98bf329f53dd513ebaacb0befdbd2e95cd618428
Author: triesap <triesap@radroots.dev>
Date: Thu, 22 Jan 2026 16:08:16 +0000
app: import radroots theme css assets
- copy @radroots/themes css into ui-tokens assets
- wire theme css imports into app/app.css
- preserve tailwind v4 @source directives
- keep token and list imports ordered for cascade
Diffstat:
5 files changed, 285 insertions(+), 0 deletions(-)
diff --git a/app/app.css b/app/app.css
@@ -1,5 +1,9 @@
@import "tailwindcss";
@import "../crates/ui-tokens/assets/tokens.css";
+@import "../crates/ui-tokens/assets/themes/styles.css";
+@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-components/assets/list.css";
@source "./index.html";
diff --git a/crates/ui-tokens/assets/themes/layout.css b/crates/ui-tokens/assets/themes/layout.css
@@ -0,0 +1,145 @@
+@import "tailwindcss";
+
+@theme {
+ --height-bold_button: 4.25rem;
+ --height-entry_line: 48px;
+ --height-ios0: 340px;
+ --height-ios1: 345px;
+ --height-line: 46px;
+ --height-line_button: 3.25rem;
+ --height-lo_bottom_button_ios0: 90px;
+ --height-lo_bottom_button_ios1: 112px;
+ --height-lo_view_main_ios0: 22rem;
+ --height-lo_view_main_ios1: 28rem;
+ --height-nav_page_header_ios0: 62px;
+ --height-nav_page_header_ios1: 62px;
+ --height-nav_page_toolbar_ios0: 72px;
+ --height-nav_page_toolbar_ios1: 120px;
+ --height-nav_tabs_ios0: 80px;
+ --height-nav_tabs_ios1: 120px;
+ --height-touch_guide: 3.4rem;
+ --max-height-bold_button: 4.25rem;
+ --max-height-entry_line: 48px;
+ --max-height-ios0: 340px;
+ --max-height-ios1: 345px;
+ --max-height-line: 46px;
+ --max-height-line_button: 3.25rem;
+ --max-height-lo_bottom_button_ios0: 90px;
+ --max-height-lo_bottom_button_ios1: 112px;
+ --max-height-lo_view_main_ios0: 22rem;
+ --max-height-lo_view_main_ios1: 28rem;
+ --max-height-nav_page_header_ios0: 62px;
+ --max-height-nav_page_header_ios1: 62px;
+ --max-height-nav_page_toolbar_ios0: 72px;
+ --max-height-nav_page_toolbar_ios1: 120px;
+ --max-height-nav_tabs_ios0: 80px;
+ --max-height-nav_tabs_ios1: 120px;
+ --max-height-touch_guide: 3.4rem;
+ --max-width-ios0: 340px;
+ --max-width-ios1: 345px;
+ --max-width-lo_ios0: 340px;
+ --max-width-lo_ios1: 345px;
+ --max-width-lo_line_entry_ios0: 349px;
+ --max-width-lo_line_entry_ios1: 378px;
+ --max-width-lo_textdesc_ios0: 312px;
+ --max-width-lo_textdesc_ios1: 312px;
+ --max-width-trellis_display: 286px;
+ --max-width-trellis_value: 180px;
+ --min-height-bold_button: 4.25rem;
+ --min-height-entry_line: 48px;
+ --min-height-ios0: 340px;
+ --min-height-ios1: 345px;
+ --min-height-line: 46px;
+ --min-height-line_button: 3.25rem;
+ --min-height-lo_bottom_button_ios0: 90px;
+ --min-height-lo_bottom_button_ios1: 112px;
+ --min-height-lo_view_main_ios0: 22rem;
+ --min-height-lo_view_main_ios1: 28rem;
+ --min-height-nav_page_header_ios0: 62px;
+ --min-height-nav_page_header_ios1: 62px;
+ --min-height-nav_page_toolbar_ios0: 72px;
+ --min-height-nav_page_toolbar_ios1: 120px;
+ --min-height-nav_tabs_ios0: 80px;
+ --min-height-nav_tabs_ios1: 120px;
+ --min-height-touch_guide: 3.4rem;
+ --min-width-ios0: 340px;
+ --min-width-ios1: 345px;
+ --min-width-lo_ios0: 340px;
+ --min-width-lo_ios1: 345px;
+ --min-width-lo_line_entry_ios0: 349px;
+ --min-width-lo_line_entry_ios1: 378px;
+ --min-width-lo_textdesc_ios0: 312px;
+ --min-width-lo_textdesc_ios1: 312px;
+ --min-width-trellis_display: 286px;
+ --min-width-trellis_value: 180px;
+ --padding-dim_ios0: 340px;
+ --padding-dim_ios1: 345px;
+ --padding-h_bold_button: 4.25rem;
+ --padding-h_entry_line: 48px;
+ --padding-h_ios0: 340px;
+ --padding-h_ios1: 345px;
+ --padding-h_line: 46px;
+ --padding-h_line_button: 3.25rem;
+ --padding-h_lo_bottom_button_ios0: 90px;
+ --padding-h_lo_bottom_button_ios1: 112px;
+ --padding-h_lo_view_main_ios0: 22rem;
+ --padding-h_lo_view_main_ios1: 28rem;
+ --padding-h_nav_page_header_ios0: 62px;
+ --padding-h_nav_page_header_ios1: 62px;
+ --padding-h_nav_page_toolbar_ios0: 72px;
+ --padding-h_nav_page_toolbar_ios1: 120px;
+ --padding-h_nav_tabs_ios0: 80px;
+ --padding-h_nav_tabs_ios1: 120px;
+ --padding-h_touch_guide: 3.4rem;
+ --padding-w_ios0: 340px;
+ --padding-w_ios1: 345px;
+ --padding-w_lo_ios0: 340px;
+ --padding-w_lo_ios1: 345px;
+ --padding-w_lo_line_entry_ios0: 349px;
+ --padding-w_lo_line_entry_ios1: 378px;
+ --padding-w_lo_textdesc_ios0: 312px;
+ --padding-w_lo_textdesc_ios1: 312px;
+ --padding-w_trellis_display: 286px;
+ --padding-w_trellis_value: 180px;
+ --spacing-dim_ios0: 340px;
+ --spacing-dim_ios1: 345px;
+ --spacing-edge: 2px;
+ --spacing-line: 1px;
+ --translate-h_bold_button: 4.25rem;
+ --translate-h_entry_line: 48px;
+ --translate-h_ios0: 340px;
+ --translate-h_ios1: 345px;
+ --translate-h_line: 46px;
+ --translate-h_line_button: 3.25rem;
+ --translate-h_lo_bottom_button_ios0: 90px;
+ --translate-h_lo_bottom_button_ios1: 112px;
+ --translate-h_lo_view_main_ios0: 22rem;
+ --translate-h_lo_view_main_ios1: 28rem;
+ --translate-h_nav_page_header_ios0: 62px;
+ --translate-h_nav_page_header_ios1: 62px;
+ --translate-h_nav_page_toolbar_ios0: 72px;
+ --translate-h_nav_page_toolbar_ios1: 120px;
+ --translate-h_nav_tabs_ios0: 80px;
+ --translate-h_nav_tabs_ios1: 120px;
+ --translate-h_touch_guide: 3.4rem;
+ --translate-w_ios0: 340px;
+ --translate-w_ios1: 345px;
+ --translate-w_lo_ios0: 340px;
+ --translate-w_lo_ios1: 345px;
+ --translate-w_lo_line_entry_ios0: 349px;
+ --translate-w_lo_line_entry_ios1: 378px;
+ --translate-w_lo_textdesc_ios0: 312px;
+ --translate-w_lo_textdesc_ios1: 312px;
+ --translate-w_trellis_display: 286px;
+ --translate-w_trellis_value: 180px;
+ --width-ios0: 340px;
+ --width-ios1: 345px;
+ --width-lo_ios0: 340px;
+ --width-lo_ios1: 345px;
+ --width-lo_line_entry_ios0: 349px;
+ --width-lo_line_entry_ios1: 378px;
+ --width-lo_textdesc_ios0: 312px;
+ --width-lo_textdesc_ios1: 312px;
+ --width-trellis_display: 286px;
+ --width-trellis_value: 180px;
+}
diff --git a/crates/ui-tokens/assets/themes/screens.css b/crates/ui-tokens/assets/themes/screens.css
@@ -0,0 +1,13 @@
+@import "tailwindcss";
+
+@custom-variant ios1 {
+ @media (orientation: portrait) and (min-height: 750px) {
+ @slot;
+ }
+}
+
+@custom-variant ios0 {
+ @media (orientation: portrait) and (max-height: 680px) {
+ @slot;
+ }
+}
+\ No newline at end of file
diff --git a/crates/ui-tokens/assets/themes/styles.css b/crates/ui-tokens/assets/themes/styles.css
@@ -0,0 +1,39 @@
+@import "tailwindcss";
+
+@theme {
+ --color-ly0: hsl(var(--ly0) / <alpha-value>);
+ --color-ly0-w: hsl(var(--ly0-w) / <alpha-value>);
+ --color-ly0-a: hsl(var(--ly0-a) / <alpha-value>);
+ --color-ly0-edge: hsl(var(--ly0-edge) / <alpha-value>);
+ --color-ly0-blur: hsl(var(--ly0-blur) / <alpha-value>);
+ --color-ly0-gl: hsl(var(--ly0-gl) / <alpha-value>);
+ --color-ly0-gl-a: hsl(var(--ly0-gl-a) / <alpha-value>);
+ --color-ly0-gl-pl: hsl(var(--ly0-gl-pl) / <alpha-value>);
+ --color-ly0-gl-hl: hsl(var(--ly0-gl-hl) / <alpha-value>);
+ --color-ly0-gl-hl-a: hsl(var(--ly0-gl-hl-a) / <alpha-value>);
+ --color-ly0-gl-shade: hsl(var(--ly0-gl-shade) / <alpha-value>);
+ --color-ly0-gl-label: hsl(var(--ly0-gl-label) / <alpha-value>);
+ --color-ly1: hsl(var(--ly1) / <alpha-value>);
+ --color-ly1-a: hsl(var(--ly1-a) / <alpha-value>);
+ --color-ly1-edge: hsl(var(--ly1-edge) / <alpha-value>);
+ --color-ly1-err: hsl(var(--ly1-err) / <alpha-value>);
+ --color-ly1-focus: hsl(var(--ly1-focus) / <alpha-value>);
+ --color-ly1-gl: hsl(var(--ly1-gl) / <alpha-value>);
+ --color-ly1-gl-a: hsl(var(--ly1-gl-a) / <alpha-value>);
+ --color-ly1-gl-d: hsl(var(--ly1-gl-d) / <alpha-value>);
+ --color-ly1-gl-pl: hsl(var(--ly1-gl-pl) / <alpha-value>);
+ --color-ly1-gl-hl: hsl(var(--ly1-gl-hl) / <alpha-value>);
+ --color-ly1-gl-hl-a: hsl(var(--ly1-gl-hl-a) / <alpha-value>);
+ --color-ly1-gl-shade: hsl(var(--ly1-gl-shade) / <alpha-value>);
+ --color-ly1-gl-label: hsl(var(--ly1-gl-label) / <alpha-value>);
+ --color-ly2: hsl(var(--ly2) / <alpha-value>);
+ --color-ly2-a: hsl(var(--ly2-a) / <alpha-value>);
+ --color-ly2-edge: hsl(var(--ly2-edge) / <alpha-value>);
+ --color-ly2-gl: hsl(var(--ly2-gl) / <alpha-value>);
+ --color-ly2-gl-a: hsl(var(--ly2-gl-a) / <alpha-value>);
+ --color-ly2-gl-d: hsl(var(--ly2-gl-d) / <alpha-value>);
+ --color-ly2-gl-pl: hsl(var(--ly2-gl-pl) / <alpha-value>);
+ --color-ly2-gl-hl: hsl(var(--ly2-gl-hl) / <alpha-value>);
+ --color-ly2-gl-hl-a: hsl(var(--ly2-gl-hl-a) / <alpha-value>);
+ --color-ly2-gl-shade: hsl(var(--ly2-gl-shade) / <alpha-value>);
+}
diff --git a/crates/ui-tokens/assets/themes/theme_os.css b/crates/ui-tokens/assets/themes/theme_os.css
@@ -0,0 +1,83 @@
+@plugin "daisyui/theme" {
+ name: "os_dark";
+ default: false;
+ prefersdark: true;
+ 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%);
+}
+
+@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%);
+}
