@3dsource/source-ui-native 2.2.0 → 3.0.1

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

@@ -79,7 +79,7 @@
   }
 }
 
-.src-icon-button--state-info {
+.src-icon-button--context-info {
   @include focusRing(info);
   @include setShadow();
   --srcButtonBorderColor: var(--src-border-button-info, #7dbbff);
@@ -100,31 +100,23 @@
   }
 }
 
-.src-icon-button--state-warning {
-  // @include focusRing(warning);
+.src-icon-button--context-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 {
+.src-icon-button--context-error {
   @include focusRing(error);
   @include setShadow();
   --srcButtonBorderColor: var(--src-border-button-error, #f79482);
@@ -148,7 +140,7 @@
   }
 }
 
-.src-icon-button--state-success {
+.src-icon-button--context-success {
   @include setShadow();
   @include focusRing(success);
   --srcButtonBorderColor: var(--src-border-button-success, #4ade80);
@@ -174,7 +166,7 @@
     }
   }
 }
-// ColorScheme variants for filled appearance
+// weight variants for filled appearance
 .src-icon-button--primary {
   @include focusRing(info);
   --srcButtonBgColor: var(--src-ui-accent-default, #017bff);
@@ -192,7 +184,7 @@
     }
   }
 
-  &.src-icon-button--state-error {
+  &.src-icon-button--context-error {
     @include focusRing(error);
     --srcButtonBgColor: var(--src-ui-accent-error, #f24122);
     --srcButtonIconColor: var(--src-icon-main-invert, #fff);
@@ -209,7 +201,7 @@
       @include pressedButton();
     }
   }
-  &.src-icon-button--state-success {
+  &.src-icon-button--context-success {
     @include focusRing(success);
     --srcButtonBgColor: var(--src-ui-accent-success, #22c55e);
     --srcButtonIconColor: var(--src-icon-main-invert, #fff);
@@ -303,7 +295,7 @@
     }
   }
 
-  &.src-icon-button--state-info {
+  &.src-icon-button--context-info {
     --srcButtonBgColor: transparent;
     --srcButtonIconColor: var(--src-icon-info, #017bff);
 
@@ -313,7 +305,7 @@
     }
   }
 
-  &.src-icon-button--state-success {
+  &.src-icon-button--context-success {
     --srcButtonBgColor: transparent;
     --srcButtonIconColor: var(--src-icon-success, #16a34a);
 
@@ -322,8 +314,8 @@
       --srcButtonIconColor: var(--src-icon-success-hover, #15803d);
     }
   }
-  &.src-icon-button--state-error,
-  &.src-icon-button--state-destructive {
+  &.src-icon-button--context-error,
+  &.src-icon-button--context-destructive {
     --srcButtonBgColor: transparent;
     --srcButtonIconColor: var(--src-icon-error, #f24122);
 
@@ -332,7 +324,7 @@
       --srcButtonIconColor: var(--src-icon-error-hover, #c5280c);
     }
   }
-  &.src-icon-button--state-warning {
+  &.src-icon-button--context-warning {
     --srcButtonBgColor: transparent;
     --srcButtonIconColor: var(--src-icon-warning, #d97706);
 
@@ -381,7 +373,7 @@
     @include pressedButton(true);
   }
 
-  &.src-icon-button--state-info {
+  &.src-icon-button--context-info {
     @include cleanShadows();
     @include focusRing(info);
     --srcButtonBgColor: transparent;
@@ -407,7 +399,7 @@
       }
     }
   }
-  &.src-icon-button--state-error {
+  &.src-icon-button--context-error {
     @include cleanShadows();
     @include focusRing(error);
     --srcButtonBgColor: transparent;
@@ -434,7 +426,7 @@
     }
   }
 
-  &.src-icon-button--state-success {
+  &.src-icon-button--context-success {
     @include cleanShadows();
     @include focusRing(success);
     --srcButtonBgColor: transparent;

package/styles/elements/_src-input.scss

@@ -115,7 +115,7 @@
 }
 
 /* Error State */
-.src-input--state-error {
+.src-input--context-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));
@@ -150,7 +150,7 @@
 }
 
 /* Success State */
-.src-input--state-success {
+.src-input--context-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));

package/styles/elements/_src-label.scss

@@ -17,11 +17,3 @@
   letter-spacing: var(--srcLabelLetterSpacing);
   text-transform: uppercase;
 }
-
-// .src-radio,
-// .src-checkbox {
-//   .src-label {
-//     --srcLabelMarginBottom: 0;
-//     --srcLabelFontWeight: 400;
-//   }
-// }

package/styles/elements/_src-list.scss

@@ -90,7 +90,8 @@
   }
 }
 
-.src-list__item--destructive {
+.src-list__item--destructive,
+.src-list__item--context-error {
   --srcListItemBgColor: transparent;
   --srcListItemBgHoverColor: var(--src-color-bg-critical-subdued);
   --srcListItemFontColor: var(--src-color-text-critical);

package/styles/elements/_src-modal.scss

@@ -38,11 +38,6 @@
   font-weight: 400;
   line-height: var(--src-font-line-sm, 20px);
 
-  // deprecated
-  &--small {
-    --srcModalWidth: 380px;
-  }
-
   .src-modal__header {
     position: relative;
     display: flex;
@@ -138,16 +133,12 @@
     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;
+    z-index: 1;
   }
 }
 

package/styles/elements/_src-select.scss

@@ -114,13 +114,8 @@
   }
 }
 
-.src-select--compact {
-  --srcSelectHeight: 32px;
-  --srcSelectFontSize: var(--src-font-size-xs);
-  --srcSelectLineHeight: var(--src-font-line-xs);
-}
-/* Error State */
-.src-select--state-error {
+/* Error Context */
+.src-select--context-error {
   --srcSelectFieldBorderColor: var(--src-border-input-error, #f24122);
   --srcSelectFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px)
     var(--src-shadow-error, rgba(239, 68, 68, 0.16));
@@ -154,8 +149,8 @@
   }
 }
 
-/* Success State */
-.src-select--state-success {
+/* Success context */
+.src-select--context-success {
   --srcSelectFieldBorderColor: var(--src-border-input-success, #22c55e);
   --srcSelectFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px)
     var(--src-shadow-success, rgba(22, 163, 74, 0.12));

package/styles/elements/_src-textarea.scss

@@ -108,8 +108,8 @@
   }
 }
 
-/* Error State */
-.src-textarea--state-error {
+/* Error context */
+.src-textarea--context-error {
   --srcTexareaBorderColor: var(--src-border-input-error, #f24122);
   --srcTexareaRing: 0px 0px 0px var(--src-shadow-focused, 4px)
     var(--src-shadow-error, rgba(239, 68, 68, 0.16));
@@ -140,8 +140,8 @@
   }
 }
 
-/* Success State */
-.src-textarea--state-success {
+/* Success context */
+.src-textarea--context-success {
   --srcTexareaBorderColor: var(--src-border-input-success, #22c55e);
   --srcTexareaFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px)
     var(--src-shadow-success, rgba(22, 163, 74, 0.12));