hr-design-system-handlebars 1.110.7 → 1.110.9

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_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/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)'
             },
         },
     },