docs: document CSS vars

docs-app/app/components/sidebar.gts

@@ -62,7 +62,7 @@ const Sidebar: TOC<{}> = <template>
         <SidebarItem @text='Line numbers' />
         <SidebarItem @text='Line highlighting' />
         <SidebarItem @text='Loading state' />
-        <SidebarItem @text='Custom fonts' />
+        <SidebarItem @text='Styling' />
         <Separator />
 
         <SidebarTitle @text='Advanced' />

docs-app/app/controllers/application.ts

@@ -107,11 +107,21 @@ function foo(x, y) {
 />`;
   }
 
-  fontComicSans = `<CodeBlock
-  @code="const foo = (bar) => { bar === 1 };"
-  @language="js"
-  style="--ember-shiki-font: 'Comic Sans MS', 'Comic Sans'"
-/>`;
+  cssVariables = `:root {
+  --ember-shiki-padding-x: 24px;
+  --ember-shiki-padding-y: 20px;
+  --ember-shiki-border-radius: 6px;
+  --ember-shiki-background-color: #161b22;
+  --ember-shiki-copy-background-color: #161b22;
+  --ember-shiki-line-number-color: rgb(115 138 148 / 40%);
+  --ember-shiki-font: ui-monospace, sfmono-regular, "SF Mono", menlo, monaco,
+    consolas, "Liberation Mono", "Courier New", monospace;
+  --ember-shiki-line-number-start: 1;
+  --ember-shiki-line-height: 1.7;
+  --ember-shiki-font-size: 0.875rem;
+  --ember-shiki-icon-copy: url('data:image/svg+xml,<svg fill="none" stroke="rgba(128,128,128,1)" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"></path></svg>');
+  --ember-shiki-icon-copied: url('data:image/svg+xml,<svg fill="none" stroke="rgba(128,128,128,1)" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75"></path></svg>');
+}`;
 
   loadingState = `<CodeBlock
   @code="const foo = (bar) => { bar === 1 };"

docs-app/app/templates/application.hbs

@@ -317,9 +317,10 @@ function foo(x, y) {
 
       <CodeBlock @code={{this.loadingState}} @language="hbs" />
 
-      <SectionSubtitle @text="Custom fonts" />
-      <p>Load any external font and set it using the CSS variable. Even fonts
-        with ligature support work out of the box.</p>
+      <SectionSubtitle @text="Styling" />
+      <p>The components in this addon can be styled by overriding CSS variables.
+        For example, any external font can be loaded and used. Even fonts with
+        ligature support work out of the box.</p>
 
       <div class="render-preview">
         <CodeBlock
@@ -330,15 +331,8 @@ function foo(x, y) {
       </div>
       <CodeBlock @code={{this.fontLigaturesCode}} @language="hbs" />
 
-      <p>Or even Comic Sans, if you would really like to</p>
-      <div class="render-preview">
-        <CodeBlock
-          @code="const foo = (bar) => { bar === 1 };"
-          @language="js"
-          style="--ember-shiki-font: 'Comic Sans MS', 'Comic Sans'"
-        />
-      </div>
-      <CodeBlock @code={{this.fontComicSans}} @language="hbs" />
+      <p>Here is a list of CSS variables which are currently defined:</p>
+      <CodeBlock @code={{this.cssVariables}} @language="css" />
 
       <hr class="my-16 h-px border-0 bg-gray-700" />
 
@@ -364,7 +358,9 @@ function foo(x, y) {
         @code={{this.loadCustomGrammar}}
         @language="js"
       />
-      <p>Note: this is just an example way of how it's made possible, but not the recommended approach per se. In the future a more ergonomic, officially recommended way might be added.</p>
+      <p>Note: this is just an example way of how it's made possible, but not
+        the recommended approach per se. In the future a more ergonomic,
+        officially recommended way might be added.</p>
 
       <SectionSubtitle @text="Custom theme" />
       <p>Shiki ships with 29 themes available by default, but any VS Code theme
@@ -373,7 +369,8 @@ function foo(x, y) {
         <InlineCode>CodeBlock</InlineCode>
         component.</p>
 
-      <p>The following example shows a custom theme <InlineCode>Night Owl</InlineCode>:</p>
+      <p>The following example shows a custom theme
+        <InlineCode>Night Owl</InlineCode>:</p>
 
       <CodeBlock
         @name="app/routes/application.js"
@@ -382,7 +379,9 @@ function foo(x, y) {
         @theme="Night Owl"
         style="--ember-shiki-background-color: #011627"
       />
-      <p>Note: this is just an example way of how it's made possible, but not the recommended approach per se. In the future a more ergonomic, officially recommended way might be added.</p>
+      <p>Note: this is just an example way of how it's made possible, but not
+        the recommended approach per se. In the future a more ergonomic,
+        officially recommended way might be added.</p>
 
       <SectionSubtitle @text="Fastboot" />
       <p>The