hoist option values out of helper to merged module as config

app/assets/stylesheets/merged/merged.css

@@ -1744,6 +1744,10 @@ select {
   min-width: 100%;
 }
 
+.max-w-none {
+  max-width: none;
+}
+
 .max-w-\[1920px\] {
   max-width: 1920px;
 }
@@ -1849,6 +1853,10 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.resize {
+  resize: both;
+}
+
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -2262,21 +2270,6 @@ select {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.bg-slate-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
-}
-
-.bg-zinc-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
-}
-
 .bg-cover {
   background-size: cover;
 }
@@ -2668,14 +2661,6 @@ select {
   text-decoration-line: underline;
 }
 
-.opacity-10 {
-  opacity: 0.1;
-}
-
-.opacity-90 {
-  opacity: 0.9;
-}
-
 .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -2854,6 +2839,10 @@ select {
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
+.prose-headings\:text-inherit :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"] *))) {
+  color: inherit;
+}
+
 @media (prefers-color-scheme: dark) {
   .peer:focus ~ .peer-focus\:dark\:text-blue-500 {
     --tw-text-opacity: 1;
@@ -2912,6 +2901,10 @@ select {
     margin: 2rem;
   }
 
+  .md\:m-4 {
+    margin: 1rem;
+  }
+
   .md\:my-10 {
     margin-top: 2.5rem;
     margin-bottom: 2.5rem;
@@ -2959,6 +2952,220 @@ select {
     gap: 2rem;
   }
 
+  .md\:prose-lg {
+    font-size: 1.125rem;
+    line-height: 1.7777778;
+  }
+
+  .md\:prose-lg :where(p):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.3333333em;
+    margin-bottom: 1.3333333em;
+  }
+
+  .md\:prose-lg :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
+    font-size: 1.2222222em;
+    line-height: 1.4545455;
+    margin-top: 1.0909091em;
+    margin-bottom: 1.0909091em;
+  }
+
+  .md\:prose-lg :where(blockquote):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.6666667em;
+    margin-bottom: 1.6666667em;
+    padding-left: 1em;
+  }
+
+  .md\:prose-lg :where(h1):not(:where([class~="not-prose"] *)) {
+    font-size: 2.6666667em;
+    margin-top: 0;
+    margin-bottom: 0.8333333em;
+    line-height: 1;
+  }
+
+  .md\:prose-lg :where(h2):not(:where([class~="not-prose"] *)) {
+    font-size: 1.6666667em;
+    margin-top: 1.8666667em;
+    margin-bottom: 1.0666667em;
+    line-height: 1.3333333;
+  }
+
+  .md\:prose-lg :where(h3):not(:where([class~="not-prose"] *)) {
+    font-size: 1.3333333em;
+    margin-top: 1.6666667em;
+    margin-bottom: 0.6666667em;
+    line-height: 1.5;
+  }
+
+  .md\:prose-lg :where(h4):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.7777778em;
+    margin-bottom: 0.4444444em;
+    line-height: 1.5555556;
+  }
+
+  .md\:prose-lg :where(img):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.7777778em;
+    margin-bottom: 1.7777778em;
+  }
+
+  .md\:prose-lg :where(video):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.7777778em;
+    margin-bottom: 1.7777778em;
+  }
+
+  .md\:prose-lg :where(figure):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.7777778em;
+    margin-bottom: 1.7777778em;
+  }
+
+  .md\:prose-lg :where(figure > *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .md\:prose-lg :where(figcaption):not(:where([class~="not-prose"] *)) {
+    font-size: 0.8888889em;
+    line-height: 1.5;
+    margin-top: 1em;
+  }
+
+  .md\:prose-lg :where(code):not(:where([class~="not-prose"] *)) {
+    font-size: 0.8888889em;
+  }
+
+  .md\:prose-lg :where(h2 code):not(:where([class~="not-prose"] *)) {
+    font-size: 0.8666667em;
+  }
+
+  .md\:prose-lg :where(h3 code):not(:where([class~="not-prose"] *)) {
+    font-size: 0.875em;
+  }
+
+  .md\:prose-lg :where(pre):not(:where([class~="not-prose"] *)) {
+    font-size: 0.8888889em;
+    line-height: 1.75;
+    margin-top: 2em;
+    margin-bottom: 2em;
+    border-radius: 0.375rem;
+    padding-top: 1em;
+    padding-right: 1.5em;
+    padding-bottom: 1em;
+    padding-left: 1.5em;
+  }
+
+  .md\:prose-lg :where(ol):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.3333333em;
+    margin-bottom: 1.3333333em;
+    padding-left: 1.5555556em;
+  }
+
+  .md\:prose-lg :where(ul):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.3333333em;
+    margin-bottom: 1.3333333em;
+    padding-left: 1.5555556em;
+  }
+
+  .md\:prose-lg :where(li):not(:where([class~="not-prose"] *)) {
+    margin-top: 0.6666667em;
+    margin-bottom: 0.6666667em;
+  }
+
+  .md\:prose-lg :where(ol > li):not(:where([class~="not-prose"] *)) {
+    padding-left: 0.4444444em;
+  }
+
+  .md\:prose-lg :where(ul > li):not(:where([class~="not-prose"] *)) {
+    padding-left: 0.4444444em;
+  }
+
+  .md\:prose-lg :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
+    margin-top: 0.8888889em;
+    margin-bottom: 0.8888889em;
+  }
+
+  .md\:prose-lg :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.3333333em;
+  }
+
+  .md\:prose-lg :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 1.3333333em;
+  }
+
+  .md\:prose-lg :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.3333333em;
+  }
+
+  .md\:prose-lg :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 1.3333333em;
+  }
+
+  .md\:prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
+    margin-top: 0.8888889em;
+    margin-bottom: 0.8888889em;
+  }
+
+  .md\:prose-lg :where(hr):not(:where([class~="not-prose"] *)) {
+    margin-top: 3.1111111em;
+    margin-bottom: 3.1111111em;
+  }
+
+  .md\:prose-lg :where(hr + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .md\:prose-lg :where(h2 + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .md\:prose-lg :where(h3 + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .md\:prose-lg :where(h4 + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .md\:prose-lg :where(table):not(:where([class~="not-prose"] *)) {
+    font-size: 0.8888889em;
+    line-height: 1.5;
+  }
+
+  .md\:prose-lg :where(thead th):not(:where([class~="not-prose"] *)) {
+    padding-right: 0.75em;
+    padding-bottom: 0.75em;
+    padding-left: 0.75em;
+  }
+
+  .md\:prose-lg :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
+    padding-left: 0;
+  }
+
+  .md\:prose-lg :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
+    padding-right: 0;
+  }
+
+  .md\:prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
+    padding-top: 0.75em;
+    padding-right: 0.75em;
+    padding-bottom: 0.75em;
+    padding-left: 0.75em;
+  }
+
+  .md\:prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
+    padding-left: 0;
+  }
+
+  .md\:prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
+    padding-right: 0;
+  }
+
+  .md\:prose-lg :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .md\:prose-lg :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 0;
+  }
+
   .md\:p-12 {
     padding: 3rem;
   }
