feat: iss 463 unify consolidate semantic vars (#466)

* issue #463: removing duplicate variables definitions * issue #463: unification and consolidation of semantics vars * issue #463: refactoring design token names * issue #463: adding dependencies where needed * issue #463: adding non-committed autogenerated files
Vonage · Nov 26, 2020 · 1e6cd91 · 1e6cd91
1 parent 5f4adba
commit 1e6cd91
Show file tree

Hide file tree

Showing 34 changed files with 133 additions and 234 deletions.
diff --git a/common/context/package.json b/common/context/package.json
@@ -29,6 +29,7 @@
  "tslib": "^2.0.3"
  },
  "devDependencies": {
+ "@vonage/vvd-design-tokens": "^0.16.1",
  "@vonage/vvd-typography": "^0.16.1"
  }
 }
diff --git a/common/context/src/partials/_theme.scss b/common/context/src/partials/_theme.scss
@@ -1,8 +1,8 @@
-@use '@vonage/vvd-typography/scss/typography';
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
 
 @mixin scheme-variables-coupling {
  body {
- color: var(--vvd-color-base-foreground);
- background-color: var(--vvd-color-base-background);
+ background-color: var(#{scheme-variables.$vvd-color-base});
+ color: var(#{scheme-variables.$vvd-color-on-base});
  }
 }
diff --git a/common/design-tokens/package.json b/common/design-tokens/package.json
@@ -24,9 +24,9 @@
  "url": "https://github.com/Vonage/vivid/issues"
  },
  "devDependencies": {
- "@vonage/vvd-design-tokens-properties": "^0.4.9",
+ "@vonage/vvd-design-tokens-properties": "^0.4.10",
  "lodash": "^4.17.20",
  "ramda": "^0.27.1",
  "style-dictionary": "^2.10.2"
  }
-}
+}
diff --git a/common/foundation/scss/mixins/_color-connotation-mixins.scss b/common/foundation/scss/mixins/_color-connotation-mixins.scss
@@ -20,8 +20,8 @@ $connotation-placeholder: '[connotation-specifier]';
  );
 
  #{$scoped-selector} {
- #{color-semantic.$vvd-color-connotation-background}: var(--vvd-color-#{$connotation}-background);
- #{color-semantic.$vvd-color-connotation-foreground}: var(--vvd-color-#{$connotation}-foreground);
+ #{color-semantic.$vvd-color-connotation}: var(--vvd-color-#{$connotation});
+ #{color-semantic.$vvd-color-on-connotation}: var(--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
@@ -12,15 +12,10 @@ $formfield-error-fill: --vvd-formfield-error-fill;
 $formfield-border-error: --vvd-formfield-border-error;
 $formfield-label-error-ink: --vvd-formfield-label-error-ink;
 
-// TODO discuss the need of all the following unfamiliar variables
-// TODO and the option to use an @each iteration
-$color-base-background: --vvd-color-base-background;
-$color-base-foreground: --vvd-color-base-foreground;
+$color-primary-hover: --vvd-color-primary-hover;
+$color-cta-hover: --vvd-color-cta-hover;
+$color-success-hover: --vvd-color-success-hover;
+$color-alert-hover: --vvd-color-alert-hover;
 
-$color-primary-background-hover: --vvd-color-primary-background-hover;
-$color-cta-background-hover: --vvd-color-cta-background-hover;
-$color-success-background-hover: --vvd-color-success-background-hover;
-$color-alert-background-hover: --vvd-color-alert-background-hover;
-
-$vvd-color-connotation-background: --vvd-color-connotation-background;
-$vvd-color-connotation-foreground: --vvd-color-connotation-foreground;
+$vvd-color-connotation: --vvd-color-connotation;
+$vvd-color-on-connotation: --vvd-color-on-connotation;
diff --git a/common/foundation/test/connotation.test.js b/common/foundation/test/connotation.test.js
@@ -63,11 +63,10 @@ function assertChildrenAffected(
  stylesAffected
 ) {
  const schemeVars = getSchemeVariables();
- const expectedColor =
- schemeVars['light/base'][`--vvd-color-${connotation}-background`];
+ const expectedColor = schemeVars['light/base'][`--vvd-color-${connotation}`];
  if (!expectedColor) {
  throw new Error(
- `failed to find '--vvd-color-${connotation}-background' value in 'light/base' scheme`
+ `failed to find '--vvd-color-${connotation}' value in 'light/base' scheme`
  );
  }
 

diff --git a/common/style-coupling/package.json b/common/style-coupling/package.json
@@ -22,7 +22,8 @@
  "tslib": "^2.0.3"
  },
  "devDependencies": {
+ "@vonage/vvd-design-tokens": "^0.16.1",
  "@vonage/vvd-foundation": "^0.16.1",
  "lit-element": "^2.4.0"
  }
