feat: introduce and use subtle color for divider

components/Current/Header/MyPagesMobileDropdown/index.tsx

@@ -39,7 +39,7 @@ export default function MyPagesMobileDropdown({
       </Title>
       {navigation.menuItems.map((menuItem, idx) => (
         <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
-          <Divider color="peach" />
+          <Divider color="subtle" />
           <ul className={styles.dropdownWrapper}>
             <ul className={styles.dropdownLinks}>
               {menuItem.links.map((link) => (

components/TempDesignSystem/Divider/divider.module.css

@@ -17,6 +17,10 @@
   border-bottom-color: var(--Theme-Primary-Light-On-Surface-Divider);
 }
 
+.subtle {
+  border-bottom-color: var(--Base-Border-Subtle);
+}
+
 .opacity100 {
   opacity: 1;
 }

components/TempDesignSystem/Divider/variants.ts

@@ -7,6 +7,7 @@ export const dividerVariants = cva(styles.divider, {
     color: {
       burgundy: styles.burgundy,
       peach: styles.peach,
+      subtle: styles.subtle,
     },
     opacity: {
       100: styles.opacity100,