commit 8b421f3f4d90342188caba15a5af27b4d7e59f4e parent 2ceb8a3b05f34d757b33574369401dc2fe840370 Author: triesap <triesap@radroots.dev> Date: Sat, 24 Jan 2026 19:17:38 +0000 ui: fix theme colors and setup button - Replace <alpha-value> placeholders with real alpha - Restore bg-ly1 utility support with /xx opacity - Align setup Continue button classes with PWA - Add button-layout utilities for reuse Diffstat:
| M | app/src/app.rs | | | 6 | +++--- |
| M | app/stylesheets/apps-ui.css | | | 8 | ++++++++ |
| M | crates/ui-tokens/assets/themes/styles.css | | | 70 | +++++++++++++++++++++++++++++++++++----------------------------------- |
3 files changed, 46 insertions(+), 38 deletions(-)
diff --git a/app/src/app.rs b/app/src/app.rs @@ -328,11 +328,11 @@ fn SetupPage() -> impl IntoView { <div class="z-10 absolute bottom-10 left-0 flex flex-col w-full justify-center items-center"> <button type="button" - class="button-submit rounded-touch px-6 py-3" + class="group flex flex-row h-touch_guide w-lo_ios0 ios1:w-lo_ios1 justify-center items-center bg-ly1 rounded-touch ly1-active-surface ly1-active-raise-less ly1-active-ring-less el-re" on:click=advance_step > - <span class="font-sans font-[600] text-ly2-gl"> - "Get started" + <span class="font-sans font-[600] tracking-wide text-ly1-gl-shade group-active:text-ly1-gl/40 el-re"> + "Continue" </span> </button> </div> diff --git a/app/stylesheets/apps-ui.css b/app/stylesheets/apps-ui.css @@ -32,6 +32,14 @@ @apply button-base h-line_button min-w-[82px] w-fit rounded-2xl active:bg-ly1-a bg-ly1 text-ly2-gl; } +@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; +} + +@utility button-layout-label { + @apply font-sans font-[600] tracking-wide text-ly1-gl-shade group-active:text-ly1-gl/40 el-re; +} + @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; } diff --git a/crates/ui-tokens/assets/themes/styles.css b/crates/ui-tokens/assets/themes/styles.css @@ -1,37 +1,37 @@ @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>); + --color-ly0: hsl(var(--ly0) / 1); + --color-ly0-w: hsl(var(--ly0-w) / 1); + --color-ly0-a: hsl(var(--ly0-a) / 1); + --color-ly0-edge: hsl(var(--ly0-edge) / 1); + --color-ly0-blur: hsl(var(--ly0-blur) / 1); + --color-ly0-gl: hsl(var(--ly0-gl) / 1); + --color-ly0-gl-a: hsl(var(--ly0-gl-a) / 1); + --color-ly0-gl-pl: hsl(var(--ly0-gl-pl) / 1); + --color-ly0-gl-hl: hsl(var(--ly0-gl-hl) / 1); + --color-ly0-gl-hl-a: hsl(var(--ly0-gl-hl-a) / 1); + --color-ly0-gl-shade: hsl(var(--ly0-gl-shade) / 1); + --color-ly0-gl-label: hsl(var(--ly0-gl-label) / 1); + --color-ly1: hsl(var(--ly1) / 1); + --color-ly1-a: hsl(var(--ly1-a) / 1); + --color-ly1-edge: hsl(var(--ly1-edge) / 1); + --color-ly1-err: hsl(var(--ly1-err) / 1); + --color-ly1-focus: hsl(var(--ly1-focus) / 1); + --color-ly1-gl: hsl(var(--ly1-gl) / 1); + --color-ly1-gl-a: hsl(var(--ly1-gl-a) / 1); + --color-ly1-gl-d: hsl(var(--ly1-gl-d) / 1); + --color-ly1-gl-pl: hsl(var(--ly1-gl-pl) / 1); + --color-ly1-gl-hl: hsl(var(--ly1-gl-hl) / 1); + --color-ly1-gl-hl-a: hsl(var(--ly1-gl-hl-a) / 1); + --color-ly1-gl-shade: hsl(var(--ly1-gl-shade) / 1); + --color-ly1-gl-label: hsl(var(--ly1-gl-label) / 1); + --color-ly2: hsl(var(--ly2) / 1); + --color-ly2-a: hsl(var(--ly2-a) / 1); + --color-ly2-edge: hsl(var(--ly2-edge) / 1); + --color-ly2-gl: hsl(var(--ly2-gl) / 1); + --color-ly2-gl-a: hsl(var(--ly2-gl-a) / 1); + --color-ly2-gl-d: hsl(var(--ly2-gl-d) / 1); + --color-ly2-gl-pl: hsl(var(--ly2-gl-pl) / 1); + --color-ly2-gl-hl: hsl(var(--ly2-gl-hl) / 1); + --color-ly2-gl-hl-a: hsl(var(--ly2-gl-hl-a) / 1); + --color-ly2-gl-shade: hsl(var(--ly2-gl-shade) / 1); }