hr-design-system-handlebars 1.110.6 → 1.110.8

package/src/assets/tailwind.css

@@ -15,7 +15,7 @@
 
     --color-primary-ds: theme('colors.blue.congress.hex');
     --color-secondary-ds: #606060;
-    --color-highlight-1: theme('colors.blue.accented');
+    --color-highlight-1: theme('colors.gray.mercury');
     --color-highlight-2: theme('colors.orange.spicyCarrot.hex');
     --color-highlight-3: theme('colors.gray.dark');
     --color-highlight-1-dark: theme('colors.blue.nightRider.hex');
@@ -75,7 +75,7 @@
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Eilmeldung */
-    --color-label-breakingnews: theme('colors.red.thunderbird');
+    --color-label-breakingnews: theme('colors.red.thunderbird.hex');
     /* Kommentar */
     --color-label-comment: theme('colors.blue.deeperPool');
     /* Infografik */
@@ -93,7 +93,7 @@
     /* Dachzeile */
     --color-topline: #006dc1;
     /* Event */
-    --color-event-status: theme('colors.red.thunderbird');
+    --color-event-status: theme('colors.red.thunderbird.hex');
     /* Eventkalender */
     --color-label-event-calendar-title: theme('colors.teal.deeperPool');
     --color-eventcalendar-primary: var(--color-primary-ds);
@@ -163,6 +163,8 @@
     --structure-nav-text: theme('colors.white.DEFAULT');
     --structure-nav-text-mobile: var(--color-primary-ds);
 
