chore(design-tokens): upgrade design tokens to the new naming scheme (#…

…699) * fixing the DT * applying new scheme logical names * updating the design tokens scheme vars * fixing the scheme stuff * surface mapping * fix breaks * drawer aside background color * upgrading the design tokens + replacing hard coded colors Co-authored-by: yinonov <yinon@hotmail.com>
Vonage · Mar 14, 2021 · 7dc3486 · 7dc3486
1 parent d0ed5f0
commit 7dc3486
Show file tree

Hide file tree

Showing 33 changed files with 1,422 additions and 1,462 deletions.
diff --git a/.husky/.gitignore b/.husky/.gitignore
@@ -1 +1 @@
-_
+_
diff --git a/__snapshots__/datepicker.md b/__snapshots__/datepicker.md
diff --git a/common/context/src/partials/_theme.scss b/common/context/src/partials/_theme.scss
@@ -17,20 +17,22 @@ body {
  'info'
  );
  a {
- color: color-base.$purple-600;
+ color: var(
+ #{scheme-variables.$vvd-color-cta-70}
+ );
  cursor: pointer;
  }
 
  code,
  kbd,
  samp,
  var {
- background-color: var(#{scheme-variables.$vvd-color-surface});
+ background-color: var(#{scheme-variables.$vvd-color-neutral-10});
  color: color-base.$orange-600;
  }
 
  pre {
- background-color: var(#{scheme-variables.$vvd-color-surface});
+ background-color: var(#{scheme-variables.$vvd-color-neutral-10});
  }
 
  blockquote {
@@ -45,7 +47,7 @@ body {
  }
 
  tr {
- border-bottom-color: var(#{scheme-variables.$vvd-color-contrast-faint});
+ border-bottom-color: var(#{scheme-variables.$vvd-color-neutral-20});
  }
  }
 }
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.5.4",
- "lodash": "^4.17.20",
+ "@vonage/vvd-design-tokens-properties": "0.6.3",
+ "lodash": "^4.17.21",
  "ramda": "^0.27.1",
- "style-dictionary": "^2.10.2"
+ "style-dictionary": "^2.10.3"
  }
 }
diff --git a/common/foundation/scss/variable-names/_color-base-variable-names.scss b/common/foundation/scss/variable-names/_color-base-variable-names.scss
@@ -1,5 +1 @@
-$purple-600: #871eff;
-$red-100: #fdecec;
-$red-600: #cd0d0d;
-$green-600: #167629;
 $orange-600: rgb(187, 55, 0);
diff --git a/common/style-coupling/src/vvd-style-coupling.scss b/common/style-coupling/src/vvd-style-coupling.scss
@@ -1,22 +1,21 @@
 @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 {
  #{color-semantic.$formfield-disabled-ink}: var(
- #{scheme-variables.$vvd-color-contrast-dim}
+ #{scheme-variables.$vvd-color-neutral-50}
  );
  #{color-semantic.$formfield-disabled-fill}: var(
- #{scheme-variables.$vvd-color-contrast-faint}
+ #{scheme-variables.$vvd-color-neutral-70}
  );
 
  #{color-semantic.$formfield-label-idle-ink}: var(
- #{scheme-variables.$vvd-color-contrast-tinted}
+ #{scheme-variables.$vvd-color-neutral-70}
  );
 
  #{color-semantic.$formfield-border-idle}: var(
- #{scheme-variables.$vvd-color-contrast-dim}
+ #{scheme-variables.$vvd-color-neutral-50}
  );
  #{color-semantic.$formfield-border-hover}: var(
  #{scheme-variables.$vvd-color-on-base}
@@ -25,10 +24,12 @@
  #{scheme-variables.$vvd-color-on-base}
  );
  #{color-semantic.$formfield-border-disabled}: var(
- #{scheme-variables.$vvd-color-contrast-dim}
+ #{scheme-variables.$vvd-color-neutral-50}
  );
 
- #{color-semantic.$formfield-error-fill}: color-base.$red-100;
+ #{color-semantic.$formfield-error-fill}: var(
+ #{scheme-variables.$vvd-color-alert-20}
+ );
  #{color-semantic.$formfield-border-error}: var(
  #{scheme-variables.$vvd-color-alert}
  );
