@mmb-digital/ds-lilly 1.0.0-alpha.71 → 1.0.0-alpha.73

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 (15) hide show
  1. package/cjs/ds-lilly.css +83 -78
  2. package/ds-lilly.css +83 -78
  3. package/package.json +2 -2
  4. /package/assets/{34f176b4280e7b2a37e0.eot → 0415321ec7aa7fb2715d.eot} +0 -0
  5. /package/assets/{05e80458cf10b294138d.gif → 04de12905acce4a8e74c.gif} +0 -0
  6. /package/assets/{a05fcf4a982f62c9cdeb.ttf → 2ff765342498185458f0.ttf} +0 -0
  7. /package/assets/{a2a508feb713a4574553.ttf → 3dd880065ba2ce1895ad.ttf} +0 -0
  8. /package/assets/{8c5a7cb008a350f82320.eot → 4b25737854a19a7d1861.eot} +0 -0
  9. /package/assets/{368d28a3df1450ec8e99.svg → 4c439ad3ea14fee92608.svg} +0 -0
  10. /package/assets/{b0c75ad3191a1d843792.eot → 85bb12a8f0024be33d11.eot} +0 -0
  11. /package/assets/{1d497af67dbe8a82c527.woff → 89f4645337a6527807fd.woff} +0 -0
  12. /package/assets/{cd38807ed983b3c8653d.gif → c21ba2486ce945aee620.gif} +0 -0
  13. /package/assets/{f9384e02954b82dd86df.woff → cdaf0e24f85681c9fdf6.woff} +0 -0
  14. /package/assets/{b763212bb19983ca76ed.eot → dc8bcda4ea5c5f02dc7d.eot} +0 -0
  15. /package/assets/{570114a285f007d50ec8.svg → fe43e68c3eec6bb20ffb.svg} +0 -0
