fix(NcCheckboxRadioSwitch): Fix contrast of Radio switches using butt…

…on-variant Signed-off-by: Joas Schilling <[email protected]>
nextcloud-libraries · Nov 9, 2023 · 8e8cb8e · 8e8cb8e
1 parent bc6f8b9
commit 8e8cb8e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
@@ -23,8 +23,16 @@
 <template>
 	<component :is="wrapperElement"
 		:for="!isButtonType ? id : null"
-		class="checkbox-content">
-		<span :class="['checkbox-content__icon', iconClass]"
+		class="checkbox-content"
+		:class="{
+			['checkbox-content-' + type]: true,
+			'checkbox-content--button-variant': buttonVariant,
+		}">
+		<span :class="{
+			'checkbox-content__icon': true,
+			'checkbox-content__icon--checked': isChecked,
+			[iconClass]: true
+		}"
 			:aria-hidden="true">
 			<!-- @slot The checkbox/radio icon, you can use it for adding an icon to the button variant
 					@binding {bool} checked The input checked state
@@ -222,11 +230,26 @@ export default {
 	}
 
 	&__icon > * {
-		color: var(--color-primary-element);
 		width: var(--icon-size);
 		height: var(--icon-size);
 	}
 
+	&--button-variant {
+		.checkbox-content__icon:not(.checkbox-content__icon--checked) > * {
+			color: var(--color-primary-element);
+		}
+
+		.checkbox-content__icon--checked > * {
+			color: var(--color-primary-element-text);
+		}
+	}
+
+	&:not(&--button-variant) {
+		.checkbox-content__icon > * {
+			color: var(--color-primary-element);
+		}
+	}
+
 	&, * {
 		cursor: pointer;
 	}

diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -641,6 +641,11 @@ export default {
 
 	&--checked:not(&--disabled):focus-within &__content,
 	&--checked:not(&--disabled) &__content:hover {
+		background-color: var(--color-primary-element-hover);
+	}
+
+	&--checked:not(&--button-variant):not(&--disabled):focus-within &__content,
+	&--checked:not(&--button-variant):not(&--disabled) &__content:hover {
 		background-color: var(--color-primary-element-light-hover);
 	}
 
@@ -666,7 +671,8 @@ export default {
 			font-weight: bold;
 
 			.checkbox-radio-switch__content {
-				background-color: var(--color-primary-element-light);
+				background-color: var(--color-primary-element);
+				color: var(--color-primary-element-text);
 			}
 		}
 	}