deps(coral): Update design-system (#2535)

* Update design-system Signed-off-by: Mirjam Aulbach <[email protected]> * Update color variable Signed-off-by: Mirjam Aulbach <[email protected]> * Remove now unneeded prop Signed-off-by: Mirjam Aulbach <[email protected]> * Update snapshot tests for classes after DS update. Signed-off-by: Mirjam Aulbach <[email protected]> * Update ds to latest version Signed-off-by: Mirjam Aulbach <[email protected]> --------- Signed-off-by: Mirjam Aulbach <[email protected]> Signed-off-by: Mirjam Aulbach <[email protected]>
Aiven-Open · Aug 22, 2024 · 29e5adc · 29e5adc
1 parent 8deed31
commit 29e5adc
Show file tree

Hide file tree

Showing 8 changed files with 457 additions and 2,421 deletions.
diff --git a/coral/package.json b/coral/package.json
@@ -40,7 +40,7 @@
     ]
   },
   "dependencies": {
-    "@aivenio/aquarium": "1.66.0",
+    "@aivenio/aquarium": "1.74.0",
     "@hookform/resolvers": "^3.9.0",
     "@monaco-editor/react": "^4.6.0",
     "@tanstack/react-query": "^4.29.5",

diff --git a/coral/pnpm-lock.yaml b/coral/pnpm-lock.yaml
diff --git a/coral/src/app/components/__snapshots__/Form.test.tsx.snap b/coral/src/app/components/__snapshots__/Form.test.tsx.snap
@@ -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-default disabled:bg-default typography-small text-default disabled:text-muted-2x placeholder:text-muted-2x focus:outline-none px-3 py-3 border border-default hover:border-intense focus:border-info-default"
+            class="block w-full rounded-sm disabled:cursor-not-allowed disabled:border-default disabled:bg-default typography-small text-default disabled:text-inactive placeholder:text-inactive focus:outline-none px-3 py-3 border border-default hover:border-intense focus:border-info-default"
             id="test-id"
             name="password"
             type="password"
@@ -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-default disabled:bg-default typography-small text-default disabled:text-muted-2x placeholder:text-muted-2x focus:outline-none px-3 py-3 border border-default hover:border-intense focus:border-info-default"
+            class="block w-full rounded-sm disabled:cursor-not-allowed disabled:border-default disabled:bg-default typography-small text-default disabled:text-inactive placeholder:text-inactive focus:outline-none px-3 py-3 border border-default hover:border-intense focus:border-info-default"
             id="test-id"
             name="formFieldsCustomName"
             type="text"

diff --git a/coral/src/app/components/__snapshots__/InternalLinkButton.test.tsx.snap b/coral/src/app/components/__snapshots__/InternalLinkButton.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`InternalLinkButton renders different styles based on selected Aquarium'
 exports[`InternalLinkButton renders different styles based on selected Aquarium's Button props shows a secondary button based on props 1`] = `
 <div>
   <a
-    class="Aquarium-Button Aquarium-Button.Secondary text-primary-intense bg-body ring-1 ring-primary-80 ring-inset active:bg-primary-muted-3x active:ring-primary-90 active:text-primary-intense focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:text-primary-intense hover:bg-primary-muted-3x hover:ring-primary-90 hover:text-primary-intense disabled:bg-body disabled:text-primary-muted-2x disabled:ring-primary-40 inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 px-4 icon-stroke-2"
+    class="Aquarium-Button Aquarium-Button.Secondary text-primary-intense bg-body ring-1 ring-primary-80 ring-inset active:bg-primary-active active:ring-primary-90 active:text-primary-intense focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:text-primary-intense hover:bg-primary-hover hover:ring-primary-90 hover:text-primary-intense disabled:bg-body disabled:text-primary-inactive disabled:ring-primary-40 inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 px-4 icon-stroke-2"
     href="/test/url"
   >
     My nice link

diff --git a/coral/src/app/features/components/filters/SearchFilter.tsx b/coral/src/app/features/components/filters/SearchFilter.tsx
@@ -30,7 +30,6 @@ function SearchFilter({
       </Label>
 
       <SearchInput
-        type={"search"}
         aria-label={placeholder}
         aria-labelledby={labelId}
         aria-describedby={descriptionId}

diff --git a/coral/src/app/features/dashboard/__snapshots__/Dasboard.test.tsx.snap b/coral/src/app/features/dashboard/__snapshots__/Dasboard.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`Dashboard.tsx renders correct DOM according to data received from getRe
           Topics
         </div>
         <div
-          class="typography-caption text-grey-70"
+          class="typography-caption text-default"
         >
           <div
             style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));"
@@ -130,7 +130,7 @@ exports[`Dashboard.tsx renders correct DOM according to data received from getRe
           My team's pending requests
         </div>
         <div
-          class="typography-caption text-grey-70"
+          class="typography-caption text-default"
         >
           <div
             style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));"
@@ -243,7 +243,7 @@ exports[`Dashboard.tsx renders correct DOM according to data received from getRe
           My team's approved requests
         </div>
         <div
-          class="typography-caption text-grey-70"
+          class="typography-caption text-default"
         >
           <div
             class="Aquarium-NativeSelect"
@@ -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-muted-2x flex ml-3 pointer-events-none typography-default-strong mt-4"
+                  class="absolute right-0 inset-y-0 mr-4 text-inactive 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-default placeholder:text-muted-2x focus:outline-none px-3 py-3 disabled:border-default disabled:bg-default disabled:text-muted-2x border border-default hover:border-intense focus:border-info-default"
+                  class="block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-small text-default placeholder:text-inactive focus:outline-none px-3 py-3 disabled:border-default disabled:bg-default disabled:text-inactive border border-default hover:border-intense focus:border-info-default"
                   id="react-aria-:r0:"
                 >
                   <option
@@ -343,7 +343,7 @@ exports[`Dashboard.tsx renders correct DOM according to data received from getRe
           My team's topics per environment
         </div>
         <div
-          class="typography-caption text-grey-70"
+          class="typography-caption text-default"
         >
           <div
             style="display: flex; justify-content: center; align-content: center; flex-wrap: wrap; min-height: 250px;"

diff --git a/coral/src/app/features/topics/details/overview/__snapshots__/TopicOverview.test.tsx.snap b/coral/src/app/features/topics/details/overview/__snapshots__/TopicOverview.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`TopicOverview with promotion banner renders correct DOM according to da
             Topic details
           </div>
           <div
-            class="typography-caption text-grey-70"
+            class="typography-caption text-default"
           >
             <div
               style="display: flex; gap: 160px;"
@@ -73,7 +73,7 @@ exports[`TopicOverview with promotion banner renders correct DOM according to da
             Topic owner
           </div>
           <div
-            class="typography-caption text-grey-70"
+            class="typography-caption text-default"
           >
             <div
               class="typography-default text-default"
@@ -147,7 +147,7 @@ exports[`TopicOverview with promotion banner renders correct DOM according to da
             Cluster details
           </div>
           <div
-            class="typography-caption text-grey-70"
+            class="typography-caption text-default"
           >
             <div
               class="visually-hidden"
@@ -286,7 +286,7 @@ exports[`TopicOverview with promotion banner renders correct DOM according to da
           Subscriptions
         </div>
         <div
-          class="typography-caption text-grey-70"
+          class="typography-caption text-default"
         >
           <div
             style="display: flex; gap: 160px;"
@@ -327,7 +327,7 @@ exports[`TopicOverview with promotion banner renders correct DOM according to da
               href="/topic/aivendemotopic/subscribe?env=1"
             >
               <button
-                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-intense-2x focus-visible:text-primary-intense-2x hover:text-primary-intense-2x disabled:text-primary-muted-2x inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
+                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-active focus-visible:text-primary-active hover:text-primary-active disabled:text-primary-inactive inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
               >
                 <div
                   style="display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 8px;"
@@ -371,7 +371,7 @@ exports[`TopicOverview with promotion banner renders correct DOM according to da
               href="/topic/aivendemotopic/subscriptions"
             >
               <button
-                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-intense-2x focus-visible:text-primary-intense-2x hover:text-primary-intense-2x disabled:text-primary-muted-2x inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
+                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-active focus-visible:text-primary-active hover:text-primary-active disabled:text-primary-inactive inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
               >
                 <div
                   class="typography-small-strong text-primary-80"
@@ -396,7 +396,7 @@ exports[`TopicOverview with promotion banner renders correct DOM according to da
           Schemas
         </div>
         <div
-          class="typography-caption text-grey-70"
+          class="typography-caption text-default"
         >
           <div
             style="display: flex; justify-content: space-around; flex-direction: column;"
@@ -419,7 +419,7 @@ exports[`TopicOverview with promotion banner renders correct DOM according to da
               href="/topic/aivendemotopic/request-schema"
             >
               <button
-                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-intense-2x focus-visible:text-primary-intense-2x hover:text-primary-intense-2x disabled:text-primary-muted-2x inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
+                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-active focus-visible:text-primary-active hover:text-primary-active disabled:text-primary-inactive inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
               >
                 <div
                   style="display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 8px;"
@@ -463,7 +463,7 @@ exports[`TopicOverview with promotion banner renders correct DOM according to da
               href="/topic/aivendemotopic/schema"
             >
               <button
-                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-intense-2x focus-visible:text-primary-intense-2x hover:text-primary-intense-2x disabled:text-primary-muted-2x inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
+                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-active focus-visible:text-primary-active hover:text-primary-active disabled:text-primary-inactive inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
               >
                 <div
                   class="typography-small-strong text-primary-80"
@@ -500,7 +500,7 @@ exports[`TopicOverview without promotion banner renders correct DOM according to
             Topic details
           </div>
           <div
-            class="typography-caption text-grey-70"
+            class="typography-caption text-default"
           >
             <div
               style="display: flex; gap: 160px;"
@@ -553,7 +553,7 @@ exports[`TopicOverview without promotion banner renders correct DOM according to
             Topic owner
           </div>
           <div
-            class="typography-caption text-grey-70"
+            class="typography-caption text-default"
           >
             <div
               class="typography-default text-default"
@@ -579,7 +579,7 @@ exports[`TopicOverview without promotion banner renders correct DOM according to
             Cluster details
           </div>
           <div
-            class="typography-caption text-grey-70"
+            class="typography-caption text-default"
           >
             <div
               class="visually-hidden"
@@ -718,7 +718,7 @@ exports[`TopicOverview without promotion banner renders correct DOM according to
           Subscriptions
         </div>
         <div
-          class="typography-caption text-grey-70"
+          class="typography-caption text-default"
         >
           <div
             style="display: flex; gap: 160px;"
@@ -759,7 +759,7 @@ exports[`TopicOverview without promotion banner renders correct DOM according to
               href="/topic/aivendemotopic/subscribe?env=1"
             >
               <button
-                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-intense-2x focus-visible:text-primary-intense-2x hover:text-primary-intense-2x disabled:text-primary-muted-2x inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
+                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-active focus-visible:text-primary-active hover:text-primary-active disabled:text-primary-inactive inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
               >
                 <div
                   style="display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 8px;"
@@ -803,7 +803,7 @@ exports[`TopicOverview without promotion banner renders correct DOM according to
               href="/topic/aivendemotopic/subscriptions"
             >
               <button
-                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-intense-2x focus-visible:text-primary-intense-2x hover:text-primary-intense-2x disabled:text-primary-muted-2x inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
+                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-active focus-visible:text-primary-active hover:text-primary-active disabled:text-primary-inactive inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
               >
                 <div
                   class="typography-small-strong text-primary-80"
@@ -828,7 +828,7 @@ exports[`TopicOverview without promotion banner renders correct DOM according to
           Schemas
         </div>
         <div
-          class="typography-caption text-grey-70"
+          class="typography-caption text-default"
         >
           <div
             style="display: flex; justify-content: space-around; flex-direction: column;"
@@ -851,7 +851,7 @@ exports[`TopicOverview without promotion banner renders correct DOM according to
               href="/topic/aivendemotopic/request-schema"
             >
               <button
-                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-intense-2x focus-visible:text-primary-intense-2x hover:text-primary-intense-2x disabled:text-primary-muted-2x inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
+                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-active focus-visible:text-primary-active hover:text-primary-active disabled:text-primary-inactive inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
               >
                 <div
                   style="display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 8px;"
@@ -895,7 +895,7 @@ exports[`TopicOverview without promotion banner renders correct DOM according to
               href="/topic/aivendemotopic/schema"
             >
               <button
-                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-intense-2x focus-visible:text-primary-intense-2x hover:text-primary-intense-2x disabled:text-primary-muted-2x inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
+                class="Aquarium-Button Aquarium-Button.Ghost text-primary-intense active:text-primary-active focus-visible:text-primary-active hover:text-primary-active disabled:text-primary-inactive inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center typography-default-strong py-3 icon-stroke-2"
               >
                 <div
                   class="typography-small-strong text-primary-80"

diff --git a/coral/src/app/layout/main-navigation/MainNavigationLink.tsx b/coral/src/app/layout/main-navigation/MainNavigationLink.tsx
@@ -77,10 +77,7 @@ function MainNavigationLink(props: MainNavigationLinkProps) {
         </Link>
       )}
       {notifications > 0 && (
-        <Box.Flex
-          alignItems="center"
-          color={"var(--aquarium-colors-primary-80)"}
-        >
+        <Box.Flex alignItems="center" color={"primary-80"}>
           <Box.Flex height={"fit"}>
             <TabBadge value={notifications} />
           </Box.Flex>