@3dsource/source-ui-native 1.0.18 → 1.0.20

package/styles/elements/_src-button.scss

@@ -1,21 +1,29 @@
+@use '../mixins/button' as *;
 .src-button {
-  --srcButtonBgColor: var(--src-color-bg-default, #fff);
-  --srcButtonBgHoverColor: var(--src-color-bg-default-hover, #f1f2f3);
-  --srcButtonBorderRadius: var(--src-br-small, 4px);
-  --srcButtonBoxShadow:
-    0px 0px 0px 1px var(--src-color-border-strong, #abb2be) inset,
-    0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-  --srcButtonFontColor: var(--src-color-text-default);
-  --srcButtonFontSize: var(--src-fs-base, 16px);
-  --srcButtonFontWeight: var(--src-fw-medium, 500);
-  --srcButtonLineHeight: var(--src-lh-base, 20px);
-  --srcButtonPaddings: 8px 16px;
-  --srcButtonTextTransform: default;
+  @include focusRing(default);
+  @include setShadow();
+  --_defaultFontColor: var(--src-text-ui-secondary-main, #111827);
+  --srcButtonBgColor: transparent;
+  --srcButtonBorderColor: var(--src-border-button-basic, #e5e7eb);
+  --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
+  --srcButtonBorderRadius: var(--src-border-rounded, var(--src-space-1-5));
+  --srcButtonFontColor: var(--_defaultFontColor);
+  --srcButtonIconColor: var(--src-icon-default, #374151);
+  --srcButtonFontSize: var(--src-text-fontSize, var(--src-font-size-sm));
+  --srcButtonFontWeight: var(--src-font-weight-medium, 500);
+  --srcButtonLineHeight: var(--src-text-lineHeight, var(--src-font-line-sm));
+  --srcButtonPaddings: 0px var(--src-padding-sm, var(--src-space-3));
+  --srcButtonTextTransform: none;
   --srcButtonWidth: auto;
+
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
+
   width: var(--srcButtonWidth);
+  height: var(--src-height-base, var(--src-space-9));
+
   padding: var(--srcButtonPaddings);
   font-weight: var(--srcButtonFontWeight);
   font-size: var(--srcButtonFontSize);
@@ -26,189 +34,448 @@
   text-transform: var(--srcButtonTextTransform);
   letter-spacing: 0;
   white-space: nowrap;
-  background-color: var(--srcButtonBgColor);
   border: none;
+  background-color: var(--srcButtonBgColor);
   border-radius: var(--srcButtonBorderRadius);
   box-shadow: var(--srcButtonBoxShadow);
-  text-decoration: none;
   cursor: pointer;
 
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: var(--srcButtonBorderRadius);
+    border: var(--srcButtonBorder);
+  }
+
   & > div,
   & > span {
     display: flex;
     justify-content: center;
     align-items: center;
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+    font-weight: inherit;
+    text-transform: inherit;
+
+    gap: var(--src-gap-md, var(--src-space-1-5));
     width: auto;
-    gap: 4px;
   }
 
-  &:active,
-  &--pressed {
-    background-color: var(--srcButtonBgHoverColor);
+  &:disabled,
+  &[disabled],
+  &.disabled {
+    @include cleanShadows();
+    @include buttonText(disabled);
+    --srcButtonBgColor: var(
+      --src-ui-accent-disabled,
+      rgba(148, 163, 184, 0.24)
+    );
+    --srcButtonIconColor: var(--src-icon-disabled, #9ca3af);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &:focus {
+    --srcButtonIconColor: var(--src-icon-hover, #111827);
+    --srcButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);
+    outline: none;
+    box-shadow: var(--srcButtonFocusRing);
   }
 
   @media (pointer: fine) {
-    &:hover,
-    &:focus-visible {
-      text-decoration: none;
-      background-color: var(--srcButtonBgHoverColor);
+    &: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);
     }
   }
 
-  &:disabled,
-  &[disabled] {
-    --srcButtonBgColor: var(--src-color-bg-default-disabled);
-    --srcButtonBoxShadow: none;
-    --srcButtonFontColor: var(--src-color-text-default-disabled);
-    cursor: default;
-    pointer-events: none;
+  &:active,
+  &.src-button--pressed {
+    @include focusRing(default);
+    @include pressedButton();
+    // --srcButtonIconColor: var(--src-icon-main-invert, #fff);
   }
+}
 
-  // size
-  &--slim {
-    --srcButtonPaddings: 6px 12px;
+.src-button--state-info {
+  @include buttonText(info);
+  @include focusRing(info);
+  @include setShadow();
+  --srcButtonBorderColor: var(--src-border-button-info, #7dbbff);
+  --srcButtonIconColor: var(--src-icon-info, #017bff);
 
-    &.src-button--icon-prefix {
-      --srcButtonPaddings: 6px 12px 6px 8px;
-    }
+  &:focus {
+    --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);
   }
 
-  &--medium {
-    --srcButtonPaddings: 8px 16px;
-
-    &.src-button--icon-prefix {
-      --srcButtonPaddings: 8px 16px 8px 12px;
+  @media (pointer: fine) {
+    &:hover {
+      --srcButtonBgColor: var(--src-ui-secondary-info, rgba(1, 123, 255, 0.08));
+      --srcButtonBorderColor: var(--src-border-button-info-hover, #017bff);
+      --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
     }
   }
+}
+.src-button--state-error,
+.src-button--state-destructive {
+  @include focusRing(error);
+  @include buttonText(error);
+  @include setShadow();
+  --srcButtonBorderColor: var(--src-border-button-error, #f79482);
+  --srcButtonIconColor: var(--src-icon-error, #f24122);
 
-  &--large {
-    --srcButtonPaddings: 12px 24px;
+  &:focus {
+    --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);
+  }
 
-    &.src-button--icon-prefix {
-      --srcButtonPaddings: 12px 24px 12px 20px;
+  @media (pointer: fine) {
+    &:hover {
+      --srcButtonBgColor: var(
+        --src-ui-secondary-error,
+        rgba(239, 68, 68, 0.08)
+      );
+      --srcButtonBorderColor: var(--src-border-button-error-hover, #f24122);
+      --srcButtonIconColor: var(--src-icon-error-hover, #c5280c);
     }
   }
+}
+.src-button--state-success {
+  @include focusRing(success);
+  @include buttonText(success);
+  @include setShadow();
+  --srcButtonBorderColor: var(--src-border-button-success, #4ade80);
+  --srcButtonIconColor: var(--src-icon-success, #16a34a);
 
-  &--primary {
-    --srcButtonBgColor: var(--src-color-bg-primary);
-    --srcButtonBgHoverColor: var(--src-color-bg-primary-hover);
-    --srcButtonBoxShadow:
-      0px 1px 0px 0px rgba(0, 0, 0, 0.08),
-      0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
-    --srcButtonFontColor: var(--src-color-text-inverse, #fff);
+  &:focus {
+    --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);
+  }
 
-    &:disabled,
-    &[disabled] {
-      --srcButtonBgColor: var(--src-color-bg-primary-disabled);
-      --srcButtonBoxShadow: none;
-      --srcButtonFontColor: var(--src-color-text-default-disabled);
+  @media (pointer: fine) {
+    &:hover {
+      --srcButtonBgColor: var(
+        --src-ui-secondary-success,
+        rgba(22, 163, 74, 0.08)
+      );
+      --srcButtonBorderColor: var(--src-border-button-success-hover, #22c55e);
+      --srcButtonIconColor: var(--src-icon-success-hover, #15803d);
     }
   }
+}
+// ColorScheme variants for filled appearance
+.src-button--primary {
+  @include buttonText(white);
+  @include focusRing(info);
+  --srcButtonBgColor: var(--src-ui-accent-default, #017bff);
+  --srcButtonBorder: none;
+  --srcButtonIconColor: var(--src-icon-main-invert, #fff);
 
-  &--destructive {
-    --srcButtonBgColor: var(--src-color-bg-critical);
-    --srcButtonBgHoverColor: var(--src-color-bg-critical-strong);
-    --srcButtonBoxShadow:
-      0px 1px 0px 0px rgba(0, 0, 0, 0.08),
-      0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
-    --srcButtonFontColor: var(--src-color-text-inverse, #fff);
+  &:focus {
+    --srcButtonIconColor: var(--src-icon-main-invert, #fff);
+  }
 
-    &:disabled,
-    &[disabled] {
-      --srcButtonBgColor: var(--src-color-bg-primary-disabled);
-      --srcButtonBoxShadow: none;
-      --srcButtonFontColor: var(--src-color-text-default-disabled);
+  @media (pointer: fine) {
+    &:hover {
+      --srcButtonBgColor: var(--src-ui-accent-default-hover, #016fe6);
+      --srcButtonIconColor: var(--src-icon-main-invert, #fff);
     }
   }
 
-  &--plain {
-    padding: 0;
-    --srcButtonBgColor: transparent;
-    --srcButtonBgHoverColor: transparent;
-    --srcButtonBoxShadow: none;
+  &.src-button--state-error,
+  &.src-button--state-destructive {
+    @include buttonText(white);
+    @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-button--pressed {
-      text-decoration: underline;
+    &.src-icon-button--pressed {
+      @include focusRing(default);
+      @include pressedButton();
     }
+  }
+
+  &.src-button--state-success {
+    @include buttonText(white);
+    @include focusRing(success);
+    --srcButtonBgColor: var(--src-ui-accent-success, #22c55e);
+    --srcButtonIconColor: var(--src-icon-main-invert, #fff);
 
     @media (pointer: fine) {
-      &:hover,
-      &:focus {
-        text-decoration: underline;
+      &:hover {
+        --srcButtonBgColor: var(--src-ui-accent-success-hover, #16a34a);
+        --srcButtonIconColor: var(--src-icon-main-invert, #fff);
       }
     }
-    &:disabled,
-    &[disabled] {
-      --srcButtonFontColor: var(--src-color-text-default-disabled);
+
+    &:active,
+    &.src-icon-button--pressed {
+      @include focusRing(default);
+      @include pressedButton();
     }
+  }
+}
 
-    //colorScheme
-    &.src-button--primary {
-      --srcButtonFontColor: var(--src-color-text-primary);
+// Appearance variant Ghost. Does not have border (only when focused), but have bg with states
+.src-button--ghost {
+  @include cleanShadows();
+  @include focusRing(default);
+  --srcButtonBgColor: var(
+    --src-ui-secondary-default,
+    rgba(148, 163, 184, 0.16)
+  );
+  --srcButtonIconColor: var(--src-icon-default, #374151);
+  --srcButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);
+  border: none;
 
-      &:active,
-      &--pressed {
-        --srcButtonFontColor: var(--src-color-text-primary);
-      }
+  // does not exists in color map
+  --srcButtonFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
+
+  &:focus {
+    --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);
+    }
+  }
 
-      @media (pointer: fine) {
-        &:hover,
-        &:focus {
-          --srcButtonFontColor: var(--src-color-text-primary);
-        }
+  &.src-button--state-info {
+    --srcButtonBgColor: var(--src-ui-secondary-info, rgba(1, 123, 255, 0.08));
+    --srcButtonBorderColor: var(--src-border-button-info, #7dbbff);
+    --srcButtonIconColor: var(--src-icon-info, #017bff);
+
+    @include buttonText(info);
+    @include focusRing(info);
+
+    @media (pointer: fine) {
+      &:hover {
+        --srcButtonBgColor: var(
+          --src-ui-secondary-info-hover,
+          rgba(1, 123, 255, 0.12)
+        );
+        --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
       }
     }
+  }
+  &.src-button--state-error,
+  &.src-button--state-destructive {
+    --srcButtonBgColor: var(--src-ui-secondary-error, rgba(239, 68, 68, 0.08));
+    --srcButtonBorderColor: var(--src-border-button-error, #f79482);
+    --srcButtonIconColor: var(--src-icon-error, #f24122);
 
-    &.src-button--destructive {
-      --srcButtonFontColor: var(--src-color-text-critical);
+    @include buttonText(error);
+    @include focusRing(error);
 
-      &:active,
-      &--pressed {
-        --srcButtonFontColor: var(--src-color-text-critical);
+    @media (pointer: fine) {
+      &:hover {
+        --srcButtonBgColor: var(
+          --src-ui-secondary-error-hover,
+          rgba(239, 68, 68, 0.16)
+        );
+        --srcButtonIconColor: var(--src-icon-error-hover, #c5280c);
       }
+    }
+  }
+  &.src-button--state-success {
+    --srcButtonBgColor: var(
+      --src-ui-secondary-success,
+      rgba(22, 163, 74, 0.08)
+    );
+    --srcButtonBorderColor: var(--src-border-button-success, #4ade80);
+    --srcButtonIconColor: var(--src-icon-success, #16a34a);
 
-      @media (pointer: fine) {
-        &:hover,
-        &:focus {
-          --srcButtonFontColor: var(--src-color-text-critical);
-        }
+    @include buttonText(success);
+    @include focusRing(success);
+
+    &:focus {
+      --srcButtonBgColor: var(
+        --src-ui-secondary-success,
+        rgba(22, 163, 74, 0.08)
+      );
+    }
+    @media (pointer: fine) {
+      &:hover {
+        --srcButtonBgColor: var(
+          --src-ui-secondary-success-hover,
+          rgba(22, 163, 74, 0.12)
+        );
+        --srcButtonIconColor: var(--src-icon-success-hover, #15803d);
       }
     }
+  }
 
-    &.src-button--secondary {
-      --srcButtonFontColor: var(--src-color-text-default);
+  &:active,
+  &.src-button--pressed {
+    @include focusRing(default);
+    @include pressedButton();
+  }
+}
+.src-button--plain {
+  @include cleanShadows();
+  @include focusRing(default);
+  --srcButtonBgColor: transparent;
+  --srcButtonIconColor: var(--src-icon-default, #374151);
+
+  &:focus {
+    --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);
+  }
+
+  @media (pointer: fine) {
+    &:hover {
+      --srcButtonBgColor: var(
+        --src-ui-secondary-default-hover,
+        rgba(148, 163, 184, 0.08)
+      );
+      --srcButtonIconColor: var(--src-icon-hover, #111827);
     }
+  }
 
-    &.src-button--primary,
-    &.src-button--destructive,
-    &.src-button--secondary {
-      &:disabled,
-      &[disabled] {
-        --srcButtonBgColor: transparent;
-        --srcButtonFontColor: var(--src-color-text-default-disabled);
-      }
+  &:active,
+  &.src-button--pressed {
+    @include buttonText(info);
+    @include focusRing(default);
+    @include pressedButton(true);
+  }
+}
+
+.src-button--inline {
+  @include cleanShadows();
+  --srcButtonBgColor: transparent;
+  --srcButtonFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
+  --srcButtonIconColor: var(--src-icon-default, #374151);
+  --srcButtonBorderRadius: var(--src-border-rounded, 4px);
+  --srcButtonPaddings: 0;
+  text-decoration: underline;
+  height: auto;
+  & > div,
+  & > span {
+    gap: var(--src-gap-sm, var(--src-space-1));
+  }
+
+  @media (pointer: fine) {
+    &:hover {
+      --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc);
+      --srcButtonBgColor: transparent;
+      --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
     }
   }
 
-  // full-width
-  &--full-width {
-    --srcButtonWidth: 100%;
+  &:active {
+    --srcButtonBgColor: transparent;
+    --srcButtonFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
+    --srcButtonIconColor: var(--src-icon-hover, #111827);
+  }
+  &.src-button--pressed {
+    --srcButtonFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
+    --srcButtonBgColor: transparent;
+    --srcButtonIconColor: var(--src-icon-hover, #111827);
+
+    &:hover {
+      --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc);
+      --srcButtonBgColor: transparent;
+      --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
+    }
+  }
+
+  &.src-button--state-inverted {
+    @include buttonText(inverted);
+    --srcButtonBgColor: transparent;
+    --srcButtonIconColor: var(
+      --src-text-ui-secondary-secondary-invert,
+      #d1d5db
+    );
+
+    &:hover {
+      --srcButtonIconColor: var(--src-text-ui-secondary-main-invert, #f9fafb);
+    }
+
+    &:active,
+    &.src-button--pressed {
+      --srcButtonBgColor: transparent;
+      --srcButtonFontColor: var(--src-text-ui-secondary-grey, #9ca3af);
+    }
   }
 
-  &--icon-button {
-    --srcButtonPaddings: 8px;
+  &.src-button--state-info {
+    @include buttonText(info);
+    --srcButtonBgColor: transparent;
+    --srcButtonIconColor: var(--src-icon-info, #017bff);
 
-    &.src-button--slim {
-      --srcButtonPaddings: 6px;
+    &:hover {
+      --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
     }
+  }
+
+  &.src-button--state-success {
+    @include buttonText(success);
+    --srcButtonBgColor: transparent;
+    --srcButtonIconColor: var(--src-icon-success, #16a34a);
 
-    &.src-button--medium {
-      --srcButtonPaddings: 8px;
+    &:hover {
+      --srcButtonIconColor: var(--src-icon-success-hover, #15803d);
     }
+  }
+  &.src-button--state-error,
+  &.src-button--state-destructive {
+    @include buttonText(error);
+    --srcButtonBgColor: transparent;
+    --srcButtonIconColor: var(--src-icon-error, #f24122);
 
-    &.src-button--large {
-      --srcButtonPaddings: 12px;
+    &:hover {
+      --srcButtonIconColor: var(--src-icon-error-hover, #c5280c);
     }
   }
+
+  &:disabled,
+  &[disabled],
+  &.disabled {
+    @include buttonText(disabled);
+    --srcButtonBgColor: transparent;
+  }
 }

package/styles/elements/_src-checkbox.scss

@@ -1,6 +1,6 @@
 .src-checkbox {
-  --srcCheckboxBorderColor: var(--src-color-border-strong);
-  --srcCheckboxSize: 20px;
+  --srcCheckboxBorderColor: var(--src-border-input-basic, #d1d5db);
+  --srcCheckboxSize: var(--src-icon-size, var(--src-space-5));
   --srcCheckboxBorderWidth: 2px;
   display: flex;
   align-items: center;
@@ -13,13 +13,13 @@
     width: var(--srcCheckboxSize);
     height: var(--srcCheckboxSize);
     padding: 2px;
-    border-radius: var(--src-br-small);
+    border-radius: var(--src-border-rounded-xs, var(--src-space-1));
     background-color: #fff;
     border: var(--srcCheckboxBorderWidth) solid var(--srcCheckboxBorderColor);
     cursor: pointer;
 
     &:hover {
-      --srcCheckboxBorderColor: var(--src-color-border-strong-hover);
+      --srcCheckboxBorderColor: var(--src-border-input-hover, #9ca3af);
     }
 
     &:checked {
@@ -40,13 +40,27 @@
         background-position: center;
         background-repeat: no-repeat;
       }
+
+      &:focus {
+        outline: none;
+        box-shadow: 0 0 0 var(--src-shadow-focused, 4px)
+          var(--src-shadow-accent-light, rgba(1, 123, 255, 0.16));
+      }
     }
 
     &:focus {
       outline: none;
-      box-shadow:
-        0 0 0 1px #fff,
-        0 0 0 3px var(--src-color-border-primary);
+      box-shadow: 0 0 0 var(--src-shadow-focused, 4px)
+        var(--src-shadow-light, rgba(148, 163, 184, 0.16));
     }
   }
+
+  .src-checkbox__label {
+    padding-left: var(--src-gap-lg, var(--src-space-3));
+    font-size: var(--src-text-fontSize, var(--src-font-size-sm));
+    line-height: var(--src-text-lineHeight, var(--src-font-line-sm));
+    letter-spacing: 0;
+    font-weight: 500;
+    color: var(--src-text-body-main, #111827);
+  }
 }

package/styles/elements/_src-form.scss

@@ -37,6 +37,10 @@
   width: 100%;
   display: flex;
   flex-direction: column;
+
+  // src-hint {
+  //   margin-top: var(--src-layout-gap-var-md, 8px);
+  // }
 }
 
 .src-form__button-row {