refactor: use native CSS selectors for dark theme of input borders

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

src/assets/input-border.scss

@@ -2,31 +2,35 @@
  * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
- 
- @mixin boxShadow($borderColor) {
-	box-shadow: 0 -1px $borderColor,
-			0 0 0 1px color-mix(in srgb, $borderColor, 65% transparent);
-}
-
-@mixin boxShadowDark($borderColor) {
-	box-shadow: 0 1px $borderColor,
-			0 0 0 1px color-mix(in srgb, $borderColor, 65% transparent);
-}
 
 /**
  * Similar as inputBorder but without active styles.
  */
-@mixin inputLikeBorder($darkThemeSelector, $legacySelector, $borderColor: var(--color-border-maxcontrast)) {
+@mixin inputLikeBorder($legacySelector, $borderColor: var(--color-border-maxcontrast)) {
+	--input-border-box-shadow-light: 0 -1px #{$borderColor},
+		0 0 0 1px color-mix(in srgb, #{$borderColor}, 65% transparent);
+	--input-border-box-shadow-dark: 0 1px #{$borderColor},
+		0 0 0 1px color-mix(in srgb, #{$borderColor}, 65% transparent);
+	--input-border-box-shadow: var(--input-border-box-shadow-light);
 	border: none;
 	border-radius: var(--border-radius-element);
-	@include boxShadow($borderColor);
+	box-shadow: var(--input-border-box-shadow);
 
 	&:hover:not([disabled]) {
 		box-shadow: 0 0 0 1px $borderColor;
 	}
 
-	@at-root #{$darkThemeSelector} #{&} {
-		@include boxShadowDark($borderColor);
+	// override with system theme
+	@media (prefers-color-scheme: dark) {
+		--input-border-box-shadow: var(--input-border-box-shadow-dark);
+	}
+
+	// override with nextcloud theme
+	@at-root [data-theme-dark] #{&} {
+		--input-border-box-shadow: var(--input-border-box-shadow-dark);
+	}
+	@at-root [data-theme-light] #{&} {
+		--input-border-box-shadow: var(--input-border-box-shadow-light);
 	}
 
 	@at-root #{$legacySelector} #{&} {
@@ -42,8 +46,8 @@
  * Create a consistent border for an input element.
  * With Nextcloud 32+ there is no real border anymore but we use a box-shadow.
  */
-@mixin inputBorder($darkThemeSelector, $legacySelector, $borderColor: var(--color-border-maxcontrast)) {
-	@include inputLikeBorder($darkThemeSelector, $legacySelector, $borderColor);
+@mixin inputBorder($legacySelector, $borderColor: var(--color-border-maxcontrast)) {
+	@include inputLikeBorder($legacySelector, $borderColor);
 
 	&:focus-within:not([disabled]),
 	&:active:not([disabled]) {

src/components/NcInputField/NcInputField.vue

@@ -20,7 +20,6 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 	<div
 		class="input-field"
 		:class="{
-			'input-field--dark': isDarkTheme,
 			'input-field--disabled': disabled,
 			'input-field--error': error,
 			'input-field--label-outside': labelOutside || !isValidLabel,
@@ -108,7 +107,6 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import NcButton from '../NcButton/NcButton.vue'
-import { useIsDarkTheme } from '../../composables/useIsDarkTheme/index.ts'
 import { useModelMigration } from '../../composables/useModelMigration.ts'
 import GenRandomId from '../../utils/GenRandomId.js'
 import { isLegacy32 } from '../../utils/legacy.ts'
@@ -288,12 +286,10 @@ export default {
 
 	setup() {
 		const model = useModelMigration('value', 'update:value', true)
-		const isDarkTheme = useIsDarkTheme()
 
 		return {
 			isLegacy32,
 			model,
-			isDarkTheme,
 		}
 	},
 
@@ -417,7 +413,7 @@ export default {
 	}
 
 	&__input {
-		@include border.inputBorder('.input-field--dark', '.input-field--legacy', var(--input-border-color));
+		@include border.inputBorder('.input-field--legacy', var(--input-border-color));
 		background-color: var(--color-main-background);
 		color: var(--color-main-text);
 		border-radius: var(--input-border-radius);

src/components/NcSelect/NcSelect.vue

@@ -325,7 +325,6 @@ export default {
 	<VueSelect
 		class="select"
 		:class="{
-			'select--dark': isDark,
 			'select--legacy': isLegacy,
 			'select--no-wrap': noWrap,
 			'user-select': userSelect,
@@ -419,7 +418,6 @@ import Close from 'vue-material-design-icons/Close.vue'
 import NcEllipsisedOption from '../NcEllipsisedOption/NcEllipsisedOption.vue'
 import NcListItemIcon from '../NcListItemIcon/NcListItemIcon.vue'
 import NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'
-import { useIsDarkTheme } from '../../composables/index.ts'
 import { useModelMigration } from '../../composables/useModelMigration.ts'
 import { t } from '../../l10n.js'
 import GenRandomId from '../../utils/GenRandomId.js'
@@ -860,12 +858,10 @@ export default {
 		const avatarSize = clickableArea - 2 * gridBaseLine
 
 		const model = useModelMigration('value', 'input')
-		const isDark = useIsDarkTheme()
 
 		return {
 			avatarSize,
 			model,
-			isDark,
 			isLegacy,
 		}
 	},
@@ -1233,7 +1229,7 @@ body {
 }
 
 .vs__dropdown-toggle {
-	@include border.inputLikeBorder('.select--dark', '.select--legacy', var(--vs-border-color));
+	@include border.inputLikeBorder('.select--legacy', var(--vs-border-color));
 }
 
 .vs__dropdown-menu {

src/components/NcTextArea/NcTextArea.vue

@@ -91,7 +91,6 @@ It extends and styles an HTMLTextAreaElement.
 	<div
 		class="textarea"
 		:class="{
-			'textarea--dark': isDarkTheme,
 			'textarea--disabled': disabled,
 			'textarea--legacy': isLegacy32,
 		}">
@@ -142,7 +141,6 @@ It extends and styles an HTMLTextAreaElement.
 <script>
 import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Check from 'vue-material-design-icons/Check.vue'
-import { useIsDarkTheme } from '../../composables/useIsDarkTheme/index.ts'
 import { useModelMigration } from '../../composables/useModelMigration.ts'
 import GenRandomId from '../../utils/GenRandomId.js'
 import { isLegacy32 } from '../../utils/legacy.ts'
@@ -283,12 +281,10 @@ export default {
 
 	setup() {
 		const model = useModelMigration('value', 'update:value', true)
-		const isDarkTheme = useIsDarkTheme()
 
 		return {
 			isLegacy32,
 			model,
-			isDarkTheme,
 		}
 	},
 
@@ -395,7 +391,7 @@ export default {
 
 		background-color: var(--color-main-background);
 		color: var(--color-main-text);
-		@include border.inputBorder('.textarea--dark', '.textarea--legacy', var(--input-border-color));
+		@include border.inputBorder('.textarea--legacy', var(--input-border-color));
 
 		&:active:not([disabled]),
 		&:focus:not([disabled]) {