Recolor primary-button icons from token via mask, not invert (#90)

* Recolor primary-button icons from token via mask, not invert

The .l-ui-button--primary .l-ui-icon rule used a binary invert filter,
which can only produce black or white. Accents with a non-white
foreground rendered the wrong icon colour and had to be patched out
downstream with filter: none.

Paint the icon from the existing --button-primary-icon token using a CSS
mask (the technique already used for the select dropdown arrow), with a
higher-specificity .dark override so the base dark:invert can't flip the
token colour. The panel hide button - the only such call site - now
emits the SVG as --l-ui-icon-src on a span instead of an img src.

The broadly-used .l-ui-icon img + dark:invert behaviour is unchanged.

* Quote url() in panel icon inline style for robustness

Author: thomasgallagher

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. This projec
 
 ## [Unreleased]
 
+### Fixed
+
+- Primary-button icons (e.g. the panel hide button) are now painted from the `--button-primary-icon` token via a CSS mask instead of a binary `invert` filter. `invert` could only ever produce black or white, so accents with a non-white foreground rendered the wrong colour and had to be patched out downstream with `filter: none`. Any accent foreground now works in both themes; the downstream override can be removed.
+
 ### Changed
 
 - **Breaking (install flow):** the engine's CSS is now served directly from the gem using [tailwindcss-rails' engine support](https://github.com/rails/tailwindcss-rails#rails-engines-support-experimental) instead of being copied into the host app. The install generator no longer creates `app/assets/tailwind/layered_ui.css`; instead it adds `@import "../builds/tailwind/layered_ui";` to your `application.css`. The CSS now stays in sync with the installed gem version automatically - no need to re-run the generator after upgrading.

app/assets/tailwind/layered_ui/engine.css

@@ -581,8 +581,20 @@
   @apply dark:invert;
 }
 
+/* Painted from the --button-primary-icon token via a mask, so any accent
+   foreground works in both themes (not just black/white as `invert` allowed).
+   The icon shape comes from --l-ui-icon-src, set inline at the call site. */
 .l-ui-button--primary .l-ui-icon {
-  @apply invert dark:invert-0;
+  @apply inline-block shrink-0;
+  background-color: var(--button-primary-icon);
+  -webkit-mask: var(--l-ui-icon-src) no-repeat center / contain;
+          mask: var(--l-ui-icon-src) no-repeat center / contain;
+}
+
+/* Higher specificity than `.dark .l-ui-icon` so the base dark-mode invert
+   does not flip the token colour above. */
+.dark .l-ui-button--primary .l-ui-icon {
+  filter: none;
 }
 
 .l-ui-icon--xs {

app/views/layouts/layered_ui/_panel.html.erb

@@ -41,7 +41,7 @@
                 title="Toggle panel (Ctrl+i / ⌘i)"
                 data-action="click->l-ui--panel#toggle"
                 data-l-ui--panel-target="hideButton">
-                <%= image_tag "layered_ui/icon_panel_close.svg", alt: "", class: "l-ui-icon l-ui-icon--sm", aria: { hidden: true } %>
+                <span class="l-ui-icon l-ui-icon--sm" style="--l-ui-icon-src: url('<%= asset_path "layered_ui/icon_panel_close.svg" %>')" aria-hidden="true"></span>
               </button>
             </div>
           </div>