feat: create sharedscss mixin for input border styles

This provides proper styles for input like elements with respect for
dark theme and legacy Nextcloud version.

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

Author: susnux

src/assets/input-border.scss

@@ -0,0 +1,53 @@
+/*!
+ * 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)) {
+	border: none;
+	border-radius: var(--border-radius-element);
+	@include boxShadow($borderColor);
+
+	&:hover:not([disabled]) {
+		box-shadow: 0 0 0 1px $borderColor;
+	}
+
+	@at-root #{$darkThemeSelector} #{&} {
+		@include boxShadowDark($borderColor);
+	}
+
+	@at-root #{$legacySelector} #{&} {
+		box-shadow: 0 0 0 1px $borderColor;
+
+		&:hover:not([disabled]) {
+			box-shadow: 0 0 0 2px $borderColor;
+		}
+	}
+}
+
+/**
+ * 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);
+
+	&:focus-within:not([disabled]),
+	&:active:not([disabled]) {
+		box-shadow: 0 0 0 2px $borderColor,
+			0 0 0 4px var(--color-main-background) !important;
+	}
+}