chore(css-variables): iss 744/viv 434 remove obsolete variables (#745)

* issue #744: removing the obsolete ones * issue #744: wip; * issue #744: wip * issue #744: wip * issue #744: tests fixed and file picker one added * issue #744: button fixed and tests added * issue #744: fixed icon button and tested * issue #744: fixed list item and manually verified * issue #744: selected fixed and manually verified * issue #744: fixed textfield, manually verified * issue #744: fixing the dependencies * fixing CR comments * issue #744: fixing CR remarks * issue #744: reflecting CR remarks * issue #744: reflecting CR remarks * API - forward connotation variables Co-authored-by: yinonov <yinon@hotmail.com>
Vonage · Apr 6, 2021 · 2044ded · 2044ded
1 parent 1f8ae91
commit 2044ded
Show file tree

Hide file tree

Showing 69 changed files with 285 additions and 256 deletions.
diff --git a/__snapshots__/helper message.md b/__snapshots__/helper message.md
@@ -1,6 +1,6 @@
 # `helper message`
 
-#### `should internal contents when 'is-error="false"'`
+#### `should have correct internal contents when 'is-error' absent`
 
 ```html
 <vwc-icon
@@ -16,7 +16,7 @@
 
 ```
 
-#### `should internal contents when 'is-error="true"'`
+#### `should have correct internal contents when 'is-error' present'`
 
 ```html
 <vwc-icon
@@ -31,4 +31,3 @@
 </span>
 
 ```
-
diff --git a/common/context/src/partials/_theme.scss b/common/context/src/partials/_theme.scss
@@ -1,8 +1,7 @@
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
 @use '@vonage/vvd-foundation/scss/variable-names/color-base-variable-names' as color-base;
-@use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic;
 @use '@vonage/vvd-foundation/scss/mixins/color-connotation/variables' as connotation-variables;
-@use '@vonage/vvd-foundation/scss/mixins/color-connotation' with (
+@use '@vonage/vvd-foundation/scss/mixins/color-connotation' as color-connotation with (
 	$connotations-set: success alert warning info announcement,
 	$selector: 'blockquote#{connotation-variables.$compound-placeholder}'
 );
@@ -38,7 +37,7 @@ body {
 	}
 
 	blockquote {
-		border-inline-start: 8px solid var(#{color-semantic.$vvd-color-connotation});
+		border-inline-start: 8px solid var(#{color-connotation.$vvd-color-connotation});
 		box-shadow: inset 0 1px 0 0 #b3b3b3, inset 0 -1px 0 0 #b3b3b3,
 			inset -1px 0 0 0 #b3b3b3;
 	}

diff --git a/common/foundation/scss/mixins/_layout-mixins.scss b/common/foundation/scss/mixins/_layout-mixins.scss
@@ -1,6 +1,6 @@
-@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
-@use '../variable-names/color-semantic-variable-names' as color-semantic;
-@use '../functions';
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
+@use './color-connotation' as color-connotation;
+@use '../functions' as functions;
 
 // override to apply relevance
 $layouts: filled outlined soft text ghost !default;
@@ -18,18 +18,18 @@ $all-layouts: (
 );
 
 %filled {
-	#{$_prefix}background-color: var(#{color-semantic.$vvd-color-connotation});
-	#{$_prefix}color: var(#{color-semantic.$vvd-color-on-connotation});
+	#{$_prefix}background-color: var(#{color-connotation.$vvd-color-connotation});
+	#{$_prefix}color: var(#{color-connotation.$vvd-color-on-connotation});
 }
 
 %outlined {
 	#{$_prefix}background-color: transparent;
-	#{$_prefix}border: 1px solid var(#{color-semantic.$vvd-color-connotation});
-	#{$_prefix}color: var(#{color-semantic.$vvd-color-connotation});
+	#{$_prefix}border: 1px solid var(#{color-connotation.$vvd-color-connotation});
+	#{$_prefix}color: var(#{color-connotation.$vvd-color-connotation});
 }
 
 %soft {
-	#{$_prefix}background-color: var(#{color-semantic.$vvd-color-connotation}-soft);
+	#{$_prefix}background-color: var(#{color-connotation.$vvd-color-connotation}-soft);
 	#{$_prefix}color: var(#{scheme-variables.$vvd-color-on-base});
 }
 

diff --git a/common/foundation/scss/mixins/color-connotation/_color-connotation-decorative.mixin.scss b/common/foundation/scss/mixins/color-connotation/_color-connotation-decorative.mixin.scss
@@ -1,7 +1,6 @@
 @use 'sass:selector';
 
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
-@use '../../variable-names/color-semantic-variable-names' as color-semantic;
 @use '../../functions';
 @use 'variables';
 
@@ -24,7 +23,7 @@ $selector: variables.$selector !default;
 		);
 
 		#{$local-selector} {
-			#{color-semantic.$vvd-color-connotation}: $value;
+			#{variables.$vvd-color-connotation}: $value;
 		}
 	}
 }
