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

package/cjs/ds-lilly.css

@@ -577,12 +577,12 @@ body.dark {
   --bgInfoDefaultHover-rgb: hex-to-rgb(#1C2841);
   --bgInfoDefaultPressed: #1C2841;
   --bgInfoDefaultPressed-rgb: hex-to-rgb(#1C2841);
-  --bgInfoBold: #3877FF;
-  --bgInfoBold-rgb: hex-to-rgb(#3877FF);
-  --bgInfoBoldHover: #003DBF;
-  --bgInfoBoldHover-rgb: hex-to-rgb(#003DBF);
-  --bgInfoBoldPressed: #082666;
-  --bgInfoBoldPressed-rgb: hex-to-rgb(#082666);
+  --bgInfoBold: #85ACFF;
+  --bgInfoBold-rgb: hex-to-rgb(#85ACFF);
+  --bgInfoBoldHover: #1C65FD;
+  --bgInfoBoldHover-rgb: hex-to-rgb(#1C65FD);
+  --bgInfoBoldPressed: #0C50E4;
+  --bgInfoBoldPressed-rgb: hex-to-rgb(#0C50E4);
   --bgErrorDefault: #42221F;
   --bgErrorDefault-rgb: hex-to-rgb(#42221F);
   --bgErrorDefaultHover: #FFD6D2;
@@ -774,12 +774,12 @@ body.dark {
     --bgInfoDefaultHover-rgb: hex-to-rgb(#1C2841);
     --bgInfoDefaultPressed: #1C2841;
     --bgInfoDefaultPressed-rgb: hex-to-rgb(#1C2841);
-    --bgInfoBold: #3877FF;
-    --bgInfoBold-rgb: hex-to-rgb(#3877FF);
-    --bgInfoBoldHover: #003DBF;
-    --bgInfoBoldHover-rgb: hex-to-rgb(#003DBF);
-    --bgInfoBoldPressed: #082666;
-    --bgInfoBoldPressed-rgb: hex-to-rgb(#082666);
+    --bgInfoBold: #85ACFF;
+    --bgInfoBold-rgb: hex-to-rgb(#85ACFF);
+    --bgInfoBoldHover: #1C65FD;
+    --bgInfoBoldHover-rgb: hex-to-rgb(#1C65FD);
+    --bgInfoBoldPressed: #0C50E4;
+    --bgInfoBoldPressed-rgb: hex-to-rgb(#0C50E4);
     --bgErrorDefault: #42221F;
     --bgErrorDefault-rgb: hex-to-rgb(#42221F);
     --bgErrorDefaultHover: #FFD6D2;
@@ -1295,7 +1295,7 @@ body {
   --backgroundHoverCard: var(--bgNeutralSubtlestHover);
   --borderCard: none;
   --borderRadiusCard: var(--borderRadiusMedium);
-  --boxShadowCard: var(--boxShadowXXSmall);
+  --boxShadowCard: 0px 0px 0px 1px var(--borderNeutralSubtle);
   --paddingCard: var(--spaceLarge);
   --backgroundSelectedCard: var(--bgNeutralSubtlest);
   --backgroundNeutralCard: var(--bgNeutralSubtle);
@@ -1619,7 +1619,7 @@ body {
   --backgroundMobilePanel: var(--surfaceRisen);
   --widthMobilePanel: 320px;
   --paddingBodyMobilePanel: var(--spaceSmall);
-  --backgroundSecondaryMobilePanel: var(--surfaceDefault);
+  --backgroundSecondaryMobilePanel: var(--bgNeutralDefault);
   --paddingBodySecondaryMobilePanel: var(--spaceLarge) var(--spaceXSmall);
   --backgroundHeaderMobilePanel: transparent;
   --colorHeaderMobilePanel: var(--fgWhiteDefault);
@@ -3276,13 +3276,12 @@ body.dark .l-header .c-logo__img--dark {
     width: var(--widthMobilePanel);
   }
 }
-@media screen and (min-width: 480px) {
-  .l-mobilePanel .m-menu__list {
-    display: block;
-  }
-  .l-mobilePanel .m-menu__list .m-menu__item {
-    margin-left: 0;
-  }
+.l-mobilePanel .m-menu__list {
+  display: block;
+}
+.l-mobilePanel .m-menu__list .m-menu__item {
+  margin-top: var(--marginTopItemSecondaryMenu);
+  margin-left: 0;
 }
 
 .l-mobilePanel--secondary {
@@ -3290,6 +3289,7 @@ body.dark .l-header .c-logo__img--dark {
 }
 .l-mobilePanel--secondary .l-mobilePanel__header {
   background: var(--backgroundHeaderSecondaryMobilePanel);
+  color: var(--colorHeaderSecondaryMobilePanel);
 }
 .l-mobilePanel--secondary .l-mobilePanel__header .l-mobilePanel__close {
   color: var(--fgLinkDefault);
@@ -3344,27 +3344,6 @@ body.dark .l-header .c-logo__img--dark {
   padding: 0 var(--spaceMedium);
 }
 
-.l-mobilePanel--secondary .l-mobilePanel__header,
-.l-mobilePanel--secondary .l-mobilePanel__close {
-  color: var(--colorHeaderSecondaryMobilePanel);
-}
-
-body.light .l-mobilePanel--secondary .l-mobilePanel__header,
-body.light .l-mobilePanel--secondary .l-mobilePanel__close {
-  color: var(--colorHeaderSecondaryMobilePanel);
-}
-
-@media (prefers-color-scheme: dark) {
-  .l-mobilePanel--secondary .l-mobilePanel__header,
-  .l-mobilePanel--secondary .l-mobilePanel__close {
-    color: var(--colorHeaderSecondaryMobilePanel);
-  }
-}
-body.dark .l-mobilePanel--secondary .l-mobilePanel__header,
-body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
-  color: var(--colorHeaderSecondaryMobilePanel);
-}
-
 .l-sidebar {
   background: var(--backgroundSidebar);
   max-width: var(--widthSidebar);
@@ -7488,6 +7467,68 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
 .m-menu--main .m-menu__item--button:first-child {
   padding: var(--paddingItemFirstButtonMainMenu);
 }
+.m-menu--main .m-menu__item--button:first-child .c-btn {
+  background: var(--backgroundBorderBtn);
+  border: var(--borderBorderBtn);
+  color: var(--colorBorderBtn);
+}
+.m-menu--main .m-menu__item--button:first-child .c-btn:hover, .m-menu--main .m-menu__item--button:first-child .c-btn:focus {
+  background: var(--backgroundHoverBorderBtn);
+  border: var(--borderHoverBorderBtn);
+  color: var(--colorHoverBorderBtn);
+}
+.m-menu--main .m-menu__item--button:first-child .c-btn:active {
+  background: var(--backgroundActiveBorderBtn);
+  border: var(--borderActiveBorderBtn);
+  color: var(--colorActiveBorderBtn);
+}
+.m-menu--main .m-menu__item--button:first-child body.light .c-btn {
+  background: var(--backgroundBorderBtn);
+  border: var(--borderBorderBtn);
+  color: var(--colorBorderBtn);
+}
+.m-menu--main .m-menu__item--button:first-child body.light .c-btn:hover, .m-menu--main .m-menu__item--button:first-child body.light .c-btn:focus {
+  background: var(--backgroundHoverBorderBtn);
+  border: var(--borderHoverBorderBtn);
+  color: var(--colorHoverBorderBtn);
+}
+.m-menu--main .m-menu__item--button:first-child body.light .c-btn:active {
+  background: var(--backgroundActiveBorderBtn);
+  border: var(--borderActiveBorderBtn);
+  color: var(--colorActiveBorderBtn);
+}
+@media (prefers-color-scheme: dark) {
+  .m-menu--main .m-menu__item--button:first-child .c-btn {
+    background: var(--backgroundBtn);
+    border: var(--borderBtn);
+    color: var(--colorBtn);
+  }
+  .m-menu--main .m-menu__item--button:first-child .c-btn:hover, .m-menu--main .m-menu__item--button:first-child .c-btn:focus {
+    background: var(--backgroundHoverBtn);
+    border: var(--borderHoverBtn);
+    color: var(--colorHoverBtn);
+  }
+  .m-menu--main .m-menu__item--button:first-child .c-btn:active {
+    background: var(--backgroundActiveBtn);
+    border: var(--borderActiveBtn);
+    color: var(--colorActiveBtn);
+  }
+}
+.m-menu--main .m-menu__item--button:first-child body.dark .c-btn {
+  background: var(--backgroundBtn);
+  border: var(--borderBtn);
+  color: var(--colorBtn);
+}
+.m-menu--main .m-menu__item--button:first-child body.dark .c-btn:hover, .m-menu--main .m-menu__item--button:first-child body.dark .c-btn:focus {
+  background: var(--backgroundHoverBtn);
+  border: var(--borderHoverBtn);
+  color: var(--colorHoverBtn);
+}
+.m-menu--main .m-menu__item--button:first-child body.dark .c-btn:active {
+  background: var(--backgroundActiveBtn);
+  border: var(--borderActiveBtn);
+  color: var(--colorActiveBtn);
+}
 .m-menu--main .m-menu__link {
   padding: var(--paddingLinkMainMenu);
   border-radius: var(--borderRadiusMedium);
@@ -9361,7 +9402,7 @@ body.dark .u-fg--fgWhiteDefault {
 /* Slider */
 .slick-loading .slick-list
 {
-    background: #fff url('assets/c21ba2486ce945aee620.gif') center center no-repeat;
+    background: #fff url('assets/f4cc6e414061bb5c0db9.gif') center center no-repeat;
 }
 
 /* Icons */
@@ -9371,8 +9412,8 @@ body.dark .u-fg--fgWhiteDefault {
     font-weight: normal;
     font-style: normal;
 
-    src: url('assets/85bb12a8f0024be33d11.eot');
-    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');
+    src: url('assets/1e29091d929b6b14509d.eot');
+    src: url('assets/9c52e2b4674a57ee98cf.eot') format('embedded-opentype'), url('assets/05bac7c424ee5f39ce7e.woff') format('woff'), url('assets/721c653228e7763e5733.ttf') format('truetype'), url('assets/65130887983cf9bece20.svg') format('svg');
 }
 /* Arrows */
 .slick-prev,

package/ds-lilly.css

@@ -577,12 +577,12 @@ body.dark {
   --bgInfoDefaultHover-rgb: hex-to-rgb(#1C2841);
   --bgInfoDefaultPressed: #1C2841;
   --bgInfoDefaultPressed-rgb: hex-to-rgb(#1C2841);
-  --bgInfoBold: #3877FF;
-  --bgInfoBold-rgb: hex-to-rgb(#3877FF);
-  --bgInfoBoldHover: #003DBF;
-  --bgInfoBoldHover-rgb: hex-to-rgb(#003DBF);
-  --bgInfoBoldPressed: #082666;
-  --bgInfoBoldPressed-rgb: hex-to-rgb(#082666);
+  --bgInfoBold: #85ACFF;
+  --bgInfoBold-rgb: hex-to-rgb(#85ACFF);
+  --bgInfoBoldHover: #1C65FD;
+  --bgInfoBoldHover-rgb: hex-to-rgb(#1C65FD);
+  --bgInfoBoldPressed: #0C50E4;
+  --bgInfoBoldPressed-rgb: hex-to-rgb(#0C50E4);
   --bgErrorDefault: #42221F;
   --bgErrorDefault-rgb: hex-to-rgb(#42221F);
   --bgErrorDefaultHover: #FFD6D2;
@@ -774,12 +774,12 @@ body.dark {
     --bgInfoDefaultHover-rgb: hex-to-rgb(#1C2841);
     --bgInfoDefaultPressed: #1C2841;
     --bgInfoDefaultPressed-rgb: hex-to-rgb(#1C2841);
-    --bgInfoBold: #3877FF;
-    --bgInfoBold-rgb: hex-to-rgb(#3877FF);
-    --bgInfoBoldHover: #003DBF;
-    --bgInfoBoldHover-rgb: hex-to-rgb(#003DBF);
-    --bgInfoBoldPressed: #082666;
-    --bgInfoBoldPressed-rgb: hex-to-rgb(#082666);
+    --bgInfoBold: #85ACFF;
+    --bgInfoBold-rgb: hex-to-rgb(#85ACFF);
+    --bgInfoBoldHover: #1C65FD;
+    --bgInfoBoldHover-rgb: hex-to-rgb(#1C65FD);
+    --bgInfoBoldPressed: #0C50E4;
+    --bgInfoBoldPressed-rgb: hex-to-rgb(#0C50E4);
     --bgErrorDefault: #42221F;
     --bgErrorDefault-rgb: hex-to-rgb(#42221F);
     --bgErrorDefaultHover: #FFD6D2;
@@ -1295,7 +1295,7 @@ body {
   --backgroundHoverCard: var(--bgNeutralSubtlestHover);
   --borderCard: none;
   --borderRadiusCard: var(--borderRadiusMedium);
-  --boxShadowCard: var(--boxShadowXXSmall);
+  --boxShadowCard: 0px 0px 0px 1px var(--borderNeutralSubtle);
   --paddingCard: var(--spaceLarge);
   --backgroundSelectedCard: var(--bgNeutralSubtlest);
   --backgroundNeutralCard: var(--bgNeutralSubtle);
@@ -1619,7 +1619,7 @@ body {
   --backgroundMobilePanel: var(--surfaceRisen);
   --widthMobilePanel: 320px;
   --paddingBodyMobilePanel: var(--spaceSmall);
-  --backgroundSecondaryMobilePanel: var(--surfaceDefault);
+  --backgroundSecondaryMobilePanel: var(--bgNeutralDefault);
   --paddingBodySecondaryMobilePanel: var(--spaceLarge) var(--spaceXSmall);
   --backgroundHeaderMobilePanel: transparent;
   --colorHeaderMobilePanel: var(--fgWhiteDefault);
@@ -3276,13 +3276,12 @@ body.dark .l-header .c-logo__img--dark {
     width: var(--widthMobilePanel);
   }
 }
-@media screen and (min-width: 480px) {
-  .l-mobilePanel .m-menu__list {
-    display: block;
-  }
-  .l-mobilePanel .m-menu__list .m-menu__item {
-    margin-left: 0;
-  }
+.l-mobilePanel .m-menu__list {
+  display: block;
+}
+.l-mobilePanel .m-menu__list .m-menu__item {
+  margin-top: var(--marginTopItemSecondaryMenu);
+  margin-left: 0;
 }
 
 .l-mobilePanel--secondary {
@@ -3290,6 +3289,7 @@ body.dark .l-header .c-logo__img--dark {
 }
 .l-mobilePanel--secondary .l-mobilePanel__header {
   background: var(--backgroundHeaderSecondaryMobilePanel);
+  color: var(--colorHeaderSecondaryMobilePanel);
 }
 .l-mobilePanel--secondary .l-mobilePanel__header .l-mobilePanel__close {
   color: var(--fgLinkDefault);
@@ -3344,27 +3344,6 @@ body.dark .l-header .c-logo__img--dark {
   padding: 0 var(--spaceMedium);
 }
 
-.l-mobilePanel--secondary .l-mobilePanel__header,
-.l-mobilePanel--secondary .l-mobilePanel__close {
-  color: var(--colorHeaderSecondaryMobilePanel);
-}
-
-body.light .l-mobilePanel--secondary .l-mobilePanel__header,
-body.light .l-mobilePanel--secondary .l-mobilePanel__close {
-  color: var(--colorHeaderSecondaryMobilePanel);
-}
-
-@media (prefers-color-scheme: dark) {
-  .l-mobilePanel--secondary .l-mobilePanel__header,
-  .l-mobilePanel--secondary .l-mobilePanel__close {
-    color: var(--colorHeaderSecondaryMobilePanel);
-  }
-}
-body.dark .l-mobilePanel--secondary .l-mobilePanel__header,
-body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
-  color: var(--colorHeaderSecondaryMobilePanel);
-}
-
 .l-sidebar {
   background: var(--backgroundSidebar);
   max-width: var(--widthSidebar);
@@ -7488,6 +7467,68 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
 .m-menu--main .m-menu__item--button:first-child {
   padding: var(--paddingItemFirstButtonMainMenu);
 }
+.m-menu--main .m-menu__item--button:first-child .c-btn {
+  background: var(--backgroundBorderBtn);
+  border: var(--borderBorderBtn);
+  color: var(--colorBorderBtn);
+}
+.m-menu--main .m-menu__item--button:first-child .c-btn:hover, .m-menu--main .m-menu__item--button:first-child .c-btn:focus {
+  background: var(--backgroundHoverBorderBtn);
+  border: var(--borderHoverBorderBtn);
+  color: var(--colorHoverBorderBtn);
+}
+.m-menu--main .m-menu__item--button:first-child .c-btn:active {
+  background: var(--backgroundActiveBorderBtn);
+  border: var(--borderActiveBorderBtn);
+  color: var(--colorActiveBorderBtn);
+}
+.m-menu--main .m-menu__item--button:first-child body.light .c-btn {
+  background: var(--backgroundBorderBtn);
+  border: var(--borderBorderBtn);
+  color: var(--colorBorderBtn);
+}
+.m-menu--main .m-menu__item--button:first-child body.light .c-btn:hover, .m-menu--main .m-menu__item--button:first-child body.light .c-btn:focus {
+  background: var(--backgroundHoverBorderBtn);
+  border: var(--borderHoverBorderBtn);
+  color: var(--colorHoverBorderBtn);
+}
+.m-menu--main .m-menu__item--button:first-child body.light .c-btn:active {
+  background: var(--backgroundActiveBorderBtn);
+  border: var(--borderActiveBorderBtn);
+  color: var(--colorActiveBorderBtn);
+}
+@media (prefers-color-scheme: dark) {
+  .m-menu--main .m-menu__item--button:first-child .c-btn {
+    background: var(--backgroundBtn);
+    border: var(--borderBtn);
+    color: var(--colorBtn);
+  }
+  .m-menu--main .m-menu__item--button:first-child .c-btn:hover, .m-menu--main .m-menu__item--button:first-child .c-btn:focus {
+    background: var(--backgroundHoverBtn);
+    border: var(--borderHoverBtn);
+    color: var(--colorHoverBtn);
+  }
+  .m-menu--main .m-menu__item--button:first-child .c-btn:active {
+    background: var(--backgroundActiveBtn);
+    border: var(--borderActiveBtn);
+    color: var(--colorActiveBtn);
+  }
+}
+.m-menu--main .m-menu__item--button:first-child body.dark .c-btn {
+  background: var(--backgroundBtn);
+  border: var(--borderBtn);
+  color: var(--colorBtn);
+}
+.m-menu--main .m-menu__item--button:first-child body.dark .c-btn:hover, .m-menu--main .m-menu__item--button:first-child body.dark .c-btn:focus {
+  background: var(--backgroundHoverBtn);
+  border: var(--borderHoverBtn);
+  color: var(--colorHoverBtn);
+}
+.m-menu--main .m-menu__item--button:first-child body.dark .c-btn:active {
+  background: var(--backgroundActiveBtn);
+  border: var(--borderActiveBtn);
+  color: var(--colorActiveBtn);
+}
 .m-menu--main .m-menu__link {
   padding: var(--paddingLinkMainMenu);
   border-radius: var(--borderRadiusMedium);
@@ -9361,7 +9402,7 @@ body.dark .u-fg--fgWhiteDefault {
 /* Slider */
 .slick-loading .slick-list
 {
-    background: #fff url('assets/04de12905acce4a8e74c.gif') center center no-repeat;
+    background: #fff url('assets/786f6df1f6129511f6a6.gif') center center no-repeat;
 }
 
 /* Icons */
@@ -9371,8 +9412,8 @@ body.dark .u-fg--fgWhiteDefault {
     font-weight: normal;
     font-style: normal;
 
-    src: url('assets/0415321ec7aa7fb2715d.eot');
-    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');
+    src: url('assets/7cb8ff106e94c9c5285e.eot');
+    src: url('assets/591ce951e683f1d0c611.eot') format('embedded-opentype'), url('assets/622b098eca47752867d2.woff') format('woff'), url('assets/b0d69734311838cda237.ttf') format('truetype'), url('assets/bc0b9c44e0f26b1e5c75.svg') format('svg');
 }
 /* Arrows */
 .slick-prev,

package/package.json

@@ -3,7 +3,7 @@
   "module": "./index.js",
   "typings": "./index.d.ts",
   "name": "@mmb-digital/ds-lilly",
-  "version": "1.0.0-alpha.73",
+  "version": "1.0.0-alpha.75",
   "description": "MMB LILLY design system",
   "license": "UNLICENSED",
   "sideEffects": [
@@ -49,4 +49,4 @@
     "react-router-dom": "5.1.2"
   },
   "private": false
-}
+}