From 116cab5d08648c2f378d375865ab9e90778149ce Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Thu, 21 Jul 2022 16:15:53 +0200
Subject: [PATCH] Add a button style for being used on primary like in the
 header

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 src/components/Button/Button.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index bb6e103b6a..11468fc0fe 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -235,13 +235,13 @@ export default {
 
 		/**
 		 * Specifies the button type
-		 * Accepted values: primary, secondary, tertiary, error, warning, success. If left empty,
+		 * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty,
 		 * the default button style will be applied.
 		 */
 		type: {
 			type: String,
 			validator(value) {
-				return ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'error', 'warning', 'success'].indexOf(value) !== -1
+				return ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].indexOf(value) !== -1
 			},
 			default: 'secondary',
 		},
@@ -508,6 +508,11 @@ export default {
 		&.button-vue--vue-tertiary-no-background {
 			opacity: 1;
 		}
+		&.button-vue--vue-tertiary-on-primary {
+			border-radius: var(--border-radius);
+			opacity: 1;
+			background-color: transparent;
+		}
 		&.button-vue--vue-success {
 			background-color: var(--color-success-hover);
 		}
@@ -568,6 +573,18 @@ export default {
 		}
 	}
 
+	// Tertiary on primary color (like the header)
+	&--vue-tertiary-on-primary {
+		color: var(--color-primary-text);
+		background-color: transparent;
+		opacity: .7;
+
+		&:hover:not(:disabled) {
+			background-color: transparent;
+			opacity: 1;
+		}
+	}
+
 	// Success
 	&--vue-success {
 		background-color: var(--color-success);