@3dsource/source-ui-native 3.2.0 → 3.2.2

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-color-border-default, #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-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

@@ -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

@@ -41,7 +41,7 @@
       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-textarea.scss

@@ -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';