Add dark mode for cookie-banner (#30559)

* feat: adding dark mode for cookie-banner

* feat: move most relevant cookie-banner styles to footer

* fix: consistent naming for css vars, and scoping dark mode to only applicable pages for cookie Banner

* fix: swapping to themed border var

GitOrigin-RevId: 7de36cdeae6802a96a6983c739ab6fc95dee7e28
This commit is contained in:
Jimmy Domagala-Tang
2026-01-13 12:36:30 -05:00
committed by Copybot
parent 2b39beab80
commit a204f30d0f
2 changed files with 31 additions and 4 deletions

View File

@@ -3,6 +3,33 @@
// Max width of the sidebar
$footer-width-delta: 320px;
@mixin cookie-banner-light {
--cookie-banner-background: var(--bg-light-primary);
--cookie-banner-content: var(--content-primary);
--cookie-banner-link: var(--link-ui);
}
@mixin cookie-banner-dark {
--cookie-banner-background: var(--bg-dark-secondary);
--cookie-banner-content: var(--content-primary-dark);
--cookie-banner-link: var(--link-ui-dark);
}
:root {
.cookie-banner {
@include cookie-banner-light;
}
@include theme('default') {
.ide-redesign-main,
.project-ds-nav-page {
.cookie-banner {
@include cookie-banner-dark;
}
}
}
}
@mixin footer-container-up($bp) {
$size: map.get($grid-breakpoints, $bp);
@@ -373,9 +400,10 @@ footer.site-footer {
left: 0;
right: 0;
z-index: 100;
color: var(--content-secondary);
background: var(--bg-light-secondary);
box-shadow: 0 -5px 8px 0 #0000001a;
background-color: var(--cookie-banner-background);
color: var(--cookie-banner-content);
.cookie-banner-actions {
padding-top: var(--spacing-04);
@@ -398,7 +426,7 @@ footer.site-footer {
.cookie-banner-content a,
.cookie-banner-actions .btn-link {
color: var(--link-ui);
color: var(--cookie-banner-link);
}
}
}

View File

@@ -281,7 +281,7 @@ body {
> * {
@include media-breakpoint-up(md) {
border-left: 1px solid var(--border-divider);
border-left: 1px solid var(--border-divider-themed);
}
}
@@ -299,7 +299,6 @@ body {
.cookie-banner {
position: static;
background-color: var(--bg-light-primary);
// Remove the parts of the shadow that stick out of the sides
clip-path: inset(-13px 0 0 0);