hr-design-system-handlebars 1.110.7 → 1.110.9

package/dist/views_static/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/dist/views_static/components/podcast/components/podcast_player_ui.hbs

@@ -85,7 +85,7 @@
         {{!-- AudioElement --}}
         {{~#if this.audioUrl ~}}
             <audio   
-                class="{{_id}} hidden" 
+                class="hidden" 
                 data-id="{{_id}}"
                 x-init="registerPlayer('{{_podcastDuration}}','{{_id}}')"
                 @stopotherplayers.window="stopAllOtherPlayers({{_id}})" 

package/dist/views_static/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/package.json

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

package/src/assets/fixtures/content/copytext/components/form/form_input.json

@@ -1,17 +1,17 @@
 {
-   "fields":[
-                    {
-                     "type":{
-                        "isText":true,
-                        "asString":"text"
-                     },
-                     "name":"name",
-                     "label":"Name",
-                     "description":"",
-                     "defaultValue":"",
-                     "isHidden":false,
-                     "isRequired":true,
-                     "maxLength":"140"
-                    }
-            ]
-}
+   "fields": [
+      {
+         "type": {
+            "isText": true,
+            "asString": "text"
+         },
+         "name": "name",
+         "label": "Name",
+         "description": "",
+         "defaultValue": "",
+         "isHidden": false,
+         "isRequired": true,
+         "maxLength": "140"
+      }
+   ]
+}

package/src/assets/fixtures/content/copytext/copytext_webform.json

@@ -22,6 +22,10 @@
                         "@->jsoninclude": "forms/form_fields.inc.json",
                         "@->contentpath": "input-text-nachname-required"
                     },
