Investigate replacing hard-coded style options in paragraphs behavior settings with config entities

[joeparsons]

What is the problem that we want to solve?

We currently provide various style options within Paragraphs behavior settings that correspond with CSS classes that are applied in the rendered paragraph markup.

When we first started using Paragraphs behavior plugins to implement custom style options for paragraphs, we talked about the possibility of replacing the hard-coded list of style options available in paragraphs behavior settings forms with custom "style" configuration entities that could be modified / added to by site administrators.

We should investigate whether this approach would actually be feasible, and if so decide on the best implemetnation.

Additional context

Current paragraphs behavior "style" settings and options:

Default Quickstart Paragraph Behavior

• Bottom Spacing (bottom_spacing)
  • Zero (mb-0)
  • 1 (0.25rem | ~4px) (mb-1)
  • 2 (0.5rem | ~8px) (mb-2)
  • 3 (1.0rem | ~16px) (mb-3)
  • 4 (1.5rem | ~24px) (mb-4)
  • 5 (3.0rem | ~48px) (mb-5)
  • 6 (4.0rem | ~64px) (mb-6)
  • 7 (5.0rem | ~80px) (mb-7)
  • 8 (6.0rem | ~96px) (mb-8)
  • 9 (7.0rem | ~112px) (mb-9)
  • 10 (8.0rem | ~128px) (mb-10)

Quickstart Cards Paragraph Behavior

• Card style (card_style)

  • Bordered cards (card)
  • Borderless cards (card card-borderless)

• Cards per row on desktop (card_width)

  • 1 (col-md-12 col-lg-12)
  • 2 (col-md-6 col-lg-6)
  • 3 (col-md-4 col-lg-4)
  • 4 (col-md-3 col-lg-3)

• Cards per row on tablet (card_width_sm)

  • 1 (col-sm-12)
  • 2 (col-sm-6)
  • 3 (col-sm-4)
  • 4 (col-sm-3)

• Cards per row on phone (card_width_xs)

  • 1 (col-12)
  • 2 (col-6)
  • 3 (col-4)
  • 4 (col-3)

Quickstart Text with Background Paragraph Behavior

• Background Color (text_background_color)
  • Arizona Red (bg-red)
  • Arizona Blue (bg-blue)
  • Sky (bg-sky)
  • Oasis (bg-oasis)
  • Azurite (bg-azurite)
  • Midnight (bg-midnight)
  • Bloom (bg-bloom)
  • Chili (bg-chili)
  • Cool Gray (bg-cool-gray)
  • Warm Gray (bg-warm-gray)
  • Leaf (bg-leaf)
  • River (bg-river)
  • Silver (bg-silver)
  • Ash (bg-ash)

Conditions of satisfaction

• [ ] The considered options are documented
• [ ] A recommended next step is documented
• [ ] An estimate of time and effort is provided for the recommendation
• [ ] …

[trackleft]

Possibly use the https://www.drupal.org/project/ui_styles module