{,row-,column-}gap-? classes

app/components/settings/project_life_cycle_step_definitions/row_component.html.erb

@@ -29,7 +29,7 @@ See COPYRIGHT and LICENSE files for more details.
 
 <%=
   flex_layout(align_items: :center, justify_content: :space_between) do |row_container|
-    row_container.with_column(flex_layout: true) do |title_container|
+    row_container.with_column(flex_layout: true, classes: "gap-2") do |title_container|
       title_container.with_column do
         render(Primer::Beta::Link.new(
           classes: 'filter-target-visible-text',
@@ -39,10 +39,10 @@ See COPYRIGHT and LICENSE files for more details.
           definition.name
         end
       end
-      title_container.with_column(ml: 2) do
+      title_container.with_column do
         render(Projects::LifeCycleTypeComponent.new(definition))
       end
-      title_container.with_column(ml: 2) do
+      title_container.with_column do
         render(Primer::Beta::Text.new) { t("project.count", count: definition.project_count) }
       end
     end

frontend/src/global_styles/openproject/_gap.scss

@@ -0,0 +1,44 @@
+//-- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+// copied from https://github.com/primer/css/blob/main/src/support/variables/layout.scss
+$spacer-map-rem: (
+  0: 0,
+  1: var(--base-size-4, 4px),
+  2: var(--base-size-8, 8px),
+  3: var(--base-size-16, 16px),
+  4: var(--base-size-24, 24px),
+  5: var(--base-size-32, 32px),
+  6: var(--base-size-40, 40px),
+) !default;
+
+@each $scale, $size in $spacer-map-rem {
+  .gap-#{$scale} { gap: $size !important; }
+  .row-gap-#{$scale} { row-gap: $size !important; }
+  .column-gap-#{$scale} { column-gap: $size !important; }
+}

frontend/src/global_styles/openproject/_index.sass

@@ -7,6 +7,7 @@
 @import generic
 @import base
 @import forms
+@import gap
 
 @import mixins
 @import onboarding