-}
+}
diff --git a/common/style-coupling/src/vvd-style-coupling.scss b/common/style-coupling/src/vvd-style-coupling.scss
@@ -1,39 +1,40 @@
+@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;
 
 /* the below definitions are temporary, they are to be autogenerated and removed in the future */
 :host {
- --vvd-color-checked: var(--vvd-color-base-foreground);
+ --vvd-color-checked: var(#{scheme-variables.$vvd-color-on-base});
  --vvd-color-unchecked: #74767a;
  --vvd-color-disabled-unchecked: #afb0b8;
 
- #{color-semantic.$formfield-disabled-ink}: var(--vvd-color-base-dim);
- #{color-semantic.$formfield-disabled-fill}: var(--vvd-color-base-faint);
+ #{color-semantic.$formfield-disabled-ink}: var(#{scheme-variables.$vvd-color-contrast-dim});
+ #{color-semantic.$formfield-disabled-fill}: var(#{scheme-variables.$vvd-color-contrast-faint});
 
- #{color-semantic.$formfield-label-idle-ink}: var(--vvd-color-base-tinted);
+ #{color-semantic.$formfield-label-idle-ink}: var(#{scheme-variables.$vvd-color-contrast-tinted});
 
- #{color-semantic.$formfield-border-idle}: var(--vvd-color-base-dim);
- #{color-semantic.$formfield-border-hover}: var(--vvd-color-base-foreground);
- #{color-semantic.$formfield-border-active}: var(--vvd-color-base-foreground);
- #{color-semantic.$formfield-border-disabled}: var(--vvd-color-base-dim);
+ #{color-semantic.$formfield-border-idle}: var(#{scheme-variables.$vvd-color-contrast-dim});
+ #{color-semantic.$formfield-border-hover}: var(#{scheme-variables.$vvd-color-on-base});
+ #{color-semantic.$formfield-border-active}: var(#{scheme-variables.$vvd-color-on-base});
+ #{color-semantic.$formfield-border-disabled}: var(#{scheme-variables.$vvd-color-contrast-dim});
 
  #{color-semantic.$formfield-error-fill}: color-base.$red-100;
- #{color-semantic.$formfield-border-error}: var(--vvd-color-alert-background);
- #{color-semantic.$formfield-label-error-ink}: var(--vvd-color-alert-background);
- 
- #{color-semantic.$color-primary-background-hover}: var(--vvd-color-primary-background);
- #{color-semantic.$color-cta-background-hover}: color-base.$purple-600;
- #{color-semantic.$color-success-background-hover}: color-base.$green-600;
- #{color-semantic.$color-alert-background-hover}: color-base.$red-600;
+ #{color-semantic.$formfield-border-error}: var(#{scheme-variables.$vvd-color-alert});
+ #{color-semantic.$formfield-label-error-ink}: var(#{scheme-variables.$vvd-color-alert});
+
+ #{color-semantic.$color-primary-hover}: var(#{scheme-variables.$vvd-color-primary});
+ #{color-semantic.$color-cta-hover}: color-base.$purple-600;
+ #{color-semantic.$color-success-hover}: color-base.$green-600;
+ #{color-semantic.$color-alert-hover}: color-base.$red-600;
 }
 
 :host {
- --mdc-theme-primary: var(--vvd-color-primary-background);
- --mdc-theme-on-primary: var(--vvd-color-primary-foreground);
- --mdc-theme-text-primary-on-background: var(--vvd-color-base-foreground);
- --mdc-theme-secondary: var(--vvd-color-primary-background);
- --mdc-theme-on-secondary: var(--vvd-color-primary-foreground);
- --mdc-theme-surface: var(--vvd-color-surface-background);
- --mdc-theme-on-surface: var(--vvd-color-base-foreground);
- --mdc-theme-error: var(--vvd-color-alert-background);
+ --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-surface});
+ --mdc-theme-on-surface: var(#{scheme-variables.$vvd-color-on-surface});
+ --mdc-theme-error: var(#{scheme-variables.$vvd-color-alert});
 }
diff --git a/components/badge/package.json b/components/badge/package.json
@@ -31,6 +31,7 @@
  "tslib": "^2.0.3"
  },
  "devDependencies": {
+ "@vonage/vvd-design-tokens": "^0.16.1",
  "@vonage/vvd-typography": "^0.16.1"
  }
 }
diff --git a/components/badge/src/vwc-badge.scss b/components/badge/src/vwc-badge.scss
@@ -1,3 +1,4 @@
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 @use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic;
 @use '@vonage/vvd-foundation/scss/mixins/color-connotation-mixins' as color-connotation-mixins;
 @use '@vonage/vvd-foundation/scss/mixins/shape-mixins' as shape-mixins;
@@ -11,7 +12,7 @@
  display: inline;
  padding: 4px 8px;
  position: relative;
