@3dsource/source-ui-native 2.0.2 → 2.0.4

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

@@ -100,6 +100,30 @@
   }
 }
 
+.src-icon-button--state-warning {
+  // @include focusRing(warning);
+  @include setShadow();
+  // most warning colors do not exist in design tokens table
+  // --srcButtonBorderColor: var(--src-border-button-warning);
+  --srcButtonIconColor: var(--src-icon-warning);
+
+  &:focus-visible {
+    // --srcButtonBgColor: var(--src-ui-secondary-error, rgba(239, 68, 68, 0.08));
+    --srcButtonIconColor: var(--src-icon-warning);
+    --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-warning-hover);
+    }
+  }
+}
 .src-icon-button--state-error {
   @include focusRing(error);
   @include setShadow();
@@ -253,6 +277,78 @@
   }
 }
 
+.src-icon-button--inline {
+  @include cleanShadows();
+  @include focusRing(default);
+  --srcButtonBgColor: transparent;
+  --srcButtonIconColor: var(--src-icon-default, #374151);
+  --srcButtonBorderRadius: var(--src-border-rounded, 4px);
+  --srcButtonPaddings: 0;
+  text-decoration: underline;
+  height: auto;
+
+  @media (pointer: fine) {
+    &:hover {
+      --srcButtonBgColor: transparent;
+      --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
+    }
+  }
+  &:active,
+  &.src-icon-button--pressed {
+    @include focusRing(default);
+    @include pressedButton(true);
+
+    &:hover {
+      --srcButtonBgColor: transparent;
+    }
+  }
+
+  &.src-icon-button--state-info {
+    --srcButtonBgColor: transparent;
+    --srcButtonIconColor: var(--src-icon-info, #017bff);
+
+    &:hover {
+      --srcButtonBgColor: transparent;
+      --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
+    }
+  }
+
+  &.src-icon-button--state-success {
+    --srcButtonBgColor: transparent;
+    --srcButtonIconColor: var(--src-icon-success, #16a34a);
+
+    &:hover {
+      --srcButtonBgColor: transparent;
+      --srcButtonIconColor: var(--src-icon-success-hover, #15803d);
+    }
+  }
+  &.src-icon-button--state-error,
+  &.src-icon-button--state-destructive {
+    --srcButtonBgColor: transparent;
+    --srcButtonIconColor: var(--src-icon-error, #f24122);
+
+    &:hover {
+      --srcButtonBgColor: transparent;
+      --srcButtonIconColor: var(--src-icon-error-hover, #c5280c);
+    }
+  }
+  &.src-icon-button--state-warning {
+    --srcButtonBgColor: transparent;
+    --srcButtonIconColor: var(--src-icon-warning, #d97706);
+
+    &:hover {
+      --srcButtonBgColor: transparent;
+      --srcButtonIconColor: var(--src-icon-warning-hover, #b45309);
+    }
+  }
+  &:disabled,
+  &[disabled],
+  &.disabled {
+    @include buttonText(disabled);
+    --srcButtonBgColor: transparent;
+  }
+}
+
 .src-icon-button--plain {
   @include cleanShadows();
   @include focusRing(default);

package/styles/elements/_src-list.scss

@@ -19,15 +19,19 @@
 }
 
 .src-list__item {
-  --srcListItemBgColor: var(--src-color-bg-default);
-  --srcListItemBgHoverColor: var(--src-color-bg-default-hover);
+  --srcListItemBgColor: transparent;
+  --srcListItemBgHoverColor: var(
+    --src-ui-secondary-default-hover,
+    rgba(148, 163, 184, 0.16)
+  );
   --srcListItemBorderRadius: var(--src-border-rounded, 4px);
   --srcListItemBoxShadow: none;
-  --srcListItemFontColor: var(--src-color-text-default);
-  --srcListItemFontSize: var(--src-font-size-sm, 14px);
-  --srcListItemFontWeight: var(--src-font-weight-regular, 400);
-  --srcListItemLineHeight: var(--src-font-line-sm, 20px);
-  --srcListItemPaddings: 8px;
+  --srcListItemFontColor: var(--src-text-body-secondary, #4b5563);
+  --srcListItemFontSize: var(--src-text-fontSize, 12px);
+  --srcListItemFontWeight: 500;
+  --srcListItemLineHeight: var(--src-text-lineHeight, 16px);
+  --srcListItemPaddings: var(--src-padding-xs, 8px) var(--src-padding-xs, 8px)
+    var(--src-padding-xs, 8px) var(--src-padding-sm, 8px);
   --srcListItemTextTransform: default;
   --srcListItemDisplay: block;
   position: relative;
@@ -41,6 +45,7 @@
   color: var(--srcListItemFontColor);
   text-transform: var(--srcListItemTextTransform);
   letter-spacing: 0;
+
   white-space: normal;
   background-color: var(--srcListItemBgColor);
   border-radius: var(--srcListItemBorderRadius);
@@ -50,7 +55,7 @@
   &--flex {
     --srcListItemDisplay: inline-flex;
     align-items: flex-start;
-    gap: 8px;
+    gap: var(--src-gap-md, 6px);
   }
   @media (hover: hover) and (pointer: fine) {
     &:hover,
@@ -59,6 +64,10 @@
     }
   }
 
+  &:active {
+    background-color: var(--src-ui-secondary-active, rgba(1, 123, 255, 0.12));
+  }
+
   &:disabled,
   &[disabled],
   &.disabled,

package/styles/elements/_src-modal.scss

@@ -1,17 +1,24 @@
 // Basic styles for typical modal component
 .src-modal {
-  --srcModalWidth: 620px;
+  --srcModalWidth: 422px;
   --srcModalMaxWidth: calc(100% - 16px);
   --srcModalMaxHeight: 80vh;
-  --srcModalBg: var(--src-color-bg-default);
-  --srcModalBoxShadow: var(--src-shadow-large);
-  --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);
-  --srcModalFooterBorder: 1px solid var(--src-color-border-default, #e5e7eb);
+  --srcModalBg: var(--src-surface-container-main, #fff);
+  --srcModalBoxShadow:
+    0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, 0.24)),
+    0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, 0.16));
+  --srcModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);
+  --srcModalTitleSize: var(--src-font-size-base, 16px);
+  --srcModalTitleLineHeight: var(--src-font-line-base, 24px);
+  --srcModalTitleColor: var(--src-text-body-main, #111827);
+  --srcModalBodyPadding: var(--src-layout-padding-const-lg, 16px)
+    var(--src-layout-padding-const-xl, 24px)
+    var(--src-layout-padding-const-2xl, 32px)
+    var(--src-layout-padding-const-xl, 24px);
+
+  --srcModalTitleBorder: none;
+  --srcModalFooterBorder: 1px solid
+    var(--src-border-container-light, rgba(148, 163, 184, 0.16));
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-template-rows: auto minmax(0, 1fr) auto;
@@ -23,22 +30,55 @@
   border-radius: var(--srcModalBorderRadius);
   box-shadow: var(--srcModalBoxShadow);
 
+  color: var(--src-text-body-secondary, #4b5563);
+
+  font-family: var(--src-font-family-header, Inter);
+  font-size: var(--src-font-size-sm, 14px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--src-font-line-sm, 20px);
+
+  // deprecated
   &--small {
     --srcModalWidth: 380px;
   }
 
   .src-modal__header {
+    position: relative;
     display: flex;
-    padding: 14px 16px 14px 20px;
+    padding: 0;
     width: 100%;
     border-bottom: var(--srcModalTitleBorder);
   }
 
   .src-modal__body {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+    gap: var(--src-layout-gap-const-md, 12px);
+
     padding: var(--srcModalBodyPadding);
     overflow: auto;
     scrollbar-width: thin;
     scrollbar-color: var(--src-color-border-default) transparent;
+    .src-modal__title,
+    .src-modal__scroll-box {
+      grid-column: 1 / -1;
+    }
+
+    &--icon {
+      grid-template-columns: 24px minmax(0, 1fr);
+      .src-modal__icon {
+        grid-column: 1 / 2;
+        grid-row: 1 / -1;
+      }
+      .src-modal__title {
+        grid-column: 2 / -1;
+      }
+      .src-modal__scroll-box {
+        grid-column: 2 / -1;
+      }
+    }
 
     &::-webkit-scrollbar {
       width: 4px;
@@ -58,25 +98,55 @@
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    padding: 16px;
+    padding: var(--src-layout-padding-const-md, 12px)
+      var(--src-layout-padding-const-xl, 24px)
+      var(--src-layout-padding-const-lg, 16px)
+      var(--src-layout-padding-const-xl, 24px);
     width: 100%;
     border-top: var(--srcModalFooterBorder);
+    gap: 8px;
+
+    @media (max-width: 767px) {
+      flex-direction: column-reverse;
+      .src-modal__footer-group {
+        width: 100%;
+      }
+      .src-modal__footer-group src-button {
+        flex-grow: 1;
+
+        .src-button {
+          --srcButtonWidth: 100%;
+        }
+      }
+    }
+
+    &:has(.src-modal__footer-group:nth-child(2)) {
+      justify-content: space-between;
+    }
+  }
+
+  .src-modal__footer-group {
+    display: flex;
     gap: 10px;
   }
 
   .src-modal__title {
     font-size: var(--srcModalTitleSize);
-    font-weight: var(--src-font-weight-semiBold, 600);
+    font-weight: 600;
     line-height: var(--srcModalTitleLineHeight);
     color: var(--srcModalTitleColor);
     word-break: break-word;
   }
 
   .src-modal__back {
+    // Deprecated, will be removed in future versions
     margin-right: 8px;
   }
 
   .src-modal__close {
+    position: absolute;
+    top: 4px;
+    right: 4px;
     margin-left: auto;
   }
 }

package/styles/mixins/button.scss

@@ -24,8 +24,10 @@ $font-colors: (
   info: var(--src-text-ui-accent-main, #016fe6),
   error: var(--src-text-ui-distruct-main, #c5280c),
   success: var(--src-text-ui-success-main, #16a34a),
+  warning: var(--src-text-ui-warning-main, #d97706),
   info-hover: var(--src-text-ui-accent-hover, #0162cc),
   error-hover: var(--src-text-ui-distruct-hover, #9f200a),
+  warning-hover: var(--src-text-ui-warning-hover, #b45309),
   success-hover: var(--src-text-ui-success-hover, #15803d),
 );