@aivenio/aquarium 1.29.0 → 1.30.0

package/dist/styles.css

@@ -491,6 +491,7 @@ img,video {
   --aquarium-colors-grey-50: #787885;
   --aquarium-colors-grey-40: #9696a0;
   --aquarium-colors-grey-30: #b4b4bb;
+  --aquarium-colors-grey-20: #d2d2d6;
   --aquarium-colors-grey-10: #e1e1e3;
   --aquarium-colors-grey-5: #ededf0;
   --aquarium-colors-grey-0: #f7f7fa;
@@ -506,20 +507,18 @@ img,video {
   --aquarium-colors-secondary-10: #fee8d0;
   --aquarium-colors-secondary-5: #fff3e8;
   --aquarium-colors-secondary-0: #fffbf8;
-  --aquarium-colors-primary-100: #a70045;
-  --aquarium-colors-primary-90: #c60443;
-  --aquarium-colors-primary-80: #e41a4a;
-  --aquarium-colors-primary-70: #ff3554;
-  --aquarium-colors-primary-60: #ff5275;
-  --aquarium-colors-primary-50: #ff6f94;
-  --aquarium-colors-primary-40: #ff8db0;
-  --aquarium-colors-primary-30: #ffa9c9;
-  --aquarium-colors-primary-20: #ffc4de;
-  --aquarium-colors-primary-10: #ffdeef;
-  --aquarium-colors-primary-5: #ffe8f4;
-  --aquarium-colors-primary-0: #fff9fc;
-  --aquarium-colors-grey-20: #d2d2d6;
-  --aquarium-colors-navy-blue-100: #30375e;
+  --aquarium-colors-primary-100: #0e1652;
+  --aquarium-colors-primary-90: #222f95;
+  --aquarium-colors-primary-80: #3545be;
+  --aquarium-colors-primary-70: #5865cd;
+  --aquarium-colors-primary-60: #818eec;
+  --aquarium-colors-primary-50: #9daaee;
+  --aquarium-colors-primary-40: #b9c5ef;
+  --aquarium-colors-primary-30: #c7d1f4;
+  --aquarium-colors-primary-20: #d5ddfa;
+  --aquarium-colors-primary-10: #e3e9ff;
+  --aquarium-colors-primary-5: #f3f6ff;
+  --aquarium-colors-primary-0: #ffffff;
   --aquarium-colors-transparent: transparent;
   --aquarium-colors-white: white;
   --aquarium-colors-black: black;
@@ -732,7 +731,7 @@ input[type='number'].no-arrows {
   }
 }
 .typography-large-heading {
-  font-family: Inter;
+  font-family: Poppins;
   font-size: 32px;
   font-weight: 700;
   font-style: normal;
@@ -740,7 +739,7 @@ input[type='number'].no-arrows {
   text-transform: none;
 }
 .typography-heading {
-  font-family: Inter;
+  font-family: Poppins;
   font-size: 24px;
   font-weight: 700;
   font-style: normal;
@@ -748,7 +747,7 @@ input[type='number'].no-arrows {
   text-transform: none;
 }
 .typography-subheading {
-  font-family: Inter;
+  font-family: Poppins;
   font-size: 20px;
   font-weight: 600;
   font-style: normal;
@@ -1671,9 +1670,13 @@ input[type='number'].no-arrows {
   border-color: #e1e1e3;
   border-color: var(--aquarium-colors-grey-10, #e1e1e3);
 }
-.border-navyBlue-100 {
-  border-color: #30375e;
-  border-color: var(--aquarium-colors-navyBlue-100, #30375e);
+.border-primary-80 {
+  border-color: #3545be;
+  border-color: var(--aquarium-colors-primary-80, #3545be);
+}
+.border-primary-40 {
+  border-color: #b9c5ef;
+  border-color: var(--aquarium-colors-primary-40, #b9c5ef);
 }
 .border-grey-50 {
   border-color: #787885;
@@ -1699,10 +1702,6 @@ input[type='number'].no-arrows {
   border-color: #19191d;
   border-color: var(--aquarium-colors-grey-100, #19191d);
 }
-.border-primary-80 {
-  border-color: #e41a4a;
-  border-color: var(--aquarium-colors-primary-80, #e41a4a);
-}
 .bg-grey-10 {
   background-color: #e1e1e3;
   background-color: var(--aquarium-colors-grey-10, #e1e1e3);
@@ -1711,9 +1710,9 @@ input[type='number'].no-arrows {
   background-color: #fee8e7;
   background-color: var(--aquarium-colors-error-5, #fee8e7);
 }
-.bg-info-5 {
-  background-color: #effaff;
-  background-color: var(--aquarium-colors-info-5, #effaff);
+.bg-info-10 {
+  background-color: #e0f5fe;
+  background-color: var(--aquarium-colors-info-10, #e0f5fe);
 }
 .bg-success-5 {
   background-color: #ecf7ed;
@@ -1731,14 +1730,22 @@ input[type='number'].no-arrows {
   background-color: white;
   background-color: var(--aquarium-colors-white, white);
 }
-.bg-navyBlue-100 {
-  background-color: #30375e;
-  background-color: var(--aquarium-colors-navyBlue-100, #30375e);
+.bg-primary-80 {
+  background-color: #3545be;
+  background-color: var(--aquarium-colors-primary-80, #3545be);
+}
+.bg-primary-40 {
+  background-color: #b9c5ef;
+  background-color: var(--aquarium-colors-primary-40, #b9c5ef);
 }
 .bg-grey-5 {
   background-color: #ededf0;
   background-color: var(--aquarium-colors-grey-5, #ededf0);
 }
+.bg-primary-100 {
+  background-color: #0e1652;
+  background-color: var(--aquarium-colors-primary-100, #0e1652);
+}
 .bg-info-50 {
   background-color: #28b4f4;
   background-color: var(--aquarium-colors-info-50, #28b4f4);
@@ -1775,14 +1782,14 @@ input[type='number'].no-arrows {
   background-color: currentColor;
   background-color: var(--aquarium-colors-current, currentColor);
 }
-.bg-primary-80 {
-  background-color: #e41a4a;
-  background-color: var(--aquarium-colors-primary-80, #e41a4a);
-}
 .bg-transparent {
   background-color: transparent;
   background-color: var(--aquarium-colors-transparent, transparent);
 }
+.bg-info-5 {
+  background-color: #effaff;
+  background-color: var(--aquarium-colors-info-5, #effaff);
+}
 .bg-secondary-5 {
   background-color: #fff3e8;
   background-color: var(--aquarium-colors-secondary-5, #fff3e8);
@@ -1796,11 +1803,8 @@ input[type='number'].no-arrows {
   background-color: var(--aquarium-colors-error-20, #ffadb3);
 }
 .bg-primary-70 {
-  background-color: #ff3554;
-  background-color: var(--aquarium-colors-primary-70, #ff3554);
-}
-.bg-opacity-40 {
-  --tw-bg-opacity: 0.4;
+  background-color: #5865cd;
+  background-color: var(--aquarium-colors-primary-70, #5865cd);
 }
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -1820,10 +1824,6 @@ input[type='number'].no-arrows {
 .bg-cover {
   background-size: cover;
 }
-.stroke-grey-30 {
-  stroke: #b4b4bb;
-  stroke: var(--aquarium-colors-grey-30, #b4b4bb);
-}
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -2217,6 +2217,10 @@ input[type='number'].no-arrows {
   color: #b4b4bb;
   color: var(--aquarium-colors-grey-30, #b4b4bb);
 }
+.text-grey-20 {
+  color: #d2d2d6;
+  color: var(--aquarium-colors-grey-20, #d2d2d6);
+}
 .text-grey-10 {
   color: #e1e1e3;
   color: var(--aquarium-colors-grey-10, #e1e1e3);
@@ -2278,60 +2282,52 @@ input[type='number'].no-arrows {
   color: var(--aquarium-colors-secondary-0, #fffbf8);
 }
 .text-primary-100 {
-  color: #a70045;
-  color: var(--aquarium-colors-primary-100, #a70045);
+  color: #0e1652;
+  color: var(--aquarium-colors-primary-100, #0e1652);
 }
 .text-primary-90 {
-  color: #c60443;
-  color: var(--aquarium-colors-primary-90, #c60443);
+  color: #222f95;
+  color: var(--aquarium-colors-primary-90, #222f95);
 }
 .text-primary-80 {
-  color: #e41a4a;
-  color: var(--aquarium-colors-primary-80, #e41a4a);
+  color: #3545be;
+  color: var(--aquarium-colors-primary-80, #3545be);
 }
 .text-primary-70 {
-  color: #ff3554;
-  color: var(--aquarium-colors-primary-70, #ff3554);
+  color: #5865cd;
+  color: var(--aquarium-colors-primary-70, #5865cd);
 }
 .text-primary-60 {
-  color: #ff5275;
-  color: var(--aquarium-colors-primary-60, #ff5275);
+  color: #818eec;
+  color: var(--aquarium-colors-primary-60, #818eec);
 }
 .text-primary-50 {
-  color: #ff6f94;
-  color: var(--aquarium-colors-primary-50, #ff6f94);
+  color: #9daaee;
+  color: var(--aquarium-colors-primary-50, #9daaee);
 }
 .text-primary-40 {
-  color: #ff8db0;
-  color: var(--aquarium-colors-primary-40, #ff8db0);
+  color: #b9c5ef;
+  color: var(--aquarium-colors-primary-40, #b9c5ef);
 }
 .text-primary-30 {
-  color: #ffa9c9;
-  color: var(--aquarium-colors-primary-30, #ffa9c9);
+  color: #c7d1f4;
+  color: var(--aquarium-colors-primary-30, #c7d1f4);
 }
 .text-primary-20 {
-  color: #ffc4de;
-  color: var(--aquarium-colors-primary-20, #ffc4de);
+  color: #d5ddfa;
+  color: var(--aquarium-colors-primary-20, #d5ddfa);
 }
 .text-primary-10 {
-  color: #ffdeef;
-  color: var(--aquarium-colors-primary-10, #ffdeef);
+  color: #e3e9ff;
+  color: var(--aquarium-colors-primary-10, #e3e9ff);
 }
 .text-primary-5 {
-  color: #ffe8f4;
-  color: var(--aquarium-colors-primary-5, #ffe8f4);
+  color: #f3f6ff;
+  color: var(--aquarium-colors-primary-5, #f3f6ff);
 }
 .text-primary-0 {
-  color: #fff9fc;
-  color: var(--aquarium-colors-primary-0, #fff9fc);
-}
-.text-grey-20 {
-  color: #d2d2d6;
-  color: var(--aquarium-colors-grey-20, #d2d2d6);
-}
-.text-navyBlue-100 {
-  color: #30375e;
-  color: var(--aquarium-colors-navyBlue-100, #30375e);
+  color: #ffffff;
+  color: var(--aquarium-colors-primary-0, #ffffff);
 }
 .text-transparent {
   color: transparent;
@@ -2341,15 +2337,16 @@ input[type='number'].no-arrows {
   color: white;
   color: var(--aquarium-colors-white, white);
 }
+.underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
 .no-underline {
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
-.opacity-70 {
-  opacity: 0.7;
-}
-.opacity-40 {
-  opacity: 0.4;
+.opacity-60 {
+  opacity: 0.6;
 }
 .shadow-16dp {
   --tw-shadow: var(--aquarium-box-shadow-16dp, 0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12));
@@ -2394,6 +2391,9 @@ input[type='number'].no-arrows {
 .ring-inset {
   --tw-ring-inset: inset;
 }
+.ring-primary-80 {
+  --tw-ring-color: var(--aquarium-colors-primary-80, #3545be);
+}
 .ring-grey-30 {
   --tw-ring-color: var(--aquarium-colors-grey-30, #b4b4bb);
 }
@@ -2487,16 +2487,24 @@ input[type='number'].no-arrows {
   margin-top: 0;
 }
 .visited\:text-primary-80:visited {
-  color: #e41a4a;
-  color: var(--aquarium-colors-primary-80, #e41a4a);
+  color: #3545be;
+  color: var(--aquarium-colors-primary-80, #3545be);
 }
-.checked\:border-navyBlue-100:checked {
-  border-color: #30375e;
-  border-color: var(--aquarium-colors-navyBlue-100, #30375e);
+.checked\:border-primary-80:checked {
+  border-color: #3545be;
+  border-color: var(--aquarium-colors-primary-80, #3545be);
 }
-.checked\:bg-navyBlue-100:checked {
-  background-color: #30375e;
-  background-color: var(--aquarium-colors-navyBlue-100, #30375e);
+.checked\:border-primary-40:checked {
+  border-color: #b9c5ef;
+  border-color: var(--aquarium-colors-primary-40, #b9c5ef);
+}
+.checked\:bg-primary-80:checked {
+  background-color: #3545be;
+  background-color: var(--aquarium-colors-primary-80, #3545be);
+}
+.checked\:bg-primary-40:checked {
+  background-color: #b9c5ef;
+  background-color: var(--aquarium-colors-primary-40, #b9c5ef);
 }
 .checked\:bg-opacity-40:checked {
   --tw-bg-opacity: 0.4;
@@ -2533,9 +2541,13 @@ input[type='number'].no-arrows {
   background-color: #b4b4bb;
   background-color: var(--aquarium-colors-grey-30, #b4b4bb);
 }
-.hover\:bg-primary-70:hover {
-  background-color: #ff3554;
-  background-color: var(--aquarium-colors-primary-70, #ff3554);
+.hover\:bg-primary-90:hover {
+  background-color: #222f95;
+  background-color: var(--aquarium-colors-primary-90, #222f95);
+}
+.hover\:bg-primary-5:hover {
+  background-color: #f3f6ff;
+  background-color: var(--aquarium-colors-primary-5, #f3f6ff);
 }
 .hover\:bg-error-10:hover {
   background-color: #ffcbd2;
@@ -2545,9 +2557,13 @@ input[type='number'].no-arrows {
   background-color: #e1e1e3;
   background-color: var(--aquarium-colors-grey-10, #e1e1e3);
 }
+.hover\:text-primary-90:hover {
+  color: #222f95;
+  color: var(--aquarium-colors-primary-90, #222f95);
+}
 .hover\:text-primary-70:hover {
-  color: #ff3554;
-  color: var(--aquarium-colors-primary-70, #ff3554);
+  color: #5865cd;
+  color: var(--aquarium-colors-primary-70, #5865cd);
 }
 .hover\:text-grey-80:hover {
   color: #3a3a44;
@@ -2558,15 +2574,19 @@ input[type='number'].no-arrows {
   color: var(--aquarium-colors-grey-90, #292a31);
 }
 .hover\:text-primary-80:hover {
-  color: #e41a4a;
-  color: var(--aquarium-colors-primary-80, #e41a4a);
+  color: #3545be;
+  color: var(--aquarium-colors-primary-80, #3545be);
 }
-.hover\:ring-grey-50:hover {
-  --tw-ring-color: var(--aquarium-colors-grey-50, #787885);
+.hover\:no-underline:hover {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
+.hover\:ring-primary-90:hover {
+  --tw-ring-color: var(--aquarium-colors-primary-90, #222f95);
 }
-.hover\:checked\:bg-navyBlue-100:checked:hover {
-  background-color: #30375e;
-  background-color: var(--aquarium-colors-navyBlue-100, #30375e);
+.hover\:checked\:bg-primary-80:checked:hover {
+  background-color: #3545be;
+  background-color: var(--aquarium-colors-primary-80, #3545be);
 }
 .focus\:border:focus {
   border-width: 1px;
@@ -2588,8 +2608,8 @@ input[type='number'].no-arrows {
   background-color: var(--aquarium-colors-grey-20, #d2d2d6);
 }
 .focus\:text-primary-80:focus {
-  color: #e41a4a;
-  color: var(--aquarium-colors-primary-80, #e41a4a);
+  color: #3545be;
+  color: var(--aquarium-colors-primary-80, #3545be);
 }
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
@@ -2635,13 +2655,21 @@ input[type='number'].no-arrows {
   background-color: #f7f7fa;
   background-color: var(--aquarium-colors-grey-0, #f7f7fa);
 }
-.focus-visible\:text-grey-90.focus-visible {
-  color: #292a31;
-  color: var(--aquarium-colors-grey-90, #292a31);
+.focus-visible\:text-primary-90.focus-visible {
+  color: #222f95;
+  color: var(--aquarium-colors-primary-90, #222f95);
 }
-.focus-visible\:text-grey-90:focus-visible {
-  color: #292a31;
-  color: var(--aquarium-colors-grey-90, #292a31);
+.focus-visible\:text-primary-90:focus-visible {
+  color: #222f95;
+  color: var(--aquarium-colors-primary-90, #222f95);
+}
+.focus-visible\:text-primary-80.focus-visible {
+  color: #3545be;
+  color: var(--aquarium-colors-primary-80, #3545be);
+}
+.focus-visible\:text-primary-80:focus-visible {
+  color: #3545be;
+  color: var(--aquarium-colors-primary-80, #3545be);
 }
 .focus-visible\:text-grey-80.focus-visible {
   color: #3a3a44;
@@ -2651,6 +2679,14 @@ input[type='number'].no-arrows {
   color: #3a3a44;
   color: var(--aquarium-colors-grey-80, #3a3a44);
 }
+.focus-visible\:text-grey-90.focus-visible {
+  color: #292a31;
+  color: var(--aquarium-colors-grey-90, #292a31);
+}
+.focus-visible\:text-grey-90:focus-visible {
+  color: #292a31;
+  color: var(--aquarium-colors-grey-90, #292a31);
+}
 .focus-visible\:outline-0.focus-visible {
   outline-width: 0px;
 }
@@ -2688,16 +2724,16 @@ input[type='number'].no-arrows {
   --tw-ring-inset: inset;
 }
 .focus-visible\:ring-primary-100.focus-visible {
-  --tw-ring-color: var(--aquarium-colors-primary-100, #a70045);
+  --tw-ring-color: var(--aquarium-colors-primary-100, #0e1652);
 }
 .focus-visible\:ring-primary-100:focus-visible {
-  --tw-ring-color: var(--aquarium-colors-primary-100, #a70045);
+  --tw-ring-color: var(--aquarium-colors-primary-100, #0e1652);
 }
-.focus-visible\:ring-grey-50.focus-visible {
-  --tw-ring-color: var(--aquarium-colors-grey-50, #787885);
+.focus-visible\:ring-primary-90.focus-visible {
+  --tw-ring-color: var(--aquarium-colors-primary-90, #222f95);
 }
-.focus-visible\:ring-grey-50:focus-visible {
-  --tw-ring-color: var(--aquarium-colors-grey-50, #787885);
+.focus-visible\:ring-primary-90:focus-visible {
+  --tw-ring-color: var(--aquarium-colors-primary-90, #222f95);
 }
 .focus-visible\:ring-info-70.focus-visible {
   --tw-ring-color: var(--aquarium-colors-info-70, #0399e3);
@@ -2710,8 +2746,12 @@ input[type='number'].no-arrows {
   background-color: var(--aquarium-colors-grey-5, #ededf0);
 }
 .active\:bg-primary-90:active {
-  background-color: #c60443;
-  background-color: var(--aquarium-colors-primary-90, #c60443);
+  background-color: #222f95;
+  background-color: var(--aquarium-colors-primary-90, #222f95);
+}
+.active\:bg-primary-5:active {
+  background-color: #f3f6ff;
+  background-color: var(--aquarium-colors-primary-5, #f3f6ff);
 }
 .active\:bg-transparent:active {
   background-color: transparent;
@@ -2721,13 +2761,9 @@ input[type='number'].no-arrows {
   background-color: #e1e1e3;
   background-color: var(--aquarium-colors-grey-10, #e1e1e3);
 }
-.active\:text-primary-70:active {
-  color: #ff3554;
-  color: var(--aquarium-colors-primary-70, #ff3554);
-}
-.active\:text-grey-80:active {
-  color: #3a3a44;
-  color: var(--aquarium-colors-grey-80, #3a3a44);
+.active\:text-primary-90:active {
+  color: #222f95;
+  color: var(--aquarium-colors-primary-90, #222f95);
 }
 .active\:text-grey-50:active {
   color: #787885;
@@ -2743,8 +2779,8 @@ input[type='number'].no-arrows {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
 }
-.active\:ring-grey-50:active {
-  --tw-ring-color: var(--aquarium-colors-grey-50, #787885);
+.active\:ring-primary-90:active {
+  --tw-ring-color: var(--aquarium-colors-primary-90, #222f95);
 }
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
@@ -2757,13 +2793,13 @@ input[type='number'].no-arrows {
   background-color: #ededf0;
   background-color: var(--aquarium-colors-grey-5, #ededf0);
 }
-.disabled\:bg-primary-5:disabled {
-  background-color: #ffe8f4;
-  background-color: var(--aquarium-colors-primary-5, #ffe8f4);
+.disabled\:bg-primary-40:disabled {
+  background-color: #b9c5ef;
+  background-color: var(--aquarium-colors-primary-40, #b9c5ef);
 }
-.disabled\:bg-grey-0:disabled {
-  background-color: #f7f7fa;
-  background-color: var(--aquarium-colors-grey-0, #f7f7fa);
+.disabled\:bg-white:disabled {
+  background-color: white;
+  background-color: var(--aquarium-colors-white, white);
 }
 .disabled\:bg-transparent:disabled {
   background-color: transparent;
@@ -2774,8 +2810,8 @@ input[type='number'].no-arrows {
   color: var(--aquarium-colors-grey-40, #9696a0);
 }
 .disabled\:text-primary-40:disabled {
-  color: #ff8db0;
-  color: var(--aquarium-colors-primary-40, #ff8db0);
+  color: #b9c5ef;
+  color: var(--aquarium-colors-primary-40, #b9c5ef);
 }
 .disabled\:text-grey-30:disabled {
   color: #b4b4bb;
@@ -2785,8 +2821,8 @@ input[type='number'].no-arrows {
   color: #d2d2d6;
   color: var(--aquarium-colors-grey-20, #d2d2d6);
 }
-.disabled\:ring-grey-20:disabled {
-  --tw-ring-color: var(--aquarium-colors-grey-20, #d2d2d6);
+.disabled\:ring-primary-40:disabled {
+  --tw-ring-color: var(--aquarium-colors-primary-40, #b9c5ef);
 }
 .group:last-child .group-last\:border-b-0 {
   border-bottom-width: 0px;
@@ -2805,17 +2841,21 @@ input[type='number'].no-arrows {
   --tw-translate-x: 16px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.peer:checked~.peer-checked\:border-navyBlue-100 {
-  border-color: #30375e;
-  border-color: var(--aquarium-colors-navyBlue-100, #30375e);
+.peer:checked~.peer-checked\:border-primary-80 {
+  border-color: #3545be;
+  border-color: var(--aquarium-colors-primary-80, #3545be);
+}
+.peer:checked~.peer-checked\:border-primary-40 {
+  border-color: #b9c5ef;
+  border-color: var(--aquarium-colors-primary-40, #b9c5ef);
 }
 .peer:checked~.peer-checked\:text-white {
   color: white;
   color: var(--aquarium-colors-white, white);
 }
-.peer:checked~.peer-checked\:text-grey-30 {
-  color: #b4b4bb;
-  color: var(--aquarium-colors-grey-30, #b4b4bb);
+.peer:checked~.peer-checked\:text-primary-10 {
+  color: #e3e9ff;
+  color: var(--aquarium-colors-primary-10, #e3e9ff);
 }
 .peer:hover~.peer-hover\:border-grey-50 {
   border-color: #787885;
@@ -2843,13 +2883,16 @@ input[type='number'].no-arrows {
   stroke: transparent;
   stroke: var(--aquarium-colors-transparent, transparent);
 }
+.\[\&\>path\]\:stroke-2>path {
+  stroke-width: 2;
+}
 .peer:checked~.peer-checked\:\[\&\>path\]\:stroke-white>path {
   stroke: white;
   stroke: var(--aquarium-colors-white, white);
 }
-.peer:checked~.peer-checked\:\[\&\>path\]\:stroke-grey-30>path {
-  stroke: #b4b4bb;
-  stroke: var(--aquarium-colors-grey-30, #b4b4bb);
+.peer:checked~.peer-checked\:\[\&\>path\]\:stroke-primary-10>path {
+  stroke: #e3e9ff;
+  stroke: var(--aquarium-colors-primary-10, #e3e9ff);
 }
 .\[\&\>button\]\:p-0>button {
   padding: 0;