Update colors in code block to our theme colors, remove code block from tab order

Author: webstackdev

src/components/Code/CodeTabs/client/__tests__/index.spec.ts

@@ -124,7 +124,7 @@ describe('CodeTabs web component', () => {
       expect(tabButton, 'CodeTabs should render a tab button for a single named code block').toBeTruthy()
       expect(tabButton?.textContent).toBe('TypeScript')
       expect(
-        tabButton?.className.includes('hover:text-gray-600'),
+        tabButton?.className.includes('hover:text-content-active'),
         'Single-tab UI should not change text color on hover'
       ).toBe(false)
     })
@@ -159,12 +159,12 @@ describe('CodeTabs web component', () => {
       expect(inactiveButton).toBeTruthy()
 
       expect(
-        activeButton?.className.includes('hover:text-gray-600'),
+        activeButton?.className.includes('hover:text-content-active'),
         'Active tab should not change text color on hover'
       ).toBe(false)
 
       expect(
-        inactiveButton?.className.includes('hover:text-gray-600'),
+        inactiveButton?.className.includes('hover:text-content-active'),
         'Inactive tab should change text color on hover'
       ).toBe(true)
     })

src/components/Code/CodeTabs/client/index.ts

@@ -120,7 +120,7 @@ class CodeTabsElement extends HTMLElement {
   private buildUi(args: { shouldRenderTabs: boolean; labels: string[] }): void {
     const header = document.createElement('div')
     header.className =
-      'flex w-full min-w-0 items-center justify-between border-b border-gray-200 bg-gray-50'
+      'flex w-full min-w-0 items-center justify-between bg-page-base-offset'
 
     const copyButton = this.createCopyButton()
 
@@ -136,7 +136,7 @@ class CodeTabsElement extends HTMLElement {
 
         const button = document.createElement('button')
         button.type = 'button'
-        button.className = 'inline-block px-2 py-1 m-2 text-gray-400'
+        button.className = 'inline-block px-2 py-1 m-2 text-content-offset'
         button.textContent = tabLabel
         button.setAttribute('data-code-tabs-button', String(index))
 
@@ -168,7 +168,7 @@ class CodeTabsElement extends HTMLElement {
     const button = document.createElement('button')
     button.type = 'button'
     button.className =
-      'flex shrink-0 items-center gap-2 mr-2 px-3 py-2 text-gray-600 hover:text-gray-900 border-l border-gray-200'
+      'flex shrink-0 items-center gap-2 mr-2 px-3 py-2 text-content hover:text-content-active'
     button.setAttribute('aria-label', tooltip)
     button.title = tooltip
 
@@ -203,18 +203,18 @@ class CodeTabsElement extends HTMLElement {
 
     this.tabButtons.forEach((btn, i) => {
       const isActive = i === index
-      btn.classList.toggle('text-gray-900', isActive)
-      btn.classList.toggle('text-gray-400', !isActive)
+      btn.classList.toggle('text-content', isActive)
+      btn.classList.toggle('text-content-offset', !isActive)
 
       // Hover color behavior:
       // - Single-tab UI: no hover color change.
       // - Multi-tab UI: inactive tabs change color on hover; active tab does not.
       if (!this.isInteractiveTabs) {
-        btn.classList.remove('hover:text-gray-600')
+        btn.classList.remove('hover:text-content-active')
         return
       }
 
-      btn.classList.toggle('hover:text-gray-600', !isActive)
+      btn.classList.toggle('hover:text-content-active', !isActive)
     })
   }
 

src/content/articles/demo/index.mdx

@@ -21,7 +21,7 @@ This `console.log("hello, world!")` statement is inline code.
   console.log("hello, world!")
 ```
 
-```bash
+```bash [g8:BASH]
 #!/bin/bash
 
 LOG_DIR="/var/log/myapp"
@@ -55,6 +55,10 @@ cleanup_old_files() {
 }
 ```
 
+```text
+A text code block
+```
+
 #### Grouped Code Tabs
 
 The following examples substitute apostrophes for backticks so that they're not rendered to code blocks.
@@ -263,9 +267,9 @@ features:
 
 #### Add a title to the code block
 
-You can add a title to the code block by adding a `title` prop to the code block like `js title="script.js"`:
+You can add a title to the code block by using it for the name in the group block like `[g7:/src/script.js]`:
 
-```js title="script.js"
+```js [g7:/src/script.js]
   console.log('Hello World')
 ```
 

src/lib/markdown/plugins/rehype-shiki/index.ts

@@ -304,7 +304,6 @@ const rehypeShiki: Plugin<[RehypeShikiOptions], Root> = (options: RehypeShikiOpt
         highlightedPre.properties[key] = value as never
       }
 
-      highlightedPre.properties['tabIndex'] = 0
       highlightedPre.properties['data-language'] = replacement.lang
 
       highlightedPre.properties['className'] = mergeClassNames(

src/styles/shiki.css

@@ -14,30 +14,28 @@
 pre.shiki code {
   counter-increment: step calc(var(--start, 1) - 1);
   counter-reset: step;
-  /* Prevent Shiki's inter-line text nodes ("\n") from becoming visual blank lines. */
   white-space: normal;
 }
 
+/* Prevent Shiki's inter-line text nodes ("\n") from becoming visual blank lines. */
 pre.shiki code .line {
   display: block;
-  position: relative;
-  padding-left: 3rem;
-  /* Ensure empty source lines still take up vertical space for line numbers. */
   min-height: 1.25em;
-  /* Allow long tokens to wrap inside the code column. */
-  white-space: pre-wrap;
   overflow-wrap: anywhere;
+  padding-left: 3rem;
+  position: relative;
+  white-space: pre-wrap;
 }
 
 pre.shiki code .line::before {
   color: rgb(from var(--color-content-active) r g b / 40%);
   content: counter(step);
   counter-increment: step;
-  position: absolute;
   left: 0;
-  top: 0;
-  width: 2rem;
+  position: absolute;
   text-align: right;
+  top: 0;
+  width: 1.5rem;
 }
 
 /* Query based dark mode */

src/styles/typography.css

@@ -172,9 +172,10 @@
 
   h1,
   h2,
-  h3 {
+  h3,
+  h4 {
     font-family: var(--font-family-serif);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-bold);
     text-rendering: optimizelegibility;
   }
 
@@ -193,6 +194,11 @@
     font-size: var(--font-size-xl);
   }
 
+  h4,
+  .h4 {
+    font-size: var(--font-size-lg);
+  }
+
   @media (width <= 26em) {
     h1,
     .h1 {