fix(button): ghost button connotation colors (#1108)

* fix(button): ghost button connotation colors

* revert list snapshot

* remove irrelevant changes

Co-authored-by: yinonov <yinon@hotmail.com>

components/button/src/vwc-button.scss

@@ -38,7 +38,7 @@
 	--mdc-button-disabled-fill-color: var(#{scheme-variables.$vvd-color-neutral-30});
 	--mdc-button-disabled-outline-color: var(#{vvd-formfield.$formfield-disabled-ink});
 	--mdc-button-outline-color: var(#{layout.$vvd-layout-color-outline}, var(--mdc-theme-primary));
-	--mdc-button-horizontal-padding: 14px;
+	--mdc-button-horizontal-padding: 16px;
 	--button-block-size: 40px;
 	$gutter: 8px;
 
@@ -105,7 +105,7 @@
 		--mdc-theme-on-primary: var(#{button-variables.$vvd-button-on-color}, var(#{layout.$vvd-layout-color-text}));
 	}
 
-	&.layout-outlined {
+	&:not(.layout-filled) {
 		--mdc-theme-primary: var(#{button-variables.$vvd-button-color}, var(#{layout.$vvd-layout-color-text}));
 		--mdc-theme-on-primary: var(#{button-variables.$vvd-button-on-color}, var(#{layout.$vvd-layout-color-fill}));
 	}
@@ -115,7 +115,7 @@
 	}
 
 	:host([enlarged]) & {
-		--mdc-button-horizontal-padding: 24px;
+		--mdc-button-horizontal-padding: 20px;
 	}
 }
 

ui-tests/tests/vwc-button/index.js

@@ -1,18 +1,57 @@
-
-import vvdCore from '@vonage/vvd-core';
-import * as stories from '@vonage/vwc-button/stories/button.stories';
 import '@vonage/vwc-button';
-import { storiesToElement } from '../../utils/storiesToElement';
 
 export async function createElementVariations(wrapper) {
-	const storiesWithoutPending = Object.keys(stories).reduce((tmpStories, storyName) => {
-		if (storyName != 'Pending') tmpStories[storyName] = stories[storyName];
-		return tmpStories;
-	}, {});
-	console.log(storiesWithoutPending);
-	wrapper.appendChild(storiesToElement(storiesWithoutPending));
+	const textElementWrapper = document.createElement('div');
+	textElementWrapper.innerHTML = `
+		<vwc-button connotation="primary">Button</vwc-button>
+		<vwc-button connotation="cta">Button</vwc-button>
+		<vwc-button connotation="success">Button</vwc-button>
+		<vwc-button connotation="alert">Button</vwc-button>
+		<vwc-button connotation="info">Button</vwc-button>
+		<vwc-button connotation="announcement">Button</vwc-button>
+		<hr>
+		<vwc-button connotation="primary" layout="outlined">Button</vwc-button>
+		<vwc-button connotation="cta" layout="outlined">Button</vwc-button>
+		<vwc-button connotation="success" layout="outlined">Button</vwc-button>
+		<vwc-button connotation="alert" layout="outlined">Button</vwc-button>
+		<vwc-button connotation="info" layout="outlined">Button</vwc-button>
+		<vwc-button connotation="announcement" layout="outlined">Button</vwc-button>
+		<hr>
+		<vwc-button connotation="primary" layout="filled">Button</vwc-button>
+		<vwc-button connotation="cta" layout="filled">Button</vwc-button>
+		<vwc-button connotation="success" layout="filled">Button</vwc-button>
+		<vwc-button connotation="alert" layout="filled">Button</vwc-button>
+		<vwc-button connotation="info" layout="filled">Button</vwc-button>
+		<vwc-button connotation="announcement" layout="filled">Button</vwc-button>
+		<hr>
+		<vwc-button connotation="primary" layout="filled" disabled>Button</vwc-button>
+		<vwc-button connotation="cta" layout="filled" disabled>Button</vwc-button>
+		<vwc-button connotation="success" layout="filled" disabled>Button</vwc-button>
+		<vwc-button connotation="alert" layout="filled" disabled>Button</vwc-button>
+		<vwc-button connotation="info" layout="filled" disabled>Button</vwc-button>
+		<vwc-button connotation="announcement" layout="filled" disabled>Button</vwc-button>
+		<hr>
+		<vwc-button connotation="primary" layout="filled" dense>Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled">Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" enlarged>Button</vwc-button>
+		<hr>
+		<vwc-button connotation="primary" layout="outlined" dense>Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined">Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" enlarged>Button</vwc-button>
+		<hr>
+		<vwc-button connotation="primary" layout="" dense>Button</vwc-button>
+		<vwc-button connotation="primary" layout="">Button</vwc-button>
+		<vwc-button connotation="primary" layout="" enlarged>Button</vwc-button>
+		<hr>
+		<vwc-button connotation="primary" layout="outlined" fullwidth>Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" fullwidth>Button</vwc-button>
+		<hr>
+
+
+
 
-	await vvdCore.settled;
+		`;
+	wrapper.appendChild(textElementWrapper);
 }