studio-engine 0.103.0.rc1 → 0.103.0.rc2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 773214119ffedd307e2f80ba808f5413cc69a2e9cb875c2997d7f7be0f120ce8
-  data.tar.gz: 9b6c272fd88d22717b6e69020146c936d8db1d04b88f5a9b3effe5764d64ec38
+  metadata.gz: 792f0e16ad48572393e4e8cf22f51d497e832af869b0d1bfe6dd5be6ac8da058
+  data.tar.gz: c862691168c2c8e782d4b4ec7d6d956058494b717fd2d4b2757f6d9f2bd60148
 SHA512:
-  metadata.gz: fd521d84d03c3c7a45e0fa1113d065db78a67ef5de36a8ac66b237b28b15a9cd562f8e703436b75f6419e927243d13ca99877f9d3493a59a6bf276b3b07cb269
-  data.tar.gz: '0508739a475558e609a1efc465d75f2f37aa71fcf9c3b7477a759d3a900b4d1353628a150d8304f7a7b6bb568958cc97e1c8943382e57733a6466c8b803157f2'
+  metadata.gz: 5d7b0b148093fca45e7ded99ad0056fc6a8a6e5dc698f1b85a4032414ae9a2a92b92ab94189ba3f7fc287b45fc40b1796e0b4807b910b08a99403b202d965c4a
+  data.tar.gz: 5c37ecd0f4c1f526cebe802cfc46a0dda47c4be3b1558ad57d2648de3fbfbf29fa122267551b5673f33000bf1edbaef0ba2a7154ab7f127c36fb099a14487015

data/CHANGELOG.md

@@ -4,6 +4,45 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+### Added
+
+- **`--color-primary-ink` and `text-primary-ink`: the primary colour as chip
+  text.** The theme resolver derives it per theme the way it derives the
+  danger, warning and success inks: the configured primary, shaded until it
+  clears WCAG AA 4.5:1 on every surface and on its own 10%, 15% and 20% tints.
+  `text-primary` and `--color-primary` stay the brand colour.
+
+### Changed
+
+- **Primary chips are painted in the primary colour and clear AA in both
+  themes.** `Studio::BadgeComponent`'s `tone: :primary` drew heading-coloured
+  text (white in dark, near-black in light), and its `scheme: "primary"`, the
+  Marketing chip on `/admin/emails` and the sidebar's ADMIN chip drew the raw
+  primary, 2.2:1 to 3.6:1 on its tint. All of them now draw `text-primary-ink`.
+  A host that copies the tone's class string (the hub's `status_tone`) changes
+  when it adopts the class.
+- **Every role ink clears AA on its 10%, 15% and 20% tints, as a browser
+  paints them.** The apps put the inks on the stronger tints too (turf's
+  "Entered" badge is `bg-primary/15`; the hub's workflow and verdict chips are
+  `bg-success/20 text-success-ink` and `bg-warning/20 text-warning-ink`), where
+  an ink tuned to the 10% chip read as low as 3.83:1 (default warning, dark, on
+  20%). The search now counts 0.10, 26/255 (how Chromium composites a 10%
+  fill), 0.15 and 0.20, each also one unit off in every channel, because 8-bit
+  compositing rounds (Chromium painted a 20% danger tint one unit lighter than
+  the blend, taking a 4.51:1 ink to 4.47:1). The inks darken in light and
+  lighten in dark. Default theme, 0.102.0 to this release:
+
+  | Ink | Dark | Light |
+  |---|---|---|
+  | primary (new) | `#BDB7FE` | `#58519D` |
+  | success | `#8EB791` to `#96BC99` | `#2E6C32` to `#2A622D` |
+  | warning | `#FF966C` to `#FFAE8D` | `#994A2B` to `#8F4528` |
+  | danger | `#F58F8F` to `#F79E9E` | `#AC3131` to `#9E2D2D` |
+
+  A configured role colour moves the same way; a configured colour that
+  already clears every tint (mcritchie-industries' yellow warning) keeps its
+  exact hex.
+
 ## 0.103.0 — 2026-10-10
 
 ### Added

data/app/components/studio/badge_component.rb

@@ -20,7 +20,8 @@ module Studio
   # rest of the page uses for that status. Tokens only, so it reads in both themes.
   #
   # scheme: is the palette the components/badge partial took (SCHEMES), including
-  # the stage-* pipeline ladder, and renders exactly what that partial rendered.
+  # the stage-* pipeline ladder. Its "primary" draws the primary ink; the rest
+  # render exactly what that partial rendered.
   # An unknown scheme renders FALLBACK, as the partial did.
   #
   # Pass tone: or scheme:, not both. Neither renders the neutral scheme.
@@ -34,7 +35,7 @@ module Studio
       success: "bg-success/10 text-success-ink border-success/40",
       warning: "bg-warning/10 text-warning-ink border-warning/40",
       danger: "bg-danger/10 text-danger-ink border-danger/40",
-      primary: "bg-primary/10 text-heading border-primary/40",
+      primary: "bg-primary/10 text-primary-ink border-primary/40",
       muted: "bg-surface-alt text-muted border-subtle"
     }.freeze
 
