Merge pull request #14883 from nextcloud/bugfix/14156/checkboxes-light-theme

Fix light theme form elements

apps/accessibility/css/themedark.scss

@@ -74,3 +74,15 @@ $color-border-dark: lighten($color-main-background, 14%);
 		filter: invert(100%);
 	}
 }
+
+input[type=checkbox] {
+	&.checkbox {
+		&:checked + label:before {
+			background-image: url('../../../core/img/actions/checkbox-mark-dark.svg');
+		}
+
+		&:indeterminate + label:before {
+			background-image: url('../../../core/img/actions/checkbox-mixed-dark.svg');
+		}
+	}
+}

apps/theming/css/theming.scss

@@ -84,10 +84,6 @@ $invert: luma($color-primary) > 0.6;
 			@include icon-color('checkbox-mark', 'actions', $color-white, 1, true);
 		}
 	}
-	/* Always give primary button a border for light primary colors */
-	.primary {
-		border-color: $color-border !important;
-	}
 } @else {
 	#appmenu:not(.inverted) svg {
 		filter: none;
@@ -203,6 +199,29 @@ input.primary,
 	}
 }
 
+/** Handle primary buttons for bright colors */
+@if (luma($color-primary) > 0.8) {
+	select,
+	button, .button,
+	input:not([type='range']),
+	textarea,
+	div[contenteditable=true],
+	.pager li a {
+		&.primary:not(:disabled) {
+			background-color: var(--color-background-dark);
+			color: var(--color-main-text);
+			border-color: var(--color-text-lighter);
+
+			&:hover, &:focus, &:active {
+				background-color: var(--color-background-darker);
+				color: var(--color-main-text);
+				border-color: var(--color-text);
+			}
+		}
+	}
+
+}
+
 @if ($color-primary == #ffffff) {
 	/* show grey border below header */
 	#body-user #header,

apps/theming/lib/Util.php

@@ -79,7 +79,7 @@ class Util {
 	public function elementColor($color) {
 		$l = $this->calculateLuminance($color);
 		if($l>0.8) {
-			return '#dddddd';
+			return '#aaaaaa';
 		}
 		return $color;
 	}

apps/theming/tests/CapabilitiesTest.php

@@ -74,7 +74,7 @@ class CapabilitiesTest extends TestCase  {
 				'slogan' => 'slogan',
 				'color' => '#FFFFFF',
 				'color-text' => '#000000',
-				'color-element' => '#dddddd',
+				'color-element' => '#aaaaaa',
 				'logo' => 'http://absolute/logo',
 				'background' => 'http://absolute/background',
 				'background-plain' => false,

apps/theming/tests/UtilTest.php

@@ -105,7 +105,7 @@ class UtilTest extends TestCase {
 
 	public function testElementColorOnBrightBackground() {
 		$elementColor = $this->util->elementColor('#ffffff');
-		$this->assertEquals('#dddddd', $elementColor);
+		$this->assertEquals('#aaaaaa', $elementColor);
 	}
 
 	public function testGenerateRadioButtonWhite() {

core/img/actions/checkbox-mark-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 16 16" width="16" height="16"><path d="M11.924 4.066l-4.932 4.97-2.828-2.83L2.75 7.618l4.242 4.243 6.365-6.365-1.433-1.432z" fill="#000"/></svg>

core/img/actions/checkbox-mixed-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 16 16" width="16" height="16"><path d="M4 7v2h8V7H4z" fill="#000"/></svg>