Suggested colors

docs/_layouts/palette.njk

@@ -95,12 +95,7 @@
   </wa-button>
 </wa-callout>
 
-<wa-tab-group class="scale-filter" v-if="seedColors.length > 0" @wa-tab-show="show = $event.detail.name.slice(0, -7)">
-  <wa-tab panel="my-scales"><wa-icon name="star" variant="regular"></wa-icon> My scales</wa-tab>
-  <wa-tab panel="all-scales"><wa-icon name="rainbow" variant="regular"></wa-icon> All scales</wa-tab>
-  <wa-tab-panel name="my-scales"></wa-tab-panel>
-  <wa-tab-panel name="all-scales"></wa-tab-panel>
-</wa-tab-group>
+<h2>Scales</h2>
 
 {% include "palette.njk" %}
 
@@ -116,7 +111,7 @@
   </thead>
   {% raw %}
   <tbody v-cloak>
-    <tr v-for="hue in [...hues, 'gray']" v-show="show === 'all' || seedHues[hue]" :data-hue="hue"
+    <tr v-for="hue in [...hues, 'gray']" v-show="hue === 'gray' || seedHues[hue] || !isCustom" :data-hue="hue"
         class="color-scale" :class="{
           tweaking: hue === 'gray' ? tweaking.grayChroma : tweaking.hue?.[hue],
           tweaked: hue === 'gray' ? tweaked.grayChroma || tweaked.grayColor : hueShifts[hue],
@@ -125,7 +120,10 @@
           '--swatch-text-color': `light-dark(var(--wa-color-${ hue }-10), white)`,
           '--hue-shift': hueShifts[hue] || ''
         }">
-      <th>{{ capitalize(hue) }}</th>
+      <th>
+        {{ capitalize(hue) }}
+        <wa-icon v-if="isCustom && !seedHues[hue]" name="sparkles" style="color: var(--wa-color-gray-50)"></wa-icon>
+      </th>
       <td class="core-column" :style="{'--original-color': `var(--wa-color-${ hue })`, '--color': colors[hue][coreLevels[hue]]}">
         <wa-dropdown>
           <div slot="trigger" :id="`core-${ hue }-swatch`" class="color swatch" :style="{

docs/docs/palettes/app/custom.css

@@ -58,3 +58,41 @@
 .pinned-icon {
   opacity: 70%;
 }
+
+#suggested-colors {
+  display: grid;
+  grid-template-columns: minmax(auto, 30ch) 1fr;
+  gap: var(--wa-space-m);
+  margin-top: var(--wa-space-2xl);
+  container-name: suggested-colors;
+  container-type: inline-size;
+
+  @container (width < 30ch) {
+    grid-template-columns: 1fr;
+  }
+
+  h3 {
+    margin-bottom: 0;
+  }
+
+  p.wa-caption-s {
+    margin-block: var(--wa-space-s);
+    text-wrap: pretty;
+  }
+
+  .suggestions {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(6ch, 1fr));
+    gap: var(--wa-space-s);
+
+    wa-button {
+      wa-icon {
+        transition: var(--wa-transition-normal);
+      }
+
+      &:not(:focus, :hover) wa-icon {
+        opacity: 0;
+      }
+    }
+  }
+}

docs/docs/palettes/app/tweak.js

@@ -109,6 +109,18 @@ let paletteAppSpec = {
   },
 
   computed: {
+    suggestedColors() {
+      let ret = {};
+
+      for (let hue in this.coreColors) {
+        if (!this.seedHues[hue] && hue !== 'gray') {
+          ret[hue] = this.coreColors[hue];
+        }
+      }
+
+      return ret;
+    },
+
     isCustom() {
       return this.paletteId === 'custom';
     },

docs/docs/palettes/custom.njk

@@ -18,3 +18,25 @@ description: Create your own color palette from scratch, from one or more seed c
 		Add color
 	</wa-button>
 </div>
+
+<section id="suggested-colors">
+
+<header>
+	<h3>Suggestions</h3>
+
+	<p class="wa-caption-s">
+		Generated by our fancy-schmancy algorithm to complement your colors.<br>
+		See a color you like? Grab it before it’s gone!
+	</p>
+</header>
+
+<div class="suggestions">
+<template v-for="color, hue in suggestedColors">
+	<wa-button :id="'suggestion-hue-' + hue" :style="{'--background-color': color}" @click="seedColors.push(color + '')">
+		<wa-icon name="plus"></wa-icon>
+	</wa-button>
+	<wa-tooltip :for="'suggestion-hue-' + hue" v-content="capitalize(hue)"></wa-tooltip>
+</template>
+</div>
+
+</section>