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

package/src/lib/styles/elements/_src-list.scss

@@ -1,82 +0,0 @@
-.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/src/lib/styles/elements/_src-select.scss

@@ -1,71 +0,0 @@
-.src-select {
-  --srcSelectFontSize: var(--src-fs-base);
-  --srcSelectLineHeight: var(--src-lh-base);
-  --srcSelectFontColor: var(--src-color-text-default);
-  --srcSelectFieldBg: var(--src-color-bg-default);
-  --srcSelectFieldBorderColor: var(--src-color-border-strong);
-  --srcSelectHeight: 36px;
-  --srcSelectBorderRadius: var(--src-br-small);
-  --srcSelectBoxShadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-  // Focus ring it's a multiple box-shadow
-  --srcSelectFocusRing:
-    0 0 0 1px #fff, 0 0 0 3px var(--src-color-border-primary);
-
-  -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(--src-color-bg-default-disabled);
-    --srcSelectFieldBorderColor: var(--src-color-border-strong-disabled);
-    --srcSelectBoxShadow: none;
-    color: var(--src-color-text-default-disabled);
-
-    pointer-events: none;
-  }
-}
-
-.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(--src-color-bg-default-disabled);
-  --srcSelectFieldBorderColor: var(--src-color-border-strong-disabled);
-  --srcSelectBoxShadow: none;
-
-  pointer-events: none;
-}

package/src/lib/styles/elements/elements.scss

@@ -1,4 +0,0 @@
-@use './src-list';
-@use './src-button';
-@use './src-input';
-@use './src-select';

package/src/lib/styles/fonts.scss

@@ -1,18 +0,0 @@
-// 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/src/lib/styles/source.ui.scss

@@ -1,23 +0,0 @@
-// @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/src/lib/styles/typography.scss

@@ -1,90 +0,0 @@
-// 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/src/lib/styles/utils.scss

@@ -1,40 +0,0 @@
-// 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/src/lib/styles/variables/_borders.scss

@@ -1,14 +0,0 @@
-// 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/src/lib/styles/variables/_colors-aliases.scss

@@ -1,39 +0,0 @@
-// 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/src/lib/styles/variables/_colors.scss

@@ -1,64 +0,0 @@
-// 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/src/lib/styles/variables/_shadows.scss

@@ -1,9 +0,0 @@
-// 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/src/lib/styles/variables/_typography.scss

@@ -1,32 +0,0 @@
-// 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/src/lib/styles/variables/index.scss

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

package/tsconfig.lib.json

@@ -1,13 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": ["**/*.spec.ts"]
-}

package/tsconfig.lib.prod.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}