diff --git a/common/context/package.json b/common/context/package.json index 346ba3d81f..43e931b281 100644 --- 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 index a20309b1ce..f341fc251f 100644 --- 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 index 0088eef7c2..e6b5c3a780 100644 --- 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" } -} +} \ No newline at end of file diff --git a/common/foundation/scss/mixins/_color-connotation-mixins.scss b/common/foundation/scss/mixins/_color-connotation-mixins.scss index 198c60fba1..10fea8e51f 100644 --- 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 index 38cacc256f..39b24c0830 100644 --- 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; \ No newline at end of file diff --git a/common/foundation/test/connotation.test.js b/common/foundation/test/connotation.test.js index a8e3efec03..794cd31074 100644 --- 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 index 0e978c38e4..adaa60ce0c 100644 --- 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" } -} +} \ No newline at end of file diff --git a/common/style-coupling/src/vvd-style-coupling.scss b/common/style-coupling/src/vvd-style-coupling.scss index 77503673bf..88b60cb604 100644 --- 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 index 7358ba402b..41e48688a5 100644 --- 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 index 3b84acc2ab..f23ea2109b 100644 --- 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 index 5d960e9e74..5eeb837be0 100644 --- 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 index fe2ffb9325..207b5412a3 100644 --- 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 index a3590df8dd..88920237fc 100644 --- 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 index 7411ab303c..4e19225fd4 100644 --- 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}); } } \ No newline at end of file diff --git a/components/carousel/src/vwc-carousel.scss b/components/carousel/src/vwc-carousel.scss index c3838ee04a..1685527f23 100644 --- 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 index 81200847aa..3de8acd593 100644 --- 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 index 1b042c77d7..6b18b5c97a 100644 --- 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 index 3f77895dc3..63f0df57aa 100644 --- 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" } } diff --git a/components/chips/src/vwc-chip.scss b/components/chips/src/vwc-chip.scss index 0e68002075..4e0cdb88c7 100644 --- a/components/chips/src/vwc-chip.scss +++ b/components/chips/src/vwc-chip.scss @@ -1,68 +1,11 @@ +@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables'; @use '@vonage/vvd-typography/scss/typography' as typography; @use '@material/chips'; @use './variables'; -/* -TODO: - - add volta combined badges - - move out hex/rgb codes -*/ - -// :host { - // --mdc-theme-primary-rgb: 135, 31, 255; -// } - -// :host(.vwc-chip--black) { -// --mdc-theme-primary: #131415; -// --mdc-theme-primary-rgb: 19, 20, 21; -// } - -// :host(.vwc-chip--blue) { -// --mdc-theme-primary: #669fc4; -// --mdc-theme-primary-rgb: 102, 159, 196; -// } - -// :host(.vwc-chip--green) { -// --mdc-theme-primary: #06ba77; -// --mdc-theme-primary-rgb: 6, 186, 119; -// } - -// :host(.vwc-chip--indigo) { -// --mdc-theme-primary: #d6219c; -// --mdc-theme-primary-rgb: 214, 33, 156; -// } - -// :host(.vwc-chip--orange) { -// --mdc-theme-primary: #fa7454; -// --mdc-theme-primary-rgb: 250, 116, 84; -// } - -// :host(.vwc-chip--purple) { -// --mdc-theme-primary: #871fff; -// --mdc-theme-primary-rgba: 135, 31, 255; -// } - -// :host(.vwc-chip--red) { -// --mdc-theme-primary: #e84545; -// --mdc-theme-primary-rgb: 232, 69, 69; -// } - -// :host(.vwc-chip--white) { -// --mdc-theme-primary: #ffffff; -// --mdc-theme-primary-rgb: 255, 255, 255; -// --mdc-theme-on-primary: #131415; -// --mdc-theme-on-primary-rgb: 19, 20, 21; -// } - -// :host(.vwc-chip--yellow) { -// --mdc-theme-primary: #ffc100; -// --mdc-theme-primary-rgb: 255, 193, 0; -// } - .mdc-chip { - @include chips.fill-color(var(--vvd-color-base-tinged)); - // @include chips.ink-color(text-primary-on-background); - @include chips.trailing-icon-color(var(--vvd-color-base-foreground), variables.$trailing-icon-opacity, variables.$trailing-icon-opacity-hover); + @include chips.fill-color(var(#{scheme-variables.$vvd-color-contrast-tinged})); + @include chips.trailing-icon-color(var(#{scheme-variables.$vvd-color-on-base}), variables.$trailing-icon-opacity, variables.$trailing-icon-opacity-hover); @include chips.height(map-get(variables.$height, default)); @include chips.horizontal-padding(map-get(variables.$horizontal-padding, default)); @include chips.shape-radius(map-get(variables.$shape-radius, default)); @@ -71,7 +14,7 @@ TODO: @include typography.typography-cat-shorthand('body-2-bold'); cursor: auto; - color: var(--vvd-color-base-foreground); + color: var(#{scheme-variables.$vvd-color-on-base}); font-size: map-get(variables.$font-size, default); vwc-icon.leading { @@ -95,43 +38,4 @@ TODO: cursor: pointer; transition: color variables.$color-animation-duration linear; } -} - -// :host(.vwc-chip--small) { -// .mdc-chip { -// @include chips.height(map-get(variables.$height, small)); -// @include chips.horizontal-padding(map-get(variables.$horizontal-padding, small)); -// font-size: map-get(variables.$font-size, small); -// } -// } - -// :host(.vwc-chip--large) { -// .mdc-chip { -// @include chips.height(map-get(variables.$height, large)); -// @include chips.horizontal-padding(map-get(variables.$horizontal-padding, large)); -// font-size: map-get(variables.$font-size, large); -// } -// } - -// :host(.vwc-chip--outlined) { -// .mdc-chip { -// @include chips.fill-color(transparent); -// @include chips.ink-color(primary); -// @include chips.outline(1px, solid, primary); -// @include chips.trailing-icon-color(var(--mdc-theme-primary-rgb), variables.$trailing-icon-opacity, variables.$trailing-icon-opacity-hover); -// } -// } - -// :host(.vwc-chip--pill) { -// .mdc-chip { -// @include chips.shape-radius(map-get(variables.$shape-radius, pill)); -// } -// } - -// :host(.vwc-chip--transparent) { -// .mdc-chip { -// background-color: rgba(var(--mdc-theme-primary-rgb), variables.$transparent-background-opacity); -// @include chips.ink-color(primary); -// @include chips.trailing-icon-color(var(--mdc-theme-primary-rgb), variables.$trailing-icon-opacity, variables.$trailing-icon-opacity-hover); -// } -// } +} \ No newline at end of file diff --git a/components/drawer/src/vwc-drawer.scss b/components/drawer/src/vwc-drawer.scss index fdcb804f07..7ed2e845ba 100644 --- a/components/drawer/src/vwc-drawer.scss +++ b/components/drawer/src/vwc-drawer.scss @@ -6,28 +6,28 @@ position: sticky; block-size: 100%; max-block-size: 100vh; - border-color: var(#{scheme-variables.$vvd-color-base-faint}); + border-color: var(#{scheme-variables.$vvd-color-contrast-faint}); &.mdc-drawer--dismissible { :host([theme-alternate]) & { - background-color: var(#{scheme-variables.$vvd-color-base-background}); - color: var(#{scheme-variables.$vvd-color-base-foreground}); + background-color: var(#{scheme-variables.$vvd-color-base}); + color: var(#{scheme-variables.$vvd-color-on-base}); } :host(:not([theme-alternate])) & { - background-color: var(#{scheme-variables.$vvd-color-surface-background}); - color: var(#{scheme-variables.$vvd-color-surface-foreground}); + background-color: var(#{scheme-variables.$vvd-color-surface}); + color: var(#{scheme-variables.$vvd-color-on-surface}); } } .mdc-drawer__title { - color: var(#{scheme-variables.$vvd-color-surface-foreground}); + color: var(#{scheme-variables.$vvd-color-on-surface}); } .mdc-drawer__subtitle { - color: var(#{scheme-variables.$vvd-color-surface-foreground}); + color: var(#{scheme-variables.$vvd-color-on-surface}); } } .mdc-drawer-app-content { - background-color: var(#{scheme-variables.$vvd-color-base-background}); - color: var(#{scheme-variables.$vvd-color-base-foreground}); + background-color: var(#{scheme-variables.$vvd-color-base}); + color: var(#{scheme-variables.$vvd-color-on-base}); } diff --git a/components/drawer/test/drawer.test.js b/components/drawer/test/drawer.test.js index 59cf902dcc..25b53f0c01 100644 --- a/components/drawer/test/drawer.test.js +++ b/components/drawer/test/drawer.test.js @@ -65,19 +65,19 @@ describe('vwc-drawer', () => { const surfaceBackgroundBody = getComputedStyle( iframeWindow.document.body - ).getPropertyValue('--vvd-color-surface-background'); + ).getPropertyValue('--vvd-color-surface'); const surfaceBackgroundDrawer = getComputedStyle( shadowDrawer - ).getPropertyValue('--vvd-color-surface-background'); + ).getPropertyValue('--vvd-color-surface'); expect(surfaceBackgroundBody).to.equal(surfaceBackgroundDrawer); const surfaceForegroundBody = getComputedStyle( iframeWindow.document.body - ).getPropertyValue('--vvd-color-surface-foreground'); + ).getPropertyValue('--vvd-color-on-surface'); const surfaceForegroundDrawer = getComputedStyle( shadowDrawer - ).getPropertyValue('--vvd-color-surface-foreground'); + ).getPropertyValue('--vvd-color-on-surface'); expect(surfaceForegroundBody).to.equal(surfaceForegroundDrawer); }); }); diff --git a/components/fab/package.json b/components/fab/package.json index c48744dd3e..45048473bc 100644 --- a/components/fab/package.json +++ b/components/fab/package.json @@ -32,6 +32,7 @@ "tslib": "^2.0.3" }, "devDependencies": { + "@vonage/vvd-design-tokens": "^0.16.1", "@vonage/vvd-typography": "^0.16.1" } } diff --git a/components/fab/src/vwc-fab.scss b/components/fab/src/vwc-fab.scss index e4e7c64ff1..50a10fc08b 100644 --- a/components/fab/src/vwc-fab.scss +++ b/components/fab/src/vwc-fab.scss @@ -1,5 +1,6 @@ -@use 'sass:selector'; +@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables'; @use '@vonage/vvd-typography/scss/typography' as typography; +@use 'sass:selector'; .mdc-fab { @include typography.typography-mdc-coupling('button', 'body-2-bold'); @@ -8,12 +9,12 @@ text-transform: initial; } -:host([connotation="regular"]) .mdc-fab { - --mdc-theme-secondary: var(--vvd-color-regular-background); - --mdc-theme-on-secondary: var(--vvd-color-regular-foreground); +:host([connotation="primary"]) .mdc-fab { + --mdc-theme-secondary: var(#{scheme-variables.$vvd-color-primary}); + --mdc-theme-on-secondary: var(#{scheme-variables.$vvd-color-on-primary}); } :host([connotation="cta"]) .mdc-fab { - --mdc-theme-secondary: var(--vvd-color-cta-background); - --mdc-theme-on-secondary: var(--vvd-color-cta-foreground); + --mdc-theme-secondary: var(#{scheme-variables.$vvd-color-cta}); + --mdc-theme-on-secondary: var(#{scheme-variables.$vvd-color-on-cta}); } diff --git a/components/file-picker/package.json b/components/file-picker/package.json index 6038b4de68..b308895c17 100644 --- a/components/file-picker/package.json +++ b/components/file-picker/package.json @@ -33,6 +33,7 @@ "tslib": "^2.0.3" }, "devDependencies": { + "@vonage/vvd-design-tokens": "^0.16.1", "@vonage/vvd-typography": "^0.16.1" } -} +} \ No newline at end of file diff --git a/components/file-picker/src/vwc-file-picker.scss b/components/file-picker/src/vwc-file-picker.scss index 454fb68937..381fcd94c7 100644 --- a/components/file-picker/src/vwc-file-picker.scss +++ b/components/file-picker/src/vwc-file-picker.scss @@ -1,5 +1,6 @@ -@use '@vonage/vvd-typography/scss/typography' as typography; +@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-typography/scss/typography' as typography; :host { display: inline-block; @@ -33,7 +34,7 @@ border: 1px dashed #cccccc; border-radius: 6px; box-sizing: border-box; - background-color: var(#{color-semantic.$color-base-background}); + background-color: var(#{scheme-variables.$vvd-color-base}); .files-count { position: absolute; diff --git a/components/list/src/vwc-list.scss b/components/list/src/vwc-list.scss index 02b5bc98ff..b980cafc6a 100644 --- a/components/list/src/vwc-list.scss +++ b/components/list/src/vwc-list.scss @@ -5,7 +5,7 @@ @include typography.typography-cat-shorthand('body-1'); --mdc-list-item-meta-size: 16px; - --mdc-ripple-color: var(#{scheme-variables.$vvd-color-base-foreground}); - --mdc-theme-text-hint-on-background: var(#{scheme-variables.$vvd-color-base-tinted}); - --mdc-theme-text-secondary-on-background: var(#{scheme-variables.$vvd-color-base-tinted}); + --mdc-ripple-color: var(#{scheme-variables.$vvd-color-on-base}); + --mdc-theme-text-hint-on-background: var(#{scheme-variables.$vvd-color-contrast-tinted}); + --mdc-theme-text-secondary-on-background: var(#{scheme-variables.$vvd-color-contrast-tinted}); } diff --git a/components/note/src/vwc-note.scss b/components/note/src/vwc-note.scss index 070d4db746..2bca1e22b4 100644 --- a/components/note/src/vwc-note.scss +++ b/components/note/src/vwc-note.scss @@ -7,8 +7,8 @@ display: flex; flex-direction: row; align-items: stretch; - color: var(#{scheme-variables.$vvd-color-base-foreground}); - background-color: var(#{scheme-variables.$vvd-color-base-background}); + background-color: var(#{scheme-variables.$vvd-color-base}); + color: var(#{scheme-variables.$vvd-color-on-base}); border-radius: 6px; box-shadow: inset 0 0 0 1px #B3B3B3; overflow: hidden; @@ -19,7 +19,7 @@ position: absolute; width: 8px; height: 100%; - background-color: var(#{color-semantic.$vvd-color-connotation-background}); + background-color: var(#{color-semantic.$vvd-color-connotation}); } } @include color-connotation-mixins.connotations-context( diff --git a/components/radio/package.json b/components/radio/package.json index 384fd75b08..b38f2ee1cd 100644 --- a/components/radio/package.json +++ b/components/radio/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" } -} +} \ No newline at end of file diff --git a/components/radio/src/vwc-radio.scss b/components/radio/src/vwc-radio.scss index 04756a4aa3..f9b8f9c798 100644 --- a/components/radio/src/vwc-radio.scss +++ b/components/radio/src/vwc-radio.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; :host { @@ -12,7 +13,7 @@ &:hover, &:focus { + .mdc-radio__background .mdc-radio__outer-circle { - border-color: var(--vvd-color-base-foreground); + border-color: var(#{scheme-variables.$vvd-color-on-base}); } } } diff --git a/components/select/src/vwc-select.scss b/components/select/src/vwc-select.scss index 211f81c005..d97492c828 100644 --- a/components/select/src/vwc-select.scss +++ b/components/select/src/vwc-select.scss @@ -1,12 +1,13 @@ @forward './vwc-select-coupling'; +@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/shape-mixins' as shape-mixins; $vvd-select-size-block: --vvd-select-size-block; :host { - --mdc-select-fill-color: var(--vvd-color-base-background); - --mdc-select-ink-color: var(--vvd-color-base-foreground); + --mdc-select-fill-color: var(#{scheme-variables.$vvd-color-base}); + --mdc-select-ink-color: var(#{scheme-variables.$vvd-color-on-base}); --mdc-select-label-ink-color: var(#{color-semantic.$formfield-label-idle-ink}); --mdc-select-disabled-ink-color: var(#{color-semantic.$formfield-disabled-ink}); --mdc-select-disabled-fill-color: var(#{color-semantic.$formfield-disabled-fill}); diff --git a/components/switch/src/vwc-switch.scss b/components/switch/src/vwc-switch.scss index 6c8329b038..8505e8f27d 100644 --- a/components/switch/src/vwc-switch.scss +++ b/components/switch/src/vwc-switch.scss @@ -78,17 +78,17 @@ // colors/shadowing :host { - --mdc-theme-secondary: var(#{color-semantic-variable-names.$vvd-color-connotation-background}); + --mdc-theme-secondary: var(#{color-semantic-variable-names.$vvd-color-connotation}); - --vvd-switch-unchecked-background: var(#{scheme-variables.$vvd-color-base-neutral}); - --vvd-switch-unchecked-background-hover: var(#{scheme-variables.$vvd-color-base-neutral}); - --vvd-switch-unchecked-background-focus: var(#{scheme-variables.$vvd-color-base-neutral}); + --vvd-switch-unchecked-background: var(#{scheme-variables.$vvd-color-contrast-neutral}); + --vvd-switch-unchecked-background-hover: var(#{scheme-variables.$vvd-color-contrast-neutral}); + --vvd-switch-unchecked-background-focus: var(#{scheme-variables.$vvd-color-contrast-neutral}); - --vvd-switch-disabled-background: var(#{scheme-variables.$vvd-color-base-soft}); + --vvd-switch-disabled-background: var(#{scheme-variables.$vvd-color-contrast-soft}); --vvd-switch-shadow-focus: 0, 0, 0, 0.5; - --mdc-theme-surface: var(#{scheme-variables.$vvd-color-surface-background}); // unchecked thumb + --mdc-theme-surface: var(#{scheme-variables.$vvd-color-surface}); // unchecked thumb --mdc-theme-on-surface: var(--vvd-switch-unchecked-background); // unchecked track .mdc-switch { @@ -97,7 +97,7 @@ } &.mdc-switch--checked .mdc-switch__thumb { - background-color: var(#{scheme-variables.$vvd-color-surface-background}); + background-color: var(#{scheme-variables.$vvd-color-surface}); } &:hover .mdc-switch__thumb { diff --git a/components/textfield/src/vwc-textfield.scss b/components/textfield/src/vwc-textfield.scss index 7ae063fea2..3c8ef3b8b3 100644 --- a/components/textfield/src/vwc-textfield.scss +++ b/components/textfield/src/vwc-textfield.scss @@ -1,4 +1,5 @@ @forward './vwc-textfield-coupling'; +@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-foundation/scss/mixins/shape-mixins' as shape-mixins; @@ -6,8 +7,8 @@ $vvd-text-field-size-block: --vvd-text-field-size-block; :host { --mdc-theme-error: #{color-semantic.$formfield-label-error-ink}; - --mdc-text-field-fill-color: var(--vvd-color-base-background); - --mdc-text-field-ink-color: var(--vvd-color-base-foreground); + --mdc-text-field-fill-color: var(#{scheme-variables.$vvd-color-base}); + --mdc-text-field-ink-color: var(#{scheme-variables.$vvd-color-on-base}); --mdc-text-field-label-ink-color: var( #{color-semantic.$formfield-label-idle-ink} ); diff --git a/test/style-utils.js b/test/style-utils.js index 857842a24a..b3257569cf 100644 --- a/test/style-utils.js +++ b/test/style-utils.js @@ -16,7 +16,7 @@ export function shapeStyles(shape) { return borderRadiusStyles(shapeRadius[shape]); } -export const PRINCIPAL_SCHEME_VARIABLES_FILTER = /(base|surface|primary)-(background|foreground)/; +export const PRINCIPAL_SCHEME_VARIABLES_FILTER = /-(on-|)(base|surface|primary)$/; export function getSchemeFiles() { const DT_SCHEMES_BASE_PATH = 'common/design-tokens/build/scss/schemes/'; diff --git a/yarn.lock b/yarn.lock index 152d2708af..a6fec638f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4409,10 +4409,10 @@ resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44" integrity sha1-qlgEJxHW4ydd033Fl+XTHowpCkQ= -"@vonage/vvd-design-tokens-properties@^0.4.9": - version "0.4.9" - resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/download/@vonage/vvd-design-tokens-properties/0.4.9/c8e664121883a117c4639af7324afcb805c7a7e43fea659359b22525ebd01853#cab90d48499f56dc1d4fb7b674982b5d6b0241eb" - integrity sha1-yrkNSEmfVtwdT7e2dJgrXWsCQes= +"@vonage/vvd-design-tokens-properties@^0.4.10": + version "0.4.10" + resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/download/@vonage/vvd-design-tokens-properties/0.4.10/e240994873dcd9d336fc58abd8bd10280b099a81feda1a137d6d5cee6724d1ab#4cb450fd71b1ca6e3bbec922422c3c2e3203c586" + integrity sha1-TLRQ/XGxym47vskiQiw8LjIDxYY= "@webassemblyjs/ast@1.9.0": version "1.9.0" @@ -7369,12 +7369,10 @@ depcheck@YonatanKra/depcheck#vivid-version: minimatch "^3.0.4" multimatch "^4.0.0" please-upgrade-node "^3.2.0" - query-ast "^1.0.3" readdirp "^3.4.0" require-package-name "^2.0.1" resolve "^1.17.0" sass "^1.26.10" - scss-parser "^1.0.4" vue-template-compiler "^2.6.11" yargs "^15.4.0" @@ -10108,14 +10106,7 @@ intersection-observer@^0.7.0: resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/intersection-observer/-/intersection-observer-0.7.0.tgz#ee16bee978db53516ead2f0a8154b09b400bbdc9" integrity sha1-7ha+6XjbU1FurS8KgVSwm0ALvck= -invariant@2.2.2: - version "2.2.2" - resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" - integrity sha1-nh9WrArNtr8wMwbzOL47IErmA2A= - dependencies: - loose-envify "^1.0.0" - -invariant@2.2.4, invariant@^2.2.3, invariant@^2.2.4: +invariant@^2.2.3, invariant@^2.2.4: version "2.2.4" resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" integrity sha1-YQ88ksk1nOHbYW5TgAjSP/NRWOY= @@ -11425,7 +11416,7 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0: resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -lodash@^4.0.0, lodash@^4.0.1, lodash@^4.14.0, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.2.1, lodash@~4.17.10: +lodash@^4.0.0, lodash@^4.0.1, lodash@^4.14.0, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.2.1, lodash@~4.17.10: version "4.17.20" resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" integrity sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI= @@ -13627,14 +13618,6 @@ qs@~6.5.2: resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" integrity sha1-yzroBuh0BERYTvFUzo7pjUA/PjY= -query-ast@^1.0.3: - version "1.0.3" - resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/query-ast/-/query-ast-1.0.3.tgz#4a18374950fa80cbf9b03d7b945bbac8bb4250bf" - integrity sha1-Shg3SVD6gMv5sD17lFu6yLtCUL8= - dependencies: - invariant "2.2.2" - lodash "^4.17.15" - querystring-es3@^0.2.0: version "0.2.1" resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" @@ -14673,14 +14656,6 @@ schema-utils@^3.0.0: ajv "^6.12.5" ajv-keywords "^3.5.2" -scss-parser@^1.0.4: - version "1.0.4" - resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/scss-parser/-/scss-parser-1.0.4.tgz#61cdeb28701ffcb497954b9b05729c6d38eb8b9f" - integrity sha1-Yc3rKHAf/LSXlUubBXKcbTjri58= - dependencies: - invariant "2.2.4" - lodash "^4.17.4" - scss-tokenizer@^0.2.3: version "0.2.3" resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"