@tetacom/ng-components 1.0.151 → 1.1.0

package/style/presets/font-presets.scss

@@ -1,7 +1,7 @@
 $fonts: (
   h-1: (
     font-size:92px,
-    font-family:"Inter",
+    font-family:"Open Sans",
     font-weight:600,
     font-style:normal,
     letter-spacing:0.15px,
@@ -9,7 +9,7 @@ $fonts: (
   ),
   h-2: (
     font-size:60px,
-    font-family:"Inter",
+    font-family:"Open Sans",
     font-weight:600,
     font-style:normal,
     letter-spacing:0.15px,
@@ -17,7 +17,7 @@ $fonts: (
   ),
   h-3: (
     font-size:48px,
-    font-family:"Inter",
+    font-family:"Open Sans",
     font-weight:600,
     font-style:normal,
     letter-spacing:0.15px,
@@ -25,7 +25,7 @@ $fonts: (
   ),
   h-4: (
     font-size:35px,
-    font-family:"Inter",
+    font-family:"Open Sans",
     font-weight:600,
     font-style:normal,
     line-height:44px,
@@ -34,16 +34,15 @@ $fonts: (
   ),
   h-5: (
     font-size:28px,
-    font-family:"Inter",
-    font-weight:500,
+    font-family:"Open Sans",
+    font-weight:600,
     font-style:normal,
-    line-height: 34px,
     letter-spacing:0.15px,
     text-decoration:none
   ),
   h-6: (
     font-size:20px,
-    font-family:"Inter",
+    font-family:"Open Sans",
     font-weight:600,
     font-style:normal,
     letter-spacing:0.15px,
@@ -51,8 +50,8 @@ $fonts: (
   ),
   title-1: (
     font-size:16px,
-    font-family:"Inter",
-    font-weight:500,
+    font-family:"Open Sans",
+    font-weight:600,
     font-style:normal,
     line-height:24px,
     letter-spacing:0.0015em,
@@ -60,23 +59,23 @@ $fonts: (
   ),
   title-2: (
     font-size:14px,
-    font-family:"Inter",
-    font-weight:500,
+    font-family:"Open Sans",
+    font-weight:600,
     font-style:normal,
-    line-height:20px,
+    line-height:16px,
     text-decoration:none
   ),
   title-3: (
     font-size:12px,
-    font-family:"Inter",
-    font-weight:500,
+    font-family:"Open Sans",
+    font-weight:600,
     font-style:normal,
     line-height:16px,
     text-decoration:none
   ),
   body-1: (
     font-size:16px,
-    font-family:"Inter",
+    font-family:"Open Sans",
     font-weight:normal,
     font-style:normal,
     line-height:24px,
@@ -84,15 +83,15 @@ $fonts: (
   ),
   body-2: (
     font-size:14px,
-    font-family:"Inter",
-    font-weight:500,
+    font-family:"Open Sans",
+    font-weight:normal,
     font-style:normal,
     line-height:16px,
     text-decoration:none
   ),
   body-3: (
     font-size:12px,
-    font-family:"Inter",
+    font-family:"Open Sans",
     font-weight:normal,
     font-style:normal,
     line-height:16px,
@@ -100,7 +99,7 @@ $fonts: (
   ),
   button-1: (
     font-size:13px,
-    font-family:"Inter",
+    font-family:"Open Sans",
     font-weight:600,
     font-style:normal,
     line-height:20px,
@@ -108,15 +107,15 @@ $fonts: (
   ),
   button-2: (
     font-size:11px,
-    font-family:"Inter",
-    font-weight:500,
+    font-family:"Open Sans",
+    font-weight:600,
     font-style:normal,
     line-height:16px,
     text-decoration:none
   ),
   button-3: (
     font-size:10px,
-    font-family:"Inter",
+    font-family:"Open Sans",
     font-weight:600,
     font-style:normal,
     line-height:14px,
@@ -124,7 +123,7 @@ $fonts: (
   ),
   caption: (
     font-size:11px,
-    font-family:"Inter",
+    font-family:"Open Sans",
     font-weight:normal,
     font-style:normal,
     line-height:16px,
@@ -132,7 +131,7 @@ $fonts: (
   ),
   table-header: (
     font-size:11px,
-    font-family:"Inter",
+    font-family:"Open Sans",
     font-weight:600,
     font-style:normal,
     line-height:12px,
@@ -140,7 +139,7 @@ $fonts: (
   ),
   overline: (
     font-size:10px,
-    font-family:"Inter",
+    font-family:"Open Sans",
     font-weight:600,
     font-style:normal,
     line-height:12px,

package/style/presets/shadow-presets.scss

@@ -0,0 +1,16 @@
+$shadows: (
+  'default': (
+    '1': 0px 1px 0px #DAE0EB,
+    '2': 0px 14px 18px 0px rgba(0, 0, 0, 0.06),
+    '3': 0px 8px 16px rgba(39, 39, 39, 0.26),
+    '4': 0px 12px 24px rgba(39, 39, 39, 0.26),
+    '5': 0px 16px 32px rgba(39, 39, 39, 0.26),
+  ),
+  'dark': (
+    '1': 0px 1px 0px rgba(11, 11, 12, 1),
+    '2': 0px 14px 18px rgba(0, 0, 0, 0.3),
+    '3': 0px 8px 16px rgba(0, 0, 0, 0.400),
+    '4': 0px 12px 24px rgba(0, 0, 0, 0.400),
+    '5': 0px 16px 32px rgba(0, 0, 0, 0.400),
+  )
+);

package/style/progress.scss

@@ -4,11 +4,11 @@
   width: 100%;
   height: 4px;
   display: flex;
-  background: var(--color-text-10);
+  background: getColorVar('text', '10');
   position: relative;
 
   &-bar {
-    background: var(--color-primary-50);
+    background: getColorVar('primary', '50');
   }
 
   &-slider {
@@ -19,7 +19,7 @@
     margin-left: -6px;
     margin-top: -4px;
     border-radius: 6px;
-    background: var(--color-primary-50);
+    background: getColorVar('primary', '50');
   }
 
   &:hover &-slider, &-slider_visible {

package/style/radio.scss

@@ -12,10 +12,9 @@
     align-items: center;
     @include getFont($fonts, 'body-3');
 
-
     &_disabled {
       filter: grayscale(50%);
-      color: var(--color-text-40);
+      color: getColorVar('text', '40');
     }
 
     &-icon {
@@ -24,21 +23,13 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      border: solid 1px getColorVar('primary', '50');
       border-radius: 8px;
-      background: var(--color-global-bgcard);
-      border: 1px solid var(--color-primary-50)
-    }
-
-    &-icon:has(&-small-icon) {
-      background: var(--color-primary-50);
-      border: 0;
     }
 
     &_disabled &-icon {
-      background-color: var(--color-text-5);
-      color: var(--color-text-40);
-      border: solid 1px var(--color-text-30);
-
+      background-color: getColorVar('text', '5');
+      color: getColorVar('text', '40');
     }
 
     &-small-icon {
@@ -49,11 +40,11 @@
       justify-content: center;
       border: solid 0 transparent;
       border-radius: 4px;
-      background-color: var(--color-global-white);
+      background-color: getColorVar('primary', '50');
     }
 
     &_disabled &-small-icon {
-      background-color: var(--color-text-30);
+      background-color: getColorVar('text', '30');
     }
 
     &:hover:not(&_disabled) {
@@ -61,12 +52,7 @@
     }
 
     &:hover:not(&_disabled) &-icon {
-      background: var(--color-primary-5);
-      border-color: var(--color-primary-60);
-    }
-
-    &:hover:not(&_disabled) &-icon:has(&-small-icon) {
-      background: var(--color-primary-60);
+      background: getColorVar('text', '5');
     }
   }
 }

package/style/resize-panel.scss

@@ -10,11 +10,11 @@
     align-items: center;
     justify-content: center;
     position: absolute;
-    fill: var(--color-text-20);
+    fill: getColorVar('text', '20');
     z-index: 10;
 
     &_active, &:hover {
-      fill: var(--color-text-90);
+      fill: getColorVar('text', '90');
     }
 
     &_left, &_right, &_vertical {

package/style/scroll.scss

@@ -1,5 +1,4 @@
 @import "util/color-util.scss";
-@import "util/scroll-util.scss";
 
 ::-webkit-scrollbar-button {
   width: 4px;
@@ -15,7 +14,6 @@
 ::-webkit-scrollbar-track,
 ::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
-  //border-radius: 4px;
   background-clip: padding-box;
 }
 
@@ -25,20 +23,17 @@
 
 ::-webkit-scrollbar-track:hover {
   &::-webkit-scrollbar-thumb {
-    background-color: var(--color-primary-50);
+    background-color: getColorVar('primary', '50');
     border: 2px solid transparent;
-    //border-radius: 4px;
   }
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--color-text-10);
-  //border-radius: 4px;
+  background-color: getColorVar('text', '10');
 
   &:hover {
-    background-color: var(--color-primary-50);
+    background-color: getColorVar('primary', '50');
     border: 2px solid transparent;
-    //border-radius: 4px;
   }
 }
 
@@ -47,14 +42,23 @@
 }
 
 .scrollable {
-  @include scrollable();
-  &:hover::-webkit-scrollbar {
-    display: block;
-    opacity: 1;
-  }
-  &::-webkit-scrollbar {
-    display: none;
-    opacity: 0;
-    transition: visibility 0s, opacity 0.5s linear;
+  overflow: hidden;
+  position: relative;
+
+  &_hide_scroll::-webkit-scrollbar {
+    width: 0;
+    height: 0;
   }
+
+  //&:hover::-webkit-scrollbar:horizontal {
+  //  height: 0;
+  //  display: block;
+  //  opacity: 1;
+  //}
+  //
+  //&::-webkit-scrollbar {
+  //  display: none;
+  //  opacity: 0;
+  //  transition: visibility 0s, opacity 0.5s linear;
+  //}
 }

package/style/select.scss

@@ -1,40 +1,37 @@
 @import "util/color-util.scss";
 @import "util/font-util.scss";
-@import "presets/view-types.scss";
 
 .select {
   display: inline-flex;
   height: 28px;
   width: 100%;
 
-  @include getView('field');
-
   &_multiple {
     min-height: 28px;
     height: unset;
   }
 
   &_disabled &-head {
-    background-color: var(--color-text-5);
+    background-color: getColorVar('text', 5);
     border: 0;
-    color: var(--color-text-40);
+    color: getColorVar('text', 40);
   }
 
   &-head {
-    background-color: var(--color-text-5);
-    border: solid 1px var(--color-text-5);
-    color: var(--color-text-90);
-    fill: var(--color-text-40);
+    background-color: getColorVar('background', '50');
+    border: solid 1px getColorVar('text', '20');
+    color: getColorVar('text', '90');
+    fill: getColorVar('text', '40');
+    border-radius: 4px;
     align-items: center;
-    background-clip: padding-box;
     white-space: nowrap;
     padding: 0 8px;
     @include getFont($fonts, 'body-3');
-    transition: border-color 0.4s, background-color 0.4s;
+    transition: border-color 0.4s;
     overflow: hidden;
 
     &_invalid {
-      border-color: var(--color-red-50);
+      border-color: getColorVar('red', '50');
     }
   }
 
@@ -43,15 +40,14 @@
   &:hover:not(&_disabled) {
     #{$p}-head {
       cursor: pointer;
-      background-color: var(--color-text-10);
-      border-color: var(--color-text-10);
+      border-color: getColorVar('text', '40');
     }
   }
 
   &-chip-field {
     margin-top: 8px;
     padding: 4px 12px 0 12px;
-    border-top: solid 1px var(--color-text-10);
+    border-top: solid 1px getColorVar('text', 10);
   }
 
   &-table &-head {
@@ -73,38 +69,37 @@
   }
 
   &:focus:not(&_disabled) &-head, &_open &-head {
-    border-color: var(--color-primary-50);
+    border-color: getColorVar('primary', '50');
   }
 
   &-search {
     display: inline-flex;
     align-items: center;
     flex: 1;
-    padding-bottom: 8px;
+    padding-bottom: 4px;
 
     teta-text-field {
       border: none;
     }
   }
-  &-body {
-    margin-top: 2px;
-    padding: 8px 0;
-    @include getFont($fonts, 'body-3');
-    display: inline-flex;
-    flex-direction: column;
-  }
+
   &-list {
+    margin-top: 2px;
     padding: 8px 0;
     display: inline-flex;
     flex-direction: column;
     //border-radius: 2px;
     //background-color: getColorVar('background', '50');
-
+    @include getFont($fonts, 'body-3');
 
     &-item {
-      padding: 0 8px 0 8px;
+      padding: 0 8px 0 32px;
       white-space: nowrap;
 
+      .icon {
+        fill: getColorVar('primary', 50) !important;
+      }
+
       &_active {
         padding: 0 8px 0 8px;
       }

package/style/shadow.scss

@@ -1,3 +1,23 @@
 @use "sass:map";
 @use "sass:list";
 @import "util/shadow-util.scss";
+
+body {
+  @each $shadowName, $shadow in map.get($shadows, "default") {
+    --shadow-#{$shadowName}: #{$shadow};
+  }
+}
+
+@each $themeName, $theme in $shadows {
+  .theme-#{$themeName} {
+    @each $shadowName, $shadow in $theme {
+      --shadow-#{$shadowName}: #{$shadow};
+    }
+  }
+}
+
+@for $i from 1 through 5 {
+  .shadow-#{$i} {
+    @include shadow($i);
+  }
+}

package/style/sidebar.scss

@@ -3,7 +3,7 @@
 
 .sidebar {
   position: fixed;
-  box-shadow: var(--shadow-5);
+  @include shadow(5);
 
   &-backdrop {
     position: fixed;

package/style/switch.scss

@@ -4,12 +4,12 @@
 .switch {
   display: inline-flex;
   border: solid 0;
+  border-radius: 4px;
   height: 28px;
-  padding: 2px;
   @include getFont($fonts, 'button-2');
-  background: var(--color-text-5);
-  color: var(--color-text-90);
-  fill: var(--color-text-90);
+  background: getColorVar('background', '50');
+  color: getColorVar('text', '90');
+  fill: getColorVar('text', '90');
 
   &-button {
     display: inline-flex;
@@ -20,21 +20,16 @@
     &:hover {
       cursor: pointer;
     }
-
-    &:active:not(&_active) {
-      background: var(--color-text-10);
-    }
-
-    &:hover:not(&_active):not(&:active) {
-      background: var(--color-text-5);
+    &:hover:not(&_active) {
+      background: getColorVar('text', '10');
     }
 
     &_active {
       border: solid 0;
-      background: var(--color-global-bgcard);
-      fill: var(--color-text-90);
-      color: var(--color-text-90);
+      border-radius: 4px;
+      background: getColorVar('primary', '50');
+      fill: getColorVar('white', '50');
+      color: getColorVar('white', '50');
     }
   }
 }
-

package/style/table.scss

@@ -1,6 +1,5 @@
 @import "util/color-util.scss";
 @import "util/font-util.scss";
-@import "util/scroll-util.scss";
 
 .table {
   display: flex;
@@ -8,16 +7,16 @@
   flex-grow: 1;
   min-height: 0;
   min-width: 0;
-  color: var(--color-text-90);
-  background-color: var(--color-global-bgcard);
+  color: getColorVar('text', '90');
+  background-color: getColorVar('background', '50');
   @include getFont($fonts, 'body-3');
 
   &-head {
     display: flex;
     overflow: hidden;
     flex-shrink: 0;
-    background-color: var(--color-text-10);
-    color: var(--color-text-90);
+    background-color: getColorVar('text', '10');
+    color: getColorVar('text', '90');
     @include getFont($fonts, 'table-header');
 
     &_locked {
@@ -27,7 +26,7 @@
       left: 0;
       z-index: 1;
       background-color: inherit;
-      border-right: solid 1px var(--color-text-30);
+      border-right: solid 1px getColorVar('text', '30');
     }
 
     &__group {
@@ -85,7 +84,7 @@
       }
 
       &:hover, &_active {
-        background: var(--color-text-20);
+        background: getColorVar('text', 20);
       }
 
       &:hover &__menu, &__menu_open {
@@ -125,7 +124,7 @@
         padding: 0 4px;
 
         &_drag {
-          background: var(--color-primary-50);
+          background: getColorVar('primary', '50');
           width: 2px;
           height: 100%;
           display: none;
@@ -163,17 +162,16 @@
 
     &-container {
       flex-grow: 1;
-      @include scrollable();
     }
   }
 
   &-row {
     display: flex;
     flex-shrink: 0;
-    background-color: var(--color-global-bgcard);
+    background-color: getColorVar('background', '50');
 
     &:hover {
-      background-color: var(--color-primary-5);
+      background-color: getColorVar('primary', '5');
     }
 
     &_locked {
@@ -182,16 +180,16 @@
       background-color: inherit;
       position: sticky;
       left: 0;
-      border-right: solid 1px var(--color-text-30);
+      border-right: solid 1px getColorVar('text', '30');
       z-index: 1;
     }
 
     &_odd {
-      background-color: var(--color-global-bgmain);
+      background-color: getColorVar('background', '0');
     }
 
     &_selected, &_selected:hover {
-      background-color: var(--color-primary-10);
+      background-color: getColorVar('primary', '10');
     }
   }
 }
@@ -206,7 +204,7 @@
   overflow: hidden;
 
   &:focus {
-    box-shadow: inset 0 0 0 1px var(--color-primary-50);
+    box-shadow: inset 0 0 0 1px getColorVar('primary', '50');
   }
 
   &-component {
@@ -229,11 +227,11 @@
     }
 
     &_disabled {
-      color: var(--color-text-50);
+      color: getColorVar('text', 50);
     }
   }
 
   &:hover {
-    background: var(--color-primary-10);
+    background: getColorVar('primary', 10);
   }
 }