Make UI design tokens available in preview

Load a Sprockets stylesheet with UI CSS custom properties
in non-published contexts so that review and commenting
components can use consistent editor styling. Host apps
can override tokens via pageflow/ui/overrides.scss.

REDMINE-21261

Author: tf

app/assets/stylesheets/pageflow/ui.scss

@@ -4,6 +4,8 @@
 @import "./ui/properties";
 @import "./ui/functions";
 
+@import "pageflow/ui/overrides";
+
 %pageflow-ui {
   @import "./ui/forms";
   @import "./ui/color_picker";

app/assets/stylesheets/pageflow/ui/overrides.scss

@@ -0,0 +1,8 @@
+// Override this file in your host application to customize
+// UI CSS custom properties (e.g. --ui-font-family).
+//
+// Example (in app/assets/stylesheets/pageflow/ui/overrides.scss):
+//
+//   :root {
+//     --ui-font-family: "Inter", sans-serif;
+//   }

app/assets/stylesheets/pageflow/ui/properties.scss

@@ -1,4 +1,17 @@
 :root { // scss-lint:disable PropertyCount
+  // Match pageflow/ui/normalize.scss which is not included in all
+  // contexts that use these properties.
+  --ui-font-family:
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji';
+
   --ui-font-size: 13px;
 
   --ui-surface-color: #fff;

entry_types/scrolled/app/assets/stylesheets/pageflow_scrolled/ui.scss

@@ -0,0 +1,2 @@
+@import "pageflow/ui/properties";
+@import "pageflow/ui/overrides";

entry_types/scrolled/app/helpers/pageflow_scrolled/editor/seed_html_helper.rb

@@ -8,6 +8,7 @@ module SeedHtmlHelper
       include Pageflow::StructuredDataHelper
       include Pageflow::TextDirectionHelper
       include PageflowScrolled::CacheHelper
+      include PageflowScrolled::SprocketsHelper
       include FaviconHelper
       include PacksHelper
       include WebpackPublicPathHelper

entry_types/scrolled/app/helpers/pageflow_scrolled/sprockets_helper.rb

@@ -0,0 +1,11 @@
+module PageflowScrolled
+  # @api private
+  module SprocketsHelper
+    def scrolled_sprockets_asset_tags(entry_mode:)
+      safe_join([
+        javascript_include_tag('pageflow_scrolled/legacy'),
+        (stylesheet_link_tag('pageflow_scrolled/ui', media: 'all') if entry_mode != :published)
+      ].compact)
+    end
+  end
+end

entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb

@@ -15,7 +15,7 @@
 
       <%= scrolled_favicons_for_entry(entry, entry_mode: entry_mode) %>
 
-      <%= javascript_include_tag 'pageflow_scrolled/legacy' %>
+      <%= scrolled_sprockets_asset_tags(entry_mode: entry_mode) %>
       <%= scrolled_frontend_stylesheet_packs_tag(entry, entry_mode: entry_mode, seed_options: seed_options) %>
 
       <%= scrolled_theme_properties_style_tag(entry.theme) %>

entry_types/scrolled/lib/pageflow_scrolled/engine.rb

@@ -21,7 +21,8 @@ class Engine < ::Rails::Engine
     config.i18n.load_path += Dir[config.root.join('config', 'locales', '**', '*.yml').to_s]
 
     initializer 'pageflow_scrolled.assets.precompile' do |app|
-      app.config.assets.precompile += %w[pageflow_scrolled/legacy.js]
+      app.config.assets.precompile += %w[pageflow_scrolled/legacy.js
+                                         pageflow_scrolled/ui.css]
     end
   end
 end

entry_types/scrolled/package/src/frontend/inlineEditing/ActionButtons.module.css

@@ -16,7 +16,8 @@
   padding: 8px;
   color: rgba(0, 0, 0, 0.8);
   background: #fff;
-  font-size: 13px;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
   display: flex;
   align-items: center;
   gap: 8px;

entry_types/scrolled/package/src/frontend/inlineEditing/EditableInlineText/index.module.css

@@ -21,7 +21,7 @@
   content: "↵";
   position: absolute;
   display: block;
-  font-size: 13px;
+  font-size: var(--ui-font-size);
   font-weight: normal;
   bottom: 2px;
   left: 2px;