Forráskód Böngészése

fix(ui): Improve dark mode form control contrast

Fixes form check input border contrast in dark mode by using solid grey
instead of translucent border. Updates checked checkbox glyph color to
rich black for better visibility against teal primary background.

Fixes #22879
Martin Hauser 2 hete
szülő
commit
4660fbb0ab

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 0 - 0
netbox/project-static/dist/netbox.css


+ 5 - 0
netbox/project-static/styles/_variables.scss

@@ -18,6 +18,11 @@ $table-cell-padding-y: 0.5rem;
 // Ensure active nav-pill has a background color in dark mode
 $nav-pills-link-active-bg: rgba(var(--tblr-secondary-rgb), 0.15);
 
+// Tabler borders unchecked form controls with the translucent token, which drops to
+// 1.1:1 against the dark-mode control fill. Restate it as a solid grey in dark mode.
+$form-check-input-border: var(--tblr-border-width) var(--tblr-border-style)
+  light-dark(var(--tblr-border-color-translucent), var(--tblr-gray-600));
+
 // Brand colors
 $rich-black: #001423;
 $rich-black-light: #081B2A;

+ 9 - 0
netbox/project-static/styles/overrides/_tabler.scss

@@ -160,6 +160,15 @@ html[data-bs-theme='dark'] {
     --tblr-table-hover-bg: inherit;
     --tblr-table-hover-color: inherit;
   }
+
+  // Tabler bakes a white glyph into the checked data URI, which reads at 1.4:1 against
+  // the teal dark-mode primary. A data URI is an isolated document, so the color cannot
+  // come from a custom property and has to be baked in at build time.
+  .form-check-input:checked[type='checkbox'] {
+    --tblr-form-check-bg-image: #{escape-svg(
+        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$rich-black}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>")
+      )};
+  }
 }
 
 // Do not apply padding to <code> elements inside a <pre>

Nem az összes módosított fájl került megjelenítésre, mert túl sok fájl változott