[CONFIG][Twig] Replaced form theme to a custom one

[CARDS][Forms] Added custom social form theme

[CSS] Replaced/added new classes to be used with forms

Base form theme created, can be extended to create complex blocks to be
called by twig when rendering a specific form.

config/packages/twig.yaml

@@ -1,2 +1,4 @@
 twig:
-  form_themes: ['tailwind_2_layout.html.twig']
+  form_themes: [
+      '/cards/forms/form_social_layout.html.twig'
+  ]

public/assets/default_theme/css/widgets/buttons.css

@@ -112,12 +112,6 @@ textarea {
     width: inherit;
     max-width: border-box !important;
 }
-button:not(:last-child),
-input:not(:last-child),
-select:not(:last-child),
-textarea:not(:last-child) {
-    margin-bottom: var(--s);
-}
 button,
 select,
 textarea {

public/assets/default_theme/css/widgets/sections.css

@@ -132,19 +132,19 @@
     margin-bottom: var(--s);
     font-weight: bold;
 }
-div[class^="mb-"] {
+.form-row {
-    display: flex;
-    flex-direction: column;
-    flex-basis: border-box;
     margin-bottom: var(--s);
 }
-div[class^="mb-"]:last-of-type {
+.form-row-widget {
-    margin-bottom: unset;
+    display: block;
+    width: 100%;
 }
-div[class^="mb-"] textarea {
+textarea.form-row-widget {
     height: 7rem;
-    max-height: 100%;
+    resize: vertical;
 }
+.form-row-widget-error,
+.form-error,
 .alert,
 .alert-danger {
     display: inline-block;

templates/cards/forms/form_social_layout.html.twig

@@ -0,0 +1,69 @@
+{% use 'form_div_layout.html.twig' %}
+
+{%- block form_row -%}
+    {%- set row_attr = row_attr|merge({ class: row_attr.class|default(row_class|default('form-row')) }) -%}
+    {{- parent() -}}
+{%- endblock form_row -%}
+
+{%- block widget_attributes -%}
+    {%- set attr = attr|merge({ class: attr.class|default(widget_class|default('form-row-widget')) ~ (disabled ? ' ' ~ widget_disabled_class|default('form-row-widget-disabled')) ~ (errors|length ? ' ' ~ widget_errors_class|default('form-row-widget-error')) }) -%}
+    {{- parent() -}}
+{%- endblock widget_attributes -%}
+
+{%- block form_label -%}
+    {%- set label_attr = label_attr|merge({ class: label_attr.class|default(label_class|default('form-row-label')) }) -%}
+    {{- parent() -}}
+{%- endblock form_label -%}
+
+{%- block form_help -%}
+    {%- set help_attr = help_attr|merge({ class: help_attr.class|default(help_class|default('form-row-help')) }) -%}
+    {{- parent() -}}
+{%- endblock form_help -%}
+
+{%- block form_errors -%}
+    {%- if errors|length > 0 -%}
+        <ul>
+            {%- for error in errors -%}
+                <li class="{{ error_item_class|default('form-error') }}">{{ error.message }}</li>
+            {%- endfor -%}
+        </ul>
+    {%- endif -%}
+{%- endblock form_errors -%}
+
+{%- block choice_widget_expanded -%}
+    {%- set attr = attr|merge({ class: attr.class|default('form-row-choice') }) -%}
+    <div {{ block('widget_container_attributes') }}>
+        {%- for child in form %}
+            <div class="choice-children">
+                {{- form_widget(child) -}}
+                {{- form_label(child, null, { translation_domain: choice_translation_domain }) -}}
+            </div>
+        {% endfor -%}
+    </div>
+{%- endblock choice_widget_expanded -%}
+
+{%- block checkbox_row -%}
+    {%- set row_attr = row_attr|merge({ class: row_attr.class|default(row_class|default('form-row-checkbox')) }) -%}
+    {%- set widget_attr = {} -%}
+    {%- if help is not empty -%}
+        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
+    {%- endif -%}
+    <div{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
+        {{- form_errors(form) -}}
+        <div class="inline-flex items-center">
+            {{- form_widget(form, widget_attr) -}}
+            {{- form_label(form) -}}
+        </div>
+        {{- form_help(form) -}}
+    </div>
+{%- endblock checkbox_row -%}
+
+{%- block checkbox_widget -%}
+    {%- set widget_class = widget_class|default('form-row-checkbox-element') -%}
+    {{- parent() -}}
+{%- endblock checkbox_widget -%}
+
+{%- block radio_widget -%}
+    {%- set widget_class = widget_class|default('form-row-radio-element') -%}
+    {{- parent() -}}
+{%- endblock radio_widget -%}