@3dsource/source-ui-native 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3dsource/source-ui-native",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "license": "MIT",
   "sideEffects": false,
   "dependencies": {

package/styles/base.scss

@@ -0,0 +1,68 @@
+// SourceUI Global Styles: base.scss
+// TODO: get rid of tags, subscitute them with classes
+
+.section_3dsourcecom,
+.cdk-overlay-container {
+  width: 100%;
+  height: 100%;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    font-family: var(--src-font-family-sans);
+  }
+
+  code {
+    font-family: monospace;
+  }
+
+  // NEVER use user-select: none for ALL page!
+  // * {
+  //   user-select: none;
+  // }
+  button {
+    // safari adds unwanted margin-top and margin-bottom
+    margin: 0;
+    font-family: var(--src-font-family-sans);
+    border: none;
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .src-select,
+  select,
+  .src-input,
+  input,
+  .src-textarea,
+  textarea {
+    // safari adds unwanted margin-top and margin-bottom
+    margin: 0;
+
+    &:focus-visible,
+    &:focus {
+      outline: none;
+    }
+  }
+
+  // accent-color property is available only for some inputs and progress
+  input[type='checkbox'],
+  input[type='radio'],
+  input [type='range'],
+  progress {
+    accent-color: var(--src-color-brand-500);
+  }
+
+  table,
+  .src-table {
+    border-spacing: 0;
+  }
+
+  p {
+    margin-top: 0;
+  }
+}

package/styles/elements/_src-button.scss

@@ -0,0 +1,235 @@
+// source-button.component.scss
+.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;
+  --srcButtonWidth: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--srcButtonWidth);
+  padding: var(--srcButtonPaddings);
+  font-weight: var(--srcButtonFontWeight);
+  font-size: var(--srcButtonFontSize);
+  font-style: normal;
+  line-height: var(--srcButtonLineHeight);
+  text-align: center;
+  color: var(--srcButtonFontColor);
+  text-transform: var(--srcButtonTextTransform);
+  letter-spacing: 0;
+  white-space: nowrap;
+  background-color: var(--srcButtonBgColor);
+  border: none;
+  border-radius: var(--srcButtonBorderRadius);
+  box-shadow: var(--srcButtonBoxShadow);
+  cursor: pointer;
+
+  & > div,
+  & > span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+  }
+
+  &:active,
+  &--pressed {
+    background-color: var(--srcButtonBgHoverColor);
+  }
+
+  @media (pointer: fine) {
+    &:hover,
+    &:focus-visible {
+      background-color: var(--srcButtonBgHoverColor);
+    }
+  }
+
+  &:disabled,
+  &[disabled],
+  &.disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  // size
+  &--slim {
+    --srcButtonPaddings: 6px 12px;
+
+    &.src-button--icon-prefix {
+      --srcButtonPaddings: 6px 12px 6px 8px;
+    }
+  }
+
+  &--medium {
+    --srcButtonPaddings: 8px 16px;
+
+    &.src-button--icon-prefix {
+      --srcButtonPaddings: 8px 16px 8px 12px;
+    }
+  }
+
+  &--large {
+    --srcButtonPaddings: 12px 24px;
+
+    &.src-button--icon-prefix {
+      --srcButtonPaddings: 12px 24px 12px 20px;
+    }
+  }
+
+  &--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);
+
+    &:disabled,
+    &[disabled] {
+      --srcButtonBgColor: var(--src-color-bg-primary-disabled);
+      --srcButtonBoxShadow: none;
+      --srcButtonFontColor: var(--src-color-text-default-disabled);
+    }
+  }
+
+  &--secondary {
+    --srcButtonFontColor: var(--src-color-text-default);
+
+    &:disabled,
+    &[disabled] {
+      --srcButtonBgColor: var(--src-color-bg-default-disabled);
+      --srcButtonBoxShadow: none;
+      --srcButtonFontColor: var(--src-color-text-default-disabled);
+    }
+  }
+
+  &--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);
+
+    &:disabled,
+    &[disabled] {
+      --srcButtonBgColor: var(--src-color-bg-primary-disabled);
+      --srcButtonBoxShadow: none;
+      --srcButtonFontColor: var(--src-color-text-default-disabled);
+    }
+  }
+
+  &--plain {
+    padding: 0;
+    --srcButtonBgColor: transparent;
+    --srcButtonBgHoverColor: transparent;
+    --srcButtonBoxShadow: none;
+
+    &:active,
+    &.src-button--pressed {
+      text-decoration: underline;
+    }
+
+    @media (pointer: fine) {
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+    &:disabled,
+    &[disabled] {
+      --srcButtonFontColor: var(--src-color-text-default-disabled);
+    }
+
+    //colorScheme
+    &.src-button--primary {
+      --srcButtonFontColor: var(--src-color-text-primary);
+
+      &:active,
+      &--pressed {
+        --srcButtonFontColor: var(--src-color-text-primary);
+      }
+
+      @media (pointer: fine) {
+        &:hover,
+        &:focus {
+          --srcButtonFontColor: var(--src-color-text-primary);
+        }
+      }
+    }
+
+    &.src-button--destructive {
+      --srcButtonFontColor: var(--src-color-text-critical);
+
+      &:active,
+      &--pressed {
+        --srcButtonFontColor: var(--src-color-text-critical);
+      }
+
+      @media (pointer: fine) {
+        &:hover,
+        &:focus {
+          --srcButtonFontColor: var(--src-color-text-critical);
+        }
+      }
+    }
+
+    &.src-button--secondary {
+      --srcButtonFontColor: var(--src-color-text-default);
+    }
+
+    &.src-button--primary,
+    &.src-button--destructive,
+    &.src-button--secondary {
+      &:disabled,
+      &[disabled] {
+        --srcButtonBgColor: transparent;
+        --srcButtonFontColor: var(--src-color-text-default-disabled);
+      }
+    }
+  }
+
+  // full-width
+  &--full-width {
+    --srcButtonWidth: 100%;
+  }
+
+  &--icon-button {
+    --srcButtonIconColor: var(--src-color-icon-default);
+
+    .icon {
+      flex-shrink: 0;
+      color: var(--srcButtonIconColor);
+    }
+
+    &.src-button--primary,
+    &.src-button--destructive {
+      --srcButtonIconColor: var(--src-color-text-inverse);
+    }
+
+    &.src-button--secondary {
+      --srcButtonIconColor: var(--src-color-icon-default);
+    }
+
+    &.src-button--slim {
+      --srcButtonPaddings: 6px;
+    }
+
+    &.src-button--medium {
+      --srcButtonPaddings: 8px;
+    }
+
+    &.src-button--large {
+      --srcButtonPaddings: 12px;
+    }
+  }
+}

