feat: some forced color adjustments

package.json

@@ -13,8 +13,10 @@
   },
   "scripts": {
     "dev": "npm-run-all --parallel vite typesafe-i18n",
+    "dev:external": "npm-run-all --parallel vite:external typesafe-i18n",
     "dev:tauri": "tauri dev",
     "vite": "vite dev",
+    "vite:external": "vite --host",
     "build": "typesafe-i18n --no-watch && vite build",
     "build:tauri": "tauri build",
     "tauri": "tauri",

src/lib/components/ActionListItem.svelte

@@ -48,11 +48,13 @@
     padding: 8px;
 
     font-family: "Noto Sans Mono", monospace;
+    border-radius: 8px;
+
+    @media not (forced-colors: active) {
       color: inherit;
 
       background: transparent;
       border: none;
-    border-radius: 8px;
 
       &:focus-visible {
         color: var(--md-sys-color-on-surface-variant);
@@ -61,6 +63,16 @@
       }
     }
 
+    @media (forced-colors: active) {
+      border: 1px solid ButtonBorder;
+      margin-block: 4px;
+
+      &:hover {
+        color: ActiveText;
+      }
+    }
+  }
+
   .title {
     display: flex;
     flex: 1;

src/lib/components/layout/ActionSelector.svelte

@@ -186,6 +186,7 @@
     height: 100%;
 
     background: rgba(0 0 0 / 60%);
+
     border: none;
   }
 
@@ -211,6 +212,11 @@
     @media (prefers-contrast: more) {
       opacity: 0.8;
     }
+
+    @media (forced-colors: active) {
+      opacity: 1;
+      color: GrayText;
+    }
   }
 
   .search-row {
@@ -235,6 +241,10 @@
 
     background: var(--md-sys-color-background);
     border-radius: 16px;
+
+    @media (forced-colors: active) {
+      border: 1px solid CanvasText;
+    }
   }
 
   input[type="search"] {
@@ -302,5 +312,9 @@
       background: var(--md-sys-color-primary);
       border-radius: 0 0 8px 8px;
     }
+
+    @media (forced-colors: active) {
+      background: Mark;
+    }
   }
 </style>

src/lib/style/form/_button.scss

@@ -19,10 +19,23 @@ button {
 
   font-family: inherit;
   font-weight: 600;
-  color: currentcolor;
 
+  @media not (forced-colors: active) {
+    color: currentcolor;
     background: transparent;
     border: none;
+
+    &.primary {
+      color: var(--md-sys-color-on-primary);
+      background: var(--md-sys-color-primary);
+    }
+  }
+
+  @media (forced-colors: active) {
+    border: 1px solid ButtonBorder;
+    color: ButtonText;
+  }
+
   border-radius: 32px;
 
   transition: all 250ms ease;
@@ -37,11 +50,11 @@ button {
     font-size: 24px;
 
     border-radius: 50%;
-  }
 
-  &.primary {
+    @media (forced-colors: active) {
-    color: var(--md-sys-color-on-primary);
+      padding: 2px;
-    background: var(--md-sys-color-primary);
+      margin: 2px;
+    }
   }
 
   &.compact {
@@ -49,6 +62,7 @@ button {
   }
 }
 
+@media not (forced-colors: active) {
   label:has(input):hover,
   .button:hover:not(:active),
   a:hover:not(:active),
@@ -67,9 +81,29 @@ button:hover:not(:active) {
       filter: none;
     }
   }
+}
+
+@media (forced-colors: active) {
+  label:has(input) .button,
+  a button {
+    &:hover {
+      color: ActiveText;
+    }
+    &.active,
+    &:active {
+      color: SelectedItemText;
+      background: SelectedItem;
+    }
+  }
+}
 
 .disabled,
 :disabled {
   pointer-events: none;
+  @media not (forced-colors: active) {
     opacity: 0.5;
   }
+  @media (forced-colors: active) {
+    color: GrayText;
+  }
+}

src/lib/style/scrollbar.scss

@@ -1,3 +1,4 @@
+@media not (forced-colors: active) {
   ::-webkit-scrollbar {
     width: 8px;
     background: transparent;
@@ -21,3 +22,4 @@
   ::-webkit-resizer {
     display: none;
   }
+}

src/lib/style/tippy.scss

@@ -22,6 +22,17 @@ $padding: 16px;
       border-#{$placement}-color: var(--md-sys-color-surface-variant);
     }
   }
+
+  @media (forced-colors: active) {
+    color: CanvasText;
+    background-color: Canvas;
+    filter: none;
+    border: 1px solid CanvasText;
+
+    > .tippy-arrow {
+      display: none;
+    }
+  }
 }
 
 .tippy-box[data-theme~="tooltip"] {

src/routes/Footer.svelte

@@ -66,10 +66,10 @@
     <SyncOverlay />
   </div>
   <ul>
-    <li>
+    <li class="hide-forced-colors">
       <input use:action={{title: $LL.profile.theme.COLOR_SCHEME()}} type="color" bind:value={$theme.color} />
     </li>
-    <li>
+    <li class="hide-forced-colors">
       {#if $theme.mode === "light"}
         <button use:action={{title: $LL.profile.theme.DARK_MODE()}} class="icon" on:click={switchTheme}>
           dark_mode
@@ -155,6 +155,10 @@
     @media (prefers-contrast: more) {
       opacity: 0.8;
     }
+
+    @media (forced-colors: active) {
+      opacity: unset;
+    }
   }
 
   ul {
@@ -195,4 +199,10 @@
   .icon {
     font-size: 16px;
   }
+
+  @media (forced-colors: active) {
+    .hide-forced-colors {
+      display: none;
+    }
+  }
 </style>