inline_forms 8.1.20 → 8.1.40

data/Gemfile

@@ -5,5 +5,17 @@ gemspec name: "inline_forms"
 # Local sibling until validation_hints 8.0.0 is on RubyGems (maintainer dev only).
 gem "validation_hints", path: "../validation_hints"
 
-# Engine loads TurboTabsBuilder at require time (used in generated apps).
-gem "tabs_on_rails", "~> 3.0"
+# test/dummy host-app stand-ins: the engine expects the host to supply these
+# (generated apps get them from the installer Gemfile). Used only by the
+# integration tests under test/integration/.
+group :test do
+  gem "sqlite3", ">= 2.1"
+  gem "will_paginate", "~> 4.0"
+  gem "paper_trail", "~> 17.0"
+  gem "turbo-rails"
+end
+
+group :development, :test do
+  # Rails omakase style; offenses grandfathered in .rubocop_todo.yml.
+  gem "rubocop-rails-omakase", require: false
+end

data/README.rdoc

@@ -46,17 +46,18 @@ The installer emits +devise_for :users, class_name: "Member", path: "members"+ (
 
 Then point your browser to http://localhost:3000/apartments and log in with admin@example.com / admin999. The example also adds integration and model tests; run +bundle exec rails test+ in +MyApp+, then start the server with +bundle exec rails s+ when you want the UI.
 
-The example app now ships three models:
+The example app ships four demo models (plus the +User+ / +Role+ / +Locale+ auth trio):
 
 * +Apartment+ — top-level resource at +/apartments+ (root).
 * +Photo+ — nested under Apartment (+has_many+ / +belongs_to+).
 * +Owner+ — top-level resource at +/owners+. An Owner +has_many+ Apartments; an Apartment +belongs_to+ a single (optional) Owner. The Owner detail panel at +/owners/:id+ ships two sub-tabs, +NAW+ (name, birthdate, address, city, country) and +Apartments+ (name + the owned-apartments checklist). +name+ deliberately appears on both tabs.
+* +FormElementShowcase+ — one row per kept Tier 1 form element (numbers, dates, choices, scales, uploads incl. a +multi_image_field+ gallery, rich text, HABTM checklist), seeded as "Full demo" / "Empty demo" so every show/edit branch renders and is regression-tested.
 
 On the +Apartments+ tab, +Owner#apartments+ is rendered as a +:check_list+ of *existing* apartments rather than the default +:associated+ "build new nested row" panel, so the user re-assigns the +apartments.owner_id+ FK by ticking checkboxes (using Rails' built-in +apartment_ids=+ setter on +has_many+).
 
-The tabs are wired with +tabs_on_rails+ (+set_tab+ / +current_tab?+) and +InlineForms::TurboTabsBuilder+, a small subclass of +TabsOnRails::Tabs::TabsBuilder+ that threads HTML options through to the tab's +<a>+ (upstream 3.0 can only annotate the +<li>+). Each tab link carries +data-turbo-frame+ targeting the surrounding row +<turbo-frame>+, so switching tabs is a single Turbo partial swap — no UJS, no +data-remote+. The active tab is emitted as an hrefless +<a aria-current="page" aria-selected="true">+ inside +<li class="tabs-title is-active">+ so Foundation 6's tabs CSS (+.tabs-title.is-active > a+ / +[aria-selected='true']+) styles it without needing custom overrides.
+The tabs are wired with +InlineForms::Tabs+ (+set_tab+ / +current_tab?+ / +tabs_tag+ — vendored into the engine since 8.1.23, replacing the unmaintained +tabs_on_rails+ gem with the same API) and +InlineForms::TurboTabsBuilder+, a small subclass of +InlineForms::Tabs::TabsBuilder+ that threads HTML options through to the tab's +<a>+ (the classic builder can only annotate the +<li>+). Each tab link carries +data-turbo-frame+ targeting the surrounding row +<turbo-frame>+, so switching tabs is a single Turbo partial swap — no UJS, no +data-remote+. The active tab is emitted as an hrefless +<a aria-current="page" aria-selected="true">+ inside +<li class="tabs-title is-active">+ so Foundation 6's tabs CSS (+.tabs-title.is-active > a+ / +[aria-selected='true']+) styles it without needing custom overrides.
 
-The example app also seeds three apartments (+Apt 1+, +Apt 2+, +Apt 3+, each with three CC0 placeholder photos from the gem's +pics/+ folder) and three owners — +Maria Martinez+ (owns +Apt 1+ + +Apt 2+), +Jean-Pierre Dupont+ (owns +Apt 3+), and +Akira Tanaka+ (owns none) — so the +has_many+ panel has at least one zero / one / many case to click through.
+The example app also seeds three apartments (+Apt 1+, +Apt 2+, +Apt 3+, each with three CC0 placeholder photos shipped with the installer — labeled pastel PNGs like "Apt 1 / Living Room"; override with your own folder via +INLINE_FORMS_SEED_PICS+) and three owners — +Maria Martinez+ (owns +Apt 1+ + +Apt 2+), +Jean-Pierre Dupont+ (owns +Apt 3+), and +Akira Tanaka+ (owns none) — so the +has_many+ panel has at least one zero / one / many case to click through.
 
 You can install the example application manually if you like:
 
@@ -78,9 +79,9 @@ Then point your browser to http://localhost:3000/apartments and log in with admi
 
 == Per-resource Turbo tabs (+InlineForms::TurboTabsBuilder+)
 
-Upstream +tabs_on_rails 3.0+ (+TabsOnRails::Tabs::TabsBuilder#tab_for(tab, name, url_options, item_options = {})+) only applies the 4th argument to the +<li>+ wrapper; nothing is forwarded to the +<a>+. That used to be fine under Rails UJS (every link with +data-remote="true"+ was hijacked into an XHR regardless), but Turbo needs the data attribute on the +<a>+ itself (typically +data-turbo-frame="..."+).
+The classic builder API (+tab_for(tab, name, url_options, item_options = {})+, inherited from the retired +tabs_on_rails+ gem and preserved verbatim in the vendored +InlineForms::Tabs::TabsBuilder+) only applies the 4th argument to the +<li>+ wrapper; nothing is forwarded to the +<a>+. That used to be fine under Rails UJS (every link with +data-remote="true"+ was hijacked into an XHR regardless), but Turbo needs the data attribute on the +<a>+ itself (typically +data-turbo-frame="..."+).
 
-The old +acesuares/tabs_on_rails+ fork (+update_remote_before_action+) patched +tab_for+ to thread html options into +link_to+. That fork was retired in 7.13.5; +InlineForms::TurboTabsBuilder+ is its Turbo-shaped replacement. It accepts a new +:link_options+ key on the per-tab call and forwards it to +link_to+:
+The old +acesuares/tabs_on_rails+ fork (+update_remote_before_action+) patched +tab_for+ to thread html options into +link_to+. That fork was retired in 7.13.5 (and the gem itself was vendored away in 8.1.23); +InlineForms::TurboTabsBuilder+ is its Turbo-shaped replacement. It accepts a new +:link_options+ key on the per-tab call and forwards it to +link_to+:
 
  <%= tabs_tag builder: InlineForms::TurboTabsBuilder,
               active_class: "is-active",
@@ -101,7 +102,7 @@ Active-tab highlighting is unchanged from upstream (still driven by +set_tab :fo
 
 === Where to put the +tabs_tag+ block (four patterns)
 
-+tabs_on_rails+ and +InlineForms::TurboTabsBuilder+ don't care where you call +tabs_tag+ — they just produce the +<ul class="tabs">+ wherever you put the block. The example app's split into +show_with_tabs.html.erb+ + +_owner_tabs.html.erb+ is a stylistic choice; below are the four common shapes, from most-inline to most-decoupled. Pick whichever fits your app:
++InlineForms::Tabs+ and +InlineForms::TurboTabsBuilder+ don't care where you call +tabs_tag+ — they just produce the +<ul class="tabs">+ wherever you put the block. The example app's split into +show_with_tabs.html.erb+ + +_owner_tabs.html.erb+ is a stylistic choice; below are the four common shapes, from most-inline to most-decoupled. Pick whichever fits your app:
 
 1. *Inlined in the show view* — drop the +tabs_tag+ block straight into +app/views/<resource>/show_with_tabs.html.erb+ (or similar) and skip the partial entirely.
 
@@ -282,6 +283,22 @@ For long text fields, use +:plain_text+ for a plain textarea backed by a DB +tex
 
 Note: generated apps also depend on ActiveStorage transitively because the +:rich_text+ form element uses ActionText (+active_storage:install+ runs during +inline_forms create+). Image uploads still go through CarrierWave; ActiveStorage is only there to back ActionText embeds.
 
+== Native inputs (no jQuery UI)
+
+Since 8.1.25/8.1.26 the date/time widgets are native HTML inputs — +:date_select+ renders +<input type="date">+, +:time_select+ +<input type="time">+, +:month_year_picker+ +<input type="month">+, +:slider_with_values+ +<input type="range">+, +:dropdown_with_other+ an +<input list>+ + +<datalist>+ combobox, and the new +:color_field+ (8.1.32) +<input type="color">+. jQuery UI, its themes and the +jquery-ui-rails+ / +rails-jquery-autocomplete+ / +jquery-timepicker-rails+ gems are gone; jQuery itself remains only because Foundation 6's JS requires it.
+
+== Per-user themes, colors and locale
+
+Generated apps let each user pick, on their own user panel:
+
+* a *preset theme* (+default+ / +dark+ / +sepia+ / +high-contrast+): an integer +theme+ column mapped to a +theme-<name>+ body class; palettes are CSS custom properties (+--if-color-*+) in the engine's +_theme.scss+ (8.1.29);
+* *custom colors* (+primary_color+ / +accent_color+, edited with +:color_field+): rendered as one scoped inline +<style>+ of +--if-color-*+ overrides, so the main stylesheet stays fully cacheable (8.1.32);
+* a *locale*: the existing +locale+ association now drives +I18n.with_locale+ per request via +around_action :switch_locale+ (8.1.31).
+
+Host apps that are not generated by the installer opt in by making +current_user+ respond to +inline_forms_theme+ (String) and/or +inline_forms_color_overrides+ (Hash of +--if-color-+ suffix => +"#rrggbb"+). Everything is validated before interpolation. To re-theme an app globally instead, override the variables in your own CSS:
+
+ :root { --if-color-primary: #2563eb; }
+
 = Build a vagrant virtualbox box for easier development
 
 Go ahead and unzip lib/vagrant/vagrantbox-inline_forms.zip. Enter the created directory with

data/Rakefile

@@ -26,10 +26,10 @@ def validation_hints_pkg_gem
 end
 
 desc "Build both inline_forms and inline_forms_installer into pkg/"
-task "build:all" => ["build", "installer:build"]
+task "build:all" => [ "build", "installer:build" ]
 
 desc "Install freshly built gems from pkg/ into the current gemset (required before inline_forms create)"
-task "install:local" => ["build:all"] do
+task "install:local" => [ "build:all" ] do
   gems = inline_forms_pkg_gems
   vh = validation_hints_pkg_gem
   gems << vh if vh

data/app/assets/javascripts/inline_forms/inline_forms.js

@@ -1,8 +1,5 @@
 //= require jquery
-//= require jquery.ui.all
-//= require jquery.timepicker.js
 //= require foundation
-//= require autocomplete-rails
 
 // Turbo / Hotwire is intentionally NOT required into this Sprockets bundle.
 // `turbo-rails` ships only an ES-module build of turbo (`app/assets/javascripts/turbo.js`
@@ -13,13 +10,11 @@
 // (and `application.html.erb`) as `<script type="module">`. Inline flows use
 // `<turbo-frame>` + HTML responses; jquery-ujs / remotipart were removed in 7.8.0.
 
+// jQuery UI is gone (8.1.26): date/time/month inputs are native, the
+// dropdown_with_other combobox is an <input list> + <datalist>, and
+// slider_with_values is a native <input type="range">. jQuery itself stays
+// only because Foundation 6's JS requires it.
 $(function(){
-  $.datepicker.setDefaults({
-    changeMonth : true,
-    changeYear : true,
-    yearRange: '-100:+100',
-    dateFormat: 'dd-mm-yy'
-  });
   $(document).foundation();
   initInlineFormsWidgets(document);
 });
@@ -28,44 +23,36 @@ document.addEventListener("turbo:load", function() {
   initInlineFormsWidgets(document);
 });
 
-// jQuery UI date/time pickers: one init path for first paint and turbo:frame-load
-// (form element helpers emit class hooks only — no inline <script> tags).
+// Widget init: one path for first paint, turbo:load and turbo:frame-load.
+// Form element helpers emit class hooks only — no inline <script> tags.
+// Native inputs (date/time/month/range/datalist) and Trix 2 custom elements
+// need no re-init after frame swaps; only tooltips and the range-slider
+// label sync are wired here.
 function initInlineFormsWidgets(root) {
-  var $root = root instanceof jQuery ? root : $(root);
-
   initValidationHintTooltips(root);
+  initSliderValueLabels(root);
+}
 
-  $root.find("input.datepicker-month-year").each(function() {
-    var $el = $(this);
-    if ($el.hasClass("hasDatepicker")) { return; }
-    $el.datepicker({
-      changeMonth: true,
-      changeYear: true,
-      showButtonPanel: true,
-      dateFormat: "MM yy",
-      onClose: function() {
-        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
-        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
-        $(this).datepicker("setDate", new Date(year, month, 1));
-      }
-    });
-  });
-
-  $root.find("input.datepicker").not(".datepicker-month-year").each(function() {
-    var $el = $(this);
-    if (!$el.hasClass("hasDatepicker")) { $el.datepicker(); }
-  });
+// slider_with_values: keep the <output> label in sync with the range input.
+// Labels array rides in data-slider-values; the <output> id in
+// data-slider-output (both emitted by slider_with_values_edit).
+function initSliderValueLabels(root) {
+  var scope = (root && root.querySelectorAll) ? root : document;
+  scope.querySelectorAll("input[type=range].slider_with_values").forEach(function (el) {
+    if (el._ifSliderBound) { return; }
+    el._ifSliderBound = true;
 
-  $root.find("input.timepicker").each(function() {
-    var $el = $(this);
-    if (!$el.data("timepicker")) { $el.timepicker(); }
-  });
+    var labels = [];
+    try {
+      labels = JSON.parse(el.getAttribute("data-slider-values") || "[]");
+    } catch (e) { /* keep empty; label just won't update */ }
+    var output = document.getElementById(el.getAttribute("data-slider-output"));
+    if (!output || !labels.length) { return; }
 
-  $root.find("trix-editor").each(function() {
-    if (window.Trix && this.editor) { return; }
-    if (window.Trix && typeof Trix.Editor === "function") {
-      new Trix.Editor(this);
-    }
+    el.addEventListener("input", function () {
+      var label = labels[parseInt(el.value, 10)];
+      output.textContent = (label === undefined || label === null) ? "" : label;
+    });
   });
 }
 
@@ -109,7 +96,7 @@ $(document).ready(function() {
   });
 });
 
-// Re-bind jQuery UI widgets and Trix after Turbo Frame swaps (Step 3).
+// Re-bind widgets (tooltips) after Turbo Frame swaps.
 document.addEventListener("turbo:frame-load", function(event) {
   var root = event.target;
   if (!root || !root.querySelectorAll) { return; }

data/app/assets/stylesheets/inline_forms/_foundation_icons.scss

@@ -3,20 +3,14 @@
  * Made by ZURB 2013 http://zurb.com/playground/foundation-icon-fonts-3
  * MIT License
  *
- * Vendored into inline_forms (replaces foundation-icons-sass-rails): @font-face
- * uses plain url() for dartsass-rails. Font files live in app/assets/fonts/
- * (woff/ttf/svg; woff+ttf mirrored from cdnjs foundicons 3.0.0).
+ * Vendored into inline_forms (replaces foundation-icons-sass-rails). Font files
+ * live in app/assets/fonts/ (woff/ttf/svg; mirrored from cdnjs foundicons 3.0.0).
+ *
+ * The @font-face moved to inline_forms_fonts.css.erb (Sprockets ERB): from the
+ * Dart Sass build the relative url("foundation-icons.woff") resolved against
+ * /assets/inline_forms/ and 404'd. Only the fi-* glyph classes live here.
  */
 
-@font-face {
-  font-family: "foundation-icons";
-  src: url("foundation-icons.woff") format("woff"),
-       url("foundation-icons.ttf") format("truetype"),
-       url("foundation-icons.svg#fontcustom") format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
-
 .fi-address-book:before,
 .fi-alert:before,
 .fi-align-center:before,

data/app/assets/stylesheets/inline_forms/_theme.scss

@@ -0,0 +1,134 @@
+// inline_forms theme bridge (8.1.24).
+//
+// Exposes the admin-chrome palette as CSS custom properties on :root so a
+// host app (or a future per-user preferences feature — see
+// stuff/user-preferences-and-theming.md) can re-theme the UI at runtime by
+// overriding variables, without recompiling the Sass build:
+//
+//   :root { --if-color-primary: #2563eb; }
+//   /* or per user: */
+//   body.theme-dark { --if-color-body-bg: #111; --if-color-body-text: #eee; }
+//
+// The values are computed at build time from the Sass palette below (hover
+// shades via lighten()), and every usage site keeps working with the same
+// visual result when nothing overrides the variables. Foundation's own
+// components still read the Sass settings at build time; only the
+// inline_forms chrome (bars, rows, buttons, flashes) is variable-driven.
+//
+// Import order matters: this partial reads Foundation's globals
+// ($body-background, $body-font-color, $anchor-color), so it must be
+// imported after `@import 'foundation'` (see foundation_and_overrides.scss).
+
+@use 'sass:color';
+
+// Palette (single source of truth for the classic inline_forms look).
+$if-primary: #A3381E !default;      // dark red: app top bar, devise chrome
+$if-accent: #B94C32 !default;       // brick red: buttons, borders, pagination
+$if-secondary: #E1C150 !default;    // gold: model top bar band
+$if-header-band: #EFCA4B !default;  // deep gold: section headers, footers
+$if-row-odd: #FBE38E !default;      // list zebra: odd rows
+$if-row-even: #FBEEC1 !default;     // list zebra: even rows
+$if-input-bg: #fff8e0 !default;     // selects / search input background
+$if-flash-accent: #fade7a !default; // flash border band
+$if-error-bg: #a70f0f !default;
+$if-success-bg: #4f8d0d !default;
+$if-on-dark: #FFFFFF !default;      // text/icons on primary/secondary bands
+
+:root {
+  --if-color-primary: #{$if-primary};
+  --if-color-accent: #{$if-accent};
+  --if-color-secondary: #{$if-secondary};
+  --if-color-header-band: #{$if-header-band};
+  --if-color-row-odd: #{$if-row-odd};
+  --if-color-row-even: #{$if-row-even};
+  --if-color-input-bg: #{$if-input-bg};
+  --if-color-input-bg-hover: #{color.adjust($if-input-bg, $lightness: 2%)};
+  --if-color-input-bg-focus: #{color.adjust($if-input-bg, $lightness: 5%)};
+  --if-color-flash-accent: #{$if-flash-accent};
+  --if-color-error-bg: #{$if-error-bg};
+  --if-color-success-bg: #{$if-success-bg};
+  --if-color-on-dark: #{$if-on-dark};
+  // Foundation globals, bridged so body/anchors can be re-themed too.
+  --if-color-body-bg: #{$body-background};
+  --if-color-body-text: #{$body-font-color};
+  --if-color-anchor: #{$anchor-color};
+}
+
+// Re-bind the document base styles to the bridge. Foundation's
+// foundation-global-styles emitted the same values from Sass; these rules
+// win by cascade order and change nothing until a variable is overridden.
+body {
+  background: var(--if-color-body-bg);
+  color: var(--if-color-body-text);
+}
+
+a {
+  color: var(--if-color-anchor);
+}
+
+// ---------------------------------------------------------------------------
+// Preset themes (Pattern 1, stuff/user-preferences-and-theming.md).
+// The engine layouts put `theme-<name>` on <body> via
+// inline_forms_body_theme_class; a host user model opts in by responding to
+// #inline_forms_theme (installer-generated user models store an integer
+// `theme` column and map it). `theme-default` is the :root palette above.
+// ---------------------------------------------------------------------------
+
+body.theme-dark {
+  --if-color-primary: #7d2a15;
+  --if-color-accent: #d0603f;
+  --if-color-secondary: #6b5a22;
+  --if-color-header-band: #7a6829;
+  --if-color-row-odd: #2e2a20;
+  --if-color-row-even: #262319;
+  --if-color-input-bg: #2c2820;
+  --if-color-input-bg-hover: #332e25;
+  --if-color-input-bg-focus: #3a352b;
+  --if-color-flash-accent: #7a6829;
+  --if-color-body-bg: #1c1a16;
+  --if-color-body-text: #e8e4da;
+  --if-color-anchor: #e0a179;
+
+  // Foundation's body/input styles are compiled from Sass (light palette);
+  // patch the pieces the chrome uses that are not variable-driven.
+  input, select, textarea, trix-editor {
+    background-color: var(--if-color-input-bg);
+    color: var(--if-color-body-text);
+  }
+}
+
+body.theme-sepia {
+  --if-color-primary: #8a4a2a;
+  --if-color-accent: #a35a32;
+  --if-color-secondary: #d4b45a;
+  --if-color-header-band: #dcc078;
+  --if-color-row-odd: #ece0c0;
+  --if-color-row-even: #f2ead2;
+  --if-color-input-bg: #fdf6e3;
+  --if-color-input-bg-hover: #fffaf0;
+  --if-color-input-bg-focus: #fffdf7;
+  --if-color-flash-accent: #dcc078;
+  --if-color-body-bg: #f4ecd8;
+  --if-color-body-text: #5b4636;
+  --if-color-anchor: #8b5e3c;
+}
+
+body.theme-high-contrast {
+  --if-color-primary: #000000;
+  --if-color-accent: #b30000;
+  --if-color-secondary: #ffd500;
+  --if-color-header-band: #ffe066;
+  --if-color-row-odd: #ffffff;
+  --if-color-row-even: #ededed;
+  --if-color-input-bg: #ffffff;
+  --if-color-input-bg-hover: #f5f5f5;
+  --if-color-input-bg-focus: #ffffff;
+  --if-color-flash-accent: #ffd500;
+  --if-color-body-bg: #ffffff;
+  --if-color-body-text: #000000;
+  --if-color-anchor: #0000d6;
+
+  a, .top-level a {
+    text-decoration: underline;
+  }
+}

data/app/assets/stylesheets/inline_forms/devise.scss

@@ -1,17 +1,18 @@
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic);
+// Open Sans @font-face lives in inline_forms_fonts.css.erb (self-hosted,
+// Sprockets-served; linked from the layouts) — no external font CDN.
 @import 'foundation_and_overrides';
 
 // Devise pages have only `.contain-to-grid` as the top-bar wrapper (no
 // `.fixed` variant), so constrain it directly to the F5 1000px row
 // width and center it. Matches the logged-in chrome's banner.
 .contain-to-grid {
-  background-color: $body-background !important;
+  background-color: var(--if-color-body-bg) !important;
   max-width: 62.5rem;
   margin: 0 auto;
 }
 
 #inline_forms_devise_outer_container a {
-  color: #A3381E;
+  color: var(--if-color-primary);
 }
 
 // Foundation 6's default `.top-bar` adds 0.5rem padding and gives every
@@ -23,13 +24,13 @@
   padding: 0;
   min-height: 0;
   height: 45px;
-  background-color: #A3381E;
+  background-color: var(--if-color-primary);
   .top-bar-left,
   .menu,
   .menu li,
   .menu a {
-    background-color: #A3381E;
-    color: #FFFFFF;
+    background-color: var(--if-color-primary);
+    color: var(--if-color-on-dark);
   }
   .menu-text {
     padding: 0 1rem;
@@ -44,15 +45,15 @@
 }
 
 #inline_forms_devise_top_nav_bar a {
-  color: #FFFFFF;
+  color: var(--if-color-on-dark);
 }
 
 #inline_forms_devise_flash_div {
-  border-top: 0.5em solid #fade7a;
+  border-top: 0.5em solid var(--if-color-flash-accent);
   .flash {
     margin-top: 0.2em;
     padding: 0.5em;
-    color: #A3381E;
+    color: var(--if-color-primary);
     font-size: 130%;
     font-weight: bold;
     line-height: 120%;
@@ -65,7 +66,7 @@
   h1 {
     text-align: center;
     margin: 30px 0;
-    color: #A3381E;
+    color: var(--if-color-primary);
   }
 }
 
@@ -91,9 +92,9 @@
     top: 15px;
   }
   #error_explanation {
-    color: #A3381E;
+    color: var(--if-color-primary);
     h2 {
-      color: #A3381E;
+      color: var(--if-color-primary);
       font-size: 120%;
       font-weight: bolder;
     }
@@ -112,7 +113,7 @@
   h1 {
     text-align: center;
     margin: 0 0 0.5em 0;
-    color: #A3381E;
+    color: var(--if-color-primary);
     font-weight: bolder;
   }
 

data/app/assets/stylesheets/inline_forms/foundation_and_overrides.scss

@@ -53,6 +53,10 @@ $body-font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Roboto, Arial, sans
 @include foundation-visibility-classes;
 @include foundation-float-classes;
 
+// Theme bridge: palette as CSS custom properties (must come after
+// 'foundation' so it can read $body-background / $anchor-color).
+@import 'theme';
+
 @import '../../../vendor/assets/stylesheets/tippy.css';
 
 .validation-hints-source[hidden] {