package/styles/elements/_src-checkbox.scss

@@ -0,0 +1,52 @@
+.src-checkbox {
+  --srcCheckboxBorderColor: var(--src-color-border-strong);
+  --srcCheckboxSize: 20px;
+  --srcCheckboxBorderWidth: 2px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+
+  input[type='checkbox'] {
+    position: relative;
+    appearance: none;
+    width: var(--srcCheckboxSize);
+    height: var(--srcCheckboxSize);
+    padding: 2px;
+    border-radius: var(--src-br-small);
+    background-color: #fff;
+    border: var(--srcCheckboxBorderWidth) solid var(--srcCheckboxBorderColor);
+    cursor: pointer;
+
+    &:hover {
+      --srcCheckboxBorderColor: var(--src-color-border-strong-hover);
+    }
+
+    &:checked {
+      background-color: #007bff;
+      --srcCheckboxBorderColor: #007bff;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: calc(var(--srcCheckboxSize) - 2 * var(--srcCheckboxBorderWidth));
+        height: calc(
+          var(--srcCheckboxSize) - 2 * var(--srcCheckboxBorderWidth)
+        );
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 8'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M9.72.24c.35.33.37.9.06 1.27L4.4 7.71A.83.83 0 0 1 3.8 8a.83.83 0 0 1-.62-.26L.25 4.64a.94.94 0 0 1 0-1.28.82.82 0 0 1 1.2 0l2.3 2.43L8.52.3a.82.82 0 0 1 1.2-.05Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+        background-size: 10px 8px;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow:
+        0 0 0 1px #fff,
+        0 0 0 3px var(--src-color-border-primary);
+    }
+  }
+}

package/styles/elements/_src-form.scss

