layered-ui-rails 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8b3fa30f64b14c50db43ea23c4fbdb699903a7f4c2f957a8b22cd85772868a7b
-  data.tar.gz: 215e0d57d2403591bf31dd9d31ea05c281e5f36f83ebe822a4ae3aa902eabf0b
+  metadata.gz: b538d1b28b8718c6bcbaa3e9e21b8294b2e0556ca869433245d1e587ac7679a9
+  data.tar.gz: 775ec4083eb6e729eee0aa2c83c3ed5001fe258dd79c78ed476e103910797dda
 SHA512:
-  metadata.gz: 890b8e734f1b573143bf40deda9d3d5c64f1eb358f075a0a5e6608475eaeeb6dd0470675e68b90ac72f55f28f7a688bb19410bc99f5f77e3c590c2025c90ab50
-  data.tar.gz: 73c86751d4a39d80879c254fa35bae780c74ae4c7a5e45fb9c41c5634a6b69ce60632750e035176439c038646415a98e0b6988f389e8368cf1354348363a4553
+  metadata.gz: bfd719cd045e9ceb2a065c8ab8de722f6bc9187e541580dd39e7f11bd3672aae14628b04252fd0dc0de44dcc0656cb61df01954c210227a611a6bf4c5d187e1e
+  data.tar.gz: 4ac05f4a41d0cb312d67f0337136f77a3eecfb944089ce65be0c78fe15fe7a326edd7f06fa790c0b5cec1cb57cb2275c99d14d39015be3288ef35da7dffd706e

data/.claude/skills/layered-ui-rails/SKILL.md

@@ -150,7 +150,7 @@ All controllers use the `l-ui--` namespace and are auto-registered via importmap
 
 ## Theming
 
-Override CSS custom properties after the engine import. Values are space-separated HSL channels (no `hsl()` wrapper).
+Override CSS custom properties after the engine import. Values are space-separated HSL channels (e.g. `220 80% 55%`, or `0 0% 100%` for white). Keywords and hex/rgb won't work - tokens are wrapped in `hsl()` when consumed. A converter such as https://colorpicker.dev/ can help translate hex/rgb values.
 
 ```css
 @import "./layered_ui";
@@ -170,7 +170,9 @@ Key tokens: `--accent`, `--accent-foreground`, `--background`, `--foreground`, `
 
 Place files in `app/assets/images/layered_ui/` to replace engine defaults:
 
-`logo_light.svg`, `logo_dark.svg`, `icon_light.svg`, `icon_dark.svg`, `apple_touch_icon.png`, `panel_icon_light.svg`, `panel_icon_dark.svg`.
+`logo_light.svg`, `logo_dark.svg`, `icon_light.svg`, `icon_dark.svg`, `apple_touch_icon.png`.
+
+The panel toggle button uses an inline SVG that inherits `currentColor`. Recolor it by overriding the `--button-primary-icon` Tier 2 token, or replace the image by setting both `@l_ui_panel_icon_light_url` and `@l_ui_panel_icon_dark_url` (per-request).
 
 ## Optional integrations
 

data/.claude/skills/layered-ui-rails/references/CSS.md

@@ -222,8 +222,9 @@ WCAG 2.2 AA table pattern:
 .l-ui-panel__button             Floating action button
 .l-ui-panel__button--dragging   During drag
 .l-ui-panel__button--snapping   Snapping to edge
-.l-ui-panel__icon--light        Panel button icon (light)
-.l-ui-panel__icon--dark         Panel button icon (dark)
+.l-ui-panel__icon               Panel button inline SVG icon
+.l-ui-panel__icon--light        Panel button icon (light, for custom image override)
+.l-ui-panel__icon--dark         Panel button icon (dark, for custom image override)
 .l-ui-panel__resize-handle      Desktop resize handle
 .l-ui-panel__header             Panel header
 .l-ui-panel__header-heading     Panel title
@@ -282,7 +283,7 @@ WCAG 2.2 AA table pattern:
 
 ## Theming tokens
 
-All color values are space-separated HSL channels (e.g. `220 80% 55%`). Override after importing the engine CSS.
+All color values are space-separated HSL channels (e.g. `220 80% 55%`, or `0 0% 100%` for white). Override after importing the engine CSS. Keywords and hex/rgb won't work - tokens are wrapped in `hsl()` when consumed. A converter such as https://colorpicker.dev/ can help translate hex/rgb values.
 
 Tier 1 - Accent (quick branding):
 ```
@@ -301,7 +302,8 @@ Tier 2 - Full palette (override individually as needed):
 --surface               Card/surface background
 --surface-highlighted   Highlighted surface
 --button-primary-bg     Primary button background (defaults to --accent)
---button-primary-text   Primary button and floating icon text (defaults to --accent-foreground)
+--button-primary-text   Primary button text (defaults to --accent-foreground)
+--button-primary-icon   Icon color on filled icon buttons (defaults to --button-primary-text)
 --danger                Danger/error color
 --danger-light          Light danger background
 --danger-text           Danger text color
@@ -315,4 +317,4 @@ Tier 2 - Full palette (override individually as needed):
 --header-height         Header height (default 63px)
 ```
 
