Merge pull request #2393 from tf/inline-ui-tokens

tf · web-flow · commit 1015876d79ac · 2026-04-13T13:30:29.000+02:00
Make UI design tokens available in preview
diff --git a/app/assets/stylesheets/pageflow/ui.scss b/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";
diff --git a/app/assets/stylesheets/pageflow/ui/overrides.scss b/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;
+//   }
diff --git a/app/assets/stylesheets/pageflow/ui/properties.scss b/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;
diff --git a/entry_types/scrolled/app/assets/stylesheets/pageflow_scrolled/ui.scss b/entry_types/scrolled/app/assets/stylesheets/pageflow_scrolled/ui.scss
@@ -0,0 +1,2 @@
+@import "pageflow/ui/properties";
+@import "pageflow/ui/overrides";
diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/seed_html_helper.rb b/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
diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/sprockets_helper.rb b/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
diff --git a/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb b/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) %>
diff --git a/entry_types/scrolled/lib/pageflow_scrolled/engine.rb b/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
diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/ActionButtons.module.css b/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;
diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/EditableInlineText/index.module.css b/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;
diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/LinkTooltip.module.css b/entry_types/scrolled/package/src/frontend/inlineEditing/LinkTooltip.module.css
@@ -5,8 +5,8 @@
   background-color: #222;
   color: #fff;
   border-radius: 4px;
-  font-family: Helvetica, Arial, "Sans-Serif";
-  font-size: 13px;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
   line-height: 1;
   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
 }
diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/MarginIndicator.module.css b/entry_types/scrolled/package/src/frontend/inlineEditing/MarginIndicator.module.css
@@ -45,7 +45,7 @@
   position: absolute;
   left: 5px;
   top: 5px;
-  font-family: Arial, sans-serif;
+  font-family: var(--ui-font-family);
   font-size: 12px;
   padding: space(1) space(2);
   white-space: nowrap;
diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/PaddingIndicator.module.css b/entry_types/scrolled/package/src/frontend/inlineEditing/PaddingIndicator.module.css
@@ -78,7 +78,7 @@
   visibility: hidden;
   position: absolute;
   left: 20px;
-  font-family: Arial, sans-serif;
+  font-family: var(--ui-font-family);
   font-size: 12px;
   padding: space(1) space(2) space(1) space(1);
 }
diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/sprockets_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/sprockets_helper_spec.rb
@@ -0,0 +1,43 @@
+require 'spec_helper'
+
+module PageflowScrolled
+  RSpec.describe SprocketsHelper, type: :helper do
+    describe '#scrolled_sprockets_asset_tags' do
+      it 'includes legacy javascript tag' do
+        result = helper.scrolled_sprockets_asset_tags(entry_mode: :published)
+
+        expect(result).to have_selector(
+          'script[src*="pageflow_scrolled/legacy"]',
+          visible: false
+        )
+      end
+
+      it 'includes ui stylesheet in preview mode' do
+        result = helper.scrolled_sprockets_asset_tags(entry_mode: :preview)
+
+        expect(result).to have_selector(
+          'link[href*="pageflow_scrolled/ui"]',
+          visible: false
+        )
+      end
+
+      it 'includes ui stylesheet in editor mode' do
+        result = helper.scrolled_sprockets_asset_tags(entry_mode: :editor)
+
+        expect(result).to have_selector(
+          'link[href*="pageflow_scrolled/ui"]',
+          visible: false
+        )
+      end
+
+      it 'does not include ui stylesheet in published mode' do
+        result = helper.scrolled_sprockets_asset_tags(entry_mode: :published)
+
+        expect(result).not_to have_selector(
+          'link[href*="pageflow_scrolled/ui"]',
+          visible: false
+        )
+      end
+    end
+  end
+end
diff --git a/spec/models/pageflow/nested_revision_component_copy_spec.rb b/spec/models/pageflow/nested_revision_component_copy_spec.rb
@@ -31,7 +31,7 @@ def respond_to_missing?(method, include_private = false)
   end
 end
 
-module Pageflow # rubocop:disable Style/OneClassPerFile
+module Pageflow
   describe NestedRevisionComponentCopy do
     describe '#copy_all' do
       it 'copies nested revision components' do

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@import "pageflow/ui/properties";`
	`2`	`+@import "pageflow/ui/overrides";`