studio-engine 0.80.0 → 0.81.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7b9678d8f3c7e2fbb15531909b721ff80ccd9e933d15c283e0c7fa1861137b11
-  data.tar.gz: c495551acf3d80d22f1c7760d65cabb0f949021680f94f152514e409c117400a
+  metadata.gz: 3ba5fe314a5d1bbb6b2b95d12a2561bf3f87c2e302ced48eb365e2587c7ba7ee
+  data.tar.gz: de2c065be4ed44da716d10331c23edfda0ca08c05f333b0324457b860d4db073
 SHA512:
-  metadata.gz: 9c28aa14a0b3a28ca0dd876fc0835431f66588159ec3d11e79f6319f9350be50e4a49d4e6891253334a07f3a0c49db0974e74819b2d2d6f40a17460f5b8e68f9
-  data.tar.gz: 1221cfc40625adeda5fda0293de168969e95d50e43ecb01f2dde1c21c2d0b0f41807b10118f63f291ca74c094f7b1eec1ae23dc4b107be6e6543de8c5b2274ca
+  metadata.gz: 1eac79405823182fa089630acf41324de6238af3dead7f97136a97db2a0062f1443ae2538446cecace96bbe30655c3b889dbf1bba05478492d59c514bbcb3238
+  data.tar.gz: 56637c4be0db6c8701eaab6397bd6631f34f609ba986574d48382b458e52e415b3854598efc24b1894b1cfd43fdb8e81298754b57026657d8816a4e351a2bdad

data/CHANGELOG.md

@@ -4,6 +4,26 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.81.0 — 2026-09-30
+
+### Changed
+
+- **Default warning and danger buttons clear WCAG AA under their white label.**
+  While an app leaves its warning at the engine default `#FF7C47` (2.55:1 under
+  white), the resolver emits `--color-warning-fill` (`#B85933`, 4.65:1); while it
+  leaves danger at `#EF4444` (3.76:1), it emits `--color-danger-fill`
+  (`#D73D3D`, 4.54:1). `btn-warning` and `btn-danger` paint the fill and fall back
+  to `--color-warning` / `--color-danger`, so a configured colour paints as
+  before. The role colours themselves, their borders and rings, and the
+  `--color-warning-ink` / `--color-danger-ink` text inks are unchanged. Labels
+  stay white.
+- **An admin sees one admin cog at every width.** `components/_user_nav` draws its
+  admin menu from `md` up only, as it already did the theme toggle: below `md` the
+  navbar's phone row draws the cog, so an admin's phone showed two.
+  `components/_admin_dropdown` takes an optional `display_class:` for this. Apps
+  that shadow `_user_nav` (mcritchie-studio, turf-monster, cyvasse) are unaffected
+  until they drop their copy.
+
 ## 0.80.0 — 2026-09-30
 
 ### Added

data/app/assets/tailwind/studio_engine/engine.css

@@ -265,17 +265,23 @@ body.modal-open .studio-app-banner {
   }
 }
 
+/* The fill is --color-danger-fill when the resolver emits one (only while the
+   app leaves its danger colour at the engine default, which fails AA under the
+   white label), otherwise the app's own --color-danger. */
 @utility btn-danger {
   @apply text-white;
-  background-color: var(--color-danger);
+  background-color: var(--color-danger-fill, var(--color-danger));
   &:hover {
     filter: brightness(0.9);
   }
 }
 
