hr-design-system-handlebars 1.35.14 → 1.35.15

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.35.15 (Thu Aug 17 2023)
+
+#### 🐛 Bug Fix
+
+- Dark mode styling for accordion in webview [#711](https://github.com/mumprod/hr-design-system-handlebars/pull/711) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v1.35.14 (Fri Aug 11 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3031,7 +3031,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1691756089196;
+  counter-reset: cnt1692280696557;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3266,7 +3266,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1691756089196 1;
+  counter-increment: cnt1692280696557 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3282,7 +3282,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1691756089196);
+  content: counter(cnt1692280696557);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4924,6 +4924,11 @@ video {
     }
 @media (color-index: 48) {
 
+  .dark\:fill-link-dark {
+    fill: #006eb7;
+    fill: var(--color-link-dark);
+  }
+
   .dark\:text-link-dark {
     color: #006eb7;
     color: var(--color-link-dark);
@@ -4936,6 +4941,11 @@ video {
 }
 @media (color: 48842621) {
 
+  .dark\:fill-link-dark {
+    fill: #006eb7;
+    fill: var(--color-link-dark);
+  }
+
   .dark\:text-link-dark {
     color: #006eb7;
     color: var(--color-link-dark);
@@ -4948,6 +4958,11 @@ video {
 }
 @media (color-index: 48) {
 
+  .dark\:fill-link-dark {
+    fill: #006eb7;
+    fill: var(--color-link-dark);
+  }
+
   .dark\:text-link-dark {
     color: #006eb7;
     color: var(--color-link-dark);
@@ -4960,6 +4975,11 @@ video {
 }
 @media (color: 48842621) {
 
+  .dark\:fill-link-dark {
+    fill: #006eb7;
+    fill: var(--color-link-dark);
+  }
+
   .dark\:text-link-dark {
     color: #006eb7;
     color: var(--color-link-dark);
@@ -4972,6 +4992,11 @@ video {
 }
 @media (prefers-color-scheme: dark) {
 
+  .dark\:fill-link-dark {
+    fill: #006eb7;
+    fill: var(--color-link-dark);
+  }
+
   .dark\:text-link-dark {
     color: #006eb7;
     color: var(--color-link-dark);

package/dist/views/components/article/components/accordion/accordion.hbs

@@ -1,5 +1,5 @@
 {{#if this.title}}
-    <h2 class="mb-5 text-lg font-normal accordion mt-11 sm480:text-2xl font-headingSerif">{{this.title}}</h2>
+    <h2 class="mb-5 text-lg font-normal accordion mt-11 sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h2>
 {{/if}}
 <div x-cloak x-data="{selected:0}" class="pb-11{{#unless this.title}} mt-11{{/unless}}">
     {{#each this.copytextParagraph }}
@@ -13,12 +13,12 @@
                     aria-controls="accordionItem{{getRandom}}"
             >
                 <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
-                    <h3 aria-hidden="true" :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif">{{{this.text}}}</h3>
+                    <h3 aria-hidden="true" :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif dark:text-text-dark">{{{this.text}}}</h3>
                     <span :class="selected == {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current dark:fill-link-dark"}}
                     </span>
                     <span :class="selected !== {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current dark:fill-link-dark"}}
                     </span>
                 </div>
             </button>

package/dist/views_static/components/article/components/accordion/accordion.hbs

@@ -1,5 +1,5 @@
 {{#if this.title}}
-    <h2 class="mb-5 text-lg font-normal accordion mt-11 sm480:text-2xl font-headingSerif">{{this.title}}</h2>
+    <h2 class="mb-5 text-lg font-normal accordion mt-11 sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h2>
 {{/if}}
 <div x-cloak x-data="{selected:0}" class="pb-11{{#unless this.title}} mt-11{{/unless}}">
     {{#each this.copytextParagraph }}
@@ -13,12 +13,12 @@
                     aria-controls="accordionItem{{getRandom}}"
             >
                 <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
-                    <h3 aria-hidden="true" :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif">{{{this.text}}}</h3>
+                    <h3 aria-hidden="true" :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif dark:text-text-dark">{{{this.text}}}</h3>
                     <span :class="selected == {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current dark:fill-link-dark"}}
                     </span>
                     <span :class="selected !== {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current dark:fill-link-dark"}}
                     </span>
                 </div>
             </button>

package/package.json

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

package/src/stories/views/components/article/components/accordion/accordion.hbs

@@ -1,5 +1,5 @@
 {{#if this.title}}
-    <h2 class="mb-5 text-lg font-normal accordion mt-11 sm480:text-2xl font-headingSerif">{{this.title}}</h2>
+    <h2 class="mb-5 text-lg font-normal accordion mt-11 sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h2>
 {{/if}}
 <div x-cloak x-data="{selected:0}" class="pb-11{{#unless this.title}} mt-11{{/unless}}">
     {{#each this.copytextParagraph }}
@@ -13,12 +13,12 @@
                     aria-controls="accordionItem{{getRandom}}"
             >
                 <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
-                    <h3 aria-hidden="true" :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif">{{{this.text}}}</h3>
+                    <h3 aria-hidden="true" :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif dark:text-text-dark">{{{this.text}}}</h3>
                     <span :class="selected == {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current dark:fill-link-dark"}}
                     </span>
                     <span :class="selected !== {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current dark:fill-link-dark"}}
                     </span>
                 </div>
             </button>