@@ -39,9 +40,15 @@
  #{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;
+ #{color-semantic.$color-cta-hover}: var(
+ #{scheme-variables.$vvd-color-cta-70}
+ );
+ #{color-semantic.$color-success-hover}: var(
+ #{scheme-variables.$vvd-color-success-70}
+ );
+ #{color-semantic.$color-alert-hover}: var(
+ #{scheme-variables.$vvd-color-alert-70}
+ );
 
  // Vars Coupling
  --mdc-theme-primary: var(#{scheme-variables.$vvd-color-primary});
@@ -51,7 +58,9 @@
  );
  --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-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/components/badge/src/vwc-badge.scss b/components/badge/src/vwc-badge.scss
@@ -41,11 +41,11 @@ $vvd-badge-block-size: --vvd-badge-block-size;
 }
 
 :host([disabled]) {
- color: var(#{scheme-variables.$vvd-color-contrast-dim});
+ color: var(#{scheme-variables.$vvd-color-neutral-50});
 
  &::before {
  --opaque: 100;
- background-color: var(#{scheme-variables.$vvd-color-contrast-soft});
+ background-color: var(#{scheme-variables.$vvd-color-neutral-30});
  }
 }
 

diff --git a/components/button/src/vwc-button.scss b/components/button/src/vwc-button.scss
@@ -19,7 +19,7 @@
 
 :host {
  --mdc-button-disabled-ink-color: var(#{color-semantic.$formfield-disabled-ink});
- --mdc-button-disabled-fill-color: var(#{scheme-variables.$vvd-color-contrast-soft});
+ --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-outline-color: var(--mdc-theme-primary);
  --mdc-button-horizontal-padding: 14px;

diff --git a/components/calendar/src/vwc-calendar.scss b/components/calendar/src/vwc-calendar.scss
@@ -55,7 +55,7 @@ $total-columns: 7;
  $next: 1;
  display: grid;
  overflow: hidden;
- background-color: var(#{scheme-variables.$vvd-color-contrast-faint});
+ background-color: var(#{scheme-variables.$vvd-color-neutral-20});
  border-radius: 3.64752px;
  box-shadow: 0 0 3.64752px rgba(0, 0, 0, 0.15);
  gap: 1px;

diff --git a/components/carousel/src/vwc-carousel-navigation.scss b/components/carousel/src/vwc-carousel-navigation.scss
@@ -7,7 +7,7 @@
  flex: 0 0 29px;
  align-items: center;
  justify-content: center;
- border: 1px solid var(#{scheme-variables.$vvd-color-contrast-dim});
+ border: 1px solid var(#{scheme-variables.$vvd-color-neutral-50});
  background-color: var(#{scheme-variables.$vvd-color-base});
  cursor: pointer;
  fill: var(#{scheme-variables.$vvd-color-on-base});

diff --git a/components/carousel/src/vwc-carousel-pagination.scss b/components/carousel/src/vwc-carousel-pagination.scss
@@ -6,7 +6,7 @@
  width: 24px;
  height: 3px;
  margin: 0 3px;
- background-color: var(#{scheme-variables.$vvd-color-contrast-neutral});
+ background-color: var(#{scheme-variables.$vvd-color-neutral});
  border-radius: 0;
  cursor: pointer;
  font-size: 0;
@@ -28,7 +28,7 @@
  width: 24px;
  height: 3px;
  margin: 0 3px;
- background-color: var(#{scheme-variables.$vvd-color-contrast-neutral});
+ background-color: var(#{scheme-variables.$vvd-color-neutral});
  border-radius: 0;
  cursor: pointer;
  font-size: 0;

diff --git a/components/checkbox/src/vwc-checkbox.scss b/components/checkbox/src/vwc-checkbox.scss
@@ -2,11 +2,11 @@
 @use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic;
 
 :host {
- --mdc-checkbox-ink-color: var(#{scheme-variables.$vvd-color-surface});
+ --mdc-checkbox-ink-color: var(#{scheme-variables.$vvd-color-neutral-10});
  --mdc-checkbox-checked-color: var(#{scheme-variables.$vvd-color-on-base});
  --mdc-checkbox-unchecked-color: var(#{scheme-variables.$vvd-color-on-base});
  --mdc-checkbox-disabled-color: var(
- #{scheme-variables.$vvd-color-contrast-soft}
+ #{scheme-variables.$vvd-color-neutral-30}
  );
 }
 
@@ -66,7 +66,7 @@
  .mdc-checkbox__native-control[data-indeterminate='true'][disabled] {
  ~ .mdc-checkbox__background {
  --mdc-checkbox-disabled-color: var(
- #{scheme-variables.$vvd-color-contrast-soft}
+ #{scheme-variables.$vvd-color-neutral-30}
  );
  }
  }

diff --git a/components/chips/src/mwc-chips/mwc-chip-base.ts b/components/chips/src/mwc-chips/mwc-chip-base.ts
@@ -267,7 +267,7 @@ export class ChipBase extends BaseElement {
  <path
  class="mdc-chip__checkmark-path"
  fill="none"
- stroke="black"
+ stroke="currentColor"
  d="M1.73,12.91 8.1,19.28 22.79,4.59"
  />
  </svg>

diff --git a/components/chips/src/vwc-chip.scss b/components/chips/src/vwc-chip.scss
@@ -4,7 +4,7 @@
 @use './variables';
 
 .mdc-chip {
- @include chips.fill-color(var(#{scheme-variables.$vvd-color-contrast-tinged}));
+ @include chips.fill-color(var(#{scheme-variables.$vvd-color-neutral-40}));
  @include chips.trailing-icon-color(
  var(#{scheme-variables.$vvd-color-on-base}),
  variables.$trailing-icon-opacity,

diff --git a/components/datepicker/src/vwc-datepicker.scss b/components/datepicker/src/vwc-datepicker.scss
@@ -23,7 +23,7 @@ vwc-menu {
  position: initial;
  overflow: hidden;
  width: 320px;
- border: 1px solid var(#{scheme-variables.$vvd-color-contrast-faint});
+ border: 1px solid var(#{scheme-variables.$vvd-color-neutral-20});
  background: var(#{scheme-variables.$vvd-color-base});
  border-radius: 6px;
  box-shadow: none;
@@ -54,7 +54,7 @@ vwc-menu {
 
  &-weekdays {
  height: 20px;
- border-bottom: 1px solid var(#{scheme-variables.$vvd-color-contrast-faint});
+ border-bottom: 1px solid var(#{scheme-variables.$vvd-color-neutral-20});
  margin-bottom: 8px;
  background: none;
  text-transform: uppercase;
@@ -90,15 +90,15 @@ vwc-menu {
  &.flatpickr-day.inRange {
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
- box-shadow: -5px 0 0 var(#{scheme-variables.$vvd-color-contrast-faint});
+ box-shadow: -5px 0 0 var(#{scheme-variables.$vvd-color-neutral-20});
  }
  }
 
  &:nth-child(7n + 1) {
  &.flatpickr-day.inRange {
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
- box-shadow: 5px 0 0 var(#{scheme-variables.$vvd-color-contrast-faint});
+ box-shadow: 5px 0 0 var(#{scheme-variables.$vvd-color-neutral-20});
  }
 
  &.flatpickr-day.inRange,
@@ -116,7 +116,7 @@ vwc-menu {
 
  &.prevMonthDay,
  &.flatpickr-disabled {
- color: var(#{scheme-variables.$vvd-color-contrast-dim});
+ color: var(#{scheme-variables.$vvd-color-neutral-50});
  cursor: default;
  pointer-events: none;
  }
@@ -162,7 +162,7 @@ vwc-menu {
  right: 50%;
  width: 100%;
  height: 30px;
- background-color: var(#{scheme-variables.$vvd-color-contrast-faint});
+ background-color: var(#{scheme-variables.$vvd-color-neutral-20});
  content: '';
  }
  }
@@ -177,14 +177,14 @@ vwc-menu {
 
  &.inRange,
  &.inRange.today {
- border-color: var(#{scheme-variables.$vvd-color-contrast-faint});
- background-color: var(#{scheme-variables.$vvd-color-contrast-faint});
- box-shadow: -5px 0 0 var(#{scheme-variables.$vvd-color-contrast-faint}),
- 5px 0 0 var(#{scheme-variables.$vvd-color-contrast-faint});
+ border-color: var(#{scheme-variables.$vvd-color-neutral-20});
+ background-color: var(#{scheme-variables.$vvd-color-neutral-20});
+ box-shadow: -5px 0 0 var(#{scheme-variables.$vvd-color-neutral-20}),
+ 5px 0 0 var(#{scheme-variables.$vvd-color-neutral-20});
  font-weight: 600;
 
  &:hover {
- color: var(#{scheme-variables.$vvd-color-contrast-tinted});
+ color: var(#{scheme-variables.$vvd-color-neutral-70});
  }
  }
  }
@@ -218,7 +218,7 @@ vwc-menu {
  cursor: pointer;
 
  &:hover {
- color: var(#{scheme-variables.$vvd-color-contrast-tinted});
+ color: var(#{scheme-variables.$vvd-color-neutral-70});
  }
  }
 
@@ -391,7 +391,7 @@ vwc-menu {
  }
 
  &.vvd-month-disabled {
- color: var(#{scheme-variables.$vvd-color-contrast-dim});
+ color: var(#{scheme-variables.$vvd-color-neutral-50});
  cursor: default;
  pointer-events: none;
  }

diff --git a/components/drawer/src/vwc-drawer.scss b/components/drawer/src/vwc-drawer.scss
@@ -4,7 +4,7 @@
 .mdc-drawer {
  position: sticky;
  top: 0;
- border-color: var(#{scheme-variables.$vvd-color-contrast-faint});
+ border-color: var(#{scheme-variables.$vvd-color-neutral-20});
  block-size: 100%;
  max-block-size: 100vh;
 
@@ -14,16 +14,16 @@
  color: var(#{scheme-variables.$vvd-color-on-base});
  }
  :host(:not([theme-alternate])) & {
- background-color: var(#{scheme-variables.$vvd-color-surface});
- color: var(#{scheme-variables.$vvd-color-on-surface});
+ background-color: var(#{scheme-variables.$vvd-color-neutral-10});
+ color: var(#{scheme-variables.$vvd-color-on-base});
  }
  }
 
  .mdc-drawer__title {
- color: var(#{scheme-variables.$vvd-color-on-surface});
+ color: var(#{scheme-variables.$vvd-color-on-base});
  }
  .mdc-drawer__subtitle {
- color: var(#{scheme-variables.$vvd-color-on-surface});
+ color: var(#{scheme-variables.$vvd-color-on-base});
  }
 }
 

diff --git a/components/drawer/test/drawer.test.js b/components/drawer/test/drawer.test.js
@@ -90,19 +90,19 @@ describe('vwc-drawer', () => {
 
  const surfaceBackgroundBody = getComputedStyle(
  iframeWindow.document.body
- ).getPropertyValue('--vvd-color-surface');
+ ).getPropertyValue('--vvd-color-base');
  const surfaceBackgroundDrawer = getComputedStyle(
  shadowDrawer
- ).getPropertyValue('--vvd-color-surface');
+ ).getPropertyValue('--vvd-color-base');
 
  expect(surfaceBackgroundBody).to.equal(surfaceBackgroundDrawer);
 
  const surfaceForegroundBody = getComputedStyle(
  iframeWindow.document.body
- ).getPropertyValue('--vvd-color-on-surface');
+ ).getPropertyValue('--vvd-color-on-base');
  const surfaceForegroundDrawer = getComputedStyle(
  shadowDrawer
- ).getPropertyValue('--vvd-color-on-surface');
+ ).getPropertyValue('--vvd-color-on-base');
  expect(surfaceForegroundBody).to.equal(surfaceForegroundDrawer);
  });
  });