docs: Update typefaces and some other styles (#52992)

Danilo Leal created 

Update the heading typeface to use IBM Plex Serif, the code typeface to
use Lilex (IBM Plex Mono), and pull them from the zed.dev CDN. Also
added some stray design adjustments here and there.

Release Notes:

- N/A

Change summary

docs/theme/css/general.css                      | 33 ++++++++++++++----
docs/theme/css/variables.css                    | 13 ++++---
docs/theme/fonts/Lora.var.woff2                 |  0 
docs/theme/fonts/fonts.css                      | 32 +++++++++++++++--
docs/theme/fonts/iAWriterQuattroS-Regular.woff2 |  0 
docs/theme/page-toc.css                         |  2 
docs/theme/plugins.css                          |  6 +-
7 files changed, 63 insertions(+), 23 deletions(-)

Detailed changes

docs/theme/css/general.css 🔗 

@@ -70,10 +70,21 @@ h5,
 h6 {
   position: relative;
   font-family: var(--title-font);
-  font-weight: 480;
+  font-weight: 400;
+}
+
+h1 {
   color: var(--title-color);
 }
 
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--full-contrast);
+}
+
 /* Don't change font size in headers. */
 h1 code,
 h2 code,
@@ -213,7 +224,7 @@ hr {
 }
 
 .content {
-  padding: 48px 32px 0 32px;
+  padding: 32px 32px 0 32px;
   display: flex;
   justify-content: space-between;
   gap: 36px;
@@ -272,10 +283,14 @@ hr {
   border-radius: 8px;
   overflow: clip;
 }
-.content .header:link,
-.content .header:visited {
+.content h1 .header:link,
+.content h1 .header:visited {
   color: var(--title-color);
 }
+.content :is(h2, h3, h4, h5, h6) .header:link,
+.content :is(h2, h3, h4, h5, h6) .header:visited {
+  color: var(--full-contrast);
+}
 .content .header:link,
 .content .header:visited:hover {
   text-decoration: none;
@@ -383,15 +398,17 @@ blockquote .warning:before {
 }
 
 kbd {
-  background-color: rgba(8, 76, 207, 0.1);
+  background-color: var(--keybinding-bg);
+  padding: 4px 4px 6px 4px;
   border-radius: 4px;
+  font-family: var(--mono-font);
+  display: inline-block;
+  margin: 0 2px;
   border: solid 1px var(--popover-border);
   box-shadow: inset 0 -1px 0 var(--theme-hover);
-  display: inline-block;
   font-size: var(--code-font-size);
-  font-family: var(--mono-font);
+  color: var(--full-contrast);
   line-height: 10px;
-  padding: 4px 5px;
   vertical-align: middle;
 }

docs/theme/css/variables.css 🔗 

@@ -11,11 +11,12 @@
   --page-padding: 15px;
   --content-max-width: 690px;
   --menu-bar-height: 64px;
-  --font: "IA Writer Quattro S", sans-serif;
-  --title-font: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font: "iA Writer Quattro S", sans-serif;
+  --title-font:
+    "IBM Plex Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
   --mono-font:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
-    Courier New, monospace;
+    "Lilex", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    Liberation Mono, Courier New, monospace;
   --code-font-size: 0.875em
     /* please adjust the ace font size accordingly in editor.js */;
 
@@ -151,7 +152,7 @@
   --inline-code-color: hsl(40, 100%, 80%);
   --code-text: hsl(220, 13%, 95%);
   --code-bg: hsl(220, 93%, 50%, 0.2);
-  --keybinding-bg: hsl(0, 0%, 12%);
+  --keybinding-bg: hsl(220, 20%, 10%);
 
   --pre-bg: hsl(220, 13%, 5%);
   --pre-border: hsla(220, 93%, 70%, 0.3);
@@ -162,7 +163,7 @@
   --popover-shadow:
     0 10px 15px -3px hsl(0, 0%, 0%, 0.1), 0 4px 6px -4px hsl(0, 0%, 0%, 0.1);
 
-  --theme-hover: hsl(220, 13%, 25%);
+  --theme-hover: hsl(220, 13%, 20%);
   --hover-section-title: hsl(220, 13%, 11%);
 
   --quote-bg: hsl(220, 13%, 25%, 0.4);

docs/theme/fonts/fonts.css 🔗 

@@ -3,15 +3,37 @@
 /* open-sans-300 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
 
 @font-face {
-  font-family: "IA Writer Quattro S";
+  font-family: "iA Writer Quattro S";
+  src: url("https://cdn.zed.dev/fonts/iAWriterQuattroV.woff2")
+    format("woff2-variations");
+  font-weight: 100 900;
   font-style: normal;
-  font-weight: 400;
-  src: url("iAWriterQuattroS-Regular.woff2") format("woff2");
+  font-display: swap;
 }
 
 @font-face {
-  font-family: "Lora";
-  src: url("Lora.var.woff2") format("woff2-variations");
+  font-family: "iA Writer Quattro S";
+  src: url("https://cdn.zed.dev/fonts/iAWriterQuattroV-Italic.woff2")
+    format("woff2-variations");
   font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "IBM Plex Serif";
+  src: url("https://cdn.zed.dev/fonts/IBMPlexSerif-Var.woff2")
+    format("woff2-variations");
+  font-weight: 400 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lilex";
+  src: url("https://cdn.zed.dev/fonts/Lilex-Regular.woff2")
+    format("woff2-variations");
+  font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }

docs/theme/page-toc.css 🔗 

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  padding: 28px 0 120px 0;
+  padding: 16px 0 120px 0;
   width: 200px;
   max-height: calc(100svh - 50px);
   overflow-x: hidden;

docs/theme/plugins.css 🔗 

@@ -1,8 +1,8 @@
 kbd.keybinding {
   background-color: var(--keybinding-bg);
-  padding: 2px 4px;
-  border-radius: 3px;
-  font-family: monospace;
+  padding: 4px 4px 6px 4px;
+  border-radius: 4px;
+  font-family: var(--mono-font);
   display: inline-block;
   margin: 0 2px;
 }