feat: react to user contrast preferences

src/lib/components/layout/ActionSelector.svelte

@@ -207,6 +207,10 @@
 
       background: var(--md-sys-color-background);
     }
+
+    @media (prefers-contrast: more) {
+      opacity: 0.8;
+    }
   }
 
   .search-row {

src/lib/components/layout/KeyText.svelte

@@ -44,8 +44,8 @@
     y={pos[1] + middle[1]}
     font-size={fontSizeMultiplier * (hasIcon ? iconFontSize : fontSize)}
     font-family={hasIcon ? "Material Symbols Rounded" : undefined}
-    opacity={isActive ? 1 : inactiveOpacity}
-    style:scale={isActive ? 1 : inactiveScale}
+    opacity={isActive ? 1 : `var(--inactive-opacity, ${inactiveOpacity})`}
+    style:scale={isActive ? 1 : `var(--inactive-scale, ${inactiveScale})`}
     style:translate={isActive
       ? "0 0 0"
       : `${direction[0].toPrecision(2)}px ${direction[1].toPrecision(2)}px 0`}
@@ -75,6 +75,11 @@
       opacity #{$transition} ease,
       translate #{$transition} ease,
       scale #{$transition} ease;
+
+    @media (prefers-contrast: more) {
+      --inactive-opacity: 0.8;
+      --inactive-scale: 0.7;
+    }
   }
 
   text:focus-within {

src/routes/Footer.svelte

@@ -151,6 +151,10 @@
     padding-block-start: 0;
 
     opacity: 0.4;
+
+    @media (prefers-contrast: more) {
+      opacity: 0.8;
+    }
   }
 
   ul {

src/routes/config/chords/+page.svelte

@@ -153,16 +153,25 @@
   }
 
   textarea {
-    transition: border-color 250ms ease;
+    transition: outline-color 250ms ease;
     background: none;
     color: inherit;
-    border: 1px dashed var(--md-sys-color-surface-variant);
+    outline: 1px dashed var(--md-sys-color-surface-variant);
+    margin: 2px;
+    border: none;
     padding: 8px;
     border-radius: 4px;
 
+    @media (prefers-contrast: more) {
+      outline-color: var(--md-sys-color-outline);
+
+      &:focus {
+        outline-width: 2px;
+      }
+    }
+
     &:focus {
-      outline: none;
-      border-color: var(--md-sys-color-primary);
+      outline-color: var(--md-sys-color-primary);
     }
   }
 
@@ -185,13 +194,23 @@
 
     transition: all 250ms ease;
 
+    @media (prefers-contrast: more) {
+      border-color: var(--md-sys-color-outline);
+      border-style: dashed;
+    }
+
     &::placeholder {
       color: var(--md-sys-color-on-surface-variant);
       opacity: 0.2;
+
+      @media (prefers-contrast: more) {
+        opacity: 0.8;
+      }
     }
 
     &:focus {
       border-color: var(--md-sys-color-primary);
+      border-style: solid;
       outline: none;
     }
   }

src/routes/config/chords/ChordActionEdit.svelte

@@ -101,6 +101,10 @@
 <style lang="scss">
   span {
     opacity: 0.5;
+
+    @media (prefers-contrast: more) {
+      opacity: 0.8;
+    }
   }
 
   sup {

src/routes/config/layout/+page.svelte

@@ -38,8 +38,8 @@
 
   setContext<VisualLayoutConfig>("visual-layout-config", {
     scale: 50,
-    inactiveScale: 0.7,
-    inactiveOpacity: 0.8,
+    inactiveScale: 0.5,
+    inactiveOpacity: 0.4,
     strokeWidth: 1,
     margin: 5,
     fontSize: 9,