hr-design-system-handlebars 1.110.12 → 1.110.13

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.110.13 (Thu Oct 17 2024)
+
+#### 🐛 Bug Fix
+
+- Forms colors and spacing v2 [#1117](https://github.com/mumprod/hr-design-system-handlebars/pull/1117) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.110.12 (Thu Oct 17 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -2386,6 +2386,10 @@ article.indexTextDS .indexTextHighlighted .link {
   border-color: #cc1a14;
   border-color: var(--color-error);
 }
+.border-error-dark {
+  border-color: #e07672;
+  border-color: var(--color-error-dark);
+}
 .border-event-calendar-secondary {
   border-color: #797979;
   border-color: var(--color-eventcalendar-secondary);
@@ -3263,11 +3267,6 @@ article.indexTextDS .indexTextHighlighted .link {
   color: rgba(22, 163, 74, 1);
   color: rgba(22, 163, 74, var(--tw-text-opacity));
 }
-.text-green-800 {
-  --tw-text-opacity: 1;
-  color: rgba(22, 101, 52, 1);
-  color: rgba(22, 101, 52, var(--tw-text-opacity));
-}
 .text-inherit {
   color: inherit;
 }
@@ -3299,11 +3298,6 @@ article.indexTextDS .indexTextHighlighted .link {
   color: #005293;
   color: var(--color-primary-ds);
 }
-.text-red-700 {
-  --tw-text-opacity: 1;
-  color: rgba(185, 28, 28, 1);
-  color: rgba(185, 28, 28, var(--tw-text-opacity));
-}
 .text-search-footer-text {
   color: #000000;
   color: var(--color-search-footer-text);
@@ -3332,6 +3326,10 @@ article.indexTextDS .indexTextHighlighted .link {
   color: #006dc1;
   color: var(--color-subline);
 }
+.text-success {
+  color: #2c7e13;
+  color: var(--color-success);
+}
 .text-text {
   color: #000000;
   color: var(--color-standard-text);
@@ -3572,7 +3570,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1729160000017;
+  counter-reset: cnt1729168861889;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -3986,7 +3984,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1729160000017 1;
+  counter-increment: cnt1729168861889 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4004,7 +4002,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1729160000017);
+  content: counter(cnt1729168861889);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4337,6 +4335,8 @@ input[type='radio']:checked::after {
     --structure-nav-text-mobile: var(--color-primary-ds);
 
     --color-error: #cc1a14;
+    --color-error-dark: #e07672;
+    --color-success: #2c7e13;
     --color-form-highlight: var(--color-link);
     --color-form-highlight-dark: var(--color-link-dark);
 
@@ -8196,9 +8196,9 @@ input[type='radio']:checked::after {
 .rtl\:space-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 1;
 }
-.dark\:border-error:where(.dark, .dark *) {
-  border-color: #cc1a14;
-  border-color: var(--color-error);
+.dark\:border-error-dark:where(.dark, .dark *) {
+  border-color: #e07672;
+  border-color: var(--color-error-dark);
 }
 .dark\:border-form-highlight-dark:where(.dark, .dark *) {
   border-color: #006eb7;
@@ -8231,6 +8231,10 @@ input[type='radio']:checked::after {
   background-color: #006eb7;
   background-color: var(--color-podcast-text);
 }
+.dark\:fill-error-dark:where(.dark, .dark *) {
+  fill: #e07672;
+  fill: var(--color-error-dark);
+}
 .dark\:fill-form-highlight-dark:where(.dark, .dark *) {
   fill: #006eb7;
   fill: var(--color-form-highlight-dark);
@@ -8243,6 +8247,10 @@ input[type='radio']:checked::after {
   fill: #f0f0f0;
   fill: var(--color-standard-text-dark);
 }
+.dark\:text-error-dark:where(.dark, .dark *) {
+  color: #e07672;
+  color: var(--color-error-dark);
+}
 .dark\:text-link-dark:where(.dark, .dark *) {
   color: #006eb7;
   color: var(--color-link-dark);

package/dist/assets/js/alpine.js

@@ -19,8 +19,8 @@ AsyncAlpine.init(Alpine)
     )
     
     .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
-    .data('inputHandler', ()=> import('components/forms/inputHandler.alpine.js'))
-    .data('contactForm', ()=> import('components/forms/contactForm.alpine.js'))
+    .data('inputHandler', ()=> import('components/forms/js/inputHandler.alpine.js'))
+    .data('contactForm', ()=> import('components/forms/js/contactForm.alpine.js'))
     .start()
 
 window.Alpine = Alpine

package/dist/views/components/dataPolicySettings/data_policy_settings.hbs

@@ -51,7 +51,7 @@
                         class="{{if (isUserConsentNeeded 'https://www.agf.de/') 'js-user-consent-needed ' ''}}mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
                         href="https://www.agf.de/" title="AGF">(https://www.agf.de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
                     <div class="flex w-fit">
-                        {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="agf aktivieren/deaktivieren" }}
+                        {{> components/forms/components/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="agf aktivieren/deaktivieren" }}
                     </div>
                 </li>
                 <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]">
@@ -60,7 +60,7 @@
                         href="https://www.atinternet.com/de/"
                         title="AT Internet">(https://www.atinternet.com/de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
                     <div class="flex w-fit">
-                        {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="at internet aktivieren/deaktivieren"}}
+                        {{> components/forms/components/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="at internet aktivieren/deaktivieren"}}
                     </div>
                 </li>
             </ul>
@@ -85,7 +85,7 @@
                 <div class="flex justify-between">
                     <span class="inline-flex text-base text-black js-providerTitle">x</span>
                     <div class="flex float-right">
-                        {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
+                        {{> components/forms/components/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
                     </div>
                 </div>
             </div>
@@ -96,7 +96,7 @@
                         <li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3]">
                             <span class="inline-flex text-base leading-6 text-black align-text-top">{{this.value}}</span>
                             <div class="flex float-right">
-                                {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _whitelisted=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
+                                {{> components/forms/components/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _whitelisted=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
                             </div>
                         </li>
                     {{/each}}

package/dist/{views_static/components/forms → views/components/forms/components}/choice.hbs

@@ -12,7 +12,7 @@
 <div class="flex flex-row items-center w-full cursor-pointer ">
   <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight"," checked:bg-white checked:border-form-highlight rounded-full",""]'}}"
       {{#if _required}}
-            :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+            :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}
       {{#if _inGroup }}
          {{#if _required}}
@@ -80,7 +80,7 @@
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+         <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
 {{/unless}}

package/dist/views/components/forms/{choiceGroup.hbs → components/choiceGroup.hbs}

@@ -22,7 +22,7 @@
     <div class="flex flex-row flex-wrap gap-x-6 md:gap-x-7 gap-y-5" >
         {{#each _items}}   
             <div>
-                {{> components/forms/choice
+                {{> components/forms/components/choice
                         _type=../_type
                         _name=../_name
                         _required=(if ../_isRadio ../_required)
@@ -42,7 +42,7 @@
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+         <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
 </div>

package/dist/views/components/forms/{error_icon.hbs → components/error_icon.hbs}

@@ -1,3 +1,3 @@
 <div class="hidden w-5 h-5 {{_class}}"{{#if _xclass}} :class="{{_xclass}}"{{/if}}>
-    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-error"}}
+    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-error dark:fill-error-dark"}}
 </div>

package/{src/stories/views/components/forms → dist/views/components/forms/components}/fields.hbs

@@ -4,18 +4,18 @@
         {{#if this.caption}}         
             <fieldset>
                 <legend class="mb-5 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
-                {{~> components/forms/fields}}
+                {{~> components/forms/components/fields}}
             </fieldset>            
         {{else}}
             <fieldset>
-                {{~> components/forms/fields}}
+                {{~> components/forms/components/fields}}
             </fieldset>
         {{/if}}
         
     {{else}}
         <div class="js-wrapper-{{this.name}}">
             {{#if this.type.isTextarea}}
-                {{~> components/forms/textarea
+                {{~> components/forms/components/textarea
                     _name=this.name
                     _label=this.label
                     _description=this.description
@@ -29,7 +29,7 @@
                     _formId=../_formId
                 }}
             {{else if this.type.isText}}
-                {{~> components/forms/input
+                {{~> components/forms/components/input
                     _type=this.type.asString
                     _isEmail=this.type.isEmail
                     _name=this.name
@@ -46,7 +46,7 @@
                     _formId=../_formId
                 }}
             {{else if this.type.isSelect}}
-                {{~> components/forms/select
+                {{~> components/forms/components/select
                     _name=this.name
                     _label=this.label
                     _labelClass="hide"
@@ -58,7 +58,7 @@
                 }}
             {{else if this.type.isChoice}}
                 {{#if this.isGrouped }}
-                    {{~> components/forms/choiceGroup
+                    {{~> components/forms/components/choiceGroup
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label
@@ -72,7 +72,7 @@
                         _formId=../_formId  
                     }}
                 {{else}}
-                    {{~> components/forms/choice
+                    {{~> components/forms/components/choice
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label

package/{src/stories/views/components/forms → dist/views/components/forms/components}/input.hbs

@@ -5,7 +5,7 @@
    x-ignore
    >
    <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none" 
-      :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+      :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
       x-bind:data-is-valid="valid ? 'true' : 'false'"     
@@ -61,7 +61,7 @@
    </label> 
    
    <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-      {{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
+      {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
    </div>
  
    <div class="flex items-end justify-between h-5 font-heading">     
@@ -69,7 +69,7 @@
          <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
       
-      <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       
    </div>
 </div>

package/dist/views/components/forms/{message.hbs → components/message.hbs}

@@ -2,10 +2,10 @@
         <div class="flex items-center gap-x-2 md:gap-x-3">
             {{#if _success}}
                 {{> components/forms/success_icon}}
-                <span class="h-5 font-bold text-green-800">{{#if this.successText}}{{this.successText.richtext}}{{else}}{{~loca "webform_send_text_success"}}{{/if}}</span>       
+                <span class="h-5 font-bold text-success">{{#if this.successText}}{{this.successText.richtext}}{{else}}{{~loca "webform_send_text_success"}}{{/if}}</span>       
             {{else}}
                 {{> components/forms/error_icon _class="!block"}}
-                <span class="h-5 font-bold text-red-700">{{~loca "webform_send_text_error"}}</span>  
+                <span class="h-5 font-bold text-error dark:text-error-dark">{{~loca "webform_send_text_error"}}</span>  
             {{/if}}
         </div>
         {{#unless _success}}

package/{src/stories/views/components/forms → dist/views/components/forms/components}/select.hbs

@@ -5,7 +5,7 @@
 >
     <select
         class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
-        :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+        :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
         x-model="select{{getRandom}}"
         id="select{{getRandom}}"
         title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
@@ -48,7 +48,7 @@
             <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{_description}}</div>
         {{/if}}
         {{#if _required}}
-            <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
+            <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
         {{/if}}
     </div>
     <div class="absolute right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">

package/{src/stories/views/components/forms → dist/views/components/forms/components}/textarea.hbs

@@ -36,7 +36,7 @@
       {{#if _required}}required{{/if}}
       class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-form-highlight dark:border-form-highlight-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
-         :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+         :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}
    >{{~#if _formField.isValid~}}
         {{{_formField.forHtmlContent}}}
@@ -61,7 +61,7 @@
    </label>
    {{#if _required}}
          <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-            {{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
+            {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
          </div>
   {{/if}}
    <div class="flex items-end justify-between h-5 font-heading">     
@@ -69,7 +69,7 @@
          <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
+         <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
       {{/if}}
       {{#if _maxLength}}
          <div class="px-4 ml-auto text-xs text-gray-scorpion"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>

package/dist/views/components/forms/webform.hbs

@@ -1,5 +1,5 @@
 {{~#if _newWebForm ~}}
-    {{#>components/forms/backgroundBox  }}  
+    {{#>components/forms/components/backgroundBox  }}  
 
         
         <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
@@ -22,21 +22,21 @@
                 accept-charset="utf-8"
                 
                 >
-                {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
+                {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
-                {{> components/forms/controls }}
+                {{> components/forms/components/controls }}
 
                 <template id="successMessage">
-                    {{> components/forms/message _success=true _messageText="Das Formular wurde erforlgreich versendet." }}
+                    {{> components/forms/components/message _success=true _messageText="Das Formular wurde erforlgreich versendet." }}
                 </template>
 
                 <template id="errorMessage">
-                    {{> components/forms/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
+                    {{> components/forms/components/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
                 </template>
                 
             </form>
         </div>   
-    {{/components/forms/backgroundBox }}
+    {{/components/forms/components/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
 {{~/if~}}

package/dist/views_static/components/dataPolicySettings/data_policy_settings.hbs

@@ -51,7 +51,7 @@
                         class="{{if (isUserConsentNeeded 'https://www.agf.de/') 'js-user-consent-needed ' ''}}mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
                         href="https://www.agf.de/" title="AGF">(https://www.agf.de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
                     <div class="flex w-fit">
-                        {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="agf aktivieren/deaktivieren" }}
+                        {{> components/forms/components/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="agf aktivieren/deaktivieren" }}
                     </div>
                 </li>
                 <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]">
@@ -60,7 +60,7 @@
                         href="https://www.atinternet.com/de/"
                         title="AT Internet">(https://www.atinternet.com/de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
                     <div class="flex w-fit">
-                        {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="at internet aktivieren/deaktivieren"}}
+                        {{> components/forms/components/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="at internet aktivieren/deaktivieren"}}
                     </div>
                 </li>
             </ul>
@@ -85,7 +85,7 @@
                 <div class="flex justify-between">
                     <span class="inline-flex text-base text-black js-providerTitle">x</span>
                     <div class="flex float-right">
-                        {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
+                        {{> components/forms/components/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
                     </div>
                 </div>
             </div>
@@ -96,7 +96,7 @@
                         <li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3]">
                             <span class="inline-flex text-base leading-6 text-black align-text-top">{{this.value}}</span>
                             <div class="flex float-right">
-                                {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _whitelisted=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
+                                {{> components/forms/components/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _whitelisted=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
                             </div>
                         </li>
                     {{/each}}

package/{src/stories/views/components/forms → dist/views_static/components/forms/components}/choice.hbs

@@ -12,7 +12,7 @@
 <div class="flex flex-row items-center w-full cursor-pointer ">
   <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight"," checked:bg-white checked:border-form-highlight rounded-full",""]'}}"
       {{#if _required}}
-            :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+            :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}
       {{#if _inGroup }}
          {{#if _required}}
@@ -80,7 +80,7 @@
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+         <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
 {{/unless}}

package/dist/views_static/components/forms/{choiceGroup.hbs → components/choiceGroup.hbs}

@@ -22,7 +22,7 @@
     <div class="flex flex-row flex-wrap gap-x-6 md:gap-x-7 gap-y-5" >
         {{#each _items}}   
             <div>
-                {{> components/forms/choice
+                {{> components/forms/components/choice
                         _type=../_type
                         _name=../_name
                         _required=(if ../_isRadio ../_required)
@@ -42,7 +42,7 @@
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+         <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
 </div>

package/dist/views_static/components/forms/{error_icon.hbs → components/error_icon.hbs}

@@ -1,3 +1,3 @@
 <div class="hidden w-5 h-5 {{_class}}"{{#if _xclass}} :class="{{_xclass}}"{{/if}}>
-    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-error"}}
+    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-error dark:fill-error-dark"}}
 </div>

package/dist/{views/components/forms → views_static/components/forms/components}/fields.hbs

@@ -4,18 +4,18 @@
         {{#if this.caption}}         
             <fieldset>
                 <legend class="mb-5 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
-                {{~> components/forms/fields}}
+                {{~> components/forms/components/fields}}
             </fieldset>            
         {{else}}
             <fieldset>
-                {{~> components/forms/fields}}
+                {{~> components/forms/components/fields}}
             </fieldset>
         {{/if}}
         
     {{else}}
         <div class="js-wrapper-{{this.name}}">
             {{#if this.type.isTextarea}}
-                {{~> components/forms/textarea
+                {{~> components/forms/components/textarea
                     _name=this.name
                     _label=this.label
                     _description=this.description
@@ -29,7 +29,7 @@
                     _formId=../_formId
                 }}
             {{else if this.type.isText}}
-                {{~> components/forms/input
+                {{~> components/forms/components/input
                     _type=this.type.asString
                     _isEmail=this.type.isEmail
                     _name=this.name
@@ -46,7 +46,7 @@
                     _formId=../_formId
                 }}
             {{else if this.type.isSelect}}
-                {{~> components/forms/select
+                {{~> components/forms/components/select
                     _name=this.name
                     _label=this.label
                     _labelClass="hide"
@@ -58,7 +58,7 @@
                 }}
             {{else if this.type.isChoice}}
                 {{#if this.isGrouped }}
-                    {{~> components/forms/choiceGroup
+                    {{~> components/forms/components/choiceGroup
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label
@@ -72,7 +72,7 @@
                         _formId=../_formId  
                     }}
                 {{else}}
-                    {{~> components/forms/choice
+                    {{~> components/forms/components/choice
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label

package/dist/{views/components/forms → views_static/components/forms/components}/input.hbs

@@ -5,7 +5,7 @@
    x-ignore
    >
    <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none" 
-      :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+      :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
       x-bind:data-is-valid="valid ? 'true' : 'false'"     
@@ -61,7 +61,7 @@
    </label> 
    
    <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-      {{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
+      {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
    </div>
  
    <div class="flex items-end justify-between h-5 font-heading">     
@@ -69,7 +69,7 @@
          <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
       
-      <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       
    </div>
 </div>

package/dist/views_static/components/forms/{message.hbs → components/message.hbs}

@@ -2,10 +2,10 @@
         <div class="flex items-center gap-x-2 md:gap-x-3">
             {{#if _success}}
                 {{> components/forms/success_icon}}
-                <span class="h-5 font-bold text-green-800">{{#if this.successText}}{{this.successText.richtext}}{{else}}{{~loca "webform_send_text_success"}}{{/if}}</span>       
+                <span class="h-5 font-bold text-success">{{#if this.successText}}{{this.successText.richtext}}{{else}}{{~loca "webform_send_text_success"}}{{/if}}</span>       
             {{else}}
                 {{> components/forms/error_icon _class="!block"}}
-                <span class="h-5 font-bold text-red-700">{{~loca "webform_send_text_error"}}</span>  
+                <span class="h-5 font-bold text-error dark:text-error-dark">{{~loca "webform_send_text_error"}}</span>  
             {{/if}}
         </div>
         {{#unless _success}}

package/dist/{views/components/forms → views_static/components/forms/components}/select.hbs

@@ -5,7 +5,7 @@
 >
     <select
         class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
-        :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+        :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
         x-model="select{{getRandom}}"
         id="select{{getRandom}}"
         title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
@@ -48,7 +48,7 @@
             <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{_description}}</div>
         {{/if}}
         {{#if _required}}
-            <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
+            <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
         {{/if}}
     </div>
     <div class="absolute right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">

package/dist/{views/components/forms → views_static/components/forms/components}/textarea.hbs

@@ -36,7 +36,7 @@
       {{#if _required}}required{{/if}}
       class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-form-highlight dark:border-form-highlight-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
-         :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+         :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}
    >{{~#if _formField.isValid~}}
         {{{_formField.forHtmlContent}}}
@@ -61,7 +61,7 @@
    </label>
    {{#if _required}}
          <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-            {{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
+            {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
          </div>
   {{/if}}
    <div class="flex items-end justify-between h-5 font-heading">     
@@ -69,7 +69,7 @@
          <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
+         <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
       {{/if}}
       {{#if _maxLength}}
          <div class="px-4 ml-auto text-xs text-gray-scorpion"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>

package/dist/views_static/components/forms/webform.hbs

@@ -1,5 +1,5 @@
 {{~#if _newWebForm ~}}
-    {{#>components/forms/backgroundBox  }}  
+    {{#>components/forms/components/backgroundBox  }}  
 
         
         <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
@@ -22,21 +22,21 @@
                 accept-charset="utf-8"
                 
                 >
-                {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
+                {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
-                {{> components/forms/controls }}
+                {{> components/forms/components/controls }}
 
                 <template id="successMessage">
-                    {{> components/forms/message _success=true _messageText="Das Formular wurde erforlgreich versendet." }}
+                    {{> components/forms/components/message _success=true _messageText="Das Formular wurde erforlgreich versendet." }}
                 </template>
 
                 <template id="errorMessage">
-                    {{> components/forms/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
+                    {{> components/forms/components/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
                 </template>
                 
             </form>
         </div>   
-    {{/components/forms/backgroundBox }}
+    {{/components/forms/components/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
 {{~/if~}}

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.110.12",
+  "version": "1.110.13",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/js/alpine.js

@@ -19,8 +19,8 @@ AsyncAlpine.init(Alpine)
     )
     
     .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
-    .data('inputHandler', ()=> import('components/forms/inputHandler.alpine.js'))
-    .data('contactForm', ()=> import('components/forms/contactForm.alpine.js'))
+    .data('inputHandler', ()=> import('components/forms/js/inputHandler.alpine.js'))
+    .data('contactForm', ()=> import('components/forms/js/contactForm.alpine.js'))
     .start()
 
 window.Alpine = Alpine

package/src/assets/tailwind.css

@@ -164,6 +164,8 @@
     --structure-nav-text-mobile: var(--color-primary-ds);
 
     --color-error: theme('colors.red.thunderbird.hex');
+    --color-error-dark: theme('colors.red.thunderbirdLight.hex');
+    --color-success: #2c7e13;
     --color-form-highlight: var(--color-link);
     --color-form-highlight-dark: var(--color-link-dark);
 

package/src/stories/views/components/dataPolicySettings/data_policy_settings.hbs

@@ -51,7 +51,7 @@
                         class="{{if (isUserConsentNeeded 'https://www.agf.de/') 'js-user-consent-needed ' ''}}mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
                         href="https://www.agf.de/" title="AGF">(https://www.agf.de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
                     <div class="flex w-fit">
-                        {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="agf aktivieren/deaktivieren" }}
+                        {{> components/forms/components/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="agf aktivieren/deaktivieren" }}
                     </div>
                 </li>
                 <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]">
@@ -60,7 +60,7 @@
                         href="https://www.atinternet.com/de/"
                         title="AT Internet">(https://www.atinternet.com/de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
                     <div class="flex w-fit">
-                        {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="at internet aktivieren/deaktivieren"}}
+                        {{> components/forms/components/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="at internet aktivieren/deaktivieren"}}
                     </div>
                 </li>
             </ul>
@@ -85,7 +85,7 @@
                 <div class="flex justify-between">
                     <span class="inline-flex text-base text-black js-providerTitle">x</span>
                     <div class="flex float-right">
-                        {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
+                        {{> components/forms/components/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
                     </div>
                 </div>
             </div>
@@ -96,7 +96,7 @@
                         <li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3]">
                             <span class="inline-flex text-base leading-6 text-black align-text-top">{{this.value}}</span>
                             <div class="flex float-right">
-                                {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _whitelisted=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
+                                {{> components/forms/components/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _whitelisted=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
                             </div>
                         </li>
                     {{/each}}

package/{dist/views/components/forms → src/stories/views/components/forms/components}/choice.hbs

@@ -12,7 +12,7 @@
 <div class="flex flex-row items-center w-full cursor-pointer ">
   <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight"," checked:bg-white checked:border-form-highlight rounded-full",""]'}}"
       {{#if _required}}
-            :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+            :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}
       {{#if _inGroup }}
          {{#if _required}}
@@ -80,7 +80,7 @@
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+         <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
 {{/unless}}

package/src/stories/views/components/forms/{choiceGroup.hbs → components/choiceGroup.hbs}

@@ -22,7 +22,7 @@
     <div class="flex flex-row flex-wrap gap-x-6 md:gap-x-7 gap-y-5" >
         {{#each _items}}   
             <div>
-                {{> components/forms/choice
+                {{> components/forms/components/choice
                         _type=../_type
                         _name=../_name
                         _required=(if ../_isRadio ../_required)
@@ -42,7 +42,7 @@
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+         <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
 </div>

package/src/stories/views/components/forms/{error_icon.hbs → components/error_icon.hbs}

@@ -1,3 +1,3 @@
 <div class="hidden w-5 h-5 {{_class}}"{{#if _xclass}} :class="{{_xclass}}"{{/if}}>
-    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-error"}}
+    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-error dark:fill-error-dark"}}
 </div>

package/{dist/views_static/components/forms → src/stories/views/components/forms/components}/fields.hbs

@@ -4,18 +4,18 @@
         {{#if this.caption}}         
             <fieldset>
                 <legend class="mb-5 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
-                {{~> components/forms/fields}}
+                {{~> components/forms/components/fields}}
             </fieldset>            
         {{else}}
             <fieldset>
-                {{~> components/forms/fields}}
+                {{~> components/forms/components/fields}}
             </fieldset>
         {{/if}}
         
     {{else}}
         <div class="js-wrapper-{{this.name}}">
             {{#if this.type.isTextarea}}
-                {{~> components/forms/textarea
+                {{~> components/forms/components/textarea
                     _name=this.name
                     _label=this.label
                     _description=this.description
@@ -29,7 +29,7 @@
                     _formId=../_formId
                 }}
             {{else if this.type.isText}}
-                {{~> components/forms/input
+                {{~> components/forms/components/input
                     _type=this.type.asString
                     _isEmail=this.type.isEmail
                     _name=this.name
@@ -46,7 +46,7 @@
                     _formId=../_formId
                 }}
             {{else if this.type.isSelect}}
-                {{~> components/forms/select
+                {{~> components/forms/components/select
                     _name=this.name
                     _label=this.label
                     _labelClass="hide"
@@ -58,7 +58,7 @@
                 }}
             {{else if this.type.isChoice}}
                 {{#if this.isGrouped }}
-                    {{~> components/forms/choiceGroup
+                    {{~> components/forms/components/choiceGroup
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label
@@ -72,7 +72,7 @@
                         _formId=../_formId  
                     }}
                 {{else}}
-                    {{~> components/forms/choice
+                    {{~> components/forms/components/choice
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label

package/{dist/views_static/components/forms → src/stories/views/components/forms/components}/input.hbs

@@ -5,7 +5,7 @@
    x-ignore
    >
    <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none" 
-      :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+      :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
       x-bind:data-is-valid="valid ? 'true' : 'false'"     
@@ -61,7 +61,7 @@
    </label> 
    
    <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-      {{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
+      {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
    </div>
  
    <div class="flex items-end justify-between h-5 font-heading">     
@@ -69,7 +69,7 @@
          <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
       
-      <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       
    </div>
 </div>

package/src/stories/views/components/forms/{message.hbs → components/message.hbs}

@@ -2,10 +2,10 @@
         <div class="flex items-center gap-x-2 md:gap-x-3">
             {{#if _success}}
                 {{> components/forms/success_icon}}
-                <span class="h-5 font-bold text-green-800">{{#if this.successText}}{{this.successText.richtext}}{{else}}{{~loca "webform_send_text_success"}}{{/if}}</span>       
+                <span class="h-5 font-bold text-success">{{#if this.successText}}{{this.successText.richtext}}{{else}}{{~loca "webform_send_text_success"}}{{/if}}</span>       
             {{else}}
                 {{> components/forms/error_icon _class="!block"}}
-                <span class="h-5 font-bold text-red-700">{{~loca "webform_send_text_error"}}</span>  
+                <span class="h-5 font-bold text-error dark:text-error-dark">{{~loca "webform_send_text_error"}}</span>  
             {{/if}}
         </div>
         {{#unless _success}}

package/{dist/views_static/components/forms → src/stories/views/components/forms/components}/select.hbs

@@ -5,7 +5,7 @@
 >
     <select
         class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
-        :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+        :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
         x-model="select{{getRandom}}"
         id="select{{getRandom}}"
         title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
@@ -48,7 +48,7 @@
             <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{_description}}</div>
         {{/if}}
         {{#if _required}}
-            <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
+            <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
         {{/if}}
     </div>
     <div class="absolute right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">

package/{dist/views_static/components/forms → src/stories/views/components/forms/components}/textarea.hbs

@@ -36,7 +36,7 @@
       {{#if _required}}required{{/if}}
       class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-form-highlight dark:border-form-highlight-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
-         :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+         :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}
    >{{~#if _formField.isValid~}}
         {{{_formField.forHtmlContent}}}
@@ -61,7 +61,7 @@
    </label>
    {{#if _required}}
          <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-            {{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
+            {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
          </div>
   {{/if}}
    <div class="flex items-end justify-between h-5 font-heading">     
@@ -69,7 +69,7 @@
          <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
+         <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
       {{/if}}
       {{#if _maxLength}}
          <div class="px-4 ml-auto text-xs text-gray-scorpion"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>

package/src/stories/views/components/forms/form_checkbox.stories.js

@@ -18,11 +18,11 @@ export default {
 }
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
-    {{#>components/forms/backgroundBox  }}  
+    {{#>components/forms/components/backgroundBox  }}  
             <form class="relative flex flex-col justify-center overflow-hidden group" id="form{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
-                {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }}
+                {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }}
             </form>
-    {{/components/forms/backgroundBox }}
+    {{/components/forms/components/backgroundBox }}
   `)
     return hbsTemplate({ ...args })
 }

package/src/stories/views/components/forms/form_checkbox_grouped.stories.js

@@ -18,11 +18,11 @@ export default {
 }
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
-    {{#>components/forms/backgroundBox  }}  
+    {{#>components/forms/components/backgroundBox  }}  
             <form class="relative flex flex-col justify-center overflow-hidden group" id="form{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
-                 {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }}
+                 {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }}
             </form>
-    {{/components/forms/backgroundBox }}
+    {{/components/forms/components/backgroundBox }}
   `)
     return hbsTemplate({ ...args })
 }

package/src/stories/views/components/forms/form_group.stories.js

@@ -18,11 +18,11 @@ export default {
 }
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
-    {{#>components/forms/backgroundBox  }}  
+    {{#>components/forms/components/backgroundBox  }}  
             <form class="relative flex flex-col justify-center overflow-hidden group" id="form{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
-                {{> components/forms/fields }}
+                {{> components/forms/components/fields }}
             </form>
-    {{/components/forms/backgroundBox }}
+    {{/components/forms/components/backgroundBox }}
   `)
     return hbsTemplate({ ...args })
 }

package/src/stories/views/components/forms/form_radio_grouped.stories.js

@@ -18,11 +18,11 @@ export default {
 }
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
-    {{#>components/forms/backgroundBox  }}  
+    {{#>components/forms/components/backgroundBox  }}  
             <form class="relative flex flex-col justify-center overflow-hidden group" id="form{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
-                {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }}
+                {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }}
             </form>
-    {{/components/forms/backgroundBox }}
+    {{/components/forms/components/backgroundBox }}
   `)
     return hbsTemplate({ ...args })
 }

package/src/stories/views/components/forms/form_select.stories.js

@@ -18,11 +18,11 @@ export default {
 }
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
-    {{#>components/forms/backgroundBox  }}  
+    {{#>components/forms/components/backgroundBox  }}  
             <form class="relative flex flex-col justify-center overflow-hidden group" id="form{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
-                {{> components/forms/fields }}
+                {{> components/forms/components/fields }}
             </form>
-    {{/components/forms/backgroundBox }}
+    {{/components/forms/components/backgroundBox }}
   `)
     return hbsTemplate({ ...args })
 }

package/src/stories/views/components/forms/form_textfields.stories.js

@@ -22,11 +22,11 @@ export default {
 }
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
-    {{#>components/forms/backgroundBox  }}  
+    {{#>components/forms/components/backgroundBox  }}  
             <form class="relative flex flex-col justify-center overflow-hidden group" id="form{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
-                {{> components/forms/fields }}
+                {{> components/forms/components/fields }}
             </form>
-    {{/components/forms/backgroundBox }}
+    {{/components/forms/components/backgroundBox }}
   `)
     return hbsTemplate({ ...args })
 }

package/src/stories/views/components/forms/webform.hbs

@@ -1,5 +1,5 @@
 {{~#if _newWebForm ~}}
-    {{#>components/forms/backgroundBox  }}  
+    {{#>components/forms/components/backgroundBox  }}  
 
         
         <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
@@ -22,21 +22,21 @@
                 accept-charset="utf-8"
                 
                 >
-                {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
+                {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
-                {{> components/forms/controls }}
+                {{> components/forms/components/controls }}
 
                 <template id="successMessage">
-                    {{> components/forms/message _success=true _messageText="Das Formular wurde erforlgreich versendet." }}
+                    {{> components/forms/components/message _success=true _messageText="Das Formular wurde erforlgreich versendet." }}
                 </template>
 
                 <template id="errorMessage">
-                    {{> components/forms/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
+                    {{> components/forms/components/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
                 </template>
                 
             </form>
         </div>   
-    {{/components/forms/backgroundBox }}
+    {{/components/forms/components/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
 {{~/if~}}

package/tailwind.config.js

@@ -290,6 +290,7 @@ module.exports = {
                     paprika: { rgb: '140 3 61', hex: '#8C033D' },
                     scarlett: '#9b0112',
                     thunderbird: { hex: '#cc1a14' },
+                    thunderbirdLight: { hex: '#e07672'},
                     wellRead: { rgb: '171 47 45', hex: '#AB2F2D' },
                 },
                 'pink': {
@@ -427,6 +428,8 @@ module.exports = {
                 'structure-nav-text': 'var(--structure-nav-text)',
                 'structure-nav-text-mobile': 'var(--structure-nav-text-mobile)',
                 'error':'var(--color-error)',
+                'error-dark':'var(--color-error-dark)',
+                'success':'var(--color-success)',
                 'form-highlight':'var(--color-form-highlight)',
                 'form-highlight-dark':'var(--color-form-highlight-dark)'
             },