Просмотр исходного кода

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 недель назад
Родитель
Сommit
4660fbb0ab

Разница между файлами не показана из-за своего большого размера
+ 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
 // Ensure active nav-pill has a background color in dark mode
 $nav-pills-link-active-bg: rgba(var(--tblr-secondary-rgb), 0.15);
 $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
 // Brand colors
 $rich-black: #001423;
 $rich-black: #001423;
 $rich-black-light: #081B2A;
 $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-bg: inherit;
     --tblr-table-hover-color: 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>
 // Do not apply padding to <code> elements inside a <pre>

Некоторые файлы не были показаны из-за большого количества измененных файлов