feat: adopt main website styles

templates/forms.html.twig

@@ -1,6 +1,7 @@
 {% use 'form_div_layout.html.twig' %}
 
 {%- block form_row -%}
+    {%- set row_attr = row_attr|merge({ 'class': (row_attr.class|default('') ~ ' mb-1')|trim }) -%}
     {%- set widget_attr = {} -%}
     {%- if help is not empty -%}
         {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
@@ -14,7 +15,7 @@
 {%- endblock form_row -%}
 
 {%- block form_label -%}
-    {% set class = 'block font-semibold pb-2' %}
+    {% set class = '' %}
     {% if errors|length %}
         {% set class = class ~ ' text-red-500' %}
     {% endif %}
@@ -35,11 +36,9 @@
 {%- block form_widget_simple -%}
     {%- set type = type|default('text') -%}
     {%- if type != 'hidden' -%}
-        {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
+        {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
         {%- if errors|length -%}
-            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%}
-        {% else %}
-            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-gray-400 focus:ring-primary' }) -%}
+            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
         {%- endif -%}
         {%- if disabled is defined and disabled == true -%}
             {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
@@ -52,11 +51,9 @@
 {%- endblock form_widget_simple -%}
 
 {%- block textarea_widget -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
     {%- if errors|length -%}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%}
-    {% else %}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-gray-400 focus:ring-primary' }) -%}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
     {%- endif -%}
     {%- if disabled is defined and disabled == true -%}
         {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
@@ -68,11 +65,9 @@
 {%- endblock textarea_widget -%}
 
 {%- block checkbox_widget -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' h-4 w-4 rounded text-primary')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-checkbox')|trim }) -%}
     {%- if errors|length -%}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-red-500 text-red-500 ring-red-500 focus:ring-red-500' }) -%}
-    {% else %}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-gray-300 focus:ring-primary' }) -%}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-checkbox--has-error' }) -%}
     {%- endif -%}
     {%- if attr.disabled is defined and attr.disabled == true -%}
         {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
@@ -81,11 +76,9 @@
 {%- endblock checkbox_widget -%}
 
 {%- block radio_widget -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' h-4 w-4 rounded-full text-primary')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-radio')|trim }) -%}
     {%- if errors|length -%}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-red-500 text-red-500 ring-red-500 focus:ring-red-500' }) -%}
-    {% else %}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-gray-300 focus:ring-primary' }) -%}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-radio--has-error' }) -%}
     {%- endif -%}
     {%- if attr.disabled is defined and attr.disabled == true -%}
         {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
@@ -108,11 +101,9 @@
 {% endblock %}
 
 {%- block choice_widget_collapsed -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
     {%- if errors|length -%}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%}
-    {% else %}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-gray-400 focus:ring-primary' }) -%}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
     {%- endif -%}
     {%- if disabled is defined and disabled == true -%}
         {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}