From 586fa0e8e04d59f3f08059f728bfe3d9790a7bc2 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Fri, 24 Apr 2026 20:00:52 +0100
Subject: [PATCH] feat: increase text and interactive elems contrast

---
 app/assets/main.css            | 22 +++++++++++++---------
 app/components/AppHeader.vue   |  2 +-
 app/components/Button/Base.vue |  4 ++--
 app/components/Input/Base.vue  |  2 +-
 app/components/Select/Base.vue |  2 +-
 lunaria/styles.ts              |  1 +
 uno.theme.ts                   |  1 +
 7 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 75e80729a7..d6b24eedbd 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -15,13 +15,14 @@
 
   /* text colors */
   --fg: oklch(0.982 0 0);
-  --fg-muted: oklch(0.749 0 0);
-  --fg-subtle: oklch(0.673 0 0);
+  --fg-muted: oklch(0.849 0 0);
+  --fg-subtle: oklch(0.773 0 0);
 
   /* border, separator colors */
   --border: oklch(0.269 0 0);
   --border-subtle: oklch(0.239 0 0);
   --border-hover: oklch(0.371 0 0);
+  --border-elevated: oklch(0.369 0 0);
 
   /* accent color, set by user from settings */
   --accent: var(--accent-color, oklch(0.787 0.128 230.318));
@@ -87,13 +88,14 @@
   --bg-muted: var(--bg-muted-color, oklch(0.955 0.001 286.76));
   --bg-elevated: var(--bg-elevated-color, oklch(0.94 0.002 287.29));
 
-  --fg: oklch(0.146 0 0);
-  --fg-muted: oklch(0.398 0 0);
-  --fg-subtle: oklch(0.48 0 0);
+  --fg: oklch(0.046 0 0);
+  --fg-muted: oklch(0.198 0 0);
+  --fg-subtle: oklch(0.28 0 0);
 
   --border: oklch(0.8514 0 0);
   --border-subtle: oklch(0.922 0 0);
   --border-hover: oklch(0.715 0 0);
+  --border-elevated: oklch(0.75 0 0);
 
   --accent: var(--accent-color, oklch(0.53 0.16 247.27));
   --accent-muted: var(--accent-color, oklch(0.205 0 0));
@@ -151,25 +153,27 @@
   :root[data-theme='dark'] {
     /* text colors */
     --fg: oklch(1 0 0);
-    --fg-muted: oklch(0.769 0 0);
-    --fg-subtle: oklch(0.693 0 0);
+    --fg-muted: oklch(0.869 0 0);
+    --fg-subtle: oklch(0.793 0 0);
 
     /* border, separator colors */
     --border: oklch(0.769 0 0);
     --border-subtle: oklch(0.739 0 0);
     --border-hover: oklch(0.771 0 0);
+    --border-elevated: oklch(0.869 0 0);
   }
 
   :root[data-theme='light'] {
     /* text colors */
     --fg: oklch(0 0 0);
-    --fg-muted: oklch(0.329 0 0);
-    --fg-subtle: oklch(0.4 0 0);
+    --fg-muted: oklch(0.229 0 0);
+    --fg-subtle: oklch(0.3 0 0);
 
     /* border, separator colors */
     --border: oklch(0.3514 0 0);
     --border-subtle: oklch(0.422 0 0);
     --border-hover: oklch(0.315 0 0);
+    --border-elevated: oklch(0.25 0 0);
   }
 }
 
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index e90464ca5b..0b75ba2ed4 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -258,7 +258,7 @@ useShortcuts({
       <ButtonBase
         type="button"
         variant="secondary"
-        class="hidden lg:inline-flex shrink-0 gap-2 px-2.5 me-3"
+        class="hidden lg:inline-flex shrink-0 gap-2 px-2.5! py-1.25! me-3"
         :aria-label="$t('shortcuts.command_palette')"
         :title="$t('shortcuts.command_palette_description', { ctrlKey: $t('shortcuts.ctrl_key') })"
         @click="openCommandPalette"
diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 1a142b193f..ae93aab7fc 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -44,13 +44,13 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group gap-x-1 items-center justify-center font-mono border border-border-elevated/60 rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'inline-flex': !block,
       'flex': block,
       'text-sm px-4 py-2': size === 'md',
       'text-xs px-2 py-0.5': size === 'sm',
-      'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
+      'bg-transparent text-fg hover:enabled:(bg-bg-elevated) focus-visible:enabled:(bg-bg-elevated) aria-pressed:(bg-bg-muted border-border-hover hover:enabled:(bg-bg-muted text-fg/50))':
         variant === 'secondary',
       'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant === 'primary',
diff --git a/app/components/Input/Base.vue b/app/components/Input/Base.vue
index 407abdad70..f577a962ae 100644
--- a/app/components/Input/Base.vue
+++ b/app/components/Input/Base.vue
@@ -56,7 +56,7 @@ const inputAttrs = computed(() => ({
     v-bind="inputAttrs"
     @focus="emit('focus', $event)"
     @blur="emit('blur', $event)"
-    class="appearance-none bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
+    class="appearance-none bg-bg-subtle border border-border-elevated font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
     :class="{
       'text-xs leading-[1.2] px-2 py-2 rounded-md': size === 'sm',
       'text-sm leading-none px-3 py-2.5 rounded-lg': size === 'md',
diff --git a/app/components/Select/Base.vue b/app/components/Select/Base.vue
index ca3e82abf3..bfa7d0cf0e 100644
--- a/app/components/Select/Base.vue
+++ b/app/components/Select/Base.vue
@@ -12,7 +12,7 @@ const props = withDefaults(defineProps<SelectBaseProps>(), {
 <template>
   <select
     v-model="model"
-    class="bg-bg border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
+    class="bg-bg border border-border-elevated font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
     :class="[SELECT_SIZES[size]]"
     :disabled="
       /** Catching Vue render-bug of invalid `disabled=false` attribute in the final HTML */
diff --git a/lunaria/styles.ts b/lunaria/styles.ts
index b48936592d..36a4cd7215 100644
--- a/lunaria/styles.ts
+++ b/lunaria/styles.ts
@@ -318,6 +318,7 @@ export const CustomStyles = html`
       --border: oklch(26.9% 0 0);
       --border-subtle: oklch(23.9% 0 0);
       --border-hover: oklch(37.1% 0 0);
+      --border-elevated: oklch(31.9% 0 0);
 
       --ln-color-table-background: var(--bg-subtle);
       --ln-color-table-border: var(--border);
diff --git a/uno.theme.ts b/uno.theme.ts
index f0325dc810..6c910a5be9 100644
--- a/uno.theme.ts
+++ b/uno.theme.ts
@@ -29,6 +29,7 @@ export const theme = {
       DEFAULT: 'var(--border)',
       subtle: 'var(--border-subtle)',
       hover: 'var(--border-hover)',
+      elevated: 'var(--border-elevated)',
     },
     accent: {
       DEFAULT: 'var(--accent)',