hr-design-system-handlebars 1.110.6 → 1.110.8

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.110.8 (Tue Oct 15 2024)
+
+#### 🐛 Bug Fix
+
+- Forms colors and spacings [#1112](https://github.com/mumprod/hr-design-system-handlebars/pull/1112) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.110.7 (Mon Oct 14 2024)
+
+#### 🐛 Bug Fix
+
+- remove if-statement [#1111](https://github.com/mumprod/hr-design-system-handlebars/pull/1111) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.110.6 (Mon Oct 14 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -24,7 +24,7 @@
   --tw-gradient-to-position:  ;
 }
 
-.ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-teaser-focus, .ds-teaser-focus::before, .ds-cta > *, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .hrds-copytext__link, .hrds-copytext__link:not(:focus-visible), .shadow, .shadow-md, .shadow-xl, .toggleSwitch-label, .before\:shadow-stage::before {
+.ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-teaser-focus, .ds-teaser-focus::before, .ds-cta > *, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .hrds-copytext__link, .hrds-copytext__link:not(:focus-visible), .shadow, .shadow-md, .shadow-xl, .toggleSwitch-label, .autofill\:shadow-autofill, .before\:shadow-stage::before {
   --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
   --tw-ring-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow: 0 0 rgba(0,0,0,0);
@@ -2358,16 +2358,6 @@ article.indexTextDS .indexTextHighlighted .link {
   border-color: rgba(227, 227, 227, 1);
   border-color: rgba(227, 227, 227, var(--tw-border-opacity));
 }
-.border-blue-500 {
-  --tw-border-opacity: 1;
-  border-color: rgba(59, 130, 246, 1);
-  border-color: rgba(59, 130, 246, var(--tw-border-opacity));
-}
-.border-blue-science-hex {
-  --tw-border-opacity: 1;
-  border-color: rgba(0, 109, 193, 1);
-  border-color: rgba(0, 109, 193, var(--tw-border-opacity));
-}
 .border-brandnavigation-border-color {
   border-color: #005293;
   border-color: var(--color-brandnavigation-border-color);
@@ -2390,6 +2380,10 @@ article.indexTextDS .indexTextHighlighted .link {
   border-color: #005293;
   border-color: var(--color-content-nav);
 }
+.border-error {
+  border-color: #cc1a14;
+  border-color: var(--color-error);
+}
 .border-event-calendar-secondary {
   border-color: #797979;
   border-color: var(--color-eventcalendar-secondary);
@@ -2427,6 +2421,14 @@ article.indexTextDS .indexTextHighlighted .link {
   border-color: rgba(96, 96, 96, 1);
   border-color: rgba(96, 96, 96, var(--tw-border-opacity));
 }
+.border-link {
+  border-color: #006eb7;
+  border-color: var(--color-link);
+}
+.border-link-dark {
+  border-color: #006eb7;
+  border-color: var(--color-link-dark);
+}
 .border-navigation-border-color {
   border-color: #fff;
   border-color: var(--color-navigation-border-color);
@@ -2440,11 +2442,6 @@ article.indexTextDS .indexTextHighlighted .link {
   border-color: rgba(248, 113, 113, 1);
   border-color: rgba(248, 113, 113, var(--tw-border-opacity));
 }
-.border-red-700 {
-  --tw-border-opacity: 1;
-  border-color: rgba(185, 28, 28, 1);
-  border-color: rgba(185, 28, 28, var(--tw-border-opacity));
-}
 .border-servicenavigation-border-color {
   border-color: #fff;
   border-color: var(--color-servicenavigation-border-color);
@@ -2539,11 +2536,6 @@ article.indexTextDS .indexTextHighlighted .link {
   background-color: rgba(243, 244, 246, 1);
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
 }
-.bg-gray-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(156, 163, 175, 1);
-  background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
-}
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(107, 114, 128, 1);
@@ -2570,7 +2562,7 @@ article.indexTextDS .indexTextHighlighted .link {
   background-color: rgba(22, 101, 52, var(--tw-bg-opacity));
 }
 .bg-highlight-1 {
-  background-color: #eaf3fa;
+  background-color: #E6E6E6;
   background-color: var(--color-highlight-1);
 }
 .bg-highlight-2 {
@@ -2774,6 +2766,10 @@ article.indexTextDS .indexTextHighlighted .link {
 .fill-current {
   fill: currentColor;
 }
+.fill-error {
+  fill: #cc1a14;
+  fill: var(--color-error);
+}
 .fill-event-calendar-secondary {
   fill: #797979;
   fill: var(--color-eventcalendar-secondary);
@@ -2786,9 +2782,6 @@ article.indexTextDS .indexTextHighlighted .link {
   fill: #006eb7;
   fill: var(--color-link);
 }
-.fill-red-700 {
-  fill: #b91c1c;
-}
 .fill-search {
   fill: #000000;
   fill: var(--search-icon-color);
@@ -3251,6 +3244,10 @@ article.indexTextDS .indexTextHighlighted .link {
   color: #005293;
   color: var(--color-content-nav);
 }
+.text-error {
+  color: #cc1a14;
+  color: var(--color-error);
+}
 .text-event-status {
   color: #cc1a14;
   color: var(--color-event-status);
@@ -3263,16 +3260,6 @@ article.indexTextDS .indexTextHighlighted .link {
   color: #000000;
   color: var(--color-footer-text);
 }
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgba(107, 114, 128, 1);
-  color: rgba(107, 114, 128, var(--tw-text-opacity));
-}
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, 1);
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
-}
 .text-gray-dark {
   --tw-text-opacity: 1;
   color: rgba(112, 112, 112, 1);
@@ -3324,11 +3311,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);
@@ -3593,7 +3575,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1728913253788;
+  counter-reset: cnt1728999604369;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -4007,7 +3989,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1728913253788 1;
+  counter-increment: cnt1728999604369 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4025,7 +4007,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(cnt1728913253788);
+  content: counter(cnt1728999604369);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4209,7 +4191,7 @@ input[type='radio']:checked::after {
 
     --color-primary-ds: #005293;
     --color-secondary-ds: #606060;
-    --color-highlight-1: #eaf3fa;
+    --color-highlight-1: #E6E6E6;
     --color-highlight-2: #d34600;
     --color-highlight-3: #707070;
     --color-highlight-1-dark: #2d2d2d;
@@ -4357,6 +4339,8 @@ input[type='radio']:checked::after {
     --structure-nav-text: #ffffff;
     --structure-nav-text-mobile: var(--color-primary-ds);
 
+    --color-error: #cc1a14;
+
     --feature-box-height: 0;
 }
 :root .ardplayer, [data-theme='default'] .ardplayer {
@@ -4535,7 +4519,6 @@ input[type='radio']:checked::after {
 [data-theme='hr-fernsehen'] {
     --color-primary-ds: #007396;
     --color-secondary-ds: #007179;
-    --color-highlight-1: #eaeded;
     --color-highlight-2: #d34600;
 
     /* Brandnavigation Border and :before Colors*/
@@ -4629,7 +4612,7 @@ input[type='radio']:checked::after {
 [data-theme='hr-inforadio'] {
     --color-primary-ds: #276b9e;
     --color-secondary-ds: #007179;
-    --color-highlight-1: #e5edf1;
+    --color-highlight-1: #eaf3fa;
     --color-highlight-2: #d34600;
 
     /* Service/Sectionnavigation Border-Color */
@@ -4729,7 +4712,6 @@ input[type='radio']:checked::after {
 [data-theme='hr-rundfunkrat'] {
     --color-primary-ds: #606060;
     --color-secondary-ds: #007179;
-    --color-highlight-1: #eaf3fa;
     --color-highlight-2: #d34600;
 
     /* Navigation Hintergrund */
@@ -4838,7 +4820,7 @@ input[type='radio']:checked::after {
 [data-theme='hr-werbung'] {
     --color-primary-ds: #007396;
     --color-secondary-ds: #007179;
-    --color-highlight-1: #eaf3fa;
+    --color-highlight-1: #eaf5f7;
     --color-highlight-2: #d34600;
 
     /* Brandnavigation Border and :before Colors*/
@@ -4950,7 +4932,6 @@ input[type='radio']:checked::after {
 [data-theme='hr-sinfonieorchester'] {
     --color-primary-ds: #8d2725;
     --color-secondary-ds: #007179;
-    --color-highlight-1: #e0e0e0;
     --color-highlight-2: #d34600;
 
     /* Brandnavigation Border and :before Colors*/
@@ -5149,7 +5130,6 @@ input[type='radio']:checked::after {
 [data-theme='hr'] {
     --color-primary-ds: #007396;
     --color-secondary-ds: #007396;
-    --color-highlight-1: #eaf3fa;
     --color-highlight-2: #d34600;
 
     /* Navigation Hintergrund */
@@ -5365,7 +5345,6 @@ input[type='radio']:checked::after {
 [data-theme='hr2'] {
     --color-primary-ds: #ec6602;
     --color-secondary-ds: #007179;
-    --color-highlight-1: #e0e0e0;
     --color-highlight-2: #d34600;
 
     /* Brandnavigation Border and :before Colors*/
@@ -5485,7 +5464,7 @@ input[type='radio']:checked::after {
 [data-theme='hr3'] {
     --color-primary-ds: #c20016;
     --color-secondary-ds: #007179;
-    --color-highlight-1: #E6E6E6;
+
     --color-highlight-2: #d34600;
 
     /* Brandnavigation Border and :before Colors*/
@@ -5590,7 +5569,7 @@ input[type='radio']:checked::after {
 [data-theme='hr4'] {
     --color-primary-ds: #bf0071;
     --color-secondary-ds: #007179;
-    --color-highlight-1: #DBEAEA;
+    --color-highlight-1: #eaf5f7;
     --color-highlight-2: #d34600;
 
     /* Service/Sectionnavigation Border Color */
@@ -5695,7 +5674,6 @@ input[type='radio']:checked::after {
 [data-theme='you-fm'] {
     --color-primary-ds: #007179 /* #c20016 */;
     --color-secondary-ds: #007179;
-    --color-highlight-1: #E5E8E8;
     --color-highlight-2: #d34600;
 
     /* Brandnavigation Border and :before Colors*/
@@ -5939,24 +5917,31 @@ input[type='radio']:checked::after {
 .last-of-type\:pb-3:last-of-type {
   padding-bottom: 0.75rem;
 }
-.checked\:border-blue-congress-hex:checked {
-  --tw-border-opacity: 1;
-  border-color: rgba(0, 82, 147, 1);
-  border-color: rgba(0, 82, 147, var(--tw-border-opacity));
+.checked\:border-link:checked {
+  border-color: #006eb7;
+  border-color: var(--color-link);
 }
-.checked\:border-transparent:checked {
-  border-color: transparent;
-}
-.checked\:bg-blue-congress-hex:checked {
-  --tw-bg-opacity: 1;
-  background-color: rgba(0, 82, 147, 1);
-  background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
+.checked\:bg-link:checked {
+  background-color: #006eb7;
+  background-color: var(--color-link);
 }
 .checked\:bg-white:checked {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, 1);
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
+.autofill\:shadow-autofill:-webkit-autofill {
+  --tw-shadow: 0 0 0px 1000px var(--color-standard-text-dark) inset;
+  --tw-shadow-colored: inset 0 0 0px 1000px var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 0 0px 1000px #f0f0f0 inset;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+}
+.autofill\:shadow-autofill:autofill {
+  --tw-shadow: 0 0 0px 1000px var(--color-standard-text-dark) inset;
+  --tw-shadow-colored: inset 0 0 0px 1000px var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 0 0px 1000px #f0f0f0 inset;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+}
 .empty\:hidden:empty {
   display: none;
 }
@@ -6096,10 +6081,10 @@ input[type='radio']:checked::after {
 .disabled\:hidden:disabled {
   display: none;
 }
-.disabled\:text-gray-500:disabled {
+.disabled\:text-gray-scorpion:disabled {
   --tw-text-opacity: 1;
-  color: rgba(107, 114, 128, 1);
-  color: rgba(107, 114, 128, var(--tw-text-opacity));
+  color: rgba(96, 96, 96, 1);
+  color: rgba(96, 96, 96, var(--tw-text-opacity));
 }
 .group:focus-within .group-focus-within\:text-white {
   --tw-text-opacity: 1;
@@ -6201,10 +6186,9 @@ input[type='radio']:checked::after {
 .peer:focus ~ .peer-focus\:border-r {
   border-right-width: 1px;
 }
-.peer:focus ~ .peer-focus\:text-blue-500 {
-  --tw-text-opacity: 1;
-  color: rgba(59, 130, 246, 1);
-  color: rgba(59, 130, 246, var(--tw-text-opacity));
+.peer:focus ~ .peer-focus\:text-link {
+  color: #006eb7;
+  color: var(--color-link);
 }
 .aria-hidden\:hidden[aria-hidden="true"] {
   display: none;
@@ -8200,10 +8184,21 @@ 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-link-dark:where(.dark, .dark *) {
+  border-color: #006eb7;
+  border-color: var(--color-link-dark);
+}
 .dark\:border-text-dark:where(.dark, .dark *) {
   border-color: #f0f0f0;
   border-color: var(--color-standard-text-dark);
 }
+.dark\:border-t-transparent:where(.dark, .dark *) {
+  border-top-color: transparent;
+}
 .dark\:bg-black:where(.dark, .dark *) {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 0, 0, 1);
@@ -8251,6 +8246,13 @@ input[type='radio']:checked::after {
 .dark\:ring-podcast:where(.dark, .dark *) {
   --tw-ring-color: var(--color-podcast);
 }
+.dark\:border-t-transparent:where(.dark, .dark *) {
+  border-top-color: transparent;
+}
+.peer:focus ~ .peer-focus\:dark\:text-text-dark:where(.dark, .dark *) {
+  color: #f0f0f0;
+  color: var(--color-standard-text-dark);
+}
 @media print {
 
   .print\:static {

package/dist/views/components/content_nav/content_nav_list.hbs

@@ -5,7 +5,7 @@
           
         {{~#if this.isGroup~}}
         
-            {{#if ../isDropdown}}               
+                           
                 <li class="w-full h-auto overflow-hidden text-base list-none border-b border-gray-400 bg-highlight-1 text-content-nav md:mx-0 font-copy fill-content-nav">
                     <div class="flex items-center h-10 p-2">{{this.title}}</div>
                     <ul class="!px-0 mt-0">
@@ -19,7 +19,7 @@
                         {{~/each~}}
                     </ul>
                 </li> 
-            {{/if}}
+            
         {{else}}           
             {{> components/content_nav/content_nav_item  
                 _teaserSize=../_teaserSize 

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

@@ -1,3 +1,3 @@
-<div class="relative px-5 pt-6 pb-8 bg-highlight-1 sm:rounded-tl-hr sm:rounded-br-hr sm:px-13 sm:pt-12 article-full-width sm:article-narrow" >
+<div class="relative px-5 pt-6 pb-8 bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr sm:px-13 sm:pt-12 article-full-width sm:article-narrow" >
     {{> @partial-block }}
 </div>

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

@@ -9,9 +9,9 @@
    {{/unless}}
 >
 <div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
-  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer {{~inline-switch _type '["checkbox","radio"]' '["  border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent","  border-blue-science-hex checked:bg-white checked:border-blue-congress-hex rounded-full",""]'}}"
+  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-link dark:border-link-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-link checked:border-link"," checked:bg-white checked:border-link rounded-full",""]'}}"
       {{#if _required}}
-            :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
+            :class="{' border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
       {{/if}}
       {{#if _inGroup }}
          {{#if _required}}
@@ -59,7 +59,7 @@
          {{/if}}
       {{/if~}}
    >
-  <label for="input{{getRandom}}" class="items-center justify-center text-xs text-black md:text-sm font-headingSerif ">
+  <label for="input{{getRandom}}" class="items-center justify-center text-xs text-text dark:text-text-dark md:text-sm font-headingSerif ">
       {{#if _hasBody}}
         {{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
       {{else}}
@@ -76,10 +76,10 @@
 {{#unless _inGroup}}
    <div class="font-heading">     
       {{#if _description}}  
-         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+         <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-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+         <div class="hidden text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
 {{/unless}}

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

@@ -6,7 +6,7 @@
     {{/if}}
 >
 <div class="relative flex flex-col w-full mb-6 md:mb-12 gap-y-4 md:gap-y-5">
-    <legend class="text-lg font-bold text-black md:text-xl font-heading">
+    <legend class="text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">
         {{#if _hasBody}}
             {{decorator_body}}{{#if _required}}*{{/if}}
         {{else}}
@@ -39,10 +39,10 @@
     </div>
     <div class="font-heading">     
       {{#if _description}}  
-         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
+         <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-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+         <div class="hidden text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
 </div>

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

@@ -1,5 +1,5 @@
 <div class="flex items-center justify-between">
-    <div class="text-xs text-gray-500 font-headingSerif">Pflichtfeld*</div>
+    <div class="text-xs text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
     <div class="flex items-center">
         <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
             <span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>

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

@@ -1,3 +1,3 @@
 <div class="hidden w-5 h-5 font-bold" :class="{{_xclass}}">
-    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-red-700"}}
+    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-error"}}
 </div>

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

@@ -3,7 +3,7 @@
 
         {{#if this.caption}}         
             <fieldset>
-                <legend class="mb-5 font-headingSerif">{{this.caption}}</legend>
+                <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}}
             </fieldset>            
         {{else}}

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

@@ -1,11 +1,11 @@
-<div class="  relative flex flex-col w-full mb-5 {{_wrapperClass}}"
+<div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
    ax-load
    x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}','{{_name}}')"
    x-init="validateField()"
    x-ignore
    >
-   <input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none" 
-      :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
+   <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-link dark:border-link-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none" 
+      :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
       x-bind:data-is-valid="valid ? 'true' : 'false'"     
@@ -42,11 +42,11 @@
          data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
       >
       
-  <label for="input{{getRandom}}" class="{{_labelClass}} absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
+  <label for="input{{getRandom}}" class="{{_labelClass}} absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
      
      peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 
      
-     peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
+     peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-link peer-focus:dark:text-text-dark origin-top-left transform transition-transform">
       {{#if _hasBody}}
         {{decorator_body}}
       {{else}}
@@ -66,30 +66,30 @@
  
    <div class="flex items-end justify-between h-5 font-heading">     
       {{#if _description}}  
-         <div class="pl-4 text-xs text-gray-500" :class="{'hidden': hideDescription() }">{{_description}}</div>
+         <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-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       
    </div>
    <div class="hidden">
       <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
          DEBUG
       </div>
-      <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+      <div class="px-4 py-3 bg-red-100 border border-t-0 border-red-400 rounded-b text-error">
          <div>name:<span x-text="name" class="font-bold" ></span></div>
-         <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
-         <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
-         <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
+         <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-error'"></span></div>
+         <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-error'"></span></div>
+         <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-error'"></span></div>
         
-         <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>   
-         <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>   
+         <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-error'"></span></div>   
+         <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-error'"></span></div>   
          <div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>  
          <div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
          <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
          <div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
          <div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
-         <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
+         <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-error'"></span></div>
                     
       </div> 
    </div>

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

@@ -4,8 +4,8 @@
    x-ignore
 >
     <select
-        class="relative w-full h-12 pt-4 pl-4 text-gray-800 bg-white border-blue-500 appearance-none bg- pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
-        :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
+        class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none text-text dark:bg-black dark:text-text-dark border-link bg- pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
+        :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
         x-model="select{{getRandom}}"
         id="select{{getRandom}}"
         title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
@@ -17,7 +17,7 @@
             x-on:change ="select{{getRandom}}.value != '' ? valid = true : valid = false;"
         {{/if}}
         >
-        <option  class="text-white bg-gray-400" value=""{{#if _required}} disabled{{/if}} selected>
+        <option  class="text-text dark:text-text-dark bg-highlight-1 dark:bg-highlight-1-dark" value=""{{#if _required}} disabled{{/if}} selected>
             {{#if _locaKey}}
                 {{loca _locaKey}}{{#if _required}}*{{/if}}
             {{else}}
@@ -28,27 +28,27 @@
         </option>
         {{#if _options}}
             {{~#each _options~}}
-                <option class="text-black" value="{{this.id}}" {{#if this.isSelected}}selected{{/if}}>{{this.name}}</option>
+                <option class="text-gray-scorpion dark:text-text-dark" value="{{this.id}}" {{#if this.isSelected}}selected{{/if}}>{{this.name}}</option>
             {{~/each~}}
         {{else}}
             {{#each _items}}
-                <option class="text-black" value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
+                <option class="text-gray-scorpion dark:text-text-dark" value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
             {{/each}}
         {{/if}}
     </select>
     <label for="select{{getRandom}}"
-        class="absolute pointer-events-none left-[16px] top-0 translate-y-3 translate-x-0 scale-100 text-gray-500
-              peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
+        class="absolute pointer-events-none left-[16px] top-0 translate-y-3 translate-x-0 scale-100 text-gray-scorpion dark:text-text-dark
+              peer-focus:text-link peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
               origin-top-left transform transition-transform 
     ">      
         {{_label}}{{#if _required}}*{{/if}}
     </label>
     <div class="flex items-end justify-between h-5 font-heading">     
         {{#if _description}}  
-            <div class="pl-4 text-xs text-gray-500 " :class="{'hidden': hideDescription()}">{{_description}}</div>
+            <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-red-700" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
+            <div class="hidden pl-4 text-xs text-error" :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">