package/cjs/ds-lilly.css CHANGED
@@ -342,8 +342,8 @@ body {
342
342
  --fgWhiteDefault-rgb: hex-to-rgb(#ffffff);
343
343
  --bgNeutralDefault: #E8EAED;
344
344
  --bgNeutralDefault-rgb: hex-to-rgb(#E8EAED);
345
- --bgNeutralDefaultHover: #D5D7DD;
346
- --bgNeutralDefaultHover-rgb: hex-to-rgb(#D5D7DD);
345
+ --bgNeutralDefaultHover: #DFE1E5;
346
+ --bgNeutralDefaultHover-rgb: hex-to-rgb(#DFE1E5);
347
347
  --bgNeutralDefaultActive: #A0A5B1;
348
348
  --bgNeutralDefaultActive-rgb: hex-to-rgb(#A0A5B1);
349
349
  --bgNeutralSubtle: #F3F4F5;
@@ -495,7 +495,7 @@ body {
495
495
  --thirdPartyFacebook-rgb: hex-to-rgb(#4267b2);
496
496
  --thirdPartyTwitter: #1da1f2;
497
497
  --thirdPartyTwitter-rgb: hex-to-rgb(#1da1f2);
498
- --boxShadowXXXSmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
498
+ --boxShadowXXXSmall: 0px 1px 2px 0px rgba(25, 25, 25, 0.08);
499
499
  --boxShadowXXSmall: 0 2px 4px rgba(25, 25, 25, 0.1), 0 0 4px rgba(25, 25, 25, 0.05);
500
500
  --boxShadowSmall: 0 2px 4px rgba(25, 25, 25, 0.05), 0 0 8px rgba(25, 25, 25, 0.05);
501
501
  --boxShadowMedium: 0 2px 8px rgba(25, 25, 25, 0.2), 0 0 8px rgba(25, 25, 25, 0.05);
@@ -507,10 +507,10 @@ body {
507
507
  body.dark {
508
508
  --fgNeutralDefault: #F3F4F5;
509
509
  --fgNeutralDefault-rgb: hex-to-rgb(#F3F4F5);
510
- --fgNeutralSubtle: #878D99;
511
- --fgNeutralSubtle-rgb: hex-to-rgb(#878D99);
512
- --fgNeutralSubtlest: #606773;
513
- --fgNeutralSubtlest-rgb: hex-to-rgb(#606773);
510
+ --fgNeutralSubtle: #B2B6BF;
511
+ --fgNeutralSubtle-rgb: hex-to-rgb(#B2B6BF);
512
+ --fgNeutralSubtlest: #878D99;
513
+ --fgNeutralSubtlest-rgb: hex-to-rgb(#878D99);
514
514
  --fgBrandDefault: #E2CA99;
515
515
  --fgBrandDefault-rgb: hex-to-rgb(#E2CA99);
516
516
  --fgPromoDefault: #A58B4B;
@@ -531,26 +531,26 @@ body.dark {
531
531
  --fgSuccessDefault-rgb: hex-to-rgb(#4DD47A);
532
532
  --fgInverseDefault: #17181C;
533
533
  --fgInverseDefault-rgb: hex-to-rgb(#17181C);
534
- --fgDisabledDefault: #32363E;
535
- --fgDisabledDefault-rgb: hex-to-rgb(#32363E);
534
+ --fgDisabledDefault: #878D99;
535
+ --fgDisabledDefault-rgb: hex-to-rgb(#878D99);
536
536
  --fgWhiteDefault: #ffffff;
537
537
  --fgWhiteDefault-rgb: hex-to-rgb(#ffffff);
538
538
  --bgNeutralDefault: #101114;
539
539
  --bgNeutralDefault-rgb: hex-to-rgb(#101114);
540
- --bgNeutralDefaultHover: #17181C;
541
- --bgNeutralDefaultHover-rgb: hex-to-rgb(#17181C);
540
+ --bgNeutralDefaultHover: #131417;
541
+ --bgNeutralDefaultHover-rgb: hex-to-rgb(#131417);
542
542
  --bgNeutralDefaultActive: #1D1F24;
543
543
  --bgNeutralDefaultActive-rgb: hex-to-rgb(#1D1F24);
544
544
  --bgNeutralSubtle: #17181C;
545
545
  --bgNeutralSubtle-rgb: hex-to-rgb(#17181C);
546
- --bgNeutralSubtleHover: #1D1F24;
547
- --bgNeutralSubtleHover-rgb: hex-to-rgb(#1D1F24);
546
+ --bgNeutralSubtleHover: #1B1C21;
547
+ --bgNeutralSubtleHover-rgb: hex-to-rgb(#1B1C21);
548
548
  --bgNeutralSubtleActive: #27292E;
549
549
  --bgNeutralSubtleActive-rgb: hex-to-rgb(#27292E);
550
550
  --bgNeutralSubtlest: #1D1F24;
551
551
  --bgNeutralSubtlest-rgb: hex-to-rgb(#1D1F24);
552
- --bgNeutralSubtlestHover: #27292E;
553
- --bgNeutralSubtlestHover-rgb: hex-to-rgb(#27292E);
552
+ --bgNeutralSubtlestHover: #222429;
553
+ --bgNeutralSubtlestHover-rgb: hex-to-rgb(#222429);
554
554
  --bgNeutralSubtlestActive: #35373D;
555
555
  --bgNeutralSubtlestActive-rgb: hex-to-rgb(#35373D);
556
556
  --bgBrandDefault: #524326;
@@ -690,12 +690,12 @@ body.dark {
690
690
  --thirdPartyFacebook-rgb: hex-to-rgb(#4267b2);
691
691
  --thirdPartyTwitter: #1da1f2;
692
692
  --thirdPartyTwitter-rgb: hex-to-rgb(#1da1f2);
693
- --boxShadowXXXSmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
694
- --boxShadowXXSmall: 0 2px 4px rgba(25, 25, 25, 0.1), 0 0 4px rgba(25, 25, 25, 0.05);
695
- --boxShadowSmall: 0 2px 4px rgba(25, 25, 25, 0.05), 0 0 8px rgba(25, 25, 25, 0.05);
696
- --boxShadowMedium: 0 2px 8px rgba(25, 25, 25, 0.2), 0 0 8px rgba(25, 25, 25, 0.05);
697
- --boxShadowLarge: 0 2px 8px rgba(25, 25, 25, 0.1), 0 0 16px rgba(25, 25, 25, 0.1);
698
- --boxShadowXLarge: 0 8px 16px rgba(25, 25, 25, 0.1), 0 0 24px rgba(25, 25, 25, 0.2);
693
+ --boxShadowXXXSmall: 0px 1px 2px 0px rgba(25, 25, 25, 0.8);
694
+ --boxShadowXXSmall: 0 2px 4px rgba(25, 25, 25, 0.9), 0 0 4px rgba(25, 25, 25, 0.8);
695
+ --boxShadowSmall: 0 2px 4px rgba(25, 25, 25, 0.8), 0 0 8px rgba(25, 25, 25, 0.8);
696
+ --boxShadowMedium: 0 2px 8px rgba(25, 25, 25, 1), 0 0 8px rgba(25, 25, 25, 0.8);
697
+ --boxShadowLarge: 0 2px 8px rgba(25, 25, 25, 0.9), 0 0 16px rgba(25, 25, 25, 0.9);
698
+ --boxShadowXLarge: 0 8px 16px rgba(25, 25, 25, 0.9), 0 0 24px rgba(25, 25, 25, 1);
699
699
  }
700
700
 
701
701
  /* Styles for users who prefer dark mode at the OS level */
@@ -704,10 +704,10 @@ body.dark {
704
704
  body {
705
705
  --fgNeutralDefault: #F3F4F5;
706
706
  --fgNeutralDefault-rgb: hex-to-rgb(#F3F4F5);
707
- --fgNeutralSubtle: #878D99;
708
- --fgNeutralSubtle-rgb: hex-to-rgb(#878D99);
709
- --fgNeutralSubtlest: #606773;
710
- --fgNeutralSubtlest-rgb: hex-to-rgb(#606773);
707
+ --fgNeutralSubtle: #B2B6BF;
708
+ --fgNeutralSubtle-rgb: hex-to-rgb(#B2B6BF);
709
+ --fgNeutralSubtlest: #878D99;
710
+ --fgNeutralSubtlest-rgb: hex-to-rgb(#878D99);
711
711
  --fgBrandDefault: #E2CA99;
712
712
  --fgBrandDefault-rgb: hex-to-rgb(#E2CA99);
713
713
  --fgPromoDefault: #A58B4B;
@@ -728,26 +728,26 @@ body.dark {
728
728
  --fgSuccessDefault-rgb: hex-to-rgb(#4DD47A);
729
729
  --fgInverseDefault: #17181C;
730
730
  --fgInverseDefault-rgb: hex-to-rgb(#17181C);
731
- --fgDisabledDefault: #32363E;
732
- --fgDisabledDefault-rgb: hex-to-rgb(#32363E);
731
+ --fgDisabledDefault: #878D99;
732
+ --fgDisabledDefault-rgb: hex-to-rgb(#878D99);
733
733
  --fgWhiteDefault: #ffffff;
734
734
  --fgWhiteDefault-rgb: hex-to-rgb(#ffffff);
735
735
  --bgNeutralDefault: #101114;
736
736
  --bgNeutralDefault-rgb: hex-to-rgb(#101114);
737
- --bgNeutralDefaultHover: #17181C;
738
- --bgNeutralDefaultHover-rgb: hex-to-rgb(#17181C);
737
+ --bgNeutralDefaultHover: #131417;
738
+ --bgNeutralDefaultHover-rgb: hex-to-rgb(#131417);
739
739
  --bgNeutralDefaultActive: #1D1F24;
740
740
  --bgNeutralDefaultActive-rgb: hex-to-rgb(#1D1F24);
741
741
  --bgNeutralSubtle: #17181C;
742
742
  --bgNeutralSubtle-rgb: hex-to-rgb(#17181C);
743
- --bgNeutralSubtleHover: #1D1F24;
744
- --bgNeutralSubtleHover-rgb: hex-to-rgb(#1D1F24);
743
+ --bgNeutralSubtleHover: #1B1C21;
744
+ --bgNeutralSubtleHover-rgb: hex-to-rgb(#1B1C21);
745
745
  --bgNeutralSubtleActive: #27292E;
746
746
  --bgNeutralSubtleActive-rgb: hex-to-rgb(#27292E);
747
747
  --bgNeutralSubtlest: #1D1F24;
748
748
  --bgNeutralSubtlest-rgb: hex-to-rgb(#1D1F24);
749
- --bgNeutralSubtlestHover: #27292E;
750
- --bgNeutralSubtlestHover-rgb: hex-to-rgb(#27292E);
749
+ --bgNeutralSubtlestHover: #222429;
750
+ --bgNeutralSubtlestHover-rgb: hex-to-rgb(#222429);
751
751
  --bgNeutralSubtlestActive: #35373D;
752
752
  --bgNeutralSubtlestActive-rgb: hex-to-rgb(#35373D);
753
753
  --bgBrandDefault: #524326;
@@ -887,12 +887,12 @@ body.dark {
887
887
  --thirdPartyFacebook-rgb: hex-to-rgb(#4267b2);
888
888
  --thirdPartyTwitter: #1da1f2;
889
889
  --thirdPartyTwitter-rgb: hex-to-rgb(#1da1f2);
890
- --boxShadowXXXSmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
891
- --boxShadowXXSmall: 0 2px 4px rgba(25, 25, 25, 0.1), 0 0 4px rgba(25, 25, 25, 0.05);
892
- --boxShadowSmall: 0 2px 4px rgba(25, 25, 25, 0.05), 0 0 8px rgba(25, 25, 25, 0.05);
893
- --boxShadowMedium: 0 2px 8px rgba(25, 25, 25, 0.2), 0 0 8px rgba(25, 25, 25, 0.05);
894
- --boxShadowLarge: 0 2px 8px rgba(25, 25, 25, 0.1), 0 0 16px rgba(25, 25, 25, 0.1);
895
- --boxShadowXLarge: 0 8px 16px rgba(25, 25, 25, 0.1), 0 0 24px rgba(25, 25, 25, 0.2);
890
+ --boxShadowXXXSmall: 0px 1px 2px 0px rgba(25, 25, 25, 0.8);
891
+ --boxShadowXXSmall: 0 2px 4px rgba(25, 25, 25, 0.9), 0 0 4px rgba(25, 25, 25, 0.8);
892
+ --boxShadowSmall: 0 2px 4px rgba(25, 25, 25, 0.8), 0 0 8px rgba(25, 25, 25, 0.8);
893
+ --boxShadowMedium: 0 2px 8px rgba(25, 25, 25, 1), 0 0 8px rgba(25, 25, 25, 0.8);
894
+ --boxShadowLarge: 0 2px 8px rgba(25, 25, 25, 0.9), 0 0 16px rgba(25, 25, 25, 0.9);
895
+ --boxShadowXLarge: 0 8px 16px rgba(25, 25, 25, 0.9), 0 0 24px rgba(25, 25, 25, 1);
896
896
  }
897
897
  /* Override dark mode with light mode styles if the user decides to swap */
898
898
  body.light {
@@ -928,8 +928,8 @@ body.dark {
928
928
  --fgWhiteDefault-rgb: hex-to-rgb(#ffffff);
929
929
  --bgNeutralDefault: #E8EAED;
930
930
  --bgNeutralDefault-rgb: hex-to-rgb(#E8EAED);
931
- --bgNeutralDefaultHover: #D5D7DD;
932
- --bgNeutralDefaultHover-rgb: hex-to-rgb(#D5D7DD);
931
+ --bgNeutralDefaultHover: #DFE1E5;
932
+ --bgNeutralDefaultHover-rgb: hex-to-rgb(#DFE1E5);
933
933
  --bgNeutralDefaultActive: #A0A5B1;
934
934
  --bgNeutralDefaultActive-rgb: hex-to-rgb(#A0A5B1);
935
935
  --bgNeutralSubtle: #F3F4F5;
@@ -1081,7 +1081,7 @@ body.dark {
1081
1081
  --thirdPartyFacebook-rgb: hex-to-rgb(#4267b2);
1082
1082
  --thirdPartyTwitter: #1da1f2;
1083
1083
  --thirdPartyTwitter-rgb: hex-to-rgb(#1da1f2);
1084
- --boxShadowXXXSmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
1084
+ --boxShadowXXXSmall: 0px 1px 2px 0px rgba(25, 25, 25, 0.08);
1085
1085
  --boxShadowXXSmall: 0 2px 4px rgba(25, 25, 25, 0.1), 0 0 4px rgba(25, 25, 25, 0.05);
1086
1086
  --boxShadowSmall: 0 2px 4px rgba(25, 25, 25, 0.05), 0 0 8px rgba(25, 25, 25, 0.05);
1087
1087
  --boxShadowMedium: 0 2px 8px rgba(25, 25, 25, 0.2), 0 0 8px rgba(25, 25, 25, 0.05);
@@ -1295,7 +1295,7 @@ body {
1295
1295
  --backgroundHoverCard: var(--bgNeutralSubtlestHover);
1296
1296
  --borderCard: none;
1297
1297
  --borderRadiusCard: var(--borderRadiusMedium);
1298
- --boxShadowCard: none;
1298
+ --boxShadowCard: var(--boxShadowXXSmall);
1299
1299
  --paddingCard: var(--spaceLarge);
1300
1300
  --backgroundSelectedCard: var(--bgNeutralSubtlest);
1301
1301
  --backgroundNeutralCard: var(--bgNeutralSubtle);
@@ -1603,7 +1603,7 @@ body {
1603
1603
  --paddingAvatarListFileUpload: var(--spaceMedium);
1604
1604
  --backgroundBody: var(--surfaceDefault);
1605
1605
  --minWidthBody: 320px;
1606
- --maxWidthCenterMain: 740px + 2 * var(--spaceXLarge);
1606
+ --maxWidthCenterMain: 800px + 2 * var(--spaceXLarge);
1607
1607
  --backgroundHeader: var(--surfaceRisen);
1608
1608
  --boxShadowHeader: var(--boxShadowXXXSmall);
1609
1609
  --colorHeader: var(--fgNeutralDefault);
@@ -1618,12 +1618,12 @@ body {
1618
1618
  --paddingMobileHeader: 0 var(--spaceMedium);
1619
1619
  --backgroundMobilePanel: var(--surfaceRisen);
1620
1620
  --widthMobilePanel: 320px;
1621
- --paddingBodyMobilePanel: var(--spaceLarge);
1622
- --backgroundSecondaryMobilePanel: var(--bgNeutralDefault);
1621
+ --paddingBodyMobilePanel: var(--spaceSmall);
1622
+ --backgroundSecondaryMobilePanel: var(--surfaceDefault);
1623
1623
  --paddingBodySecondaryMobilePanel: var(--spaceLarge) var(--spaceXSmall);
1624
- --backgroundHeaderMobilePanel: var(--gradientBlueRedDark);
1625
- --colorHeaderMobilePanel: var(--fgInverseDefault);
1626
- --paddingHeaderMobilePanel: var(--spaceLarge) var(--spaceXSmall) var(--spaceLarge) var(--spaceLarge);
1624
+ --backgroundHeaderMobilePanel: transparent;
1625
+ --colorHeaderMobilePanel: var(--fgWhiteDefault);
1626
+ --paddingHeaderMobilePanel: var(--spaceSmall) var(--spaceXSmall) var(--spaceXSmall) var(--spaceSmall);
1627
1627
  --colorHeaderImageMobilePanel: var(--fgBrandDefault);
1628
1628
  --backgroundHeaderSecondaryMobilePanel: transparent;
1629
1629
  --colorHeaderSecondaryMobilePanel: var(--fgNeutralDefault);
@@ -1660,13 +1660,14 @@ body {
1660
1660
  --widthSelectedMenuItem: calc(100% - 4px);
1661
1661
  --marginSelectedMenuItem: 2px;
1662
1662
  --backgroundSubmenu: var(--bgNeutralDefault);
1663
- --colorLinkMobileMenu: var(--fgBrandDefault);
1664
- --colorLinkHoverMobileMenu: var(--fgLinkDefaultHover);
1665
- --colorLinkActiveMobileMenu: var(--fgLinkDefaultPressed);
1666
- --colorLinkSelectedMobileMenu: var(--fgBrandDefault);
1663
+ --colorLinkMobileMenu: var(--fgWhiteDefault);
1664
+ --colorLinkHoverMobileMenu: var(--fgWhiteDefault);
1665
+ --colorLinkActiveMobileMenu: var(--fgWhiteDefault);
1666
+ --colorLinkSelectedMobileMenu: var(--fgWhiteDefault);
1667
1667
  --fontSizeListMobileMenu: var(--fontSizeSmall);
1668
1668
  --marginTopItemMobileMenu: 0;
1669
- --paddingLinkMobileMenu: var(--spaceMedium) var(--spaceXSmall);
1669
+ --paddingLinkMobileMenu: var(--spaceSmall) var(--spaceSmall);
1670
+ --colorIconLinkMobileMenu: var(--fgWhiteDefault);
1670
1671
  --fontSizeTitleStepper: var(--fontSizeXSmall);
1671
1672
  --fontSizeIconStepper: var(--fontSizeSmall);
1672
1673
  --fontWeightIconStepper: var(--fontWeightBold);
@@ -1893,7 +1894,7 @@ body:not(.user-is-tabbing) *:focus {
1893
1894
  .l-app--fixedHeader {
1894
1895
  padding-top: var(--heightMobileHeader);
1895
1896
  }
1896
- @media screen and (min-width: 992px) {
1897
+ @media screen and (min-width: 1200px) {
1897
1898
  .l-app--fixedHeader {
1898
1899
  padding-top: var(--heightHeader);
1899
1900
  }
@@ -1915,7 +1916,7 @@ body:not(.user-is-tabbing) *:focus {
1915
1916
  position: fixed;
1916
1917
  top: var(--heightMobileHeader);
1917
1918
  }
1918
- @media screen and (min-width: 992px) {
1919
+ @media screen and (min-width: 1200px) {
1919
1920
  .l-app--fixedMenuMain .l-content > .m-menu--main {
1920
1921
  top: var(--heightHeader);
1921
1922
  }
@@ -1943,7 +1944,7 @@ body {
1943
1944
  display: flex;
1944
1945
  min-height: calc(100vh - var(--heightMobileHeader));
1945
1946
  }
1946
- @media screen and (min-width: 992px) {
1947
+ @media screen and (min-width: 1200px) {
1947
1948
  .l-content {
1948
1949
  min-height: calc(100vh - var(--heightHeader));
1949
1950
  }
@@ -3164,7 +3165,7 @@ body {
3164
3165
  margin-right: var(--spaceXSmall);
3165
3166
  }
3166
3167
 
3167
- @media screen and (max-width: 991px) {
3168
+ @media screen and (max-width: 1199px) {
3168
3169
  .l-header .m-menu .m-menu__text {
3169
3170
  border: 0;
3170
3171
  clip: rect(0 0 0 0);
@@ -3180,7 +3181,7 @@ body {
3180
3181
  margin-left: calc(var(--spaceXSmall) / 2);
3181
3182
  }
3182
3183
  }
3183
- @media screen and (min-width: 992px) {
3184
+ @media screen and (min-width: 1200px) {
3184
3185
  .l-header {
3185
3186
  height: var(--heightHeader);
3186
3187
  padding: var(--paddingHeader);
@@ -3256,6 +3257,7 @@ body.dark .l-header .c-logo__img--dark {
3256
3257
  }
3257
3258
  }
3258
3259
  .l-mobilePanel--main {
3260
+ background: var(--backgroundMainMenu);
3259
3261
  z-index: 1600;
3260
3262
  }
3261
3263
  .l-mobilePanel .m-menu + .m-menu {
@@ -3280,7 +3282,6 @@ body.dark .l-header .c-logo__img--dark {
3280
3282
  }
3281
3283
  .l-mobilePanel .m-menu__list .m-menu__item {
3282
3284
  margin-left: 0;
3283
- margin-bottom: var(--spaceSmall);
3284
3285
  }
3285
3286
  }
3286
3287
 
@@ -3319,12 +3320,8 @@ body.dark .l-header .c-logo__img--dark {
3319
3320
  order: 1;
3320
3321
  }
3321
3322
  .l-mobilePanel__header .l-mobilePanel__close {
3322
- color: var(--fgInverseDefault);
3323
3323
  order: 2;
3324
3324
  }
3325
- .l-mobilePanel__header .l-mobilePanel__close:hover, .l-mobilePanel__header .l-mobilePanel__close:focus {
3326
- color: var(--fgInverseDefault);
3327
- }
3328
3325
 
3329
3326
  .l-mobilePanel__headerImage {
3330
3327
  margin-right: var(--spaceMedium);
@@ -6635,7 +6632,7 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
6635
6632
  display: none;
6636
6633
  }
6637
6634
  .custom-datepicker .react-datepicker-header {
6638
- background: var(--bgBrandDefaultHover);
6635
+ background: var(--bgNeutralDefault);
6639
6636
  padding-top: 0.25rem;
6640
6637
  padding-bottom: 0.25rem;
6641
6638
  align-items: center;
@@ -6652,11 +6649,11 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
6652
6649
  border-bottom: none;
6653
6650
  }
6654
6651
  .custom-datepicker .react-datepicker__day-names {
6655
- background: var(--bgBrandBold);
6652
+ background: var(--bgNeutralSubtle);
6656
6653
  margin-bottom: 8px;
6657
6654
  }
6658
6655
  .custom-datepicker .react-datepicker__day-names > * {
6659
- color: var(--fgInverseDefault) !important;
6656
+ color: var(--fgNeutralDefault) !important;
6660
6657
  }
6661
6658
  .custom-datepicker .react-datepicker__month-text, .custom-datepicker .react-datepicker__year-text, .custom-datepicker .react-datepicker__day {
6662
6659
  width: 2.25rem;
@@ -6688,13 +6685,14 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
6688
6685
  .custom-datepicker .react-datepicker__month-text--keyboard-selected, .custom-datepicker .react-datepicker__year-text--keyboard-selected, .custom-datepicker .react-datepicker__day--keyboard-selected {
6689
6686
  background-color: unset;
6690
6687
  }
6691
- .custom-datepicker .react-datepicker__month-text--selected, .custom-datepicker .react-datepicker__year-text--selected, .custom-datepicker .react-datepicker__day--selected {
6692
- background: var(--bgBrandBold);
6693
- border-color: var(--borderBrandDefault);
6694
- color: var(--fgInverseDefault);
6695
- }
6696
6688
  .custom-datepicker .react-datepicker__month-text--today, .custom-datepicker .react-datepicker__year-text--today, .custom-datepicker .react-datepicker__day--today {
6697
6689
  font-weight: normal;
6690
+ border-radius: 50% !important;
6691
+ }
6692
+ .custom-datepicker .react-datepicker__month-text--today.react-datepicker__day--selected, .custom-datepicker .react-datepicker__year-text--today.react-datepicker__day--selected, .custom-datepicker .react-datepicker__day--today.react-datepicker__day--selected {
6693
+ background: var(--bgBrandBold) !important;
6694
+ border-color: var(--borderBrandDefault) !important;
6695
+ color: var(--fgInverseDefault) !important;
6698
6696
  }
6699
6697
  .custom-datepicker .react-datepicker__month-text--today:not(.react-datepicker__month-text--disabled,
6700
6698
  .react-datepicker__year-text--disabled,
@@ -6723,6 +6721,11 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
6723
6721
  background: var(--bgBrandDefaultHover);
6724
6722
  border-color: var(--borderNeutralDefault);
6725
6723
  }
6724
+ .custom-datepicker .react-datepicker__month-text--selected, .custom-datepicker .react-datepicker__year-text--selected, .custom-datepicker .react-datepicker__day--selected {
6725
+ background: var(--bgBrandBold);
6726
+ border-color: var(--borderBrandDefault);
6727
+ color: var(--fgInverseDefault);
6728
+ }
6726
6729
  .custom-datepicker .react-datepicker__year-text, .custom-datepicker .react-datepicker__month-text {
6727
6730
  text-transform: capitalize;
6728
6731
  border-radius: 20px !important;
@@ -7498,7 +7501,7 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
7498
7501
  .m-menu--main .m-menu__link .c-avatar {
7499
7502
  color: var(--colorIconLinkMainMenu);
7500
7503
  }
7501
- @media screen and (max-width: 991px) {
7504
+ @media screen and (max-width: 1199px) {
7502
7505
  .m-menu--main .m-menu {
7503
7506
  display: none;
7504
7507
  }
@@ -7522,7 +7525,7 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
7522
7525
  .m-menu--secondary .m-menu__item--open .m-menu__subMenu {
7523
7526
  padding-top: var(--marginTopItemSecondaryMenu);
7524
7527
  }
7525
- @media screen and (max-width: 991px) {
7528
+ @media screen and (max-width: 1199px) {
7526
7529
  .m-menu--secondary .m-menu {
7527
7530
  display: none;
7528
7531
  }
@@ -7573,6 +7576,7 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
7573
7576
  margin-top: var(--marginTopItemMobileMenu);
7574
7577
  }
7575
7578
  .m-menu--mobile .m-menu__item--selected .m-menu__link {
7579
+ background: var(--backgroundLinkSelectedMainMenu);
7576
7580
  color: var(--colorLinkSelectedMobileMenu);
7577
7581
  font-weight: var(--fontWeightBold);
7578
7582
  }
@@ -7586,8 +7590,9 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
7586
7590
  .m-menu--mobile .m-menu__link:active {
7587
7591
  color: var(--colorLinkActiveMobileMenu);
7588
7592
  }
7589
- .m-menu--mobile .c-avatar {
7593
+ .m-menu--mobile .m-menu__link .c-avatar {
7590
7594
  flex: 0 0 24px;
7595
+ color: var(--colorIconLinkMobileMenu);
7591
7596
  }
7592
7597
 
7593
7598
  .m-stepper__list {
@@ -9356,7 +9361,7 @@ body.dark .u-fg--fgWhiteDefault {
9356
9361
  /* Slider */
9357
9362
  .slick-loading .slick-list
9358
9363
  {
9359
- background: #fff url('assets/cd38807ed983b3c8653d.gif') center center no-repeat;
9364
+ background: #fff url('assets/c21ba2486ce945aee620.gif') center center no-repeat;
9360
9365
  }
9361
9366
 
9362
9367
  /* Icons */
@@ -9366,8 +9371,8 @@ body.dark .u-fg--fgWhiteDefault {
9366
9371
  font-weight: normal;
9367
9372
  font-style: normal;
9368
9373
 
9369
- src: url('assets/b0c75ad3191a1d843792.eot');
9370
- src: url('assets/b763212bb19983ca76ed.eot') format('embedded-opentype'), url('assets/f9384e02954b82dd86df.woff') format('woff'), url('assets/a2a508feb713a4574553.ttf') format('truetype'), url('assets/570114a285f007d50ec8.svg') format('svg');
9374
+ src: url('assets/85bb12a8f0024be33d11.eot');
9375
+ src: url('assets/dc8bcda4ea5c5f02dc7d.eot') format('embedded-opentype'), url('assets/89f4645337a6527807fd.woff') format('woff'), url('assets/3dd880065ba2ce1895ad.ttf') format('truetype'), url('assets/fe43e68c3eec6bb20ffb.svg') format('svg');
9371
9376
  }
9372
9377
  /* Arrows */
9373
9378
  .slick-prev,
package/ds-lilly.css CHANGED
@@ -342,8 +342,8 @@ body {
342
342
  --fgWhiteDefault-rgb: hex-to-rgb(#ffffff);
343
343
  --bgNeutralDefault: #E8EAED;
344
344
  --bgNeutralDefault-rgb: hex-to-rgb(#E8EAED);
345
- --bgNeutralDefaultHover: #D5D7DD;
346
- --bgNeutralDefaultHover-rgb: hex-to-rgb(#D5D7DD);
345
+ --bgNeutralDefaultHover: #DFE1E5;
346
+ --bgNeutralDefaultHover-rgb: hex-to-rgb(#DFE1E5);
347
347
  --bgNeutralDefaultActive: #A0A5B1;
348
348
  --bgNeutralDefaultActive-rgb: hex-to-rgb(#A0A5B1);
349
349
  --bgNeutralSubtle: #F3F4F5;
@@ -495,7 +495,7 @@ body {
495
495
  --thirdPartyFacebook-rgb: hex-to-rgb(#4267b2);
496
496
  --thirdPartyTwitter: #1da1f2;
497
497
  --thirdPartyTwitter-rgb: hex-to-rgb(#1da1f2);
498
- --boxShadowXXXSmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
498
+ --boxShadowXXXSmall: 0px 1px 2px 0px rgba(25, 25, 25, 0.08);
499
499
  --boxShadowXXSmall: 0 2px 4px rgba(25, 25, 25, 0.1), 0 0 4px rgba(25, 25, 25, 0.05);
500
500
  --boxShadowSmall: 0 2px 4px rgba(25, 25, 25, 0.05), 0 0 8px rgba(25, 25, 25, 0.05);
501
501
  --boxShadowMedium: 0 2px 8px rgba(25, 25, 25, 0.2), 0 0 8px rgba(25, 25, 25, 0.05);
@@ -507,10 +507,10 @@ body {
507
507
  body.dark {
508
508
  --fgNeutralDefault: #F3F4F5;
509
509
  --fgNeutralDefault-rgb: hex-to-rgb(#F3F4F5);
510
- --fgNeutralSubtle: #878D99;
511
- --fgNeutralSubtle-rgb: hex-to-rgb(#878D99);
512
- --fgNeutralSubtlest: #606773;
513
- --fgNeutralSubtlest-rgb: hex-to-rgb(#606773);
510
+ --fgNeutralSubtle: #B2B6BF;
511
+ --fgNeutralSubtle-rgb: hex-to-rgb(#B2B6BF);
512
+ --fgNeutralSubtlest: #878D99;
513
+ --fgNeutralSubtlest-rgb: hex-to-rgb(#878D99);
514
514
  --fgBrandDefault: #E2CA99;
515
515
  --fgBrandDefault-rgb: hex-to-rgb(#E2CA99);
516
516
  --fgPromoDefault: #A58B4B;
@@ -531,26 +531,26 @@ body.dark {
531
531
  --fgSuccessDefault-rgb: hex-to-rgb(#4DD47A);
532
532
  --fgInverseDefault: #17181C;
533
533
  --fgInverseDefault-rgb: hex-to-rgb(#17181C);
534
- --fgDisabledDefault: #32363E;
535
- --fgDisabledDefault-rgb: hex-to-rgb(#32363E);
534
+ --fgDisabledDefault: #878D99;
535
+ --fgDisabledDefault-rgb: hex-to-rgb(#878D99);
536
536
  --fgWhiteDefault: #ffffff;
537
537
  --fgWhiteDefault-rgb: hex-to-rgb(#ffffff);
538
538
  --bgNeutralDefault: #101114;
539
539
  --bgNeutralDefault-rgb: hex-to-rgb(#101114);
540
- --bgNeutralDefaultHover: #17181C;
541
- --bgNeutralDefaultHover-rgb: hex-to-rgb(#17181C);
540
+ --bgNeutralDefaultHover: #131417;
541
+ --bgNeutralDefaultHover-rgb: hex-to-rgb(#131417);
542
542
  --bgNeutralDefaultActive: #1D1F24;
543
543
  --bgNeutralDefaultActive-rgb: hex-to-rgb(#1D1F24);
544
544
  --bgNeutralSubtle: #17181C;
545
545
  --bgNeutralSubtle-rgb: hex-to-rgb(#17181C);
546
- --bgNeutralSubtleHover: #1D1F24;
547
- --bgNeutralSubtleHover-rgb: hex-to-rgb(#1D1F24);
546
+ --bgNeutralSubtleHover: #1B1C21;
547
+ --bgNeutralSubtleHover-rgb: hex-to-rgb(#1B1C21);
548
548
  --bgNeutralSubtleActive: #27292E;
549
549
  --bgNeutralSubtleActive-rgb: hex-to-rgb(#27292E);
550
550
  --bgNeutralSubtlest: #1D1F24;
551
551
  --bgNeutralSubtlest-rgb: hex-to-rgb(#1D1F24);
552
- --bgNeutralSubtlestHover: #27292E;
553
- --bgNeutralSubtlestHover-rgb: hex-to-rgb(#27292E);
552
+ --bgNeutralSubtlestHover: #222429;
553
+ --bgNeutralSubtlestHover-rgb: hex-to-rgb(#222429);
554
554
  --bgNeutralSubtlestActive: #35373D;
555
555
  --bgNeutralSubtlestActive-rgb: hex-to-rgb(#35373D);
556
556
  --bgBrandDefault: #524326;
@@ -690,12 +690,12 @@ body.dark {
690
690
  --thirdPartyFacebook-rgb: hex-to-rgb(#4267b2);
691
691
  --thirdPartyTwitter: #1da1f2;
692
692
  --thirdPartyTwitter-rgb: hex-to-rgb(#1da1f2);
693
- --boxShadowXXXSmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
694
- --boxShadowXXSmall: 0 2px 4px rgba(25, 25, 25, 0.1), 0 0 4px rgba(25, 25, 25, 0.05);
695
- --boxShadowSmall: 0 2px 4px rgba(25, 25, 25, 0.05), 0 0 8px rgba(25, 25, 25, 0.05);
696
- --boxShadowMedium: 0 2px 8px rgba(25, 25, 25, 0.2), 0 0 8px rgba(25, 25, 25, 0.05);
697
- --boxShadowLarge: 0 2px 8px rgba(25, 25, 25, 0.1), 0 0 16px rgba(25, 25, 25, 0.1);
698
- --boxShadowXLarge: 0 8px 16px rgba(25, 25, 25, 0.1), 0 0 24px rgba(25, 25, 25, 0.2);
693
+ --boxShadowXXXSmall: 0px 1px 2px 0px rgba(25, 25, 25, 0.8);
694
+ --boxShadowXXSmall: 0 2px 4px rgba(25, 25, 25, 0.9), 0 0 4px rgba(25, 25, 25, 0.8);
695
+ --boxShadowSmall: 0 2px 4px rgba(25, 25, 25, 0.8), 0 0 8px rgba(25, 25, 25, 0.8);
696
+ --boxShadowMedium: 0 2px 8px rgba(25, 25, 25, 1), 0 0 8px rgba(25, 25, 25, 0.8);
697
+ --boxShadowLarge: 0 2px 8px rgba(25, 25, 25, 0.9), 0 0 16px rgba(25, 25, 25, 0.9);
698
+ --boxShadowXLarge: 0 8px 16px rgba(25, 25, 25, 0.9), 0 0 24px rgba(25, 25, 25, 1);
699
699
  }
700
700
 
701
701
  /* Styles for users who prefer dark mode at the OS level */
@@ -704,10 +704,10 @@ body.dark {
704
704
  body {
705
705
  --fgNeutralDefault: #F3F4F5;
706
706
  --fgNeutralDefault-rgb: hex-to-rgb(#F3F4F5);
707
- --fgNeutralSubtle: #878D99;
708
- --fgNeutralSubtle-rgb: hex-to-rgb(#878D99);
709
- --fgNeutralSubtlest: #606773;
710
- --fgNeutralSubtlest-rgb: hex-to-rgb(#606773);
707
+ --fgNeutralSubtle: #B2B6BF;
708
+ --fgNeutralSubtle-rgb: hex-to-rgb(#B2B6BF);
709
+ --fgNeutralSubtlest: #878D99;
710
+ --fgNeutralSubtlest-rgb: hex-to-rgb(#878D99);
711
711
  --fgBrandDefault: #E2CA99;
712
712
  --fgBrandDefault-rgb: hex-to-rgb(#E2CA99);
713
713
  --fgPromoDefault: #A58B4B;
@@ -728,26 +728,26 @@ body.dark {
728
728
  --fgSuccessDefault-rgb: hex-to-rgb(#4DD47A);
729
729
  --fgInverseDefault: #17181C;
730
730
  --fgInverseDefault-rgb: hex-to-rgb(#17181C);
731
- --fgDisabledDefault: #32363E;
732
- --fgDisabledDefault-rgb: hex-to-rgb(#32363E);
731
+ --fgDisabledDefault: #878D99;
732
+ --fgDisabledDefault-rgb: hex-to-rgb(#878D99);
733
733
  --fgWhiteDefault: #ffffff;
734
734
  --fgWhiteDefault-rgb: hex-to-rgb(#ffffff);
735
735
  --bgNeutralDefault: #101114;
736
736
  --bgNeutralDefault-rgb: hex-to-rgb(#101114);
737
- --bgNeutralDefaultHover: #17181C;
738
- --bgNeutralDefaultHover-rgb: hex-to-rgb(#17181C);
737
+ --bgNeutralDefaultHover: #131417;
738
+ --bgNeutralDefaultHover-rgb: hex-to-rgb(#131417);
739
739
  --bgNeutralDefaultActive: #1D1F24;
740
740
  --bgNeutralDefaultActive-rgb: hex-to-rgb(#1D1F24);
741
741
  --bgNeutralSubtle: #17181C;
742
742
  --bgNeutralSubtle-rgb: hex-to-rgb(#17181C);
743
- --bgNeutralSubtleHover: #1D1F24;
744
- --bgNeutralSubtleHover-rgb: hex-to-rgb(#1D1F24);
743
+ --bgNeutralSubtleHover: #1B1C21;
744
+ --bgNeutralSubtleHover-rgb: hex-to-rgb(#1B1C21);
745
745
  --bgNeutralSubtleActive: #27292E;
746
746
  --bgNeutralSubtleActive-rgb: hex-to-rgb(#27292E);
747
747
  --bgNeutralSubtlest: #1D1F24;
748
748
  --bgNeutralSubtlest-rgb: hex-to-rgb(#1D1F24);
749
- --bgNeutralSubtlestHover: #27292E;
750
- --bgNeutralSubtlestHover-rgb: hex-to-rgb(#27292E);
749
+ --bgNeutralSubtlestHover: #222429;
750
+ --bgNeutralSubtlestHover-rgb: hex-to-rgb(#222429);
751
751
  --bgNeutralSubtlestActive: #35373D;
752
752
  --bgNeutralSubtlestActive-rgb: hex-to-rgb(#35373D);
753
753
  --bgBrandDefault: #524326;
@@ -887,12 +887,12 @@ body.dark {
887
887
  --thirdPartyFacebook-rgb: hex-to-rgb(#4267b2);
888
888
  --thirdPartyTwitter: #1da1f2;
889
889
  --thirdPartyTwitter-rgb: hex-to-rgb(#1da1f2);
890
- --boxShadowXXXSmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
891
- --boxShadowXXSmall: 0 2px 4px rgba(25, 25, 25, 0.1), 0 0 4px rgba(25, 25, 25, 0.05);
892
- --boxShadowSmall: 0 2px 4px rgba(25, 25, 25, 0.05), 0 0 8px rgba(25, 25, 25, 0.05);
893
- --boxShadowMedium: 0 2px 8px rgba(25, 25, 25, 0.2), 0 0 8px rgba(25, 25, 25, 0.05);
894
- --boxShadowLarge: 0 2px 8px rgba(25, 25, 25, 0.1), 0 0 16px rgba(25, 25, 25, 0.1);
895
- --boxShadowXLarge: 0 8px 16px rgba(25, 25, 25, 0.1), 0 0 24px rgba(25, 25, 25, 0.2);
890
+ --boxShadowXXXSmall: 0px 1px 2px 0px rgba(25, 25, 25, 0.8);
891
+ --boxShadowXXSmall: 0 2px 4px rgba(25, 25, 25, 0.9), 0 0 4px rgba(25, 25, 25, 0.8);
892
+ --boxShadowSmall: 0 2px 4px rgba(25, 25, 25, 0.8), 0 0 8px rgba(25, 25, 25, 0.8);
893
+ --boxShadowMedium: 0 2px 8px rgba(25, 25, 25, 1), 0 0 8px rgba(25, 25, 25, 0.8);
894
+ --boxShadowLarge: 0 2px 8px rgba(25, 25, 25, 0.9), 0 0 16px rgba(25, 25, 25, 0.9);
895
+ --boxShadowXLarge: 0 8px 16px rgba(25, 25, 25, 0.9), 0 0 24px rgba(25, 25, 25, 1);
896
896
  }
897
897
  /* Override dark mode with light mode styles if the user decides to swap */
898
898
  body.light {
@@ -928,8 +928,8 @@ body.dark {
928
928
  --fgWhiteDefault-rgb: hex-to-rgb(#ffffff);
929
929
  --bgNeutralDefault: #E8EAED;
930
930
  --bgNeutralDefault-rgb: hex-to-rgb(#E8EAED);
931
- --bgNeutralDefaultHover: #D5D7DD;
932
- --bgNeutralDefaultHover-rgb: hex-to-rgb(#D5D7DD);
931
+ --bgNeutralDefaultHover: #DFE1E5;
932
+ --bgNeutralDefaultHover-rgb: hex-to-rgb(#DFE1E5);
933
933
  --bgNeutralDefaultActive: #A0A5B1;
934
934
  --bgNeutralDefaultActive-rgb: hex-to-rgb(#A0A5B1);
935
935
  --bgNeutralSubtle: #F3F4F5;
@@ -1081,7 +1081,7 @@ body.dark {
1081
1081
  --thirdPartyFacebook-rgb: hex-to-rgb(#4267b2);
1082
1082
  --thirdPartyTwitter: #1da1f2;
1083
1083
  --thirdPartyTwitter-rgb: hex-to-rgb(#1da1f2);
1084
- --boxShadowXXXSmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
1084
+ --boxShadowXXXSmall: 0px 1px 2px 0px rgba(25, 25, 25, 0.08);
1085
1085
  --boxShadowXXSmall: 0 2px 4px rgba(25, 25, 25, 0.1), 0 0 4px rgba(25, 25, 25, 0.05);
1086
1086
  --boxShadowSmall: 0 2px 4px rgba(25, 25, 25, 0.05), 0 0 8px rgba(25, 25, 25, 0.05);
1087
1087
  --boxShadowMedium: 0 2px 8px rgba(25, 25, 25, 0.2), 0 0 8px rgba(25, 25, 25, 0.05);
@@ -1295,7 +1295,7 @@ body {
1295
1295
  --backgroundHoverCard: var(--bgNeutralSubtlestHover);
1296
1296
  --borderCard: none;
1297
1297
  --borderRadiusCard: var(--borderRadiusMedium);
1298
- --boxShadowCard: none;
1298
+ --boxShadowCard: var(--boxShadowXXSmall);
1299
1299
  --paddingCard: var(--spaceLarge);
1300
1300
  --backgroundSelectedCard: var(--bgNeutralSubtlest);
1301
1301
  --backgroundNeutralCard: var(--bgNeutralSubtle);
@@ -1603,7 +1603,7 @@ body {
1603
1603
  --paddingAvatarListFileUpload: var(--spaceMedium);
1604
1604
  --backgroundBody: var(--surfaceDefault);
1605
1605
  --minWidthBody: 320px;
1606
- --maxWidthCenterMain: 740px + 2 * var(--spaceXLarge);
1606
+ --maxWidthCenterMain: 800px + 2 * var(--spaceXLarge);
1607
1607
  --backgroundHeader: var(--surfaceRisen);
1608
1608
  --boxShadowHeader: var(--boxShadowXXXSmall);
1609
1609
  --colorHeader: var(--fgNeutralDefault);
@@ -1618,12 +1618,12 @@ body {
1618
1618
  --paddingMobileHeader: 0 var(--spaceMedium);
1619
1619
  --backgroundMobilePanel: var(--surfaceRisen);
1620
1620
  --widthMobilePanel: 320px;
1621
- --paddingBodyMobilePanel: var(--spaceLarge);
1622
- --backgroundSecondaryMobilePanel: var(--bgNeutralDefault);
1621
+ --paddingBodyMobilePanel: var(--spaceSmall);
1622
+ --backgroundSecondaryMobilePanel: var(--surfaceDefault);
1623
1623
  --paddingBodySecondaryMobilePanel: var(--spaceLarge) var(--spaceXSmall);
1624
- --backgroundHeaderMobilePanel: var(--gradientBlueRedDark);
1625
- --colorHeaderMobilePanel: var(--fgInverseDefault);
1626
- --paddingHeaderMobilePanel: var(--spaceLarge) var(--spaceXSmall) var(--spaceLarge) var(--spaceLarge);
1624
+ --backgroundHeaderMobilePanel: transparent;
1625
+ --colorHeaderMobilePanel: var(--fgWhiteDefault);
1626
+ --paddingHeaderMobilePanel: var(--spaceSmall) var(--spaceXSmall) var(--spaceXSmall) var(--spaceSmall);
1627
1627
  --colorHeaderImageMobilePanel: var(--fgBrandDefault);
1628
1628
  --backgroundHeaderSecondaryMobilePanel: transparent;
1629
1629
  --colorHeaderSecondaryMobilePanel: var(--fgNeutralDefault);
@@ -1660,13 +1660,14 @@ body {
1660
1660
  --widthSelectedMenuItem: calc(100% - 4px);
1661
1661
  --marginSelectedMenuItem: 2px;
1662
1662
  --backgroundSubmenu: var(--bgNeutralDefault);
1663
- --colorLinkMobileMenu: var(--fgBrandDefault);
1664
- --colorLinkHoverMobileMenu: var(--fgLinkDefaultHover);
1665
- --colorLinkActiveMobileMenu: var(--fgLinkDefaultPressed);
1666
- --colorLinkSelectedMobileMenu: var(--fgBrandDefault);
1663
+ --colorLinkMobileMenu: var(--fgWhiteDefault);
1664
+ --colorLinkHoverMobileMenu: var(--fgWhiteDefault);
1665
+ --colorLinkActiveMobileMenu: var(--fgWhiteDefault);
1666
+ --colorLinkSelectedMobileMenu: var(--fgWhiteDefault);
1667
1667
  --fontSizeListMobileMenu: var(--fontSizeSmall);
1668
1668
  --marginTopItemMobileMenu: 0;
1669
- --paddingLinkMobileMenu: var(--spaceMedium) var(--spaceXSmall);
1669
+ --paddingLinkMobileMenu: var(--spaceSmall) var(--spaceSmall);
1670
+ --colorIconLinkMobileMenu: var(--fgWhiteDefault);
1670
1671
  --fontSizeTitleStepper: var(--fontSizeXSmall);
1671
1672
  --fontSizeIconStepper: var(--fontSizeSmall);
1672
1673
  --fontWeightIconStepper: var(--fontWeightBold);
@@ -1893,7 +1894,7 @@ body:not(.user-is-tabbing) *:focus {
1893
1894
  .l-app--fixedHeader {
1894
1895
  padding-top: var(--heightMobileHeader);
1895
1896
  }
1896
- @media screen and (min-width: 992px) {
1897
+ @media screen and (min-width: 1200px) {
1897
1898
  .l-app--fixedHeader {
1898
1899
  padding-top: var(--heightHeader);
1899
1900
  }
@@ -1915,7 +1916,7 @@ body:not(.user-is-tabbing) *:focus {
1915
1916
  position: fixed;
1916
1917
  top: var(--heightMobileHeader);
1917
1918
  }
1918
- @media screen and (min-width: 992px) {
1919
+ @media screen and (min-width: 1200px) {
1919
1920
  .l-app--fixedMenuMain .l-content > .m-menu--main {
1920
1921
  top: var(--heightHeader);
1921
1922
  }
@@ -1943,7 +1944,7 @@ body {
1943
1944
  display: flex;
1944
1945
  min-height: calc(100vh - var(--heightMobileHeader));
1945
1946
  }
1946
- @media screen and (min-width: 992px) {
1947
+ @media screen and (min-width: 1200px) {
1947
1948
  .l-content {
1948
1949
  min-height: calc(100vh - var(--heightHeader));
1949
1950
  }
@@ -3164,7 +3165,7 @@ body {
3164
3165
  margin-right: var(--spaceXSmall);
3165
3166
  }
3166
3167
 
3167
- @media screen and (max-width: 991px) {
3168
+ @media screen and (max-width: 1199px) {
3168
3169
  .l-header .m-menu .m-menu__text {
3169
3170
  border: 0;
3170
3171
  clip: rect(0 0 0 0);
@@ -3180,7 +3181,7 @@ body {
3180
3181
  margin-left: calc(var(--spaceXSmall) / 2);
3181
3182
  }
3182
3183
  }
3183
- @media screen and (min-width: 992px) {
3184
+ @media screen and (min-width: 1200px) {
3184
3185
  .l-header {
3185
3186
  height: var(--heightHeader);
3186
3187
  padding: var(--paddingHeader);
@@ -3256,6 +3257,7 @@ body.dark .l-header .c-logo__img--dark {
3256
3257
  }
3257
3258
  }
3258
3259
  .l-mobilePanel--main {
3260
+ background: var(--backgroundMainMenu);
3259
3261
  z-index: 1600;
3260
3262
  }
3261
3263
  .l-mobilePanel .m-menu + .m-menu {
@@ -3280,7 +3282,6 @@ body.dark .l-header .c-logo__img--dark {
3280
3282
  }
3281
3283
  .l-mobilePanel .m-menu__list .m-menu__item {
3282
3284
  margin-left: 0;
3283
- margin-bottom: var(--spaceSmall);
3284
3285
  }
3285
3286
  }
3286
3287
 
@@ -3319,12 +3320,8 @@ body.dark .l-header .c-logo__img--dark {
3319
3320
  order: 1;
3320
3321
  }
3321
3322
  .l-mobilePanel__header .l-mobilePanel__close {
3322
- color: var(--fgInverseDefault);
3323
3323
  order: 2;
3324
3324
  }
3325
- .l-mobilePanel__header .l-mobilePanel__close:hover, .l-mobilePanel__header .l-mobilePanel__close:focus {
3326
- color: var(--fgInverseDefault);
3327
- }
3328
3325
 
3329
3326
  .l-mobilePanel__headerImage {
3330
3327
  margin-right: var(--spaceMedium);
@@ -6635,7 +6632,7 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
6635
6632
  display: none;
6636
6633
  }
6637
6634
  .custom-datepicker .react-datepicker-header {
6638
- background: var(--bgBrandDefaultHover);
6635
+ background: var(--bgNeutralDefault);
6639
6636
  padding-top: 0.25rem;
6640
6637
  padding-bottom: 0.25rem;
6641
6638
  align-items: center;
@@ -6652,11 +6649,11 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
6652
6649
  border-bottom: none;
6653
6650
  }
6654
6651
  .custom-datepicker .react-datepicker__day-names {
6655
- background: var(--bgBrandBold);
6652
+ background: var(--bgNeutralSubtle);
6656
6653
  margin-bottom: 8px;
6657
6654
  }
6658
6655
  .custom-datepicker .react-datepicker__day-names > * {
6659
- color: var(--fgInverseDefault) !important;
6656
+ color: var(--fgNeutralDefault) !important;
6660
6657
  }
6661
6658
  .custom-datepicker .react-datepicker__month-text, .custom-datepicker .react-datepicker__year-text, .custom-datepicker .react-datepicker__day {
6662
6659
  width: 2.25rem;
@@ -6688,13 +6685,14 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
6688
6685
  .custom-datepicker .react-datepicker__month-text--keyboard-selected, .custom-datepicker .react-datepicker__year-text--keyboard-selected, .custom-datepicker .react-datepicker__day--keyboard-selected {
6689
6686
  background-color: unset;
6690
6687
  }
6691
- .custom-datepicker .react-datepicker__month-text--selected, .custom-datepicker .react-datepicker__year-text--selected, .custom-datepicker .react-datepicker__day--selected {
6692
- background: var(--bgBrandBold);
6693
- border-color: var(--borderBrandDefault);
6694
- color: var(--fgInverseDefault);
6695
- }
6696
6688
  .custom-datepicker .react-datepicker__month-text--today, .custom-datepicker .react-datepicker__year-text--today, .custom-datepicker .react-datepicker__day--today {
6697
6689
  font-weight: normal;
6690
+ border-radius: 50% !important;
6691
+ }
6692
+ .custom-datepicker .react-datepicker__month-text--today.react-datepicker__day--selected, .custom-datepicker .react-datepicker__year-text--today.react-datepicker__day--selected, .custom-datepicker .react-datepicker__day--today.react-datepicker__day--selected {
6693
+ background: var(--bgBrandBold) !important;
6694
+ border-color: var(--borderBrandDefault) !important;
6695
+ color: var(--fgInverseDefault) !important;
6698
6696
  }
6699
6697
  .custom-datepicker .react-datepicker__month-text--today:not(.react-datepicker__month-text--disabled,
6700
6698
  .react-datepicker__year-text--disabled,
@@ -6723,6 +6721,11 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
6723
6721
  background: var(--bgBrandDefaultHover);
6724
6722
  border-color: var(--borderNeutralDefault);
6725
6723
  }
6724
+ .custom-datepicker .react-datepicker__month-text--selected, .custom-datepicker .react-datepicker__year-text--selected, .custom-datepicker .react-datepicker__day--selected {
6725
+ background: var(--bgBrandBold);
6726
+ border-color: var(--borderBrandDefault);
6727
+ color: var(--fgInverseDefault);
6728
+ }
6726
6729
  .custom-datepicker .react-datepicker__year-text, .custom-datepicker .react-datepicker__month-text {
6727
6730
  text-transform: capitalize;
6728
6731
  border-radius: 20px !important;
@@ -7498,7 +7501,7 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
7498
7501
  .m-menu--main .m-menu__link .c-avatar {
7499
7502
  color: var(--colorIconLinkMainMenu);
7500
7503
  }
7501
- @media screen and (max-width: 991px) {
7504
+ @media screen and (max-width: 1199px) {
7502
7505
  .m-menu--main .m-menu {
7503
7506
  display: none;
7504
7507
  }
@@ -7522,7 +7525,7 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
7522
7525
  .m-menu--secondary .m-menu__item--open .m-menu__subMenu {
7523
7526
  padding-top: var(--marginTopItemSecondaryMenu);
7524
7527
  }
7525
- @media screen and (max-width: 991px) {
7528
+ @media screen and (max-width: 1199px) {
7526
7529
  .m-menu--secondary .m-menu {
7527
7530
  display: none;
7528
7531
  }
@@ -7573,6 +7576,7 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
7573
7576
  margin-top: var(--marginTopItemMobileMenu);
7574
7577
  }
7575
7578
  .m-menu--mobile .m-menu__item--selected .m-menu__link {
7579
+ background: var(--backgroundLinkSelectedMainMenu);
7576
7580
  color: var(--colorLinkSelectedMobileMenu);
7577
7581
  font-weight: var(--fontWeightBold);
7578
7582
  }
@@ -7586,8 +7590,9 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
7586
7590
  .m-menu--mobile .m-menu__link:active {
7587
7591
  color: var(--colorLinkActiveMobileMenu);
7588
7592
  }
7589
- .m-menu--mobile .c-avatar {
7593
+ .m-menu--mobile .m-menu__link .c-avatar {
7590
7594
  flex: 0 0 24px;
7595
+ color: var(--colorIconLinkMobileMenu);
7591
7596
  }
7592
7597
 
7593
7598
  .m-stepper__list {
@@ -9356,7 +9361,7 @@ body.dark .u-fg--fgWhiteDefault {
9356
9361
  /* Slider */
9357
9362
  .slick-loading .slick-list
9358
9363
  {
9359
- background: #fff url('assets/05e80458cf10b294138d.gif') center center no-repeat;
9364
+ background: #fff url('assets/04de12905acce4a8e74c.gif') center center no-repeat;
9360
9365
  }
9361
9366
 
9362
9367
  /* Icons */
@@ -9366,8 +9371,8 @@ body.dark .u-fg--fgWhiteDefault {
9366
9371
  font-weight: normal;
9367
9372
  font-style: normal;
9368
9373
 
9369
- src: url('assets/8c5a7cb008a350f82320.eot');
9370
- src: url('assets/34f176b4280e7b2a37e0.eot') format('embedded-opentype'), url('assets/1d497af67dbe8a82c527.woff') format('woff'), url('assets/a05fcf4a982f62c9cdeb.ttf') format('truetype'), url('assets/368d28a3df1450ec8e99.svg') format('svg');
9374
+ src: url('assets/0415321ec7aa7fb2715d.eot');
9375
+ src: url('assets/4b25737854a19a7d1861.eot') format('embedded-opentype'), url('assets/cdaf0e24f85681c9fdf6.woff') format('woff'), url('assets/2ff765342498185458f0.ttf') format('truetype'), url('assets/4c439ad3ea14fee92608.svg') format('svg');
9371
9376
  }
9372
9377
  /* Arrows */
9373
9378
  .slick-prev,
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "module": "./index.js",
4
4
  "typings": "./index.d.ts",
5
5
  "name": "@mmb-digital/ds-lilly",
6
- "version": "1.0.0-alpha.71",
6
+ "version": "1.0.0-alpha.73",
7
7
  "description": "MMB LILLY design system",
8
8
  "license": "UNLICENSED",
9
9
  "sideEffects": [
@@ -49,4 +49,4 @@
49
49
  "react-router-dom": "5.1.2"
50
50
  },
51
51
  "private": false
52
- }
52
+ }