@@ -44,7 +45,7 @@ module Studio
       "warning" => "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
       "info" => "bg-blue-500/10 text-blue-500 border-blue-500/30",
       "violet" => "bg-violet/10 text-violet border-violet/30",
-      "primary" => "bg-primary/10 text-primary border-primary/30",
+      "primary" => "bg-primary/10 text-primary-ink border-primary/30",
       "orange" => "bg-orange-500/10 text-orange-500 border-orange-500/30",
       "emerald" => "bg-emerald-500/10 text-emerald-500 border-emerald-500/30",
       "gray" => "bg-gray-500/10 text-gray-400 border-gray-500/30",

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

@@ -27,7 +27,7 @@
       <div class="px-4 pt-4 pb-1 label-upper font-bold text-muted flex items-center gap-2">
         <span><%= section[:title] %></span>
         <% if section[:admin] %>
-          <span class="rounded border border-primary/20 bg-primary/10 px-1.5 py-0.5 text-[10px] font-mono text-primary">ADMIN</span>
+          <span class="rounded border border-primary/20 bg-primary/10 px-1.5 py-0.5 text-[10px] font-mono text-primary-ink">ADMIN</span>
         <% end %>
       </div>
 
@@ -92,7 +92,7 @@
     <% if sidebar_admin && sections.any? { |section| section[:admin] } %>
       <div class="px-4 pt-4 pb-1 label-upper font-bold text-muted flex items-center gap-2">
         <span>Geo</span>
-        <span class="rounded border border-primary/20 bg-primary/10 px-1.5 py-0.5 text-[10px] font-mono text-primary">ADMIN</span>
+        <span class="rounded border border-primary/20 bg-primary/10 px-1.5 py-0.5 text-[10px] font-mono text-primary-ink">ADMIN</span>
       </div>
       <%= render "components/geo_signpost", variant: :sidebar, close_action: close_action %>
     <% end %>

data/app/views/studio/emails/_row.html.erb

@@ -85,7 +85,7 @@
     <%= link_to entry.label, admin_email_path(entry.key),
           class: "font-semibold text-heading hover:text-primary underline-offset-2 hover:underline" %>
     <% if entry.marketing? %>
-      <span class="badge bg-primary/10 text-primary border-primary/30 ml-1.5 whitespace-nowrap">Marketing</span>
+      <span class="badge bg-primary/10 text-primary-ink border-primary/30 ml-1.5 whitespace-nowrap">Marketing</span>
     <% end %>
     <% if entry.description.present? %>
       <p class="text-sm text-body mt-0.5 max-w-md"><%= entry.description %></p>

data/app/views/studio/emails/show.html.erb

@@ -103,7 +103,7 @@
     </div>
 
     <div class="flex flex-wrap items-center gap-2 mt-3">
-      <span class="badge <%= @entry.marketing? ? "bg-primary/10 text-primary border-primary/30" : "bg-inset text-muted border-subtle" %> whitespace-nowrap">
+      <span class="badge <%= @entry.marketing? ? "bg-primary/10 text-primary-ink border-primary/30" : "bg-inset text-muted border-subtle" %> whitespace-nowrap">
         <%= @entry.type.to_s.titleize %>
       </span>
       <span class="<%= badge_class %> whitespace-nowrap"><%= badge_label %></span>

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

@@ -124,7 +124,7 @@
     </div>
   <% end %>
   <% chrome_kickoff = capture do %>
-    <span class="inline-flex items-center gap-1 rounded border border-primary/30 bg-primary/10 px-1.5 py-0.5 text-2xs font-semibold uppercase tracking-wide text-primary">kickoff slot</span>
+    <span class="inline-flex items-center gap-1 rounded border border-primary/30 bg-primary/10 px-1.5 py-0.5 text-2xs font-semibold uppercase tracking-wide text-primary-ink">kickoff slot</span>
   <% end %>
   <%
     # Per-column count_class colours (raw classes, the task_stage_count_classes shape),

data/lib/studio/theme_resolver.rb

@@ -117,6 +117,10 @@ module Studio
         "--color-danger-ink"     => status_ink(danger, surfaces, direction: :lighten),
         "--color-warning-ink"    => status_ink(warning, surfaces, direction: :lighten),
         "--color-success-ink"    => status_ink(success, surfaces, direction: :lighten),
+        # The primary role as chip TEXT (`bg-primary/10 text-primary-ink`): the
+        # brand hue, shaded per theme until it clears AA on the surfaces and on
+        # its own tint. --color-primary itself stays the brand colour.
+        "--color-primary-ink"    => status_ink(primary, surfaces, direction: :lighten),
         "--color-accent"         => colors[:accent] || "#F72585"
       }.merge(fill_vars(primary, warning, danger))
     end
