From 4533052841cef75d02eb74f035b124cd1e0dc793 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Fri, 30 Aug 2024 17:28:16 +0300
Subject: [PATCH] docs: fix sampe

---
 docs/index.html                 | 3 +--
 lib/11ty/preview-page-plugin.ts | 9 ++++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index a6840e2..2dbb5f9 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -41,8 +41,7 @@
         });
       }
 
-      const surface = document.getElementById('theme-link-demo');
-      const card = surface.querySelector('rh-card');
+      const surface = document.querySelector('rh-surface');
 
       surface.addEventListener('change', function(event) {
         const next = event.target.checked ? 'darkest' : 'lightest';
diff --git a/lib/11ty/preview-page-plugin.ts b/lib/11ty/preview-page-plugin.ts
index 92e271a..9dc5471 100644
--- a/lib/11ty/preview-page-plugin.ts
+++ b/lib/11ty/preview-page-plugin.ts
@@ -31,8 +31,11 @@ const capitalize = x =>
 const isRef = x =>
   x?.original?.$value?.startsWith?.('{') ?? false;
 
+const derefValue = x =>
+  `rh-${x.replace(/[{}]/g, '').split('.').join('-')}`;
+
 const deref = x =>
-  `rh-${x.original.$value.replace(/[{}]/g, '').split('.').join('-')}`;
+  derefValue(x.original.$value);
 
 /** Returns a string with common indent stripped from each line. Useful for templating HTML */
 function dedent(str) {
@@ -176,8 +179,8 @@ export async function PreviewPagePlugin(eleventyConfig: UserConfig) {
         <tr id="${token.name}" class="${path.join(' ')} theme" data-name="${name}">
           <td class="sample theme-token">
             <div class="values">
-              <samp style="background-color: var(--${token.name}-on-light);"></samp>
-              <samp style="background-color: var(--${token.name}-on-dark);"></samp>
+              <samp style="background-color: var(--${derefValue(token.original.$value.at(0))});"></samp>
+              <samp style="background-color: var(--${derefValue(token.original.$value.at(1))});"></samp>
             </div>
           </td>
           <td class="token name">