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

package/styles/elements/_src-radio.scss

@@ -3,9 +3,10 @@
 
   --srcRadioSize: 20px;
   --srcRadioBgColor: var(--src-color-bg-default);
-  --srcRadioBorderColor: var(--src-color-border-strong);
+  --srcRadioBorderColor: var(--src-border-input-basic, #d1d5db);
   --srcRadioBorderWidth: 2px;
-  --srcRadioFocusRing: var(--srcFormElementFocusRing);
+  --srcRadioFocusRing: 0 0 0 var(--src-shadow-focused, 4px)
+    var(--src-shadow-accent-light, rgba(1, 123, 255, 0.16));
   display: flex;
   flex-direction: column;
   gap: var(--srcRadioGroupGap);
@@ -22,28 +23,44 @@
   align-items: center;
   gap: 4px;
   cursor: pointer;
-}
-input[type='radio'] {
-  position: relative;
-  appearance: none;
-  width: var(--srcRadioSize);
-  height: var(--srcRadioSize);
-  border-radius: 50%;
-  background-color: #fff;
-  border: var(--srcRadioBorderWidth) solid var(--srcRadioBorderColor);
-  cursor: pointer;
 
-  &:hover {
-    --srcRadioBorderColor: var(--src-color-border-strong-hover);
-  }
+  input[type='radio'] {
+    position: relative;
+    appearance: none;
+    width: var(--srcRadioSize);
+    height: var(--srcRadioSize);
+    border-radius: 50%;
+    background-color: #fff;
+    border: var(--srcRadioBorderWidth) solid var(--srcRadioBorderColor);
+    cursor: pointer;
+
+    &:hover {
+      --srcRadioBorderColor: var(--src-border-input-hover, #9ca3af);
+    }
+
+    &:checked {
+      --srcRadioBorderColor: var(--src-ui-accent-default, #017bff);
+      box-shadow: inset 0 0 0 3px var(--srcRadioBorderColor);
+
+      &:hover {
+        --srcRadioBorderColor: var(--src-ui-accent-default-hover, #016fe6);
+      }
+    }
 
-  &:checked {
-    --srcRadioBorderColor: var(--src-color-bg-primary);
-    box-shadow: inset 0 0 0 3px var(--srcRadioBorderColor);
+    &[disabled] {
+      --srcRadioBorderColor: var(
+        --src-ui-accent-disabled,
+        rgba(148, 163, 184, 0.24)
+      );
+    }
   }
 
-  &[disabled] {
-    --srcRadioBorderColor: var(--src-color-border-strong-disabled);
-    // --srcRadioCheckedBgColor: var(--color-text-inverse);
+  .src-radio__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-select.scss

@@ -1,14 +1,16 @@
 .src-select {
-  --srcSelectFontSize: var(--srcFormElementFontSize);
-  --srcSelectLineHeight: var(--srcFormElementLineHeight);
-  --srcSelectFontColor: var(--srcFormElementFontColor);
-  --srcSelectFieldBg: var(--srcFormElementBg);
-  --srcSelectFieldBorderColor: var(--srcFormElementBorderColor);
-  --srcSelectHeight: var(--srcFormElementHeight);
-  --srcSelectBorderRadius: var(--srcFormElementBorderRadius);
-  --srcSelectBoxShadow: var(--srcFormElementBoxShadow);
+  --srcSelectFontSize: var(--src-text-fontSize, var(--src-font-size-sm));
+  --srcSelectLineHeight: var(--src-text-lineHeight, var(--src-font-line-sm));
+  --srcSelectFontColor: var(--src-text-ui-secondary-main, #111827);
+  --srcSelectFieldBg: var(--src-surface-container-main, #fff);
+  --srcSelectFieldBorderColor: var(--src-border-input-basic, #d1d5db);
+  --srcSelectFieldBorder: 1px solid var(--srcSelectFieldBorderColor);
+  --srcSelectHeight: 36px;
+  --srcSelectBorderRadius: var(--src-border-rounded, var(--src-space-1-5));
+  // --srcSelectBoxShadow: var(--srcFormElementBoxShadow);
   // Focus ring it's a multiple box-shadow
-  --srcSelectFocusRing: var(--srcFormElementFocusRing);
+  --srcSelectFocusRing: 0 0 0 var(--src-shadow-focused, 4px)
+    var(--src-shadow-focus, rgba(1, 123, 255, 0.16));
 
   -webkit-appearance: none;
   appearance: none;
@@ -21,29 +23,50 @@
   font-size: var(--srcSelectFontSize);
   line-height: var(--srcSelectLineHeight);
   color: var(--srcSelectFontColor);
-  padding: 7px 28px 7px 12px;
-  font-family: var(--src-font-family-sans);
+  //7px 28px 7px 12px;
+  padding: var(--src-padding-xs, var(--src-space-2))
+    var(--src-padding-xs, var(--src-space-2))
+    var(--src-padding-xs, var(--src-space-2))
+    var(--src-padding-sm, var(--src-space-3));
+  font-family: var(--src-font-family-body);
   font-style: normal;
-  font-weight: var(--src-fw-regular, 400);
-  border: 1px solid var(--srcSelectFieldBorderColor);
+  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");
   background-repeat: no-repeat;
   background-position: calc(100% - 12px) center;
 
-  box-shadow: var(--srcSelectBoxShadow);
+  box-shadow: none;
+
+  &:hover {
+    --srcSelectFieldBorderColor: var(--src-border-input-hover, #9ca3af);
+    --srcSelectFieldBg: var(
+      --src-ui-input-secondary,
+      rgba(148, 163, 184, 0.08)
+    );
+  }
+
+  &:active {
+    --srcSelectFieldBorderColor: var(--src-border-input-active, #017bff);
+  }
 
   &:focus {
+    --srcSelectFieldBorderColor: var(--src-border-input-active, #017bff);
+    --srcSelectFieldBg: var(--src-surface-container-main, #fff);
+
     outline: none;
     box-shadow: var(--srcSelectFocusRing);
+    &:hover {
+      --srcSelectFieldBg: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
+    }
   }
 
   &[disabled],
   &:disabled {
-    --srcSelectFieldBg: var(--srcFormElementDisabledBg);
-    --srcSelectFieldBorderColor: var(--srcFormElementDisabledBorderColor);
-    --srcSelectBoxShadow: none;
-    color: var(--src-color-text-default-disabled);
+    --srcSelectFieldBg: var(--src-ui-input-disabled, rgba(148, 163, 184, 0.16));
+    --srcSelectFieldBorderColor: transparent;
+    --srcSelectFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
 
     pointer-events: none;
   }
@@ -51,24 +74,126 @@
   option {
     background-color: #fff;
   }
+
+  &[class*='--size-sm'] {
+    --srcSelectHeight: 28px;
+  }
+
+  &[class*='--size-md'] {
+    --srcSelectHeight: 36px;
+  }
+  &[class*='--size-lg'] {
+    --srcSelectHeight: 44px;
+  }
+  &[class*='--size-xl'] {
+    --srcSelectHeight: 56px;
+  }
+
+  &.src-select--secondary {
+    --srcSelectFieldBg: var(
+      --src-ui-input-secondary,
+      rgba(148, 163, 184, 0.08)
+    );
+    --srcSelectFieldBorder: none;
+    --srcSelectFontColor: var(--src-text-ui-secondary-main, #111827);
+
+    &:hover {
+      --srcSelectFieldBg: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
+      --srcSelectFieldBorder: none;
+    }
+  }
+  &.src-select--ghost {
+    --srcSelectFieldBg: transparent;
+    --srcSelectFieldBorder: none;
+    --srcSelectFontColor: var(--src-text-ui-secondary-main, #111827);
+
+    &:hover {
+      --srcSelectFieldBg: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
+      --srcSelectFieldBorder: none;
+    }
+  }
 }
 
 .src-select--compact {
   --srcSelectHeight: 32px;
-  --srcSelectFontSize: var(--src-fs-small);
-  --srcSelectLineHeight: var(--src-lh-small);
+  --srcSelectFontSize: var(--src-font-size-xs);
+  --srcSelectLineHeight: var(--src-font-line-xs);
 }
 /* Error State */
-.src-select--has-error {
-  --srcSelectFieldBg: var(--src-color-bg-critical-subdued);
-  --srcSelectFieldBorderColor: var(--src-color-border-critical-strong);
+.src-select--state-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));
+  --srcSelectFontColor: var(--src-text-ui-distruct-main, #c5280c);
+
+  &:hover {
+    --srcSelectFieldBorderColor: var(--src-border-input-error, #f24122);
+    --srcSelectFieldBg:
+      linear-gradient(
+        0deg,
+        var(--src-ui-input-error-hover, rgba(239, 68, 68, 0.08)) 0%,
+        var(--src-ui-input-error-hover, rgba(239, 68, 68, 0.08)) 100%
+      ),
+      var(--src-surface-container-main, #fff);
+  }
+
+  &:active {
+    --srcSelectFieldBorderColor: var(--src-border-input-error, #f24122);
+  }
+
+  &:focus {
+    --srcSelectFieldBorderColor: var(--src-border-input-error, #f24122);
+    --srcSelectFieldBg: var(--src-surface-container-main, #fff);
+
+    &:hover {
+      --srcSelectFieldBg: var(
+        --src-ui-input-error-hover,
+        rgba(239, 68, 68, 0.08)
+      );
+    }
+  }
+}
+
+/* Success State */
+.src-select--state-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));
+  --srcSelectFontColor: var(--src-text-ui-success-main, #16a34a);
+
+  &:hover {
+    --srcSelectFieldBorderColor: var(--src-border-input-success-hover, #16a34a);
+    --srcSelectFieldBg:
+      linear-gradient(
+        0deg,
+        var(--src-ui-input-success-hover, rgba(22, 163, 74, 0.08)) 0%,
+        var(--src-ui-input-success-hover, rgba(22, 163, 74, 0.08)) 100%
+      ),
+      var(--src-surface-container-main, #fff);
+  }
+
+  &:active {
+    --srcSelectFieldBorderColor: var(--src-border-input-success-hover, #16a34a);
+  }
+
+  &:focus {
+    --srcSelectFieldBorderColor: var(--src-border-input-success, #22c55e);
+    --srcSelectFieldBg: var(--src-surface-container-main, #fff);
+
+    &:hover {
+      --srcSelectFieldBg: var(
+        --src-ui-input-success-hover,
+        rgba(22, 163, 74, 0.08)
+      );
+    }
+  }
 }
 
 /* Disabled State */
 .src-select--disabled {
-  --srcSelectFieldBg: var(--srcFormElementDisabledBg);
-  --srcSelectFieldBorderColor: var(--srcFormElementDisabledBorderColor);
-  --srcSelectBoxShadow: none;
+  --srcSelectFieldBg: var(--src-ui-input-disabled, rgba(148, 163, 184, 0.16));
+  --srcSelectFieldBorder: none;
+  --srcSelectFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
 
   pointer-events: none;
 }

package/styles/elements/_src-textarea.scss

@@ -1,14 +1,16 @@
 .src-textarea {
-  --srcTexareaFontSize: var(--srcFormElementFontSize);
-  --srcTexareaLineHeight: var(--srcFormElementLineHeight);
-  --srcTexareaFontColor: var(--srcFormElementFontColor);
-  --srcTexareaBg: var(--srcFormElementBg);
-  --srcTexareaBorderColor: var(--srcFormElementBorderColor);
-  --srcTexareaMinHeight: var(--srcFormElementHeight);
-  --srcTexareaBorderRadius: var(--srcFormElementBorderRadius);
-  --srcTexareaBoxShadow: var(--srcFormElementBoxShadow);
+  --srcTexareaFontSize: var(--src-text-fontSize, var(--src-font-size-sm));
+  --srcTexareaLineHeight: var(--src-text-lineHeight, var(--src-font-line-sm));
+  --srcTexareaFontColor: var(--src-text-ui-secondary-main, #111827);
+  --srcTexareaBg: var(--src-surface-container-main, #fff);
+  --srcTexareaBorderColor: var(--src-border-input-basic, #d1d5db);
+  --srcTexareaBorder: 1px solid var(--srcTexareaBorderColor);
+  --srcTexareaMinHeight: 36px;
+  --srcTexareaBorderRadius: var(--src-border-rounded, var(--src-space-1-5));
+  --srcTexareaBoxShadow: none;
   // Focus ring it's a multiple box-shadow
-  --srcTextareaFocusRing: var(--srcFormElementFocusRing);
+  --srcTextareaFocusRing: 0 0 0 var(--src-shadow-focused, 4px)
+    var(--src-shadow-focus, rgba(1, 123, 255, 0.16));
 
   position: relative;
 
@@ -17,25 +19,47 @@
 
   display: flex;
   align-items: center;
-  padding: 7px 12px;
+  padding: var(--src-padding-xs, var(--src-space-2))
+    var(--src-padding-xs, var(--src-space-2))
+    var(--src-padding-xs, var(--src-space-2))
+    var(--src-padding-sm, var(--src-space-3));
 
-  font-family: var(--src-font-family-sans);
+  font-family: var(--src-font-family-body);
   font-style: normal;
-  font-weight: var(--src-fw-regular, 400);
+  font-weight: var(--src-font-weight-Medium, 500);
   font-size: var(--srcTexareaFontSize);
   line-height: var(--srcTexareaLineHeight);
   color: var(--srcTexareaFontColor);
 
-  border: 1px solid var(--srcTexareaBorderColor);
+  border: var(--srcTexareaBorder);
   border-radius: var(--srcTexareaBorderRadius);
-  background-color: var(--srcTexareaBg);
+  background: var(--srcTexareaBg);
   box-shadow: var(--srcTexareaBoxShadow);
 
   resize: vertical;
+  &:hover {
+    --srcTexareaBorderColor: var(--src-border-input-hover, #9ca3af);
+    --srcTexareaBg:
+      linear-gradient(
+        0deg,
+        var(--src-ui-input-secondary, rgba(148, 163, 184, 0.08)) 0%,
+        var(--src-ui-input-secondary, rgba(148, 163, 184, 0.08)) 100%
+      ),
+      var(--src-surface-container-main, #fff);
+  }
+  &:active {
+    --srcTexareaBorderColor: var(--src-border-input-active, #017bff);
+  }
 
   &:focus {
+    --srcTexareaBorderColor: var(--src-border-input-active, #017bff);
+    --srcTexareaBg: var(--src-surface-container-main, #fff);
+
     outline: none;
     box-shadow: var(--srcTextareaFocusRing);
+    &:hover {
+      --srcTexareaBg: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
+    }
   }
 
   &[disabled],
@@ -47,24 +71,115 @@
 
     pointer-events: none;
   }
-}
 
-.src-textarea--compact {
-  --srcTexareaMinHeight: 32px;
-  --srcTexareaFontSize: var(--src-fs-small);
-  --srcTexareaLineHeight: var(--src-lh-small);
+  &[class*='--size-sm'] {
+    --srcTexareaMinHeight: 28px;
+  }
+
+  &[class*='--size-md'] {
+    --srcTexareaMinHeight: 36px;
+  }
+  &[class*='--size-lg'] {
+    --srcTexareaMinHeight: 44px;
+  }
+  &[class*='--size-xl'] {
+    --srcTexareaMinHeight: 56px;
+  }
+
+  &.src-input--secondary {
+    --srcTexareaBg: var(--src-ui-input-secondary, rgba(148, 163, 184, 0.08));
+    --srcTexareaBorder: none;
+    --srcTexareaColor: var(--src-text-ui-secondary-main, #111827);
+
+    &:hover {
+      --srcTexareaBg: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
+      --srcTexareaBorder: none;
+    }
+  }
+  &.src-input--ghost {
+    --srcTexareaBg: transparent;
+    --srcTexareaBorder: none;
+    --srcTexareaColor: var(--src-text-ui-secondary-main, #111827);
+
+    &:hover {
+      --srcTexareaBg: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
+      --srcTexareaBorder: none;
+    }
+  }
 }
+
 /* Error State */
-.src-textarea--has-error {
-  --srcTexareaBg: var(--src-color-bg-critical-subdued);
-  --srcTexareaBorderColor: var(--src-color-border-critical-strong);
+.src-textarea--state-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));
+  --srcTexareaFontColor: var(--src-text-ui-distruct-main, #c5280c);
+
+  &:hover {
+    --srcTexareaBorderColor: var(--src-border-input-error, #f24122);
+    --srcTexareaBg:
+      linear-gradient(
+        0deg,
+        var(--src-ui-input-error-hover, rgba(239, 68, 68, 0.08)) 0%,
+        var(--src-ui-input-error-hover, rgba(239, 68, 68, 0.08)) 100%
+      ),
+      var(--src-surface-container-main, #fff);
+  }
+
+  &:active {
+    --srcTexareaBorderColor: var(--src-border-input-error, #f24122);
+  }
+
+  &:focus {
+    --srcTexareaBorderColor: var(--src-border-input-error, #f24122);
+    --srcTexareaBg: var(--src-surface-container-main, #fff);
+
+    &:hover {
+      --srcTexareaBg: var(--src-ui-input-error-hover, rgba(239, 68, 68, 0.08));
+    }
+  }
+}
+
+/* Success State */
+.src-textarea--state-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));
+  --srcTexareaFontColor: var(--src-text-ui-success-main, #16a34a);
+
+  &:hover {
+    --srcTexareaBorderColor: var(--src-border-input-success-hover, #16a34a);
+    --srcTexareaBg:
+      linear-gradient(
+        0deg,
+        var(--src-ui-input-success-hover, rgba(22, 163, 74, 0.08)) 0%,
+        var(--src-ui-input-success-hover, rgba(22, 163, 74, 0.08)) 100%
+      ),
+      var(--src-surface-container-main, #fff);
+  }
+
+  &:active {
+    --srcTexareaBorderColor: var(--src-border-input-success-hover, #16a34a);
+  }
+
+  &:focus {
+    --srcTexareaBorderColor: var(--src-border-input-success, #22c55e);
+    --srcTexareaBg: var(--src-surface-container-main, #fff);
+
+    &:hover {
+      --srcTexareaBg: var(
+        --src-ui-input-success-hover,
+        rgba(22, 163, 74, 0.08)
+      );
+    }
+  }
 }
 
 /* Disabled State */
 .src-textarea--disabled {
-  --srcTexareaBg: var(--src-color-bg-default-disabled);
-  --srcTexareaBorderColor: var(--src-color-border-strong-disabled);
-  --srcTexareaBoxShadow: none;
+  --srcTexareaBg: var(--src-ui-input-disabled, rgba(148, 163, 184, 0.16));
+  --srcTexareaBorder: none;
+  --srcTexareaFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
 
   pointer-events: none;
 }

package/styles/elements/_src-toggle.scss

@@ -2,7 +2,10 @@
   --srcToggleWidth: 44px;
   --srcToggleHeight: 24px;
   --srcToggleThumbSize: 20px;
-  --srcToggleInputBg: var(--src-color-bg-strong);
+  --srcToggleInputBg: var(
+    --src-ui-secondary-default,
+    rgba(148, 163, 184, 0.16)
+  );
   --srcToggleThumbBg: var(--src-color-bg-default);
   --srcToggleThumbShadow: var(--src-shadow-large);
   --srcToggleLabelMargin: 20px;
@@ -22,8 +25,8 @@
     padding: 0;
     vertical-align: top;
     background: var(--srcToggleInputBg);
-    border: none;
-    border-radius: var(--src-br-full, 9999px);
+    border: 1px solid var(--src-border-input-basic, #d1d5db);
+    border-radius: var(--src-border-rounded-full, 9999px);
     outline: none;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2);
@@ -32,9 +35,22 @@
     appearance: none;
     overflow: hidden;
 
+    &:hover {
+      --srcToggleInputBg: var(
+        --src-ui-secondary-default-hover,
+        rgba(148, 163, 184, 0.08)
+      );
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 var(--src-shadow-focused, 4px)
+        var(--src-shadow-light, rgba(148, 163, 184, 0.16));
+    }
+
     &:disabled,
     &[disabled] {
-      --srcToggleInputBg: var(--src-color-bg-strong-disabled);
+      --srcToggleInputBg: var(--src-surface-bg, rgba(71, 85, 105, 0.24));
       cursor: default;
       opacity: 1;
       pointer-events: none;
@@ -42,8 +58,8 @@
     &::after {
       content: '';
       position: absolute;
-      top: 2px;
-      left: 2px;
+      top: 1px;
+      left: 1px;
       width: var(--srcToggleThumbSize);
       height: var(--srcToggleThumbSize);
       background-color: var(--srcToggleThumbBg);
@@ -61,11 +77,17 @@
     }
 
     &:checked {
-      --srcToggleInputBg: var(--src-color-bg-primary);
+      --srcToggleInputBg: var(--src-ui-accent-default, #017bff);
+      border-color: transparent;
+
+      &:focus {
+        box-shadow: 0 0 0 var(--src-shadow-focused, 4px)
+          var(--src-shadow-accent-light, rgba(1, 123, 255, 0.16));
+      }
 
       &:disabled,
       &[disabled] {
-        --srcToggleInputBg: var(--src-color-bg-strong-disabled);
+        --srcToggleInputBg: var(--src-surface-bg, rgba(71, 85, 105, 0.24));
         cursor: default;
         opacity: 1;
         pointer-events: none;
@@ -73,8 +95,12 @@
     }
   }
 
-  .src-label {
+  .src-toggle__label {
     margin-bottom: 0;
-    font-weight: normal;
+    color: var(--src-text-body-main, #111827);
+    line-height: var(--src-text-lineHeight, var(--src-font-line-sm));
+    font-size: var(--src-text-fontSize, var(--src-font-size-sm));
+    letter-spacing: 0;
+    font-weight: 500;
   }
 }

package/styles/elements/elements.scss

@@ -1,5 +1,6 @@
 @use './src-list';
 @use './src-button';
+@use './src-icon-button';
 @use './src-form';
 @use './src-input';
 @use './src-select';

package/styles/mixins/button.scss

@@ -0,0 +1,93 @@
+@use 'sass:map';
+$focus-ring-colors: (
+  default: var(--src-shadow-light, rgba(148, 163, 184, 0.16)),
+  info: var(--src-shadow-accent-light, rgba(1, 123, 255, 0.16)),
+  error: var(--src-shadow-error, rgba(239, 68, 68, 0.16)),
+  success: var(--src-shadow-success, rgba(22, 163, 74, 0.12)),
+);
+
+@mixin focusRing($type) {
+  $color: map.get($focus-ring-colors, $type);
+
+  @if $color {
+    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) #{$color};
+  } @else {
+    @warn "srcFocusRing: type `#{$type}` is not defined!";
+  }
+}
+$font-colors: (
+  white: var(--src-text-ui-primary-main, #fff),
+  white-hover: var(--src-text-ui-primary-main, #fff),
+  inverted: var(--src-text-ui-secondary-secondary-invert, #d1d5db),
+  inverted-hover: var(--src-text-ui-secondary-main-invert, #f9fafb),
+  disabled: var(--src-text-ui-secondary-disabled, #9ca3af),
+  info: var(--src-text-ui-accent-main, #016fe6),
+  error: var(--src-text-ui-distruct-main, #c5280c),
+  success: var(--src-text-ui-success-main, #16a34a),
+  info-hover: var(--src-text-ui-accent-hover, #0162cc),
+  error-hover: var(--src-text-ui-distruct-hover, #9f200a),
+  success-hover: var(--src-text-ui-success-hover, #15803d),
+);
+
+@mixin buttonText($type) {
+  $base-color: map.get($font-colors, $type);
+  $hover-color: map.get($font-colors, #{$type}-hover);
+
+  @if $base-color {
+    --srcButtonFontColor: #{$base-color};
+
+    @if $hover-color {
+      &:hover {
+        --srcButtonFontColor: #{$hover-color};
+      }
+    }
+  } @else {
+    @warn "srcButtonText: type `#{$type}` is not defined!";
+  }
+}
+@mixin cleanShadows() {
+  --srcButtonBoxShadow: none;
+  --srcButtonBorder: none;
+  --srcButtonBorderColor: transparent;
+}
+
+@mixin setShadow() {
+  --srcButtonBoxShadow:
+    0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, 0.24)) inset,
+    0 var(--src-shadow-ambient-outer, 1px) 0 0
+      var(--src-shadow-light, rgba(148, 163, 184, 0.16));
+}
+
+@mixin pressedButton($light: false) {
+  @include cleanShadows();
+
+  @if ($light) {
+    --srcButtonFontColor: var(--src-text-ui-accent-main, #016fe6);
+    --srcButtonIconColor: var(--src-icon-info, #017bff);
+    --srcButtonBgColor: var(
+      --src-ui-secondary-default,
+      rgba(148, 163, 184, 0.16)
+    );
+  } @else {
+    --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
+    --srcButtonBgColor: var(--src-ui-accent-active, #374151);
+    --srcButtonIconColor: var(--src-icon-main-invert, #fff);
+  }
+
+  @media (pointer: fine) {
+    &:hover {
+      @if ($light) {
+        --srcButtonBgColor: var(
+          --src-ui-secondary-default-hover,
+          rgba(148, 163, 184, 0.08)
+        );
+        --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc);
+        --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
+      } @else {
+        --srcButtonBgColor: var(--src-ui-accent-active-hover, #111827);
+        --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
+        --srcButtonIconColor: var(--src-icon-main-invert, #fff);
+      }
+    }
+  }
+}