docs(catalog): refactor catalog to use material panel layout

PiperOrigin-RevId: 537973428

Author: Elliott Marquez

catalog/site/css/components.css

@@ -40,7 +40,6 @@ figure {
 
 catalog-component-header img {
   height: var(--catalog-header-image-height, 50%);
-  width: var(--catalog-header-image-width, 100%);
 }
 
 .figure-wrapper {
@@ -97,7 +96,7 @@ tr th:last-of-type {
 th {
   background-color: var(--md-sys-color-surface-container);
   text-shadow: 0 1px 1px var(--md-sys-color-surface-container-lowest);
-  color: var(--md-sys-color-on-surface-container);
+  color: var(--md-sys-color-on-surface);
   font-size: 1.25em;
 }
 
@@ -111,19 +110,19 @@ th {
 }
 
 tr th:first-of-type {
-  border-start-start-radius: 28px;
+  border-start-start-radius: var(--catalog-shape-xl);
 }
 
 tr th:last-of-type {
-  border-start-end-radius: 28px;
+  border-start-end-radius: var(--catalog-shape-xl);
 }
 
 tr:last-of-type td:first-of-type {
-  border-end-start-radius: 28px;
+  border-end-start-radius: var(--catalog-shape-xl);
 }
 
 tr:last-of-type td:last-of-type {
-  border-end-end-radius: 28px;
+  border-end-end-radius: var(--catalog-shape-xl);
 }
 
 /* Hides offscreen accesible text for h1,2,3 hover links. */
@@ -158,7 +157,7 @@ a .offscreen {
   align-items: center;
   position: absolute;
   inset: 0;
-  inset-inline-start: calc(-1 * var(--_content-padding) + 4px);
+  inset-inline-start: calc(-1 * var(--catalog-spacing-xl) + 4px);
   opacity: 0;
   font-size: calc(1.5em - 4px);
   transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1);

catalog/site/css/global.css

@@ -26,12 +26,8 @@
 
 :root {
   font-family: 'Google Sans', Roboto, system-ui;
-  background-color: var(--md-sys-color-background);
-  color: var(--md-sys-color-on-background);
-  --catalog-top-app-bar-height: 48px;
-  --catalog-top-app-bar-padding-block: 12px;
-  scroll-padding-block-start: calc(var(--catalog-top-app-bar-height) + var(--catalog-top-app-bar-padding-block) * 2);
-
+  background-color: var(--md-sys-color-surface-container);
+  color: var(--md-sys-color-on-surface);
   /* These values are copied from mio */
   --catalog-display-xl-font-size: 88px;
   --catalog-display-m-font-size: 45px;
@@ -40,6 +36,17 @@
   --catalog-title-s-font-size: 14px;
   --catalog-body-l-font-size: 16px;
   --catalog-body-m-font-size: 14px;
+  --catalog-shape-xl: 28px;
+  --catalog-shape-l: 16px;
+  --catalog-shape-m: 12px;
+  --catalog-shape-s: 8px;
+  --catalog-shape-xs: 4px;
+  --catalog-spacing-xl: 28px;
+  --catalog-spacing-l: 16px;
+  --catalog-spacing-m: 12px;
+  --catalog-spacing-s: 8px;
+  --catalog-top-app-bar-height: calc(48px + 2 * var(--catalog-spacing-m));
+  scroll-padding-block-start: calc(var(--catalog-top-app-bar-height) + var(--catalog-top-app-bar-padding-block) * 2);
 }
 
 @media screen and (max-width: 600px) {
@@ -48,6 +55,8 @@
     --catalog-title-l-font-size: 16px;
     --catalog-body-l-font-size: 14px;
     --catalog-body-m-font-size: 12px;
+    /* Mostly to accommodate content padding on small screens */
+    --catalog-spacing-xl: 16px;
   }
 }
 
@@ -70,15 +79,27 @@ nav-drawer md-list-item-link[selected] {
   --md-list-item-list-item-container-color: var(--md-sys-color-surface-container-highest);
 }
 
+@media (forced-colors: active) {
+  nav-drawer md-list-item-link[selected] {
+    border: 4px double CanvasText;
+  }
+
+  nav-drawer md-list-item-link {
+    border-radius: var(--catalog-shape-xl);
+    border: 1px solid CanvasText;
+  }
+}
+
 md-list {
   --md-list-container-color: transparent;
+  --md-list-item-list-item-container-color: transparent;
   display: block;
-  margin-inline: 12px;
+  margin-inline: var(--catalog-spacing-m);
   min-width: unset;
 }
 
 md-list-item-link {
-  margin-block: 12px;
+  margin-block: var(--catalog-spacing-m);
   display: block;
 }
 

catalog/site/css/home-page.css

@@ -7,4 +7,5 @@
  h1,
 .subtitle {
   text-align: center;
+  margin-block-start: 0;
 }

catalog/site/css/syntax-highlight.css

@@ -59,7 +59,7 @@ code,
 code[class*="language-"],
 pre[class*="language-"] {
   color: var(--md-sys-color-on-surface-variant);
-  text-shadow: 0 1px 1px var(--md-sys-color-background);
+  text-shadow: 0 1px 1px var(--md-sys-color-surface);
   font-family: 'Google Sans Mono', Menlo, Monaco, "Courier New", monospace;
   direction: ltr;
   text-align: left;

catalog/src/components/catalog-component-header-title.ts

@@ -27,8 +27,11 @@ export class CatalogComponentHeaderTitle extends LitElement {
       justify-content: center;
       border-radius: var(--catalog-image-border-radius);
       padding: 56px;
-      background-color: var(--md-sys-color-surface-container);
-      color: var(--md-sys-color-on-surface-container);
+      /* It has no border so we need it to be a different color from the top app
+       * bar and nav drawer.
+       */
+      background-color: var(--md-sys-color-surface-variant);
+      color: var(--md-sys-color-on-surface-variant);
     }
 
     slot::slotted(h1) {

catalog/src/components/catalog-component-header.ts

@@ -29,7 +29,7 @@ export class CatalogComponentHeader extends LitElement {
   static styles = css`
     :host {
       display: block;
-      --catalog-image-border-radius: 24px;
+      --catalog-image-border-radius: var(--catalog-shape-xl);
       container: host / inline-size;
       position: relative;
     }
@@ -56,7 +56,8 @@ export class CatalogComponentHeader extends LitElement {
     }
 
     .image {
-      background-color: var(--md-sys-color-surface-container);
+      /* Color needs to differ from top-app-bar and sidebar */
+      background-color: var(--md-sys-color-surface-variant);
       border-radius: var(--catalog-image-border-radius);
       overflow: hidden;
       margin-block-start: 16px;
@@ -78,7 +79,8 @@ export class CatalogComponentHeader extends LitElement {
       justify-content: center;
     }
 
-    @container (width > 1100px) {
+    /* fit ipad pro at least */
+    @container (width > 1000px) {
       div {
         display: grid;
         grid-gap: 8px;