@@ -0,0 +1,22 @@
+.src-form {
+  --srcFormRowGap: 16px;
+  --srcFormItemsGap: 12px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--srcFormRowGap);
+}
+
+.src-form__row {
+  display: grid;
+  gap: var(--srcFormItemsGap);
+  grid-template-columns: minmax(0, 1fr);
+
+  &--double {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  &--triple {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}

package/styles/elements/_src-input.scss

@@ -0,0 +1,82 @@
+.src-input {
+  --srcInputFontSize: var(--srcFormElementFontSize);
+  --srcInputLineHeight: var(--srcFormElementLineHeight);
+  --srcInputFontColor: var(--srcFormElementFontColor);
+  --srcInputFieldBg: var(--srcFormElementBg);
+  --srcInputFieldBorderColor: var(--srcFormElementBorderColor);
+  --srcInputHeight: var(--srcFormElementHeight);
+  --srcInputBorderRadius: var(--srcFormElementBorderRadius);
+  --srcInputBoxShadow: var(--srcFormElementBoxShadow);
+  // Focus ring it's a multiple box-shadow
+  --srcInputFocusRing: var(--srcFormElementFocusRing);
+  position: relative;
+
+  height: var(--srcInputHeight);
+  border-radius: var(--srcInputBorderRadius);
+  font-size: var(--srcInputFontSize);
+  line-height: var(--srcInputLineHeight);
+  color: var(--srcInputFontColor);
+  padding: 7px 12px;
+  font-family: var(--src-font-family-sans);
+  font-style: normal;
+  font-weight: var(--src-fw-regular, 400);
+  background-color: var(--srcInputFieldBg);
+  border: 1px solid var(--srcInputFieldBorderColor);
+  box-shadow: var(--srcInputBoxShadow);
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  &[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  // Remove default background for autofilled inputs
+  &:-webkit-autofill,
+  &:-webkit-autofill:focus {
+    transition:
+      background-color 0s 600000s,
+      color 0s 600000s;
+  }
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: var(--srcFormElementFocusRing);
+  }
+
+  &[disabled],
+  &:disabled {
+    --srcInputFieldBg: var(--srcFormElementDisabledBg);
+    --srcInputFieldBorderColor: var(--srcFormElementDisabledBorderColor);
+    --srcInputBoxShadow: none;
+    color: var(--src-color-text-default-disabled);
+
+    pointer-events: none;
+  }
+}
+
+.src-input--compact {
+  --srcInputHeight: 32px;
+  --srcInputFontSize: var(--src-fs-small);
+  --srcInputLineHeight: var(--src-lh-small);
+}
+/* Error State */
+.src-input--has-error {
+  --srcInputFieldBg: var(--src-color-bg-critical-subdued);
+  --srcInputFieldBorderColor: var(--src-color-border-critical-strong);
+}
+
+/* Disabled State */
+.src-input--disabled {
+  --srcInputFieldBg: var(--srcFormElementDisabledBg);
+  --srcInputFieldBorderColor: var(--srcFormElementDisabledBorderColor);
+  --srcInputBoxShadow: none;
+
+  pointer-events: none;
+}

package/styles/elements/_src-label.scss

@@ -0,0 +1,23 @@
+.src-label {
+  --srcLabelFontSize: var(--src-fs-base);
+  --srcLabelLineHeight: var(--src-lh-base);
+  --srcLabelFontWeight: 500;
+  --srcLabelColor: var(--src-color-text-default);
+  --srcLabelMarginBottom: 4px;
+  display: block;
+  font-size: var(--srcLabelFontSize);
+  line-height: var(--srcLabelLineHeight);
+  font-family: var(--src-font-family-sans);
+  font-style: normal;
+  font-weight: var(--srcLabelFontWeight);
+  color: var(--srcLabelColor);
+  margin-bottom: var(--srcLabelMarginBottom);
+}
+
+.src-radio,
+.src-checkbox {
+  .src-label {
+    --srcLabelMarginBottom: 0;
+    --srcLabelFontWeight: 400;
+  }
+}

package/styles/elements/_src-list.scss

@@ -0,0 +1,82 @@
+.src-list {
+  display: block;
+  width: 100%;
+  margin: 0;
+  list-style: none;
+  padding: 8px;
+
+  .src-list__item {
+    display: block;
+    margin-bottom: 4px;
+  }
+
+  &--compact {
+    padding: 0;
+
+    .src-list__item {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// source-list-item.component.scss
+.src-list__item {
+  --srcListItemBgColor: var(--src-color-bg-default);
+  --srcListItemBgHoverColor: var(--src-color-bg-default-hover);
+  --srcListItemBorderRadius: var(--src-br-small);
+  --srcListItemBoxShadow: none;
+  --srcListItemFontColor: var(--src-color-text-default);
+  --srcListItemFontSize: var(--src-fs-base);
+  --srcListItemFontWeight: var(--src-fw-regular, 400);
+  --srcListItemLineHeight: var(--src-lh-base);
+  --srcListItemPaddings: 8px;
+  --srcListItemTextTransform: default;
+  --srcListItemIconColor: var(--src-color-icon-default);
+  position: relative;
+  align-items: flex-start;
+  width: 100%;
+  padding: var(--srcListItemPaddings);
+  font-weight: var(--srcListItemFontWeight);
+  display: inline-flex;
+  font-size: var(--srcListItemFontSize);
+  line-height: var(--srcListItemLineHeight);
+  text-align: left;
+  color: var(--srcListItemFontColor);
+  text-transform: var(--srcListItemTextTransform);
+  letter-spacing: 0;
+  white-space: normal;
+  background-color: var(--srcListItemBgColor);
+  border-radius: var(--srcListItemBorderRadius);
+  cursor: pointer;
+  word-break: break-word;
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover,
+    &:focus-visible {
+      background-color: var(--srcListItemBgHoverColor);
+    }
+  }
+
+  &:disabled,
+  &[disabled],
+  &.disabled,
+  &.src-list__item--disabled {
+    cursor: default;
+    pointer-events: none;
+    --srcListItemFontColor: var(--src-color-text-default-disabled);
+    --srcListItemIconColor: var(--src-color-icon-default-disabled);
+    background-color: var(--src-color-bg-default);
+  }
+}
+
+.src-list__item--selected {
+  --srcListItemBgColor: var(--src-color-bg-default-active);
+  --srcListItemIconColor: var(--src-color-icon-primary);
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover,
+    &:focus-visible {
+      --srcListItemBgHoverColor: var(--src-color-bg-default-active);
+    }
+  }
+}

package/styles/elements/_src-radio.scss

@@ -0,0 +1,49 @@
+.src-radio-group {
+  --srcRadioGroupGap: 6px;
+
+  --srcRadioSize: 20px;
+  --srcRadioBgColor: var(--src-color-bg-default);
+  --srcRadioBorderColor: var(--src-color-border-strong);
+  --srcRadioBorderWidth: 2px;
+  --srcRadioFocusRing: var(--srcFormElementFocusRing);
+  display: flex;
+  flex-direction: column;
+  gap: var(--srcRadioGroupGap);
+
+  &--horizontal {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--srcRadioGroupGap);
+  }
+}
+.src-radio {
+  display: flex;
+  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);
+  }
+
+  &:checked {
+    --srcRadioBorderColor: var(--src-color-bg-primary);
+    box-shadow: inset 0 0 0 3px var(--srcRadioBorderColor);
+  }
+
+  &[disabled] {
+    --srcRadioBorderColor: var(--src-color-border-strong-disabled);
+    // --srcRadioCheckedBgColor: var(--color-text-inverse);
+  }
+}

