Improve Treedip dark styles

- Adjust dark mode colours - Fix up form radio button styles - Share radio styles between radio fields and custom amount - Keep the box shadow on light mode - Improve fallback banner dark styles Ticket: https://phabricator.wikimedia.org/T372553
wmde · Sep 3, 2024 · ae9651e · ae9651e
1 parent b76742e
commit ae9651e
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 74 deletions.
diff --git a/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackSlides.vue b/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackSlides.vue
@@ -1,20 +1,15 @@
 <template>
 	<KeenSliderSlide :is-current="currentSlide === 0">
-		<p>
-			Our donation target: €9.7 million
-		</p>
-	</KeenSliderSlide>
-	<KeenSliderSlide :is-current="currentSlide === 1">
 		<p>
 			If Wikipedia has given you €5 worth of knowledge this year, please give back.
 		</p>
 	</KeenSliderSlide>
-	<KeenSliderSlide :is-current="currentSlide === 2">
+	<KeenSliderSlide :is-current="currentSlide === 1">
 		<p>
 			If you can, please join the 1% of readers who give. <em>Thank you.</em>
 		</p>
 	</KeenSliderSlide>
-	<KeenSliderSlide :is-current="currentSlide === 3">
+	<KeenSliderSlide :is-current="currentSlide === 2">
 		<FallbackBank/>
 	</KeenSliderSlide>
 </template>

diff --git a/banners/english/C24_WMDE_Desktop_EN_01/styles/Banner.scss b/banners/english/C24_WMDE_Desktop_EN_01/styles/Banner.scss
@@ -4,7 +4,7 @@
 	&-wrapper {
 		font-size: 14px;
 		font-family: fonts.$ui;
-		border-bottom: 1px solid var( --main-border-bottom );
+		box-shadow: var( --main-box-shadow );
 		background-color: var( --main-background );
 		color: var( --main-color );
 	}

diff --git a/banners/english/C24_WMDE_Desktop_EN_01/styles/FallbackBanner.scss b/banners/english/C24_WMDE_Desktop_EN_01/styles/FallbackBanner.scss
@@ -11,9 +11,9 @@ $breakpoint: 800px;
 		display: flex;
 		flex-direction: column;
 		background: var( --fallback-background );
+		box-shadow: var( --main-box-shadow );
 
 		@media ( min-width: $breakpoint ) {
-			border-bottom: 1px solid var( --main-border-bottom );
 			height: auto;
 			min-height: 250px;
 			padding: 4px;
@@ -70,6 +70,7 @@ $breakpoint: 800px;
 			flex: 1 1 auto;
 			display: flex;
 			flex-direction: column;
+			background: var( --fallback-message-background );
 			border: 4px solid var( --fallback-message-border );
 			border-radius: 4px;
 			padding: 8px 0;

diff --git a/banners/english/C24_WMDE_Desktop_EN_01/styles/MainBanner.scss b/banners/english/C24_WMDE_Desktop_EN_01/styles/MainBanner.scss
@@ -28,6 +28,7 @@ $form-width: 300px !default;
 		overflow-y: hidden;
 		margin-right: 30px;
 		padding: 0 0 10px;
+		background: var( --message-background );
 		border: 5px solid var( --message-border );
 		border-radius: 9px;
 	}

diff --git a/src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble.scss b/src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble.scss
@@ -1,4 +1,5 @@
 @use '../../../../components/DonationForm/SubComponents/SelectCustomAmount';
+@use 'radio-input';
 
 $height: 23px !default;
 
