hr-design-system-handlebars 1.36.1 → 1.36.2

package/.storybook/preview-head.html

@@ -8,4 +8,13 @@
 see: https://github.com/storybookjs/storybook/issues/11706 -->
 <script>
     document.documentElement.setAttribute('lang', 'de')
+
+    // Javascript workaround damit darkmode nur in der Webview in Delivery funktioniert
+    // todo bessere Lösung finden !
+    function setColorScheme(e) {
+        e.matches ? document.getElementsByTagName("html")[0].classList.add("tw-dark") : document.getElementsByTagName("html")[0].classList.remove("tw-dark")
+    }
+    const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
+    darkModePreference.addEventListener("change",  setColorScheme);
+    
 </script>

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.36.2 (Fri Sep 01 2023)
+
+#### 🐛 Bug Fix
+
+- workaround for enabling DarkMode only for WebView [#714](https://github.com/mumprod/hr-design-system-handlebars/pull/714) (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.36.1 (Tue Aug 29 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3034,7 +3034,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1693306998673;
+  counter-reset: cnt1693563242763;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3269,7 +3269,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1693306998673 1;
+  counter-increment: cnt1693563242763 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3285,7 +3285,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1693306998673);
+  content: counter(cnt1693563242763);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4928,90 +4928,17 @@ video {
 .after\:col-full::after {
         grid-column: full;
     }
-@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);
-  }
-
-  .dark\:text-text-dark {
-    color: #F0F0F0;
-    color: var(--color-standard-text-dark);
-  }
-}
-@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);
-  }
-
-  .dark\:text-text-dark {
-    color: #F0F0F0;
-    color: var(--color-standard-text-dark);
-  }
-}
-@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);
-  }
-
-  .dark\:text-text-dark {
-    color: #F0F0F0;
-    color: var(--color-standard-text-dark);
-  }
+[class~='tw-dark'] .dark\:fill-link-dark {
+  fill: #006eb7;
+  fill: var(--color-link-dark);
 }
-@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);
-  }
-
-  .dark\:text-text-dark {
-    color: #F0F0F0;
-    color: var(--color-standard-text-dark);
-  }
+[class~='tw-dark'] .dark\:text-link-dark {
+  color: #006eb7;
+  color: var(--color-link-dark);
 }
-@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);
-  }
-
-  .dark\:text-text-dark {
-    color: #F0F0F0;
-    color: var(--color-standard-text-dark);
-  }
+[class~='tw-dark'] .dark\:text-text-dark {
+  color: #F0F0F0;
+  color: var(--color-standard-text-dark);
 }
 @media print {
 

package/package.json

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

package/tailwind.config.js

@@ -3,6 +3,9 @@ const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+    // workaround damit darkmode nur in der Webview in Delivery funktioniert
+    darkMode: ['class', "[class~='tw-dark']"],
+
     experimental: {
         optimizeUniversalDefaults: true,
     },