package/styles/elements/_src-select.scss

@@ -0,0 +1,74 @@
+.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);
+  // Focus ring it's a multiple box-shadow
+  --srcSelectFocusRing: var(--srcFormElementFocusRing);
+
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--srcSelectHeight);
+  border-radius: var(--srcSelectBorderRadius);
+  font-size: var(--srcSelectFontSize);
+  line-height: var(--srcSelectLineHeight);
+  color: var(--srcSelectFontColor);
+  padding: 7px 28px 7px 12px;
+  font-family: var(--src-font-family-sans);
+  font-style: normal;
+  font-weight: var(--src-fw-regular, 400);
+  border: 1px solid var(--srcSelectFieldBorderColor);
+  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);
+
+  &:focus {
+    outline: none;
+    box-shadow: var(--srcSelectFocusRing);
+  }
+
+  &[disabled],
+  &:disabled {
+    --srcSelectFieldBg: var(--srcFormElementDisabledBg);
+    --srcSelectFieldBorderColor: var(--srcFormElementDisabledBorderColor);
+    --srcSelectBoxShadow: none;
+    color: var(--src-color-text-default-disabled);
+
+    pointer-events: none;
+  }
+
+  option {
+    background-color: #fff;
+  }
+}
+
+.src-select--compact {
+  --srcSelectHeight: 32px;
+  --srcSelectFontSize: var(--src-fs-small);
+  --srcSelectLineHeight: var(--src-lh-small);
+}
+/* Error State */
+.src-select--has-error {
+  --srcSelectFieldBg: var(--src-color-bg-critical-subdued);
+  --srcSelectFieldBorderColor: var(--src-color-border-critical-strong);
+}
+
+/* Disabled State */
+.src-select--disabled {
+  --srcSelectFieldBg: var(--srcFormElementDisabledBg);
+  --srcSelectFieldBorderColor: var(--srcFormElementDisabledBorderColor);
+  --srcSelectBoxShadow: none;
+
+  pointer-events: none;
+}

