katalyst-content 3.0.0.alpha.1 → 3.0.0.alpha.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bab70f2b26e14144e5828cc4410cda794d1cfba6883066b3552b5b3830f35005
-  data.tar.gz: 45e4723a3dcec7ca357fc79442edafebc8c15af038cd42e5c43a32d1bd78ab6c
+  metadata.gz: 67bf34ad36a47a0d138ca8c63b1fed487fbd974a0cd498a4cec98da235a28e72
+  data.tar.gz: 249030bf322465c73e0786f88899cfcb03847049fe756b9747d2209645ccfbcc
 SHA512:
-  metadata.gz: 7d772c1165b1fccf409ff89bf26bd656ff17d3f96e9e949b2524c114dbe89a12820a40ba249a298f5fee849b235aae3d7b63340647b975314809b72a3b5d22ca
-  data.tar.gz: 67af0d40bb65869f7ba2382d9a958184e83191be5a1b437c2f92985f9b608a8fdc577674f38d95486a70654c5104634a49c08e55b03a952c308997ae449e5397
+  metadata.gz: e65e5172a28aa4f2bf988828a2d47a00778d6114ed6cb1da4ea5c8f0b5961e937cb6f5c1bb9f1001be614ab6e8bea0f1207b0448e95e63af0e898757b43b0374
+  data.tar.gz: 2721e291497463fe0ee78d6446cde29abd85468961cda125e8713d5e754747fa6f33f797723a5d465911281decf1eca500d0ccd818fea5f972ced62f415cd532

data/README.md

@@ -33,17 +33,22 @@ import content from "@katalyst/content";
 application.load(content);
 ```
 
-Import the styles as css:
+Import the editor styles as css:
 
 ```css
-@import url("/katalyst/content.css");
+/** In your admin/editor */
+@import url("/katalyst/content/editor.css");
+/** In your frontend */
+@import url("/katalyst/content/frontend.css");
 ```
 
 Or, if you're using `dartsass-rails`:
 
 ```scss
+// app/assets/stylesheets/admin.scss
+@use "katalyst/content/editor";
 // app/assets/stylesheets/application.scss
