@3dsource/source-ui-native 1.0.2 → 1.0.5

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/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';