docs(catalog): make code block border-radius visible to app & fix nowrap

Oops I forgot to copy this over form my local env to internal code review. In this CL I expose

--catalog-code-block-border-radius

so that it's available to the copy button component. Additionally, run syntax-highlight.css through prettier because my old formatter was the built-in vscode one.

Also removed nowrap from the navigation pane since I just went with a fixed width.

PiperOrigin-RevId: 538700609

Author: Elliott Marquez

catalog/site/css/syntax-highlight.css

@@ -16,7 +16,8 @@
   --playground-code-font-size: var(--__code-block-font-size);
   --playground-code-background: var(--md-sys-color-surface-variant);
   --playground-code-default-color: var(--md-sys-color-on-surface-variant);
-  --playground-code-font-family: 'Google Sans Mono', Menlo, Monaco, "Courier New", monospace;
+  --playground-code-font-family: 'Google Sans Mono', Menlo, Monaco,
+    'Courier New', monospace;
   --playground-code-callee-color: var(--md-sys-color-primary);
   --playground-code-comment-color: var(--md-sys-color-on-surface-dim);
   --playground-code-operator-color: var(--md-sys-color-on-surface);
@@ -35,18 +36,25 @@
   --playground-code-linenumber-color: var(--md-sys-color-outline);
   --playground-code-qualifier-color: var(--md-sys-color-tertiary);
   --playground-code-cursor-color: var(--md-sys-color-on-surface-variant);
-  --playground-preview-toolbar-background: var(--md-sys-color-surface-container-high);
+  --playground-preview-toolbar-background: var(
+    --md-sys-color-surface-container-high
+  );
   --playground-preview-toolbar-foreground-color: var(--md-sys-color-on-surface);
+
+  /* perfect circle of one line is (padding-block * 2 + (line-height: 1.5x font size)) / 2 */
+  --catalog-code-block-border-radius: calc(
+    (2 * var(--__code-block-font-size) + 1.5 * var(--__code-block-font-size)) /
+      2
+  );
 }
 
 /* Formats the code boxes themselves */
 .example playground-file-editor,
-pre[class*="language-"] {
+pre[class*='language-'] {
   padding: var(--__code-block-font-size);
   /* Remove the extra hard coded 3px from line number padding. */
   padding-inline-start: calc(var(--__code-block-font-size) - 3px);
-  /* perfect circle of one line is (padding * 2 + (line-height: 1.5x font size)) / 2 */
-  border-radius: calc((2 * var(--__code-block-font-size) + 1.5 * var(--__code-block-font-size))/2);
+  border-radius: var(--catalog-code-block-border-radius);
 }
 
 playground-file-editor {
@@ -56,11 +64,11 @@ playground-file-editor {
 }
 
 code,
-code[class*="language-"],
-pre[class*="language-"] {
+code[class*='language-'],
+pre[class*='language-'] {
   color: var(--md-sys-color-on-surface-variant);
   text-shadow: 0 1px 1px var(--md-sys-color-surface);
-  font-family: 'Google Sans Mono', Menlo, Monaco, "Courier New", monospace;
+  font-family: 'Google Sans Mono', Menlo, Monaco, 'Courier New', monospace;
   direction: ltr;
   text-align: left;
   word-spacing: normal;
@@ -74,20 +82,20 @@ pre[class*="language-"] {
   hyphens: none;
 }
 
-pre[class*="language-"],
-:not(pre)>code[class*="language-"] {
+pre[class*='language-'],
+:not(pre) > code[class*='language-'] {
   background: var(--md-sys-color-surface-container);
   border: 1px solid var(--md-sys-color-outline);
 }
 
 /* Code blocks */
-pre[class*="language-"] {
+pre[class*='language-'] {
   overflow: auto;
   scrollbar-width: none;
 }
 
 /* Inline code */
-:not(pre)>code[class*="language-"] {
+:not(pre) > code[class*='language-'] {
   padding: 5px 10px;
   line-height: 1;
   border-radius: 3px;
@@ -107,7 +115,7 @@ pre[class*="language-"] {
 }
 
 .token.namespace {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 .token.tag,
@@ -147,4 +155,4 @@ pre[class*="language-"] {
 .token.important,
 .token.deliminator {
   color: var(--md-sys-color-error);
-}
+}

catalog/src/components/nav-drawer.ts

@@ -219,7 +219,6 @@ import {SignalElement} from '../signals/signal-element.js';
     }
 
     .pane.toc h2 {
-      white-space: nowrap;
       margin-block: var(--catalog-spacing-s) var(--catalog-spacing-m);
       font-size: var(--catalog-headline-s-font-size);
     }