hr-design-system-handlebars 1.12.0 → 1.12.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/assets/index.css +77 -103
  3. package/dist/views/components/button/utilities/button_variation_classes.hbs +2 -2
  4. package/dist/views/components/event/event_ticket_button.hbs +4 -4
  5. package/dist/views/components/mediaplayer/mediaplayer_button.hbs +3 -2
  6. package/dist/views/components/modal/modal.hbs +1 -1
  7. package/dist/views/components/teaser/components/teaser_image.hbs +1 -1
  8. package/dist/views/components/teaser/components/teaser_ticker_body.hbs +40 -0
  9. package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs +1 -1
  10. package/dist/views/components/teaser/ticker/teaser_ticker.hbs +4 -4
  11. package/gulpfile.js +1 -0
  12. package/package.json +1 -1
  13. package/src/assets/css/custom-components.css +2 -2
  14. package/src/assets/fixtures/teaser/teaser_ticker.inc.json +3 -3
  15. package/src/assets/fixtures/teaser/ticker_teaser_standard_100.json +5 -1
  16. package/src/assets/tailwind.css +40 -60
  17. package/src/stories/views/components/button/utilities/button_variation_classes.hbs +2 -2
  18. package/src/stories/views/components/event/event_ticket_button.hbs +4 -4
  19. package/src/stories/views/components/mediaplayer/mediaplayer_button.hbs +3 -2
  20. package/src/stories/views/components/modal/modal.hbs +1 -1
  21. package/src/stories/views/components/teaser/components/teaser_image.hbs +1 -1
  22. package/src/stories/views/components/teaser/components/teaser_ticker_body.hbs +40 -0
  23. package/src/stories/views/components/teaser/fixtures/ticker_teaser_standard_100.json +1 -1
  24. package/src/stories/views/components/teaser/tabbox/teaser_tabbox.hbs +1 -1
  25. package/src/stories/views/components/teaser/ticker/teaser_ticker.hbs +4 -4
  26. package/src/stories/views/components/teaser/ticker/teaser_ticker.stories.js +1 -1
  27. package/tailwind.config.js +3 -10
