docs: elements > code > accordion + table layout tweaks (#1613)

* docs: elements > code > accordion + table layout tweaks

* docs: code table design revisions

* docs: darken code table mobile/hover row color

* docs: move Code page accordion + table CSS to its own file

* docs: allow horizontal scrollbars on `rh-table`

* docs: move `link` tag to new layout

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

docs/_includes/layouts/pages/elements.njk

@@ -18,6 +18,9 @@ eleventyComputed:
 {%- if hasToc %}
 <link rel="stylesheet" href="/assets/javascript/elements/uxdot-toc-lightdom.css">
 {%- endif %}
+{% if doc.pageTitle == 'Code' %}
+  <link rel="stylesheet" href="{{ '/styles/pages/code.css' | url }}">
+{% endif %}
 <link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
 <link rel="stylesheet" href="/assets/packages/@rhds/tokens/css/global.css">
 {%- if slug == 'audio-player' %}

docs/styles/pages/code.css

@@ -0,0 +1,26 @@
+/**
+ * Elements > Code > Accordion Panel & Table customizations
+ * Only loaded on the {Element} > Code pages
+ **/
+rh-accordion-panel[expanded]::part(container) {
+  background-color: var(--rh-color-surface-lighter, #f2f2f2);
+}
+
+rh-accordion-panel[expanded] rh-table {
+  --rh-table-row-background-hover-color: #f8f8f8;
+
+  background-color: var(--rh-color-surface-lightest, #ffffff);
+  margin: 0;
+}
+
+rh-accordion-panel[expanded] rh-table tbody tr:last-child {
+  border-block-end: 0 !important;
+}
+
+rh-accordion-panel[expanded] rh-table th {
+  font-size: var(--rh-font-size-body-text-sm, 0.875rem);
+}
+
+rh-accordion-panel[expanded] rh-table :is(th, td) p {
+  margin-block: 0;
+}

docs/styles/styles.css

@@ -316,7 +316,7 @@
 
   /* TODO: Document this bug table overflows vertically causing a scrollbar when it shouldn't */
   rh-table {
-    overflow: unset;
+    overflow-y: unset;
   }
 
   /* Compact tile + Uxdot Example reduce overall spacing */