+/* The fill is --color-warning-fill when the resolver emits one (only while the
+   app leaves its warning colour at the engine default, which fails AA under the
+   white label), otherwise the app's own --color-warning. */
 @utility btn-warning {
   @apply text-white;
-  background-color: var(--color-warning);
+  background-color: var(--color-warning-fill, var(--color-warning));
   &:hover {
     filter: brightness(0.9);
   }

data/app/views/components/_admin_dropdown.html.erb

@@ -1,8 +1,12 @@
 <%# ADMIN chrome: renders only for admin? viewers. Signed-out and
     non-admin visitors get nothing — this partial once leaked admin
     links onto a public landing page. %>
+<%# display_class: optional display utilities for the root. The user nav
+    passes "hidden md:block" because below md the navbar's phone row draws
+    its own cog, and two read as a double gear (engine-button-contrast-admin-cog). %>
+<% display_class = local_assigns.fetch(:display_class, nil) %>
 <% if respond_to?(:admin?) && admin? %>
-<div x-data="{ open: false }" class="relative leading-none">
+<div x-data="{ open: false }" class="<%= ["relative leading-none", display_class].compact.join(" ") %>">
   <button @click="open = !open" class="flex text-secondary hover:text-heading transition" title="Admin">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
       <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />

data/app/views/components/_user_nav.html.erb

@@ -86,8 +86,10 @@
         <div class="flex items-center gap-2 ml-auto self-end">
           <%= studio_nav_slot.call(extra_icons_slot, extra_icons_html) %>
           <%# Skipped when the link sidebar carries the admin menu — two cog
-              glyphs side by side read as a double gear. %>
-          <%= render "components/admin_dropdown" unless respond_to?(:studio_sidebar_replaces_admin_menu?) && studio_sidebar_replaces_admin_menu? %>
+              glyphs side by side read as a double gear. Desktop only, like
+              the theme toggle: below md the navbar's phone row draws the cog,
+              so a second one here put two on an admin's phone. %>
+          <%= render "components/admin_dropdown", display_class: "hidden md:block" unless respond_to?(:studio_sidebar_replaces_admin_menu?) && studio_sidebar_replaces_admin_menu? %>
           <%# Desktop only. Below md the engine navbar's phone row draws the
               theme toggle, so a second one here put two on every phone. The
               signed-out bar has always done it this way (layouts/_navbar). %>
@@ -219,7 +221,7 @@
       <span class="<%= account_classes %>" data-nav-account x-bind:style="$store.devMode && 'background: lightgreen'"><%= account_inner %></span>
     <% end %>
   <% else %>
-    <%= render "components/admin_dropdown" unless respond_to?(:studio_sidebar_replaces_admin_menu?) && studio_sidebar_replaces_admin_menu? %>
+    <%= render "components/admin_dropdown", display_class: "hidden md:block" unless respond_to?(:studio_sidebar_replaces_admin_menu?) && studio_sidebar_replaces_admin_menu? %>
     <%# Desktop only, as above: the phone row carries the toggle below md. %>
     <span class="hidden md:flex" data-nav-theme-toggle="desktop"><%= render "components/theme_toggle_morph" %></span>
     <div class="flex items-center gap-3 ml-auto">

data/app/views/style/_theme.html.erb

@@ -191,8 +191,8 @@
           d.setProperty('--color-cta', this.colors.primary);
           d.setProperty('--color-cta-fill', this.colors.primary);
           if (this.colors.success) d.setProperty('--color-success', this.colors.success);
-          if (this.colors.warning) d.setProperty('--color-warning', this.colors.warning);
-          if (this.colors.danger)  d.setProperty('--color-danger', this.colors.danger);
+          if (this.colors.warning) { d.setProperty('--color-warning', this.colors.warning); d.setProperty('--color-warning-fill', this.colors.warning); }
+          if (this.colors.danger)  { d.setProperty('--color-danger', this.colors.danger);   d.setProperty('--color-danger-fill', this.colors.danger); }
         },
         persist(form, label) {
           if (this.saving) return;

data/app/views/theme_settings/edit.html.erb

@@ -337,6 +337,13 @@
         document.documentElement.style.setProperty('--color-success', this.colors.success);
         document.documentElement.style.setProperty('--color-warning', this.colors.warning || '#FF7C47');
         document.documentElement.style.setProperty('--color-danger', this.colors.danger || '#EF4444');
+        // btn-warning/btn-danger paint --color-<role>-fill first (the resolver
+        // emits it for the engine defaults), so a typed colour must set it too
+        // or the specimens keep the default fill. Cleared: drop the override.
+        ['warning', 'danger'].forEach((role) => {
+          if (this.colors[role]) document.documentElement.style.setProperty(`--color-${role}-fill`, this.colors[role]);
+          else document.documentElement.style.removeProperty(`--color-${role}-fill`);
+        });
       },
 
       darkPreviewStyle() {

data/lib/studio/theme_resolver.rb

@@ -9,6 +9,12 @@ module Studio
     # green measured 2.78:1 under the white label btn-success draws on it. This
     # is the same hue at 5.0:1 (the shade cyvasse chose for its own success).
     DEFAULT_SUCCESS = "#367E3A"
+    # The default warning and danger stay these hexes as ROLE colours (borders,
+    # rings, the -ink derivations start from them). Their button fills are
+    # derived separately, see #fill_vars: #FF7C47 is 2.55:1 and #EF4444 3.76:1
+    # under the white label btn-warning and btn-danger draw.
+    DEFAULT_WARNING = "#FF7C47"
+    DEFAULT_DANGER  = "#EF4444"
 
     # WCAG AA for normal-size text. Every filled button draws a 14px bold white
     # label, which is not "large" text, so its fill owes 4.5:1 against white.
@@ -44,8 +50,8 @@ module Studio
       primary     = colors[:primary] || DEFAULT_PRIMARY
       border_rgb  = ColorScale.lighten(dark_base, 0.30)
       success     = colors[:success] || DEFAULT_SUCCESS
-      warning     = colors[:warning] || "#FF7C47"
-      danger      = colors[:danger] || "#EF4444"
+      warning     = colors[:warning] || DEFAULT_WARNING
+      danger      = colors[:danger] || DEFAULT_DANGER
       surfaces    = dark_surfaces(dark_base)
 
       secondary_ink = contrast_ink(dark_base, direction: :lighten, start: 0.70, target: 4.5, against: surfaces)
@@ -114,7 +120,7 @@ module Studio
         "--color-warning-ink"    => status_ink(warning, surfaces, direction: :lighten),
         "--color-success-ink"    => status_ink(success, surfaces, direction: :lighten),
         "--color-accent"         => colors[:accent] || "#F72585"
-      }.merge(fill_vars(primary, success))
+      }.merge(fill_vars(primary, warning, danger))
     end
 
     # Every dark-mode background a text var can sit on (page, surface,