-@use "katalyst/content";
+@use "katalyst/content/frontend";
 ```
 
 ## Usage

data/app/assets/stylesheets/katalyst/content/_editor.scss

@@ -0,0 +1,4 @@
+@use "editor/editor";
+@use "editor/icons";
+@use "editor/status-bar";
+@use "editor/table";

data/app/assets/stylesheets/katalyst/content/_frontend.scss

@@ -0,0 +1 @@
+@use "frontend/frontend.css";

data/app/assets/stylesheets/katalyst/content/editor/editor.css

@@ -0,0 +1,200 @@
+@import url("icons.css");
+@import url("status-bar.css");
+@import url("table.css");
+
+.content--editor {
+  --row-inset: 2rem;
+  --row-hover-bg: var(--color-tint, #fff0eb);
+  --row-padding: 0 var(--space-2xs, 0.25rem);
+
+  position: relative;
+}
+
+/* Rows */
+
+.content--editor--item {
+  /* https://github.com/react-dnd/react-dnd/issues/832 */
+  transform: translate3d(0, 0, 0);
+
+  &:hover {
+    background: var(--row-hover-bg);
+  }
+
+  &[draggable] {
+    cursor: grab;
+  }
+
+  /* Dragged visuals */
+
+  &[data-dragging] {
+    box-shadow: inset 0 0 0 2px var(--color-tint, #fff0eb);
+
+    > * {
+      visibility: hidden;
+    }
+  }
+
+  /* Hidden items */
+
+  [data-invisible] {
+    color: var(--color-mid, #aaa);
+  }
+
+  /* row item controller */
+
+  > [data-controller] {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: baseline;
+    padding: var(--row-padding);
+  }
+
+  /* row content */
+
+  .tree {
+    display: flex;
+    gap: var(--space-xs, 0.5rem);
+    align-items: baseline;
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .actions-group {
+    display: flex;
+    gap: var(--space-3xs, 0.25em);
+    align-items: baseline;
+  }
+
+  /* Theme identifier */
+
+  .item-theme {
+    display: inline-flex;
+    background-color: var(--theme-background-color);
+    color: var(--theme-text-color);
+    aspect-ratio: 1;
+    padding: var(--space-3xs);
+    border-radius: var(--radius-s);
+  }
+
+  [data-content-theme="light"] {
+    --theme-text-color: black;
+    --theme-background-color: white;
+  }
+
+  [data-content-theme="dark"] {
+    --theme-text-color: white;
+    --theme-background-color: black;
+  }
+
+  /* Depth */
+
+  &[data-content-depth="1"] .tree {
+    padding-left: calc(var(--row-inset) * 1);
+  }
+
+  &[data-content-depth="2"] .tree {
+    padding-left: calc(var(--row-inset) * 2);
+  }
+
+  &[data-content-depth="3"] .tree {
+    padding-left: calc(var(--row-inset) * 3);
+  }
+
+  &[data-content-depth="4"] .tree {
+    padding-left: calc(var(--row-inset) * 4);
+  }
+
+  &[data-content-depth="5"] .tree {
+    padding-left: calc(var(--row-inset) * 5);
+  }
+
+  &[data-content-depth="6"] .tree {
+    padding-left: calc(var(--row-inset) * 6);
+  }
+
+  /* Lower opacity for buttons you can't use */
+
+  &[data-deny-de-nest] .button:has([data-icon="outdent"]),
+  &[data-deny-nest] .button:has([data-icon="indent"]),
+  &[data-deny-remove] .button:has([data-icon="remove"]),
+  &[data-deny-drag] .button:has([data-icon="drag"]),
+  &[data-deny-edit] .button:has([data-icon="edit"]) {
+    opacity: 0.2;
+    pointer-events: none;
+  }
+
+  &:not(:hover) .actions-group .button {
+    opacity: 0;
+  }
+
+  /* Only show 1 of the collapse / expand button */
+
+  &[data-deny-collapse] .button:has([data-icon="collapse"]),
+  &[data-deny-expand] .button:has([data-icon="expand"]) {
+    display: none !important;
+    pointer-events: none;
+  }
+
+  /* Always show the expand button when there are hidden children */
+
+  &:has([data-content-children]) .button:has([data-icon="expand"]) {
+    opacity: 1 !important;
+  }
+}
+
+/* Inline add link */
+
+.content--editor--inline-add {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 0;
+  z-index: 1;
+  outline: 1px solid var(--color-dark-glare, #555);
+
+  button {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    margin: 0;
+    padding: 0.25rem;
+
+    animation: content--editor--pulse 200ms ease;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  button:active {
+    transform: translate(-50%, -50%) scale(99%);
+  }
+
+  &[hidden] button {
+    transform: translate(-50%, -50%) scale(0);
+  }
+}
+
+@keyframes content--editor--pulse {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+  }
+
+  80% {
+    transform: translate(-50%, -50%) scale(1.1);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+/* New items picker */
+
+.content--editor--new-items {
+  .items-list {
+    display: flex;
+    gap: var(--space-2xs, 0.25rem);
+    flex-wrap: wrap;
+  }
+}

data/app/assets/stylesheets/katalyst/content/editor.css

@@ -1,196 +1,4 @@
-.content--editor {
-  --row-inset: 2rem;
-  --row-hover-bg: var(--color-tint, #fff0eb);
-  --row-padding: 0 var(--space-2xs, 0.25rem);
-
-  position: relative;
-}
-
-/* Rows */
-
-.content--editor--item {
-  /* https://github.com/react-dnd/react-dnd/issues/832 */
-  transform: translate3d(0, 0, 0);
-
-  &:hover {
-    background: var(--row-hover-bg);
-  }
-
-  &[draggable] {
-    cursor: grab;
-  }
-
-  /* Dragged visuals */
-
-  &[data-dragging] {
-    box-shadow: inset 0 0 0 2px var(--color-tint, #fff0eb);
-
-    > * {
-      visibility: hidden;
-    }
-  }
-
-  /* Hidden items */
-
-  [data-invisible] {
-    color: var(--color-mid, #aaa);
-  }
-
-  /* row item controller */
-
-  > [data-controller] {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: baseline;
-    padding: var(--row-padding);
-  }
-
-  /* row content */
-
-  .tree {
-    display: flex;
-    gap: var(--space-xs, 0.5rem);
-    align-items: baseline;
-
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  .actions-group {
-    display: flex;
-    gap: var(--space-3xs, 0.25em);
-    align-items: baseline;
-  }
-
-  /* Theme identifier */
-
-  .item-background {
-    display: inline-flex;
-    background-color: var(--theme-background-color);
-    color: var(--theme-text-color);
-    aspect-ratio: 1;
-    padding: var(--space-3xs);
-    border-radius: var(--radius-s);
-  }
-
-  .item-background.light {
-    --theme-text-color: black;
-    --theme-background-color: white;
-  }
-
-  .item-background.dark {
-    --theme-text-color: white;
-    --theme-background-color: black;
-  }
-
-  /* Depth */
-
-  &[data-content-depth="1"] .tree {
-    padding-left: calc(var(--row-inset) * 1);
-  }
-
-  &[data-content-depth="2"] .tree {
-    padding-left: calc(var(--row-inset) * 2);
-  }
-
-  &[data-content-depth="3"] .tree {
-    padding-left: calc(var(--row-inset) * 3);
-  }
-
-  &[data-content-depth="4"] .tree {
-    padding-left: calc(var(--row-inset) * 4);
-  }
-
-  &[data-content-depth="5"] .tree {
-    padding-left: calc(var(--row-inset) * 5);
-  }
-
-  &[data-content-depth="6"] .tree {
-    padding-left: calc(var(--row-inset) * 6);
-  }
-
-  /* Lower opacity for buttons you can't use */
-
-  &[data-deny-de-nest] .button:has([data-icon="outdent"]),
-  &[data-deny-nest] .button:has([data-icon="indent"]),
-  &[data-deny-remove] .button:has([data-icon="remove"]),
-  &[data-deny-drag] .button:has([data-icon="drag"]),
-  &[data-deny-edit] .button:has([data-icon="edit"]) {
-    opacity: 0.2;
-    pointer-events: none;
-  }
-
-  &:not(:hover) .actions-group .button {
-    opacity: 0;
-  }
-
-  /* Only show 1 of the collapse / expand button */
-
-  &[data-deny-collapse] .button:has([data-icon="collapse"]),
-  &[data-deny-expand] .button:has([data-icon="expand"]) {
-    display: none !important;
-    pointer-events: none;
-  }
-
-  /* Always show the expand button when there are hidden children */
-
-  &:has([data-content-children]) .button:has([data-icon="expand"]) {
-    opacity: 1 !important;
-  }
-}
-
-/* Inline add link */
-
-.content--editor--inline-add {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: 0;
-  z-index: 1;
-  outline: 1px solid var(--color-dark-glare, #555);
-
-  button {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    margin: 0;
-    padding: 0.25rem;
-
-    animation: content--editor--pulse 200ms ease;
-    transform: translate(-50%, -50%) scale(1);
-  }
-
-  button:active {
-    transform: translate(-50%, -50%) scale(99%);
-  }
-
-  &[hidden] button {
-    transform: translate(-50%, -50%) scale(0);
-  }
-}
-
-@keyframes content--editor--pulse {
-  0% {
-    transform: translate(-50%, -50%) scale(0);
-  }
-
-  80% {
-    transform: translate(-50%, -50%) scale(1.1);
-  }
-
-  100% {
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-
-/* New items picker */
-
-.content--editor--new-items {
-  .items-list {
-    display: flex;
-    gap: var(--space-2xs, 0.25rem);
-    flex-wrap: wrap;
-  }
-}
+@import url("editor/editor.css");
+@import url("editor/icons.css");
+@import url("editor/status-bar.css");
+@import url("editor/table.css");

data/app/assets/stylesheets/katalyst/content/frontend/frontend.css

@@ -0,0 +1,46 @@
+/* Spacing */
+
+.content-item {
+  --flow-space: var(--space-m);
+  margin-block: var(--block-space, var(--space-m));
+}
+
+/* Themes */
+
+[data-content-theme] {
+  display: flow-root;
+}
+
+[data-content-theme] [data-content-theme] {
+  margin-inline: calc(-1 * var(--gutter));
+  padding-inline: var(--gutter);
+}
+
+[data-content-theme="light"] {
+  background: var(--background, var(--background-color));
+  color: var(--text-color);
+
+  --text-color: var(--color-dark, black);
+  --background: var(--color-light, black);
+  --link-color: var(--color-dark, black);
+}
+
+[data-content-theme="dark"] {
+  background: var(--background, var(--background-color));
+  color: var(--text-color);
+
+  --text-color: var(--color-light, white);
+  --background: var(--color-dark, black);
+  --link-color: var(--color-light, white);
+}
+
+/* Figures */
+
+.content-item[data-content-item-type="figure"] {
+  margin-inline: unset;
+  text-align: center;
+
+  img {
+    margin-inline: auto;
+  }
+}

data/app/assets/stylesheets/katalyst/content/frontend.css

@@ -0,0 +1 @@
+@import url("frontend/frontend.css");

data/app/components/katalyst/content/editor/item_component.html.erb

@@ -4,9 +4,11 @@
 
     <strong class="heading" title="<%= item.heading %>"><%= item.heading %></strong>
 
-    <span class="item-background <%= item.background %>">
-      <icon class="icon" data-icon="theme" role="img">&nbsp;</icon>
-    </span>
+    <% if item.theme.present? %>
+      <span class="item-theme" data-content-theme="<%= item.theme %>">
+        <icon class="icon" data-icon="theme" role="img">&nbsp;</icon>
+      </span>
+    <% end %>
 
     <% unless item.visible? %>
       <icon class="icon" data-icon="hidden" title="Hidden" role="img">&nbsp;</icon>
@@ -27,7 +29,7 @@
       <icon class="icon" data-icon="indent" role="img">&nbsp;</icon>
     </button>
     <%= link_to(edit_item_link, class: "button", title: "Edit", value: "edit",
-                data: { text_button: "", button_padding: "tight", turbo_frame: "content--editor--item-editor" }) do %>
+                data:                  { text_button: "", button_padding: "tight", turbo_frame: "content--editor--item-editor" }) do %>
       <icon class="icon" data-icon="edit" role="img">&nbsp;</icon>
     <% end %>
     <button class="button" data-button-padding="tight" data-text-button data-action="content--editor--container#remove" title="Remove">

data/app/helpers/katalyst/content/frontend_helper.rb

@@ -5,6 +5,8 @@ module Katalyst
     module FrontendHelper
       include TableHelper
 
+      using Katalyst::HtmlAttributes::HasHtmlAttributes
+
       # Render all items from a content version as HTML
       # @param version [Katalyst::Content::Version] The content version to render
       # @return [ActiveSupport::SafeBuffer,String,nil] Content as HTML
@@ -14,16 +16,24 @@ module Katalyst
         capture do
           cache version do
             without_partial_path_prefix do
-              concat render partial: version.tree.select(&:visible?)
+              concat(render_content_items(*version.tree.select(&:visible?), class: "flow"))
             end
           end
         end
       end
 
-      def render_content_items(items)
-        items = items.select(&:visible?)
-        without_partial_path_prefix do
-          render partial: items if items.any?
+      def render_content_items(*items, tag: :div, theme: nil, **)
+        items = items.flatten.select(&:visible?)
+
+        grouped_items = items.slice_when { |first, second| first.theme != second.theme }
+
+        grouped_items.each do |siblings|
+          content_theme = (siblings.first.theme if siblings.first.theme != theme)
+          concat(content_items_tag(tag, content_theme:, **) do
+            without_partial_path_prefix do
+              concat(render(partial: siblings))
+            end
+          end)
         end
       end
 
@@ -31,7 +41,15 @@ module Katalyst
         FrontendBuilder.new(self, item).render(...)
       end
 
-      private
+      def content_items_tag(tag, content_theme:, **attributes, &)
+        html_attributes = {
+          class: "content-items",
+          data:  {
+            content_theme:,
+          },
+        }.merge_html(attributes)
+        content_tag(tag, **html_attributes, &)
+      end
 
       def without_partial_path_prefix
         current = prefix_partial_path_with_controller_namespace
@@ -44,6 +62,8 @@ module Katalyst
     end
 
     class FrontendBuilder
+      include Katalyst::HtmlAttributes
+
       attr_accessor :template, :item
 
       delegate_missing_to :@template
@@ -53,32 +73,28 @@ module Katalyst
         self.item     = item
       end
 
-      def render(**, &)
-        content_tag tag, **default_options(**) do
-          content_tag(:div, &)
-        end
+      def render(tag: :div, **, &)
+        update_html_attributes(**)
+
+        content_tag(tag, **html_attributes, &)
       end
 
       private
 
-      def default_options(**options)
+      def default_html_attributes
         {
-          id:    item.heading&.parameterize,
-          class: ["content-item", item.model_name.param_key, item.background, options[:class]],
-          data:  { content_index: item.index, content_depth: item.depth, **options.fetch(:data, {}) },
-          **options.except(:class, :data, :root),
+          id:    item.dom_id,
+          class: ["content-item", wrapper_class],
+          data:  {
+            content_index:     item.index,
+            content_depth:     item.depth,
+            content_item_type: item.item_type,
+          },
         }
       end
 
-      def tag
-        case item
-        when Figure
-          :figure
-        when Section
-          :section
-        else
-          :div
-        end
+      def wrapper_class
+        "wrapper" if item.depth.zero?
       end
     end
   end

data/app/models/concerns/katalyst/content/has_tree.rb

@@ -20,9 +20,7 @@ module Katalyst
 
         def add(node)
           if node.depth == depth
-            node.parent = current
-            children << node
-            self
+            add_sibling(node)
           elsif node.depth > depth
             push(children.last)
             add(node)
@@ -32,6 +30,21 @@ module Katalyst
           end
         end
 
+        def add_sibling(node)
+          node.parent = current
+
+          previous = children.last
+
+          children << node
+
+          if previous
+            previous.next_sibling = node
+            node.previous_sibling = previous
+          end
+
+          self
+        end
+
         private
 
         attr_writer :current, :depth, :children

data/app/models/katalyst/content/item.rb

@@ -16,12 +16,12 @@ module Katalyst
 
       validates :heading, presence: true
       validates :heading_style, inclusion: { in: config.heading_styles }
-      validates :background, presence: true, inclusion: { in: config.backgrounds }, if: :validate_background?
+      validates :theme, inclusion: { in: config.themes, allow_blank: true }
 
       after_initialize :initialize_tree
       before_validation :set_defaults
 
-      attr_accessor :parent, :children, :index, :depth
+      attr_accessor :parent, :children, :index, :depth, :previous_sibling, :next_sibling
 
       def self.permitted_params
         %i[
@@ -30,7 +30,7 @@ module Katalyst
           type
           heading
           heading_style
-          background
+          theme
           visible
         ]
       end
@@ -51,6 +51,18 @@ module Katalyst
         is_a? Layout
       end
 
+      def dom_id
+        heading&.parameterize
+      end
+
+      def item_type
+        model_name.param_key
+      end
+
+      def theme
+        super.presence || parent&.theme
+      end
+
       private
 
       def initialize_tree
@@ -61,10 +73,6 @@ module Katalyst
       def set_defaults
         self.heading_style = "none" if heading_style.blank?
       end
-
-      def validate_background?
-        true
-      end
     end
   end
 end

data/app/views/katalyst/content/asides/_aside.html+form.erb

@@ -13,8 +13,8 @@
 </div>
 
 <div class="field">
-  <%= form.label :background %>
-  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes %>
 </div>
 
 <div class="field">

data/app/views/katalyst/content/asides/_aside.html.erb

@@ -1,16 +1,14 @@
-<%= content_item_tag aside do %>
+<%= content_item_tag(aside, data: { aside_reverse: ("" if aside.reverse) }) do %>
   <%= tag.h3 aside.heading, class: aside.heading_style_class if aside.show_heading? %>
 
   <% if aside.children.any? %>
     <% items = aside.children.select(&:visible?) %>
     <% last = items.pop %>
-    <div role="aside-container" <%= "class=reverse" if aside.reverse %>>
-      <div>
-        <%= render_content_items items %>
+    <div class="sidebar">
+      <div class="aside--main">
+        <%= render_content_items(*items, theme: aside.theme, class: "flow") %>
       </div>
-      <aside>
-        <%= render_content_items [last] %>
-      </aside>
+      <%= render_content_items(last, tag: :aside, class: "aside--sidebar", theme: aside.theme) %>
     </div>
   <% end %>
 <% end %>

data/app/views/katalyst/content/columns/_column.html+form.erb

@@ -13,8 +13,8 @@
 </div>
 
 <div class="field">
-  <%= form.label :background %>
-  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes %>
 </div>
 
 <div class="field">

data/app/views/katalyst/content/columns/_column.html.erb

@@ -6,13 +6,13 @@
   <div class="columns-container">
     <div class="column">
       <% if items.any? %>
-        <%= render_content_items items %>
+        <%= render_content_items(*items, theme: column.theme, class: "flow") %>
       <% elsif last %>
-        <%= render_content_items [last] %>
+        <%= render_content_items(last, theme: column.theme) %>
       <% end %>
     </div>
     <div class="column">
-      <%= render_content_items [last] if last && items.any? %>
+      <%= render_content_items(last, theme: column.theme) if last && items.any? %>
     </div>
   </div>
 <% end %>

data/app/views/katalyst/content/contents/_content.html+form.erb

@@ -13,8 +13,8 @@
 </div>
 
 <div class="field">
-  <%= form.label :background %>
-  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes %>
 </div>
 
 <div class="field">

data/app/views/katalyst/content/contents/_content.html.erb

@@ -1,5 +1,5 @@
-<%= content_item_tag content do %>
-  <%= tag.h3 content.heading, class: content.heading_style_class if content.show_heading? %>
+<%= content_item_tag(content, class: "flow") do %>
+  <%= tag.h3(content.heading, class: content.heading_style_class) if content.show_heading? %>
 
   <%= content.content %>
 <% end %>

data/app/views/katalyst/content/figures/_figure.html+form.erb

@@ -18,8 +18,8 @@
 </div>
 
 <div class="field">
-  <%= form.label :background %>
-  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes %>
 </div>
 
 <div class="field">

data/app/views/katalyst/content/figures/_figure.html.erb

@@ -1,4 +1,4 @@
-<%= content_item_tag figure do %>
+<%= content_item_tag(figure, tag: :figure) do %>
   <%= image_tag figure.image, alt: figure.alt %>
   <%= tag.figcaption figure.caption if figure.caption.present? %>
 <% end %>

data/app/views/katalyst/content/groups/_group.html+form.erb

@@ -13,8 +13,8 @@
 </div>
 
 <div class="field">
-  <%= form.label :background %>
-  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes %>
 </div>
 
 <div class="field">

data/app/views/katalyst/content/groups/_group.html.erb

@@ -1,7 +1,5 @@
 <%= content_item_tag group do %>
   <%= tag.h3 group.heading, class: group.heading_style_class if group.show_heading? %>
 
-  <div>
-    <%= render_content_items group.children %>
-  </div>
+  <%= render_content_items(*group.children, theme: group.theme, class: "flow") %>
 <% end %>

data/app/views/katalyst/content/items/_item.html+form.erb

@@ -13,8 +13,8 @@
 </div>
 
 <div class="field">
-  <%= form.label :background %>
-  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes %>
 </div>
 
 <div class="field">

data/app/views/katalyst/content/sections/_section.html+form.erb

@@ -13,8 +13,8 @@
 </div>
 
 <div class="field">
-  <%= form.label :background %>
-  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes %>
 </div>
 
 <div class="field">

data/app/views/katalyst/content/sections/_section.html.erb

@@ -1,7 +1,5 @@
-<%= content_item_tag section do %>
-  <%= tag.h2 section.heading, class: section.heading_style_class if section.show_heading? %>
+<%= content_item_tag(section, tag: :section, class: "flow") do %>
+  <%= tag.h2(section.heading, class: section.heading_style_class) if section.show_heading? %>
 
-  <div>
-    <%= render_content_items section.children %>
-  </div>
+  <%= render_content_items(*section.children, theme: section.theme, class: "flow") %>
 <% end %>

data/app/views/katalyst/content/tables/_table.html+form.erb

@@ -14,8 +14,8 @@
   </div>
 
   <div class="field">
-    <%= form.label :background %>
-    <%= form.select :background, Katalyst::Content.config.backgrounds %>
+    <%= form.label :theme %>
+    <%= form.select :theme, Katalyst::Content.config.themes %>
   </div>
 
   <div class="field">

data/db/migrate/20250321045027_rename_background_to_theme.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class RenameBackgroundToTheme < ActiveRecord::Migration[8.0]
+  def change
+    rename_column :katalyst_content_items, :background, :theme
+  end
+end

data/lib/katalyst/content/config.rb

@@ -7,7 +7,10 @@ module Katalyst
     class Config
       include ActiveSupport::Configurable
 
-      config_accessor(:backgrounds) { %w[light dark] }
+      config_accessor(:themes) { %w[light dark] }
+      alias_method :backgrounds, :themes
+      alias_method :backgrounds=, :themes=
+
       config_accessor(:heading_styles) { %w[none default] }
       config_accessor(:items) do
         %w[

data/spec/factories/katalyst/content/items.rb

@@ -4,7 +4,7 @@ FactoryBot.define do
   trait :content_item_defaults do
     heading { Faker::Lorem.word }
     heading_style { "default" }
-    background { Katalyst::Content.config.backgrounds.sample }
+    theme { Katalyst::Content.config.themes.sample }
     depth { 0 }
   end
 

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-content
 version: !ruby/object:Gem::Version
-  version: 3.0.0.alpha.1
+  version: 3.0.0.alpha.2
 platform: ruby
 authors:
 - Katalyst Interactive
 bindir: bin
 cert_chain: []
-date: 2025-03-18 00:00:00.000000000 Z
+date: 2025-03-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activerecord
@@ -93,12 +93,15 @@ files:
 - app/assets/images/katalyst/content/icons/section.svg
 - app/assets/images/katalyst/content/icons/table.svg
 - app/assets/images/katalyst/content/icons/theme.svg
-- app/assets/stylesheets/katalyst/_content.scss
-- app/assets/stylesheets/katalyst/content.css
+- app/assets/stylesheets/katalyst/content/_editor.scss
+- app/assets/stylesheets/katalyst/content/_frontend.scss
 - app/assets/stylesheets/katalyst/content/editor.css
-- app/assets/stylesheets/katalyst/content/icons.css
-- app/assets/stylesheets/katalyst/content/status-bar.css
-- app/assets/stylesheets/katalyst/content/table.css
+- app/assets/stylesheets/katalyst/content/editor/editor.css
+- app/assets/stylesheets/katalyst/content/editor/icons.css
+- app/assets/stylesheets/katalyst/content/editor/status-bar.css
+- app/assets/stylesheets/katalyst/content/editor/table.css
+- app/assets/stylesheets/katalyst/content/frontend.css
+- app/assets/stylesheets/katalyst/content/frontend/frontend.css
 - app/components/katalyst/content/editor/base_component.rb
 - app/components/katalyst/content/editor/errors_component.html.erb
 - app/components/katalyst/content/editor/errors_component.rb
@@ -185,6 +188,7 @@ files:
 - db/migrate/20220926061535_add_fields_for_figure_to_katalyst_content_items.rb
 - db/migrate/20230515151440_change_katalyst_content_items_show_heading_column.rb
 - db/migrate/20240826042004_add_style_to_content_items.rb
+- db/migrate/20250321045027_rename_background_to_theme.rb
 - lib/katalyst/content.rb
 - lib/katalyst/content/config.rb
 - lib/katalyst/content/engine.rb

data/app/assets/stylesheets/katalyst/_content.scss

@@ -1,4 +0,0 @@
-@use "content/editor";
-@use "content/icons";
-@use "content/status-bar";
-@use "content/table";

data/app/assets/stylesheets/katalyst/content.css

@@ -1,4 +0,0 @@
-@import url("content/editor.css");
-@import url("content/icons.css");
-@import url("content/status-bar.css");
-@import url("content/table.css");