package/styles/elements/_src-textarea.scss

@@ -0,0 +1,70 @@
+.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);
+  // Focus ring it's a multiple box-shadow
+  --srcTextareaFocusRing: var(--srcFormElementFocusRing);
+
+  position: relative;
+
+  width: 100%;
+  min-height: var(--srcTexareaMinHeight);
+
+  display: flex;
+  align-items: center;
+  padding: 7px 12px;
+
+  font-family: var(--src-font-family-sans);
+  font-style: normal;
+  font-weight: var(--src-fw-regular, 400);
+  font-size: var(--srcTexareaFontSize);
+  line-height: var(--srcTexareaLineHeight);
+  color: var(--srcTexareaFontColor);
+
+  border: 1px solid var(--srcTexareaBorderColor);
+  border-radius: var(--srcTexareaBorderRadius);
+  background-color: var(--srcTexareaBg);
+  box-shadow: var(--srcTexareaBoxShadow);
+
+  resize: vertical;
+
+  &:focus {
+    outline: none;
+    box-shadow: var(--srcTextareaFocusRing);
+  }
+
+  &[disabled],
+  &:disabled {
+    --srcTextareaBg: var(--src-color-bg-default-disabled);
+    --srcTextareaBorderColor: var(--src-color-border-strong-disabled);
+    --srcTextareaBoxShadow: none;
+    color: var(--src-color-text-default-disabled);
+
+    pointer-events: none;
+  }
+}
+
+.src-textarea--compact {
+  --srcTexareaMinHeight: 32px;
+  --srcTexareaFontSize: var(--src-fs-small);
+  --srcTexareaLineHeight: var(--src-lh-small);
+}
+/* Error State */
+.src-textarea--has-error {
+  --srcTexareaBg: var(--src-color-bg-critical-subdued);
+  --srcTexareaBorderColor: var(--src-color-border-critical-strong);
+}
+
+/* Disabled State */
+.src-textarea--disabled {
+  --srcTexareaBg: var(--src-color-bg-default-disabled);
+  --srcTexareaBorderColor: var(--src-color-border-strong-disabled);
+  --srcTexareaBoxShadow: none;
+
+  pointer-events: none;
+}

package/styles/elements/elements.scss

@@ -0,0 +1,9 @@
+@use './src-list';
+@use './src-button';
+@use './src-form';
+@use './src-input';
+@use './src-select';
+@use './src-textarea';
+@use './src-label';
+@use './src-checkbox';
+@use './src-radio';

package/styles/fonts.scss

@@ -0,0 +1,18 @@
+// SourceUI Global Styles: fonts.scss
+:root {
+  --src-font-family-sans: 'Inter', sans-serif;
+  --src-font-family-mono: monospace;
+}
+
+/* Set up Inter as variable fonts  */
+@supports (font-variation-settings: normal) {
+  @font-face {
+    font-family: 'Inter';
+    src:
+      url('fonts/Inter-VariableFont_slnt,wght.woff2')
+        format('woff2 supports variations'),
+      url('fonts/Inter-VariableFont_slnt,wght.woff2') format('woff2-variations');
+    font-weight: 100 900;
+    font-stretch: 50% 100%;
+  }
+}

package/styles/source.ui.scss

