diff --git a/src/assets/input-border.scss b/src/assets/input-border.scss
new file mode 100644
index 0000000000..4fbf269adf
--- /dev/null
+++ b/src/assets/input-border.scss
@@ -0,0 +1,57 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * Similar as inputBorder but without active styles.
+ */
+@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);
+	box-shadow: var(--input-border-box-shadow);
+
+	&:hover:not([disabled]) {
+		box-shadow: 0 0 0 1px $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} #{&} {
+		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($legacySelector, $borderColor: var(--color-border-maxcontrast)) {
+	@include inputLikeBorder($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;
+	}
+}
diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index 096f552e89..1463ec51e6 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/src/components/NcInputField/NcInputField.vue
@@ -106,11 +106,11 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 <script>
 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 { useModelMigration } from '../../composables/useModelMigration.ts'
 import GenRandomId from '../../utils/GenRandomId.js'
 import { isLegacy32 } from '../../utils/legacy.ts'
 import { logger } from '../../utils/logger.ts'
-import NcButton from '../NcButton/index.js'
 
 export default {
 	name: 'NcInputField',
@@ -286,6 +286,7 @@ export default {
 
 	setup() {
 		const model = useModelMigration('value', 'update:value', true)
+
 		return {
 			isLegacy32,
 			model,
@@ -369,12 +370,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../assets/input-border.scss' as border;
 
 .input-field {
 	--input-border-color: var(--color-border-maxcontrast);
 	--input-border-radius: var(--border-radius-element);
-	// Used e.g. if border width differs between focused and unfocused we need to compensate to prevent jumping
-	--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));
 	// The padding before the input can start (leading button or border)
 	--input-padding-start: var(--border-radius-large);
 	// The padding where the input has to end (trailing button or border)
@@ -408,23 +408,15 @@ export default {
 
 	&__main-wrapper {
 		height: var(--default-clickable-area);
-		padding: var(--border-width-input, 2px);
+		padding: var(--border-width-input-focused, 2px);
 		position: relative;
-
-		&:not(:has([disabled])):has(input:focus),
-		&:not(:has([disabled])):has(input:active) {
-			padding: 0;
-		}
 	}
 
 	&__input {
+		@include border.inputBorder('.input-field--legacy', var(--input-border-color));
 		background-color: var(--color-main-background);
 		color: var(--color-main-text);
-		border: none;
 		border-radius: var(--input-border-radius);
-		box-shadow:
-			0 -1px var(--input-border-color),
-			0 0 0 1px color-mix(in srgb, var(--input-border-color), 65% transparent);
 
 		cursor: pointer;
 		-webkit-appearance: textfield !important;
@@ -434,11 +426,11 @@ export default {
 		font-size: var(--default-font-size);
 		text-overflow: ellipsis;
 
+		padding-block: 0;
+		padding-inline: var(--input-padding-start) var(--input-padding-end);
 		height: 100% !important;
 		min-height: unset;
 		width: 100%;
-		padding-block: var(--input-border-width-offset);
-		padding-inline: calc(var(--input-padding-start) + var(--input-border-width-offset)) calc(var(--input-padding-end) + var(--input-border-width-offset));
 
 		&::placeholder {
 			color: var(--color-text-maxcontrast);
@@ -458,17 +450,9 @@ export default {
 			display: none;
 		}
 
-		&:hover:not([disabled]) {
-			box-shadow: 0 0 0 1px var(--input-border-color);;
-		}
-
 		&:active:not([disabled]),
 		&:focus:not([disabled]) {
 			--input-border-color: var(--color-main-text);
-			// Reset padding offset when focused
-			--input-border-width-offset: 0px;
-			border: var(--border-width-input-focused, 2px) solid var(--input-border-color);
-			box-shadow: 0 0 0 2px var(--color-main-background) !important;
 		}
 
 		&:focus + .input-field__label,
@@ -611,23 +595,5 @@ export default {
 			}
 		}
 	}
-
-	&--legacy {
-		.input-field__input {
-			box-shadow: 0 0 0 1px var(--input-border-color) inset;
-		}
-
-		.input-field__main-wrapper:hover:not(:has([disabled])) {
-			padding: 0;
-
-			.input-field__input {
-				--input-border-color: var(--color-main-text);
-				// Reset padding offset when focused
-				--input-border-width-offset: 0px;
-				border: var(--border-width-input-focused, 2px) solid var(--input-border-color);
-				box-shadow: 0 0 0 2px var(--color-main-background) !important;
-			}
-		}
-	}
 }
 </style>
diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
index b30b7f5233..553b0c0a11 100644
--- a/src/components/NcSelect/NcSelect.vue
+++ b/src/components/NcSelect/NcSelect.vue
@@ -325,6 +325,7 @@ export default {
 	<VueSelect
 		class="select"
 		:class="{
+			'select--legacy': isLegacy,
 			'select--no-wrap': noWrap,
 			'user-select': userSelect,
 		}"
@@ -414,12 +415,13 @@ import { VueSelect } from '@nextcloud/vue-select'
 import Vue from 'vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 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 { useModelMigration } from '../../composables/useModelMigration.ts'
 import { t } from '../../l10n.js'
 import GenRandomId from '../../utils/GenRandomId.js'
-import NcEllipsisedOption from '../NcEllipsisedOption/index.js'
-import NcListItemIcon from '../NcListItemIcon/index.js'
-import NcLoadingIcon from '../NcLoadingIcon/index.js'
+import { isLegacy32 as isLegacy } from '../../utils/legacy.ts'
 
 import '@nextcloud/vue-select/dist/vue-select.css'
 
@@ -860,6 +862,7 @@ export default {
 		return {
 			avatarSize,
 			model,
+			isLegacy,
 		}
 	},
 
@@ -1013,6 +1016,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use '../../assets/input-border.scss' as border;
+
 body {
 	/**
 	 * Set custom vue-select CSS variables.
@@ -1082,7 +1087,7 @@ body {
 
 .v-select.select {
 	/* Override default vue-select styles */
-	min-height: var(--default-clickable-area);
+	min-height: calc(var(--default-clickable-area) - 2 * var(--border-width-input));
 	min-width: 260px;
 	margin: 0 0 var(--default-grid-baseline);
 
@@ -1127,7 +1132,7 @@ body {
 	.vs__dropdown-toggle {
 		position: relative;
 		max-height: 100px;
-		padding: 0;
+		padding: var(--border-width-input);
 		overflow-y: auto;
 	}
 
@@ -1141,15 +1146,22 @@ body {
 	}
 
 	&.vs--open .vs__dropdown-toggle {
-		border-width: var(--border-width-input-focused);
-		outline: 2px solid var(--color-main-background);
 		border-color: var(--color-main-text);
 		border-bottom-color: transparent;
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+		border-style: solid;
+		border-width: var(--border-width-input-focused);
+		outline: 2px solid var(--color-main-background);
+		padding: 0;
 	}
 
-	&:not(.vs--disabled, .vs--open) .vs__dropdown-toggle:hover {
-		outline: 2px solid var(--color-main-background);
-		border-color: var(--color-main-text);
+	&:not(.vs--disabled, .vs--open) {
+		.vs__dropdown-toggle:active,
+		.vs__dropdown-toggle:focus-within {
+			outline: 2px solid var(--color-main-background);
+			border-color: var(--color-main-text);
+		}
 	}
 
 	&.vs--disabled {
@@ -1216,6 +1228,10 @@ body {
 	}
 }
 
+.vs__dropdown-toggle {
+	@include border.inputLikeBorder('.select--legacy', var(--vs-border-color));
+}
+
 .vs__dropdown-menu {
 	border-width: var(--border-width-input-focused) !important;
 	border-color: var(--color-main-text) !important;
@@ -1228,7 +1244,7 @@ body {
 	padding: 4px !important;
 
 	&--floating {
-		/* Fallback styles overidden by programmatically set inline styles */
+		/* Fallback styles overridden by programmatically set inline styles */
 		width: max-content;
 		position: absolute;
 		top: 0;
diff --git a/src/components/NcTextArea/NcTextArea.vue b/src/components/NcTextArea/NcTextArea.vue
index 4e5ad5b881..079089c01d 100644
--- a/src/components/NcTextArea/NcTextArea.vue
+++ b/src/components/NcTextArea/NcTextArea.vue
@@ -281,6 +281,7 @@ export default {
 
 	setup() {
 		const model = useModelMigration('value', 'update:value', true)
+
 		return {
 			isLegacy32,
 			model,
@@ -357,6 +358,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../assets/input-border.scss' as border;
+
 .textarea {
 	--input-border-color: var(--color-border-maxcontrast);
 	--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));
@@ -373,19 +376,14 @@ export default {
 
 	&__main-wrapper {
 		height: calc(var(--default-clickable-area) * 2);
-		padding: var(--border-width-input, 2px);
+		padding: var(--border-width-input-focused, 2px);
 		position: relative;
-
-		&:not(:has([disabled])):has(textarea:focus),
-		&:not(:has([disabled])):has(textarea:active) {
-			padding: 0;
-		}
 	}
 
 	&__input {
 		margin: 0;
-		padding-block: calc(10px + var(--input-border-width-offset));
-		padding-inline: calc(12px - var(--border-width-input, 2px) + var(--input-border-width-offset)); // align with label 8px margin label + 4px padding label - 2px border input
+		padding-block: var(--border-radius-element);
+		padding-inline: 10px; // align with label 8px margin label + 4px padding label - 2px border input
 		width: 100%;
 		font-size: var(--default-font-size);
 		text-overflow: ellipsis;
@@ -393,22 +391,12 @@ export default {
 
 		background-color: var(--color-main-background);
 		color: var(--color-main-text);
-		// we use box shadow to create a border as this allows use to have a nice gradient
-		border: none;
-		border-radius: var(--border-radius-element, var(--border-radius-large));
-		box-shadow:
-			0 -1px var(--input-border-color),
-			0 0 0 1px color-mix(in srgb, var(--input-border-color), 65% transparent);
-
-		&:hover:not([disabled]) {
-			box-shadow: 0 0 0 1px var(--input-border-color);
-		}
+		@include border.inputBorder('.textarea--legacy', var(--input-border-color));
+
 		&:active:not([disabled]),
 		&:focus:not([disabled]) {
 			--input-border-width-offset: 0px;
 			--input-border-color: var(--color-main-text);
-			border: var(--border-width-input-focused, 2px) solid var(--input-border-color);
-			box-shadow: 0 0 0 2px var(--color-main-background) !important;
 		}
 
 		// Hide placeholder while not focussed -> show label instead (only if internal label is used)
@@ -492,24 +480,5 @@ export default {
 			color: var(--color-success-text);
 		}
 	}
-
-	// for Nextcloud 31 and older we need the old design with only one color
-	&--legacy {
-		.textarea__input {
-			box-shadow: 0 0 0 1px var(--input-border-color);
-		}
-
-		.textarea__main-wrapper:hover:not(:has([disabled])) {
-			padding: 0;
-
-			.textarea__input {
-				--input-border-color: var(--color-main-text);
-				// Reset padding offset when focused
-				--input-border-width-offset: 0px;
-				border: var(--border-width-input-focused, 2px) solid var(--input-border-color);
-				box-shadow: 0 0 0 2px var(--color-main-background) !important;
-			}
-		}
-	}
 }
 </style>
diff --git a/styleguide/assets/dark.css b/styleguide/assets/dark.css
index d71151fdf4..c625f9d8e4 100644
--- a/styleguide/assets/dark.css
+++ b/styleguide/assets/dark.css
@@ -3,93 +3,108 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 [data-theme-dark] {
-	--color-main-background:#171717;
-	--color-main-background-rgb:23,23,23;
-	--color-main-background-translucent:rgba(var(--color-main-background-rgb), .97);
-	--color-main-background-blur:rgba(var(--color-main-background-rgb), .85);
-	--filter-background-blur:blur(25px);
-	--gradient-main-background:var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
-	--color-background-hover:#212121;
-	--color-background-dark:#292929;
-	--color-background-darker:#3b3b3b;
-	--color-placeholder-light:#313131;
-	--color-placeholder-dark:#4a4a4a;
-	--color-main-text:#EBEBEB;
-	--color-text-maxcontrast:#999999;
-	--color-text-maxcontrast-default:#999999;
-	--color-text-maxcontrast-background-blur:#a8a8a8;
-	--color-text-light:var(--color-main-text);
-	--color-text-lighter:var(--color-text-maxcontrast);
-	--color-scrollbar:#3d3d3d;
-	--color-error:#FF3333;
-	--color-error-rgb:255,51,51;
-	--color-error-hover:#ff6666;
-	--color-error-text:#ff8080;
-	--color-warning:#FFCC00;
-	--color-warning-rgb:255,204,0;
-	--color-warning-hover:#ffd633;
-	--color-warning-text:#FFCC00;
-	--color-success:#3B973B;
-	--color-success-rgb:59,151,59;
-	--color-success-hover:#4cb94c;
-	--color-success-text:#5ec05e;
-	--color-info:#00AEFF;
-	--color-info-rgb:0,174,255;
-	--color-info-hover:#33beff;
-	--color-info-text:#00AEFF;
-	--color-favorite:#ffde00;
-	--color-loading-light:#777;
-	--color-loading-dark:#CCC;
-	--color-box-shadow-rgb:0,0,0;
-	--color-box-shadow:#000000;
-	--color-border:#292929;
-	--color-border-dark:#3b3b3b;
-	--color-border-maxcontrast:#7d7d7d;
-	--font-face:system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-	--default-font-size:15px;
-	--default-line-height:24px;
-	--animation-quick:100ms;
-	--animation-slow:300ms;
-	--border-width-input:1px;
-	--border-width-input-focused:2px;
-	--border-radius:3px;
-	--border-radius-large:10px;
-	--border-radius-rounded:28px;
-	--border-radius-element:8px;
-	--border-radius-pill:100px;
-	--default-clickable-area:34px;
-	--clickable-area-large:48px;
-	--clickable-area-small:24px;
-	--default-grid-baseline:4px;
-	--header-height:50px;
-	--header-menu-item-height:44px;
-	--navigation-width:300px;
-	--sidebar-min-width:300px;
-	--sidebar-max-width:500px;
-	--body-container-radius:calc(var(--default-grid-baseline) * 3);
-	--body-container-margin:calc(var(--default-grid-baseline) * 2);
-	--body-height:calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin));
-	--breakpoint-mobile:1024px;
-	--background-invert-if-dark:invert(100%);
-	--background-invert-if-bright:no;
-	--background-image-invert-if-bright:no;
-	--primary-invert-if-bright:invert(100%);
-	--primary-invert-if-dark:no;
-	--color-primary:#00679e;
-	--color-primary-text:#ffffff;
-	--color-primary-hover:#045783;
-	--color-primary-light:#14232c;
-	--color-primary-light-text:#99c2d8;
-	--color-primary-light-hover:#1e2d35;
-	--color-primary-element:#0091f2;
-	--color-primary-element-hover:#079cff;
-	--color-primary-element-text:#000000;
-	--color-primary-element-text-dark:#0a0a0a;
-	--color-primary-element-light:#14232c;
-	--color-primary-element-light-hover:#1e2d35;
-	--color-primary-element-light-text:#99d3f9;
-	--gradient-primary-background:linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
-	--color-background-plain:#00679e;
-	--color-background-plain-text:#ffffff;
-	--image-background:url('./img/background/jo-myoung-hee-fluid-dark.webp');
+	--color-main-background: #171717;
+	--color-main-background-rgb: 23, 23, 23;
+	--color-main-background-translucent: rgba(var(--color-main-background-rgb), .97);
+	--color-main-background-blur: rgba(var(--color-main-background-rgb), .85);
+	--filter-background-blur: blur(25px);
+	--gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
+	--color-background-hover: #212121;
+	--color-background-dark: #292929;
+	--color-background-darker: #3b3b3b;
+	--color-placeholder-light: #313131;
+	--color-placeholder-dark: #4a4a4a;
+	--color-main-text: #EBEBEB;
+	--color-text-maxcontrast: #999999;
+	--color-text-maxcontrast-default: #999999;
+	--color-text-maxcontrast-background-blur: #a8a8a8;
+	--color-text-error: #ff6f6f;
+	--color-text-success: #49bb37;
+	--color-border: #292929;
+	--color-border-dark: #3b3b3b;
+	--color-border-maxcontrast: #7d7d7d;
+	--color-border-error: var(--color-element-error);
+	--color-border-success: var(--color-element-success);
+	--color-element-error: #FF5050;
+	--color-element-info: #0099E0;
+	--color-element-success: #40A330;
+	--color-element-warning: #FFCC00;
+	--color-error: #552121;
+	--color-error-hover: #7a2f2f;
+	--color-error-text: #FFCCCC;
+	--color-warning: #3D3010;
+	--color-warning-hover: #65501b;
+	--color-warning-text: #FFEEC5;
+	--color-success: #11321A;
+	--color-success-hover: #1e582e;
+	--color-success-text: #D5F2DC;
+	--color-info: #003553;
+	--color-info-hover: #005686;
+	--color-info-text: #00AEFF;
+	--color-favorite: #ffde00;
+	--color-error-rgb: 85, 33, 33;
+	--color-warning-rgb: 61, 48, 16;
+	--color-success-rgb: 17, 50, 26;
+	--color-info-rgb: 0, 53, 83;
+	--color-loading-light: #777;
+	--color-loading-dark: #CCC;
+	--color-scrollbar: var(--color-border-maxcontrast) transparent;
+	--color-box-shadow-rgb: 0, 0, 0;
+	--color-box-shadow: #000000;
+	--color-background-assistant: #221D2B;
+	--color-border-assistant: linear-gradient(125deg, #0C3A65 50%, #6204A5 125%);
+	--color-element-assistant: linear-gradient(238deg, #A569D3 12%, #00679E 39%, #422083 86%);
+	--color-element-assistant-icon: linear-gradient(285deg, #CDACE7 15.28%, #008FDB 39.98%, #A180E0 82.05%);
+	--font-face: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+	--default-font-size: 15px;
+	--font-size-small: 13px;
+	--default-line-height: 1.5;
+	--animation-quick: 100ms;
+	--animation-slow: 300ms;
+	--border-width-input: 1px;
+	--border-width-input-focused: 2px;
+	--border-radius-small: 4px;
+	--border-radius-element: 8px;
+	--border-radius-container: 12px;
+	--border-radius-container-large: 16px;
+	--border-radius: var(--border-radius-small);
+	--border-radius-large: var(--border-radius-element);
+	--border-radius-rounded: 28px;
+	--border-radius-pill: 100px;
+	--default-clickable-area: 34px;
+	--clickable-area-large: 48px;
+	--clickable-area-small: 24px;
+	--default-grid-baseline: 4px;
+	--header-height: 50px;
+	--header-menu-item-height: 44px;
+	--header-menu-icon-mask: linear-gradient(var(--color-background-plain-text) 25%, color-mix(in srgb, var(--color-background-plain-text), 55% transparent) 90%) alpha;
+	--navigation-width: 300px;
+	--sidebar-min-width: 300px;
+	--sidebar-max-width: 500px;
+	--body-container-radius: var(--border-radius-container-large);
+	--body-container-margin: calc(var(--default-grid-baseline) * 2);
+	--body-height: calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin));
+	--breakpoint-mobile: 1024px;
+	--background-invert-if-dark: invert(100%);
+	--background-invert-if-bright: no;
+	--background-image-invert-if-bright: no;
+	--primary-invert-if-bright: invert(100%);
+	--primary-invert-if-dark: no;
+	--color-primary: #00679e;
+	--color-primary-text: #ffffff;
+	--color-primary-hover: #045783;
+	--color-primary-element: #0091f2;
+	--color-primary-element-hover: #17a2ff;
+	--color-primary-element-text: #000000;
+	--color-primary-element-text-dark: #121212;
+	--color-primary-light: #14232c;
+	--color-primary-light-hover: #1f2e36;
+	--color-primary-light-text: #99c2d8;
+	--color-primary-element-light: var(--color-primary-light);
+	--color-primary-element-light-text: var(--color-primary-light-text);
+	--color-primary-element-light-hover: var(--color-primary-light-hover);
+	--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+	--color-background-plain: #00679e;
+	--color-background-plain-text: #ffffff;
+	--image-background: url('./img/background/jo-myoung-hee-fluid-dark.webp');
 }