@@ -165,6 +169,16 @@ module Studio
     # How strong a status role's tint is where its ink is read on it: the
     # `bg-<role>/10 text-<role>-ink` badge and flash-panel pattern.
     STATUS_TINT = 0.10
+    # Every tint strength a role's ink is read on. The 10% chip, as written and
+    # as an 8-bit alpha channel holds it (26/255, a little stronger), and the
+    # 15% and 20% tints the apps also put an ink on: a selected or "Entered"
+    # badge (`bg-primary/15`), the hub's workflow and verdict chips
+    # (`bg-success/20 text-success-ink`, `bg-warning/20 text-warning-ink`),
+    # turf's signer roster (`bg-danger/15 text-danger-ink`). A stronger tint
+    # sits closer to the ink, so an ink tuned to the 10% chip alone read 3.89:1
+    # on a 20% one (default warning, dark). 0.15 and 0.20 are the stronger of
+    # each written alpha and its 8-bit value (38/255 is weaker, 51/255 equal).
+    TINT_ALPHAS = [STATUS_TINT, (STATUS_TINT * 255).round / 255.0, 0.15, 0.20].freeze
 
     # A status ink lands on the page surfaces AND on its own role's tint over
     # each of them (the `bg-warning/10 text-warning-ink` badge). The tint is
@@ -172,9 +186,28 @@ module Studio
     # to the bare surfaces alone comes out below AA inside its own badge
     # (default theme: warning 3.91:1 dark, success 4.00:1 dark, danger 4.10:1
     # light and 4.18:1 dark). Counting the tints as surfaces closes that.
+    #
+    # The tint is counted at every strength in TINT_ALPHAS. Chromium composites
+    # a 10% fill at 26/255, a little stronger than 0.10, and an ink tuned to
+    # 0.10 alone measured 4.48:1 on the painted pixels (danger, dark, on a
+    # #141516 base).
+    #
+    # Each tint is also counted one unit lighter and one unit darker in every
+    # channel. A browser composites in 8 bits and rounds the fill's share and
+    # the surface's share separately, so a painted tint can sit one unit off
+    # the exact blend: the default danger at 20% over #3C3853 blends to
+    # #5F3A50 and Chromium paints #603B50, which took an ink graded 4.51:1 here
+    # to 4.47:1 on screen. Contrast moves with luminance, and luminance with
+    # each channel, so the two all-channel neighbours bound every rounding.
     def status_ink(role, surfaces, direction:)
-      tints = surfaces.map { |bg| ColorScale.blend(role, bg, STATUS_TINT) }
-      contrast_ink(role, direction: direction, start: 0.0, target: 4.5, against: surfaces + tints)
+      tints = TINT_ALPHAS.flat_map { |alpha| surfaces.map { |bg| ColorScale.blend(role, bg, alpha) } }
+      painted = tints.flat_map { |tint| [tint, nudge(tint, 1), nudge(tint, -1)] }
+      contrast_ink(role, direction: direction, start: 0.0, target: 4.5, against: surfaces + painted)
+    end
+
+    # `hex` with every channel moved `units` (clamped to 0..255).
+    def nudge(hex, units)
+      ColorScale.rgb_to_hex(*ColorScale.hex_to_rgb(hex).map { |c| c + units })
     end
 
     # The lightest shade of `color` that carries a white label at AA: the
@@ -307,6 +340,7 @@ module Studio
         "--color-danger-ink"     => status_ink(danger, surfaces, direction: :darken),
         "--color-warning-ink"    => status_ink(warning, surfaces, direction: :darken),
         "--color-success-ink"    => status_ink(success, surfaces, direction: :darken),
+        "--color-primary-ink"    => status_ink(primary, surfaces, direction: :darken),
         "--color-accent"         => colors[:accent] || "#F72585"
       }.merge(fill_vars(primary, warning, danger))
     end

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.103.0.rc1"
+  VERSION = "0.103.0.rc2"
 end

data/tailwind/studio.tailwind.config.js

@@ -103,6 +103,9 @@ module.exports = {
         'danger-ink':  'var(--color-danger-ink)',
         'warning-ink': 'var(--color-warning-ink)',
         'success-ink': 'var(--color-success-ink)',
+        // The primary role as chip text, derived the same way. text-primary
+        // stays the brand colour for links, icons and large text.
+        'primary-ink': 'var(--color-primary-ink)',
       },
       // The status-role FILLS: badge tints, flash panels, borders. Registered
       // for backgrounds and borders ONLY (not `colors`), so that registering

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.103.0.rc1
+  version: 0.103.0.rc2
 platform: ruby
 authors:
 - Alex McRitchie