hr-design-system-handlebars 1.34.3 → 1.34.4

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.34.4 (Wed Jul 26 2023)
+
+#### 🐛 Bug Fix
+
+- Dpe 2272 [#690](https://github.com/mumprod/hr-design-system-handlebars/pull/690) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.34.3 (Wed Jul 26 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -2733,6 +2733,10 @@ video {
   color: #006dc1;
   color: var(--color-subline);
 }
+.text-text {
+  color: #000;
+  color: var(--color-standard-text);
+}
 .text-tickerTeaserFooter {
   color: #ffffff;
   color: var(--color-ticker-teaser-footer);
@@ -2941,7 +2945,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1690367145667;
+  counter-reset: cnt1690381863847;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3176,7 +3180,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1690367145667 1;
+  counter-increment: cnt1690381863847 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3192,7 +3196,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1690367145667);
+  content: counter(cnt1690381863847);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3268,6 +3272,9 @@ video {
     --color-highlight-2: #d34600;
     --color-highlight-3: #707070;
 
+    /* Text */
+    --color-standard-text: #000;
+    --color-standard-text-dark: #F0F0F0;
     /* Navigation Hintergrund */
     --color-navigation-bg: #005293;
     --color-brandnavigation-bg: #fff; 
@@ -3343,6 +3350,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #006eb7;
+    --color-link-dark: #006eb7;
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-text: #ffffff;
@@ -3391,6 +3399,10 @@ video {
     --color-highlight-2: #d34600;
     --color-highlight-3: #005293;
 
+    /* Text */
+    --color-standard-text: #000;
+    --color-standard-text-dark: #d8e9f6;
+
     /* Logo-Container Padding */
     --logo-padding-top: 6px;
     --logo-padding-bottom: 6px;
@@ -3437,6 +3449,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #006dc1;
+    --color-link-dark: #199bff;
     /*Stage */
     --color-stage-text-box: 67 61 55;
     --color-stage-primary: #005293;
@@ -3513,6 +3526,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #a00d65;
+    --color-link-dark: #a00d65;
     /* Stage */
     --color-stage-text-box: 234 237 237;
     --color-stage-text: #000000;
@@ -3583,6 +3597,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #276b9e;
+    --color-link-dark: #276b9e;
     /* Stage */
     --color-stage-text-box: 0 55 93;
     --color-stage-primary: #00375d;
@@ -3655,6 +3670,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #006eb7;
+    --color-link-dark: #006eb7;
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-primary: #006eb7;
@@ -3721,6 +3737,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: var(--color-primary-ds);
+    --color-link-dark: var(--color-primary-ds);
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-primary: var(--color-primary-ds);
@@ -3801,6 +3818,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #AB2F2D;
+    --color-link-dark: #AB2F2D;
     /* Stage */
     --color-stage-text-box: 141 39 37;
     --color-stage-primary: var(--color-primary-ds);
@@ -3881,6 +3899,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #007A7C;
+    --color-link-dark: #007A7C;
     /* Stage */
     --color-stage-text-box: 67 61 55;
     --color-stage-primary: #00646f;
@@ -3957,6 +3976,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: var(--color-primary-ds);
+    --color-link-dark: var(--color-primary-ds);
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-primary: var(--color-primary-ds);
@@ -4036,6 +4056,7 @@ video {
     --color-subline: #916B00;
     /* Link */
     --color-link: #916B00;
+    --color-link-dark: #916B00;
     /* Stage */
     --color-stage-text-box: 67 61 55;
     --color-stage-primary: #e0ae00;
@@ -4116,6 +4137,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #8C033D;
+    --color-link-dark: #8C033D;
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: var(--color-primary-ds);
@@ -4206,6 +4228,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: var(--color-primary-ds);
+    --color-link-dark: var(--color-primary-ds);
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: var(--color-primary-ds);
@@ -4293,6 +4316,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #0F6157;
+    --color-link-dark: #0F6157;
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: #168378;
@@ -4372,6 +4396,7 @@ video {
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: #006783;
+    --color-link-dark: #006783;
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: #f2da6c;
@@ -4714,6 +4739,66 @@ video {
 .after\:col-full::after {
         grid-column: full;
     }
+@media (color-index: 48) {
+
+  .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\: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\: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\:text-link-dark {
+    color: #006eb7;
+    color: var(--color-link-dark);
+  }
+
+  .dark\:text-text-dark {
+    color: #F0F0F0;
+    color: var(--color-standard-text-dark);
+  }
+}
+@media (prefers-color-scheme: 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 print {
 
   .print\:flex {

package/dist/views/components/content/social_media_links/social_media_links.hbs

@@ -1,10 +1,10 @@
 {{#with this.socialMediaLinks }}
     <div class="flex">
-        <span class="mr-2 font-bold whitespace-nowrap">{{~loca "social_media_links_text"~}}</span>
+        <span class="mr-2 font-bold whitespace-nowrap text-text dark:text-text-dark">{{~loca "social_media_links_text"~}}</span>
         <ul class="inline">
             {{~#each this~}}
                 <li class="inline mr-1">
-                    {{~#> components/base/link _link=this.link _css="underline text-link" ~}}
+                    {{~#> components/base/link _link=this.link _css="underline text-link dark:text-link-dark" ~}}
                         {{~this.linkText~}}
                         {{~#if this.link.hasIcon~}}
                             {{~> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current"~}}

package/dist/views_static/components/content/social_media_links/social_media_links.hbs

@@ -1,10 +1,10 @@
 {{#with this.socialMediaLinks }}
     <div class="flex">
-        <span class="mr-2 font-bold whitespace-nowrap">{{~loca "social_media_links_text"~}}</span>
+        <span class="mr-2 font-bold whitespace-nowrap text-text dark:text-text-dark">{{~loca "social_media_links_text"~}}</span>
         <ul class="inline">
             {{~#each this~}}
                 <li class="inline mr-1">
-                    {{~#> components/base/link _link=this.link _css="underline text-link" ~}}
+                    {{~#> components/base/link _link=this.link _css="underline text-link dark:text-link-dark" ~}}
                         {{~this.linkText~}}
                         {{~#if this.link.hasIcon~}}
                             {{~> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current"~}}

package/package.json

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

package/src/assets/tailwind.css

@@ -14,6 +14,9 @@
     --color-highlight-2: theme('colors.orange.spicyCarrot');
     --color-highlight-3: theme('colors.gray.dark');
 
+    /* Text */
+    --color-standard-text: #000;
+    --color-standard-text-dark: #F0F0F0;
     /* Navigation Hintergrund */
     --color-navigation-bg: theme('colors.blue.congress');
     --color-brandnavigation-bg: #fff; 
@@ -89,6 +92,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.blue.deepCerulean');
+    --color-link-dark: theme('colors.blue.deepCerulean');
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-text: theme('colors.white.DEFAULT');
@@ -138,6 +142,10 @@
     --color-highlight-2: theme('colors.orange.spicyCarrot');
     --color-highlight-3: theme('colors.blue.congress');
 
+    /* Text */
+    --color-standard-text: #000;
+    --color-standard-text-dark: #d8e9f6;
+
     /* Logo-Container Padding */
     --logo-padding-top: 6px;
     --logo-padding-bottom: 6px;
@@ -179,11 +187,12 @@
     /* Eventkalender */
     --color-eventcalendar-primary: var(--color-primary-ds);
     /* Dachzeile */
-    --color-topline: #006dc1;
+    --color-topline: theme('colors.blue.science');
     /* Subline */
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.blue.science');
+    --color-link-dark: #199bff;
     /*Stage */
     --color-stage-text-box: 67 61 55;
     --color-stage-primary: theme('colors.blue.congress');
@@ -262,6 +271,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.purple.jazzberry');
+    --color-link-dark: theme('colors.purple.jazzberry');
     /* Stage */
     --color-stage-text-box: 234 237 237;
     --color-stage-text: theme('colors.black.DEFAULT');
@@ -333,6 +343,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.blue.jellyBean');
+    --color-link-dark: theme('colors.blue.jellyBean');
     /* Stage */
     --color-stage-text-box: 0 55 93;
     --color-stage-primary: theme('colors.blue.astronautBlue');
@@ -406,6 +417,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.blue.deepCerulean');
+    --color-link-dark: theme('colors.blue.deepCerulean');
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-primary: theme('colors.blue.deepCerulean');
@@ -473,6 +485,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: var(--color-primary-ds);
+    --color-link-dark: var(--color-primary-ds);
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-primary: var(--color-primary-ds);
@@ -554,6 +567,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.red.wellRead');
+    --color-link-dark: theme('colors.red.wellRead');
     /* Stage */
     --color-stage-text-box: 141 39 37;
     --color-stage-primary: var(--color-primary-ds);
@@ -635,6 +649,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.green.teal');
+    --color-link-dark: theme('colors.green.teal');
     /* Stage */
     --color-stage-text-box: 67 61 55;
     --color-stage-primary: theme('colors.blue.blueStone');
@@ -712,6 +727,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: var(--color-primary-ds);
+    --color-link-dark: var(--color-primary-ds);
     /* Stage */
     --color-stage-text-box: 0 110 183;
     --color-stage-primary: var(--color-primary-ds);
@@ -792,6 +808,7 @@
     --color-subline: theme('colors.yellow.olive');
     /* Link */
     --color-link: theme('colors.yellow.olive');
+    --color-link-dark: theme('colors.yellow.olive');
     /* Stage */
     --color-stage-text-box: 67 61 55;
     --color-stage-primary: theme('colors.yellow.corn');
@@ -873,6 +890,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.red.paprika');
+    --color-link-dark: theme('colors.red.paprika');
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: var(--color-primary-ds);
@@ -964,6 +982,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: var(--color-primary-ds);
+    --color-link-dark: var(--color-primary-ds);
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: var(--color-primary-ds);
@@ -1052,6 +1071,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.green.eden');
+    --color-link-dark: theme('colors.green.eden');
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: theme('colors.green.genoa');
@@ -1132,6 +1152,7 @@
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.blue.sea');
+    --color-link-dark: theme('colors.blue.sea');
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: theme('colors.yellow.goldenSand');

package/src/stories/views/components/content/social_media_links/social_media_links.hbs

@@ -1,10 +1,10 @@
 {{#with this.socialMediaLinks }}
     <div class="flex">
-        <span class="mr-2 font-bold whitespace-nowrap">{{~loca "social_media_links_text"~}}</span>
+        <span class="mr-2 font-bold whitespace-nowrap text-text dark:text-text-dark">{{~loca "social_media_links_text"~}}</span>
         <ul class="inline">
             {{~#each this~}}
                 <li class="inline mr-1">
-                    {{~#> components/base/link _link=this.link _css="underline text-link" ~}}
+                    {{~#> components/base/link _link=this.link _css="underline text-link dark:text-link-dark" ~}}
                         {{~this.linkText~}}
                         {{~#if this.link.hasIcon~}}
                             {{~> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current"~}}

package/tailwind.config.js

@@ -332,7 +332,8 @@ module.exports = {
                 'highlight-2': 'var(--color-highlight-2)',
                 'highlight-3': 'var(--color-highlight-3)',
                 'top-topic-background': 'var(--color-top-topic-background)',
-
+                'text': 'var(--color-standard-text)',
+                'text-dark': 'var(--color-standard-text-dark)',
                 'navigation-bg': 'var(--color-navigation-bg)',
                 'navigation-icons': 'var(--color-navigation-icons)',
                 'navigation-text': 'var(--color-navigation-text)',
@@ -359,6 +360,7 @@ module.exports = {
                 'toplineColor': 'var(--color-topline)',
                 'subline': 'var(--color-subline)',
                 'link': 'var(--color-link)',
+                'link-dark': 'var(--color-link-dark)',
                 'stageLink': 'var(--color-stage-link)',
                 'stageTextBox': 'rgb(var(--color-stage-text-box) / <alpha-value>)',
                 'stageText': 'var(--color-stage-text)',