diff --git a/common/foundation/scss/mixins/color-connotation/_color-connotation-main.mixin.scss b/common/foundation/scss/mixins/color-connotation/_color-connotation-main.mixin.scss
@@ -1,7 +1,6 @@
 @use 'sass:selector';
 
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
-@use '../../variable-names/color-semantic-variable-names' as color-semantic;
 @use '../../functions';
 @use 'predefined-connotations';
 @use 'variables';
@@ -52,6 +51,6 @@ $selector: variables.$selector !default;
 }
 
 @mixin connotation-main-variables($name) {
-	#{color-semantic.$vvd-color-connotation}: var(--vvd-color-#{$name});
-	#{color-semantic.$vvd-color-on-connotation}: var(--vvd-color-on-#{$name});
+	#{variables.$vvd-color-connotation}: var(--vvd-color-#{$name});
+	#{variables.$vvd-color-on-connotation}: var(--vvd-color-on-#{$name});
 }
diff --git a/common/foundation/scss/mixins/color-connotation/_color-connotation-shades.mixin.scss b/common/foundation/scss/mixins/color-connotation/_color-connotation-shades.mixin.scss
@@ -1,6 +1,5 @@
 @use 'sass:selector';
 @use '../../functions';
-@use '../../variable-names/color-semantic-variable-names' as color-semantic;
 @use 'predefined-connotations';
 @use 'variables';
 
@@ -30,7 +29,7 @@ $selector: variables.$selector !default;
 
 		#{$local-selector} {
 			@each $s_name, $s_value in $value {
-				#{color-semantic.$vvd-color-connotation}-#{$s_name}: var(--vvd-color-#{$s_value});
+				#{variables.$vvd-color-connotation}-#{$s_name}: var(--vvd-color-#{$s_value});
 			}
 		}
 	}

diff --git a/common/foundation/scss/mixins/color-connotation/_index.scss b/common/foundation/scss/mixins/color-connotation/_index.scss
@@ -19,3 +19,5 @@ $connotations-decorative-set: predefined-connotations.$connotations-decorative-s
 	$connotations-decorative-set: $connotations-decorative-set,
 	$selector: $selector
 );
+
+@forward 'variables' show $vvd-color-connotation, $vvd-color-on-connotation;
diff --git a/common/foundation/scss/mixins/color-connotation/_variables.scss b/common/foundation/scss/mixins/color-connotation/_variables.scss
@@ -1,2 +1,7 @@
 $compound-placeholder: '[compound]';
 $selector: ':host(#{$compound-placeholder})' !default;
