build(deps): Update aquarium 1.60.1 (#2352)

* Update aquarium to version 1.60.1

Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io>

* Update snapshot tests

Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io>

* Align colour for switch team label and table after update to DS

Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io>

---------

Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io>

coral/package.json

@@ -40,7 +40,7 @@
     ]
   },
   "dependencies": {
-    "@aivenio/aquarium": "1.57.1",
+    "@aivenio/aquarium": "1.60.1",
     "@hookform/resolvers": "^3.3.4",
     "@monaco-editor/react": "^4.6.0",
     "@tanstack/react-query": "^4.29.5",

coral/src/app/accessibility.module.css

@@ -142,5 +142,6 @@ a:not(.Aquarium-Button):focus-visible {
 /* changes font weight to be distinguishable */
 /* from table cells font */
 :root thead > tr > th {
-  color: black !important;
+  /*represents grey-70 */
+  color: #4a4b57 !important;
 }

coral/src/app/components/__snapshots__/Form.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`Form <PasswordInput> should render <PasswordInput> 1`] = `
           class="block mb-2"
         >
           <span
-            class="inline-flex items-center typography-small-strong text-grey-70"
+            class="inline-flex items-center typography-small-strong text-default"
           >
             PasswordInput
           </span>
@@ -26,7 +26,7 @@ exports[`Form <PasswordInput> should render <PasswordInput> 1`] = `
         >
           <input
             aria-required="false"
-            class="block w-full rounded-sm disabled:cursor-not-allowed disabled:border-grey-20 disabled:bg-grey-5 typography-small text-grey-70 disabled:text-grey-40 placeholder:text-grey-40 focus:outline-none px-3 py-3 border border-grey-20 hover:border-grey-50 focus:border-info-70"
+            class="block w-full rounded-sm disabled:cursor-not-allowed disabled:border-grey-20 disabled:bg-grey-5 typography-small text-default disabled:text-muted placeholder:text-muted focus:outline-none px-3 py-3 border border-grey-20 hover:border-grey-50 focus:border-info-70"
             id="test-id"
             name="password"
             type="password"
@@ -64,7 +64,7 @@ exports[`Form <TextInput> should render <TextInput> 1`] = `
           class="block mb-2"
         >
           <span
-            class="inline-flex items-center typography-small-strong text-grey-70"
+            class="inline-flex items-center typography-small-strong text-default"
           >
             TextInput
           </span>
@@ -74,7 +74,7 @@ exports[`Form <TextInput> should render <TextInput> 1`] = `
         >
           <input
             aria-required="false"
-            class="block w-full rounded-sm disabled:cursor-not-allowed disabled:border-grey-20 disabled:bg-grey-5 typography-small text-grey-70 disabled:text-grey-40 placeholder:text-grey-40 focus:outline-none px-3 py-3 border border-grey-20 hover:border-grey-50 focus:border-info-70"
+            class="block w-full rounded-sm disabled:cursor-not-allowed disabled:border-grey-20 disabled:bg-grey-5 typography-small text-default disabled:text-muted placeholder:text-muted focus:outline-none px-3 py-3 border border-grey-20 hover:border-grey-50 focus:border-info-70"
             id="test-id"
             name="formFieldsCustomName"
             type="text"

coral/src/app/features/dashboard/__snapshots__/Dasboard.test.tsx.snap

@@ -258,7 +258,7 @@ exports[`Dashboard.tsx renders correct DOM according to data received from getRe
                 class="block mb-2"
               >
                 <span
-                  class="inline-flex items-center typography-small-strong text-grey-70"
+                  class="inline-flex items-center typography-small-strong text-default"
                 >
                   Timeframe
                 </span>
@@ -267,7 +267,7 @@ exports[`Dashboard.tsx renders correct DOM according to data received from getRe
                 class="Aquarium-NativeSelectBase relative block"
               >
                 <span
-                  class="absolute right-0 inset-y-0 mr-4 text-grey-40 flex ml-3 pointer-events-none typography-default-strong mt-4"
+                  class="absolute right-0 inset-y-0 mr-4 text-muted flex ml-3 pointer-events-none typography-default-strong mt-4"
                 >
                   <svg
                     aria-hidden="true"
@@ -292,7 +292,7 @@ exports[`Dashboard.tsx renders correct DOM according to data received from getRe
                   </svg>
                 </span>
                 <select
-                  class="block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-small text-grey-70 placeholder:text-grey-40 focus:outline-none px-3 py-3 disabled:border-grey-20 disabled:bg-grey-5 disabled:text-grey-40 border border-grey-20 hover:border-grey-50 focus:border-info-70"
+                  class="block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-small text-default placeholder:text-muted focus:outline-none px-3 py-3 disabled:border-grey-20 disabled:bg-grey-5 disabled:text-muted border border-grey-20 hover:border-grey-50 focus:border-info-70"
                   id="react-aria-:r0:"
                 >
                   <option

coral/src/app/features/team-info/TeamInfo.tsx

@@ -31,7 +31,7 @@ function TeamInfo() {
       marginBottom={"l1"}
     >
       <Box display={"flex"} alignItems={"center"} colGap={"2"}>
-        <Typography.SmallStrong color={"grey-50"}>
+        <Typography.SmallStrong color={"grey-70"}>
           <span className={"visually-hidden"}>Your </span>
           Team
         </Typography.SmallStrong>