Merge pull request #18994 from dvdksn/docs-header-gradient

style: dds updates dec 2023

assets/css/callouts.css

@@ -6,31 +6,31 @@
  * */
 
 .prose blockquote {
-  @apply bg-blue-light-100 p-4 font-normal not-italic dark:bg-blue-dark-100;
+  @apply bg-blue-light-100 py-4 px-6 font-normal not-italic dark:bg-blue-dark-100 text-blue-light-600 dark:text-blue-dark-800;
   quotes: none;
   > *:first-child {
-    @apply relative ml-5 mt-0 before:absolute before:-left-5 before:font-icons before:content-['info'];
+    @apply relative ml-6 mt-0 before:absolute before:-left-6 before:font-icons before:content-['info'];
   }
   *:last-child {
     @apply mb-0 after:content-none;
   }
 
   &.warning {
-    @apply border-l-red-light bg-red-light-100 dark:border-l-red-dark dark:bg-red-dark-100;
+    @apply border-l-red-light bg-red-light-100 text-red-light-600 dark:border-l-red-dark dark:bg-red-dark-100 dark:text-red-dark-800;
     > *:first-child {
       @apply before:content-['dangerous'];
     }
   }
 
   &.important {
-    @apply border-l-amber-light bg-amber-light-100 dark:border-l-amber-dark dark:bg-amber-dark-100;
+    @apply border-l-amber-light bg-amber-light-100 text-amber-light-600 dark:border-l-amber-dark dark:bg-amber-dark-100 dark:text-amber-dark-800;
     > *:first-child {
       @apply before:content-['warning'];
     }
   }
 
   &.tip {
-    @apply border-l-green-light bg-green-light-100 dark:border-l-green-dark dark:bg-green-dark-100;
+    @apply border-l-green-light bg-green-light-100 text-green-light-600 dark:border-l-green-dark dark:bg-green-dark-100 dark:text-green-dark-800;
     > *:first-child {
       @apply before:content-['lightbulb'];
     }
@@ -42,7 +42,7 @@
     }
   }
   &.restricted {
-    @apply border-l-violet-light bg-violet-light-100 dark:border-l-violet-dark dark:bg-violet-dark-100;
+    @apply border-l-violet-light bg-violet-light-100 text-violet-light-600 dark:border-l-violet-dark dark:bg-violet-dark-100 dark:text-violet-dark-800;
     > *:first-child {
       @apply before:content-['rocket\_launch'];
     }

assets/css/code.css

@@ -9,6 +9,14 @@
   }
 }
 
+:not(pre) > code {
+  /* !important because of specificity issue with blockquote typography */
+  color: theme(colors.black) !important;
+  .dark blockquote & {
+    color: theme(colors.white) !important;
+  }
+}
+
 .highlight {
   @apply p-3 my-4 overflow-x-auto;
   background: theme("colors.white");

assets/css/search.css

@@ -14,8 +14,8 @@
   --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5),
     0 3px 8px 0 #555a64;
   --docsearch-searchbox-height: 56px;
-  --docsearch-button-background: theme(colors.blue.light.600);
-  --docsearch-button-focus-background: theme(colors.blue.light.700);
+  --docsearch-button-background: rgb(255 255 255 / 10%);
+  --docsearch-button-focus-background: rgb(255 255 255 / 20%);
   --docsearch-searchbox-background: theme(colors.white);
   --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
   --docsearch-hit-height: 56px;