+
+// use SASS pointers below to refer to CSS variables in a type-safe fashion
+
+$vvd-color-connotation: --vvd-color-connotation;
+$vvd-color-on-connotation: --vvd-color-on-connotation;
diff --git a/common/foundation/scss/variable-names/_color-semantic-variable-names.scss b/common/foundation/scss/variable-names/_color-semantic-variable-names.scss
diff --git a/common/style-coupling/package.json b/common/style-coupling/package.json
@@ -26,7 +26,6 @@
 	},
 	"devDependencies": {
 		"@vonage/vvd-design-tokens": "^2.2.4",
-		"@vonage/vvd-foundation": "^2.2.4",
 		"@vonage/vvd-umbrella": "^2.2.4",
 		"lit-element": "^2.4.0",
 		"typescript": "^4.1.3"

diff --git a/common/style-coupling/scss/_vvd-formfield.scss b/common/style-coupling/scss/_vvd-formfield.scss
@@ -0,0 +1,29 @@
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
+
+// use SASS pointers below to refer to CSS variables in a type-safe fashion
+
+$formfield-disabled-ink: --vvd-formfield-disabled-ink;
+$formfield-disabled-fill: --vvd-formfield-disabled-fill;
+
+$formfield-label-idle-ink: --vvd-formfield-label-idle-ink;
+
+$formfield-border-idle: --vvd-formfield-border-idle;
+$formfield-border-hover: --vvd-formfield-border-hover;
+$formfield-border-disabled: --vvd-formfield-border-disabled;
+
+$formfield-error-fill: --vvd-formfield-error-fill;
+$formfield-label-error-ink: --vvd-formfield-label-error-ink;
+
+@mixin coupling {
+	#{$formfield-disabled-ink}: var(#{scheme-variables.$vvd-color-neutral-50});
+	#{$formfield-disabled-fill}: var(#{scheme-variables.$vvd-color-neutral-20});
+
+	#{$formfield-label-idle-ink}: var(#{scheme-variables.$vvd-color-neutral-70});
+
+	#{$formfield-border-idle}: var(#{scheme-variables.$vvd-color-neutral-50});
+	#{$formfield-border-hover}: var(#{scheme-variables.$vvd-color-on-base});
+	#{$formfield-border-disabled}: var(#{scheme-variables.$vvd-color-neutral-50});
+
+	#{$formfield-error-fill}: var(#{scheme-variables.$vvd-color-alert-20});
+	#{$formfield-label-error-ink}: var(#{scheme-variables.$vvd-color-alert});
+}
diff --git a/common/style-coupling/src/mdc-vvd-coupling.scss b/common/style-coupling/src/mdc-vvd-coupling.scss
@@ -0,0 +1,14 @@
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
+
+:host {
+	--mdc-theme-primary: var(#{scheme-variables.$vvd-color-primary});
+	--mdc-theme-on-primary: var(#{scheme-variables.$vvd-color-on-primary});
+	--mdc-theme-text-primary-on-background: var(#{scheme-variables.$vvd-color-on-base});
+	--mdc-theme-secondary: var(#{scheme-variables.$vvd-color-primary});
+	--mdc-theme-on-secondary: var(#{scheme-variables.$vvd-color-on-primary});
+
+	--mdc-theme-surface: var(#{scheme-variables.$vvd-color-base});
+	--mdc-theme-on-surface: var(#{scheme-variables.$vvd-color-on-base});
+
+	--mdc-theme-error: var(#{scheme-variables.$vvd-color-alert});
+}
diff --git a/common/style-coupling/src/vvd-style-coupling.scss b/common/style-coupling/src/vvd-style-coupling.scss
diff --git a/components/badge/src/vwc-badge.scss b/components/badge/src/vwc-badge.scss
@@ -1,7 +1,6 @@
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
-@use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic;
 @use '@vonage/vvd-typography/scss/typography';
-@use '@vonage/vvd-foundation/scss/mixins/color-connotation' with (
+@use '@vonage/vvd-foundation/scss/mixins/color-connotation' as color-connotation with (
 	$connotations-set: primary cta success alert warning info
 );
 

diff --git a/components/button/src/vwc-button.scss b/components/button/src/vwc-button.scss
@@ -1,7 +1,7 @@
 @forward './vwc-button-coupling';
-@use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic;
-@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
-@use '@vonage/vvd-foundation/scss/mixins/color-connotation' with (
+@use '@vonage/vvd-style-coupling/scss/vvd-formfield' as vvd-formfield;
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
+@use '@vonage/vvd-foundation/scss/mixins/color-connotation' as color-connotation with (
 	$connotations-set: primary cta success alert info announcement
 );
 @use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with(
@@ -23,17 +23,19 @@
 @include color-connotation.connotations-main-default(primary);
 
 :host {
-	--mdc-button-disabled-ink-color: var(#{color-semantic.$formfield-disabled-ink});
+	--mdc-button-disabled-ink-color: var(#{vvd-formfield.$formfield-disabled-ink});
 	--mdc-button-disabled-fill-color: var(#{scheme-variables.$vvd-color-neutral-30});
-	--mdc-button-disabled-outline-color: var(#{color-semantic.$formfield-disabled-ink});
+	--mdc-button-disabled-outline-color: var(#{vvd-formfield.$formfield-disabled-ink});
 	--mdc-button-outline-color: var(--mdc-theme-primary);
 	--mdc-button-horizontal-padding: 14px;
+
+	@include vvd-formfield.coupling;
 }
 
 :host([unelevated]),
 :host([outlined]) {
-	--mdc-theme-primary: var(#{color-semantic.$vvd-color-connotation});
-	--mdc-theme-on-primary: var(#{color-semantic.$vvd-color-on-connotation});
+	--mdc-theme-primary: var(#{color-connotation.$vvd-color-connotation});
+	--mdc-theme-on-primary: var(#{color-connotation.$vvd-color-on-connotation});
 }
 /////////////////////////////////////////////////////////////////////////////
 .mdc-button {

diff --git a/components/button/src/vwc-button.ts b/components/button/src/vwc-button.ts
@@ -3,7 +3,7 @@ import { customElement, property } from 'lit-element';
 import { Button as MWCButton } from '@material/mwc-button';
 import { style as vwcButtonStyle } from './vwc-button.css';
 import { style as mwcButtonStyle } from '@material/mwc-button/styles-css.js';
-import { style as styleCoupling } from '@vonage/vvd-style-coupling/vvd-style-coupling.css.js';
+import { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css';
 import { Connotation, Shape } from '@vonage/vvd-foundation/constants';
 import { html, TemplateResult } from 'lit-element';
 import '@vonage/vwc-icon';

diff --git a/components/button/test/button.test.js b/components/button/test/button.test.js
@@ -393,5 +393,35 @@ describe('button', () => {
 			expect(i.offsetWidth).equal(20);
 			assertDistancePixels(i, b, 'top', (b.offsetHeight - i.offsetHeight) / 2);
 		});
+
+		it('should style disabled state correctly (filled)', async () => {
+			const [b] = addElement(
+				textToDomToParent(
+					`<${COMPONENT_NAME} disabled layout="filled">Button Text</${COMPONENT_NAME}>`
+				)
+			);
+			await waitNextTask();
+			const innerButton = b.shadowRoot.querySelector('.mdc-button.mdc-button--unelevated');
+			expect(innerButton).exist;
+			assertComputedStyle(innerButton, { color: 'rgb(153,153,153)', backgroundColor: 'rgb(204,204,204)' });
+		});
+
+		it('should style disabled state correctly (outlined)', async () => {
+			const [b] = addElement(
+				textToDomToParent(
+					`<${COMPONENT_NAME} disabled layout="outlined">Button Text</${COMPONENT_NAME}>`
+				)
+			);
+			await waitNextTask();
+			const innerButton = b.shadowRoot.querySelector('.mdc-button.mdc-button--outlined');
+			expect(innerButton).exist;
+			assertComputedStyle(innerButton, {
+				color: 'rgb(153,153,153)',
+				borderTopColor: 'rgb(153,153,153)',
+				borderRightColor: 'rgb(153,153,153)',
+				borderBottomColor: 'rgb(153,153,153)',
+				borderLeftColor: 'rgb(153,153,153)'
+			});
+		});
 	});
 });
diff --git a/components/carousel/package.json b/components/carousel/package.json
@@ -27,7 +27,6 @@
 	},
 	"dependencies": {
 		"@vonage/vvd-core": "^2.2.4",
-		"@vonage/vvd-style-coupling": "^2.2.4",
 		"@vonage/vwc-icon": "^2.2.4",
 		"lit-element": "^2.4.0",
 		"swiper": "^5.4.5",

diff --git a/components/carousel/src/vwc-carousel.ts b/components/carousel/src/vwc-carousel.ts
@@ -9,7 +9,6 @@ import {
 	TemplateResult,
 } from 'lit-element';
 import { style } from './vwc-carousel.css';
-import { style as styleCoupling } from '@vonage/vvd-style-coupling/vvd-style-coupling.css.js';
 import Swiper, { SwiperOptions } from 'swiper';
 import '@vonage/vwc-icon';
 import './vwc-carousel-item.js';
@@ -47,7 +46,7 @@ export class VWCCarousel extends LitElement {
 	private slideRefs: HTMLElement[] = [];
 
 	static get styles(): CSSResult[] {
-		return [style, styleCoupling];
+		return [style];
 	}
 
 	private get swiperOptions(): SwiperOptions {