@3dsource/source-ui-native 1.0.19 → 1.0.21

package/styles/elements/_src-icon-button.scss

@@ -1,82 +1,361 @@
+@use '../mixins/button' as *;
+
 .src-icon-button {
+  @include focusRing(default);
+  @include setShadow();
   --srcButtonBgColor: transparent;
-  --srcButtonBgHoverColor: var(--src-color-bg-default-hover);
-  --srcButtonIconColor: var(--src-color-icon-default);
-  --srcButtonBorderRadius: var(--src-br-small);
-  --srcButtonPaddings: 6px;
-  --srcButtonIconSize: 20px;
+  --srcButtonIconColor: var(--src-icon-default, #374151);
+  --srcButtonBorderRadius: var(--src-border-rounded, var(--src-space-1-5));
+  --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
+  --srcButtonBorderColor: var(--src-border-button-basic, #e5e7eb);
+  --srcButtonPaddings: 0px var(--src-padding-xs, var(--src-space-2));
+
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: auto;
+  height: var(--src-height-base, var(--src-space-9));
   padding: var(--srcButtonPaddings);
   color: var(--srcButtonIconColor);
   background-color: var(--srcButtonBgColor);
   border: none;
-  box-shadow: none;
+  box-shadow: var(--srcButtonBoxShadow);
   border-radius: var(--srcButtonBorderRadius);
   cursor: pointer;
 
-  @media (hover: hover) and (pointer: fine) {
-    &:hover,
-    &:focus-visible {
-      --srcButtonBgColor: var(--srcButtonBgHoverColor);
-      --srcButtonIconColor: var(--src-color-icon-default-hover);
-    }
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: var(--srcButtonBorderRadius);
+    border: var(--srcButtonBorder);
+  }
+
+  & > *:not(src-badge) {
+    width: var(--src-icon-size, var(--src-space-5));
+    height: var(--src-icon-size, var(--src-space-5));
   }
 
   &:disabled,
   &[disabled],
   &.disabled {
+    @include cleanShadows();
+    --srcButtonBgColor: var(
+      --src-ui-accent-disabled,
+      rgba(148, 163, 184, 0.24)
+    );
+    --srcButtonIconColor: var(--src-icon-disabled, #9ca3af);
     cursor: default;
     pointer-events: none;
-    --srcButtonBgColor: var(--src-color-bg-default);
-    --srcButtonIconColor: var(--src-color-icon-default-disabled);
+  }
+
+  &:focus-visible {
+    --srcButtonIconColor: var(--src-icon-hover, #111827);
+    --srcButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);
+    outline: none;
+    box-shadow: var(--srcButtonFocusRing);
+  }
+
+  @media (pointer: fine) {
+    &:hover {
+      --srcButtonBgColor: var(
+        --src-ui-secondary-default-hover,
+        rgba(148, 163, 184, 0.08)
+      );
+      --srcButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);
+      --srcButtonIconColor: var(--src-icon-hover, #111827);
+    }
+  }
+
+  &:active,
+  &.src-icon-button--pressed {
+    @include focusRing(default);
+    @include pressedButton();
   }
 
   &--round {
-    --srcButtonBgColor: var(--src-color-bg-strong-subdued);
-    --srcButtonBgHoverColor: var(--src-color-bg-strong-subdued-hover);
     --srcButtonBorderRadius: 50%;
   }
+}
+
+.src-icon-button--state-info {
+  @include focusRing(info);
+  @include setShadow();
+  --srcButtonBorderColor: var(--src-border-button-info, #7dbbff);
+  --srcButtonIconColor: var(--src-icon-info, #017bff);
+
+  &:focus-visible {
+    --srcButtonBgColor: var(--src-ui-secondary-active, rgba(1, 123, 255, 0.12));
+    --srcButtonIconColor: var(--src-icon-info, #017bff);
+    --srcButtonBorderColor: var(--src-border-button-info, #7dbbff);
+  }
+
+  @media (pointer: fine) {
+    &:hover {
+      --srcButtonBorderColor: var(--src-border-button-info-hover, #017bff);
+      --srcButtonBgColor: var(--src-ui-secondary-info, rgba(1, 123, 255, 0.08));
+      --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
+    }
+  }
+}
 
-  &--active {
-    --srcButtonBgColor: var(--src-color-bg-default-active);
-    --srcButtonIconColor: var(--src-color-icon-primary);
+.src-icon-button--state-error {
+  @include focusRing(error);
+  @include setShadow();
+  --srcButtonBorderColor: var(--src-border-button-error, #f79482);
+  --srcButtonIconColor: var(--src-icon-error, #f24122);
 
-    @media (hover: hover) and (pointer: fine) {
-      &:hover,
-      &:focus-visible {
-        --srcButtonBgColor: var(--src-color-bg-default-active);
-        --srcButtonIconColor: var(--src-color-icon-primary);
+  &:focus-visible {
+    --srcButtonBgColor: var(--src-ui-secondary-error, rgba(239, 68, 68, 0.08));
+    --srcButtonIconColor: var(--src-icon-error, #f24122);
+    --srcButtonBorderColor: var(--src-border-button-error, #f79482);
+  }
+
+  @media (pointer: fine) {
+    &:hover {
+      --srcButtonBorderColor: var(--src-border-button-error-hover, #f24122);
+      --srcButtonBgColor: var(
+        --src-ui-secondary-error-hover,
+        rgba(239, 68, 68, 0.16)
+      );
+      --srcButtonIconColor: var(--src-icon-error-hover, #c5280c);
+    }
+  }
+}
+
+.src-icon-button--state-success {
+  @include setShadow();
+  @include focusRing(success);
+  --srcButtonBorderColor: var(--src-border-button-success, #4ade80);
+  --srcButtonIconColor: var(--src-icon-success, #16a34a);
+
+  &:focus-visible {
+    --srcButtonBgColor: var(
+      --src-ui-secondary-success,
+      rgba(22, 163, 74, 0.08)
+    );
+    --srcButtonIconColor: var(--src-icon-success, #16a34a);
+    --srcButtonBorderColor: var(--src-border-button-success, #4ade80);
+  }
+
+  @media (pointer: fine) {
+    &:hover {
+      --srcButtonBorderColor: var(--src-border-button-success-hover, #22c55e);
+      --srcButtonBgColor: var(
+        --src-ui-secondary-success,
+        rgba(22, 163, 74, 0.08)
+      );
+      --srcButtonIconColor: var(--src-icon-success-hover, #15803d);
+    }
+  }
+}
+// ColorScheme variants for filled appearance
+.src-icon-button--primary {
+  @include focusRing(info);
+  --srcButtonBgColor: var(--src-ui-accent-default, #017bff);
+  --srcButtonBorder: none;
+  --srcButtonIconColor: var(--src-icon-main-invert, #fff);
+
+  &:focus-visible {
+    --srcButtonIconColor: var(--src-icon-main-invert, #fff);
+  }
+
+  @media (pointer: fine) {
+    &:hover {
+      --srcButtonBgColor: var(--src-ui-accent-default-hover, #016fe6);
+      --srcButtonIconColor: var(--src-icon-main-invert, #fff);
+    }
+  }
+
+  &.src-icon-button--state-error {
+    @include focusRing(error);
+    --srcButtonBgColor: var(--src-ui-accent-error, #f24122);
+    --srcButtonIconColor: var(--src-icon-main-invert, #fff);
+
+    @media (pointer: fine) {
+      &:hover {
+        --srcButtonBgColor: var(--src-ui-accent-error-hover, #f24122);
+        --srcButtonIconColor: var(--src-icon-main-invert, #fff);
       }
     }
+    &:active,
+    &.src-icon-button--pressed {
+      @include focusRing(default);
+      @include pressedButton();
+    }
   }
+  &.src-icon-button--state-success {
+    @include focusRing(success);
+    --srcButtonBgColor: var(--src-ui-accent-success, #22c55e);
+    --srcButtonIconColor: var(--src-icon-main-invert, #fff);
 
-  // size
-  &--xs {
-    --srcButtonPaddings: 1px;
+    @media (pointer: fine) {
+      &:hover {
+        --srcButtonBgColor: var(--src-ui-accent-success-hover, #16a34a);
+        --srcButtonIconColor: var(--src-icon-main-invert, #fff);
+      }
+    }
+    &:active,
+    &.src-icon-button--pressed {
+      @include focusRing(default);
+      @include pressedButton();
+    }
+  }
+}
+
+.src-icon-button--ghost {
+  @include cleanShadows();
+  @include focusRing(default);
+
+  --srcButtonIconColor: var(--src-icon-default, #374151);
+  --srcButtonBgColor: var(
+    --src-ui-secondary-default,
+    rgba(148, 163, 184, 0.16)
+  );
+  --srcButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);
+  border: none;
+
+  // does not exists in color map
+  --srcButtonFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
+
+  &:focus-visible {
+    --srcButtonBgColor: var(
+      --src-ui-secondary-default-hover,
+      rgba(148, 163, 184, 0.08)
+    );
+    --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
+    --srcButtonIconColor: var(--src-icon-default, #374151);
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: var(--srcButtonBorderRadius);
+      border: var(--srcButtonBorder);
+    }
+  }
+
+  @media (pointer: fine) {
+    &:hover {
+      --srcButtonBgColor: var(
+        --src-ui-secondary-default-hover,
+        rgba(148, 163, 184, 0.08)
+      );
+      --srcButtonIconCOlor: var(--src-icon-hover, #111827);
+    }
+  }
+
+  &:active,
+  &.src-icon-button--pressed {
+    @include focusRing(default);
+    @include pressedButton(true);
+  }
+}
+
+.src-icon-button--plain {
+  @include cleanShadows();
+  @include focusRing(default);
+  --srcButtonBgColor: transparent;
+  --srcButtonIconColor: var(--src-icon-default, #374151);
+
+  &:focus-visible {
+    --srcButtonBgColor: var(
+      --src-ui-secondary-default-hover,
+      rgba(148, 163, 184, 0.08)
+    );
+    --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
+    --srcButtonIconColor: var(--src-icon-hover, #111827);
+    --srcButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);
+  }
 
-    & > :not(src-badge) {
-      width: 18px;
-      height: 18px;
+  @media (pointer: fine) {
+    &:hover {
+      --srcButtonBgColor: var(
+        --src-ui-secondary-default-hover,
+        rgba(148, 163, 184, 0.08)
+      );
+      --srcButtonIconColor: var(--src-icon-hover, #111827);
     }
   }
 
-  &--sm {
-    --srcButtonPaddings: 2px;
+  &:active,
+  &.src-icon-button--pressed {
+    @include focusRing(default);
+    @include pressedButton(true);
   }
 
-  &--default {
-    --srcButtonPaddings: 6px;
+  &.src-icon-button--state-info {
+    @include cleanShadows();
+    @include focusRing(info);
+    --srcButtonBgColor: transparent;
+    --srcButtonIconColor: var(--src-icon-info, #017bff);
+    --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
+
+    &:focus-visible {
+      --srcButtonBgColor: var(
+        --src-ui-secondary-active,
+        rgba(1, 123, 255, 0.12)
+      );
+      --srcButtonIconColor: var(--src-icon-info, #017bff);
+      --srcButtonBorderColor: var(--src-border-button-info-hover, #017bff);
+    }
+
+    @media (pointer: fine) {
+      &:hover {
+        --srcButtonBgColor: var(
+          --src-ui-secondary-info,
+          rgba(1, 123, 255, 0.08)
+        );
+        --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
+      }
+    }
   }
+  &.src-icon-button--state-error {
+    @include cleanShadows();
+    @include focusRing(error);
+    --srcButtonBgColor: transparent;
+    --srcButtonIconColor: var(--src-icon-error);
+    --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
+
+    &:focus-visible {
+      --srcButtonBgColor: var(
+        --src-ui-secondary-error,
+        rgba(239, 68, 68, 0.08)
+      );
+      --srcButtonIconColor: var(--src-icon-error, #f24122);
+      --srcButtonBorderColor: var(--src-border-button-error, #f79482);
+    }
 
-  &--md {
-    --srcButtonPaddings: 8px;
+    @media (pointer: fine) {
+      &:hover {
+        --srcButtonBgColor: var(
+          --src-ui-secondary-error-hover,
+          rgba(239, 68, 68, 0.16)
+        );
+        --srcButtonIconColor: var(--src-icon-error-hover, #c5280c);
+      }
+    }
   }
 
-  &--lg {
-    --srcButtonPaddings: 12px;
+  &.src-icon-button--state-success {
+    @include cleanShadows();
+    @include focusRing(success);
+    --srcButtonBgColor: transparent;
+    --srcButtonIconColor: var(--src-icon-success);
+    --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
+
+    &:focus-visible {
+      --srcButtonBgColor: var(--src-ui-secondary-success);
+      --srcButtonIconColor: var(--src-icon-success);
+      --srcButtonBorderColor: var(--src-border-button-success);
+    }
+
+    @media (pointer: fine) {
+      &:hover {
+        --srcButtonBgColor: var(--src-ui-secondary-success-hover);
+        --srcButtonIconColor: var(--src-icon-success-hover);
+      }
+    }
   }
 }

package/styles/elements/_src-input.scss

@@ -1,32 +1,36 @@
 .src-input {
-  --srcInputFontSize: var(--srcFormElementFontSize);
-  --srcInputLineHeight: var(--srcFormElementLineHeight);
-  --srcInputFontColor: var(--srcFormElementFontColor);
-  --srcInputFieldBg: var(--srcFormElementBg);
-  --srcInputFieldBorderColor: var(--srcFormElementBorderColor);
-  --srcInputHeight: var(--srcFormElementHeight);
-  --srcInputBorderRadius: var(--srcFormElementBorderRadius);
-  --srcInputBoxShadow: var(--srcFormElementBoxShadow);
+  --srcInputFontSize: var(--src-text-fontSize, var(--src-font-size-sm));
+  --srcInputLineHeight: var(--src-text-lineHeight, var(--src-font-line-sm));
+  --srcInputFontColor: var(--src-text-ui-secondary-main, #111827);
+  --srcInputFieldBg: var(--src-surface-container-main, #fff);
+  --srcInputFieldBorderColor: var(--src-border-input-basic, #d1d5db);
+  --srcInputFieldBorder: 1px solid var(--srcInputFieldBorderColor);
+  --srcInputHeight: 36px;
+  --srcInputBorderRadius: var(--src-border-rounded, var(--src-space-1-5));
   // Focus ring it's a multiple box-shadow
-  --srcInputFocusRing: var(--srcFormElementFocusRing);
+  --srcInputFocusRing: 0 0 0 var(--src-shadow-focused, 4px)
+    var(--src-shadow-focus, rgba(1, 123, 255, 0.16));
   position: relative;
 
-  height: var(--srcInputHeight);
   border-radius: var(--srcInputBorderRadius);
   font-size: var(--srcInputFontSize);
   line-height: var(--srcInputLineHeight);
   color: var(--srcInputFontColor);
-  padding: 7px 12px;
-  font-family: var(--src-font-family-sans);
+  padding: var(--src-padding-xs, var(--src-space-2))
+    var(--src-padding-xs, var(--src-space-2))
+    var(--src-padding-xs, var(--src-space-2))
+    var(--src-padding-sm, var(--src-space-3));
+  font-family: var(--src-font-family-body);
   font-style: normal;
-  font-weight: var(--src-fw-regular, 400);
-  background-color: var(--srcInputFieldBg);
-  border: 1px solid var(--srcInputFieldBorderColor);
-  box-shadow: var(--srcInputBoxShadow);
+  font-weight: var(--src-font-weight-Medium, 500);
+  background: var(--srcInputFieldBg);
+  border: var(--srcInputFieldBorder);
+  box-shadow: none;
   display: flex;
   align-items: center;
 
   width: 100%;
+  height: var(--srcInputHeight);
   &[type='number'] {
     -moz-appearance: textfield;
   }
@@ -45,38 +49,146 @@
     margin: 0;
   }
 
-  &:focus {
+  &:hover {
+    --srcInputFieldBorderColor: var(--src-border-input-hover, #9ca3af);
+    --srcInputFieldBg: var(--src-ui-input-secondary, rgba(148, 163, 184, 0.08));
+  }
+
+  &:active {
+    --srcInputFieldBorderColor: var(--src-border-input-active, #017bff);
+  }
+
+  &:focus-visible {
+    --srcInputFieldBorderColor: var(--src-border-input-active, #017bff);
+    --srcInputFieldBg: var(--src-surface-container-main, #fff);
+
     outline: none;
-    box-shadow: var(--srcFormElementFocusRing);
+    box-shadow: var(--srcInputFocusRing);
+    &:hover {
+      --srcInputFieldBg: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
+    }
   }
 
   &[disabled],
   &:disabled {
-    --srcInputFieldBg: var(--srcFormElementDisabledBg);
-    --srcInputFieldBorderColor: var(--srcFormElementDisabledBorderColor);
-    --srcInputBoxShadow: none;
-    color: var(--src-color-text-default-disabled);
+    --srcInputFieldBg: var(--src-ui-input-disabled, rgba(148, 163, 184, 0.16));
+    --srcInputFieldBorderColor: transparent;
+    --srcInputFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
 
     pointer-events: none;
   }
-}
 
-.src-input--compact {
-  --srcInputHeight: 32px;
-  --srcInputFontSize: var(--src-fs-small);
-  --srcInputLineHeight: var(--src-lh-small);
+  &[class*='--size-sm'] {
+    --srcInputHeight: 28px;
+  }
+
+  &[class*='--size-md'] {
+    --srcInputHeight: 36px;
+  }
+  &[class*='--size-lg'] {
+    --srcInputHeight: 44px;
+  }
+  &[class*='--size-xl'] {
+    --srcInputHeight: 56px;
+  }
+
+  &.src-input--secondary {
+    --srcInputFieldBg: var(--src-ui-input-secondary, rgba(148, 163, 184, 0.08));
+    --srcInputFieldBorder: none;
+    --srcInputFontColor: var(--src-text-ui-secondary-main, #111827);
+
+    &:hover {
+      --srcInputFieldBg: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
+      --srcInputFieldBorder: none;
+    }
+  }
+  &.src-input--ghost {
+    --srcInputFieldBg: transparent;
+    --srcInputFieldBorder: none;
+    --srcInputFontColor: var(--src-text-ui-secondary-main, #111827);
+
+    &:hover {
+      --srcInputFieldBg: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
+      --srcInputFieldBorder: none;
+    }
+  }
 }
+
 /* Error State */
-.src-input--has-error {
-  --srcInputFieldBg: var(--src-color-bg-critical-subdued);
-  --srcInputFieldBorderColor: var(--src-color-border-critical-strong);
+.src-input--state-error {
+  --srcInputFieldBorderColor: var(--src-border-input-error, #f24122);
+  --srcInputFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px)
+    var(--src-shadow-error, rgba(239, 68, 68, 0.16));
+  --srcInputFontColor: var(--src-text-ui-distruct-main, #c5280c);
+
+  &:hover {
+    --srcInputFieldBorderColor: var(--src-border-input-error, #f24122);
+    --srcInputFieldBg:
+      linear-gradient(
+        0deg,
+        var(--src-ui-input-error-hover, rgba(239, 68, 68, 0.08)) 0%,
+        var(--src-ui-input-error-hover, rgba(239, 68, 68, 0.08)) 100%
+      ),
+      var(--src-surface-container-main, #fff);
+  }
+
+  &:active {
+    --srcInputFieldBorderColor: var(--src-border-input-error, #f24122);
+  }
+
+  &:focus-visible {
+    --srcInputFieldBorderColor: var(--src-border-input-error, #f24122);
+    --srcInputFieldBg: var(--src-surface-container-main, #fff);
+
+    &:hover {
+      --srcInputFieldBg: var(
+        --src-ui-input-error-hover,
+        rgba(239, 68, 68, 0.08)
+      );
+    }
+  }
+}
+
+/* Success State */
+.src-input--state-success {
+  --srcInputFieldBorderColor: var(--src-border-input-success, #22c55e);
+  --srcInputFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px)
+    var(--src-shadow-success, rgba(22, 163, 74, 0.12));
+  --srcInputFontColor: var(--src-text-ui-success-main, #16a34a);
+
+  &:hover {
+    --srcInputFieldBorderColor: var(--src-border-input-success-hover, #16a34a);
+    --srcInputFieldBg:
+      linear-gradient(
+        0deg,
+        var(--src-ui-input-success-hover, rgba(22, 163, 74, 0.08)) 0%,
+        var(--src-ui-input-success-hover, rgba(22, 163, 74, 0.08)) 100%
+      ),
+      var(--src-surface-container-main, #fff);
+  }
+
+  &:active {
+    --srcInputFieldBorderColor: var(--src-border-input-success-hover, #16a34a);
+  }
+
+  &:focus-visible {
+    --srcInputFieldBorderColor: var(--src-border-input-success, #22c55e);
+    --srcInputFieldBg: var(--src-surface-container-main, #fff);
+
+    &:hover {
+      --srcInputFieldBg: var(
+        --src-ui-input-success-hover,
+        rgba(22, 163, 74, 0.08)
+      );
+    }
+  }
 }
 
 /* Disabled State */
 .src-input--disabled {
-  --srcInputFieldBg: var(--srcFormElementDisabledBg);
-  --srcInputFieldBorderColor: var(--srcFormElementDisabledBorderColor);
-  --srcInputBoxShadow: none;
+  --srcInputFieldBg: var(--src-ui-input-disabled, rgba(148, 163, 184, 0.16));
+  --srcInputFieldBorder: none;
+  --srcInputFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
 
   pointer-events: none;
 }

package/styles/elements/_src-label.scss

@@ -1,23 +1,27 @@
 .src-label {
-  --srcLabelFontSize: var(--src-fs-base);
-  --srcLabelLineHeight: var(--src-lh-base);
-  --srcLabelFontWeight: 500;
-  --srcLabelColor: var(--src-color-text-default);
+  --srcLabelFontSize: var(--src-font-size-tech, 9px);
+  --srcLabelLineHeight: var(--src-font-line-xs, 16px);
+  --srcLabelFontWeight: 600;
+  --srcLabelColor: var(--src-text-body-lable, #6b7280);
   --srcLabelMarginBottom: 4px;
+  --srcLabelLetterSpacing: var(--src-font-spacing-tech, 1.2px);
+
   display: block;
   font-size: var(--srcLabelFontSize);
   line-height: var(--srcLabelLineHeight);
-  font-family: var(--src-font-family-sans);
+  font-family: var(--src-font-family-body);
   font-style: normal;
   font-weight: var(--srcLabelFontWeight);
   color: var(--srcLabelColor);
   margin-bottom: var(--srcLabelMarginBottom);
+  letter-spacing: var(--srcLabelLetterSpacing);
+  text-transform: uppercase;
 }
 
-.src-radio,
-.src-checkbox {
-  .src-label {
-    --srcLabelMarginBottom: 0;
-    --srcLabelFontWeight: 400;
-  }
-}
+// .src-radio,
+// .src-checkbox {
+//   .src-label {
+//     --srcLabelMarginBottom: 0;
+//     --srcLabelFontWeight: 400;
+//   }
+// }

package/styles/elements/_src-list.scss

@@ -21,12 +21,12 @@
 .src-list__item {
   --srcListItemBgColor: var(--src-color-bg-default);
   --srcListItemBgHoverColor: var(--src-color-bg-default-hover);
-  --srcListItemBorderRadius: var(--src-br-small);
+  --srcListItemBorderRadius: var(--src-border-rounded, 4px);
   --srcListItemBoxShadow: none;
   --srcListItemFontColor: var(--src-color-text-default);
-  --srcListItemFontSize: var(--src-fs-base);
-  --srcListItemFontWeight: var(--src-fw-regular, 400);
-  --srcListItemLineHeight: var(--src-lh-base);
+  --srcListItemFontSize: var(--src-font-size-sm, 14px);
+  --srcListItemFontWeight: var(--src-font-weight-regular, 400);
+  --srcListItemLineHeight: var(--src-font-line-sm, 20px);
   --srcListItemPaddings: 8px;
   --srcListItemTextTransform: default;
   --srcListItemDisplay: block;

package/styles/elements/_src-modal.scss

@@ -5,9 +5,9 @@
   --srcModalMaxHeight: 80vh;
   --srcModalBg: var(--src-color-bg-default);
   --srcModalBoxShadow: var(--src-shadow-large);
-  --srcModalBorderRadius: var(--src-br-medium);
-  --srcModalTitleSize: var(--src-fs-medium);
-  --srcModalTitleLineHeight: var(--src-lh-medium);
+  --srcModalBorderRadius: var(--src-border-rounded-parent);
+  --srcModalTitleSize: var(--src-font-size-base);
+  --srcModalTitleLineHeight: var(--src-font-line-base);
   --srcModalTitleColor: var(--src-color-text-default);
   --srcModalBodyPadding: 20px;
   --srcModalTitleBorder: 1px solid var(--src-color-border-default, #e5e7eb);
@@ -66,7 +66,7 @@
 
   .src-modal__title {
     font-size: var(--srcModalTitleSize);
-    font-weight: var(--src-fw-semibold, 600);
+    font-weight: var(--src-font-weight-semiBold, 600);
     line-height: var(--srcModalTitleLineHeight);
     color: var(--srcModalTitleColor);
     word-break: break-word;