diff --git a/shared/components/Divider/Divider.scss b/shared/components/Divider/Divider.scss index 9e8ef8c56d..61e73f7dd9 100644 --- a/shared/components/Divider/Divider.scss +++ b/shared/components/Divider/Divider.scss @@ -127,18 +127,22 @@ hr.bds-divider, // Color Modifiers - Dark Mode (Default) // ============================================================================= // Site defaults to dark mode, so base styles are for dark backgrounds +// Use hr.bds-divider--* for higher specificity to override base hr.bds-divider // Gray variant (default) - subtle, neutral separation +hr.bds-divider--gray, .bds-divider--gray { background-color: $bds-divider-gray-dark; } // Black variant - uses white for contrast on dark backgrounds +hr.bds-divider--black, .bds-divider--black { background-color: $bds-divider-black-dark; } // Green variant - branded, accent separation +hr.bds-divider--green, .bds-divider--green { background-color: $bds-divider-green-dark; } @@ -150,16 +154,19 @@ hr.bds-divider, html.light { // Gray variant in light mode + hr.bds-divider--gray, .bds-divider--gray { background-color: $bds-divider-gray-light; } // Black variant in light mode - use dark color for contrast + hr.bds-divider--black, .bds-divider--black { background-color: $bds-divider-black-light; } // Green variant stays the same in light mode (brand color) + hr.bds-divider--green, .bds-divider--green { background-color: $bds-divider-green-light; } diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css index c10793b86d..bb6d174f5f 100644 --- a/static/css/devportal2024-v1.css +++ b/static/css/devportal2024-v1.css @@ -15175,24 +15175,30 @@ hr.bds-divider, width: 2px; } +hr.bds-divider--gray, .bds-divider--gray { background-color: #454549; } +hr.bds-divider--black, .bds-divider--black { background-color: #FFFFFF; } +hr.bds-divider--green, .bds-divider--green { background-color: #21E46B; } +html.light hr.bds-divider--gray, html.light .bds-divider--gray { background-color: #C1C1C2; } +html.light hr.bds-divider--black, html.light .bds-divider--black { background-color: #111112; } +html.light hr.bds-divider--green, html.light .bds-divider--green { background-color: #21E46B; }