@3dsource/source-ui-native 3.2.1 → 3.2.4

package/styles/elements/_src-banner.scss

@@ -0,0 +1,101 @@
+.src-banner {
+  --srcBannerPadding: var(--src-layout-padding-const-sm, 8px)
+    var(--src-layout-padding-const-md, 12px);
+  --srcBannerBackgroundColor: var(
+    --src-ui-status-light-neutral,
+    rgba(148, 163, 184, 0.24)
+  );
+  --srcBannerBorderWidth: 1px;
+  --srcBannerBorderColor: var(
+    --src-border-container-light,
+    rgba(148, 163, 184, 0.16)
+  );
+  --srcBannerTextColor: var(--src-text-body-secondary, #4b5563);
+  --srcBannerIconColor: var(--src-icon-default);
+  --srcBannerBorderRadius: var(--src-layout-radius-const-rounded-sm, 6px);
+  display: flex;
+  gap: var(--src-layout-gap-const-sm, 8px);
+  width: 100%;
+  padding: var(--srcBannerPadding);
+  border: var(--srcBannerBorderWidth) solid var(--srcBannerBorderColor);
+  border-radius: var(--srcBannerBorderRadius);
+  background: var(--srcBannerBackgroundColor);
+  color: var(--srcBannerTextColor);
+  font-size: var(--src-font-size-xs, 12px);
+  font-weight: normal;
+  line-height: var(--src-font-line-xs, 16px);
+
+  .src-banner__icon-prefix,
+  .src-banner__icon-postfix {
+    width: var(--src-icon-size);
+    height: var(--src-icon-size);
+    color: var(--srcBannerIconColor);
+    flex-shrink: 0;
+    & > * {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .src-banner__content {
+    flex-grow: 1;
+  }
+
+  .src-banner__title {
+    color: var(--srcBannerTextColor);
+
+    font-family: var(--src-font-family-header, Inter);
+    font-size: var(--src-font-size-tech, 9px);
+    font-style: normal;
+    font-weight: 600;
+    line-height: var(--src-font-line-xs, 16px);
+    letter-spacing: var(--src-font-spacing-tech, 1.2px);
+    text-transform: uppercase;
+    margin-bottom: var(--src-layout-gap-const-xs, 4px);
+  }
+
+  p {
+    margin: 0;
+  }
+
+  &--context-info {
+    --srcBannerBackgroundColor: var(
+      --src-ui-status-light-info,
+      rgba(1, 123, 255, 0.24)
+    );
+    --srcBannerBorderColor: var(--src-ui-status-basic-info, #017bff);
+    --srcBannerIconColor: var(--src-icon-info);
+    --srcBannerTextColor: var(--src-text-body-accent, #016fe6);
+  }
+
+  &--context-success {
+    --srcBannerBackgroundColor: var(
+      --src-ui-status-light-success,
+      rgba(22, 163, 74, 0.16)
+    );
+    --srcBannerBorderColor: var(--src-ui-status-basic-success, #22c55e);
+    --srcBannerIconColor: var(--src-icon-success);
+    --srcBannerTextColor: var(--src-text-ui-success-main, #16a34a);
+  }
+
+  &--context-critical,
+  &--context-error {
+    --srcBannerBackgroundColor: var(
+      --src-ui-status-light-critical,
+      rgba(239, 68, 68, 0.16)
+    );
+    --srcBannerBorderColor: var(--src-ui-status-basic-critical, #f24122);
+    --srcBannerIconColor: var(--src-icon-error);
+    --srcBannerTextColor: var(--src-text-body-destruct, #c5280c);
+  }
+
+  &--context-warning {
+    --srcBannerBackgroundColor: var(
+      --src-ui-status-light-warning,
+      rgba(245, 168, 15, 0.24)
+    );
+    --srcBannerBorderColor: var(--src-ui-status-basic-warning, #f59b18);
+    --srcBannerIconColor: var(--src-icon-warning);
+    --srcBannerTextColor: var(--src-text-ui-warning-main, #d97706);
+  }
+}

package/styles/elements/_src-button.scss

@@ -275,7 +275,7 @@
         --src-ui-secondary-default-hover,
         rgba(148, 163, 184, 0.08)
       );
-      --srcButtonIconCOlor: var(--src-icon-hover, #111827);
+      --srcButtonIconColor: var(--src-icon-hover, #111827);
     }
   }
 

package/styles/elements/_src-checkbox.scss

@@ -4,7 +4,7 @@
   --srcCheckboxBorderWidth: 2px;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--src-gap-sm, 4px);
   cursor: pointer;
 
   input[type='checkbox'] {
@@ -12,9 +12,9 @@
     appearance: none;
     width: var(--srcCheckboxSize);
     height: var(--srcCheckboxSize);
-    padding: 2px;
+    padding: var(--src-space-0-5, 2px);
     border-radius: var(--src-border-rounded-xs, var(--src-space-1));
-    background-color: #fff;
+    background-color: var(--src-surface-container-main, #fff);
     border: var(--srcCheckboxBorderWidth) solid var(--srcCheckboxBorderColor);
     cursor: pointer;
 
@@ -23,8 +23,8 @@
     }
 
     &:checked {
-      background-color: #007bff;
-      --srcCheckboxBorderColor: #007bff;
+      background-color: var(--src-ui-accent-default, #017bff);
+      --srcCheckboxBorderColor: var(--src-ui-accent-default, #017bff);
 
       &::after {
         content: '';
@@ -53,6 +53,17 @@
       box-shadow: 0 0 0 var(--src-shadow-focused, 4px)
         var(--src-shadow-light, rgba(148, 163, 184, 0.16));
     }
+
+    &:disabled,
+    &[disabled] {
+      --srcCheckboxBorderColor: var(
+        --src-ui-accent-disabled,
+        rgba(148, 163, 184, 0.24)
+      );
+      background-color: var(--src-ui-input-disabled, rgba(148, 163, 184, 0.16));
+      cursor: default;
+      pointer-events: none;
+    }
   }
 
   .src-checkbox__label {

package/styles/elements/_src-divider.scss

@@ -0,0 +1,14 @@
+.src-divider {
+  --srcDividerColor: var(--src-border-container-basic, #e5e7eb);
+  --srcDividerThickness: 1px;
+  --srcDividerOffsetTop: 8px;
+  --srcDividerOffsetBottom: var(--srcDividerOffsetTop);
+  display: block;
+  width: 100%;
+  height: var(--srcDividerThickness);
+  margin-top: var(--srcDividerOffsetTop);
+  margin-bottom: var(--srcDividerOffsetBottom);
+  padding: 0;
+  background-color: var(--srcDividerColor);
+  border: none;
+}

package/styles/elements/_src-form.scss

@@ -1,6 +1,6 @@
 .src-form {
-  --srcFormRowGap: 16px;
-  --srcFormItemsGap: 12px;
+  --srcFormRowGap: var(--src-layout-gap-const-lg, 16px);
+  --srcFormItemsGap: var(--src-layout-gap-const-md, 12px);
   --srcFormOffset: 0;
   width: 100%;
   display: flex;

package/styles/elements/_src-hint.scss

@@ -0,0 +1,37 @@
+.src-hint {
+  --srcHintColor: var(--src-color-icon-default, #6b7280);
+  --srcHintFontSize: var(--src-text-fontSize, 12px);
+  --srcHintLineHeight: var(--src-text-lineHeight, 16px);
+  --srcHintPadding: var(--src-gap-md, 8px) 0 0;
+  --srcHintIconSize: var(--src-icon-size, 16px);
+
+  position: relative;
+  color: var(--srcHintColor);
+  font-size: var(--srcHintFontSize);
+  font-style: normal;
+  display: flex;
+  font-weight: 500;
+  padding: var(--srcHintPadding);
+  margin: 0;
+  line-height: var(--srcHintLineHeight);
+
+  .src-hint__icon {
+    width: var(--srcHintIconSize);
+    height: var(--srcHintIconSize);
+    margin-right: var(--src-gap-md, 4px);
+    color: currentColor;
+  }
+
+  &--error,
+  &--context-error {
+    --srcHintColor: var(--src-text-body-destruct, #c5280c);
+  }
+
+  &--context-info {
+    --srcHintColor: var(--src-text-body-accent, #016fe6);
+  }
+
+  &--context-success {
+    --srcHintColor: var(--src-text-body-success, #16a34a);
+  }
+}

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

@@ -258,7 +258,7 @@
         --src-ui-secondary-default-hover,
         rgba(148, 163, 184, 0.08)
       );
-      --srcButtonIconCOlor: var(--src-icon-hover, #111827);
+      --srcButtonIconColor: var(--src-icon-hover, #111827);
     }
   }
 

package/styles/elements/_src-input.scss

@@ -22,7 +22,7 @@
     var(--src-padding-sm, var(--src-space-3));
   font-family: var(--src-font-family-body);
   font-style: normal;
-  font-weight: var(--src-font-weight-Medium, 500);
+  font-weight: var(--src-font-weight-medium, 500);
   background: var(--srcInputFieldBg);
   border: var(--srcInputFieldBorder);
   box-shadow: none;

package/styles/elements/_src-label.scss

@@ -3,7 +3,7 @@
   --srcLabelLineHeight: var(--src-font-line-xs, 16px);
   --srcLabelFontWeight: 600;
   --srcLabelColor: var(--src-text-body-lable, #6b7280);
-  --srcLabelMarginBottom: 4px;
+  --srcLabelMarginBottom: var(--src-gap-sm, 4px);
   --srcLabelLetterSpacing: var(--src-font-spacing-tech, 1.2px);
 
   display: block;

package/styles/elements/_src-list.scss

@@ -3,10 +3,10 @@
   width: 100%;
   margin: 0;
   list-style: none;
-  padding: 8px;
+  padding: var(--src-padding-xs, 8px);
 
   .src-list__item {
-    margin-bottom: 4px;
+    margin-bottom: var(--src-gap-sm, 4px);
   }
 
   &--compact {

package/styles/elements/_src-modal.scss

@@ -55,7 +55,7 @@
     padding: var(--srcModalBodyPadding);
     overflow: auto;
     scrollbar-width: thin;
-    scrollbar-color: var(--src-color-border-default) transparent;
+    scrollbar-color: var(--src-border-container-basic) transparent;
     .src-modal__title,
     .src-modal__scroll-box {
       grid-column: 1 / -1;
@@ -84,7 +84,7 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background-color: var(--src-color-border-default);
+      background-color: var(--src-border-container-basic);
       border-radius: 10px;
     }
   }
@@ -99,14 +99,14 @@
       var(--src-layout-padding-const-xl, 24px);
     width: 100%;
     border-top: var(--srcModalFooterBorder);
-    gap: 8px;
+    gap: var(--src-layout-gap-const-sm, 8px);
 
     @media (max-width: 767px) {
       flex-direction: column-reverse;
       .src-modal__footer-group {
         width: 100%;
       }
-      .src-modal__footer-group src-button {
+      .src-modal__footer-group .src-button {
         flex-grow: 1;
 
         .src-button {
@@ -122,7 +122,7 @@
 
   .src-modal__footer-group {
     display: flex;
-    gap: 10px;
+    gap: var(--src-layout-gap-const-md, 12px);
   }
 
   .src-modal__title {

package/styles/elements/_src-popover.scss

@@ -9,7 +9,7 @@
   --srcPopoverTitleLineHeight: var(--src-font-line-base);
   --srcPopoverTitleColor: var(--src-color-text-default);
   --srcPopoverBodyPadding: 20px;
-  --srcPopoverTitleBorder: 1px solid var(--src-color-border-default, #e5e7eb);
+  --srcPopoverTitleBorder: 1px solid var(--src-border-container-basic, #e5e7eb);
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-template-rows: auto minmax(0, 1fr) auto;
@@ -26,7 +26,7 @@
     width: var(--srcPopoverWidth);
     overflow: auto;
     scrollbar-width: thin;
-    scrollbar-color: var(--src-color-border-default) transparent;
+    scrollbar-color: var(--src-border-container-basic) transparent;
 
     &::-webkit-scrollbar {
       width: 4px;
@@ -37,11 +37,11 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background-color: var(--src-color-border-default);
+      background-color: var(--src-border-container-basic);
       border-radius: 10px;
     }
     .src-list {
-      src-list-item:last-child {
+      .src-list__item:last-child {
         margin-bottom: 0;
       }
     }
@@ -49,7 +49,7 @@
 }
 
 .src-popover-panel--mobile {
-  src-popover {
+  .src-popover {
     width: 100%;
   }
   .src-popover {

package/styles/elements/_src-radio.scss

@@ -21,7 +21,7 @@
 .src-radio {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--src-gap-sm, 4px);
   cursor: pointer;
 
   input[type='radio'] {
@@ -30,7 +30,7 @@
     width: var(--srcRadioSize);
     height: var(--srcRadioSize);
     border-radius: 50%;
-    background-color: #fff;
+    background-color: var(--src-surface-container-main, #fff);
     border: var(--srcRadioBorderWidth) solid var(--srcRadioBorderColor);
     cursor: pointer;
 
@@ -47,11 +47,18 @@
       }
     }
 
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--srcRadioFocusRing);
+    }
+
     &[disabled] {
       --srcRadioBorderColor: var(
         --src-ui-accent-disabled,
         rgba(148, 163, 184, 0.24)
       );
+      cursor: default;
+      pointer-events: none;
     }
   }
 

package/styles/elements/_src-select.scss

@@ -30,7 +30,7 @@
     var(--src-padding-sm, var(--src-space-3));
   font-family: var(--src-font-family-body);
   font-style: normal;
-  font-weight: var(--src-font-weight-Medium, 500);
+  font-weight: var(--src-font-weight-medium, 500);
   border: var(--srcSelectFieldBorder);
   background-color: var(--srcSelectFieldBg);
   background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.40573 4.3L0.805725 1.7C0.489058 1.38333 0.418392 1.021 0.593725 0.613C0.768392 0.204333 1.08073 0 1.53073 0H6.68072C7.13072 0 7.44306 0.204333 7.61772 0.613C7.79306 1.021 7.72239 1.38333 7.40573 1.7L4.80572 4.3C4.70572 4.4 4.59739 4.475 4.48073 4.525C4.36406 4.575 4.23906 4.6 4.10573 4.6C3.97239 4.6 3.84739 4.575 3.73073 4.525C3.61406 4.475 3.50573 4.4 3.40573 4.3Z' fill='%236B7280'/%3E%3C/svg%3E%0A");

package/styles/elements/_src-textarea.scss

@@ -26,7 +26,7 @@
 
   font-family: var(--src-font-family-body);
   font-style: normal;
-  font-weight: var(--src-font-weight-Medium, 500);
+  font-weight: var(--src-font-weight-medium, 500);
   font-size: var(--srcTexareaFontSize);
   line-height: var(--srcTexareaLineHeight);
   color: var(--srcTexareaFontColor);
@@ -86,7 +86,7 @@
     --srcTexareaMinHeight: 56px;
   }
 
-  &.src-input--secondary {
+  &.src-textarea--secondary {
     --srcTexareaBg: var(--src-ui-input-secondary, rgba(148, 163, 184, 0.08));
     --srcTexareaBorder: none;
     --srcTexareaColor: var(--src-text-ui-secondary-main, #111827);
@@ -96,7 +96,7 @@
       --srcTexareaBorder: none;
     }
   }
-  &.src-input--ghost {
+  &.src-textarea--ghost {
     --srcTexareaBg: transparent;
     --srcTexareaBorder: none;
     --srcTexareaColor: var(--src-text-ui-secondary-main, #111827);

package/styles/elements/elements.scss

@@ -11,3 +11,7 @@
 @use './src-toggle';
 @use './src-modal';
 @use './src-popover';
+@use './src-badge';
+@use './src-banner';
+@use './src-divider';
+@use './src-hint';