@@ -3075,6 +3282,197 @@ select {
     gap: 3rem;
   }
 
+  .lg\:prose-xl {
+    font-size: 1.25rem;
+    line-height: 1.8;
+  }
+
+  .lg\:prose-xl :where(p):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.2em;
+    margin-bottom: 1.2em;
+  }
+
+  .lg\:prose-xl :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
+    font-size: 1.2em;
+    line-height: 1.5;
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+
+  .lg\:prose-xl :where(blockquote):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.6em;
+    margin-bottom: 1.6em;
+    padding-left: 1.0666667em;
+  }
+
+  .lg\:prose-xl :where(h1):not(:where([class~="not-prose"] *)) {
+    font-size: 2.8em;
+    margin-top: 0;
+    margin-bottom: 0.8571429em;
+    line-height: 1;
+  }
+
+  .lg\:prose-xl :where(h2):not(:where([class~="not-prose"] *)) {
+    font-size: 1.8em;
+    margin-top: 1.5555556em;
+    margin-bottom: 0.8888889em;
+    line-height: 1.1111111;
+  }
+
+  .lg\:prose-xl :where(h3):not(:where([class~="not-prose"] *)) {
+    font-size: 1.5em;
+    margin-top: 1.6em;
+    margin-bottom: 0.6666667em;
+    line-height: 1.3333333;
+  }
+
+  .lg\:prose-xl :where(h4):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.8em;
+    margin-bottom: 0.6em;
+    line-height: 1.6;
+  }
+
+  .lg\:prose-xl :where(img):not(:where([class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .lg\:prose-xl :where(video):not(:where([class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .lg\:prose-xl :where(figure):not(:where([class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .lg\:prose-xl :where(figure > *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .lg\:prose-xl :where(figcaption):not(:where([class~="not-prose"] *)) {
+    font-size: 0.9em;
+    line-height: 1.5555556;
+    margin-top: 1em;
+  }
+
+  .lg\:prose-xl :where(code):not(:where([class~="not-prose"] *)) {
+    font-size: 0.9em;
+  }
+
+  .lg\:prose-xl :where(h2 code):not(:where([class~="not-prose"] *)) {
+    font-size: 0.8611111em;
+  }
+
+  .lg\:prose-xl :where(h3 code):not(:where([class~="not-prose"] *)) {
+    font-size: 0.9em;
+  }
+
+  .lg\:prose-xl :where(pre):not(:where([class~="not-prose"] *)) {
+    font-size: 0.9em;
+    line-height: 1.7777778;
+    margin-top: 2em;
+    margin-bottom: 2em;
+    border-radius: 0.5rem;
+    padding-top: 1.1111111em;
+    padding-right: 1.3333333em;
+    padding-bottom: 1.1111111em;
+    padding-left: 1.3333333em;
+  }
+
+  .lg\:prose-xl :where(ol):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.2em;
+    margin-bottom: 1.2em;
+    padding-left: 1.6em;
+  }
+
+  .lg\:prose-xl :where(ul):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.2em;
+    margin-bottom: 1.2em;
+    padding-left: 1.6em;
+  }
+
+  .lg\:prose-xl :where(li):not(:where([class~="not-prose"] *)) {
+    margin-top: 0.6em;
+    margin-bottom: 0.6em;
+  }
+
+  .lg\:prose-xl :where(ol > li):not(:where([class~="not-prose"] *)) {
+    padding-left: 0.4em;
+  }
+
+  .lg\:prose-xl :where(ul > li):not(:where([class~="not-prose"] *)) {
+    padding-left: 0.4em;
+  }
+
+  .lg\:prose-xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
+    margin-top: 0.8em;
+    margin-bottom: 0.8em;
+  }
+
+  .lg\:prose-xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.2em;
+  }
+
+  .lg\:prose-xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 1.2em;
+  }
+
+  .lg\:prose-xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.2em;
+  }
+
+  .lg\:prose-xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 1.2em;
+  }
+
+  .lg\:prose-xl :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
+    margin-top: 0.8em;
+    margin-bottom: 0.8em;
+  }
+
+  .lg\:prose-xl :where(hr):not(:where([class~="not-prose"] *)) {
+    margin-top: 2.8em;
+    margin-bottom: 2.8em;
+  }
+
+  .lg\:prose-xl :where(hr + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-xl :where(h2 + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-xl :where(h3 + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-xl :where(h4 + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-xl :where(table):not(:where([class~="not-prose"] *)) {
+    font-size: 0.9em;
+    line-height: 1.5555556;
+  }
+
+  .lg\:prose-xl :where(thead th):not(:where([class~="not-prose"] *)) {
+    padding-right: 0.6666667em;
+    padding-bottom: 0.8888889em;
+    padding-left: 0.6666667em;
+  }
+
+  .lg\:prose-xl :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
+    padding-left: 0;
+  }
+
+  .lg\:prose-xl :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
+    padding-right: 0;
+  }
+
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -3094,13 +3492,32 @@ select {
     padding-top: 4rem;
     padding-bottom: 4rem;
   }
+
+  .lg\:prose-xl :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
+    padding-top: 0.8888889em;
+    padding-right: 0.6666667em;
+    padding-bottom: 0.8888889em;
+    padding-left: 0.6666667em;
+  }
+
+  .lg\:prose-xl :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
+    padding-left: 0;
+  }
+
+  .lg\:prose-xl :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
+    padding-right: 0;
+  }
+
+  .lg\:prose-xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 0;
+  }
 }
 
 @media (min-width: 1280px) {
-  .xl\:m-20 {
-    margin: 5rem;
-  }
-
   .xl\:m-8 {
     margin: 2rem;
   }
@@ -3109,6 +3526,10 @@ select {
     margin: 3.5rem;
   }
 
+  .xl\:m-20 {
+    margin: 5rem;
+  }
+
   .xl\:mx-auto {
     margin-left: auto;
     margin-right: auto;

app/helpers/merged/options_helper.rb

@@ -38,7 +38,7 @@ module Merged
 
     def order_option(section , clazz = "")
       if section.has_option?("order")
-        clazz += " order-last" if section.option('order') == "right"
+        clazz += " " + " order-last" if section.option('order') == "right"
       end
       {class: clazz}
     end
@@ -46,7 +46,7 @@ module Merged
     def text_align_option(section , clazz = "")
       if section.has_option?("text_align")
         # text-center , text-left , text-right , leave comment for tailwind
-        clazz += " text-#{section.option('text_align')}"
+        clazz += " " + " text-#{section.option('text_align')}"
       end
       {class: clazz}
     end
@@ -55,11 +55,11 @@ module Merged
       if section.has_option?("item_align")
         case section.option("item_align")
         when "left"
-          clazz += " justify-start"
+          clazz += " " + " justify-start"
         when "right"
-          clazz += " justify-end"
+          clazz += " " + " justify-end"
         else
-          clazz += " justify-center"
+          clazz += " " + " justify-center"
         end
       end
       {class: clazz }
@@ -68,112 +68,45 @@ module Merged
     def background_option(section , clazz = "")
       if section.has_option?("background")
         option = section.option('background')
-        clazz += bg_for(section)
+        clazz += " " + Merged.background[section.option('background')] || ""
-        clazz += " text-white" if option.include?("solid")
       end
       {class: clazz}
     end
 
     def margin_option(section , clazz = "")
       return {class: clazz} unless section.has_option?("margin")
-      margin =  { "none" =>  " m-0" ,
+      margin = Merged.margin[section.option("margin")] || ""
-                  "small" => "  2 md:4  lg:6  xl:m-8" ,
-                  "medium" => " 5 md:8  lg:10 xl:m-14" ,
-                  "large" => "  8 md:12 lg:16 xl:m-20" ,
-        }[section.option("margin")] || ""
       {class: clazz + margin}
     end
 
     def text_color_option(section , clazz = "")
       if section.has_option?("text_color")
-        clazz += color_for(section)
+        clazz += " " + Merged.text_color[section.option("text_color")] || ""
       end
       {class: clazz }
     end
 
     def shade_option(section , clazz = "")
       if section.has_option?("shade_color")
-        clazz += shade_for(section)
+        clazz += " " + Merged.shade_color[section.option("shade_color")] || ""
       end
       {class: clazz }
     end
 
-    def text_column_option( section)
+    def text_column_option( section )
-      option = section.option('columns')
+      if section.has_option?("text_columns")
-      option = 2 if option.blank?
+        clazz += " " + Merged.text_columns[section.option("text_columns")] || ""
-      case option
-      when "3"
-        columns = "columns-1 md:columns-2 lg:columns-3"
-      when "4"
-        columns = "columns-1 md:columns-2 lg:columns-3 xl:columns-4"
-      else # two
-        columns = "columns-1 md:columns-2"
       end
-      {class: columns }
+      {class: clazz }
     end
 
     def column_option(section)
-      option = section.option('columns')
+      if section.has_option?("columns")
-      case option
+        clazz += " " + Merged.text_columns[section.option("columns")] || ""
-      when "1"
-        columns = "grid-cols-1"
-      when "3"
-        columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
-      when "4"
-        columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
-      when "5"
-        columns = "grid-cols-1 md:grid-cols-3 lg:grid-cols-5"
-      when "6"
-        columns = "grid-cols-2 md:grid-cols-4 lg:grid-cols-6"
-      else # two
-        columns = "grid-cols-1 md:grid-cols-2"
       end
-      columns += " gap-8 md:gap-12 lg:gap-16"
+      {class: clazz }
-      {class: columns }
     end
 
-    private
-    # need full color names for tailwind to pick it up
-    def bg_for( section )
-      { "white" =>  " bg-white" ,
-        "none" =>  "" ,
-        "light_blue" => " bg-cyan-100" ,
-        "light_gray" => " bg-gray-100" ,
-        "light_orange" => " bg-orange-50" ,
-        "solid_blue" => " bg-cyan-700" ,
-        "solid_red" => " bg-amber-600" ,
-        "solid_green" => " bg-green-700" ,
-        "solid_petrol" => " bg-teal-700" ,
-        "solid_indigo" => " bg-cyan-900" ,
-        "solid_black" => " bg-slate-900" ,
-      }[section.option('background')] || ""
-    end
 
-    # need full color names for tailwind to pick it up
-    def color_for( section )
-      { "white" => " text-white",
-        "none" => "",
-        "light_blue" => " text-cyan-100" ,
-        "light_gray" => " text-gray-100" ,
-        "solid_blue" => " text-cyan-700" ,
-        "solid_red" => " text-orange-800" ,
-        "solid_green" => " text-green-700" ,
-        "solid_petrol" => " text-teal-700" ,
-        "solid_indigo" => " text-indigo-800" ,
-        "solid_black" => " text-slate-800" ,
-      }[section.option("text_color")] || ""
-    end
-    # need full color names for tailwind to pick it up
-
-    def shade_for( section )
-      { "white_25" => " bg-white/25",
-        "none" => "",
-        "black_25" => " bg-black/25" ,
-        "light_blue_25" => " bg-cyan-100/25" ,
-        "light_red_25" => " bg-orange-300/25" ,
-        "solid_blue_25" => " bg-cyan-700/25" ,
-        "solid_red_25" => " bg-orange-800/25" ,
-      }[section.option("shade_color")] || ""
-    end
   end
 end

app/models/merged/option_definition.rb

@@ -1,4 +1,17 @@
 module Merged
+
+  # Quite simple mapping from name to usually  a selection of values.
+  # Options have type that can be set but usually is inferred from
+  # wether there is one values (select) other wise text.
+  # date is also supported.
+  #
+  # a corresponding ./app/views/merged/sections/_option_form_TYPE.haml
+  # nust exist to render the type.
+  #
+  # Also values may be provided by a module function/attribute on Merged.
+  # eg option text_color (also shade_color) have a Merged.text_color that return a
+  # hash. In this case so it is easy to customize the colors of the app.
+  #
   class OptionDefinition < SharedBase
 
     fields :name , :default , :description , :values , :type
@@ -13,11 +26,13 @@ module Merged
     end
 
     def has_values?
+      return true if Merged.respond_to?( name.to_sym )
       return false if attributes[:values].nil?
       ! attributes[:values].empty?
     end
 
     def values
+      return Merged.send(name.to_sym).keys if Merged.respond_to?( name.to_sym )
       return [] unless has_values?
       attributes[:values].split(" ")
     end

config/merged/option_definitions.yml

@@ -117,3 +117,8 @@
   :values: left-top left left-bottom top center bottom right-top right right-bottom
   :default: center
   :id: 21
+- :name: text_columns
+  :description: Number of text columns in a newspaper style layout
+  :values: 2 3 4 5
+  :default: 3
+  :id: 22

config/merged/section_styles.yml

@@ -175,6 +175,6 @@
     - text
   options:
     - order
-    - columns
+    - text_columns
     - background
     - text_color

config/tailwind.config.js

@@ -3,7 +3,8 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 module.exports = {
   content: [
     './public/*.html',
-    './app/helpers/**/*.rb',
+    './app/**/*.rb',
+    './lib/**/*.rb',
     './app/javascript/**/*.js',
     './app/views/**/*.{erb,haml,html,slim}'
   ],

lib/generators/merged/install/templates/initializer.rb

@@ -9,3 +9,58 @@ Merged.images_dir = "merged"
 # Notice that the data is ALWAYS inside a merged directory,
 # so in the default case Rails.root/merged/*.yml
 Merged.data_dir = "."
+
+
+# text colors, keys are options shown to user, values what gets replaced
+Merged.text_color =  { "white" => "text-white",
+          "none" => "",
+          "light_blue" => "text-cyan-100",
+          "light_gray" => "text-gray-100",
+          "solid_blue" => "text-cyan-700",
+          "solid_red" => "text-orange-800",
+          "solid_green" => "text-green-700",
+          "solid_petrol" => "text-teal-700",
+          "solid_indigo" => "text-indigo-800",
+          "solid_black" => "text-slate-800",
+        }
+
+# margin option, keys are options shown to user, values what gets replaced
+Merged.margin =  { "none" =>  "m-0",
+              "small" => " m-2 md:m-4  lg:6  xl:m-8",
+              "medium" => "m-5 md:m-8  lg:10 xl:m-14",
+              "large" => " m-8 md:m-12 lg:16 xl:m-20",}
+
+# background colors
+Merged.background = {"white" =>  "bg-white",
+                  "none" =>  "",
+                  "light_blue" => "bg-cyan-100",
+                  "light_gray" => "bg-gray-100",
+                  "light_orange" => "bg-orange-50",
+                  "solid_blue" => "bg-cyan-700  text-white",
+                  "solid_red" => "bg-amber-600  text-white",
+                  "solid_green" => "bg-green-700 text-white",
+                  "solid_petrol" => "bg-teal-700  text-white",
+                  "solid_indigo" => "bg-cyan-900 text-white",
+                  "solid_black" => "bg-slate-900  text-white",  }
+
+# shade options
+Merged.shade_color =  {"white_25" => "bg-white/25",
+                    "none" => "",
+                    "black_25" => "bg-black/25",
+                    "light_blue_25" => "bg-cyan-100/25",
+                    "light_red_25" => "bg-orange-300/25",
+                    "solid_blue_25" => "bg-cyan-700/25",
+                    "solid_red_25" => "bg-orange-800/25", }
+
+# amount of text columns
+Merged.text_columns = {
+      "3" => "columns-1 md:columns-2 lg:columns-3",
+      "4" => "columns-1 md:columns-2 lg:columns-3 xl:columns-4",
+      "2" => "columns-1 md:columns-2" }
+
+Merged.columns = { "1" => "grid-cols-1",
+                "2" => "grid-cols-1 md:grid-cols-2"
+                "3" => "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+                "4" => "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+                "5" => "grid-cols-1 md:grid-cols-3 lg:grid-cols-5",
+                "6" => "grid-cols-2 md:grid-cols-4 lg:grid-cols-6", }

lib/merged.rb

@@ -8,7 +8,70 @@ module Merged
   # Directory inside the app/assets/images
   mattr_accessor :images_dir
   @@images_dir = "merged"
+
   # directory in root to store data
   mattr_accessor :data_dir
   @@data_dir = "."
+
+  # text colors, keys are options shown to user, values what gets replaced
+  mattr_accessor :text_color
+  @@text_color =  { "white" => "text-white",
+          "none" => "",
+          "light_blue" => "text-cyan-100",
+          "light_gray" => "text-gray-100",
+          "solid_blue" => "text-cyan-700",
+          "solid_red" => "text-orange-800",
+          "solid_green" => "text-green-700",
+          "solid_petrol" => "text-teal-700",
+          "solid_indigo" => "text-indigo-800",
+          "solid_black" => "text-slate-800",
+        }
+
+  # margin option, keys are options shown to user, values what gets replaced
+  mattr_accessor :margin
+  @@margin =  { "none" =>  "m-0",
+              "small" => " m-2 md:m-4  lg:6  xl:m-8",
+              "medium" => "m-5 md:m-8  lg:10 xl:m-14",
+              "large" => " m-8 md:m-12 lg:16 xl:m-20",}
+
+  # background colors
+  mattr_accessor :background
+  @@background = {"white" =>  "bg-white",
+                  "none" =>  "",
+                  "light_blue" => "bg-cyan-100",
+                  "light_gray" => "bg-gray-100",
+                  "light_orange" => "bg-orange-50",
+                  "solid_blue" => "bg-cyan-700  text-white",
+                  "solid_red" => "bg-amber-600  text-white",
+                  "solid_green" => "bg-green-700 text-white",
+                  "solid_petrol" => "bg-teal-700  text-white",
+                  "solid_indigo" => "bg-cyan-900 text-white",
+                  "solid_black" => "bg-slate-900  text-white",  }
+
+  # shade options
+  mattr_accessor :shade_color
+  @@shade_color =  {"white_25" => "bg-white/25",
+                    "none" => "",
+                    "black_25" => "bg-black/25",
+                    "light_blue_25" => "bg-cyan-100/25",
+                    "light_red_25" => "bg-orange-300/25",
+                    "solid_blue_25" => "bg-cyan-700/25",
+                    "solid_red_25" => "bg-orange-800/25", }
+
+  # amount of text columns
+  mattr_accessor :text_columns
+  @@text_columns = {
+      "3" => "columns-1 md:columns-2 lg:columns-3",
+      "4" => "columns-1 md:columns-2 lg:columns-3 xl:columns-4",
+      "2" => "columns-1 md:columns-2" }
+
+  # amount of text columns
+  mattr_accessor :columns
+  @@columns = { "1" => "grid-cols-1",
+                "2" => "grid-cols-1 md:grid-cols-2"
+                "3" => "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+                "4" => "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+                "5" => "grid-cols-1 md:grid-cols-3 lg:grid-cols-5",
+                "6" => "grid-cols-2 md:grid-cols-4 lg:grid-cols-6", }
+
 end