fix(SW-194): small design updates

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;

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" />}

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;
+}

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);