refactor(NcTextArea): use shared scss mixin for input border

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

Author: susnux

src/components/NcTextArea/NcTextArea.vue

@@ -91,6 +91,7 @@ It extends and styles an HTMLTextAreaElement.
 	<div
 		class="textarea"
 		:class="{
+			'textarea--dark': isDarkTheme,
 			'textarea--disabled': disabled,
 			'textarea--legacy': isLegacy32,
 		}">
@@ -141,6 +142,7 @@ 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'
@@ -281,9 +283,12 @@ export default {
 
 	setup() {
 		const model = useModelMigration('value', 'update:value', true)
+		const isDarkTheme = useIsDarkTheme()
+
 		return {
 			isLegacy32,
 			model,
+			isDarkTheme,
 		}
 	},
 
@@ -357,6 +362,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,42 +380,27 @@ 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;
 		cursor: pointer;
 
 		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--dark', '.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 +484,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>