@@ -36,8 +36,6 @@ html.dark {
   --docsearch-container-background: rgba(9, 10, 17, 0.8);
   --docsearch-modal-background: #15172a;
   --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
-  --docsearch-button-background: theme(colors.blue.dark.300);
-  --docsearch-button-focus-background: theme(colors.blue.dark.400);
   --docsearch-searchbox-background: theme(colors.black);
   --docsearch-hit-color: #bec3c9;
   --docsearch-hit-shadow: none;

layouts/partials/header.html

@@ -1,4 +1,4 @@
-<header class="sticky top-0 z-20 h-16 px-4 bg-blue-light-500 dark:bg-blue-dark-200 text-white">
+<header class="sticky top-0 z-20 h-16 px-4 text-white bg-gradient-to-r from-accent-light to-blue-light-500 dark:from-accent-dark dark:to-blue-dark-100">
   <div class="mx-auto flex h-full max-w-[1440px] items-center justify-between">
     <div class="flex h-full items-center gap-8 md:gap-2">
       <button x-data tabindex="4" @click="() => {

layouts/partials/top-nav.html

@@ -4,10 +4,7 @@
   <nav>
     <ul class="box-content flex mt-1 gap-4 md:hidden">
       {{ range site.Menus.main }}
-      <li class="border-b-4
-          {{- if not (eq $firstSection .Name) }}
-            border-blue-light dark:border-blue-dark-200 hover:border-blue-light-600 dark:hover:border-blue-dark-100
-          {{- end }}">
+      <li {{- if eq $firstSection .Name }} class="border-b-4" {{- end }}>
         <a class="block py-1 px-2" href="{{ .URL }}">{{ .Name }}</a>
       </li>
       {{ end }}

tailwind.config.js

@@ -70,9 +70,14 @@ module.exports = {
       white: "#fff",
       black: "#000",
 
+      accent: {
+        light: "#677285",
+        dark: "#2D404E",
+      },
+
       background: {
         light: "#f9f9fa",
-        dark: "#1c262d",
+        dark: "#141b1f",
       },
 
       divider: {
@@ -144,9 +149,9 @@ module.exports = {
         },
         dark: {
           DEFAULT: "#a371fc",
-          100: "#491d7b",
-          200: "#5f25a0",
-          300: "#7835d3",
+          100: "#380093",
+          200: "#4F00B4",
+          300: "#6D1CDB",
           400: "#8a53ec",
           500: "#a371fc",
           600: "#b38bfc",
@@ -162,17 +167,17 @@ module.exports = {
           200: "#c0e0fa",
           300: "#8bc7f5",
           400: "#1c90ed",
-          500: "#086dd7",
-          600: "#0055bd",
-          700: "#1144a6",
+          500: "#1D63ED",
+          600: "#0C49C2",
+          700: "#00308D",
           800: "#00084d",
         },
         dark: {
           DEFAULT: "#3391ee",
-          100: "#06326d",
-          200: "#08489b",
-          300: "#1760ca",
-          400: "#2673e3",
+          100: "#002EA3",
+          200: "#063BB7",
+          300: "#1351D4",
+          400: "#1D63ED",
           500: "#3391ee",
           600: "#55a4f1",
           700: "#7cb9f4",
@@ -194,11 +199,11 @@ module.exports = {
         },
         dark: {
           DEFAULT: "#2aa391",
-          100: "#11423b",
-          200: "#155048",
-          300: "#176254",
-          400: "#228375",
-          500: "#2aa391",
+          100: "#003F36",
+          200: "#005045",
+          300: "#006256",
+          400: "#008471",
+          500: "#00A58C",
           600: "#3cc1ad",
           700: "#7accc3",
           800: "#a5ddd6",
@@ -208,7 +213,7 @@ module.exports = {
       gray: {
         light: {
           DEFAULT: "#677285",
-          100: "#efeff2",
+          100: "#F4F4F6",
           200: "#e1e2e6",
           300: "#c4c8d1",
           400: "#8993a5",
@@ -219,10 +224,10 @@ module.exports = {
         },
         dark: {
           DEFAULT: "#7794ab",
-          100: "#141b1f",
-          200: "#27343e",
-          300: "#364754",
-          400: "#465c6e",
+          100: "#080B0E",
+          200: "#1C262D",
+          300: "#2D404E",
+          400: "#4E6A81",
           500: "#7794ab",
           600: "#94abbc",
           700: "#adbecb",