@@ -0,0 +1,23 @@
+// @use '@angular/material' as mat;
+@use './fonts';
+@use './variables/index';
+@use './base';
+@use './typography';
+@use './utils';
+// Elements: styles for blocks which aren't used as  components: src-list/src-list__item
+@use './elements/elements';
+
+// TODO: remove ALL connections to Angular Material
+// @include mat.elevation-classes();
+// @include mat.app-background();
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  min-height: 100%;
+}

package/styles/typography.scss

@@ -0,0 +1,90 @@
+// SourceUI Global Styles: typography.scss
+.section_3dsourcecom,
+.cdk-overlay-container {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .src-heading-massive,
+  .src-heading-h1,
+  .src-heading-h2,
+  .src-heading-h3,
+  .src-heading-h4,
+  .src-heading-h5,
+  .src-heading-h6 {
+    margin: 0;
+    font-style: normal;
+    font-family: var(--src-font-family-sans);
+    font-weight: var(--src-fw-semibold, 600);
+    // Works only in Chrome and Edge - 11 Jul 2023 - Progressively Enhanced
+    text-wrap: balance;
+  }
+
+  .src-heading-massive {
+    font-size: var(--src-fs-massive);
+    line-height: var(--src-lh-massive);
+    letter-spacing: var(--src-ls-massive);
+  }
+
+  [class^='src-heading'] {
+    letter-spacing: 0;
+  }
+
+  h1,
+  .src-heading-h1 {
+    font-size: var(--src-fs-huge);
+    line-height: var(--src-lh-huge);
+    letter-spacing: var(--src-ls-large);
+  }
+
+  h2,
+  .src-heading-h2 {
+    font-size: var(--src-fs-3xlarge);
+    line-height: var(--src-lh-3xlarge);
+    letter-spacing: var(--src-ls-medium);
+  }
+
+  h3,
+  .src-heading-h3 {
+    font-size: var(--src-fs-2xlarge);
+    line-height: var(--src-lh-2xlarge);
+    letter-spacing: var(--src-ls-small);
+  }
+
+  h4,
+  .src-heading-h4 {
+    font-size: var(--src-fs-xlarge);
+    line-height: var(--src-lh-xlarge);
+  }
+
+  h5,
+  .src-heading-h5 {
+    font-size: var(--src-fs-large);
+    line-height: var(--src-lh-large);
+  }
+
+  h6,
+  .src-heading-h6 {
+    font-size: var(--src-fs-medium);
+    line-height: var(--src-lh-medium);
+  }
+
+  body {
+    font-size: var(--src-fs-base);
+    font-weight: var(--src-fw-regular, 400);
+    line-height: var(--src-lh-base);
+  }
+
+  body p {
+    color: var(--src-color-text-default);
+    font-size: var(--src-fs-base);
+    font-weight: var(--src-fw-regular, 400);
+    line-height: var(--src-lh-base);
+  }
+
+  strong {
+    font-weight: var(--src-fw-medium, 500);
+  }
+}

package/styles/utils.scss

@@ -0,0 +1,40 @@
+// SourceUI Global Styles: utils.scss
+// Use only prefixed classes
+.section_3dsourcecom,
+.cdk-overlay-container {
+  .visuallyhidden:not(:focus):not(:active),
+  .src-visuallyhidden:not(:focus):not(:active) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+
+  .hidden,
+  .src-hidden {
+    display: none !important;
+  }
+
+  .disabled,
+  .src-disabled {
+    pointer-events: none;
+  }
+
+  .keyboard-key {
+    padding: 2px 5px;
+    display: flex;
+    align-items: center;
+    height: 20px;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.2);
+    color: var(--src-colors-gray-color-gray-0, #fff);
+    text-align: center;
+    font-family: var(--src-font-family-sans);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+  }
+}

package/styles/variables/_borders.scss

@@ -0,0 +1,14 @@
+// SourceUI Variables: Borders
+:root {
+  --src-br-4: 4px;
+  --src-br-8: 8px;
+  --src-br-16: 16px;
+  --src-br-24: 24px;
+  --src-br-9999: 9999px;
+  // Aliases
+  --src-br-small: var(--src-br-4);
+  --src-br-medium: var(--src-br-8);
+  --src-br-large: var(--src-br-16);
+  --src-br-xlarge: var(--src-br-24);
+  --src-br-full: var(--src-br-9999);
+}

