docs(docs-infra): use a custom scrollbar for the examples using HighlightTypeScript (angular#60981)

The examples used to render the native scrollbar.

PR Close angular#60981

Author: hawkgs

adev/shared-docs/pipeline/api-gen/rendering/templates/highlight-ts.tsx

@@ -11,8 +11,9 @@ import {RawHtml} from './raw-html';
 import {codeToHtml} from '../shiki/shiki';
 
 /** Component to render a header of the CLI page. */
-export function HighlightTypeScript(props: {code: string; }) {
+export function HighlightTypeScript(props: {code: string}) {
   const result = codeToHtml(props.code, 'typescript');
+  const withScrollTrack = result.replace(/^(<pre class="shiki)/, '$1 docs-mini-scroll-track');
 
-  return <RawHtml value={result} />;
+  return <RawHtml value={withScrollTrack} />;
 }

adev/shared-docs/pipeline/api-gen/rendering/templates/raw-html.tsx

@@ -9,8 +9,8 @@
 import {h} from 'preact';
 
 /** Convenience component to render raw html */
-export function RawHtml(props: {value: string, className?: string}) {
+export function RawHtml(props: {value: string; className?: string}) {
   // Unfortunately, there does not seem to be a way to render the raw html
   // into a text node without introducing a div.
-  return <div className={props.className} dangerouslySetInnerHTML={({__html: props.value})}></div>;
+  return <div className={props.className} dangerouslySetInnerHTML={{__html: props.value}}></div>;
 }

adev/shared-docs/styles/_colors.scss

@@ -290,6 +290,7 @@
 // LIGHT MODE (Explicit)
 .docs-light-mode {
   background-color: #ffffff;
+  color-scheme: light;
   @include root-definitions();
   .docs-invert-mode {
     @include dark-mode-definitions();
@@ -299,6 +300,7 @@
 // DARK MODE (Explicit)
 .docs-dark-mode {
   background-color: oklch(16.93% 0.004 285.95);
+  color-scheme: dark;
   @include root-definitions();
   @include dark-mode-definitions();
   .docs-invert-mode {

adev/shared-docs/styles/_reference.scss

@@ -140,14 +140,11 @@
 
         code {
           font-size: 0.875rem;
+          overflow: hidden;
 
           &:has(pre) {
             padding: 0;
           }
-
-          &:not(pre *) {
-            padding: 0 0.3rem;
-          }
         }
 
         pre {