Onboarding dark mode fixees (#18996)

app/assets/stylesheets/config/_colors.css

@@ -166,6 +166,9 @@
 
   /* Code */
   --code-inline-bg: rgb(var(--black), 0.1);
+
+  /* Onboarding suggested people */
+  --content-row-hover-bg: rgb(var(--grey-100));
 }
 
 :root {

app/assets/stylesheets/preact/onboarding-modal.scss

@@ -335,6 +335,7 @@
   }
 
   .introduction-title {
+    color: var(--base-inverted);
     font-size: var(--fs-2xl);
     font-weight: var(--fw-heavy);
     line-height: var(--lh-tight);
@@ -346,6 +347,7 @@
   }
 
   .introduction-subtitle {
+    color: var(--base-inverted);
     font-size: var(--fs-l);
     font-weight: var(--fw-normal);
     line-height: var(--lh-base);
@@ -458,6 +460,7 @@ $onboarding-user-selected-hover: rgba(71, 85, 235, 0.2);
 
   .user-name,
   .user-summary {
+    color: var(--base);
     margin: 0;
     line-height: var(--lh-tight);
 
@@ -549,7 +552,7 @@ $onboarding-user-selected-hover: rgba(71, 85, 235, 0.2);
 
     &:hover,
     &:focus-within {
-      background-color: #eef0f1 !important;
+      background-color: var(--content-row-hover-bg) !important;
     }
   }
 

app/assets/stylesheets/themes/dark.css

@@ -172,6 +172,9 @@
 
   /* Code */
   --code-inline-bg: rgb(var(--white), 0.1);
+
+  /* Onboarding suggested people */
+  --content-row-hover-bg: rgba(var(--base-20));
 }
 
 :root {

app/javascript/onboarding/components/FollowTags.jsx

@@ -140,7 +140,7 @@ export class FollowTags extends Component {
                     style={{
                       boxShadow: selected
                         ? `inset 0 0 0 100px ${tag.bg_color_hex}`
-                        : `inset 0 0 0 2px ${tag.bg_color_hex}`,
+                        : `inset 0 0 0 0px ${tag.bg_color_hex}`,
                       color: selected ? tag.text_color_hex : '',
                     }}
                     key={tag.id}