app

commit d5aeab8922a05125620f81e80f331439a676ff4a
parent e80ad81a8594f9227ed5931db58358fa68d96cc8
Author: triesap <tyson@radroots.org>
Date:   Wed, 28 Jan 2026 14:55:46 +0000

ui: Refresh press and input tokens

- Add press shadow and opacity tokens
- Use press utility for key choice selection
- Introduce selected press utility for active states
- Update input focus styling for native feel

Diffstat:
M
app/src/app.rs
 | 
4
++--
M
app/stylesheets/apps-ui.css
 | 
14
++++++++++++--
M
crates/ui-tokens/assets/tokens.css
 | 
2
++

3 files changed, 16 insertions(+), 4 deletions(-)
diff --git a/app/src/app.rs b/app/src/app.rs
@@ -366,7 +366,7 @@ fn SetupPage() -> impl IntoView {
                                         if setup_key_choice.get()
                                             == Some(RadrootsAppSetupKeyChoice::Generate)
                                         {
-                                            "flex flex-col h-bold_button w-lo_ios0 ios1:w-lo_ios1 justify-center items-center rounded-touch ly1-apply-active ly1-raise-apply ly1-ring-apply el-re"
+                                            "flex flex-col h-bold_button w-lo_ios0 ios1:w-lo_ios1 justify-center items-center rounded-touch ly1-selected-press el-re"
                                         } else {
                                             "flex flex-col h-bold_button w-lo_ios0 ios1:w-lo_ios1 justify-center items-center rounded-touch bg-ly1 el-re"
                                         }
@@ -388,7 +388,7 @@ fn SetupPage() -> impl IntoView {
                                         if setup_key_choice.get()
                                             == Some(RadrootsAppSetupKeyChoice::AddExisting)
                                         {
-                                            "flex flex-col h-bold_button w-lo_ios0 ios1:w-lo_ios1 justify-center items-center rounded-touch ly1-apply-active ly1-raise-apply ly1-ring-apply el-re"
+                                            "flex flex-col h-bold_button w-lo_ios0 ios1:w-lo_ios1 justify-center items-center rounded-touch ly1-selected-press el-re"
                                         } else {
                                             "flex flex-col h-bold_button w-lo_ios0 ios1:w-lo_ios1 justify-center items-center rounded-touch bg-ly1 el-re"
                                         }
diff --git a/app/stylesheets/apps-ui.css b/app/stylesheets/apps-ui.css
@@ -33,7 +33,7 @@
 }
 
 @utility button-layout {
-    @apply flex flex-row h-touch_guide w-lo_ios0 ios1:w-lo_ios1 justify-center items-center bg-ly1 rounded-touch el-re ly1-active-surface ly1-active-raise-less ly1-active-ring-less disabled:opacity-60;
+    @apply flex flex-row h-touch_guide w-lo_ios0 ios1:w-lo_ios1 justify-center items-center bg-ly1 rounded-touch el-re ly1-active-press disabled:opacity-60;
 }
 
 @utility button-layout-label {
@@ -41,7 +41,8 @@
 }
 
 @utility input-base {
-    @apply flex w-full items-center rounded-touch border border-ly1-edge/60 bg-ly1 px-3 py-2 font-sans text-form_base text-ly1-gl placeholder:text-ly1-gl-label/70 transition-all focus:outline-none focus:ring-2 focus:ring-ly1-edge/60 focus:border-ly1-gl-hl disabled:opacity-60;
+    @apply flex w-full items-center rounded-touch border border-ly1-edge/60 bg-ly1 px-3 py-2 font-sans text-form_base text-ly1-gl placeholder:text-ly1-gl-label/70 transition-colors focus:outline-none focus:bg-ly1-focus focus:border-ly1-edge/80 disabled:opacity-60;
+    @apply focus:shadow-[inset_0_0_0_1px_hsl(var(--ly1-edge)/0.6)];
 }
 
 @utility input-search {
@@ -111,6 +112,11 @@
     @apply bg-ly1-focus;
 }
 
+@utility ly1-selected-press {
+    @apply bg-ly1-focus;
+    box-shadow: var(--shadow-press);
+}
+
 @utility ly1-ring-apply {
     @apply ring-[0.3rem] ring-ly1-edge;
 }
@@ -131,6 +137,10 @@
     @apply active:bg-ly1-focus group-active:bg-ly1-focus;
 }
 
+@utility ly1-active-press {
+    @apply active:bg-ly1-focus group-active:bg-ly1-focus active:opacity-[var(--opacity-press)] group-active:opacity-[var(--opacity-press)] active:shadow-[var(--shadow-press)] group-active:shadow-[var(--shadow-press)];
+}
+
 @utility ly1-active-raise {
     @apply active:scale-[102%] group-active:scale-[102%];
 }
diff --git a/crates/ui-tokens/assets/tokens.css b/crates/ui-tokens/assets/tokens.css
@@ -43,6 +43,8 @@
   --shadow-2: 0 8px 20px rgba(0, 0, 0, 0.12);
   --shadow-popover: 0 12px 30px rgba(0, 0, 0, 0.18);
   --shadow-sheet: 0 -8px 30px rgba(0, 0, 0, 0.18);
+  --shadow-press: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --opacity-press: 0.92;
 
   --dur-1: 120ms;
   --dur-2: 180ms;