+                    {
+                        "@->jsoninclude": "forms/form_fields.inc.json",
+                        "@->contentpath": "select"
+                    },
                     {
                         "@->jsoninclude": "forms/form_fields.inc.json",
                         "@->contentpath": "checkbox-group"

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/components/audio.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="50" _addClass="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="50" _addClass="hrds-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
 {{/if}}

package/src/stories/views/components/content/copytext/components/audioeventlivestream.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="50" _addClass="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="50" _addClass="hrds-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
 {{/if}}

package/src/stories/views/components/content/copytext/components/cite.hbs

@@ -1,4 +1,4 @@
-<div class="{{#if this.paragraphProperties.[0].showFullSize }}mt-6 mb-2 sm480:mt-7 sm480:mb-7{{else}}hr-copytext-teaser-half mr-0 sm:mr-5 mb-2 sm:mb-5 mt-5 w-full sm:w-1/2 sm:float-left{{/if}}">
+<div class="{{#if this.paragraphProperties.[0].showFullSize }}mt-6 mb-2 sm480:mt-7 sm480:mb-7{{else}}hrds-copytext-teaser-half mr-0 sm:mr-5 mb-2 sm:mb-5 mt-5 w-full sm:w-1/2 sm:float-left{{/if}}">
     {{> components/base/image/icon _icon="quotation"  _addClass="sm:ml-4 mr-2 mt-px float-left text-gray-scorpion w-6 h-6 sm480:w-8 sm480:h-8 fill-current dark:fill-link-dark"}}
     <span class="sr-only">{{loca "story_cite_intro_sr" }}</span>
     <blockquote>

package/src/stories/views/components/content/copytext/components/common/paragraphbox_wrapper.hbs

@@ -1,3 +1,3 @@
-<div class="mx-1 sm:ml-[1.531rem] sm:mr-6.5 px-4 sm:pl-[1.531rem] sm:pr-6.5 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}[&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 clear-both mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14 {{else}}hr-copytext-teaser-half mb-8 sm:mb-5 sm:mt-6 mt-12 w-full sm:w-1/2 sm:float-left{{/if}}{{#if _cssClasses}} {{_cssClasses}}{{/if}}">
+<div class="mx-1 sm:ml-[1.531rem] sm:mr-6.5 px-4 sm:pl-[1.531rem] sm:pr-6.5 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}[&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 clear-both mt-12 mb-8 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14 {{else}}hrds-copytext-teaser-half mb-8 sm:mb-5 sm:mt-6 mt-12 w-full sm:w-1/2 sm:float-left{{/if}}{{#if _cssClasses}} {{_cssClasses}}{{/if}}">
     {{~> @partial-block ~}}
 </div>

package/src/stories/views/components/content/copytext/components/image/image.hbs

@@ -1,7 +1,7 @@
 {{#if this.showPortrait.isTrue }}
         {{#if this.showFullSize.isTrue }}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:my-14 clear-both article-full-width sm:article-narrow"
+                _cssClass="mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:my-14 clear-both article-full-width sm:article-narrow"
                 _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="100-copytext-portrait"
@@ -9,7 +9,7 @@
                 _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="hr-copytext-teaser-half mt-12 mb-8 article-full-width sm:article-narrow sm:mt-6 sm:mb-5 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClass="hrds-copytext-teaser-half mt-12 mb-8 article-full-width sm:article-narrow sm:mt-6 sm:mb-5 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid"
                 _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="copytext-portrait"
@@ -19,7 +19,7 @@
 {{else}}
         {{#if this.showFullSize.isTrue}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:my-14 clear-both article-full-width sm:article-narrow"
+                _cssClass="mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:my-14 clear-both article-full-width sm:article-narrow"
                 _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="100-copytext"
@@ -27,7 +27,7 @@
                 _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="hr-copytext-teaser-half mt-12 mb-8 sm:mt-6 sm:mb-5 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClass="hrds-copytext-teaser-half mt-12 mb-8 sm:mt-6 sm:mb-5 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid"
                 _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="copytext"

package/src/stories/views/components/content/copytext/components/podcastepisode.hbs

@@ -1,3 +1,3 @@
-<div class="print:hidden {{#if this.showFullSize.isTrue }}clear-both [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14{{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left sm:mr-5 mt-12 mb-8 sm:mt-6 sm:mb-5{{/if}}">
+<div class="print:hidden {{#if this.showFullSize.isTrue }}clear-both [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 mt-12 mb-8 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14{{else}}hrds-copytext-teaser-half sm:w-1/2 clear-both sm:float-left sm:mr-5 mt-12 mb-8 sm:mt-6 sm:mb-5{{/if}}">
     {{> components/teaser/podcast/podcast _headlineTag="h3" _isCopytext=true }} 
 </div>

package/src/stories/views/components/content/copytext/components/posterteaser.hbs

@@ -1,3 +1,3 @@
-<div class="print:hidden article-narrow w-auto [&+h2]:mt-4 xs:article-full-width xs:mx-13 {{#if this.showFullSize.isTrue }}hr-copytext-teaser-full clear-both mb-8 mt-12 sm:my-14 sm:mx-26 {{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left mt-12 mb-8 sm:mt-6 sm:mb-5 sm:mr-5 sm:ml-0{{/if}}">
+<div class="print:hidden article-narrow w-auto [&+h2]:mt-4 xs:article-full-width xs:mx-13 {{#if this.showFullSize.isTrue }}hrds-copytext-teaser-full clear-both mb-8 mt-12 sm:my-14 sm:mx-26 {{else}}hrds-copytext-teaser-half sm:w-1/2 clear-both sm:float-left mt-12 mb-8 sm:mt-6 sm:mb-5 sm:mr-5 sm:ml-0{{/if}}">
     {{> components/teaser/teaser_poster _isCopytext=true }} 
 </div>    

package/src/stories/views/components/content/copytext/components/video/video.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="50" _addClass="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="50" _addClass="hrds-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{/if}} 

package/src/stories/views/components/content/copytext/components/videolivestream.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hrds-copytext-teaser-half]:mt-4 sm:[&+.hrds-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="50" _addClass="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="50" _addClass="hrds-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{/if}} 

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/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}}