update info icon style

Author: zzq0826

src/components/Alert/Assets/info-icon.svg

@@ -38,14 +38,13 @@ const icons = {
     --aside-bg: var(--color-background-info);
     background-color: var(--aside-bg);
 
-    display: flex;
-    @apply p-4 gap-4 rounded-[4px] text-info;
+    /* display: flex; */
+    @apply p-[30px] gap-4 rounded-[27px] text-info;
   }
 
-  .title {
+  aside p.title {
     font-weight: bold;
-    font-size: 14px;
-    text-transform: uppercase;
+    font-size: 18px;
   }
 
   aside p {
@@ -55,6 +54,7 @@ const icons = {
   .icon {
     flex-shrink: 0;
     width: 1.5em;
+    margin-bottom: 10px;
   }
   .icon svg {
     vertical-align: middle;
@@ -63,7 +63,7 @@ const icons = {
 
   aside :global(a),
   aside :global(a > code:not([class*="language"])) {
-    @apply text-link;
+    @apply text-link underline;
   }
 
   aside :global(p),
@@ -93,8 +93,8 @@ const icons = {
 
   .asideContent :global(p) {
     margin-bottom: 0;
-    font-size: 14px;
-    line-height: 1.4;
+    font-size: 16px;
+    line-height: 25px;
   }
 
   .asideContent :global(p + p) {

src/components/Aside.astro

@@ -5,6 +5,6 @@
   --color-background-contrast: var(--blue-900);
   --color-background-warning: var(--yellow-100);
   --color-background-success: var(--green-100);
-  --color-background-info: var(--blue-100);
+  --color-background-info: var(--orange-200);
   --color-background-disabled: var(--gray-200);
 }

src/styles/design-system/tokens/background.css

@@ -30,7 +30,7 @@
   --black: #000000;
   --black-100: #101010;
   --orange-100: #fcf1df;
-  --orange-200: #fee9e0;
+  --orange-200: #fff8f3;
   --orange-300: #f8a077;
   --orange-400: #ff684b;
   --orange-500: #c58d49;