@mmb-digital/ds-lilly 1.0.0-alpha.14 → 1.0.0-alpha.16

package/ds-lilly.css

@@ -459,8 +459,44 @@ body {
   --gradientGold: linear-gradient(45deg, #cfb572 0%, #A58B4B 100%);
   --gradientGoldHover: linear-gradient(45deg, #c2a14c 0%, #85703d 100%);
   --gradientGoldActive: linear-gradient(45deg, #b7953e 0%, #62532d 100%);
-  --gradientMenu: linear-gradient(344deg, rgb(210, 38, 193) 9.39%, rgb(169, 36, 205) 15.75%, rgb(75, 14, 169) 40.16%, rgb(75, 14, 169) 55.77%, rgb(48, 109, 194) 83.18%, rgb(57, 162, 221) 95.47%);
+  --gradientMenu: linear-gradient(22deg, var(--gradientMenuStart) 28.63%, var(--gradientMenuEnd) 85.57%);
+  --gradientMenuStart: #131D41;
+  --gradientMenuStart-rgb: hex-to-rgb(#131D41);
+  --gradientMenuEnd: #4E1775;
+  --gradientMenuEnd-rgb: hex-to-rgb(#4E1775);
   --gradientFresh: linear-gradient(314deg, #E930B5 6.72%, #2353FF 107%);
+  --categoryYellow: #ffd200;
+  --categoryYellow-rgb: hex-to-rgb(#ffd200);
+  --categoryOrange: #fa9646;
+  --categoryOrange-rgb: hex-to-rgb(#fa9646);
+  --categoryPink: #b74676;
+  --categoryPink-rgb: hex-to-rgb(#b74676);
+  --categoryCherry: #a51854;
+  --categoryCherry-rgb: hex-to-rgb(#a51854);
+  --categoryViolet: #966ebe;
+  --categoryViolet-rgb: hex-to-rgb(#966ebe);
+  --categoryOceanBlue: #3c64c8;
+  --categoryOceanBlue-rgb: hex-to-rgb(#3c64c8);
+  --categorySkyBlue: #aad2f0;
+  --categorySkyBlue-rgb: hex-to-rgb(#aad2f0);
+  --categoryMidnightBlue: #3d4552;
+  --categoryMidnightBlue-rgb: hex-to-rgb(#3d4552);
+  --categorySemiBlue: #d0cddd;
+  --categorySemiBlue-rgb: hex-to-rgb(#d0cddd);
+  --categoryTorquise: #64bed2;
+  --categoryTorquise-rgb: hex-to-rgb(#64bed2);
+  --categoryMintGreen: #6c9;
+  --categoryMintGreen-rgb: hex-to-rgb(#6c9);
+  --categoryForestGreen: #50825a;
+  --categoryForestGreen-rgb: hex-to-rgb(#50825a);
+  --categoryOliveGreen: #c2cc8f;
+  --categoryOliveGreen-rgb: hex-to-rgb(#c2cc8f);
+  --thirdPartyFacebook: #4267b2;
+  --thirdPartyFacebook-rgb: hex-to-rgb(#4267b2);
+  --thirdPartyTwitter: #1da1f2;
+  --thirdPartyTwitter-rgb: hex-to-rgb(#1da1f2);
+  --transparent: transparent;
+  --transparent-rgb: hex-to-rgb(transparent);
 }
 
 /* Dark theme colors */
@@ -613,8 +649,44 @@ body.dark {
   --gradientGold: linear-gradient(45deg, #cfb572 0%, #A58B4B 100%);
   --gradientGoldHover: linear-gradient(45deg, #c2a14c 0%, #85703d 100%);
   --gradientGoldActive: linear-gradient(45deg, #b7953e 0%, #62532d 100%);
-  --gradientMenu: linear-gradient(344deg, rgb(210, 38, 193) 9.39%, rgb(169, 36, 205) 15.75%, rgb(75, 14, 169) 40.16%, rgb(75, 14, 169) 55.77%, rgb(48, 109, 194) 83.18%, rgb(57, 162, 221) 95.47%);
+  --gradientMenu: linear-gradient(22deg, var(--gradientMenuStart) 28.63%, var(--gradientMenuEnd) 85.57%);
+  --gradientMenuStart: #131D41;
+  --gradientMenuStart-rgb: hex-to-rgb(#131D41);
+  --gradientMenuEnd: #4E1775;
+  --gradientMenuEnd-rgb: hex-to-rgb(#4E1775);
   --gradientFresh: linear-gradient(314deg, #E930B5 6.72%, #2353FF 107%);
+  --categoryYellow: #ffd200;
+  --categoryYellow-rgb: hex-to-rgb(#ffd200);
+  --categoryOrange: #fa9646;
+  --categoryOrange-rgb: hex-to-rgb(#fa9646);
+  --categoryPink: #b74676;
+  --categoryPink-rgb: hex-to-rgb(#b74676);
+  --categoryCherry: #a51854;
+  --categoryCherry-rgb: hex-to-rgb(#a51854);
+  --categoryViolet: #966ebe;
+  --categoryViolet-rgb: hex-to-rgb(#966ebe);
+  --categoryOceanBlue: #3c64c8;
+  --categoryOceanBlue-rgb: hex-to-rgb(#3c64c8);
+  --categorySkyBlue: #aad2f0;
+  --categorySkyBlue-rgb: hex-to-rgb(#aad2f0);
+  --categoryMidnightBlue: #3d4552;
+  --categoryMidnightBlue-rgb: hex-to-rgb(#3d4552);
+  --categorySemiBlue: #d0cddd;
+  --categorySemiBlue-rgb: hex-to-rgb(#d0cddd);
+  --categoryTorquise: #64bed2;
+  --categoryTorquise-rgb: hex-to-rgb(#64bed2);
+  --categoryMintGreen: #6c9;
+  --categoryMintGreen-rgb: hex-to-rgb(#6c9);
+  --categoryForestGreen: #50825a;
+  --categoryForestGreen-rgb: hex-to-rgb(#50825a);
+  --categoryOliveGreen: #c2cc8f;
+  --categoryOliveGreen-rgb: hex-to-rgb(#c2cc8f);
+  --thirdPartyFacebook: #4267b2;
+  --thirdPartyFacebook-rgb: hex-to-rgb(#4267b2);
+  --thirdPartyTwitter: #1da1f2;
+  --thirdPartyTwitter-rgb: hex-to-rgb(#1da1f2);
+  --transparent: transparent;
+  --transparent-rgb: hex-to-rgb(transparent);
 }
 
 /* Styles for users who prefer dark mode at the OS level */
@@ -769,8 +841,44 @@ body.dark {
     --gradientGold: linear-gradient(45deg, #cfb572 0%, #A58B4B 100%);
     --gradientGoldHover: linear-gradient(45deg, #c2a14c 0%, #85703d 100%);
     --gradientGoldActive: linear-gradient(45deg, #b7953e 0%, #62532d 100%);
-    --gradientMenu: linear-gradient(344deg, rgb(210, 38, 193) 9.39%, rgb(169, 36, 205) 15.75%, rgb(75, 14, 169) 40.16%, rgb(75, 14, 169) 55.77%, rgb(48, 109, 194) 83.18%, rgb(57, 162, 221) 95.47%);
+    --gradientMenu: linear-gradient(22deg, var(--gradientMenuStart) 28.63%, var(--gradientMenuEnd) 85.57%);
+    --gradientMenuStart: #131D41;
+    --gradientMenuStart-rgb: hex-to-rgb(#131D41);
+    --gradientMenuEnd: #4E1775;
+    --gradientMenuEnd-rgb: hex-to-rgb(#4E1775);
     --gradientFresh: linear-gradient(314deg, #E930B5 6.72%, #2353FF 107%);
+    --categoryYellow: #ffd200;
+    --categoryYellow-rgb: hex-to-rgb(#ffd200);
+    --categoryOrange: #fa9646;
+    --categoryOrange-rgb: hex-to-rgb(#fa9646);
+    --categoryPink: #b74676;
+    --categoryPink-rgb: hex-to-rgb(#b74676);
+    --categoryCherry: #a51854;
+    --categoryCherry-rgb: hex-to-rgb(#a51854);
+    --categoryViolet: #966ebe;
+    --categoryViolet-rgb: hex-to-rgb(#966ebe);
+    --categoryOceanBlue: #3c64c8;
+    --categoryOceanBlue-rgb: hex-to-rgb(#3c64c8);
+    --categorySkyBlue: #aad2f0;
+    --categorySkyBlue-rgb: hex-to-rgb(#aad2f0);
+    --categoryMidnightBlue: #3d4552;
+    --categoryMidnightBlue-rgb: hex-to-rgb(#3d4552);
+    --categorySemiBlue: #d0cddd;
+    --categorySemiBlue-rgb: hex-to-rgb(#d0cddd);
+    --categoryTorquise: #64bed2;
+    --categoryTorquise-rgb: hex-to-rgb(#64bed2);
+    --categoryMintGreen: #6c9;
+    --categoryMintGreen-rgb: hex-to-rgb(#6c9);
+    --categoryForestGreen: #50825a;
+    --categoryForestGreen-rgb: hex-to-rgb(#50825a);
+    --categoryOliveGreen: #c2cc8f;
+    --categoryOliveGreen-rgb: hex-to-rgb(#c2cc8f);
+    --thirdPartyFacebook: #4267b2;
+    --thirdPartyFacebook-rgb: hex-to-rgb(#4267b2);
+    --thirdPartyTwitter: #1da1f2;
+    --thirdPartyTwitter-rgb: hex-to-rgb(#1da1f2);
+    --transparent: transparent;
+    --transparent-rgb: hex-to-rgb(transparent);
   }
   /* Override dark mode with light mode styles if the user decides to swap */
   body.light {
@@ -923,8 +1031,44 @@ body.dark {
     --gradientGold: linear-gradient(45deg, #cfb572 0%, #A58B4B 100%);
     --gradientGoldHover: linear-gradient(45deg, #c2a14c 0%, #85703d 100%);
     --gradientGoldActive: linear-gradient(45deg, #b7953e 0%, #62532d 100%);
-    --gradientMenu: linear-gradient(344deg, rgb(210, 38, 193) 9.39%, rgb(169, 36, 205) 15.75%, rgb(75, 14, 169) 40.16%, rgb(75, 14, 169) 55.77%, rgb(48, 109, 194) 83.18%, rgb(57, 162, 221) 95.47%);
+    --gradientMenu: linear-gradient(22deg, var(--gradientMenuStart) 28.63%, var(--gradientMenuEnd) 85.57%);
+    --gradientMenuStart: #131D41;
+    --gradientMenuStart-rgb: hex-to-rgb(#131D41);
+    --gradientMenuEnd: #4E1775;
+    --gradientMenuEnd-rgb: hex-to-rgb(#4E1775);
     --gradientFresh: linear-gradient(314deg, #E930B5 6.72%, #2353FF 107%);
+    --categoryYellow: #ffd200;
+    --categoryYellow-rgb: hex-to-rgb(#ffd200);
+    --categoryOrange: #fa9646;
+    --categoryOrange-rgb: hex-to-rgb(#fa9646);
+    --categoryPink: #b74676;
+    --categoryPink-rgb: hex-to-rgb(#b74676);
+    --categoryCherry: #a51854;
+    --categoryCherry-rgb: hex-to-rgb(#a51854);
+    --categoryViolet: #966ebe;
+    --categoryViolet-rgb: hex-to-rgb(#966ebe);
+    --categoryOceanBlue: #3c64c8;
+    --categoryOceanBlue-rgb: hex-to-rgb(#3c64c8);
+    --categorySkyBlue: #aad2f0;
+    --categorySkyBlue-rgb: hex-to-rgb(#aad2f0);
+    --categoryMidnightBlue: #3d4552;
+    --categoryMidnightBlue-rgb: hex-to-rgb(#3d4552);
+    --categorySemiBlue: #d0cddd;
+    --categorySemiBlue-rgb: hex-to-rgb(#d0cddd);
+    --categoryTorquise: #64bed2;
+    --categoryTorquise-rgb: hex-to-rgb(#64bed2);
+    --categoryMintGreen: #6c9;
+    --categoryMintGreen-rgb: hex-to-rgb(#6c9);
+    --categoryForestGreen: #50825a;
+    --categoryForestGreen-rgb: hex-to-rgb(#50825a);
+    --categoryOliveGreen: #c2cc8f;
+    --categoryOliveGreen-rgb: hex-to-rgb(#c2cc8f);
+    --thirdPartyFacebook: #4267b2;
+    --thirdPartyFacebook-rgb: hex-to-rgb(#4267b2);
+    --thirdPartyTwitter: #1da1f2;
+    --thirdPartyTwitter-rgb: hex-to-rgb(#1da1f2);
+    --transparent: transparent;
+    --transparent-rgb: hex-to-rgb(transparent);
   }
 }
 body {
@@ -1129,6 +1273,7 @@ body {
   --lineHeightOnlyIconXSmallBtn: 24px;
   --widthOnlyIconXSmallBtn: 24px;
   --minWidthOnlyIconXSmallBtn: 0;
+  --gapWrapperCompactButtons: var(--spaceXSmall);
   --backgroundCard: var(--bgNeutralSubtlest);
   --borderCard: none;
   --borderRadiusCard: var(--borderRadiusMedium);
@@ -3456,9 +3601,10 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   font-size: var(--fontSizeAvatar);
   height: var(--heightAvatar);
   line-height: var(--lineHeightAvatar);
+  margin-top: -2px;
   min-width: var(--widthAvatar);
-  width: var(--widthAvatar);
   vertical-align: middle;
+  width: var(--widthAvatar);
 }
 .c-avatar--fgNeutralDefaultColor {
   background: var(--fgNeutralDefault);
@@ -3685,9 +3831,63 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
 .c-avatar--gradientMenuColor {
   background: var(--gradientMenu);
 }
+.c-avatar--gradientMenuStartColor {
+  background: var(--gradientMenuStart);
+}
+.c-avatar--gradientMenuEndColor {
+  background: var(--gradientMenuEnd);
+}
 .c-avatar--gradientFreshColor {
   background: var(--gradientFresh);
 }
+.c-avatar--categoryYellowColor {
+  background: var(--categoryYellow);
+}
+.c-avatar--categoryOrangeColor {
+  background: var(--categoryOrange);
+}
+.c-avatar--categoryPinkColor {
+  background: var(--categoryPink);
+}
+.c-avatar--categoryCherryColor {
+  background: var(--categoryCherry);
+}
+.c-avatar--categoryVioletColor {
+  background: var(--categoryViolet);
+}
+.c-avatar--categoryOceanBlueColor {
+  background: var(--categoryOceanBlue);
+}
+.c-avatar--categorySkyBlueColor {
+  background: var(--categorySkyBlue);
+}
+.c-avatar--categoryMidnightBlueColor {
+  background: var(--categoryMidnightBlue);
+}
+.c-avatar--categorySemiBlueColor {
+  background: var(--categorySemiBlue);
+}
+.c-avatar--categoryTorquiseColor {
+  background: var(--categoryTorquise);
+}
+.c-avatar--categoryMintGreenColor {
+  background: var(--categoryMintGreen);
+}
+.c-avatar--categoryForestGreenColor {
+  background: var(--categoryForestGreen);
+}
+.c-avatar--categoryOliveGreenColor {
+  background: var(--categoryOliveGreen);
+}
+.c-avatar--thirdPartyFacebookColor {
+  background: var(--thirdPartyFacebook);
+}
+.c-avatar--thirdPartyTwitterColor {
+  background: var(--thirdPartyTwitter);
+}
+.c-avatar--transparentColor {
+  background: var(--transparent);
+}
 .c-avatar--fgNeutralDefault {
   color: var(--fgNeutralDefault);
 }
@@ -3913,9 +4113,63 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
 .c-avatar--gradientMenu {
   color: var(--gradientMenu);
 }
+.c-avatar--gradientMenuStart {
+  color: var(--gradientMenuStart);
+}
+.c-avatar--gradientMenuEnd {
+  color: var(--gradientMenuEnd);
+}
 .c-avatar--gradientFresh {
   color: var(--gradientFresh);
 }
+.c-avatar--categoryYellow {
+  color: var(--categoryYellow);
+}
+.c-avatar--categoryOrange {
+  color: var(--categoryOrange);
+}
+.c-avatar--categoryPink {
+  color: var(--categoryPink);
+}
+.c-avatar--categoryCherry {
+  color: var(--categoryCherry);
+}
+.c-avatar--categoryViolet {
+  color: var(--categoryViolet);
+}
+.c-avatar--categoryOceanBlue {
+  color: var(--categoryOceanBlue);
+}
+.c-avatar--categorySkyBlue {
+  color: var(--categorySkyBlue);
+}
+.c-avatar--categoryMidnightBlue {
+  color: var(--categoryMidnightBlue);
+}
+.c-avatar--categorySemiBlue {
+  color: var(--categorySemiBlue);
+}
+.c-avatar--categoryTorquise {
+  color: var(--categoryTorquise);
+}
+.c-avatar--categoryMintGreen {
+  color: var(--categoryMintGreen);
+}
+.c-avatar--categoryForestGreen {
+  color: var(--categoryForestGreen);
+}
+.c-avatar--categoryOliveGreen {
+  color: var(--categoryOliveGreen);
+}
+.c-avatar--thirdPartyFacebook {
+  color: var(--thirdPartyFacebook);
+}
+.c-avatar--thirdPartyTwitter {
+  color: var(--thirdPartyTwitter);
+}
+.c-avatar--transparent {
+  color: var(--transparent);
+}
 .c-avatar--bgWarningBoldColor {
   background: var(--bgWarningBold);
   color: var(--fgInverseDefault);
@@ -3932,6 +4186,10 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   background: var(--bgSuccessBold);
   color: var(--fgInverseDefault);
 }
+.c-avatar--bgBrandBoldColor {
+  background: var(--bgBrandBold);
+  color: var(--fgInverseDefault);
+}
 .c-avatar--bgPromoBold {
   background: var(--gradientGold);
   color: var(--fgInverseDefault);
@@ -4970,86 +5228,14 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   margin-left: 0px;
 }
 .c-compact-buttons .c-compact-buttons__wrapper {
-  border: 1px solid var(--borderBrandDefault);
-  border-radius: var(--borderRadiusSmall);
   display: inline-flex;
   overflow: hidden;
-}
-.c-compact-buttons .c-compact-buttons__button_separator {
-  background: #fff;
-  display: inline-block;
-  margin: 2px 0;
-  width: 1px;
-}
-.c-compact-buttons .c-compact-buttons__wrapper--border .c-compact-buttons__button_separator {
-  background-color: var(--bgBrandBold);
-}
-.c-compact-buttons .c-compact-buttons__wrapper--border.c-compact-buttons__wrapper--red {
-  border: var(--borderRedBtn);
-}
-.c-compact-buttons .c-compact-buttons__wrapper--border.c-compact-buttons__wrapper--red .c-compact-buttons__button_separator {
-  background: var(--backgroundRedBtn);
-}
-.c-compact-buttons .c-compact-buttons__wrapper--border.c-compact-buttons__wrapper--gold {
-  border: var(--borderGoldBtn);
-}
-.c-compact-buttons .c-compact-buttons__wrapper--border.c-compact-buttons__wrapper--gold .c-compact-buttons__button_separator {
-  background: var(--backgroundGoldBtn);
-}
-.c-compact-buttons .c-compact-buttons__wrapper--border.c-compact-buttons__wrapper--secondary {
-  border: var(--borderSecondaryBtn);
-}
-.c-compact-buttons .c-compact-buttons__wrapper--border.c-compact-buttons__wrapper--secondary .c-compact-buttons__button_separator {
-  background: var(--backgroundSecondaryBtn);
-}
-.c-compact-buttons .c-compact-buttons__wrapper--border.c-compact-buttons__wrapper--green {
-  border: var(--borderGreenBtn);
-}
-.c-compact-buttons .c-compact-buttons__wrapper--border.c-compact-buttons__wrapper--green .c-compact-buttons__button_separator {
-  background: var(--backgroundGreenBtn);
-}
-.c-compact-buttons .c-compact-buttons__wrapper--filled {
-  background: var(--backgroundBtn);
-  border: 0;
-}
-.c-compact-buttons .c-compact-buttons__wrapper--filled.c-compact-buttons__wrapper--red {
-  background: var(--backgroundRedBtn);
-}
-.c-compact-buttons .c-compact-buttons__wrapper--filled.c-compact-buttons__wrapper--gold {
-  background: var(--backgroundGoldBtn);
-}
-.c-compact-buttons .c-compact-buttons__wrapper--filled.c-compact-buttons__wrapper--secondary {
-  background: var(--backgroundSecondaryBtn);
-}
-.c-compact-buttons .c-compact-buttons__wrapper--filled.c-compact-buttons__wrapper--greep {
-  background: var(--backgroundGreenBtn);
-}
-.c-compact-buttons .c-compact-buttons__button {
-  border: 0;
-  border-radius: 0;
-  margin: 0;
-  min-width: auto;
-  transition: none;
-}
-.c-compact-buttons .c-compact-buttons__button::after {
-  border-radius: 0;
-}
-.c-compact-buttons .c-compact-buttons__button:hover {
-  border: 0;
-}
-.c-compact-buttons .c-compact-buttons__button:last-child::before {
-  content: none;
-}
-.c-compact-buttons .c-compact-buttons__button:first-child {
-  border-left: 0;
+  gap: var(--gapWrapperCompactButtons);
 }
 .c-compact-buttons .c-compact-buttons__button_box {
   display: inline-flex;
   white-space: nowrap;
 }
-.c-compact-buttons .c-compact-buttons__button_box:last-child .c-compact-buttons__button_separator {
-  display: none;
-}
 .c-compact-buttons .c-compact-buttons__button_box--hidden {
   left: 0;
   position: absolute;
@@ -5262,7 +5448,7 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   color: var(--blueDark);
   cursor: pointer;
   display: block;
-  font-size: var(--fontSizeMedium);
+  font-size: var(--fontSizeSmall);
   font-weight: var(--fontWeightMedium);
   line-height: var(--lineHeightMedium);
   padding: var(--spaceXSmall) var(--spaceSmall);
@@ -5338,7 +5524,7 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   color: var(--fgNeutralDefault);
   cursor: pointer;
   display: flex;
-  font-size: var(--fontSizeMedium);
+  font-size: var(--fontSizeSmall);
   font-weight: var(--fontWeightMedium);
   line-height: var(--lineHeightMedium);
   padding: var(--spaceXSmall) var(--spaceSmall);
@@ -5412,7 +5598,7 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   color: var(--blueDark);
   cursor: pointer;
   display: block;
-  font-size: var(--fontSizeMedium);
+  font-size: var(--fontSizeSmall);
   font-weight: var(--fontWeightMedium);
   line-height: var(--lineHeightMedium);
   padding: var(--spaceXSmall) var(--spaceSmall);
@@ -5488,7 +5674,7 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   color: var(--fgNeutralDefault);
   cursor: pointer;
   display: flex;
-  font-size: var(--fontSizeMedium);
+  font-size: var(--fontSizeSmall);
   font-weight: var(--fontWeightMedium);
   line-height: var(--lineHeightMedium);
   padding: var(--spaceXSmall) var(--spaceSmall);
@@ -5776,9 +5962,63 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
 .c-chartLegend__row__bg--gradientMenuColor {
   background: var(--gradientMenu);
 }
+.c-chartLegend__row__bg--gradientMenuStartColor {
+  background: var(--gradientMenuStart);
+}
+.c-chartLegend__row__bg--gradientMenuEndColor {
+  background: var(--gradientMenuEnd);
+}
 .c-chartLegend__row__bg--gradientFreshColor {
   background: var(--gradientFresh);
 }
+.c-chartLegend__row__bg--categoryYellowColor {
+  background: var(--categoryYellow);
+}
+.c-chartLegend__row__bg--categoryOrangeColor {
+  background: var(--categoryOrange);
+}
+.c-chartLegend__row__bg--categoryPinkColor {
+  background: var(--categoryPink);
+}
+.c-chartLegend__row__bg--categoryCherryColor {
+  background: var(--categoryCherry);
+}
+.c-chartLegend__row__bg--categoryVioletColor {
+  background: var(--categoryViolet);
+}
+.c-chartLegend__row__bg--categoryOceanBlueColor {
+  background: var(--categoryOceanBlue);
+}
+.c-chartLegend__row__bg--categorySkyBlueColor {
+  background: var(--categorySkyBlue);
+}
+.c-chartLegend__row__bg--categoryMidnightBlueColor {
+  background: var(--categoryMidnightBlue);
+}
+.c-chartLegend__row__bg--categorySemiBlueColor {
+  background: var(--categorySemiBlue);
+}
+.c-chartLegend__row__bg--categoryTorquiseColor {
+  background: var(--categoryTorquise);
+}
+.c-chartLegend__row__bg--categoryMintGreenColor {
+  background: var(--categoryMintGreen);
+}
+.c-chartLegend__row__bg--categoryForestGreenColor {
+  background: var(--categoryForestGreen);
+}
+.c-chartLegend__row__bg--categoryOliveGreenColor {
+  background: var(--categoryOliveGreen);
+}
+.c-chartLegend__row__bg--thirdPartyFacebookColor {
+  background: var(--thirdPartyFacebook);
+}
+.c-chartLegend__row__bg--thirdPartyTwitterColor {
+  background: var(--thirdPartyTwitter);
+}
+.c-chartLegend__row__bg--transparentColor {
+  background: var(--transparent);
+}
 .c-chartLegend__row__percentage {
   flex: 0 20%;
   min-width: var(--spaceXXXLarge);
@@ -6753,9 +6993,63 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
 .c-tag--gradientMenuColor {
   background: var(--gradientMenu);
 }
+.c-tag--gradientMenuStartColor {
+  background: var(--gradientMenuStart);
+}
+.c-tag--gradientMenuEndColor {
+  background: var(--gradientMenuEnd);
+}
 .c-tag--gradientFreshColor {
   background: var(--gradientFresh);
 }
+.c-tag--categoryYellowColor {
+  background: var(--categoryYellow);
+}
+.c-tag--categoryOrangeColor {
+  background: var(--categoryOrange);
+}
+.c-tag--categoryPinkColor {
+  background: var(--categoryPink);
+}
+.c-tag--categoryCherryColor {
+  background: var(--categoryCherry);
+}
+.c-tag--categoryVioletColor {
+  background: var(--categoryViolet);
+}
+.c-tag--categoryOceanBlueColor {
+  background: var(--categoryOceanBlue);
+}
+.c-tag--categorySkyBlueColor {
+  background: var(--categorySkyBlue);
+}
+.c-tag--categoryMidnightBlueColor {
+  background: var(--categoryMidnightBlue);
+}
+.c-tag--categorySemiBlueColor {
+  background: var(--categorySemiBlue);
+}
+.c-tag--categoryTorquiseColor {
+  background: var(--categoryTorquise);
+}
+.c-tag--categoryMintGreenColor {
+  background: var(--categoryMintGreen);
+}
+.c-tag--categoryForestGreenColor {
+  background: var(--categoryForestGreen);
+}
+.c-tag--categoryOliveGreenColor {
+  background: var(--categoryOliveGreen);
+}
+.c-tag--thirdPartyFacebookColor {
+  background: var(--thirdPartyFacebook);
+}
+.c-tag--thirdPartyTwitterColor {
+  background: var(--thirdPartyTwitter);
+}
+.c-tag--transparentColor {
+  background: var(--transparent);
+}
 
 .c-tag--withIcon {
   padding: var(--paddingWithIconTag);
@@ -9548,7 +9842,7 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
 /* Slider */
 .slick-loading .slick-list
 {
-    background: #fff url('assets/9288da3de8c05c02b14a.gif') center center no-repeat;
+    background: #fff url('assets/b6835e6b8676ec3bac9b.gif') center center no-repeat;
 }
 
 /* Icons */
@@ -9558,8 +9852,8 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
     font-weight: normal;
     font-style: normal;
 
-    src: url('assets/a0747b0121c67ec02ebd.eot');
-    src: url('assets/cc21b92903379a739adb.eot') format('embedded-opentype'), url('assets/65a531ed68dcf5074646.woff') format('woff'), url('assets/01420ff016daa34fdefb.ttf') format('truetype'), url('assets/da97efdffda4f784687f.svg') format('svg');
+    src: url('assets/e5c9cf7561093e96c514.eot');
+    src: url('assets/9f0e29fbac759a3604d8.eot') format('embedded-opentype'), url('assets/5b7782cbb62652cfec1e.woff') format('woff'), url('assets/0bf6629fcc2e1deaed40.ttf') format('truetype'), url('assets/3b4d56e4acefbc595663.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.14",
+  "version": "1.0.0-alpha.16",
   "description": "MMB LILLY design system",
   "license": "UNLICENSED",
   "sideEffects": [

package/types/colors.d.ts

@@ -2,6 +2,6 @@ export type BackgroundColorType = 'neutralDefault' | 'neutralDefaultHover' | 'ne
 export type ForegroundColorType = 'neutralDefault' | 'neutralSubtle' | 'neutralSubtlest' | 'brandDefault' | 'promoDefault' | 'linkDefault' | 'linkDefaultHover' | 'linkDefaultPressed' | 'infoDefault' | 'errorDefault' | 'warningDefault' | 'successDefault' | 'inverseDefault' | 'disabledDefault';
 export type SurfaceColorType = 'default' | 'risen' | 'overlay';
 export type BorderColorType = 'neutralDefault' | 'neutralSubtle' | 'brandDefault' | 'promoDefault' | 'infoDefault' | 'errorDefault' | 'warningDefault' | 'successDefault' | 'disabledDefault';
-export type GradientColorType = 'blueRed' | 'blueRedDark' | 'gold' | 'goldHover' | 'goldActive' | 'menu' | 'fresh';
-export type ColorType = 'fgNeutralDefault' | 'fgNeutralSubtle' | 'fgNeutralSubtlest' | 'fgBrandDefault' | 'fgPromoDefault' | 'fgLinkDefault' | 'fgLinkDefaultHover' | 'fgLinkDefaultPressed' | 'fgInfoDefault' | 'fgErrorDefault' | 'fgWarningDefault' | 'fgSuccessDefault' | 'fgInverseDefault' | 'fgDisabledDefault' | 'bgNeutralDefault' | 'bgNeutralDefaultHover' | 'bgNeutralDefaultActive' | 'bgNeutralSubtle' | 'bgNeutralSubtleHover' | 'bgNeutralSubtleActive' | 'bgNeutralSubtlest' | 'bgNeutralSubtlestHover' | 'bgNeutralSubtlestActive' | 'bgBrandDefault' | 'bgBrandDefaultHover' | 'bgBrandDefaultPressed' | 'bgBrandBold' | 'bgBrandBoldHover' | 'bgBrandBoldPressed' | 'bgPromoBold' | 'bgPromoBoldHover' | 'bgPromoBoldPressed' | 'bgInfoDefault' | 'bgInfoDefaultHover' | 'bgInfoDefaultPressed' | 'bgInfoBold' | 'bgInfoBoldHover' | 'bgInfoBoldPressed' | 'bgErrorDefault' | 'bgErrorDefaultHover' | 'bgErrorDefaultPressed' | 'bgErrorBold' | 'bgErrorBoldHover' | 'bgErrorBoldPressed' | 'bgWarningDefault' | 'bgWarningDefaultHover' | 'bgWarningDefaultPressed' | 'bgWarningBold' | 'bgWarningBoldHover' | 'bgWarningBoldPressed' | 'bgSuccessDefault' | 'bgSuccessDefaultHover' | 'bgSuccessDefaultPressed' | 'bgSuccessBold' | 'bgSuccessBoldHover' | 'bgSuccessBoldPressed' | 'bgDisabledDefault' | 'surfaceDefault' | 'surfaceRisen' | 'surfaceOverlay' | 'borderNeutralDefault' | 'borderNeutralSubtle' | 'borderBrandDefault' | 'borderPromoDefault' | 'borderInfoDefault' | 'borderErrorDefault' | 'borderWarningDefault' | 'borderSuccessDefault' | 'borderDisabledDefault' | 'gradientBlueRed' | 'gradientBlueRedDark' | 'gradientGold' | 'gradientGoldHover' | 'gradientGoldActive' | 'gradientMenu' | 'gradientFresh';
+export type GradientColorType = 'blueRed' | 'blueRedDark' | 'gold' | 'goldHover' | 'goldActive' | 'menu' | 'menu' | 'fresh';
+export type ColorType = 'fgNeutralDefault' | 'fgNeutralSubtle' | 'fgNeutralSubtlest' | 'fgBrandDefault' | 'fgPromoDefault' | 'fgLinkDefault' | 'fgLinkDefaultHover' | 'fgLinkDefaultPressed' | 'fgInfoDefault' | 'fgErrorDefault' | 'fgWarningDefault' | 'fgSuccessDefault' | 'fgInverseDefault' | 'fgDisabledDefault' | 'bgNeutralDefault' | 'bgNeutralDefaultHover' | 'bgNeutralDefaultActive' | 'bgNeutralSubtle' | 'bgNeutralSubtleHover' | 'bgNeutralSubtleActive' | 'bgNeutralSubtlest' | 'bgNeutralSubtlestHover' | 'bgNeutralSubtlestActive' | 'bgBrandDefault' | 'bgBrandDefaultHover' | 'bgBrandDefaultPressed' | 'bgBrandBold' | 'bgBrandBoldHover' | 'bgBrandBoldPressed' | 'bgPromoBold' | 'bgPromoBoldHover' | 'bgPromoBoldPressed' | 'bgInfoDefault' | 'bgInfoDefaultHover' | 'bgInfoDefaultPressed' | 'bgInfoBold' | 'bgInfoBoldHover' | 'bgInfoBoldPressed' | 'bgErrorDefault' | 'bgErrorDefaultHover' | 'bgErrorDefaultPressed' | 'bgErrorBold' | 'bgErrorBoldHover' | 'bgErrorBoldPressed' | 'bgWarningDefault' | 'bgWarningDefaultHover' | 'bgWarningDefaultPressed' | 'bgWarningBold' | 'bgWarningBoldHover' | 'bgWarningBoldPressed' | 'bgSuccessDefault' | 'bgSuccessDefaultHover' | 'bgSuccessDefaultPressed' | 'bgSuccessBold' | 'bgSuccessBoldHover' | 'bgSuccessBoldPressed' | 'bgDisabledDefault' | 'surfaceDefault' | 'surfaceRisen' | 'surfaceOverlay' | 'borderNeutralDefault' | 'borderNeutralSubtle' | 'borderBrandDefault' | 'borderPromoDefault' | 'borderInfoDefault' | 'borderErrorDefault' | 'borderWarningDefault' | 'borderSuccessDefault' | 'borderDisabledDefault' | 'gradientBlueRed' | 'gradientBlueRedDark' | 'gradientGold' | 'gradientGoldHover' | 'gradientGoldActive' | 'gradientMenu' | 'gradientMenu' | 'gradientFresh';
 //# sourceMappingURL=colors.d.ts.map

package/types/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/types/colors.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,sBAAsB,GAAG,eAAe,GAAG,oBAAoB,GAAG,qBAAqB,GAAG,iBAAiB,GAAG,sBAAsB,GAAG,uBAAuB,GAAG,cAAc,GAAG,mBAAmB,GAAG,qBAAqB,GAAG,WAAW,GAAG,gBAAgB,GAAG,kBAAkB,GAAG,WAAW,GAAG,gBAAgB,GAAG,kBAAkB,GAAG,aAAa,GAAG,kBAAkB,GAAG,oBAAoB,GAAG,UAAU,GAAG,eAAe,GAAG,iBAAiB,GAAG,cAAc,GAAG,mBAAmB,GAAG,qBAAqB,GAAG,WAAW,GAAG,gBAAgB,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,uBAAuB,GAAG,aAAa,GAAG,kBAAkB,GAAG,oBAAoB,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,uBAAuB,GAAG,aAAa,GAAG,kBAAkB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AACj5B,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,GAAG,eAAe,GAAG,iBAAiB,GAAG,cAAc,GAAG,cAAc,GAAG,aAAa,GAAG,kBAAkB,GAAG,oBAAoB,GAAG,aAAa,GAAG,cAAc,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,iBAAiB,CAAC;AACrS,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAC/D,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,iBAAiB,CAAC;AAC9L,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AACnH,MAAM,MAAM,SAAS,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,mBAAmB,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,eAAe,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,eAAe,GAAG,gBAAgB,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,uBAAuB,GAAG,wBAAwB,GAAG,iBAAiB,GAAG,sBAAsB,GAAG,uBAAuB,GAAG,mBAAmB,GAAG,wBAAwB,GAAG,yBAAyB,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,uBAAuB,GAAG,aAAa,GAAG,kBAAkB,GAAG,oBAAoB,GAAG,aAAa,GAAG,kBAAkB,GAAG,oBAAoB,GAAG,eAAe,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,YAAY,GAAG,iBAAiB,GAAG,mBAAmB,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,uBAAuB,GAAG,aAAa,GAAG,kBAAkB,GAAG,oBAAoB,GAAG,kBAAkB,GAAG,uBAAuB,GAAG,yBAAyB,GAAG,eAAe,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,kBAAkB,GAAG,uBAAuB,GAAG,yBAAyB,GAAG,eAAe,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,mBAAmB,GAAG,gBAAgB,GAAG,cAAc,GAAG,gBAAgB,GAAG,sBAAsB,GAAG,qBAAqB,GAAG,oBAAoB,GAAG,oBAAoB,GAAG,mBAAmB,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,sBAAsB,GAAG,uBAAuB,GAAG,iBAAiB,GAAG,qBAAqB,GAAG,cAAc,GAAG,mBAAmB,GAAG,oBAAoB,GAAG,cAAc,GAAG,eAAe,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/types/colors.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,sBAAsB,GAAG,eAAe,GAAG,oBAAoB,GAAG,qBAAqB,GAAG,iBAAiB,GAAG,sBAAsB,GAAG,uBAAuB,GAAG,cAAc,GAAG,mBAAmB,GAAG,qBAAqB,GAAG,WAAW,GAAG,gBAAgB,GAAG,kBAAkB,GAAG,WAAW,GAAG,gBAAgB,GAAG,kBAAkB,GAAG,aAAa,GAAG,kBAAkB,GAAG,oBAAoB,GAAG,UAAU,GAAG,eAAe,GAAG,iBAAiB,GAAG,cAAc,GAAG,mBAAmB,GAAG,qBAAqB,GAAG,WAAW,GAAG,gBAAgB,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,uBAAuB,GAAG,aAAa,GAAG,kBAAkB,GAAG,oBAAoB,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,uBAAuB,GAAG,aAAa,GAAG,kBAAkB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AACj5B,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,GAAG,eAAe,GAAG,iBAAiB,GAAG,cAAc,GAAG,cAAc,GAAG,aAAa,GAAG,kBAAkB,GAAG,oBAAoB,GAAG,aAAa,GAAG,cAAc,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,iBAAiB,CAAC;AACrS,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAC/D,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,iBAAiB,CAAC;AAC9L,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5H,MAAM,MAAM,SAAS,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,mBAAmB,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,eAAe,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,eAAe,GAAG,gBAAgB,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,uBAAuB,GAAG,wBAAwB,GAAG,iBAAiB,GAAG,sBAAsB,GAAG,uBAAuB,GAAG,mBAAmB,GAAG,wBAAwB,GAAG,yBAAyB,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,uBAAuB,GAAG,aAAa,GAAG,kBAAkB,GAAG,oBAAoB,GAAG,aAAa,GAAG,kBAAkB,GAAG,oBAAoB,GAAG,eAAe,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,YAAY,GAAG,iBAAiB,GAAG,mBAAmB,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,uBAAuB,GAAG,aAAa,GAAG,kBAAkB,GAAG,oBAAoB,GAAG,kBAAkB,GAAG,uBAAuB,GAAG,yBAAyB,GAAG,eAAe,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,kBAAkB,GAAG,uBAAuB,GAAG,yBAAyB,GAAG,eAAe,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,mBAAmB,GAAG,gBAAgB,GAAG,cAAc,GAAG,gBAAgB,GAAG,sBAAsB,GAAG,qBAAqB,GAAG,oBAAoB,GAAG,oBAAoB,GAAG,mBAAmB,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,sBAAsB,GAAG,uBAAuB,GAAG,iBAAiB,GAAG,qBAAqB,GAAG,cAAc,GAAG,mBAAmB,GAAG,oBAAoB,GAAG,cAAc,GAAG,cAAc,GAAG,eAAe,CAAC"}