package/CHANGELOG.md CHANGED
@@ -1,3 +1,28 @@
1
+ # v1.12.2 (Fri Apr 21 2023)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Feature/dpe 2153 [#612](https://github.com/mumprod/hr-design-system-handlebars/pull/612) ([@szuelch](https://github.com/szuelch))
6
+
7
+ #### Authors: 1
8
+
9
+ - [@szuelch](https://github.com/szuelch)
10
+
11
+ ---
12
+
13
+ # v1.12.1 (Thu Apr 20 2023)
14
+
15
+ #### 🐛 Bug Fix
16
+
17
+ - standard ticker teaser (100%) without timeline [#610](https://github.com/mumprod/hr-design-system-handlebars/pull/610) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
18
+
19
+ #### Authors: 2
20
+
21
+ - Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
22
+ - selbaciri (saad.elbaciri@hr.de)
23
+
24
+ ---
25
+
1
26
  # v1.12.0 (Thu Apr 20 2023)
2
27
 
3
28
  #### 🚀 Enhancement
package/dist/assets/index.css CHANGED
@@ -723,8 +723,7 @@ video {
723
723
  .ds-teaser-focus:focus + .ds-cta > * {
724
724
  background-color: #ffffff;
725
725
  background-color: var(--color-button-inverted);
726
- color: #006dc1;
727
- color: var(--color-button-hollow);
726
+ color: var(--color-button);
728
727
  border-style: none;
729
728
  }
730
729
  .ds-teaser-focus:focus:not(:focus-visible)::before,
@@ -752,8 +751,7 @@ video {
752
751
  line-height: 1.375rem;
753
752
  font-family: DIN, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
754
753
  list-style-type: none;
755
- border-color: #005293;
756
- border-color: var(--color-button);
754
+ border-color: var(--color-button--dark);
757
755
  fill: #005293;
758
756
  fill: var(--color-content-nav);
759
757
  color: #005293;
@@ -1608,6 +1606,9 @@ video {
1608
1606
  .justify-around {
1609
1607
  justify-content: space-around;
1610
1608
  }
1609
+ .justify-items-center {
1610
+ justify-items: center;
1611
+ }
1611
1612
  .gap-5 {
1612
1613
  gap: 1.25rem;
1613
1614
  }
@@ -1793,11 +1794,12 @@ video {
1793
1794
  --tw-border-opacity: 1;
1794
1795
  border-color: rgba(0, 82, 147, var(--tw-border-opacity));
1795
1796
  }
1796
- .border-button-primary {
1797
- border-color: var(--color-button-primary);
1797
+ .border-button {
1798
+ border-color: var(--color-button);
1798
1799
  }
1799
- .border-button-primary--inverted {
1800
- border-color: var(--color-button-primary-inverted);
1800
+ .border-button-inverted {
1801
+ border-color: #ffffff;
1802
+ border-color: var(--color-button-inverted);
1801
1803
  }
1802
1804
  .border-clusterTeaserHeadline {
1803
1805
  border-color: #005293;
@@ -1850,14 +1852,15 @@ video {
1850
1852
  --tw-bg-opacity: 1;
1851
1853
  background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
1852
1854
  }
1853
- .bg-button-primary {
1854
- background-color: var(--color-button-primary);
1855
+ .bg-button {
1856
+ background-color: var(--color-button);
1855
1857
  }
1856
- .bg-button-primary--dark {
1857
- background-color: var(--color-button-primary-dark);
1858
+ .bg-button--dark {
1859
+ background-color: var(--color-button--dark);
1858
1860
  }
1859
- .bg-button-primary--inverted {
1860
- background-color: var(--color-button-primary-inverted);
1861
+ .bg-button-inverted {
1862
+ background-color: #ffffff;
1863
+ background-color: var(--color-button-inverted);
1861
1864
  }
1862
1865
  .bg-current {
1863
1866
  background-color: currentColor;
@@ -2436,20 +2439,13 @@ video {
2436
2439
  --tw-text-opacity: 1;
2437
2440
  color: rgba(0, 109, 193, var(--tw-text-opacity));
2438
2441
  }
2442
+ .text-button {
2443
+ color: var(--color-button);
2444
+ }
2439
2445
  .text-button-inverted {
2440
2446
  color: #ffffff;
2441
2447
  color: var(--color-button-inverted);
2442
2448
  }
2443
- .text-button-primary {
2444
- color: var(--color-button-primary);
2445
- }
2446
- .text-button-primary--inverted {
2447
- color: var(--color-button-primary-inverted);
2448
- }
2449
- .text-button-secondary {
2450
- color: #006dc1;
2451
- color: var(--color-button-secondary);
2452
- }
2453
2449
  .text-byline {
2454
2450
  color: #606060;
2455
2451
  color: var(--color-byline);
@@ -2682,7 +2678,7 @@ video {
2682
2678
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2683
2679
  }
2684
2680
  .counter-reset {
2685
- counter-reset: cnt1682004237175;
2681
+ counter-reset: cnt1682086908020;
2686
2682
  }
2687
2683
  .hyphens-auto {
2688
2684
  -webkit-hyphens: auto;
@@ -2914,7 +2910,7 @@ video {
2914
2910
  --tw-ring-color: rgba(255, 255, 255, 0.5);
2915
2911
  }
2916
2912
  .-ordered {
2917
- counter-increment: cnt1682004237175 1;
2913
+ counter-increment: cnt1682086908020 1;
2918
2914
  }
2919
2915
  .-ordered::before {
2920
2916
  position: absolute;
@@ -2930,7 +2926,7 @@ video {
2930
2926
  letter-spacing: .0125em;
2931
2927
  --tw-text-opacity: 1;
2932
2928
  color: rgba(0, 0, 0, var(--tw-text-opacity));
2933
- content: counter(cnt1682004237175);
2929
+ content: counter(cnt1682086908020);
2934
2930
  }
2935
2931
  /*! ****************************/
2936
2932
  /*! text-shadow */
@@ -3031,11 +3027,8 @@ video {
3031
3027
  --color-cluster-teaser-link: #006dc1;
3032
3028
  --color-cluster-teaser-headline: #005293;
3033
3029
  /* Button */
3034
- --color-button: var(--color-primary-ds);
3035
3030
  --color-button-inverted: #ffffff;
3036
3031
  --color-button-hollow: #006dc1;
3037
- --color-button-secondary: #006dc1;
3038
- --color-button-ghost: #006dc1;
3039
3032
  /* Media-Button */
3040
3033
  --color-media-button: #276b9e;
3041
3034
  /* States */
@@ -3100,15 +3093,10 @@ video {
3100
3093
  --color-cluster-teaser-link: #006dc1;
3101
3094
  --color-cluster-teaser-headline: #005293;
3102
3095
  /* Button */
3103
- --color-button: var(--color-primary-ds);
3104
- --color-button-primary: #006dc1;
3105
- --color-button-primary-dark: #005293;
3106
- --color-button-primary-inverted: #ffffff;
3107
- --color-button-primary-inverted-dark: #eaf3fa;
3096
+ --color-button: #006dc1;
3097
+ --color-button--dark: #005293;
3108
3098
  --color-button-inverted: #ffffff;
3109
- --color-button-hollow: #006dc1;
3110
- --color-button-secondary: #006dc1;
3111
- --color-button-ghost: #006dc1;
3099
+ --color-button-inverted--dark: #eaf3fa;
3112
3100
  /* Media-Button */
3113
3101
  --color-media-button: #006dc1;
3114
3102
  /* States */
@@ -3166,11 +3154,10 @@ video {
3166
3154
  --color-cluster-teaser-link: #a00d65;
3167
3155
  --color-cluster-teaser-headline: #6d0041;
3168
3156
  /* Button */
3169
- --color-button: var(--color-primary-ds);
3157
+ --color-button: #a00d65;
3158
+ --color-button--dark: #6d0041;
3170
3159
  --color-button-inverted: #ffffff;
3171
- --color-button-hollow: #a00d65;
3172
- --color-button-secondary: #a00d65;
3173
- --color-button-ghost: #a00d65;
3160
+ --color-button-inverted--dark: #eaf3fa;
3174
3161
  /* Media-Button */
3175
3162
  --color-media-button: var(--color-primary-ds);
3176
3163
  /* States */
@@ -3223,11 +3210,10 @@ video {
3223
3210
  --color-cluster-teaser-link: var(--color-primary-ds);
3224
3211
  --color-cluster-teaser-headline: #00375d;
3225
3212
  /* Button */
3226
- --color-button: var(--color-primary-ds);
3213
+ --color-button: #276b9e;
3214
+ --color-button--dark: #00375d;
3227
3215
  --color-button-inverted: #ffffff;
3228
- --color-button-hollow: #276b9e;
3229
- --color-button-secondary: #276b9e;
3230
- --color-button-ghost: #276b9e;
3216
+ --color-button-inverted--dark: #eaf3fa;
3231
3217
  /* Media-Button */
3232
3218
  --color-media-button: var(--color-primary-ds);
3233
3219
  /* States */
@@ -3283,10 +3269,9 @@ video {
3283
3269
  --color-cluster-teaser-headline: #005293;
3284
3270
  /* Button */
3285
3271
  --color-button: #006eb7;
3272
+ --color-button--dark: #005293;
3286
3273
  --color-button-inverted: #ffffff;
3287
- --color-button-hollow: #006eb7;
3288
- --color-button-secondary: #006eb7;
3289
- --color-button-ghost: #006eb7;
3274
+ --color-button-inverted--dark: #eaf3fa;
3290
3275
  /* Media-Button */
3291
3276
  --color-media-button: var(--color-primary-ds);
3292
3277
  /* States */
@@ -3341,11 +3326,10 @@ video {
3341
3326
  --color-cluster-teaser-link: var(--color-primary-ds);
3342
3327
  --color-cluster-teaser-headline: #005293;
3343
3328
  /* Button */
3344
- --color-button: var(--color-primary-ds);
3329
+ --color-button: #006eb7;
3330
+ --color-button--dark: #005293;
3345
3331
  --color-button-inverted: #ffffff;
3346
- --color-button-hollow: var(--color-primary-ds);
3347
- --color-button-secondary: var(--color-primary-ds);
3348
- --color-button-ghost: var(--color-primary-ds);
3332
+ --color-button-inverted--dark: #eaf3fa;
3349
3333
  /* Media-Button */
3350
3334
  --color-media-button: var(--color-primary-ds);
3351
3335
  /* States */
@@ -3399,10 +3383,9 @@ video {
3399
3383
  --color-cluster-teaser-headline: var(--color-primary-ds);
3400
3384
  /* Button */
3401
3385
  --color-button: #AB2F2D;
3386
+ --color-button--dark: #8d2725;
3402
3387
  --color-button-inverted: #ffffff;
3403
- --color-button-hollow: #AB2F2D;
3404
- --color-button-secondary: #AB2F2D;
3405
- --color-button-ghost: #AB2F2D;
3388
+ --color-button-inverted--dark: #eaf3fa;
3406
3389
  /* Media-Button */
3407
3390
  --color-media-button: #AB2F2D;
3408
3391
  /* States */
@@ -3456,10 +3439,9 @@ video {
3456
3439
  --color-cluster-teaser-headline: var(--color-primary-ds);
3457
3440
  /* Button */
3458
3441
  --color-button: #007A7C;
3442
+ --color-button--dark: #00646f;
3459
3443
  --color-button-inverted: #ffffff;
3460
- --color-button-hollow: #007A7C;
3461
- --color-button-secondary: #007A7C;
3462
- --color-button-ghost: #007A7C;
3444
+ --color-button-inverted--dark: #eaf3fa;
3463
3445
  /* Media-Button */
3464
3446
  --color-media-button: #007A7C;
3465
3447
  /* States */
@@ -3514,11 +3496,10 @@ video {
3514
3496
  --color-cluster-teaser-link: var(--color-primary-ds);
3515
3497
  --color-cluster-teaser-headline: #00375d;
3516
3498
  /* Button */
3517
- --color-button: var(--color-primary-ds);
3499
+ --color-button: #006eb7;
3500
+ --color-button--dark: #00375d;
3518
3501
  --color-button-inverted: #ffffff;
3519
- --color-button-hollow: var(--color-primary-ds);
3520
- --color-button-secondary: var(--color-primary-ds);
3521
- --color-button-ghost: var(--color-primary-ds);
3502
+ --color-button-inverted--dark: #eaf3fa;
3522
3503
  /* Media-Button */
3523
3504
  --color-media-button: var(--color-primary-ds);
3524
3505
  /* States */
@@ -3574,10 +3555,9 @@ video {
3574
3555
  --color-cluster-teaser-headline: #000000;
3575
3556
  /* Button */
3576
3557
  --color-button: #916B00;
3558
+ --color-button--dark: #6e6748;
3577
3559
  --color-button-inverted: #ffffff;
3578
- --color-button-hollow: #916B00;
3579
- --color-button-secondary: #916B00;
3580
- --color-button-ghost: #916B00;
3560
+ --color-button-inverted--dark: #eaf3fa;
3581
3561
  /* Media-Button */
3582
3562
  --color-media-button: #916B00;
3583
3563
  /* States */
@@ -3587,7 +3567,7 @@ video {
3587
3567
  /* Podcast-Player */
3588
3568
  --color-podcast: #916B00;
3589
3569
  --color-podcast-text: var(--color-link);
3590
- --color-podcast-highlight: #00727A;
3570
+ --color-podcast-highlight: #007A7C;
3591
3571
  /* Font */
3592
3572
  --font-title: RobotoCond, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
3593
3573
  --font-weight-title: 700;
@@ -3632,10 +3612,9 @@ video {
3632
3612
  --color-cluster-teaser-headline: #000000;
3633
3613
  /* Button */
3634
3614
  --color-button: #8C033D;
3615
+ --color-button--dark: #6d0041;
3635
3616
  --color-button-inverted: #ffffff;
3636
- --color-button-hollow: #8C033D;
3637
- --color-button-secondary: #8C033D;
3638
- --color-button-ghost: #8C033D;
3617
+ --color-button-inverted--dark: #eaf3fa;
3639
3618
  /* Media-Button */
3640
3619
  --color-media-button: #c95702;
3641
3620
  /* States */
@@ -3693,9 +3672,8 @@ video {
3693
3672
  /* Button */
3694
3673
  --color-button: #9b0112;
3695
3674
  --color-button-inverted: #ffffff;
3696
- --color-button-hollow: #9b0112;
3697
- --color-button-secondary: #9b0112;
3698
- --color-button-ghost: #9b0112;
3675
+ --color-button--dark: #8d2725;
3676
+ --color-button-inverted--dark: #eaf3fa;
3699
3677
  /* Media-Button */
3700
3678
  --color-media-button: var(--color-primary-ds);
3701
3679
  /* States */
@@ -3753,9 +3731,8 @@ video {
3753
3731
  /* Button */
3754
3732
  --color-button: #29675d;
3755
3733
  --color-button-inverted: #ffffff;
3756
- --color-button-hollow: #29675d;
3757
- --color-button-secondary: #29675d;
3758
- --color-button-ghost: #29675d;
3734
+ --color-button--dark: #0F6157;
3735
+ --color-button-inverted--dark: #eaf3fa;
3759
3736
  /* Media-Button */
3760
3737
  --color-media-button: #0F6157;
3761
3738
  /* States */
@@ -3811,11 +3788,10 @@ video {
3811
3788
  --color-cluster-teaser-link: var(--color-link);
3812
3789
  --color-cluster-teaser-headline: #000000;
3813
3790
  /* Button */
3814
- --color-button: var(--color-link);
3791
+ --color-button: #006783;
3815
3792
  --color-button-inverted: #ffffff;
3816
- --color-button-hollow: var(--color-link);
3817
- --color-button-secondary: var(--color-link);
3818
- --color-button-ghost: var(--color-link);
3793
+ --color-button--dark: #00646f;
3794
+ --color-button-inverted--dark: #eaf3fa;
3819
3795
  /* Media-Button */
3820
3796
  --color-media-button: #000000;
3821
3797
  /* States */
@@ -3939,14 +3915,14 @@ video {
3939
3915
  .empty\:hidden:empty {
3940
3916
  display: none;
3941
3917
  }
3942
- .hover\:border-button-primary:hover {
3943
- border-color: var(--color-button-primary);
3918
+ .hover\:border-button:hover {
3919
+ border-color: var(--color-button);
3944
3920
  }
3945
- .hover\:border-button-primary--dark:hover {
3946
- border-color: var(--color-button-primary-dark);
3921
+ .hover\:border-button--dark:hover {
3922
+ border-color: var(--color-button--dark);
3947
3923
  }
3948
- .hover\:border-button-primary--inverted-dark:hover {
3949
- border-color: var(--color-button-primary-inverted-dark);
3924
+ .hover\:border-button-inverted--dark:hover {
3925
+ border-color: var(--color-button-inverted--dark);
3950
3926
  }
3951
3927
  .hover\:bg-black:hover {
3952
3928
  --tw-bg-opacity: 1;
@@ -3956,14 +3932,15 @@ video {
3956
3932
  --tw-bg-opacity: 1;
3957
3933
  background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
3958
3934
  }
3959
- .hover\:bg-button-primary--dark:hover {
3960
- background-color: var(--color-button-primary-dark);
3935
+ .hover\:bg-button--dark:hover {
3936
+ background-color: var(--color-button--dark);
3961
3937
  }
3962
- .hover\:bg-button-primary--inverted:hover {
3963
- background-color: var(--color-button-primary-inverted);
3938
+ .hover\:bg-button-inverted:hover {
3939
+ background-color: #ffffff;
3940
+ background-color: var(--color-button-inverted);
3964
3941
  }
3965
- .hover\:bg-button-primary--inverted-dark:hover {
3966
- background-color: var(--color-button-primary-inverted-dark);
3942
+ .hover\:bg-button-inverted--dark:hover {
3943
+ background-color: var(--color-button-inverted--dark);
3967
3944
  }
3968
3945
  .hover\:bg-slate-300:hover {
3969
3946
  --tw-bg-opacity: 1;
@@ -3973,8 +3950,8 @@ video {
3973
3950
  fill: #276b9e;
3974
3951
  fill: var(--color-media-button);
3975
3952
  }
3976
- .hover\:text-button-primary:hover {
3977
- color: var(--color-button-primary);
3953
+ .hover\:text-button:hover {
3954
+ color: var(--color-button);
3978
3955
  }
3979
3956
  .hover\:text-toplineColor:hover {
3980
3957
  color: #006dc1;
@@ -4009,14 +3986,11 @@ video {
4009
3986
  --tw-scale-y: .95;
4010
3987
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
4011
3988
  }
4012
- .active\:bg-button-primary--dark:active {
4013
- background-color: var(--color-button-primary-dark);
4014
- }
4015
- .active\:bg-button-primary--inverted:active {
4016
- background-color: var(--color-button-primary-inverted);
3989
+ .active\:bg-button--dark:active {
3990
+ background-color: var(--color-button--dark);
4017
3991
  }
4018
- .active\:bg-button-primary--inverted-dark:active {
4019
- background-color: var(--color-button-primary-inverted-dark);
3992
+ .active\:bg-button-inverted--dark:active {
3993
+ background-color: var(--color-button-inverted--dark);
4020
3994
  }
4021
3995
  .active\:font-bold:active {
4022
3996
  font-weight: 700;
@@ -4025,8 +3999,8 @@ video {
4025
3999
  --tw-text-opacity: 1;
4026
4000
  color: rgba(0, 109, 193, var(--tw-text-opacity));
4027
4001
  }
4028
- .active\:text-button-primary:active {
4029
- color: var(--color-button-primary);
4002
+ .active\:text-button:active {
4003
+ color: var(--color-button);
4030
4004
  }
4031
4005
  .disabled\:hidden:disabled {
4032
4006
  display: none;
package/dist/views/components/button/utilities/button_variation_classes.hbs CHANGED
@@ -2,13 +2,13 @@
2
2
  {{inline-switch
3
3
  _variant
4
4
  '["primary","secondary","tertiary"]'
5
- '[" border text-button-primary bg-button-primary--inverted border-button-primary--inverted hover:bg-button-primary--inverted-dark active:bg-button-primary--inverted-dark"," border text-button-primary--inverted border-button-primary--inverted hover:bg-button-primary--inverted-dark hover:text-button-primary active:text-button-primary active:bg-button-primary--inverted-dark"," bg-transparent border-transparent text-button-inverted hover:bg-button-primary--inverted-dark hover:text-button-primary hover:border-button-primary--inverted-dark active:text-button-primary active:bg-button-primary--inverted-dark"," border text-button-primary bg-button-primary--inverted border-button-primary--inverted hover:bg-button-primary--inverted-dark active:bg-button-primary--inverted-dark"]'
5
+ '[" border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark "," border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark active:bg-button-inverted--dark "]'
6
6
  ~}}
7
7
  {{else}}
8
8
  {{~inline-switch
9
9
  _variant
10
10
  '["primary","secondary","tertiary"]'
11
- '[" border text-button-primary--inverted bg-button-primary border-button-primary hover:bg-button-primary--dark hover:border-button-primary--dark active:bg-button-primary--dark"," border text-button-secondary border-button-primary hover:bg-button-primary--inverted active:bg-button-primary--inverted"," border bg-transparent border-transparent text-button-primary hover:bg-button-primary--inverted hover:border-button-primary active:bg-button-primary--inverted"," border text-button-primary--inverted bg-button-primary border-button-primary hover:bg-button-primary--dark hover:border-button-primary--dark active:bg-button-primary--dark"]'
11
+ '[" border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-primary--inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-primary--inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
12
12
  ~}}
13
13
  {{/if}}
14
14
  {{~#unless _disableButtonPress}} active:scale-95{{/unless}}
package/dist/views/components/event/event_ticket_button.hbs CHANGED
@@ -10,12 +10,12 @@
10
10
  <p class="text-base font-copy mt-2">{{loca "ticket_modal_text"}}</p>
11
11
 
12
12
  <div class="flex flex-wrap mt-4">
13
- {{#> components/button/link_button _size="lg" _css="js-ticket-ok-button js-modal-close mr-4 mt-4"}}
14
- {{>components/button/components/button_label _label="Zum Ticketshop" _css=""}}
15
- {{/components/button/link_button}}
16
- {{#> components/button/button _size="lg" _variant="tertiary" _value="cancel" _css="mt-4"}}
13
+ {{#> components/button/button _size="lg" _variant="tertiary" _value="cancel" _css="mr-4 mt-4"}}
17
14
  {{>components/button/components/button_label _label="Abbrechen" _css=""}}
18
15
  {{/components/button/button}}
16
+ {{#> components/button/link_button _size="lg" _css="js-ticket-ok-button js-modal-close mt-4"}}
17
+ {{>components/button/components/button_label _label="Zum Ticketshop" _css=""}}
18
+ {{/components/button/link_button}}
19
19
  </div>
20
20
  {{/components/modal/modal}}
21
21
  <noscript>
package/dist/views/components/mediaplayer/mediaplayer_button.hbs CHANGED
@@ -1,8 +1,9 @@
1
1
  {{#with this}}
2
2
  {{#> components/button/button _variant="tertiary" _type="button" _css=_css _alpineClick="avStart = !avStart; $dispatch('player_start')"}}
3
- {{#> components/base/image/icon _addClass=(appendToDefault (if ../../_isLivestream "text-orange-spicyCarrot group-hover:fill-orange-spicyCarrot" "text-media-button group-hover:fill-media-button") "w-10 h-10 fill-white group-hover:text-white inline") _icon=../../_icon}}
3
+ {{#with this}}
4
+ {{> components/base/image/icon _addClass=(appendToDefault (if ../../_isLivestream "text-orange-spicyCarrot group-hover:fill-orange-spicyCarrot" "text-media-button group-hover:fill-media-button") "w-10 h-10 fill-white group-hover:text-white inline") _icon=../../_icon}}
4
5
  {{#*inline "css"}}{{/inline}}
5
- {{/components/base/image/icon}}
6
+ {{/with}}
6
7
  {{>components/button/components/button_label _css="sr-only" _label=../../_label}}
7
8
  {{/components/button/button}}
8
9
  {{#*inline "css"}}js-mediaplayer__button cy-mediaplayer-trigger group rounded-full {{> components/button/utilities/button_on_image_classes _teaserSize=../../_teaserSize _teaserType=../../_teaserType _isMobile1to1=../../_isMobile1to1}}{{/inline}}
package/dist/views/components/modal/modal.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "\\" {{this.link.cmsDocument.title}} \\" Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
1
+ <div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "\" {{this.link.cmsDocument.title}} \" Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
2
2
  <dialog class='js-modal p-0 backdrop:bg-gray-scorpion/90 shadow-md {{defaultIfEmpty _css "sm:max-w-xl"}}'>
3
3
  <form method="dialog" class="js-dialog-content p-4">
4
4
  {{> @partial-block }}
package/dist/views/components/teaser/components/teaser_image.hbs CHANGED
@@ -3,7 +3,7 @@
3
3
  {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
4
4
  {{/with~}}
5
5
  {{/unless}}
6
- {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg="" ~}}
6
+ {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg=(if this.isTicker 'rounded-tl-hr') ~}}
7
7
  {{#if this.isProgram}}
8
8
  {{#if this.showMediatheksLink}}
9
9
  {{#with this}}
package/dist/views/components/teaser/components/teaser_ticker_body.hbs ADDED
@@ -0,0 +1,40 @@
1
+ <div class="{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}"
2
+ {{~#if this.isMobile1to1}}:class="{'basis-full w-full md:pr-0 pr-10':avStart,'basis-3/5 w-3/5':!avStart}"{{/if}}>
3
+
4
+
5
+ {{#> components/teaser/components/teaser_header _css=(if this.isMobile1to1 "" "px-5 sm:px-0 mx-4 mb-5")}}
6
+ {{#decorator 'components/base/link' _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }}
7
+ {{#with this.label}}
8
+ {{#> components/label/label_group}}
9
+ {{> components/label/label _type=this.type _text=(loca this.loca)}}
10
+ {{> components/label/label_byline _css="ml-2"}}
11
+ {{/components/label/label_group}}
12
+ {{/with~}}
13
+ {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto"}}
14
+ {{#if this.topline}}
15
+ test
16
+ {{> components/teaser/components/teaser_topline _text=this.topline}}
17
+ {{/if}}
18
+ {{> components/teaser/components/teaser_title _css="!text-white" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
19
+ {{#if this.extendedTitle}}
20
+ {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
21
+ {{/if}}
22
+ {{/components/teaser/components/teaser_headline}}
23
+ {{/decorator}}
24
+ {{/components/teaser/components/teaser_header}}
25
+
26
+ <div class="flex flex-wrap justify-between mx-4 my-5 text-base text-white justify-items-center">
27
+ {{#if this.hasByline}}
28
+ <p class="self-center text-xs text-white font-headingSerif empty:hidden overflow-anywhere hyphens-auto">
29
+ {{~#if this.profiles~}}
30
+ <span>{{this.profiles}}</span>
31
+ {{~/if~}}
32
+ </p>
33
+ {{/if}}
34
+ <a class="underline ds-link" href="{{this.url}}">Zum Ticker</a>
35
+ </div>
36
+
37
+
38
+
39
+
40
+ </div>
package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs CHANGED
@@ -10,7 +10,7 @@
10
10
  {{> components/button/components/button_label _label=this.title}}
11
11
  {{/components/button/button }}
12
12
  {{#*inline "html_properties"~}}
13
- :class='{"{{> components/button/utilities/button_variation_classes _variant='primary' _onBackground=false}} bg-button-primary--dark":tab ==="{{this.title}}",
13
+ :class='{"{{> components/button/utilities/button_variation_classes _variant='primary' _onBackground=false}} bg-button--dark ":tab ==="{{this.title}}",
14
14
  "{{~> components/button/utilities/button_variation_classes _variant='secondary' _onBackground=false~}}":tab !="{{this.title}}"}'
15
15
  x-on:click.prevent="tab = '{{this.title}}'; " role="tab" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "{{this.title}}:TabboxClick"}]}'
16
16
  {{~/inline}}
package/dist/views/components/teaser/ticker/teaser_ticker.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <article class="items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4
1
+ <article class="bg-blue-congress rounded-tl-hr rounded-br-hr items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4
2
2
  {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
3
3
  {{~#if this.isMobile1to1}} js-is1to1 px-5 sm:px-0 md:flex-col{{else}} flex-col{{/if~}}
4
4
  "
@@ -18,12 +18,12 @@
18
18
  <div class="flex flex-col items-center justify-center p-4 border-r border-gray-400 border-dashed basis-1/12">
19
19
  {{> components/event/instant_dates}}
20
20
  </div>
21
- {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-11/12 py-4 sm:px-4 basis-3/5 w-3/5 md:basis-full md:w-full' 'basis-11/12 py-4 sm:px-4')}}
21
+ {{> components/teaser/components/teaser_ticker_body _outerCssClasses=(if this.isMobile1to1 'basis-11/12 py-4 sm:px-4 basis-3/5 w-3/5 md:basis-full md:w-full' 'basis-11/12 py-4 sm:px-4')}}
22
22
  {{/decorator}}
23
23
  {{else}}
24
- {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 w-3/5 md:basis-full md:w-full')}}
24
+ {{> components/teaser/components/teaser_ticker_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 w-3/5 md:basis-full md:w-full')}}
25
25
  {{/if}}
26
26
  {{else}}
27
- {{> components/teaser/components/teaser_body _outerCssClasses="basis-full"}}
27
+ {{> components/teaser/components/teaser_ticker_body _outerCssClasses="basis-full"}}
28
28
  {{/if}}
29
29
  </article>
package/gulpfile.js CHANGED
@@ -318,6 +318,7 @@ function watchFiles() {
318
318
  async function convertPartialsToJs() {
319
319
  src(`${options.paths.assets.views}/**/*.hbs`)
320
320
  .pipe(replace(/(_[0-9a-zA-Z_]+)-adjust_context/g, '$1'))
321
+ .pipe(replace(/(\\")/g, '\\$1')) // replace occurences of \" by \\" to make sure that " are correctly rendered in json strings
321
322
  .pipe(htmlToJs({ concat: 'handlebar-partials.js' }))
322
323
  .pipe(dest(options.paths.dist.handlebarPartials))
323
324
  }
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "license": "MIT",
7
7
  "main": "dist/index.js",
8
8
  "repository": "https://github.com/szuelch/hr-design-system-handlebars",
9
- "version": "1.12.0",
9
+ "version": "1.12.2",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
package/src/assets/css/custom-components.css CHANGED
@@ -141,7 +141,7 @@
141
141
 
142
142
  .ds-teaser-focus:focus + .ds-cta > * {
143
143
  @apply bg-button-inverted;
144
- @apply text-button-hollow;
144
+ @apply text-button;
145
145
  @apply border-none;
146
146
  }
147
147
 
@@ -166,7 +166,7 @@
166
166
  @apply text-base;
167
167
  @apply font-copy;
168
168
  @apply list-none;
169
- @apply border-button;
169
+ @apply border-button--dark;
170
170
  @apply fill-content-nav;
171
171
  @apply text-content-nav;
172
172
  @apply bg-white;
package/src/assets/fixtures/teaser/teaser_ticker.inc.json CHANGED
@@ -19,7 +19,7 @@
19
19
  "date": "17.04.22",
20
20
  "dateSeparatorTime": "17.04.22, 19:30"
21
21
  },
22
- "hasByline": false,
22
+ "hasByline": true,
23
23
  "teaserInfo": {
24
24
  "showTeaserInfo": false,
25
25
  "showTeaserInfoSection": true,
@@ -84,7 +84,7 @@
84
84
  "trackingForArdMediatheksLink": false,
85
85
  "showMediatheksLink": false,
86
86
  "showAirdate": false,
87
- "showProfileInfoAsByline": false,
87
+ "showProfileInfoAsByline": true,
88
88
  "obsolet_brandOfTeaser": "hessenschau",
89
89
  "documentSection": "Gesellschaft",
90
90
  "headlineTag": "h1",
@@ -93,7 +93,7 @@
93
93
  "shorttext": "Hier bekommen Sie immer die neuesten Nachrichten über Eintracht Frankfurt.",
94
94
  "hideBylineAndShorttext": false,
95
95
  "sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
96
- "profiles": "",
96
+ "profiles": "Von Karsten Hufer",
97
97
  "teaserLead": {
98
98
  "avDocument": "",
99
99
  "image": ""
package/src/assets/fixtures/teaser/ticker_teaser_standard_100.json CHANGED
@@ -10,7 +10,11 @@
10
10
  "@->contentpath": "logicItem.includeModel.realTeaserSize",
11
11
  "@->value": "100"
12
12
  },
13
- {
13
+ {
14
+ "@->contentpath": "logicItem.includeModel.shorttext",
15
+ "@->value": ""
16
+ },
17
+ {
14
18
  "@->contentpath": "logicItem.includeModel.topline",
15
19
  "@->value": ""
16
20
  },
package/src/assets/tailwind.css CHANGED
@@ -58,11 +58,8 @@
58
58
  --color-cluster-teaser-link: theme('colors.blue.science');
59
59
  --color-cluster-teaser-headline: theme('colors.blue.congress');
60
60
  /* Button */
61
- --color-button: var(--color-primary-ds);
62
61
  --color-button-inverted: theme('colors.white.DEFAULT');
63
62
  --color-button-hollow: theme('colors.blue.science');
64
- --color-button-secondary: theme('colors.blue.science');
65
- --color-button-ghost: theme('colors.blue.science');
66
63
  /* Media-Button */
67
64
  --color-media-button: theme('colors.blue.jellyBean');
68
65
  /* States */
@@ -128,15 +125,10 @@
128
125
  --color-cluster-teaser-link: theme('colors.blue.science');
129
126
  --color-cluster-teaser-headline: theme('colors.blue.congress');
130
127
  /* Button */
131
- --color-button: var(--color-primary-ds);
132
- --color-button-primary: theme('colors.blue.science');
133
- --color-button-primary-dark: theme('colors.blue.congress');
134
- --color-button-primary-inverted: theme('colors.white.DEFAULT');
135
- --color-button-primary-inverted-dark: theme('colors.blue.accented');
128
+ --color-button: theme('colors.blue.science');
129
+ --color-button--dark: theme('colors.blue.congress');
136
130
  --color-button-inverted: theme('colors.white.DEFAULT');
137
- --color-button-hollow: theme('colors.blue.science');
138
- --color-button-secondary: theme('colors.blue.science');
139
- --color-button-ghost: theme('colors.blue.science');
131
+ --color-button-inverted--dark: theme('colors.blue.accented');
140
132
  /* Media-Button */
141
133
  --color-media-button: theme('colors.blue.science');
142
134
  /* States */
@@ -195,11 +187,10 @@
195
187
  --color-cluster-teaser-link: theme('colors.purple.jazzberry');
196
188
  --color-cluster-teaser-headline: theme('colors.purple.pompadour');
197
189
  /* Button */
198
- --color-button: var(--color-primary-ds);
190
+ --color-button: theme('colors.purple.jazzberry');
191
+ --color-button--dark: theme('colors.purple.pompadour');
199
192
  --color-button-inverted: theme('colors.white.DEFAULT');
200
- --color-button-hollow: theme('colors.purple.jazzberry');
201
- --color-button-secondary: theme('colors.purple.jazzberry');
202
- --color-button-ghost: theme('colors.purple.jazzberry');
193
+ --color-button-inverted--dark: theme('colors.blue.accented');
203
194
  /* Media-Button */
204
195
  --color-media-button: var(--color-primary-ds);
205
196
  /* States */
@@ -253,11 +244,10 @@
253
244
  --color-cluster-teaser-link: var(--color-primary-ds);
254
245
  --color-cluster-teaser-headline: theme('colors.blue.astronautBlue');
255
246
  /* Button */
256
- --color-button: var(--color-primary-ds);
247
+ --color-button: theme('colors.blue.jellyBean');
248
+ --color-button--dark: theme('colors.blue.astronautBlue');
257
249
  --color-button-inverted: theme('colors.white.DEFAULT');
258
- --color-button-hollow: theme('colors.blue.jellyBean');
259
- --color-button-secondary: theme('colors.blue.jellyBean');
260
- --color-button-ghost: theme('colors.blue.jellyBean');
250
+ --color-button-inverted--dark: theme('colors.blue.accented');
261
251
  /* Media-Button */
262
252
  --color-media-button: var(--color-primary-ds);
263
253
  /* States */
@@ -314,10 +304,9 @@
314
304
  --color-cluster-teaser-headline: theme('colors.blue.congress');
315
305
  /* Button */
316
306
  --color-button: theme('colors.blue.deepCerulean');
307
+ --color-button--dark: theme('colors.blue.congress');
317
308
  --color-button-inverted: theme('colors.white.DEFAULT');
318
- --color-button-hollow: theme('colors.blue.deepCerulean');
319
- --color-button-secondary: theme('colors.blue.deepCerulean');
320
- --color-button-ghost: theme('colors.blue.deepCerulean');
309
+ --color-button-inverted--dark: theme('colors.blue.accented');
321
310
  /* Media-Button */
322
311
  --color-media-button: var(--color-primary-ds);
323
312
  /* States */
@@ -373,11 +362,10 @@
373
362
  --color-cluster-teaser-link: var(--color-primary-ds);
374
363
  --color-cluster-teaser-headline: theme('colors.blue.congress');
375
364
  /* Button */
376
- --color-button: var(--color-primary-ds);
365
+ --color-button: theme('colors.blue.deepCerulean');
366
+ --color-button--dark: theme('colors.blue.congress');
377
367
  --color-button-inverted: theme('colors.white.DEFAULT');
378
- --color-button-hollow: var(--color-primary-ds);
379
- --color-button-secondary: var(--color-primary-ds);
380
- --color-button-ghost: var(--color-primary-ds);
368
+ --color-button-inverted--dark: theme('colors.blue.accented');
381
369
  /* Media-Button */
382
370
  --color-media-button: var(--color-primary-ds);
383
371
  /* States */
@@ -432,10 +420,9 @@
432
420
  --color-cluster-teaser-headline: var(--color-primary-ds);
433
421
  /* Button */
434
422
  --color-button: theme('colors.red.wellRead');
423
+ --color-button--dark: theme('colors.red.burntUmber');
435
424
  --color-button-inverted: theme('colors.white.DEFAULT');
436
- --color-button-hollow: theme('colors.red.wellRead');
437
- --color-button-secondary: theme('colors.red.wellRead');
438
- --color-button-ghost: theme('colors.red.wellRead');
425
+ --color-button-inverted--dark: theme('colors.blue.accented');
439
426
  /* Media-Button */
440
427
  --color-media-button: theme('colors.red.wellRead');
441
428
  /* States */
@@ -476,32 +463,31 @@
476
463
  /* Eventkalender */
477
464
  --color-eventcalendar-primary: var(--color-primary-ds);
478
465
  /* Dachzeile */
479
- --color-topline: theme('colors.blue.teal');
466
+ --color-topline: theme('colors.green.teal');
480
467
  /* Subline */
481
468
  --color-subline: var(--color-topline);
482
469
  /* Link */
483
- --color-link: theme('colors.blue.teal');
470
+ --color-link: theme('colors.green.teal');
484
471
  /* Stage */
485
472
  --color-stage-text-box: 67 61 55;
486
473
  --color-stage-primary: theme('colors.blue.blueStone');
487
474
  --color-stage-link: theme('colors.white.DEFAULT');
488
475
  /* Cluster-Teaser */
489
- --color-cluster-teaser-link: theme('colors.blue.teal');
476
+ --color-cluster-teaser-link: theme('colors.green.teal');
490
477
  --color-cluster-teaser-headline: var(--color-primary-ds);
491
478
  /* Button */
492
- --color-button: theme('colors.blue.teal');
479
+ --color-button: theme('colors.green.teal');
480
+ --color-button--dark: theme('colors.blue.blueStone');
493
481
  --color-button-inverted: theme('colors.white.DEFAULT');
494
- --color-button-hollow: theme('colors.blue.teal');
495
- --color-button-secondary: theme('colors.blue.teal');
496
- --color-button-ghost: theme('colors.blue.teal');
482
+ --color-button-inverted--dark: theme('colors.blue.accented');
497
483
  /* Media-Button */
498
- --color-media-button: theme('colors.blue.teal');
484
+ --color-media-button: theme('colors.green.teal');
499
485
  /* States */
500
- --color-focus-state: theme('colors.blue.teal');
486
+ --color-focus-state: theme('colors.green.teal');
501
487
  /* Content-Nav */
502
- --color-content-nav: theme('colors.blue.teal');
488
+ --color-content-nav: theme('colors.green.teal');
503
489
  /* Podcast-Player */
504
- --color-podcast: theme('colors.blue.teal');
490
+ --color-podcast: theme('colors.green.teal');
505
491
  --color-podcast-text: var(--color-link);
506
492
  --color-podcast-highlight: theme('colors.black.DEFAULT');
507
493
  /* Font */
@@ -549,11 +535,10 @@
549
535
  --color-cluster-teaser-link: var(--color-primary-ds);
550
536
  --color-cluster-teaser-headline: theme('colors.blue.astronautBlue');
551
537
  /* Button */
552
- --color-button: var(--color-primary-ds);
538
+ --color-button: theme('colors.blue.deepCerulean');
539
+ --color-button--dark: theme('colors.blue.astronautBlue');
553
540
  --color-button-inverted: theme('colors.white.DEFAULT');
554
- --color-button-hollow: var(--color-primary-ds);
555
- --color-button-secondary: var(--color-primary-ds);
556
- --color-button-ghost: var(--color-primary-ds);
541
+ --color-button-inverted--dark: theme('colors.blue.accented');
557
542
  /* Media-Button */
558
543
  --color-media-button: var(--color-primary-ds);
559
544
  /* States */
@@ -610,10 +595,9 @@
610
595
  --color-cluster-teaser-headline: theme('colors.black.DEFAULT');
611
596
  /* Button */
612
597
  --color-button: theme('colors.yellow.olive');
598
+ --color-button--dark: theme('colors.green.goBen');
613
599
  --color-button-inverted: theme('colors.white.DEFAULT');
614
- --color-button-hollow: theme('colors.yellow.olive');
615
- --color-button-secondary: theme('colors.yellow.olive');
616
- --color-button-ghost: theme('colors.yellow.olive');
600
+ --color-button-inverted--dark: theme('colors.blue.accented');
617
601
  /* Media-Button */
618
602
  --color-media-button: theme('colors.yellow.olive');
619
603
  /* States */
@@ -669,10 +653,9 @@
669
653
  --color-cluster-teaser-headline: theme('colors.black.DEFAULT');
670
654
  /* Button */
671
655
  --color-button: theme('colors.red.paprika');
656
+ --color-button--dark: theme('colors.purple.pompadour');
672
657
  --color-button-inverted: theme('colors.white.DEFAULT');
673
- --color-button-hollow: theme('colors.red.paprika');
674
- --color-button-secondary: theme('colors.red.paprika');
675
- --color-button-ghost: theme('colors.red.paprika');
658
+ --color-button-inverted--dark: theme('colors.blue.accented');
676
659
  /* Media-Button */
677
660
  --color-media-button: theme('colors.orange.burntOrange');
678
661
  /* States */
@@ -731,9 +714,8 @@
731
714
  /* Button */
732
715
  --color-button: theme('colors.red.scarlett');
733
716
  --color-button-inverted: theme('colors.white.DEFAULT');
734
- --color-button-hollow: theme('colors.red.scarlett');
735
- --color-button-secondary: theme('colors.red.scarlett');
736
- --color-button-ghost: theme('colors.red.scarlett');
717
+ --color-button--dark: theme('colors.red.burntUmber');
718
+ --color-button-inverted--dark: theme('colors.blue.accented');
737
719
  /* Media-Button */
738
720
  --color-media-button: var(--color-primary-ds);
739
721
  /* States */
@@ -792,9 +774,8 @@
792
774
  /* Button */
793
775
  --color-button: theme('colors.green.casal');
794
776
  --color-button-inverted: theme('colors.white.DEFAULT');
795
- --color-button-hollow: theme('colors.green.casal');
796
- --color-button-secondary: theme('colors.green.casal');
797
- --color-button-ghost: theme('colors.green.casal');
777
+ --color-button--dark: theme('colors.green.eden');
778
+ --color-button-inverted--dark: theme('colors.blue.accented');
798
779
  /* Media-Button */
799
780
  --color-media-button: theme('colors.green.eden');
800
781
  /* States */
@@ -851,11 +832,10 @@
851
832
  --color-cluster-teaser-link: var(--color-link);
852
833
  --color-cluster-teaser-headline: theme('colors.black.DEFAULT');
853
834
  /* Button */
854
- --color-button: var(--color-link);
835
+ --color-button: theme('colors.blue.sea');
855
836
  --color-button-inverted: theme('colors.white.DEFAULT');
856
- --color-button-hollow: var(--color-link);
857
- --color-button-secondary: var(--color-link);
858
- --color-button-ghost: var(--color-link);
837
+ --color-button--dark: theme('colors.blue.blueStone');
838
+ --color-button-inverted--dark: theme('colors.blue.accented');
859
839
  /* Media-Button */
860
840
  --color-media-button: theme('colors.black.DEFAULT');
861
841
  /* States */
package/src/stories/views/components/button/utilities/button_variation_classes.hbs CHANGED
@@ -2,13 +2,13 @@
2
2
  {{inline-switch
3
3
  _variant
4
4
  '["primary","secondary","tertiary"]'
5
- '[" border text-button-primary bg-button-primary--inverted border-button-primary--inverted hover:bg-button-primary--inverted-dark active:bg-button-primary--inverted-dark"," border text-button-primary--inverted border-button-primary--inverted hover:bg-button-primary--inverted-dark hover:text-button-primary active:text-button-primary active:bg-button-primary--inverted-dark"," bg-transparent border-transparent text-button-inverted hover:bg-button-primary--inverted-dark hover:text-button-primary hover:border-button-primary--inverted-dark active:text-button-primary active:bg-button-primary--inverted-dark"," border text-button-primary bg-button-primary--inverted border-button-primary--inverted hover:bg-button-primary--inverted-dark active:bg-button-primary--inverted-dark"]'
5
+ '[" border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark "," border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark active:bg-button-inverted--dark "]'
6
6
  ~}}
7
7
  {{else}}
8
8
  {{~inline-switch
9
9
  _variant
10
10
  '["primary","secondary","tertiary"]'
11
- '[" border text-button-primary--inverted bg-button-primary border-button-primary hover:bg-button-primary--dark hover:border-button-primary--dark active:bg-button-primary--dark"," border text-button-secondary border-button-primary hover:bg-button-primary--inverted active:bg-button-primary--inverted"," border bg-transparent border-transparent text-button-primary hover:bg-button-primary--inverted hover:border-button-primary active:bg-button-primary--inverted"," border text-button-primary--inverted bg-button-primary border-button-primary hover:bg-button-primary--dark hover:border-button-primary--dark active:bg-button-primary--dark"]'
11
+ '[" border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-primary--inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-primary--inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
12
12
  ~}}
13
13
  {{/if}}
14
14
  {{~#unless _disableButtonPress}} active:scale-95{{/unless}}
package/src/stories/views/components/event/event_ticket_button.hbs CHANGED
@@ -10,12 +10,12 @@
10
10
  <p class="text-base font-copy mt-2">{{loca "ticket_modal_text"}}</p>
11
11
 
12
12
  <div class="flex flex-wrap mt-4">
13
- {{#> components/button/link_button _size="lg" _css="js-ticket-ok-button js-modal-close mr-4 mt-4"}}
14
- {{>components/button/components/button_label _label="Zum Ticketshop" _css=""}}
15
- {{/components/button/link_button}}
16
- {{#> components/button/button _size="lg" _variant="tertiary" _value="cancel" _css="mt-4"}}
13
+ {{#> components/button/button _size="lg" _variant="tertiary" _value="cancel" _css="mr-4 mt-4"}}
17
14
  {{>components/button/components/button_label _label="Abbrechen" _css=""}}
18
15
  {{/components/button/button}}
16
+ {{#> components/button/link_button _size="lg" _css="js-ticket-ok-button js-modal-close mt-4"}}
17
+ {{>components/button/components/button_label _label="Zum Ticketshop" _css=""}}
18
+ {{/components/button/link_button}}
19
19
  </div>
20
20
  {{/components/modal/modal}}
21
21
  <noscript>
package/src/stories/views/components/mediaplayer/mediaplayer_button.hbs CHANGED
@@ -1,8 +1,9 @@
1
1
  {{#with this}}
2
2
  {{#> components/button/button _variant="tertiary" _type="button" _css=_css _alpineClick="avStart = !avStart; $dispatch('player_start')"}}
3
- {{#> components/base/image/icon _addClass=(appendToDefault (if _isLivestream-adjust_context "text-orange-spicyCarrot group-hover:fill-orange-spicyCarrot" "text-media-button group-hover:fill-media-button") "w-10 h-10 fill-white group-hover:text-white inline") _icon=_icon-adjust_context}}
3
+ {{#with this}}
4
+ {{> components/base/image/icon _addClass=(appendToDefault (if _isLivestream-adjust_context "text-orange-spicyCarrot group-hover:fill-orange-spicyCarrot" "text-media-button group-hover:fill-media-button") "w-10 h-10 fill-white group-hover:text-white inline") _icon=_icon-adjust_context}}
4
5
  {{#*inline "css"}}{{/inline}}
5
- {{/components/base/image/icon}}
6
+ {{/with}}
6
7
  {{>components/button/components/button_label _css="sr-only" _label=_label-adjust_context}}
7
8
  {{/components/button/button}}
8
9
  {{#*inline "css"}}js-mediaplayer__button cy-mediaplayer-trigger group rounded-full {{> components/button/utilities/button_on_image_classes _teaserSize=_teaserSize-adjust_context _teaserType=_teaserType-adjust_context _isMobile1to1=_isMobile1to1-adjust_context}}{{/inline}}
package/src/stories/views/components/modal/modal.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "\\" {{this.link.cmsDocument.title}} \\" Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
1
+ <div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "\" {{this.link.cmsDocument.title}} \" Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
2
2
  <dialog class='js-modal p-0 backdrop:bg-gray-scorpion/90 shadow-md {{defaultIfEmpty _css "sm:max-w-xl"}}'>
3
3
  <form method="dialog" class="js-dialog-content p-4">
4
4
  {{> @partial-block }}
package/src/stories/views/components/teaser/components/teaser_image.hbs CHANGED
@@ -3,7 +3,7 @@
3
3
  {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
4
4
  {{/with~}}
5
5
  {{/unless}}
6
- {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg="" ~}}
6
+ {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg=(if this.isTicker 'rounded-tl-hr') ~}}
7
7
  {{#if this.isProgram}}
8
8
  {{#if this.showMediatheksLink}}
9
9
  {{#with this}}
package/src/stories/views/components/teaser/components/teaser_ticker_body.hbs ADDED
@@ -0,0 +1,40 @@
1
+ <div class="{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}"
2
+ {{~#if this.isMobile1to1}}:class="{'basis-full w-full md:pr-0 pr-10':avStart,'basis-3/5 w-3/5':!avStart}"{{/if}}>
3
+
4
+
5
+ {{#> components/teaser/components/teaser_header _css=(if this.isMobile1to1 "" "px-5 sm:px-0 mx-4 mb-5")}}
6
+ {{#decorator 'components/base/link' _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }}
7
+ {{#with this.label}}
8
+ {{#> components/label/label_group}}
9
+ {{> components/label/label _type=this.type _text=(loca this.loca)}}
10
+ {{> components/label/label_byline _css="ml-2"}}
11
+ {{/components/label/label_group}}
12
+ {{/with~}}
13
+ {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto"}}
14
+ {{#if this.topline}}
15
+ test
16
+ {{> components/teaser/components/teaser_topline _text=this.topline}}
17
+ {{/if}}
18
+ {{> components/teaser/components/teaser_title _css="!text-white" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
19
+ {{#if this.extendedTitle}}
20
+ {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
21
+ {{/if}}
22
+ {{/components/teaser/components/teaser_headline}}
23
+ {{/decorator}}
24
+ {{/components/teaser/components/teaser_header}}
25
+
26
+ <div class="flex flex-wrap justify-between mx-4 my-5 text-base text-white justify-items-center">
27
+ {{#if this.hasByline}}
28
+ <p class="self-center text-xs text-white font-headingSerif empty:hidden overflow-anywhere hyphens-auto">
29
+ {{~#if this.profiles~}}
30
+ <span>{{this.profiles}}</span>
31
+ {{~/if~}}
32
+ </p>
33
+ {{/if}}
34
+ <a class="underline ds-link" href="{{this.url}}">Zum Ticker</a>
35
+ </div>
36
+
37
+
38
+
39
+
40
+ </div>
package/src/stories/views/components/teaser/fixtures/ticker_teaser_standard_100.json CHANGED
@@ -1 +1 @@
1
- {"isSsi":true,"logicItem":{"includePath":"components/teaser/ticker/teaser_ticker","includeModel":{"byline":"Byline","title":"Eintracht: +++ Eintracht-Halbfinale terminiert +++ Frankfurter Gala in Barcelona jährt sich +++ Berichte: Aouar in Gesprächen mit AS Rom +++","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"100","realTeaserSize":"100","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":false,"teaserInfo":{"showTeaserInfo":false,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/sportschau-image-5708_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/sportschau-image-5708_v-16to9__small.jpg 320w, images/sportschau-image-5708_v-16to9__medium.jpg 480w, images/sportschau-image-5708_v-16to9__medium__extended.jpg 640w, images/sportschau-image-5708_v-16to9.jpg 960w, images/sportschau-image-5708_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":true,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Hier bekommen Sie immer die neuesten Nachrichten über Eintracht Frankfurt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Frankfurt"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"ticker","loca":"label_ticker","byline":{"bylineSsi":"BylineText aus ssi","bylineText":"BylineText"}}}}}
1
+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/ticker/teaser_ticker","includeModel":{"byline":"Byline","title":"Eintracht: +++ Eintracht-Halbfinale terminiert +++ Frankfurter Gala in Barcelona jährt sich +++ Berichte: Aouar in Gesprächen mit AS Rom +++","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"100","realTeaserSize":"100","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":false,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/sportschau-image-5708_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/sportschau-image-5708_v-16to9__small.jpg 320w, images/sportschau-image-5708_v-16to9__medium.jpg 480w, images/sportschau-image-5708_v-16to9__medium__extended.jpg 640w, images/sportschau-image-5708_v-16to9.jpg 960w, images/sportschau-image-5708_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":true,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":true,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Karsten Hufer","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Frankfurt"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"ticker","loca":"label_ticker","byline":{"bylineSsi":"BylineText aus ssi","bylineText":"BylineText"}}}}}
package/src/stories/views/components/teaser/tabbox/teaser_tabbox.hbs CHANGED
@@ -10,7 +10,7 @@
10
10
  {{> components/button/components/button_label _label=this.title}}
11
11
  {{/components/button/button }}
12
12
  {{#*inline "html_properties"~}}
13
- :class='{"{{> components/button/utilities/button_variation_classes _variant='primary' _onBackground=false}} bg-button-primary--dark":tab ==="{{this.title}}",
13
+ :class='{"{{> components/button/utilities/button_variation_classes _variant='primary' _onBackground=false}} bg-button--dark ":tab ==="{{this.title}}",
14
14
  "{{~> components/button/utilities/button_variation_classes _variant='secondary' _onBackground=false~}}":tab !="{{this.title}}"}'
15
15
  x-on:click.prevent="tab = '{{this.title}}'; " role="tab" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "{{this.title}}:TabboxClick"}]}'
16
16
  {{~/inline}}
package/src/stories/views/components/teaser/ticker/teaser_ticker.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <article class="items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4
1
+ <article class="bg-blue-congress rounded-tl-hr rounded-br-hr items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4
2
2
  {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
3
3
  {{~#if this.isMobile1to1}} js-is1to1 px-5 sm:px-0 md:flex-col{{else}} flex-col{{/if~}}
4
4
  "
@@ -18,12 +18,12 @@
18
18
  <div class="flex flex-col items-center justify-center p-4 border-r border-gray-400 border-dashed basis-1/12">
19
19
  {{> components/event/instant_dates}}
20
20
  </div>
21
- {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-11/12 py-4 sm:px-4 basis-3/5 w-3/5 md:basis-full md:w-full' 'basis-11/12 py-4 sm:px-4')}}
21
+ {{> components/teaser/components/teaser_ticker_body _outerCssClasses=(if this.isMobile1to1 'basis-11/12 py-4 sm:px-4 basis-3/5 w-3/5 md:basis-full md:w-full' 'basis-11/12 py-4 sm:px-4')}}
22
22
  {{/decorator}}
23
23
  {{else}}
24
- {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 w-3/5 md:basis-full md:w-full')}}
24
+ {{> components/teaser/components/teaser_ticker_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 w-3/5 md:basis-full md:w-full')}}
25
25
  {{/if}}
26
26
  {{else}}
27
- {{> components/teaser/components/teaser_body _outerCssClasses="basis-full"}}
27
+ {{> components/teaser/components/teaser_ticker_body _outerCssClasses="basis-full"}}
28
28
  {{/if}}
29
29
  </article>
package/src/stories/views/components/teaser/ticker/teaser_ticker.stories.js CHANGED
@@ -29,6 +29,6 @@ export default {
29
29
 
30
30
  export const TickerTeaser100 = {
31
31
  render: Template.bind({}),
32
- name: 'Ticker Teaser 100',
32
+ name: 'Standard 100',
33
33
  args: tickerTeaser100Standard.logicItem.includeModel,
34
34
  }
package/tailwind.config.js CHANGED
@@ -237,7 +237,6 @@ module.exports = {
237
237
  science: '#006dc1',
238
238
  sea: '#006783',
239
239
  tarawera: '#0a3355',
240
- teal: '#007A7C',
241
240
  turquoiseCerulian: '#007fa0',
242
241
  },
243
242
  'black': {
@@ -292,7 +291,7 @@ module.exports = {
292
291
  goBen: '#6e6748',
293
292
  pacifica: '#6d761d',
294
293
  pineGreen: '#007179',
295
- teal: '#00727A',
294
+ teal: '#007A7C',
296
295
  tropicalRainForest: '#017e5c',
297
296
  },
298
297
  'purple': {
@@ -338,20 +337,14 @@ module.exports = {
338
337
  'clusterTeaserLink': 'var(--color-cluster-teaser-link,#000)',
339
338
  'clusterTeaserHeadline': 'var(--color-cluster-teaser-headline,#000)',
340
339
  'button': 'var(--color-button)',
341
- 'button-primary': 'var(--color-button-primary)',
342
- 'button-primary--dark': 'var(--color-button-primary-dark)',
343
- 'button-primary--inverted': 'var(--color-button-primary-inverted)',
344
- 'button-primary--inverted-dark': 'var(--color-button-primary-inverted-dark)',
345
- 'button-hollow': 'var(--color-button-hollow)',
346
- 'button-secondary': 'var(--color-button-secondary)',
347
- 'button-ghost': 'var(--color-button-ghost)',
340
+ 'button--dark': 'var(--color-button--dark)',
348
341
  'button-inverted': 'var(--color-button-inverted)',
342
+ 'button-inverted--dark': 'var(--color-button-inverted--dark)',
349
343
  'media-button': 'var(--color-media-button)',
350
344
  'focus-state': 'var(--color-focus-state)',
351
345
  'content-nav': 'var(--color-content-nav)',
352
346
  'podcast': 'var(--color-podcast)',
353
347
  'podcast-text': 'var(--color-podcast-text)',
354
- 'podcast-highlight': 'var(--color-podcast-highlight)',
355
348
  'event-status': 'var(--color-event-status)',
356
349
  'event-calendar-primary': 'var(--color-eventcalendar-primary)',
357
350
  'event-calendar-secondary': 'var(--color-eventcalendar-secondary)',