- color: var(#{color-semantic.$vvd-color-connotation-foreground});
+ color: var(#{color-semantic.$vvd-color-on-connotation});
  @include typography.typography-cat-shorthand('caption-bold');
 
  &::before {
@@ -23,14 +24,14 @@
  right: 0;
  bottom: 0;
  left: 0;
- background-color: var(#{color-semantic.$vvd-color-connotation-background});
+ background-color: var(#{color-semantic.$vvd-color-connotation});
  opacity: calc(var(--opaque) * 0.01);
  }
 }
 
 :host([translucent]) {
  --opaque: 20;
- color: var(#{color-semantic.$color-base-foreground});
+ color: var(#{scheme-variables.$vvd-color-on-base});
 }
 
 @include shape-mixins.shape(

diff --git a/components/button/src/vwc-button.scss b/components/button/src/vwc-button.scss
@@ -9,7 +9,7 @@
  #{color-semantic.$formfield-disabled-ink}
  );
  --mdc-button-disabled-fill-color: var(
- #{scheme-variables.$vvd-color-base-soft}
+ #{scheme-variables.$vvd-color-contrast-soft}
  );
  --mdc-button-disabled-outline-color: var(
  #{color-semantic.$formfield-disabled-ink}
@@ -24,8 +24,8 @@
 );
 :host([unelevated]),
 :host([outlined]) {
- --mdc-theme-primary: var(#{color-semantic.$vvd-color-connotation-background});
- --mdc-theme-on-primary: var(#{color-semantic.$vvd-color-connotation-foreground});
+ --mdc-theme-primary: var(#{color-semantic.$vvd-color-connotation});
+ --mdc-theme-on-primary: var(#{color-semantic.$vvd-color-on-connotation});
 }
 /////////////////////////////////////////////////////////////////////////////
 .mdc-button {

diff --git a/components/carousel/package.json b/components/carousel/package.json
@@ -32,6 +32,7 @@
  "tslib": "^2.0.3"
  },
  "devDependencies": {
+ "@vonage/vvd-design-tokens": "^0.16.1",
  "@types/swiper": "^5.4.0"
  }
 }
diff --git a/components/carousel/src/vwc-carousel-navigation.scss b/components/carousel/src/vwc-carousel-navigation.scss
@@ -1,11 +1,13 @@
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
+
 .swiper-nav {
  flex: 0 0 29px;
  display: flex;
  align-items: center;
  justify-content: center;
- fill: var(--vvd-color-base-foreground);
- background-color: var(--vvd-color-base-background);
- border: 1px solid var(--vvd-color-base-dim);
+ fill: var(#{scheme-variables.$vvd-color-on-base});
+ background-color: var(#{scheme-variables.$vvd-color-base});
+ border: 1px solid var(#{scheme-variables.$vvd-color-contrast-dim});
  box-sizing: border-box;
  overflow: hidden;
  outline: none;

diff --git a/components/carousel/src/vwc-carousel-pagination.scss b/components/carousel/src/vwc-carousel-pagination.scss
@@ -1,3 +1,5 @@
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
+
 .swiper-pagination-bullet {
  display: inline-block;
  width: 24px;
@@ -6,11 +8,11 @@
  margin: 0 3px;
  border-radius: 0;
  font-size: 0;
- background-color: var(--vvd-color-base-neutral);
+ background-color: var(#{scheme-variables.$vvd-color-contrast-neutral});
  transition: transform 0.1s;
  cursor: pointer;
 
  &-active {
- background-color: var(--vvd-color-base-foreground);
+ background-color: var(#{scheme-variables.$vvd-color-on-base});
  }
 }
diff --git a/components/carousel/src/vwc-carousel.scss b/components/carousel/src/vwc-carousel.scss
@@ -1,3 +1,5 @@
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
+
 vwc-carousel {
  width: 300px;
  height: 200px;
@@ -41,7 +43,7 @@ vwc-casousel:active {
  display: flex;
 }
 
-$themeColor: var(--vvd-color-base-foreground) !default;
+$themeColor: var(#{scheme-variables.$vvd-color-on-base}) !default;
 
 @import ".../../../node_modules/swiper/scss/functions";
 @import "../../../node_modules/swiper/components/core/core";

diff --git a/components/checkbox/package.json b/components/checkbox/package.json
@@ -30,5 +30,8 @@
  "@vonage/vvd-style-coupling": "^0.16.1",
  "lit-element": "^2.4.0",
  "tslib": "^2.0.3"
+ },
+ "devDependencies": {
+ "@vonage/vvd-design-tokens": "^0.16.1"
  }
 }
diff --git a/components/checkbox/src/vwc-checkbox.scss b/components/checkbox/src/vwc-checkbox.scss
@@ -1,3 +1,4 @@
+@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;
 
 :host {
@@ -55,9 +56,8 @@
  &:hover,
  &:focus {
  ~ .mdc-checkbox__background {
- --mdc-checkbox-unchecked-color: var(--vvd-color-base-foreground);
-
- background-color: var(--vvd-color-base-background);
+ background-color: var(#{scheme-variables.$vvd-color-base});
+ --mdc-checkbox-unchecked-color: var(#{scheme-variables.$vvd-color-on-base});
  }
  }
  }

diff --git a/components/chips/package.json b/components/chips/package.json
@@ -32,6 +32,7 @@
  "tslib": "^2.0.3"
  },
  "devDependencies": {
+ "@vonage/vvd-design-tokens": "^0.16.1",
  "@vonage/vvd-typography": "^0.16.1"
  }
 }