Registry entry colors in dark mode, and some style cleanup (#8498)

Author: chalin

assets/scss/_dark-adjustments.scss

@@ -0,0 +1,31 @@
+// Dark-mode color contrast adjustments
+
+@include color-mode(dark) {
+  .otel-icon {
+    filter: brightness(0) invert(1);
+  }
+}
+
+// Make box-shadow color contrast more obvious in dark mode.
+// https://github.com/twbs/bootstrap/issues/39053 reports this issue.
+// TODO: upstream this to Docsy.
+
+$box-shadow-alpha-dark: 0.8 !default;
+// Note: for some reason the following SCSS var must be a CSS var.
+$box-shadow-color-rgb-dark: var(--bs-black-rgb) !default;
+
+@include color-mode(dark) {
+  $box-shadow-color-rgba-dark: rgba(
+    #{$box-shadow-color-rgb-dark},
+    #{$box-shadow-alpha-dark}
+  ) !default;
+
+  // The following is supposed to only tweak the rgba value, but Bootstrap isn't
+  // setup to allow this. So we'll need to ensure that non-rgba values stay in
+  // sync with Bootstraps.
+
+  --bs-box-shadow: 0 0.5rem 1rem #{$box-shadow-color-rgba-dark};
+  --bs-box-shadow-sm: 0 0.125rem 0.25rem #{$box-shadow-color-rgba-dark};
+  --bs-box-shadow-lg: 0 1rem 3rem #{$box-shadow-color-rgba-dark};
+  --bs-box-shadow-inset: inset 0 1px 2px #{$box-shadow-color-rgba-dark};
+}

assets/scss/_registry.scss

@@ -39,26 +39,3 @@
 .registry-entry {
   @extend .shadow;
 }
-
-#searchForm .btn.btn-outline-success,
-.btn-outline-danger,
-.btn-outline-secondary {
-  &:hover {
-    color: var(--bs-white);
-  }
-}
-
-@include color-mode(dark) {
-  @media (prefers-color-scheme: dark) {
-    .border-default {
-      border-color: #a3a3a3;
-    }
-    .card.registry-entry {
-      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
-    }
-    .card.registry-entry,
-    .list-group > .list-group-item {
-      background-color: #262d2c;
-    }
-  }
-}

assets/scss/_styles_project.scss

@@ -4,6 +4,7 @@
 @import 'registry';
 @import 'tabs';
 @import 'external_link';
+@import 'dark-adjustments';
 @import 'td/color-adjustments-dark';
 @import 'td/code-dark';
 @import 'td/gcs-search-dark';
@@ -214,11 +215,6 @@
   @extend .td-max-width-on-larger-screens;
 }
 
-// Ensure OTel icons display correctly in dark mode
-[data-bs-theme='dark'] .otel-icon {
-  filter: brightness(0) invert(1);
-}
-
 .td-blog.otel-with-contributions-from {
   .td-content {
     .td-byline {

layouts/_partials/ecosystem/registry/entry.html

@@ -65,7 +65,7 @@
         {{ $package = merge .package (index $remoteRegistries .package.registry) -}}
         {{ $package = merge $package (dict "type" .registryType) -}}
     {{ end -}}
-    {{ $highlightStyle := "border-default" -}}
+    {{ $highlightStyle := "" -}}
     {{ if $isNew -}}
         {{ $highlightStyle = "border-info" -}}
     {{ end -}}
@@ -117,22 +117,22 @@ <h4 class="card-title mb-0 d-flex flex-row">
             <span class="badge rounded-pill text-bg-info"><i class="fa-regular fa-star"></i> new</span>
             {{ end -}}
             {{ if $isNative -}}
-            <a href="{{ $registryUrl }}/?flag=native" class="badge rounded-pill text-bg-success text-white" title="Click to filter by native flag">
+            <a href="{{ $registryUrl }}/?flag=native" class="badge rounded-pill text-bg-success" title="Click to filter by native flag">
             <i class="fa-solid fa-puzzle-piece"></i> native</a>
             {{ end -}}
             {{ if $isFirstParty -}}
-            <a href="{{ $registryUrl }}/?flag=first_party" class="badge rounded-pill text-bg-success text-white" title="Click to filter by first party flag">
+            <a href="{{ $registryUrl }}/?flag=first_party" class="badge rounded-pill text-bg-success" title="Click to filter by first party flag">
             <i class="fa-solid fa-heart"></i> first party integration</a>
             {{ end -}}
             {{ if $usedInDemo -}}
-            <span class="badge rounded-pill text-bg-secondary text-white" title="This package is used in the OpenTelemetry Demo!"><i class="fa-solid fa-shapes"></i> OTel Demo</span>
+            <span class="badge rounded-pill text-bg-secondary" title="This package is used in the OpenTelemetry Demo!"><i class="fa-solid fa-shapes"></i> OTel Demo</span>
             {{ end -}}
             {{ if $deprecated -}}
-            <a href="{{ $registryUrl }}/?flag=deprecated" class="badge rounded-pill text-bg-danger text-white" title="Click to filter by deprecated flag">
+            <a href="{{ $registryUrl }}/?flag=deprecated" class="badge rounded-pill text-bg-danger" title="Click to filter by deprecated flag">
             <i class="fa-solid fa-ban"></i> deprecated</a>
             {{ end -}}
             {{ if .cncfProjectLevel -}}
-            <span class="badge rounded-pill text-bg-primary text-white" title="CNCF {{ .cncfProjectLevel}} Project">
+            <span class="badge rounded-pill text-bg-primary" title="CNCF {{ .cncfProjectLevel}} Project">
                 <img alt="CNCF" style="display: inline-block; width: 14px; height: 14px; border: none; margin:0px; padding: 0; vertical-align:middle" src="/img/cncf-icon-white.svg"> {{ .cncfProjectLevel }}
             </span>
             {{ end -}}
@@ -166,13 +166,11 @@ <h4 class="card-title mb-0 d-flex flex-row">
                     {{- .description | markdownify -}}
                 </div>
 
-                <!-- New Tags section -->
                 <div class="tags mb-2">
                     {{ if .tags }}
                         <div>
                             {{ range .tags }}
-                                {{ $tag := . }} <!-- Store the tag in a variable -->
-                                <a href="{{ $registryUrl }}/?s={{ $tag | urlize }}" class="badge bg-light me-1">{{ $tag }}</a>
+                                <a href="{{ $registryUrl }}/?s={{ . | urlize }}" class="badge text-bg-primary me-1">{{ . }}</a>
                             {{ end }}
                         </div>
                     {{ end }}