@@ -197,13 +203,23 @@ module Studio
     # label with its orange (a darkened fill would drop it to 3.3:1), and
     # cyvasse sets --color-cta itself.
     #
+    # --color-warning-fill and --color-danger-fill are the same contract for
+    # btn-warning and btn-danger (engine-button-contrast-admin-cog): emitted
+    # only while the role is at its engine default (#FF7C47 at 2.55:1, #EF4444
+    # at 3.76:1 under white), so a CONFIGURED colour paints as-is through the
+    # var(--color-<role>) fallback — mcritchie-industries' yellow warning is
+    # its own call. The role colour itself is not darkened: it is also a
+    # border, a ring and the start of its -ink search, which text reads.
+    #
     # Success needs no fill var: its DEFAULT is already AA under white
     # (DEFAULT_SUCCESS), and a configured success colour is the app's own —
     # turf-monster's suite pins that a configured #4BAF50 still paints as-is.
-    def fill_vars(primary, _success)
-      return {} unless primary.to_s.casecmp?(DEFAULT_PRIMARY)
-
-      { "--color-cta-fill" => white_label_fill(primary) }
+    def fill_vars(primary, warning, danger)
+      {
+        "--color-cta-fill"     => (white_label_fill(primary) if primary.to_s.casecmp?(DEFAULT_PRIMARY)),
+        "--color-warning-fill" => (white_label_fill(warning) if warning.to_s.casecmp?(DEFAULT_WARNING)),
+        "--color-danger-fill"  => (white_label_fill(danger) if danger.to_s.casecmp?(DEFAULT_DANGER))
+      }.compact
     end
 
     # The hover fill is always derived, so it is always held to AA under white:
@@ -251,8 +267,8 @@ module Studio
       light_base = colors[:light] || "#f8fafc"
       primary    = colors[:primary] || DEFAULT_PRIMARY
       success    = colors[:success] || DEFAULT_SUCCESS
-      warning    = colors[:warning] || "#FF7C47"
-      danger     = colors[:danger] || "#EF4444"
+      warning    = colors[:warning] || DEFAULT_WARNING
+      danger     = colors[:danger] || DEFAULT_DANGER
       surfaces   = light_surfaces(light_base)
 
       secondary_ink = contrast_ink(light_base, direction: :darken, start: 0.55, target: 4.5, against: surfaces)
@@ -303,7 +319,7 @@ module Studio
         "--color-warning-ink"    => status_ink(warning, surfaces, direction: :darken),
         "--color-success-ink"    => status_ink(success, surfaces, direction: :darken),
         "--color-accent"         => colors[:accent] || "#F72585"
-      }.merge(fill_vars(primary, success))
+      }.merge(fill_vars(primary, warning, danger))
     end
   end
 end

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.80.0"
+  VERSION = "0.81.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.80.0
+  version: 0.81.0
 platform: ruby
 authors:
 - Alex McRitchie