fix: select list-item border-radius (#700)

* enforce 0 border-radius

* dedicated variable for each shape usage

* important comment

* dep-check throws on typography due to order

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

common/foundation/scss/mixins/_shape-mixins.scss

@@ -1,5 +1,7 @@
 @use '../variable-names/shape-variable-names' as shape-var-names;
 
+$variable-name: --shape !default;
+
 @function get-default-selector($list, $default) {
  $selectors: '';
  @each $key, $_ in $list {
@@ -38,7 +40,7 @@
  $selector: join($selector, ':host(#{template($key)})', $separator: comma);
 
  #{$selector} {
- --border-radius: #{$shape};
+ #{$variable-name}: #{$shape};
  }
  }
 }

components/badge/src/vwc-badge.scss

@@ -1,8 +1,10 @@
 @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/color-connotation-mixins';
-@use '@vonage/vvd-foundation/scss/mixins/shape-mixins';
 @use '@vonage/vvd-typography/scss/typography';
+@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with (
+ $variable-name: --vvd-badge-shape
+);
 @use '@vonage/vvd-foundation/scss/mixins/layout-mixins' with (
  $layouts: filled outlined soft
 );
@@ -33,7 +35,7 @@ $vvd-badge-block-size: --vvd-badge-block-size;
  left: 0;
  border: var(--border);
  background-color: var(--background-color);
- border-radius: var(--border-radius);
+ border-radius: var(--vvd-badge-shape);
  content: '';
  inset: 0;
  opacity: calc(var(--opaque) * 0.01);

components/button/src/vwc-button.scss

@@ -4,7 +4,9 @@
 @use '@vonage/vvd-foundation/scss/mixins/color-connotation-mixins' with (
  $connotations: primary cta success alert info announcement
 );
-@use '@vonage/vvd-foundation/scss/mixins/shape-mixins';
+@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with(
+ $variable-name: --vvd-button-shape
+);
 
 @mixin size($type, $unit) {
  :host([#{$type}]) & {
@@ -38,7 +40,7 @@
 .mdc-button {
  $gutter: 8px;
  height: 40px;
- border-radius: var(--border-radius);
+ border-radius: var(--vvd-button-shape);
  // ! this was supposed to be set by MDC
  font-stretch: var(--mdc-typography-button-font-stretch);
  letter-spacing: normal;

components/icon-button/src/vwc-icon-button.scss

@@ -1,6 +1,8 @@
 @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';
+@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with (
+ $variable-name: --vvd-icon-button-shape
+);
 @use '@vonage/vvd-foundation/scss/mixins/color-connotation-mixins' with (
  $connotations: primary cta success alert info announcement
 );
@@ -19,7 +21,7 @@
  justify-content: center;
  border: var(--border);
  background-color: var(--background-color);
- border-radius: var(--border-radius);
+ border-radius: var(--vvd-icon-button-shape);
  color: var(--color);
  &:disabled {
  color: var(#{color-semantic.$formfield-disabled-ink});

components/list/src/vwc-list-item.scss

@@ -1,7 +1,9 @@
 @use '@vonage/vvd-typography/scss/typography' as typography;
 @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';
+@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with (
+ $variable-name: --vvd-list-item-shape
+);
 
 $vvd-list-item-block-size: --vvd-list-item-block-size;
 $vvd-list-item-side-padding: --vvd-list-item-side-padding;
@@ -21,7 +23,7 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
  @include typography.typography-cat-shorthand('body-2');
  height: var(#{$vvd-list-item-block-size});
 
- border-radius: var(--border-radius, 0);
+ border-radius: var(--vvd-list-item-shape);
  #{$vvd-list-item-block-size}: 40px;
  #{$vvd-list-item-side-padding}: 24px;
  #{$vvd-list-item-graphic-margin}: 16px;

components/select/src/vwc-select.scss

@@ -1,7 +1,10 @@
 @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;
+@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with (
+ //! may consider replacing with own component variable to prevent delegation
+ $variable-name: --mdc-shape-small
+);
 
 $vvd-select-size-block: --vvd-select-size-block;
 

components/textfield/src/vwc-textfield-input.scss

@@ -15,7 +15,7 @@
  border: unset;
  background: unset;
  block-size: 100%;
- border-radius: var(--border-radius);
+ border-radius: var(--mdc-shape-small);
  color: var(#{scheme-variables.$vvd-color-on-base});
  inline-size: 100%;
  inset: 0;

components/textfield/src/vwc-textfield.scss

@@ -3,14 +3,16 @@
 @use './vwc-textfield-variables' as textfield-variables;
 @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;
+@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with (
+ //! may consider replacing with own component variable to prevent delegation
+ $variable-name: --mdc-shape-small
+);
 
 :host {
  --mdc-theme-error: #{color-semantic.$formfield-label-error-ink};
  --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}
-);
+ --mdc-text-field-label-ink-color: var(#{color-semantic.$formfield-label-idle-ink});
  --mdc-text-field-disabled-ink-color: var(
  #{color-semantic.$formfield-disabled-ink}
  );
@@ -32,7 +34,6 @@
  --mdc-text-field-error-fill-color: var(
  #{color-semantic.$formfield-error-fill}
  );
- --mdc-shape-small: var(--border-radius);
 
  min-width: 180px;