@@ -12,23 +13,16 @@ $height: 23px !default;
 	to keep the styles in sync
 	 */
 	&-select-custom-amount {
+		position: relative;
 		width: 50%;
+		height: $height;
 		padding: 0 4px;
 		cursor: pointer;
 
 		&-radio {
-			/* Unclear if we need this or what it does. Probably browser fixes for text in focused elements? */
-			&:checked + .wmde-banner-select-custom-amount-input-container {
-				border: 0 none;
-				outline: 0 none;
-			}
+			z-index: 2;
 
-			/* This style must be in sync with the "radio button shape" style of SelectGroup */
-			&:checked + .wmde-banner-select-custom-amount-input-container::before {
-				border: 1px solid var( --select-group-bubble-radio-border-checked );
-				box-shadow: 0 0 0 1px var( --select-group-bubble-radio-background-checked );
-				background-color: var( --select-group-bubble-radio-background-checked );
-			}
+			@include radio-input.styles( $left: 11px );
 		}
 
 		&.value-entered,
@@ -48,18 +42,6 @@ $height: 23px !default;
 			background-color: var( --select-group-bubble-background );
 			border-radius: 8px;
 			border: 1px solid var( --select-group-bubble-border );
-
-			/* This style must be in sync with the "radio button shape" style of SelectGroup */
-			&::before {
-				height: 10px;
-				width: 10px;
-				top: 50%;
-				left: 0;
-				margin: -5px 0 0 4px;
-				background: var( --select-group-bubble-radio-background );
-				border-radius: 50%;
-				border: 2px solid #848282;
-			}
 		}
 
 		&-euro-symbol {

diff --git a/src/themes/Treedip/DonationForm/BubbleForm/SelectGroupRadioBubbles.scss b/src/themes/Treedip/DonationForm/BubbleForm/SelectGroupRadioBubbles.scss
@@ -1,11 +1,13 @@
 @use '../../variables/breakpoints';
+@use 'radio-input';
 
 $height: 23px !default;
 
 $margin-left: -6px;
 $border-radius: 8px;
 $font-size: 1.01em;
 $padding: 0 0 0 3px;
+$check-size: 10px;
 
 .wmde-banner {
 	&-select-group {
@@ -27,6 +29,7 @@ $padding: 0 0 0 3px;
 			}
 
 			&.active label {
+				background: var( --select-group-bubble-background-active );
 				border: 2px solid var( --select-group-bubble-border-active );
 			}
 		}
@@ -37,34 +40,10 @@ $padding: 0 0 0 3px;
 			font-size: $font-size;
 			margin-left: $margin-left;
 			padding: $padding;
-
-			/* This creates the "radio button" shape */
-			&::before {
-				height: 10px;
-				width: 10px;
-				margin: -5px 0 0 8px;
-				background: var( --select-group-bubble-radio-background );
-				border-radius: 50%;
-				border: 2px solid var( --select-group-bubble-radio-border );
-			}
 		}
 
 		&-input {
-			display: none;
-
-			/* Unclear if we need this or what it does. Probably browser fixes for text in focused elements? */
-			&:checked + .wmde-banner-select-group-label {
-				border: 0 none;
-				outline: 0 none;
-				border-radius: 0;
-			}
-
-			/* This creates the "selected radio button" shape */
-			&:checked + .wmde-banner-select-group-label::before {
-				border: 1px solid var( --select-group-bubble-radio-border-checked );
-				box-shadow: 0 0 0 1px var( --select-group-bubble-radio-background-checked );
-				background-color: var( --select-group-bubble-radio-background-checked );
-			}
+			@include radio-input.styles;
 		}
 	}
 }
diff --git a/src/themes/Treedip/DonationForm/BubbleForm/radio-input.scss b/src/themes/Treedip/DonationForm/BubbleForm/radio-input.scss
@@ -0,0 +1,46 @@
+@use 'sass:math';
+
+$size: 10px;
+
+@mixin styles( $left: 6px ) {
+	appearance: none;
+	position: absolute;
+	top: 50%;
+	margin-top: -( math.div( $size, 2 ) );
+	width: $size;
+	height: $size;
+	border-radius: 50%;
+	display: block;
+	box-sizing: border-box;
+	cursor: pointer;
+	transition: background 150ms ease-out;
+	margin-right: 10px;
+	left: $left;
+	background: var( --select-group-bubble-radio-background );
+	border: 2px solid var( --select-group-bubble-radio-border );
+
+	&::before {
+		position: absolute;
+		top: 50%;
+		margin-top: -( math.div( $size, 2 ) );
+		width: $size;
+		height: $size;
+		border-radius: 50%;
+		content: '';
+		display: flex;
+		left: 50%;
+		margin-left: -( math.div( $size, 2 ) );
+		background-color: var( --select-group-bubble-radio-checkmark );
+		transform: scale( 0 );
+		transition: transform 150ms ease-out;
+	}
+
+	&:checked {
+		border-color: var( --select-group-bubble-radio-border-checked );
+		background-color: var( --select-group-bubble-radio-background-checked );
+
+		&::before {
+			transform: scale( 0.5 );
+		}
+	}
+}
diff --git a/src/themes/Treedip/FallbackBanner/LargeFooter.scss b/src/themes/Treedip/FallbackBanner/LargeFooter.scss
@@ -25,7 +25,7 @@
 				height: 0;
 				border-style: solid;
 				border-width: 6px 6px 0;
-				border-color: var( --fallback-footer-border ) transparent transparent transparent;
+				border-color: var( --fallback-message-border ) transparent transparent transparent;
 			}
 		}
 

diff --git a/src/themes/Treedip/swatches/dark.scss b/src/themes/Treedip/swatches/dark.scss
@@ -6,14 +6,17 @@ $grey150: #dddddd;
 $grey200: #bbbbbb;
 $grey300: #b7b7b7;
 $grey500: #808080;
-$grey600: #747474;
-$grey700: #202122;
+$grey600: #777777;
+$grey650: #383838;
+$grey700: #292929;
+$grey800: #1f1f1f;
 
 $red100: #ff8888;
 $red600: #990a00;
 
 $blue600: #4465a7;
 $blue700: #2a4b8d;
