Fix more unreleased dark mode contrast bugs (#45295)

changes/dark-mode-tweaks

@@ -1,3 +0,0 @@
-* Improved dark mode contrast on error pages.
-* Added borders to dropdowns.
-* Fixed bottom-right rounded corners of data tables being cut.

frontend/components/Avatar/Avatar.tsx

@@ -93,7 +93,7 @@ const APIOnlyAvatar = ({ className }: IAPIOnlyAvatar) => {
         cx="16"
         cy="16"
         r="15"
-        fill="white"
+        fill="none"
         stroke={COLORS["ui-fleet-black-50"]}
         strokeWidth="2"
       />
@@ -196,7 +196,7 @@ const Avatar = ({
 
   const avatarClasses = classnames(baseClass, className, {
     [`${baseClass}--${size?.toLowerCase()}`]: !!size,
-    "has-white-background": !!hasWhiteBackground,
+    "has-white-background": !!hasWhiteBackground && !useApiOnlyAvatar,
   });
   const { gravatar_url } = user;
 

frontend/components/TableContainer/DataTable/HeaderCell/_styles.scss

@@ -17,14 +17,14 @@
     height: 0;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
-    border-bottom: 5px solid $ui-fleet-black-25;
+    border-bottom: 5px solid $ui-fleet-black-50;
   }
   .descending-arrow {
     width: 0;
     height: 0;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
-    border-top: 5px solid $ui-fleet-black-25;
+    border-top: 5px solid $ui-fleet-black-50;
   }
 
   &.ascending {

frontend/components/TableContainer/DataTable/PerformanceImpactCell/PerformanceImpactCell.tsx

@@ -64,8 +64,7 @@ const PerformanceImpactCell = ({
         disableTooltip={disableTooltip}
         underline={false}
         showArrow
-        // Pills require more gap from text to tooltip
-        tipOffset={indicatorValue === "Undetermined" ? 8 : 12}
+        tipOffset={8}
       >
         <span className={pillClassName}>{indicatorValue}</span>
       </TooltipWrapper>

frontend/components/TableContainer/DataTable/PerformanceImpactCell/_styles.scss

@@ -6,28 +6,9 @@
 
 .data-table__pill {
   color: $core-fleet-black;
-  font-weight: $bold;
-  padding: 4px 12px;
-  border-radius: 29px;
 
-  span {
-    border-radius: 29px;
-    background-color: $core-fleet-purple;
-  }
   &--undetermined {
     color: $ui-fleet-black-50;
     font-style: italic;
-    font-weight: 400;
-    padding: 0;
-    border-radius: 0;
-  }
-  &--minimal {
-    background-color: $ui-fleet-black-10;
-  }
-  &--considerable {
-    background-color: $ui-fleet-black-25;
-  }
-  &--excessive {
-    background-color: $ui-fleet-black-50;
   }
 }

frontend/components/TableContainer/DataTable/_styles.scss

@@ -453,7 +453,7 @@ $shadow-transition-width: 16px;
           }
         }
         .grey-cell {
-          color: $ui-fleet-black-50;
+          color: $ui-fleet-black-75;
         }
       }
 

frontend/components/YamlAce/YamlAce.jsx

@@ -64,7 +64,6 @@ class YamlAce extends Component {
 
     const wrapperClass = classnames(wrapperClassName, "form-field", {
       [`${baseClass}__wrapper--error`]: error,
-      [`${baseClass}__wrapper--disabled`]: disabled,
     });
 
     return (
@@ -72,6 +71,7 @@ class YamlAce extends Component {
         {renderLabel()}
         <AceEditor
           readOnly={disabled}
+          showGutter={!disabled}
           className={baseClass}
           mode="yaml"
           theme="fleet"

frontend/components/YamlAce/_styles.scss

@@ -6,9 +6,6 @@
         border: 1px solid $ui-error;
       }
     }
-    &--disabled {
-      @include disabled($allow-pointer-events: true);
-    }
   }
 
   // Added to remove the "popping" effect when the editor first loads.

frontend/pages/AccountPage/AccountSidePanel/AccountSidePanel.tsx

@@ -14,12 +14,7 @@ import CustomLink from "components/CustomLink";
 import Radio from "components/forms/fields/Radio";
 import { HumanTimeDiffWithDateTip } from "components/HumanTimeDiffWithDateTip";
 
-import {
-  generateRole,
-  generateTeam,
-  greyCell,
-  readableDate,
-} from "utilities/helpers";
+import { generateRole, generateTeam, readableDate } from "utilities/helpers";
 import { getThemeMode, setThemeMode, ThemeMode } from "utilities/theme";
 
 interface IAccountSidePanelProps {
@@ -115,20 +110,7 @@ const AccountSidePanel = ({
           onChange={onThemeSelect}
         />
       </div>
-      {isPremiumTier && (
-        <DataSet
-          title="Fleets"
-          value={
-            <span
-              className={`${
-                greyCell(teamsText) ? `${baseClass}__grey-text` : ""
-              }`}
-            >
-              {teamsText}
-            </span>
-          }
-        />
-      )}
+      {isPremiumTier && <DataSet title="Fleets" value={teamsText} />}
       <DataSet title="Role" value={roleText} />
       {isPremiumTier && config && (
         <DataSet

frontend/pages/AccountPage/AccountSidePanel/_styles.scss

@@ -17,10 +17,6 @@
     width: 100%;
   }
 
-  &__grey-text {
-    @include grey-text;
-  }
-
   &__password-info {
     display: flex;
     flex-direction: column;

frontend/pages/DashboardPage/cards/HostsEnrolledCard/HostsEnrolledCard.tsx

@@ -216,9 +216,14 @@ const HostsEnrolledCard = ({
             margin={{ top: 0, right: 20, bottom: 0, left: 0 }}
             barCategoryGap="25%"
           >
-            <CartesianGrid horizontal={false} strokeDasharray="3 3" />
+            <CartesianGrid
+              horizontal={false}
+              strokeDasharray="3 3"
+              stroke="var(--ui-fleet-black-10)"
+            />
             <CartesianGrid
               vertical={false}
+              stroke="var(--ui-fleet-black-10)"
               horizontalCoordinatesGenerator={({ offset }) => {
                 const { top, height } = offset;
                 const bandHeight = height / data.length;

frontend/pages/DashboardPage/cards/HostsEnrolledCard/_styles.scss

@@ -23,7 +23,7 @@
   // Note: recharts portals tick labels out of .recharts-cartesian-axis into a
   // .recharts-zIndex-layer_* group, so we target via .recharts-wrapper.
   .recharts-wrapper text {
-    fill: $ui-fleet-black-75;
+    fill: $ui-fleet-black-50;
   }
 
   // Pointer cursor only on rows with hosts. The component adds these classes

frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTableConfig.tsx

@@ -132,12 +132,11 @@ const generateTableHeaders = (
             </TooltipWrapper>
           );
         }
-        const greyAndItalic = greyCell(cellProps.cell.value);
         return (
           <TextCell
             value={cellProps.cell.value}
-            grey={greyAndItalic}
-            italic={greyAndItalic}
+            grey={greyCell(cellProps.cell.value)}
+            italic={greyCell(cellProps.cell.value)}
           />
         );
       },

frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss

@@ -26,6 +26,10 @@
     border-radius: $border-radius;
     height: 36px;
 
+    body.dark-mode & {
+      background-color: $ui-fleet-black-5;
+    }
+
     &:hover {
       cursor: pointer;
       border: 1px solid $ui-fleet-black-50;
@@ -101,6 +105,10 @@
     z-index: 2;
     animation: fade-in 150ms ease-out;
     background-color: $core-fleet-white;
+
+    body.dark-mode & {
+      background-color: $ui-fleet-black-5;
+    }
   }
 
   .label-filter-select__menu-list {

frontend/pages/hosts/details/cards/HostHeader/_styles.scss

@@ -12,7 +12,8 @@
     background-color: $ui-warning;
     padding: $pad-xsmall;
     font-size: $xx-small;
-    // Surface stays yellow in both themes; text must stay dark for contrast.
+    // Warning + error surfaces shift between themes; text stays dark so the
+    // badge reads cleanly in both modes without glare in dark mode.
     color: $static-black;
     font-weight: $bold;
     border-radius: $border-radius;
@@ -23,8 +24,8 @@
     }
 
     &.error {
-      color: $static-white;
       background-color: $core-vibrant-red;
+      color: $static-black;
     }
   }
 

frontend/styles/var/colors.scss

@@ -143,10 +143,10 @@ body.dark-mode {
   --ui-gray: #32363e;
   --ui-light-grey: #1e2128;
   --ui-off-white: #1e2128;
-  --ui-shadow: #32363e;
+  --ui-shadow: #000000;
   --ui-vibrant-blue-50: rgba(123, 121, 255, 0.3);
   --ui-vibrant-blue-25: #282736;
-  --ui-vibrant-blue-10: #2c2f37;
+  --ui-vibrant-blue-10: #2d2e4d;
   --tooltip-bg: #353940;
 
   // Notifications & status — slightly brighter