Fix secondary button with old style as temporary solution

Signed-off-by: Joas Schilling <coding@schilljs.com>

src/components/Button/Button.vue

@@ -46,7 +46,8 @@ It can be used with one or multiple actions.
 					:size="20" />
 			</template>
 		</Button>
-		<Button>
+		<Button
+			type="secondary">
 			<template #icon>
 				<Video
 					title=""
@@ -72,7 +73,8 @@ It can be used with one or multiple actions.
 			type="tertiary">
 			Example text
 		</Button>
-		<Button>
+		<Button
+			type="secondary">
 			Example text
 		</Button>
 		<Button
@@ -95,7 +97,8 @@ It can be used with one or multiple actions.
 			</template>
 			Example text
 		</Button>
-		<Button>
+		<Button
+			type="secondary">
 			<template #icon>
 				<Video
 					title=""
@@ -116,6 +119,7 @@ It can be used with one or multiple actions.
 	<!-- Wide button -->
 	<h5>Wide button</h5>
 	<Button
+		type="secondary"
 		text="Example text"
 		:wide="true">
 		<template #icon>
@@ -256,12 +260,9 @@ export default {
 		type: {
 			type: String,
 			validator(value) {
-				// Disallowing secondary until we solve theming and
-				// accessibility issues.
-				// https://github.com/nextcloud/nextcloud-vue/issues/2538
-				return ['primary', 'tertiary', 'error', 'warning', 'success'].indexOf(value) !== -1
+				return ['primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].indexOf(value) !== -1
 			},
-			default: '',
+			required: true,
 		},
 
 		/**
@@ -516,6 +517,9 @@ export default {
 		&.button-vue--vue-primary {
 			background-color: var(--color-primary-hover);
 		}
+		&.button-vue--vue-secondary {
+			box-shadow: 0 0 0 2px var(--color-main-text);
+		}
 		&.button-vue--vue-tertiary {
 			color: var(--color-main-text);
 		}
@@ -546,6 +550,18 @@ export default {
 		}
 	}
 
+	// Secondary
+	&--vue-secondary {
+		color: var(--color-main-text);
+		background-color: var(--color-background-dark);
+		box-shadow: 0 0 0 2px var(--color-border-dark);
+		&:hover {
+			color: var(--color-main-text);
+			background-color: var(--color-background-dark);
+			box-shadow: 0 0 0 2px var(--color-primary-element);
+		}
+	}
+
 	// Tertiary
 	&--vue-tertiary {
 		color: var(--color-text-lighter);