fix: correct dark value in getLightDarkValue() for --rh-color-surface (#170)

* fix: correct dark value in getLightDarkValue() for --rh-color-surface

* docs: fix theme color token samp to use the last array value

* chore: undo accidentally pushed changes

Author: zeroedin

.changeset/tame-symbols-search.md

@@ -0,0 +1,5 @@
+---
+"@rhds/tokens": patch
+---
+
+Fixed dark value for `--rh-color-surface` in light-dark()

lib/11ty/preview-page-plugin.ts

@@ -207,7 +207,7 @@ export async function PreviewPagePlugin(eleventyConfig: UserConfig) {
           <td class="sample theme-token">
             <div class="values">
               <samp style="background-color: var(--${derefValue(token.original.$value.at(0))});"></samp>
-              <samp style="background-color: var(--${derefValue(token.original.$value.at(1))});"></samp>
+              <samp style="background-color: var(--${derefValue(token.original.$value.at(-1))});"></samp>
             </div>
           </td>
           <td class="token name">

lib/transforms/color.ts

@@ -61,8 +61,10 @@ export function getLightDarkValue(token: Token) {
   if (typeof token.$value === 'string' && token.$value.startsWith('light-dark')) {
     return token.$value;
   } else {
-    const [light, dark] = token.$value;
-    const [lightRef, darkRef] = token.original.$value;
+    const [light] = token.$value;
+    const dark = token.$value.at(-1);
+    const [lightRef] = token.original.$value;
+    const darkRef = token.original.$value.at(-1);
     return `light-dark(${deref(lightRef, light)}, ${deref(darkRef, dark)})`;
   }
 }