Modernizes visual appearance of tabs (#751)

Updates the .interactive-tabs class to take a more layered appearance.
Hover and selection states are visually distinct and rely on the
existing color palette for layers.

Adds support for "prefers-contrast: more" to use the previous higher
contrast style.

Moves the css for tabs to a common location so it can be easily found
and reused between pages.

Author: rauhul

assets/stylesheets/_elements.scss

@@ -1 +1,2 @@
 @import "elements/banner";
+@import "elements/tabs";

assets/stylesheets/_screen.scss

@@ -1194,56 +1194,3 @@ article {
     }
   }
 }
-
-.interactive-tabs {
-  .tabs {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-    padding: 0;
-
-    button, a {
-      cursor: pointer;
-      background-color: transparent;
-      border-radius: var(--border-radius);
-      border: 1px solid var(--color-text);
-      color: var(--color-text);
-      padding: .5rem;
-      display: block;
-      text-align: center;
-      grid-template-columns: repeat(3, 1fr);
-
-      &:hover, &[aria-pressed="true"] {
-        background-color: var(--color-text);
-        color: var(--color-fill);
-        text-decoration: none;
-      }
-    }
-
-    @media (max-width: 480px) {
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-  }
-
-  .content {
-    display: none;
-
-    &.active {
-      display: block;
-    }
-  }
-}
-
-.interactive-tabs.os {
-  .tabs {
-    button, a {
-      width: 100%;
-      align-content: center;
-    }
-  }
-}
-
-.interactive-tabs ~ [id] {
-  scroll-margin-top: 5rem;
-}

assets/stylesheets/core/_colors.scss

@@ -28,11 +28,11 @@ $base-colors: (
     dark: rgb(22, 22, 22),
   ),
   fill-tertiary: (
-    light: rgb(240, 240, 240),
+    light: rgb(232, 232, 232),
     dark: rgb(42, 42, 42),
   ),
   fill-quaternary: (
-    light: rgb(220, 220, 220),
+    light: rgb(218, 218, 218),
     dark: rgb(66, 66, 66),
   ),
   fill-gray-tertiary: (

assets/stylesheets/elements/_tabs.scss

@@ -0,0 +1,67 @@
+.interactive-tabs {
+  .tabs {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    padding: 0;
+
+    // "a" used on install page, "button" used on packages package
+    a, button {
+      background-color: var(--color-fill-secondary);
+      border: 1px solid var(--color-fill-tertiary);
+      border-radius: var(--border-radius);
+      color: var(--color-text);
+
+      // FIXME: Sink prefers-contrast lower into the color stack so each element doesn't need to
+      @media (prefers-contrast: more) {
+        background-color: transparent;
+        border: 1px solid var(--color-text);
+      }
+
+      cursor: pointer;
+      padding: .5rem;
+      display: block;
+      text-align: center;
+      width: 100%;
+      grid-template-columns: repeat(3, 1fr);
+
+      &:hover {
+        color: var(--color-link);
+      }
+
+      &[aria-pressed="true"] {
+        color: var(--color-text);
+        font-weight: 500;
+      }
+
+      &:hover, &[aria-pressed="true"] {
+        background-color: var(--color-fill-tertiary);
+        border: 1px solid var(--color-fill-quaternary);
+
+        @media (prefers-contrast: more) {
+          background-color: var(--color-text);
+          color: var(--color-fill);
+        }
+
+        text-decoration: none;
+      }
+    }
+
+    @media (max-width: 480px) {
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+  }
+
+  .content {
+    display: none;
+
+    &.active {
+      display: block;
+    }
+  }
+}
+
+.interactive-tabs ~ [id] {
+  scroll-margin-top: 5rem;
+}