feat: introduce and use subtle color for divider

This commit is contained in:
Chuma McPhoy
2024-06-19 10:47:41 +02:00
committed by Michael Zetterberg
parent f32a5c3608
commit facff498ba
3 changed files with 6 additions and 1 deletions

View File

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

View File

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

View File

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