-Override --button-primary-text when your accent color needs a different text/icon color on buttons (e.g. a pink accent with white button text in dark mode).
+Override --button-primary-text when your accent color needs a different text/icon color on buttons (e.g. a pink accent with white button text in dark mode). Override --button-primary-icon instead when only the icon color should change.

data/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. This project follows [Semantic Versioning](https://semver.org/).
 
+## [0.7.0] - 2026-04-23
+
+### Added
+
+- `--button-primary-icon` Tier 2 token for filled icon buttons (e.g. `l-ui-panel__button`, `l-ui-scroll-to-bottom`). Defaults to `--button-primary-text`; override to recolor icons independently of button text.
+- Inline SVG default for the panel toggle button icon - inherits `currentColor` so it picks up `--button-primary-icon`. Per-request `@l_ui_panel_icon_light_url` / `@l_ui_panel_icon_dark_url` still replace the default image, and each theme falls back to the inline SVG independently when its variable is unset.
+- Documentation of the HSL-channel format for theme tokens (space-separated channels such as `220 80% 55%`) in `SKILL.md`, `references/CSS.md`, and the overrides generator, with a pointer to a hex/rgb converter.
+
+### Changed
+
+- `l-ui-scroll-to-bottom` now bakes the chevron-down icon into CSS via `mask-image` (with `-webkit-mask` prefixes and a URL-encoded SVG for Safari compatibility) and colours it with `--button-primary-icon`. Host markup is a plain empty `<button class="l-ui-scroll-to-bottom" aria-label="...">` - no inner `<svg>`/`<img>` required.
+
+### Removed
+
+- Static-file panel icon overrides (`panel_icon_light.svg`, `panel_icon_dark.svg` in `app/assets/images/layered_ui/`). Use `@l_ui_panel_icon_light_url` / `@l_ui_panel_icon_dark_url` instance variables to supply a custom image.
+
 ## [0.6.0] - 2026-04-19
 
 ### Added

data/README.md

@@ -150,8 +150,6 @@ Replace the defaults by placing files with the same names in `app/assets/images/
 | `icon_light.svg` | Favicon and header icon (light theme) |
 | `icon_dark.svg` | Favicon and header icon (dark theme) |
 | `apple_touch_icon.png` | Apple touch icon |
-| `panel_icon_light.svg` | Panel toggle button (light theme) |
-| `panel_icon_dark.svg` | Panel toggle button (dark theme) |
 
 layered-ui-rails uses two patterns for per-request overrides:
 

data/app/assets/tailwind/layered/ui/styles.css

@@ -61,6 +61,7 @@
     --surface-highlighted: 0 0% 91%;
     --button-primary-bg: var(--accent);
     --button-primary-text: var(--accent-foreground);
+    --button-primary-icon: var(--button-primary-text);
     --danger: 0 72% 38%;
     --danger-light: 0 100% 97%;
     --danger-text: 0 72% 35%;
@@ -89,6 +90,7 @@
     --surface-highlighted: 0 0% 16%;
     --button-primary-bg: var(--accent);
     --button-primary-text: var(--accent-foreground);
+    --button-primary-icon: var(--button-primary-text);
     --danger: 0 85% 60%;
     --danger-light: 0 93% 15%;
     --danger-text: 0 85% 64%;
@@ -166,6 +168,7 @@
   --color-surface-highlighted: hsl(var(--surface-highlighted));
   --color-button-primary-bg: hsl(var(--button-primary-bg));
   --color-button-primary-text: hsl(var(--button-primary-text));
+  --color-button-primary-icon: hsl(var(--button-primary-icon));
   --color-danger: hsl(var(--danger));
   --color-danger-light: hsl(var(--danger-light));
   --color-danger-text: hsl(var(--danger-text));
@@ -1384,7 +1387,7 @@ pre.l-ui-surface {
          z-40
          cursor-pointer
          bg-button-primary-bg
-         text-button-primary-text
+         text-button-primary-icon
          rounded-full
          focus-ring
          transition-all;
@@ -1411,6 +1414,10 @@ pre.l-ui-surface {
          opacity-0 pointer-events-none;
 }
 
+.l-ui-panel__icon {
+  @apply w-7 h-7;
+}
+
 .l-ui-panel__icon--light {
   @apply block
          dark:invert-0;
@@ -1655,12 +1662,25 @@ pre.l-ui-surface {
     ml-auto mr-0 -mt-9 h-9 w-9
     rounded-full
     cursor-pointer
-    bg-button-primary-bg text-button-primary-text
+    bg-button-primary-bg text-button-primary-icon
     focus-ring
     opacity-0 pointer-events-none
     transition-opacity duration-200;
 }
 
+.l-ui-scroll-to-bottom::before {
+  content: "";
+  @apply block w-4 h-4 bg-button-primary-icon;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+
 .l-ui-scroll-to-bottom[data-visible] {
   @apply
     opacity-100 pointer-events-auto;

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

@@ -65,7 +65,15 @@
     data-action="click->l-ui--panel-button#toggle mousedown->l-ui--panel-button#startDrag touchstart->l-ui--panel-button#startDrag"
     data-l-ui--panel-target="actionButton"
   >
-    <%= image_tag(@l_ui_panel_icon_light_url.presence || "layered_ui/panel_icon_light.svg", alt: "", class: "l-ui-icon--lg l-ui-panel__icon--light", aria: { hidden: true }) %>
-    <%= image_tag(@l_ui_panel_icon_dark_url.presence || "layered_ui/panel_icon_dark.svg", alt: "", class: "l-ui-icon--lg l-ui-panel__icon--dark", aria: { hidden: true }) %>
+    <% if @l_ui_panel_icon_light_url.present? %>
+      <%= image_tag(@l_ui_panel_icon_light_url, alt: "", class: "l-ui-icon--lg l-ui-panel__icon--light", aria: { hidden: true }) %>
+    <% else %>
+      <svg class="l-ui-panel__icon l-ui-panel__icon--light" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
+    <% end %>
+    <% if @l_ui_panel_icon_dark_url.present? %>
+      <%= image_tag(@l_ui_panel_icon_dark_url, alt: "", class: "l-ui-icon--lg l-ui-panel__icon--dark", aria: { hidden: true }) %>
+    <% else %>
+      <svg class="l-ui-panel__icon l-ui-panel__icon--dark" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
+    <% end %>
   </button>
 </div>

data/lib/generators/layered/ui/create_overrides_generator.rb

@@ -26,8 +26,10 @@ module Layered
              * This file is NOT overwritten by the install generator, so your
              * changes are preserved when you upgrade layered-ui-rails.
              *
-             * Values are HSL channels: <hue> <saturation>% <lightness>%
-             * Example:  --accent: 220 80% 55%;
+             * Values are space-separated HSL channels (e.g. `220 80% 55%`,
+             * or `0 0% 100%` for white). Keywords and hex/rgb won't work -
+             * tokens are wrapped in `hsl()` when consumed. A converter such
+             * as https://colorpicker.dev/ can help translate hex/rgb values.
              */
 
             /* ----------------------------------------------------------------
@@ -38,7 +40,9 @@ module Layered
              *
              * If your accent color needs a different text/icon color on
              * buttons (e.g. a pink accent with white button text in dark
-             * mode), override --button-primary-text in Tier 2 below.
+             * mode), override --button-primary-text in Tier 2 below. To
+             * recolor only the icon (leaving button text unchanged),
+             * override --button-primary-icon instead.
              * ---------------------------------------------------------------- */
 
             :root {
@@ -69,6 +73,7 @@ module Layered
               --surface-highlighted: 0 0% 91%;
               --button-primary-bg: var(--accent);
               --button-primary-text: var(--accent-foreground);
+              --button-primary-icon: var(--button-primary-text);
               --danger: 0 72% 38%;
               --danger-light: 0 100% 97%;
               --danger-text: 0 72% 35%;
@@ -91,6 +96,7 @@ module Layered
               --surface-highlighted: 0 0% 16%;
               --button-primary-bg: var(--accent);
               --button-primary-text: var(--accent-foreground);
+              --button-primary-icon: var(--button-primary-text);
               --danger: 0 85% 60%;
               --danger-light: 0 93% 15%;
               --danger-text: 0 85% 64%;

data/lib/layered/ui/version.rb

@@ -1,5 +1,5 @@
 module Layered
   module Ui
-    VERSION = "0.6.0"
+    VERSION = "0.7.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: layered-ui-rails
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.7.0
 platform: ruby
 authors:
 - layered.ai