docs: design fixes to toc and related elements (#12747)

* docs: design fixes to toc and related elements

* change header styling

* fix heading styles

* design fixes

* fix showing badges in toc

www/packages/tailwind/base.tailwind.config.js

@@ -193,6 +193,11 @@ module.exports = {
               },
             },
           },
+          alphas: {
+            alpha: {
+              250: "var(--docs-alphas-alpha-250)",
+            }
+          }
         },
       },
       boxShadow: {
@@ -347,21 +352,21 @@ module.exports = {
         h2: [
           "18px",
           {
-            lineHeight: "28px",
+            lineHeight: "160%",
             fontWeight: "500",
           },
         ],
         h3: [
           "16px",
           {
-            lineHeight: "150%",
+            lineHeight: "160%",
             fontWeight: "500",
           },
         ],
         h4: [
-          "1rem",
+          "14px",
           {
-            lineHeight: "20px",
+            lineHeight: "160%",
             fontWeight: "500",
           },
         ],

www/packages/tailwind/theme-presets.js

@@ -49,7 +49,7 @@ const light = {
   "--docs-button-danger-hover": "rgba(190, 18, 60, 1)",
   "--docs-button-danger-pressed": "rgba(159, 18, 57, 1)",
   "--docs-button-transparent": "rgba(255, 255, 255, 0)",
-  "--docs-button-transparent-hover": "rgba(244, 244, 245, 1)",
+  "--docs-button-transparent-hover": "rgba(24, 24, 27, 0.06)",
   "--docs-button-transparent-pressed": "rgba(228, 228, 231, 1)",
 
   "--docs-tags-neutral-bg": "rgba(244, 244, 245, 1)",
@@ -103,6 +103,7 @@ const light = {
 
   "--docs-alpha-white-alpha-6": "rgba(255, 255, 255, 0.06)",
   "--docs-alpha-white-alpha-12": "rgba(255, 255, 255, 0.12)",
+  "--docs-alphas-alpha-250": "rgba(24, 24, 27, 0.1)",
 }
 
 const dark = {
@@ -207,6 +208,8 @@ const dark = {
   "--docs-contrast-border-base": "rgba(82, 82, 91, 1)",
   "--docs-contrast-border-top": "rgba(24, 24, 27, 1)",
   "--docs-contrast-border-bot": "rgba(255, 255, 255, 0.08)",
+
+  "--docs-alphas-alpha-250": "rgba(255, 255, 255, 0.1)",
 }
 
 module.exports = {