feat: Remove border from accordion section and move chevron to the left

packages/css/src/components/accordion/accordion.scss

@@ -5,25 +5,30 @@
 
 @import "../../common/text-rendering";
 
+.ams-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ams-accordion-gap);
+
+  @include text-rendering;
+}
+
 .ams-accordion__header {
   display: flex;
   margin-block: 0;
   margin-inline: 0;
 }
 
-@mixin reset-button {
+.ams-accordion__button {
   background-color: transparent;
   border: 0;
-}
-
-.ams-accordion__button {
   color: var(--ams-accordion-button-color);
   cursor: pointer;
   display: flex;
   font-family: var(--ams-accordion-button-font-family);
   font-size: var(--ams-accordion-button-font-size);
   font-weight: var(--ams-accordion-button-font-weight);
-  justify-content: space-between;
+  gap: var(--ams-accordion-button-gap);
   line-height: var(--ams-accordion-button-line-height);
   padding-block: var(--ams-accordion-button-padding-block);
   padding-inline: var(--ams-accordion-button-padding-inline);
@@ -34,24 +39,25 @@
   }
 
   &:hover {
-    box-shadow: var(--ams-accordion-button-hover-box-shadow);
+    color: var(--ams-accordion-button-hover-color);
   }
+}
 
-  svg {
-    transform: rotate(0deg);
-    transition: transform 0.3s ease;
+.ams-accordion__icon svg {
+  rotate: 0deg;
+  transition: none;
 
-    @media (prefers-reduced-motion) {
-      transition: none;
-    }
+  [aria-expanded="true"] & {
+    rotate: -180deg;
   }
 
-  @include text-rendering;
-  @include reset-button;
+  @media not (prefers-reduced-motion) {
+    transition: rotate 0.3s ease;
+  }
 }
 
 .ams-accordion__button[aria-expanded="true"] svg {
-  transform: rotate(180deg);
+  rotate: -180deg;
 }
 
 .ams-accordion__panel {

packages/react/src/Accordion/AccordionSection.tsx

@@ -40,8 +40,8 @@ export const AccordionSection = forwardRef(
             onClick={() => setIsExpanded(!isExpanded)}
             type="button"
           >
+            <Icon svg={ChevronDownIcon} size="level-5" className="ams-accordion__icon" />
             {label}
-            <Icon svg={ChevronDownIcon} size="level-5" />
           </button>
         </HeadingX>
         {section ? (

proprietary/tokens/src/components/ams/accordion.tokens.json

@@ -1,24 +1,26 @@
 {
   "ams": {
     "accordion": {
+      "gap": { "value": "{ams.space.inside.xs}" },
       "button": {
         "color": { "value": "{ams.color.primary-blue}" },
         "font-family": { "value": "{ams.text.font-family}" },
         "font-size": { "value": "{ams.text.level.5.font-size}" },
         "font-weight": { "value": "{ams.text.font-weight.bold}" },
+        "gap": { "value": "{ams.space.inside.md}" },
         "line-height": { "value": "{ams.text.level.5.line-height}" },
         "padding-block": { "value": "{ams.space.inside.sm}" },
-        "padding-inline": { "value": "{ams.space.inside.md}" },
+        "padding-inline": { "value": "0" },
         "focus": {
           "outline-offset": { "value": "{ams.focus.outline-offset}" }
         },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey3}" }
+          "color": { "value": "{ams.color.dark-blue}" }
         }
       },
       "panel": {
-        "padding-block": { "value": "{ams.space.inside.md}" },
-        "padding-inline": { "value": "{ams.space.inside.md}" }
+        "padding-block": { "value": "0 {ams.space.inside.md}" },
+        "padding-inline": { "value": "0" }
       }
     }
   }