From bdb4aacc3259b32114afb5bdd54327fceae4cc1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Tue, 1 Oct 2024 17:21:42 +0200
Subject: [PATCH] fix(SW-194): small design updates

---
 .../Accordion/AccordionItem/accordionItem.module.css     | 9 +--------
 .../TempDesignSystem/Accordion/AccordionItem/index.tsx   | 6 ++++--
 .../TempDesignSystem/Accordion/accordion.module.css      | 4 ++++
 components/TempDesignSystem/Card/card.module.css         | 4 ++--
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
index ae0d0e20e..7940ee17f 100644
--- a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
+++ b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
@@ -6,13 +6,6 @@
   padding: var(--Spacing-x1);
 }
 
-.accordionItem.light {
-  background-color: var(--Base-Surface-Primary-light-Normal);
-}
-.accordionItem.subtle {
-  background-color: var(--Base-Background-Primary-Normal);
-}
-
 .summary {
   position: relative;
   display: flex;
@@ -48,7 +41,7 @@
 }
 
 .content {
-  padding: 0 var(--Spacing-x-one-and-half);
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half) var(--Spacing-x1);
   overflow: hidden;
   max-height: 0;
   transition: max-height 0.3s;
diff --git a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
index 84be2d010..013eb746d 100644
--- a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
+++ b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
@@ -5,17 +5,19 @@ import { useRef } from "react"
 import { ChevronDownIcon } from "@/components/Icons"
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 
-import { AccordionItemProps } from "./accordionItem"
 import { accordionItemVariants } from "./variants"
 
 import styles from "./accordionItem.module.css"
 
+import type { AccordionItemProps } from "./accordionItem"
+
 export default function AccordionItem({
   children,
   icon,
   title,
   theme,
   variant,
+  className,
 }: AccordionItemProps) {
   const contentRef = useRef<HTMLDivElement>(null)
   const detailsRef = useRef<HTMLDetailsElement>(null)
@@ -43,7 +45,7 @@ export default function AccordionItem({
   }
 
   return (
-    <li className={accordionItemVariants({ variant, theme })}>
+    <li className={accordionItemVariants({ className, variant, theme })}>
       <details ref={detailsRef} onToggle={toggleAccordion}>
         <summary className={styles.summary}>
           {IconComp && <IconComp className={styles.icon} color="burgundy" />}
diff --git a/components/TempDesignSystem/Accordion/accordion.module.css b/components/TempDesignSystem/Accordion/accordion.module.css
index 0f9be355e..64f18730c 100644
--- a/components/TempDesignSystem/Accordion/accordion.module.css
+++ b/components/TempDesignSystem/Accordion/accordion.module.css
@@ -12,3 +12,7 @@
 .accordion.subtle {
   background-color: var(--Base-Background-Primary-Normal);
 }
+
+.accordion li:last-child {
+  border: none;
+}
diff --git a/components/TempDesignSystem/Card/card.module.css b/components/TempDesignSystem/Card/card.module.css
index 4f501d1cf..6dd063c76 100644
--- a/components/TempDesignSystem/Card/card.module.css
+++ b/components/TempDesignSystem/Card/card.module.css
@@ -60,7 +60,7 @@
 }
 
 .themeThree {
-  --font-color: var(--Tertiary-Light-Surface-Text);
+  --font-color: var(--Tertiary-Light-On-Surface-Text);
   --script-color: var(--Tertiary-Light-On-Surface-Accent);
 
   background: var(--Tertiary-Light-Surface-Normal);
@@ -74,7 +74,7 @@
 }
 
 .themePrimaryDim {
-  --font-color: var(--Primary-Light-On-Surface-Text);
+  --font-color: var(--Primary-Dim-On-Surface-Text);
   --script-color: var(--Primary-Dim-On-Surface-Accent);
 
   background: var(--Primary-Dim-Surface-Normal);