+    --color-error: theme('colors.red.thunderbird.hex');
+
     --feature-box-height: 0;
 
     .ardplayer {
@@ -263,7 +265,7 @@
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Eilmeldung */
-    --color-label-breakingnews: theme('colors.red.thunderbird');
+    --color-label-breakingnews: theme('colors.red.thunderbird.hex');
     /* Kommentar */
     --color-label-comment: theme('colors.blue.deeperPool');
     /* Infografik */
@@ -375,7 +377,6 @@
 [data-theme='hr-fernsehen'] {
     --color-primary-ds: theme('colors.blue.blueLuxury.hex');
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.white.blackhaze');
     --color-highlight-2: theme('colors.orange.spicyCarrot.hex');
 
     /* Brandnavigation Border and :before Colors*/
@@ -392,7 +393,7 @@
     /* Kommentar */
     --color-label-comment: theme('colors.green.tropicalRainForest');
     /* Eilmeldung */
-    --color-label-breakingnews: theme('colors.red.thunderbird');
+    --color-label-breakingnews: theme('colors.red.thunderbird.hex');
     /* Sendung */
     --color-label-program: theme('colors.red.mexican');
     /* Download */
@@ -483,7 +484,7 @@
 [data-theme='hr-inforadio'] {
     --color-primary-ds: theme('colors.blue.jellyBean.hex');
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.blue.aqua');
+    --color-highlight-1: theme('colors.blue.accented');
     --color-highlight-2: theme('colors.orange.spicyCarrot.hex');
 
     /* Service/Sectionnavigation Border-Color */
@@ -504,7 +505,7 @@
     /* Kommentar */
     --color-label-comment: theme('colors.green.tropicalRainForest');
     /* Eilmeldung */
-    --color-label-breakingnews: theme('colors.red.thunderbird');
+    --color-label-breakingnews: theme('colors.red.thunderbird.hex');
     /* Sendung */
     --color-label-program: theme('colors.pink.rose.hex');
     /* Download */
@@ -594,7 +595,6 @@
 [data-theme='hr-rundfunkrat'] {
     --color-primary-ds: theme('colors.gray.scorpion');
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.blue.accented');
     --color-highlight-2: theme('colors.orange.spicyCarrot.hex');
 
     /* Navigation Hintergrund */
@@ -624,7 +624,7 @@
     /* Kommentar */
     --color-label-comment: theme('colors.green.tropicalRainForest');
     /* Eilmeldung */
-    --color-label-breakingnews: theme('colors.red.thunderbird');
+    --color-label-breakingnews: theme('colors.red.thunderbird.hex');
     /* Sendung */
     --color-label-program: theme('colors.red.mexican');
     /* Download */
@@ -716,7 +716,7 @@
 [data-theme='hr-werbung'] {
     --color-primary-ds: theme('colors.blue.blueLuxury.hex');
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.blue.accented');
+    --color-highlight-1: theme('colors.blue.blackSqueeze');
     --color-highlight-2: theme('colors.orange.spicyCarrot.hex');
 
     /* Brandnavigation Border and :before Colors*/
@@ -751,7 +751,7 @@
     /* Kommentar */
     --color-label-comment: theme('colors.green.tropicalRainForest');
     /* Eilmeldung */
-    --color-label-breakingnews: theme('colors.red.thunderbird');
+    --color-label-breakingnews: theme('colors.red.thunderbird.hex');
     /* Sendung */
     --color-label-program: theme('colors.red.mexican');
     /* Download */
@@ -841,7 +841,6 @@
 [data-theme='hr-sinfonieorchester'] {
     --color-primary-ds: theme('colors.red.burntUmber');
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.gray.alto');
     --color-highlight-2: theme('colors.orange.spicyCarrot.hex');
 
     /* Brandnavigation Border and :before Colors*/
@@ -867,7 +866,7 @@
     /* Kommentar */
     --color-label-comment: theme('colors.green.tropicalRainForest');
     /* Eilmeldung */
-    --color-label-breakingnews: theme('colors.red.thunderbird');
+    --color-label-breakingnews: theme('colors.red.thunderbird.hex');
     /* Sendung */
     --color-label-program: theme('colors.green.goBen');
     /* Download */
@@ -976,7 +975,7 @@
     /* Kommentar */
     --color-label-comment: theme('colors.yellow.hokeyPokey');
     /* Eilmeldung */
-    --color-label-breakingnews: theme('colors.red.thunderbird');
+    --color-label-breakingnews: theme('colors.red.thunderbird.hex');
     /* Sendung */
     --color-label-program: theme('colors.blue.blueStone');
     /* Download */
@@ -1062,7 +1061,6 @@
 [data-theme='hr'] {
     --color-primary-ds: theme('colors.blue.blueLuxury.hex');
     --color-secondary-ds: #007396;
-    --color-highlight-1: theme('colors.blue.accented');
     --color-highlight-2: theme('colors.orange.spicyCarrot.hex');
 
     /* Navigation Hintergrund */
@@ -1094,7 +1092,7 @@
     /* Kommentar */
     --color-label-comment: theme('colors.blue.deeperPool');
     /* Eilmeldung */
-    --color-label-breakingnews: theme('colors.red.thunderbird');
+    --color-label-breakingnews: theme('colors.red.thunderbird.hex');
     /* Sendung */
     --color-label-program: theme('colors.red.mexican');
     /* Download */
@@ -1302,7 +1300,6 @@
 [data-theme='hr2'] {
     --color-primary-ds: theme('colors.orange.clementine');
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.gray.alto');
     --color-highlight-2: theme('colors.orange.spicyCarrot.hex');
 
     /* Brandnavigation Border and :before Colors*/
@@ -1327,7 +1324,7 @@
     /* Kommentar */
     --color-label-comment: theme('colors.green.tropicalRainForest');
     /* Eilmeldung */
-    --color-label-breakingnews: theme('colors.red.thunderbird');
+    --color-label-breakingnews: theme('colors.red.thunderbird.hex');
     /* Sendung */
     --color-label-program: theme('colors.red.paprika.hex');
     /* Download */
@@ -1437,7 +1434,7 @@
 [data-theme='hr3'] {
     --color-primary-ds: theme('colors.red.monza.hex');
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.gray.mercury');
+
     --color-highlight-2: theme('colors.orange.spicyCarrot.hex');
 
     /* Brandnavigation Border and :before Colors*/
@@ -1553,7 +1550,7 @@
 [data-theme='hr4'] {
     --color-primary-ds: theme('colors.pink.fuchsie');
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.white.azureish');
+    --color-highlight-1: theme('colors.blue.blackSqueeze');
     --color-highlight-2: theme('colors.orange.spicyCarrot.hex');
 
     /* Service/Sectionnavigation Border Color */
@@ -1575,7 +1572,7 @@
     /* Kommentar */
     --color-label-comment: theme('colors.blue.dodgerBlue');
     /* Eilmeldung */
-    --color-label-breakingnews: theme('colors.red.thunderbird');
+    --color-label-breakingnews: theme('colors.red.thunderbird.hex');
     /* Sendung */
     --color-label-program: theme('colors.pink.fuchsie');
     /* Download */
@@ -1669,7 +1666,6 @@
 [data-theme='you-fm'] {
     --color-primary-ds: #007179 /* #c20016 */;
     --color-secondary-ds: #007179;
-    --color-highlight-1: theme('colors.gray.platinum');
     --color-highlight-2: theme('colors.orange.spicyCarrot.hex');
 
     /* Brandnavigation Border and :before Colors*/
@@ -1714,7 +1710,7 @@
     /* Kommentar */
     --color-label-comment: theme('colors.green.tropicalRainForest');
     /* Eilmeldung */
-    --color-label-breakingnews: theme('colors.red.thunderbird');
+    --color-label-breakingnews: theme('colors.red.thunderbird.hex');
     /* Sendung */
     --color-label-program: theme('colors.blue.lightCerulean');
     /* Download */

package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json

@@ -1 +1 @@
-{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"errorMessages","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":false,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":true,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":false,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":false},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"errorMessages","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":true,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]},{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":false,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":true,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":false,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":false},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}

package/src/stories/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/src/stories/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/src/stories/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/src/stories/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/src/stories/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/src/stories/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/src/stories/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/src/stories/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/src/stories/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">

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

@@ -34,9 +34,9 @@
          maxlength="{{_maxLength}}"
       {{/if~}}
       {{#if _required}}required{{/if}}
-      class="relative w-full px-4 pb-px text-gray-800 placeholder-transparent bg-white border-blue-500 min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
+      class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-link dark:border-link-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
-         :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
+         :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
       {{/if}}
    >{{~#if _formField.isValid~}}
         {{{_formField.forHtmlContent}}}
@@ -46,11 +46,11 @@
         {{~else~}}
             {{~_defaultValue~}}
         {{~/if}}{{/if}}</textarea>
-   <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
+   <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion
      
      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 origin-top-left transform transition-transform">
       {{#if _locaKey}}
          {{loca _locaKey}}
       {{else}}
@@ -66,13 +66,13 @@
   {{/if}}
    <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" :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}}
       {{#if _maxLength}}
-         <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
+         <div class="px-4 ml-auto text-xs text-gray-scorpion"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
       {{/if~}}
    </div>
 </div>

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

@@ -2,7 +2,7 @@
     {{#>components/forms/backgroundBox  }}  
 
         
-        <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12">
+        <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
             {{this.title}}
         </h3>
         <div id="formWrapper">
@@ -22,17 +22,6 @@
                 accept-charset="utf-8"
                 
                 >
-        
-                <div class="">
-                    <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>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
-                        <div>isPosting:<span x-text="isPosting" class="font-bold" :class="isPosting ? 'text-green-800' : 'text-red-700'"></span></div>
-                    
-                    </div> 
-                </div>
                 {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
                 {{> components/forms/controls }}

package/src/stories/views/components/podcast/components/podcast_subscribe_button.hbs

@@ -54,7 +54,7 @@
         <ul>
             {{~#each this~}}
                 <li class="{{#unless @last}}border-b{{/unless}}"> 
-                    <a class="{{if (isUserConsentNeeded this.podcastHosterUrl) 'js-user-consent-needed ' ''}}flex px-2 py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500 js-load"
+                    <a class="{{if (isUserConsentNeeded this.podcastHosterUrl) 'js-user-consent-needed ' ''}}flex px-2 py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-scorpion js-load"
                         title="{{this.podcastHosterName}}" 
                         target="_blank"
                         rel="noopener noreferrer"

package/tailwind.config.js

@@ -90,6 +90,7 @@ module.exports = {
                 'stage': '0 .3125rem 1.0625rem rgba(0,0,0,0.3)',
                 'teaser-focus': '0 0 0 0.25rem',
                 'teaser-focus-big': '0 0 0 0.365rem',
+                'autofill': '0 0 0px 1000px var(--color-standard-text-dark) inset'
             },
             dropShadow: {
                 md: '0 5px 3px rgb(0 0 0 / 0.07)',
@@ -288,7 +289,7 @@ module.exports = {
                     monza: { rgb: '194 0 22', hex: '#c20016' },
                     paprika: { rgb: '140 3 61', hex: '#8C033D' },
                     scarlett: '#9b0112',
-                    thunderbird: '#cc1a14',
+                    thunderbird: { hex: '#cc1a14' },
                     wellRead: { rgb: '171 47 45', hex: '#AB2F2D' },
                 },
                 'pink': {
@@ -424,7 +425,8 @@ module.exports = {
                 'toggle-default': 'var(--color-toggle-default)',
                 'structure-nav': 'var(--structure-nav-background)',
                 'structure-nav-text': 'var(--structure-nav-text)',
-                'structure-nav-text-mobile': 'var(--structure-nav-text-mobile)'
+                'structure-nav-text-mobile': 'var(--structure-nav-text-mobile)',
+                'error':'var(--color-error)'
             },
         },
     },