hr-design-system-handlebars 1.12.1 → 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 (17) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/assets/index.css +74 -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/tabbox/teaser_tabbox.hbs +1 -1
  8. package/gulpfile.js +1 -0
  9. package/package.json +1 -1
  10. package/src/assets/css/custom-components.css +2 -2
  11. package/src/assets/tailwind.css +40 -60
  12. package/src/stories/views/components/button/utilities/button_variation_classes.hbs +2 -2
  13. package/src/stories/views/components/event/event_ticket_button.hbs +4 -4
  14. package/src/stories/views/components/mediaplayer/mediaplayer_button.hbs +3 -2
  15. package/src/stories/views/components/modal/modal.hbs +1 -1
  16. package/src/stories/views/components/teaser/tabbox/teaser_tabbox.hbs +1 -1
  17. package/tailwind.config.js +3 -10
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
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
+
1
13
  # v1.12.1 (Thu Apr 20 2023)
2
14
 
3
15
  #### 🐛 Bug Fix
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;
@@ -1796,11 +1794,12 @@ video {
1796
1794
  --tw-border-opacity: 1;
1797
1795
  border-color: rgba(0, 82, 147, var(--tw-border-opacity));
1798
1796
  }
1799
- .border-button-primary {
1800
- border-color: var(--color-button-primary);
1797
+ .border-button {
1798
+ border-color: var(--color-button);
1801
1799
  }
1802
- .border-button-primary--inverted {
1803
- border-color: var(--color-button-primary-inverted);
1800
+ .border-button-inverted {
1801
+ border-color: #ffffff;
1802
+ border-color: var(--color-button-inverted);
1804
1803
  }
1805
1804
  .border-clusterTeaserHeadline {
1806
1805
  border-color: #005293;
@@ -1853,14 +1852,15 @@ video {
1853
1852
  --tw-bg-opacity: 1;
1854
1853
  background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
1855
1854
  }
1856
- .bg-button-primary {
1857
- background-color: var(--color-button-primary);
1855
+ .bg-button {
1856
+ background-color: var(--color-button);
1858
1857
  }
1859
- .bg-button-primary--dark {
1860
- background-color: var(--color-button-primary-dark);
1858
+ .bg-button--dark {
1859
+ background-color: var(--color-button--dark);
1861
1860
  }
1862
- .bg-button-primary--inverted {
1863
- background-color: var(--color-button-primary-inverted);
1861
+ .bg-button-inverted {
1862
+ background-color: #ffffff;
1863
+ background-color: var(--color-button-inverted);
1864
1864
  }
1865
1865
  .bg-current {
1866
1866
  background-color: currentColor;
@@ -2439,20 +2439,13 @@ video {
2439
2439
  --tw-text-opacity: 1;
2440
2440
  color: rgba(0, 109, 193, var(--tw-text-opacity));
2441
2441
  }
2442
+ .text-button {
2443
+ color: var(--color-button);
2444
+ }
2442
2445
  .text-button-inverted {
2443
2446
  color: #ffffff;
2444
2447
  color: var(--color-button-inverted);
2445
2448
  }
2446
- .text-button-primary {
2447
- color: var(--color-button-primary);
2448
- }
2449
- .text-button-primary--inverted {
2450
- color: var(--color-button-primary-inverted);
2451
- }
2452
- .text-button-secondary {
2453
- color: #006dc1;
2454
- color: var(--color-button-secondary);
2455
- }
2456
2449
  .text-byline {
2457
2450
  color: #606060;
2458
2451
  color: var(--color-byline);
@@ -2685,7 +2678,7 @@ video {
2685
2678
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2686
2679
  }
2687
2680
  .counter-reset {
2688
- counter-reset: cnt1682005699181;
2681
+ counter-reset: cnt1682086908020;
2689
2682
  }
2690
2683
  .hyphens-auto {
2691
2684
  -webkit-hyphens: auto;
@@ -2917,7 +2910,7 @@ video {
2917
2910
  --tw-ring-color: rgba(255, 255, 255, 0.5);
2918
2911
  }
2919
2912
  .-ordered {
2920
- counter-increment: cnt1682005699181 1;
2913
+ counter-increment: cnt1682086908020 1;
2921
2914
  }
2922
2915
  .-ordered::before {
2923
2916
  position: absolute;
@@ -2933,7 +2926,7 @@ video {
2933
2926
  letter-spacing: .0125em;
2934
2927
  --tw-text-opacity: 1;
2935
2928
  color: rgba(0, 0, 0, var(--tw-text-opacity));
2936
- content: counter(cnt1682005699181);
2929
+ content: counter(cnt1682086908020);
2937
2930
  }
2938
2931
  /*! ****************************/
2939
2932
  /*! text-shadow */
@@ -3034,11 +3027,8 @@ video {
3034
3027
  --color-cluster-teaser-link: #006dc1;
3035
3028
  --color-cluster-teaser-headline: #005293;
3036
3029
  /* Button */
3037
- --color-button: var(--color-primary-ds);
3038
3030
  --color-button-inverted: #ffffff;
3039
3031
  --color-button-hollow: #006dc1;
3040
- --color-button-secondary: #006dc1;
3041
- --color-button-ghost: #006dc1;
3042
3032
  /* Media-Button */
3043
3033
  --color-media-button: #276b9e;
3044
3034
  /* States */
@@ -3103,15 +3093,10 @@ video {
3103
3093
  --color-cluster-teaser-link: #006dc1;
3104
3094
  --color-cluster-teaser-headline: #005293;
3105
3095
  /* Button */
3106
- --color-button: var(--color-primary-ds);
3107
- --color-button-primary: #006dc1;
3108
- --color-button-primary-dark: #005293;
3109
- --color-button-primary-inverted: #ffffff;
3110
- --color-button-primary-inverted-dark: #eaf3fa;
3096
+ --color-button: #006dc1;
3097
+ --color-button--dark: #005293;
3111
3098
  --color-button-inverted: #ffffff;
3112
- --color-button-hollow: #006dc1;
3113
- --color-button-secondary: #006dc1;
3114
- --color-button-ghost: #006dc1;
3099
+ --color-button-inverted--dark: #eaf3fa;
3115
3100
  /* Media-Button */
3116
3101
  --color-media-button: #006dc1;
3117
3102
  /* States */
@@ -3169,11 +3154,10 @@ video {
3169
3154
  --color-cluster-teaser-link: #a00d65;
3170
3155
  --color-cluster-teaser-headline: #6d0041;
3171
3156
  /* Button */
3172
- --color-button: var(--color-primary-ds);
3157
+ --color-button: #a00d65;
3158
+ --color-button--dark: #6d0041;
3173
3159
  --color-button-inverted: #ffffff;
3174
- --color-button-hollow: #a00d65;
3175
- --color-button-secondary: #a00d65;
3176
- --color-button-ghost: #a00d65;
3160
+ --color-button-inverted--dark: #eaf3fa;
3177
3161
  /* Media-Button */
3178
3162
  --color-media-button: var(--color-primary-ds);
3179
3163
  /* States */
@@ -3226,11 +3210,10 @@ video {
3226
3210
  --color-cluster-teaser-link: var(--color-primary-ds);
3227
3211
  --color-cluster-teaser-headline: #00375d;
3228
3212
  /* Button */
3229
- --color-button: var(--color-primary-ds);
3213
+ --color-button: #276b9e;
3214
+ --color-button--dark: #00375d;
3230
3215
  --color-button-inverted: #ffffff;
3231
- --color-button-hollow: #276b9e;
3232
- --color-button-secondary: #276b9e;
3233
- --color-button-ghost: #276b9e;
3216
+ --color-button-inverted--dark: #eaf3fa;
3234
3217
  /* Media-Button */
3235
3218
  --color-media-button: var(--color-primary-ds);
3236
3219
  /* States */
@@ -3286,10 +3269,9 @@ video {
3286
3269
  --color-cluster-teaser-headline: #005293;
3287
3270
  /* Button */
3288
3271
  --color-button: #006eb7;
3272
+ --color-button--dark: #005293;
3289
3273
  --color-button-inverted: #ffffff;
3290
- --color-button-hollow: #006eb7;
3291
- --color-button-secondary: #006eb7;
3292
- --color-button-ghost: #006eb7;
3274
+ --color-button-inverted--dark: #eaf3fa;
3293
3275
  /* Media-Button */
3294
3276
  --color-media-button: var(--color-primary-ds);
3295
3277
  /* States */
@@ -3344,11 +3326,10 @@ video {
3344
3326
  --color-cluster-teaser-link: var(--color-primary-ds);
3345
3327
  --color-cluster-teaser-headline: #005293;
3346
3328
  /* Button */
3347
- --color-button: var(--color-primary-ds);
3329
+ --color-button: #006eb7;
3330
+ --color-button--dark: #005293;
3348
3331
  --color-button-inverted: #ffffff;
3349
- --color-button-hollow: var(--color-primary-ds);
3350
- --color-button-secondary: var(--color-primary-ds);
3351
- --color-button-ghost: var(--color-primary-ds);
3332
+ --color-button-inverted--dark: #eaf3fa;
3352
3333
  /* Media-Button */
3353
3334
  --color-media-button: var(--color-primary-ds);
3354
3335
  /* States */
@@ -3402,10 +3383,9 @@ video {
3402
3383
  --color-cluster-teaser-headline: var(--color-primary-ds);
3403
3384
  /* Button */
3404
3385
  --color-button: #AB2F2D;
3386
+ --color-button--dark: #8d2725;
3405
3387
  --color-button-inverted: #ffffff;
3406
- --color-button-hollow: #AB2F2D;
3407
- --color-button-secondary: #AB2F2D;
3408
- --color-button-ghost: #AB2F2D;
3388
+ --color-button-inverted--dark: #eaf3fa;
3409
3389
  /* Media-Button */
3410
3390
  --color-media-button: #AB2F2D;
3411
3391
  /* States */
@@ -3459,10 +3439,9 @@ video {
3459
3439
  --color-cluster-teaser-headline: var(--color-primary-ds);
3460
3440
  /* Button */
3461
3441
  --color-button: #007A7C;
3442
+ --color-button--dark: #00646f;
3462
3443
  --color-button-inverted: #ffffff;
3463
- --color-button-hollow: #007A7C;
3464
- --color-button-secondary: #007A7C;
3465
- --color-button-ghost: #007A7C;
3444
+ --color-button-inverted--dark: #eaf3fa;
3466
3445
  /* Media-Button */
3467
3446
  --color-media-button: #007A7C;
3468
3447
  /* States */
@@ -3517,11 +3496,10 @@ video {
3517
3496
  --color-cluster-teaser-link: var(--color-primary-ds);
3518
3497
  --color-cluster-teaser-headline: #00375d;
3519
3498
  /* Button */
3520
- --color-button: var(--color-primary-ds);
3499
+ --color-button: #006eb7;
3500
+ --color-button--dark: #00375d;
3521
3501
  --color-button-inverted: #ffffff;
3522
- --color-button-hollow: var(--color-primary-ds);
3523
- --color-button-secondary: var(--color-primary-ds);
3524
- --color-button-ghost: var(--color-primary-ds);
3502
+ --color-button-inverted--dark: #eaf3fa;
3525
3503
  /* Media-Button */
3526
3504
  --color-media-button: var(--color-primary-ds);
3527
3505
  /* States */
@@ -3577,10 +3555,9 @@ video {
3577
3555
  --color-cluster-teaser-headline: #000000;
3578
3556
  /* Button */
3579
3557
  --color-button: #916B00;
3558
+ --color-button--dark: #6e6748;
3580
3559
  --color-button-inverted: #ffffff;
3581
- --color-button-hollow: #916B00;
3582
- --color-button-secondary: #916B00;
3583
- --color-button-ghost: #916B00;
3560
+ --color-button-inverted--dark: #eaf3fa;
3584
3561
  /* Media-Button */
3585
3562
  --color-media-button: #916B00;
3586
3563
  /* States */
@@ -3590,7 +3567,7 @@ video {
3590
3567
  /* Podcast-Player */
3591
3568
  --color-podcast: #916B00;
3592
3569
  --color-podcast-text: var(--color-link);
3593
- --color-podcast-highlight: #00727A;
3570
+ --color-podcast-highlight: #007A7C;
3594
3571
  /* Font */
3595
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;
3596
3573
  --font-weight-title: 700;
@@ -3635,10 +3612,9 @@ video {
3635
3612
  --color-cluster-teaser-headline: #000000;
3636
3613
  /* Button */
3637
3614
  --color-button: #8C033D;
3615
+ --color-button--dark: #6d0041;
3638
3616
  --color-button-inverted: #ffffff;
3639
- --color-button-hollow: #8C033D;
3640
- --color-button-secondary: #8C033D;
3641
- --color-button-ghost: #8C033D;
3617
+ --color-button-inverted--dark: #eaf3fa;
3642
3618
  /* Media-Button */
3643
3619
  --color-media-button: #c95702;
3644
3620
  /* States */
@@ -3696,9 +3672,8 @@ video {
3696
3672
  /* Button */
3697
3673
  --color-button: #9b0112;
3698
3674
  --color-button-inverted: #ffffff;
3699
- --color-button-hollow: #9b0112;
3700
- --color-button-secondary: #9b0112;
3701
- --color-button-ghost: #9b0112;
3675
+ --color-button--dark: #8d2725;
3676
+ --color-button-inverted--dark: #eaf3fa;
3702
3677
  /* Media-Button */
3703
3678
  --color-media-button: var(--color-primary-ds);
3704
3679
  /* States */
@@ -3756,9 +3731,8 @@ video {
3756
3731
  /* Button */
3757
3732
  --color-button: #29675d;
3758
3733
  --color-button-inverted: #ffffff;
3759
- --color-button-hollow: #29675d;
3760
- --color-button-secondary: #29675d;
3761
- --color-button-ghost: #29675d;
3734
+ --color-button--dark: #0F6157;
3735
+ --color-button-inverted--dark: #eaf3fa;
3762
3736
  /* Media-Button */
3763
3737
  --color-media-button: #0F6157;
3764
3738
  /* States */
@@ -3814,11 +3788,10 @@ video {
3814
3788
  --color-cluster-teaser-link: var(--color-link);
3815
3789
  --color-cluster-teaser-headline: #000000;
3816
3790
  /* Button */
3817
- --color-button: var(--color-link);
3791
+ --color-button: #006783;
3818
3792
  --color-button-inverted: #ffffff;
3819
- --color-button-hollow: var(--color-link);
3820
- --color-button-secondary: var(--color-link);
3821
- --color-button-ghost: var(--color-link);
3793
+ --color-button--dark: #00646f;
3794
+ --color-button-inverted--dark: #eaf3fa;
3822
3795
  /* Media-Button */
3823
3796
  --color-media-button: #000000;
3824
3797
  /* States */
@@ -3942,14 +3915,14 @@ video {
3942
3915
  .empty\:hidden:empty {
3943
3916
  display: none;
3944
3917
  }
3945
- .hover\:border-button-primary:hover {
3946
- border-color: var(--color-button-primary);
3918
+ .hover\:border-button:hover {
3919
+ border-color: var(--color-button);
3947
3920
  }
3948
- .hover\:border-button-primary--dark:hover {
3949
- border-color: var(--color-button-primary-dark);
3921
+ .hover\:border-button--dark:hover {
3922
+ border-color: var(--color-button--dark);
3950
3923
  }
3951
- .hover\:border-button-primary--inverted-dark:hover {
3952
- border-color: var(--color-button-primary-inverted-dark);
3924
+ .hover\:border-button-inverted--dark:hover {
3925
+ border-color: var(--color-button-inverted--dark);
3953
3926
  }
3954
3927
  .hover\:bg-black:hover {
3955
3928
  --tw-bg-opacity: 1;
@@ -3959,14 +3932,15 @@ video {
3959
3932
  --tw-bg-opacity: 1;
3960
3933
  background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
3961
3934
  }
3962
- .hover\:bg-button-primary--dark:hover {
3963
- background-color: var(--color-button-primary-dark);
3935
+ .hover\:bg-button--dark:hover {
3936
+ background-color: var(--color-button--dark);
3964
3937
  }
3965
- .hover\:bg-button-primary--inverted:hover {
3966
- background-color: var(--color-button-primary-inverted);
3938
+ .hover\:bg-button-inverted:hover {
3939
+ background-color: #ffffff;
3940
+ background-color: var(--color-button-inverted);
3967
3941
  }
3968
- .hover\:bg-button-primary--inverted-dark:hover {
3969
- background-color: var(--color-button-primary-inverted-dark);
3942
+ .hover\:bg-button-inverted--dark:hover {
3943
+ background-color: var(--color-button-inverted--dark);
3970
3944
  }
3971
3945
  .hover\:bg-slate-300:hover {
3972
3946
  --tw-bg-opacity: 1;
@@ -3976,8 +3950,8 @@ video {
3976
3950
  fill: #276b9e;
3977
3951
  fill: var(--color-media-button);
3978
3952
  }
3979
- .hover\:text-button-primary:hover {
3980
- color: var(--color-button-primary);
3953
+ .hover\:text-button:hover {
3954
+ color: var(--color-button);
3981
3955
  }
3982
3956
  .hover\:text-toplineColor:hover {
3983
3957
  color: #006dc1;
@@ -4012,14 +3986,11 @@ video {
4012
3986
  --tw-scale-y: .95;
4013
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));
4014
3988
  }
4015
- .active\:bg-button-primary--dark:active {
4016
- background-color: var(--color-button-primary-dark);
4017
- }
4018
- .active\:bg-button-primary--inverted:active {
4019
- background-color: var(--color-button-primary-inverted);
3989
+ .active\:bg-button--dark:active {
3990
+ background-color: var(--color-button--dark);
4020
3991
  }
4021
- .active\:bg-button-primary--inverted-dark:active {
4022
- background-color: var(--color-button-primary-inverted-dark);
3992
+ .active\:bg-button-inverted--dark:active {
3993
+ background-color: var(--color-button-inverted--dark);
4023
3994
  }
4024
3995
  .active\:font-bold:active {
4025
3996
  font-weight: 700;
@@ -4028,8 +3999,8 @@ video {
4028
3999
  --tw-text-opacity: 1;
4029
4000
  color: rgba(0, 109, 193, var(--tw-text-opacity));
4030
4001
  }
4031
- .active\:text-button-primary:active {
4032
- color: var(--color-button-primary);
4002
+ .active\:text-button:active {
4003
+ color: var(--color-button);
4033
4004
  }
4034
4005
  .disabled\:hidden:disabled {
4035
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/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/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.1",
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/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/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/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)',