@tetacom/ng-components 1.1.1 → 1.1.3

package/style/presets/view-types.scss

@@ -0,0 +1,17 @@
+// Get classes by token type: 'base', 'btn', 'field'
+
+@mixin getView($tokenType) {
+  border-radius: var(--radius-#{$tokenType}-round);
+
+  &_brick {
+    border-radius: var(--radius-#{$tokenType}-brick);
+  }
+
+  &_circle {
+    border-radius: var(--radius-#{$tokenType}-circle)
+  }
+
+  &_rounded {
+    border-radius: var(--radius-#{$tokenType}-round);
+  }
+}

package/style/progress.scss

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

package/style/radio.scss

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

package/style/reset.scss

@@ -26,6 +26,7 @@ textarea {
   font-size: 100%;
   margin: 0;
   background: transparent;
+  color: inherit;
 }
 
 a {

package/style/resize-panel.scss

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

package/style/scroll.scss

@@ -23,16 +23,16 @@
 
 ::-webkit-scrollbar-track:hover {
   &::-webkit-scrollbar-thumb {
-    background-color: getColorVar('primary', '50');
+    background-color: var(--color-primary-50);
     border: 2px solid transparent;
   }
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: getColorVar('text', '10');
+  background-color: var(--color-text-10);
 
   &:hover {
-    background-color: getColorVar('primary', '50');
+    background-color: var(--color-primary-50);
     border: 2px solid transparent;
   }
 }

package/style/select.scss

@@ -1,37 +1,40 @@
 @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: getColorVar('text', 5);
+    background-color: var(--color-text-5);
     border: 0;
-    color: getColorVar('text', 40);
+    color: var(--color-text-40);
   }
 
   &-head {
-    background-color: getColorVar('background', '50');
-    border: solid 1px getColorVar('text', '20');
-    color: getColorVar('text', '90');
-    fill: getColorVar('text', '40');
-    border-radius: 4px;
+    background-color: var(--color-text-5);
+    border: solid 1px var(--color-text-5);
+    color: var(--color-text-90);
+    fill: var(--color-text-40);
     align-items: center;
+    background-clip: padding-box;
     white-space: nowrap;
     padding: 0 8px;
     @include getFont($fonts, 'body-3');
-    transition: border-color 0.4s;
+    transition: border-color 0.4s, background-color 0.4s;
     overflow: hidden;
 
     &_invalid {
-      border-color: getColorVar('red', '50');
+      border-color: var(--color-red-50);
     }
   }
 
@@ -40,14 +43,15 @@
   &:hover:not(&_disabled) {
     #{$p}-head {
       cursor: pointer;
-      border-color: getColorVar('text', '40');
+      background-color: var(--color-text-10);
+      border-color: var(--color-text-10);
     }
   }
 
   &-chip-field {
     margin-top: 8px;
     padding: 4px 12px 0 12px;
-    border-top: solid 1px getColorVar('text', 10);
+    border-top: solid 1px var(--color-text-10);
   }
 
   &-table &-head {
@@ -69,37 +73,38 @@
   }
 
   &:focus:not(&_disabled) &-head, &_open &-head {
-    border-color: getColorVar('primary', '50');
+    border-color: var(--color-primary-50);
   }
 
   &-search {
     display: inline-flex;
     align-items: center;
     flex: 1;
-    padding-bottom: 4px;
+    padding-bottom: 8px;
 
     teta-text-field {
       border: none;
     }
   }
-
-  &-list {
+  &-body {
     margin-top: 2px;
+    padding: 8px 0;
+    @include getFont($fonts, 'body-3');
+    display: inline-flex;
+    flex-direction: column;
+  }
+  &-list {
     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 32px;
+      padding: 0 8px 0 8px;
       white-space: nowrap;
 
-      .icon {
-        fill: getColorVar('primary', 50) !important;
-      }
-
       &_active {
         padding: 0 8px 0 8px;
       }

package/style/shadow.scss

@@ -1,23 +1,3 @@
 @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;
-  @include shadow(5);
+  box-shadow: var(--shadow-5);
 
   &-backdrop {
     position: fixed;

package/style/skeleton.scss

@@ -3,7 +3,7 @@
 .skeleton-pulse {
   height: 100%;
   width: 100%;
-  background: linear-gradient(-90deg, var(--color-text-5) 0%, var(--color-background-50) 50%, var(--color-text-5) 100%);
+  background: linear-gradient(-90deg, var(--color-text-5) 0%, var(--color-global-bgcadr) 50%, var(--color-text-5) 100%);
   background-size: 400% 400%;
   animation: pulse 1.2s ease-in-out infinite;
 

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: getColorVar('background', '50');
-  color: getColorVar('text', '90');
-  fill: getColorVar('text', '90');
+  background: var(--color-text-5);
+  color: var(--color-text-90);
+  fill: var(--color-text-90);
 
   &-button {
     display: inline-flex;
@@ -20,16 +20,21 @@
     &:hover {
       cursor: pointer;
     }
-    &:hover:not(&_active) {
-      background: getColorVar('text', '10');
+
+    &:active:not(&_active) {
+      background: var(--color-text-10);
+    }
+
+    &:hover:not(&_active):not(&:active) {
+      background: var(--color-text-5);
     }
 
     &_active {
       border: solid 0;
-      border-radius: 4px;
-      background: getColorVar('primary', '50');
-      fill: getColorVar('white', '50');
-      color: getColorVar('white', '50');
+      background: var(--color-global-bgcard);
+      fill: var(--color-text-90);
+      color: var(--color-text-90);
     }
   }
 }
+

package/style/table.scss

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

package/style/tabs.scss

@@ -14,33 +14,33 @@
     &-item {
       display: flex;
       align-items: center;
-      padding: 0 20px;
+      padding: 0 16px;
       white-space: nowrap;
-      @include getFont($fonts, 'body-3');
-      color: getColorVar('text', '40');
-      fill: getColorVar('text', '40');
+      @include getFont($fonts, 'button-2');
+      color: var(--color-text-60);
+      fill: var(--color-text-40);
 
       &_disabled, &[disabled] {
-        color: getColorVar('text', '20');
-        fill: getColorVar('text', '20');
+        color: var(--color-text-20);
+        fill: var(--color-text-20);
       }
 
       &:hover:not([disabled]):not(&_disabled) {
         cursor: pointer;
-        color: getColorVar('text', '70');
-        fill: getColorVar('text', '70');
+        color: var(--color-text-70);
+        fill: var(--color-text-70);
       }
 
       &_active {
         position: relative;
-        color: getColorVar('text', '90');
-        fill: getColorVar('text', '70');
+        color: var(--color-text-90);
+        fill: var(--color-text-70);
 
         &::after {
           content: '';
           position: absolute;
           height: 2px;
-          background-color: getColorVar('primary', '50');
+          background-color: var(--color-primary-50);
           border: solid 0 transparent;
           left: 0;
           right: 0;

package/style/tag.scss

@@ -0,0 +1,37 @@
+@import "./util/font-util.scss";
+@import "presets/view-types.scss";
+
+.tag{
+  display: inline-flex;
+  padding: 2px 2px 2px 10px;
+  @include getFont($fonts, 'caption');
+  border-color: var(--color-text-5);
+  border-radius: 14px;
+  gap: 4px;
+  border-style: solid;
+  border-width: 1px;
+  fill: var(--color-text-50);
+  color: var(--color-text-90);
+  transition: border-color 0.4s, background-color 0.4s;
+  @include getView('base');
+  &_filled {
+    background-color: var(--color-text-5);
+    border-color: transparent;
+    &:hover:not(:active){
+      background-color: var(--color-text-10);
+      fill: var(--color-text-60);
+    }
+    &:active{
+      background-color: var(--color-text-20);
+      fill: var(--color-text-70);
+    }
+  }
+  &:hover:not(:active):not(&_filled){
+    border-color: var(--color-text-10);
+    fill: var(--color-text-60);
+  }
+  &:active:not(&_filled){
+    border-color: var(--color-text-20);
+    fill: var(--color-text-70);
+  }
+}

package/style/toggle.scss

@@ -8,28 +8,30 @@
   flex-grow: 1;
 
   &_disabled &-button {
-    background: getColorVar('text', '5') !important;
+    background: var(--color-text-5) !important;
+  }
+
+  &:focus-within &-button {
+    box-shadow: 0 0 0 4px var(--color-primary-5);
   }
 
   &-button {
     position: relative;
-    width: 24px;
+    width: 28px;
     height: 16px;
-    border: none;
+    border: 0;
     border-radius: 10px;
-    background: getColorVar('text', 5);
-    box-shadow: inset 0 0 0 1px getColorVar('text', 20);
+    background: var(--color-text-20);
 
     &-circle {
       position: absolute;
-      top: 4px;
-      left: 4px;
-      width: 8px;
-      height: 8px;
-      border: none;
-      border-radius: 4px;
-      background: getColorVar('white', 50);
-      box-shadow: 0 0 0 1px getColorVar('text', 20);
+      top: calc(50% - 12px/2);
+      left: 2px;
+      width: 12px;
+      height: 12px;
+      border: 0;
+      border-radius: 6px;
+      background: var(--color-global-white);
     }
 
     $button: &;
@@ -39,16 +41,16 @@
       box-shadow: none;
       #{$button}-circle {
         left: unset;
-        right: 4px;
+        right: 2px;
         box-shadow: none;
       }
 
-      @each $paletteName in $palettes {
+      @each $paletteName, $palette in map-get($themes, nth(map-keys($themes), 1)) {
         &#{$button}-#{$paletteName} {
           background: getColorVar($paletteName, '50');
 
-          &:hover:not(.toggle_disabled) {
-            background: getColorVar($paletteName, '40');
+          &:hover:not(.toggle_disabled):not(:active) {
+            background: getColorVar($paletteName, '60');
           }
 
           &:active {
@@ -60,7 +62,7 @@
   }
 
   &:not(&_disabled):hover &-button:not(.toggle-button-on) {
-    background: getColorVar('text', 10);
+    background: var(--color-text-30);
   }
 
   &:hover:not(&_disabled) {

package/style/toolbar.scss

@@ -12,7 +12,7 @@
   padding: 0 12px;
   @include getFont($fonts, 'title-2');
 
-  @each $paletteName in $palettes {
+  @each $paletteName, $palette in map-get($themes, nth(map-keys($themes), 1)) {
     &.toolbar-#{$paletteName} {
       background-color: getColorVar($paletteName, '50');
     }

package/style/tooltip.scss

@@ -1,5 +1,6 @@
 @import "util/shadow-util.scss";
 @import "util/color-util.scss";
+@import "presets/view-types.scss";
 
 .tooltip {
   @include shadow(1);
@@ -7,8 +8,9 @@
   padding: 12px;
   white-space: nowrap;
   z-index: 1;
-  background-color: getColorVar('white', '50');
-  color: getColorVar('text', '50');
+  background-color: var(--color-global-white);
+  color: var(--color-text-50);
+  @include getView('base');
 
   &::before, &::after {
     position: absolute;
@@ -25,7 +27,7 @@
       transform: translate(-50%, 0);
       border-left: 12px solid transparent;
       border-right: 12px solid transparent;
-      border-top: 12px solid getColorVar('white', '50');
+      border-top: 12px solid var(--color-global-white);
     }
 
     &::after {
@@ -34,7 +36,7 @@
       transform: translate(-50%, 0);
       border-left: 12px solid transparent;
       border-right: 12px solid transparent;
-      border-top: 12px solid getColorVar('white', '50');
+      border-top: 12px solid var(--color-global-white);
     }
   }
 
@@ -45,7 +47,7 @@
       transform: translate(-50%, 0);
       border-left: 12px solid transparent;
       border-right: 12px solid transparent;
-      border-bottom: 12px solid getColorVar('white', '50');
+      border-bottom: 12px solid var(--color-global-white);
     }
 
     &::after {
@@ -54,7 +56,7 @@
       transform: translate(-50%, 0);
       border-left: 12px solid transparent;
       border-right: 12px solid transparent;
-      border-bottom: 12px solid getColorVar('white', '50');
+      border-bottom: 12px solid var(--color-global-white);
     }
   }
 }