[mercury][accordion] Update styles to match Figma design

Author: bsastregx

packages/common/src/metadata/components/accordion/models.ts

@@ -4,7 +4,7 @@ import { getIconPath } from "@genexus/mercury/assets-manager.js";
 const FOLDER_ICON = getIconPath({
   category: "system",
   name: "folder",
-  colorType: "on-surface"
+  colorType: "on-interactive"
 });
 
 export const ACCORDION_ITEMS_IDS = [
@@ -31,19 +31,19 @@ const createModel = (disabled: boolean = false, withIcons: boolean = false) => {
     {
       id: ACCORDION_ITEMS_IDS[1],
       caption: ACCORDION_ITEMS_CAPTIONS[1],
-      expanded: !disabled,
+      expanded: false,
       ...(withIcons && { startImgSrc: FOLDER_ICON })
     },
     {
       id: ACCORDION_ITEMS_IDS[2],
       caption: ACCORDION_ITEMS_CAPTIONS[2],
-      expanded: !disabled,
+      expanded: false,
       ...(withIcons && { startImgSrc: FOLDER_ICON })
     },
     {
       id: ACCORDION_ITEMS_IDS[3],
       caption: ACCORDION_ITEMS_CAPTIONS[3],
-      expanded: !disabled,
+      expanded: false,
       ...(withIcons && { startImgSrc: FOLDER_ICON })
     }
   ];

packages/mercury/src/components/accordion/_accordion-styles.scss

@@ -73,66 +73,79 @@
   }
 
   &-filled {
+    // chevron icon
+    --ch-accordion__header-background-image: var(
+      --icon__system_chevron-down_on-interactive--enabled
+    );
     &--hover {
       --accordion-bg-color: var(--color-accent-item-hover);
       --accordion-header-color: var(--color-text-primary-on-hover);
       --ch-accordion__header-background-image: var(
-        --icon__system_chevron-down_on-surface--hover
+        --icon__system_chevron-down_on-interactive--hover
       );
     }
 
     &--active {
       --accordion-bg-color: var(--color-accent-item-active);
       --accordion-header-color: var(--color-text-primary-on-pressed);
       --ch-accordion__header-background-image: var(
-        --icon__system_chevron-down_on-surface--active
+        --icon__system_chevron-down_on-interactive--active
       );
     }
 
     &--disabled {
       --accordion-header-color: var(--color-text-neutral-on-disabled);
       --ch-accordion__header-background-image: var(
-        --icon__system_chevron-down_on-disabled--enabled
+        --icon__system_chevron-down_on-interactive--disabled
       );
     }
   }
 
   &-filled-header {
-    --accordion-header-bg-color: var(
+    --ch-accordion__header-background-image: var(
+      --icon__system_chevron-down_on-interactive--enabled
+    );
+    --accordion-bg-color: var(
       --elevation-background-color,
       var(--color-accent-surface-elevation-01)
     );
-    background-color: var(--accordion-header-bg-color);
+    background-color: var(--accordion-bg-color);
 
     &--disabled {
-      --accordion-header-bg-color: var(--color-accent-neutral-disabled);
+      --accordion-bg-color: var(--color-accent-neutral-disabled);
       --accordion-header-color: var(--color-text-neutral-on-disabled);
     }
   }
 
   &-outlined {
-    --accordion-header-outline-color: transparent;
+    --ch-accordion__header-background-image: var(
+      --icon__system_chevron-down_interactive--enabled
+    );
+    --accordion-header-outline-color: var(--panel-border-color);
     --accordion-header-outline-width: var(--size-1);
     outline: var(--size-1) solid var(--accordion-header-outline-color);
 
     &--hover {
-      --accordion-header-outline-color: var(--color-border-item-hover);
+      --accordion-header-outline-color: var(--color-border-primary-hover);
       --accordion-header-color: var(--color-text-primary-hover);
       --ch-accordion__header-background-image: var(
-        --icon__system_chevron-down_on-surface--hover
+        --icon__system_chevron-down_interactive--hover
       );
     }
 
     &--active {
       --accordion-header-outline-color: var(--color-border-item-active);
       --accordion-header-color: var(--color-text-primary-pressed);
       --ch-accordion__header-background-image: var(
-        --icon__system_chevron-down_on-surface--active
+        --icon__system_chevron-down_interactive--active
       );
     }
 
     &--disabled {
       --accordion-header-color: var(--color-text-neutral-disabled);
+      --ch-accordion__header-background-image: var(
+        --icon__system_chevron-down_interactive--disabled
+      );
     }
   }
 

packages/mercury/src/components/accordion/_accordion-tokens.scss

@@ -9,8 +9,8 @@
   // spacing
   --spacing-body-block-start: var(--size-12);
   --spacing-body-block-end: var(--size-12);
-  --spacing-body-inline-start: var(--size-12);
-  --spacing-body-inline-end: var(--size-12);
+  --spacing-body-inline-start: var(--size-8);
+  --spacing-body-inline-end: var(--size-8);
 
   // panel
   --accordion-border-radius: var(--size-4);
@@ -20,9 +20,4 @@
   // header
   --accordion-header-outline-color: transparent;
   --accordion-header-border-radius: var(--accordion-border-radius);
-
-  // chevron icon
-  --ch-accordion__header-background-image: var(
-    --icon__system_chevron-down_on-surface--enabled
-  );
 }