package/styles/variables/_colors-aliases.scss

@@ -0,0 +1,39 @@
+// SourceUI Variables: Color Aliases
+:root {
+  // Text Colors
+  --src-color-text-default: var(--src-color-gray-800);
+  --src-color-text-default-disabled: var(--src-color-gray-400);
+  --src-color-text-default-subdued: var(--src-color-gray-500);
+  --src-color-text-inverse: var(--src-color-gray-0);
+  --src-color-text-primary: var(--src-color-brand-500);
+  --src-color-text-critical: var(--src-color-red-700);
+  // Background Color Tokens
+  --src-color-bg-default: var(--src-color-gray-0);
+  --src-color-bg-default-subdued: var(--src-color-gray-50);
+  --src-color-bg-default-hover: var(--src-color-gray-100);
+  --src-color-bg-default-disabled: var(--src-color-gray-50);
+  --src-color-bg-default-active: var(--src-color-brand-50);
+  --src-color-bg-primary: var(--src-color-brand-500);
+  --src-color-bg-primary-hover: var(--src-color-brand-700);
+  --src-color-bg-primary-disabled: var(--src-color-gray-200);
+  --src-color-bg-strong-subdued: var(--src-color-gray-100);
+  --src-color-bg-strong-subdued-hover: var(--src-color-gray-200);
+  --src-color-bg-strong: var(--src-color-gray-200);
+  --src-color-bg-strong-disabled: var(--src-color-gray-100);
+  --src-color-bg-critical: var(--src-color-red-600);
+  --src-color-bg-critical-strong: var(--src-color-red-700);
+  --src-color-bg-critical-subdued: var(--src-color-red-50);
+  // Icon Color Tokens
+  --src-color-icon-default: var(--src-color-gray-500);
+  --src-color-icon-default-hover: var(--src-color-gray-600);
+  --src-color-icon-default-disabled: var(--src-color-gray-400);
+  --src-color-icon-primary: var(--src-color-brand-500);
+  --src-color-icon-critical: var(--src-color-red-700);
+  // Border Color Tokens
+  --src-color-border-default: var(--src-color-gray-200);
+  --src-color-border-strong: var(--src-color-gray-400);
+  --src-color-border-strong-hover: var(--src-color-gray-500);
+  --src-color-border-strong-disabled: var(--src-color-gray-300);
+  --src-color-border-primary: var(--src-color-brand-500);
+  --src-color-border-critical-strong: var(--src-color-red-700);
+}

package/styles/variables/_colors.scss

@@ -0,0 +1,64 @@
+// SourceUI Variables: Color Primitives
+:root {
+  // Brand Colors
+  --src-color-brand-700: #0162cc;
+  --src-color-brand-500: #017bff;
+  --src-color-brand-50: #f1f6ff;
+  // Gray Shades
+  --src-color-gray-900: #111827;
+  --src-color-gray-800: #1f2937;
+  --src-color-gray-700: #374151;
+  --src-color-gray-600: #4b5563;
+  --src-color-gray-500: #6b7280;
+  --src-color-gray-400: #abb2be;
+  --src-color-gray-300: #d1d5db;
+  --src-color-gray-200: #e5e7eb;
+  --src-color-gray-100: #f1f2f3;
+  --src-color-gray-100-trnsp: rgba(17, 24, 39, 0.06);
+  --src-color-gray-50: #f9fafb;
+  --src-color-gray-0: #ffffff;
+  // Blue Shades
+  --src-color-blue-900: #10294c;
+  --src-color-blue-800: #0e356c;
+  --src-color-blue-700: #144995;
+  --src-color-blue-600: #2463bc;
+  --src-color-blue-500: #3e7dd5;
+  --src-color-blue-400: #6699e1;
+  --src-color-blue-300: #93baf1;
+  --src-color-blue-200: #bbd4f7;
+  --src-color-blue-100: #e8f0fd;
+  --src-color-blue-50: #f0f5fd;
+  // Red Shades
+  --src-color-red-900: #430e04;
+  --src-color-red-800: #731807;
+  --src-color-red-700: #9f200a;
+  --src-color-red-600: #c5280c;
+  --src-color-red-500: #f24122;
+  --src-color-red-400: #f56b52;
+  --src-color-red-300: #f79482;
+  --src-color-red-200: #fbc5bc;
+  --src-color-red-100: #fde2dd;
+  --src-color-red-50: #fef3f1;
+  // Yellow Shades
+  --src-color-yellow-900: #4d2e05;
+  --src-color-yellow-800: #875c08;
+  --src-color-yellow-700: #b77e0b;
+  --src-color-yellow-600: #d89b0d;
+  --src-color-yellow-500: #f2b322;
+  --src-color-yellow-400: #f5c452;
+  --src-color-yellow-300: #f8d990;
+  --src-color-yellow-200: #fae5b2;
+  --src-color-yellow-100: #fcf0d4;
+  --src-color-yellow-50: #fef8ec;
+  // Green Shades
+  --src-color-green-900: #0c3b2f;
+  --src-color-green-800: #125443;
+  --src-color-green-700: #007a5c;
+  --src-color-green-600: #16a679;
+  --src-color-green-500: #23c48c;
+  --src-color-green-400: #50dca9;
+  --src-color-green-300: #a1edd0;
+  --src-color-green-200: #c0f2dd;
+  --src-color-green-100: #e0f8ee;
+  --src-color-green-50: #f0fdf8;
+}