+$blue800: #20303f;
 
 @mixin swatch(
 	$slider: false,
@@ -26,10 +29,13 @@ $blue700: #2a4b8d;
 	$soft-close: false,
 	$fallback-banner: false,
 ) {
-	--main-background: #{$grey700};
-	--main-color: #{$grey100};
+	--main-background: #{$grey800};
+	--main-color: #{$white};
 	--main-title-line-background: #{$grey100};
 	--main-border-bottom: #{$grey600};
+	--main-box-shadow: none;
+
+	--message-background: #{$grey700};
 	--message-border: #{$red600};
 
 	--color-error: #{$red100};
@@ -42,19 +48,19 @@ $blue700: #2a4b8d;
 	--input-selection-selected-background: #{$red600};
 	--input-selection-selected-color: #{$white};
 
-	--animated-highlight-color: #{$grey700};
+	--animated-highlight-color: #{$white};
 	/* stylelint-disable */
 	--animated-highlight-gradient: linear-gradient(
 		270deg,
 		rgba( 255, 255, 255, 0 ) 0%,
 		rgba( 255, 255, 255, 0 ) 50%,
-		rgba( 255, 222, 103 ) 50%,
-		rgba( 255, 222, 103 ) 100%
+		rgba( 42, 75, 141 ) 50%,
+		rgba( 42, 75, 141 ) 100%
 	);
 	/* stylelint-enable */
 
 	@if $slider {
-		--slider-pagination-background: #{$grey700};
+		--slider-pagination-background: #{$grey800};
 		--slider-pagination-border: #{$white};
 		--slider-pagination-background-active: #{$red600};
 		--slider-pagination-border-active: #{$red600};
@@ -85,12 +91,15 @@ $blue700: #2a4b8d;
 	@if $select-group-bubble {
 		--select-group-bubble-color: #{$grey150};
 		--select-group-bubble-background: #{$grey700};
-		--select-group-bubble-border: #{$grey300};
+		--select-group-bubble-background-active: #{$blue800};
+		--select-group-bubble-border: #{$grey650};
 		--select-group-bubble-border-active: #{$blue700};
+
 		--select-group-bubble-radio-background: #{$white};
-		--select-group-bubble-radio-border: #{$grey500};
+		--select-group-bubble-radio-border: #{$grey600};
 		--select-group-bubble-radio-background-checked: #{$blue700};
 		--select-group-bubble-radio-border-checked: #{$white};
+		--select-group-bubble-radio-checkmark: #{$blue700};
 	}
 
 	@if $select-group-button {
@@ -120,13 +129,13 @@ $blue700: #2a4b8d;
 	}
 
 	@if $fallback-banner {
-		--fallback-background: #{$grey700};
-		--fallback-border: #{$grey100};
+		--fallback-background: #{$grey800};
+		--fallback-border: #{$red600};
 		--fallback-button-background: #{$blue700};
 		--fallback-button-color: #{$white};
 		--fallback-button-background-hover: #{$blue600};
+		--fallback-message-background: #{$grey700};
 		--fallback-message-border: #{$red600};
 		--fallback-uof-link: #{$grey200};
-		--fallback-footer-border: #{$grey500};
 	}
 }
diff --git a/src/themes/Treedip/swatches/light.scss b/src/themes/Treedip/swatches/light.scss
@@ -29,6 +29,9 @@ $blue700: #2a4b8d;
 	--main-color: #{$grey700};
 	--main-title-line-background: #{$red600};
 	--main-border-bottom: #{$grey200};
+	--main-box-shadow: 0 3px 0.6em rgba( 60 60 60 / 40% );
+
+	--message-background: #{$white};
 	--message-border: #{$red600};
 
 	--color-error: #{$red600};
@@ -84,12 +87,15 @@ $blue700: #2a4b8d;
 	@if $select-group-bubble {
 		--select-group-bubble-color: #{$black};
 		--select-group-bubble-background: #{$white};
+		--select-group-bubble-background-active: #{$white};
 		--select-group-bubble-border: #{$grey300};
 		--select-group-bubble-border-active: #{$blue700};
+
 		--select-group-bubble-radio-background: #{$white};
 		--select-group-bubble-radio-border: #{$grey500};
-		--select-group-bubble-radio-background-checked: #{$blue700};
-		--select-group-bubble-radio-border-checked: #{$white};
+		--select-group-bubble-radio-background-checked: #{$white};
+		--select-group-bubble-radio-border-checked: #{$blue700};
+		--select-group-bubble-radio-checkmark: #{$blue700};
 	}
 
 	@if $select-group-button {
@@ -124,8 +130,8 @@ $blue700: #2a4b8d;
 		--fallback-button-background: #{$blue700};
 		--fallback-button-color: #{$white};
 		--fallback-button-background-hover: #{$blue600};
+		--fallback-message-background: #{$white};
 		--fallback-message-border: #{$red600};
 		--fallback-uof-link: #{$grey500};
-		--fallback-footer-border: #{$grey500};
 	}
 }