UI Fixes for Dark Theme (#9949)

NuGet · Jun 21, 2024 · 14eeaf7 · 14eeaf7
1 parent 8559214
commit 14eeaf7
Show file tree

Hide file tree

Showing 42 changed files with 349 additions and 232 deletions.
diff --git a/src/Bootstrap/dist/css/bootstrap-theme.css b/src/Bootstrap/dist/css/bootstrap-theme.css
diff --git a/src/Bootstrap/dist/css/bootstrap.css b/src/Bootstrap/dist/css/bootstrap.css
diff --git a/src/Bootstrap/less/alerts.less b/src/Bootstrap/less/alerts.less
@@ -76,7 +76,8 @@
 .alert-brand-a {
   a {
     color: var(--brandForegroundLinkRest);
-
+    text-decoration: underline;
+
     &:hover,
     &:focus {
       color: var(--brandForegroundLinkHover);

diff --git a/src/Bootstrap/less/buttons.less b/src/Bootstrap/less/buttons.less
@@ -157,7 +157,7 @@
     outline: none !important; // removes focus from .tab-focus()
   }
 }
-.brand-button-transparent {
+.btn-brand-transparent {
   color: var(--neutralForeground2Rest);
   background-color: var(--transparentBackgroundRest);
   border-radius: var(--Medium, 4px);

diff --git a/src/Bootstrap/less/code.less b/src/Bootstrap/less/code.less
@@ -15,17 +15,17 @@ samp {
 code {
   padding: 2px 4px;
   font-size: 90%;
-  color: @code-color;
-  background-color: @code-bg;
+  color: var(--statusDangerForeground1Rest);
+  background-color: var(--statusDangerBackground1Rest);
   border-radius: @border-radius-base;
 }
 
 // User input typically entered via keyboard
 kbd {
   padding: 2px 4px;
   font-size: 90%;
-  color: @kbd-color;
-  background-color: @kbd-bg;
+  color: var(--neutralForeground1Rest);
+  background-color: var(--neutralBackground1Rest);
   border-radius: @border-radius-small;
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
 
@@ -44,12 +44,12 @@ pre {
   margin: 0 0 (@line-height-computed / 2);
   font-size: (@font-size-base - 1); // 14px to 13px
   line-height: @line-height-base;
-  color: @pre-color;
+  color: var(--neutralForeground2Rest);
   word-break: break-all;
   word-wrap: break-word;
-  background-color: @pre-bg;
-  border: 1px solid @pre-border-color;
-  border-radius: @border-radius-base;
+  background-color: var(--neutralBackground1Rest);
+  border: 2px solid var(--neutralStroke1Rest);
+  border-radius: 4px;
 
   // Account for some code outputs that place code tags in pre tags
   code {

diff --git a/src/Bootstrap/less/forms.less b/src/Bootstrap/less/forms.less
@@ -229,33 +229,51 @@ input[type="checkbox"].brand-checkbox:focus {
     justify-content: space-evenly;
   }
 
+  input[type="checkbox"]:indeterminate::after {
+    content: '\2012';
+    font-weight: bolder;
+    display: flex;
+    width: 16px;
+    height: 16px;
+    left: -1px;
+    top: -1.75px;
+    position: relative;
+    align-items: flex-end;
+    justify-content: space-evenly;
+  }
+
+  input[type="checkbox"]:indeterminate,
   input[type="checkbox"]:checked {
     background-color: var(--brandBackgroundCompoundRest);
     border-color: var(--brandBackgroundCompoundRest);
     color: var(--neutralForegroundInverted1Rest);;
   }
 
   &:hover {
+    input[type="checkbox"]:indeterminate,
     input[type="checkbox"]:checked {
       background-color: var(--brandBackgroundCompoundHover);
       border-color: var(--brandBackgroundCompoundHover);
       color: var(--neutralForegroundInverted1Hover);
     }
-
-    input[type="checkbox"]:not(:checked){
+
+    input[type="checkbox"]:not(:indeterminate):not(:checked),
+    input[type="checkbox"]:not(:checked):not(:indeterminate) {
       border-color: var(--neutralStrokeAccessibleHover);
       color: var(--neutralForegroundInverted1Hover);
     }
   }
 
   &:active {
+    input[type="checkbox"]:indeterminate
     input[type="checkbox"]:checked {
       background-color: var(--brandBackgroundCompoundPressed);
       border-color: var(--brandBackgroundCompoundPressed);
       color: var(--neutralForegroundInverted1Pressed);
     }
 
-    input[type="checkbox"]:not(:checked){
+    input[type="checkbox"]:not(:indeterminate):not(:checked),
+    input[type="checkbox"]:not(:checked):not(:indeterminate) {
       border-color: var(--neutralStrokeAccessiblePressed);
       color: var(--neutralForegroundInverted1Pressed);
     }

diff --git a/src/Bootstrap/less/pager.less b/src/Bootstrap/less/pager.less
@@ -14,18 +14,22 @@
     display: inline-block;
     padding: 5px 14px;
     font-size: 20px;
-    color: @gray-light;
+    color: var(--neutralForeground2Rest);
 
     > a,
     > span {
-      color: @link-color;
+      color: var(--neutralForeground2Rest);
+
+      &:hover {
+        color: var(--neutralForeground2Hover);
+      }
     }
   }
 
   .next {
     border-left-style: solid;
     border-left-width: 1px;
-    border-left-color: @brand-primary;
+    border-left-color: var(--neutralStrokeAccessibleRest);
   }
 
   .previous {
@@ -39,9 +43,9 @@
     > a:hover,
     > a:focus,
     > span {
-      color: @pager-disabled-color;
+      color: var(--neutralForegroundDisabledRest);
       cursor: @cursor-disabled;
-      background-color: @pager-bg;
+      background-color: transparent;
     }
   }
 }
diff --git a/src/Bootstrap/less/scaffolding.less b/src/Bootstrap/less/scaffolding.less
@@ -44,6 +44,9 @@ textarea {
 
 
 // Links
+a.inline {
+  text-decoration: underline;
+}
 
 a {
   color: var(--brandForegroundLinkRest);

diff --git a/src/Bootstrap/less/theme/all.less b/src/Bootstrap/less/theme/all.less
@@ -15,6 +15,7 @@
 @import "page-admin-popularity-transfers.less";
 @import "page-api-keys.less";
 @import "page-blog.less";
+@import "page-contact.less";
 @import "page-delete-account.less";
 @import "page-display-package.less";
 @import "page-downloads.less";