Fix for theme icons + easier to generate palette icons (#841)

* Make sure components that only appear within page icons are still detected

* Palette icons

* Update theme-icons.css

* Reduce whitespace between swatches

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>

docs/_includes/svgs/palette.njk

@@ -1,31 +1,20 @@
 {% set paletteId = palette.fileSlug or page.fileSlug %}
 {% set suffixes = ['-80', '', '-20'] %}
-{% set width = 20 %}
-{% set height = 12 %}
-{% set height_core = 20 %}
-{% set gap_x = 4 %}
-{% set gap_y = 4 %}
 
-{% set total_width = (width + gap_x) * hues|length %}
-{% set total_height = (height + gap_y) * suffixes|length + (height_core - height) %}
-<svg viewBox="0 0 {{ total_width }} {{ total_height }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
-<style>
-	@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});
-	.palette-icon {
-		height: 8ch;
-	}
-</style>
+<wa-scoped class="palette-icon-host">
+  <template>
+    <link rel="stylesheet" href="/dist/styles/color/{{ paletteId }}.css">
+    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
 
-{% for hue in hues -%}
-  {% set hueIndex = loop.index0 %}
-  {% set y = 0 %}
-  {% for suffix in suffixes -%}
-    {% set swatch_height = height if suffix else height_core %}
-
-    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ y }}"
-	      width="{{ width }}" height="{{ swatch_height }}"
-	      fill="var(--wa-color-{{ hue }}{{ suffix }})" rx="2" />
-	{% set y = y + swatch_height + gap_y %}
-  {%- endfor %}
-{% endfor %}
-</svg>
+    <div class="palette-icon" style="--hues: {{ hues|length }}; --suffixes: {{ suffixes|length }}">
+      {% for hue in hues -%}
+        {% set hueIndex = loop.index %}
+        {% for suffix in suffixes -%}
+          <div class="swatch"
+               data-hue="{{ hue }}" data-suffix="{{ suffix }}"
+               style="--color: var(--wa-color-{{ hue }}{{ suffix }}); grid-column: {{ hueIndex }}; grid-row: {{ loop.index }}">&nbsp;</div>
+        {%- endfor %}
+      {%- endfor %}
+    </div>
+  </template>
+</wa-scoped>

docs/assets/components/scoped.js

@@ -2,8 +2,8 @@
  * Low-level utility to encapsulate a bit of HTML (mainly to apply certain stylesheets to it without them leaking to the rest of the page)
  * Usage: <wa-scoped><template><!-- your HTML here --></template></wa-scoped>
  */
+import { discover } from '/dist/webawesome.js';
 
-// Map of <wa-scoped> elements to any global <style> elements they’ve created
 const imports = new Set();
 const fontFaceRules = new Set();
 
@@ -52,6 +52,8 @@ export default class WaScoped extends HTMLElement {
     this.#fixStyles();
     this.#applyDarkMode();
 
+    discover(this.shadowRoot);
+
     this.observer.observe(this, { childList: true, subtree: true, characterData: true });
   }
 

docs/assets/styles/theme-icons.css

@@ -1,25 +1,49 @@
 wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) {
-  min-width: 22ch;
-
   &::part(header) {
     /* We want to add a background color, so any spacing needs to go on .theme-icon */
+    flex: 1;
     padding: 0;
     min-block-size: 0;
   }
 
   [slot='header'] {
-    display: block;
     width: 100%;
+  }
+}
+
+.theme-icon-host,
+.palette-icon-host {
+  flex: 1;
+  border-radius: inherit;
+
+  &[slot='header'],
+  [slot='header']:has(&) {
+    flex: 1;
     border-radius: inherit;
   }
 }
 
-.theme-icon-host {
-  display: block;
-  border-radius: inherit;
+.palette-icon {
+  display: grid;
+  grid-template-columns: repeat(var(--hues, 9), 1fr);
+  gap: var(--wa-space-3xs);
+  min-width: 20ch;
+  min-height: 9ch;
+  align-content: center;
+
+  .swatch {
+    height: 0.7em;
+    background: var(--color);
+    border-radius: var(--wa-border-radius-s);
+
+    &[data-suffix=''] {
+      height: 1.1em;
+    }
+  }
 }
 
 .theme-icon {
+  min-width: 18ch;
   padding: var(--wa-space-xs) var(--wa-space-m);
   border-radius: inherit;
   box-sizing: border-box;