package/styles/variables/_form-aliases.scss

@@ -0,0 +1,16 @@
+:root {
+  --srcFormElementFontSize: var(--src-fs-base);
+  --srcFormElementLineHeight: var(--src-lh-base);
+  --srcFormElementFontColor: var(--src-color-text-default);
+
+  --srcFormElementBg: var(--src-color-bg-default);
+  --srcFormElementDisabledBg: var(--src-color-bg-default-disabled);
+  --srcFormElementBorderColor: var(--src-color-border-strong);
+  --srcFormElementDisabledBorderColor: var(--src-color-border-strong-disabled);
+  --srcFormElementHeight: 36px;
+  --srcFormElementBorderRadius: var(--src-br-small);
+  --srcFormElementBoxShadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
+  // Focus ring it's a multiple box-shadow
+  --srcFormElementFocusRing:
+    0 0 0 1px #fff, 0 0 0 3px var(--src-color-border-primary);
+}

package/styles/variables/_shadows.scss

@@ -0,0 +1,9 @@
+// SourceUI Variables: Shadows
+:root {
+  --src-shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.05);
+  --src-shadow-large:
+    0px 3px 6px rgba(23, 24, 24, 0.08), 0px 8px 20px rgba(23, 24, 24, 0.12);
+  --src-shadow-large-top: 0px -4px 20px rgba(23, 24, 24, 0.12);
+  --src-shadow-xlarge:
+    0px 0px 1px rgba(0, 0, 0, 0.2), 0px 26px 80px rgba(0, 0, 0, 0.2);
+}

package/styles/variables/_typography.scss

@@ -0,0 +1,32 @@
+// SourceUI Variables: Typography
+:root {
+  --src-fs-small: 12px;
+  --src-fs-base: 14px;
+  --src-fs-medium: 16px;
+  --src-fs-large: 18px;
+  --src-fs-xlarge: 20px;
+  --src-fs-2xlarge: 24px;
+  --src-fs-3xlarge: 28px;
+  --src-fs-huge: 32px;
+  --src-fs-massive: 40px;
+  // Line height
+  --src-lh-small: 16px;
+  --src-lh-base: 20px;
+  --src-lh-medium: 24px;
+  --src-lh-large: 26px;
+  --src-lh-xlarge: 28px;
+  --src-lh-2xlarge: 32px;
+  --src-lh-3xlarge: 36px;
+  --src-lh-huge: 40px;
+  --src-lh-massive: 48px;
+  // Font weight
+  --src-fw-regular: 400;
+  --src-fw-medium: 500;
+  --src-fw-semibold: 600;
+  --src-fw-bold: 700;
+  // Letter spacing
+  --src-ls-small: -0.2px;
+  --src-ls-medium: -0.3px;
+  --src-ls-large: -0.5px;
+  --src-ls-massive: -1px;
+}

package/styles/variables/index.scss

@@ -0,0 +1,6 @@
+@use 'colors';
+@use 'colors-aliases';
+@use 'typography';
+@use 'borders';
+@use 'shadows';
+@use 'form-aliases';