From 91d93d83f27b8713cf09399cd4bec5da4ac9bebd Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 26 Feb 2025 11:05:51 -0500
Subject: [PATCH] Emulate other palette

---
 docs/_layouts/palette.njk          | 2 +-
 docs/docs/palettes/edit/custom.css | 4 ++++
 docs/docs/palettes/edit/tweak.js   | 6 ++++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/_layouts/palette.njk b/docs/_layouts/palette.njk
index ef45beca4..082fd6336 100644
--- a/docs/_layouts/palette.njk
+++ b/docs/_layouts/palette.njk
@@ -167,7 +167,7 @@
             '--color-base': colorsMinusCurrentTweak[hue][tint],
             colorScheme: tint > 60 ? 'light' : 'dark'
           }">
-          <wa-icon name="thumbtack" v-if="seedHues[hue]?.[tint]"></wa-icon>
+          <wa-icon class="pinned-icon" name="thumbtack" v-if="seedHues[hue]?.[tint]"></wa-icon>
           <wa-copy-button :value="`--wa-color-${ hue }-${ tint }`" :copy-label="`--wa-color-${ hue }-${ tint }`"></wa-copy-button>
         </div>
       </td>
diff --git a/docs/docs/palettes/edit/custom.css b/docs/docs/palettes/edit/custom.css
index dc5aef342..c745fee1d 100644
--- a/docs/docs/palettes/edit/custom.css
+++ b/docs/docs/palettes/edit/custom.css
@@ -54,3 +54,7 @@
     }
   }
 }
+
+.pinned-icon {
+  opacity: 70%;
+}
diff --git a/docs/docs/palettes/edit/tweak.js b/docs/docs/palettes/edit/tweak.js
index 96c901a80..37baa5cb9 100644
--- a/docs/docs/palettes/edit/tweak.js
+++ b/docs/docs/palettes/edit/tweak.js
@@ -563,10 +563,12 @@ let paletteAppSpec = {
      * @param {string} paletteId
      */
     emulate(paletteId) {
+      this.seedColors = [];
+
       for (let hue in allPalettes[paletteId].colors) {
         if (hue !== 'gray') {
-          let coreTint = allPalettes.natural.colors[hue].maxChromaTint;
-          let coreColor = allPalettes.natural.colors[hue][coreTint];
+          let coreTint = allPalettes[paletteId].colors[hue].maxChromaTint;
+          let coreColor = allPalettes[paletteId].colors[hue][coreTint];
           this.seedColors.push(coreColor);
         }
       }