@tetacom/ng-components 1.0.148 → 1.0.150

package/style/input.scss

@@ -1,5 +1,6 @@
 @import "util/color-util.scss";
 @import "util/font-util.scss";
+@import "presets/view-types.scss";
 
 .form-container {
   display: flex;
@@ -30,10 +31,10 @@
 
 .text-field, .input, .textarea {
   padding: 6px 8px;
-  border: solid 1px getColorVar('text', '20');
-  border-radius: 4px;
-  background-color: getColorVar('background', '50');
-  color: getColorVar('text', 90);
+  border: solid 1px var(--color-text-5);
+  background-color: var(--color-text-5);
+  background-clip:padding-box;
+  color: var(--color-text-90);
   @include getFont($fonts, 'body-3');
   display: flex;
   flex-direction: row;
@@ -41,53 +42,61 @@
   grid-gap: 4px;
   width: 100%;
   min-width: 0;
-  transition: border-color 0.4s;
+  transition: border-color 0.4s, background-color 0.4s;
+
+  @include getView('field');
+
 
   &_invalid {
-    border-color: getColorVar('red', '50');
+    border-color: var(--color-red-50);
   }
 
   &_required::after {
     margin-left: 4px;
     content: '*';
-    color: getColorVar('red', '50');
+    color: var(--color-red-50);
   }
 
   &::placeholder {
-    color: getColorVar('text', '40');
+    color: var(--color-text-40);
   }
 
   &:focus-within, &:focus {
-    border-color: getColorVar('primary', '50');
+    border-color: var(--color-primary-50);
   }
 
   &:focus-within {
     &::placeholder {
-      color: getColorVar('text', '20');
+      color: var(--color-text-20);
     }
 
     input::placeholder {
-      color: getColorVar('text', '20');
+      color: var(--color-text-20);
     }
   }
 
   &:disabled, &[disabled], &_disabled {
     border: 0;
-    background: getColorVar('text', '5');
-    color: getColorVar('text', '40');
+    background: var(--color-text-5);
+    color: var(--color-text-40);
   }
 
   &:hover:not([disabled]):not(&_disabled):not(:focus-within) {
-    border-color: getColorVar('text', '40');
+    border-color: var(--color-text-10);
+    background-color: var(--color-text-10);
   }
 
   .close-icon {
     display: none;
-    position: absolute;
     right: 4px;
+
+    &:hover {
+      cursor: pointer;
+      display: flex;
+    }
   }
 
-  &:hover:not([disabled]):not(&_disabled), &:focus-within {
+  &:focus-within {
     .close-icon {
       display: flex;
     }
@@ -102,13 +111,13 @@
   position: relative;
 
   input {
-    color: getColorVar('text', 90);
+    color: var(--color-text-90);
     border-width: 0;
     width: 100%;
   }
 
   teta-icon {
-    fill: getColorVar('text', 40);
+    fill: var(--color-text-40);
   }
 }
 
@@ -121,8 +130,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: getColorVar('background', '50');
-  border: dashed 1px getColorVar('text', '10');
+  background: var(--color-global-bgcard);
+  border: dashed 1px var(--color-text-10);
   border-radius: 4px;
   transition: background 0.4s;
   grid-gap: 8px;
@@ -139,7 +148,7 @@
   }
 
   &_active {
-    background-color: getColorVar('text', '10');
+    background-color: var(--color-text-10);
   }
 }
 
@@ -148,7 +157,7 @@
   display: flex;
   align-items: center;
   grid-gap: 8px;
-  color: getColorVar('text', '50');
+  color: var(--color-text-50);
 
   &-text {
     flex-shrink: 0;
@@ -158,6 +167,6 @@
   &-line {
     flex-grow: 1;
     height: 1px;
-    background: getColorVar('text', '50');
+    background: var(--color-text-50);
   }
 }

package/style/layout.scss

@@ -6,7 +6,7 @@
 }
 
 body {
-  color: getColorVar('text', '90');
+  color: var(--color-text-90);
 }
 
 .app {
@@ -37,6 +37,10 @@ body {
     }
   }
 }
+ .row-reverse{
+   display: flex;
+   flex-direction: row-reverse;
+ }
 
 .column {
   display: flex;
@@ -134,5 +138,5 @@ body {
   border: solid 0;
   border-radius: 4px;
   overflow: hidden;
-  background: getColorVar('background', 50);
+  background: var(--color-global-bgcard)
 }

package/style/list.scss

@@ -5,9 +5,9 @@
   padding: 8px 0;
   display: inline-flex;
   flex-direction: column;
-  border-radius: 4px;
-  color: getColorVar('text', '90');
-  background-color: getColorVar('background', '50');
+  border-radius: 8px;
+  color: var(--color-text-90);
+  background-color: var(--color-global-bgcard);
   @include getFont($fonts, 'body-3');
   position: relative;
 
@@ -28,7 +28,7 @@
     }
 
     &_disabled {
-      color: getColorVar('text', '20');
+      color: var(--color-text-20);
       pointer-events: none;
     }
 
@@ -37,13 +37,16 @@
       transition: background 0.4s;
 
       &:hover:not(&_disabled) {
-        background-color: getColorVar('text', '5');
+        background-color: var(--color-text-5);
         cursor: pointer;
       }
+      &:active:not(&_disabled) {
+        background-color: var(--color-text-10);
+      }
     }
 
     &_interactive#{&}_active {
-      background-color: getColorVar('text', '10');
+      background-color: var(--color-text-10);
     }
 
     &:hover > .sublist {
@@ -55,11 +58,11 @@
     height: 1px;
     flex-shrink: 0;
     margin: 8px 0;
-    background-color: getColorVar('text', '10');
+    background-color: var(--color-text-10);
   }
 
   &-title {
-    color: getColorVar('text', '50');
+    color: var(--color-text-50);
     @include getFont($fonts, 'overline');
   }
 }

package/style/loader.scss

@@ -16,13 +16,13 @@
     width: 50px;
     height: 50px;
     border-radius: 50%;
-    border: 5px solid getColorVar('primary', '50');
+    border: 5px solid var(--color-primary-50);
     border-top-color: transparent;
     animation: spinner 1.5s linear infinite;
   }
 
   &-mask {
-    background: getColorVar('background', '50');
+    background: var(--color-global-bgcard);
     opacity: 0.2;
     position: absolute;
     top: 0;

package/style/message.scss

@@ -1,18 +1,26 @@
 @import "util/shadow-util.scss";
 
 .message {
-  @include shadow(5);
+  position: relative;
+  box-shadow: var(--shadow-2);
   display: inline-flex;
   flex-direction: column;
   padding: 8px;
   margin: 8px;
   border: solid 0;
-  border-radius: 4px;
-  color: getColorVar('white', '50');
-  width: 240px;
-  @each $paletteName in $palettes {
-    &-#{$paletteName} {
-      background-color: getColorVar($paletteName, '50');
+  width: 320px;
+  background: var(--color-global-bgcard);
+  color: var(--color-text-90);
+
+  @each $paletteName, $palette in map-get($themes, nth(map-keys($themes), 1)) {
+    &-#{$paletteName}::before {
+      background: getColorVar($paletteName, '50');
+      content: " ";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 4px;
+      height: 100%;
     }
   }
 }

package/style/modal.scss

@@ -19,8 +19,9 @@
   }
 
   &__container {
-    @include shadow(5);
-    background-color: getColorVar('background', '50');
+    min-width: 300px;
+    box-shadow: var(--shadow-5);;
+    background-color: var(--color-global-bgcard);
     border: solid 0;
     border-radius: 4px;
 

package/style/navigation.scss

@@ -1,5 +1,6 @@
 @import "util/color-util.scss";
 @import "util/font-util.scss";
+@import "presets/view-types.scss";
 
 .navigation {
   &-item {
@@ -11,7 +12,9 @@
     @include getFont($fonts, 'title-3');
   }
 
-  @each $paletteName in $palettes {
+  @include getView('base');
+
+  @each $paletteName, $palette in map-get($themes, nth(map-keys($themes), 1)) {
     &-#{$paletteName} {
       background: getColorVar($paletteName, '50');
     }

package/style/presets/color-presets.scss

@@ -1,161 +1,9 @@
-$themes: (
-  'default': (
-    'text': (
-      '90': rgba(33, 36, 42),
-      '80': rgba(55, 58, 64),
-      '70': rgba(77, 80, 86),
-      '60': rgba(105, 107, 113),
-      '50': rgba(140, 142, 148),
-      '40': rgba(173, 175, 181),
-      '30': rgba(204, 206, 213),
-      '20': rgba(221, 223, 230),
-      '10': rgba(230, 232, 239),
-      '5': rgba(232, 234, 241),
-    ),
-    'primary': (
-      '90': rgba(21, 54, 125),
-      '80': rgba(26, 68, 157),
-      '70': rgba(31, 81, 189),
-      '60': rgba(36, 95, 221),
-      '50': rgba(40, 108, 253),
-      '40': rgba(80, 134, 253),
-      '30': rgba(119, 160, 254),
-      '20': rgba(159, 187, 254),
-      '10': rgba(198, 215, 255),
-      '5': rgba(238, 243, 255),
-    ),
-    'red': (
-      '90': rgba(168, 46, 38),
-      '80': rgba(183, 56, 49),
-      '70': rgba(194, 63, 56),
-      '60': rgba(212, 72, 62),
-      '50': rgba(226, 82, 65),
-      '40': rgba(222, 94, 86),
-      '30': rgba(215, 121, 118),
-      '20': rgba(227, 158, 156),
-      '10': rgba(247, 207, 211),
-      '5': rgba(252, 236, 238),
-    ),
-    'green': (
-      '90': rgba(40, 95, 27),
-      '80': rgba(55, 126, 48),
-      '70': rgba(66, 142, 59),
-      '60': rgba(78, 160, 70),
-      '50': rgba(89, 174, 80),
-      '40': rgba(111, 187, 105),
-      '30': rgba(136, 198, 131),
-      '20': rgba(169, 214, 166),
-      '10': rgba(203, 230, 201),
-      '5': rgba(233, 245, 233),
-    ),
-    'yellow': (
-      '90': rgba(238, 104, 0),
-      '80': rgba(238, 136, 0),
-      '70': rgba(238, 152, 0),
-      '60': rgba(238, 171, 0),
-      '50': rgba(237, 184, 0),
-      '40': rgba(239, 194, 27),
-      '30': rgba(241, 206, 72),
-      '20': rgba(245, 219, 126),
-      '10': rgba(249, 233, 177),
-      '5': rgba(252, 247, 225),
-    ),
-    'background': (
-      '50': rgba(255, 255, 255),
-      '0': rgba(244, 245, 247),
-    ),
-    'white': (
-      '50': rgba(255, 255, 255)
-    ),
-    'black': (
-      '50': rgba(28, 27, 33, 1)
-    ),
-    'backdrop': (
-      '50': rgba(144, 148, 153, 0.4)
-    ),
-    'link': (
-      '50': #005ab6
-    )
-  ),
-  'dark': (
-    'primary': (
-      '90': rgba(118, 173, 255, 1),
-      '80': rgba(89, 155, 255, 1),
-      '70': rgba(59, 138, 255, 1),
-      '60': rgba(46, 122, 255, 1),
-      '50': rgba(40, 108, 253, 1),
-      '40': rgba(45, 93, 212, 1),
-      '30': rgba(47, 80, 175, 1),
-      '20': rgba(46, 68, 139, 1),
-      '10': rgba(43, 56, 107, 1),
-      '5': rgba(37, 44, 77, 1),
-    ),
-    'text': (
-      '90': rgba(239, 239, 241, 1),
-      '80': rgba(215, 216, 221, 1),
-      '70': rgba(189, 189, 198, 1),
-      '60': rgba(162, 163, 174, 1),
-      '50': rgba(139, 140, 154, 1),
-      '40': rgba(118, 119, 135, 1),
-      '30': rgba(93, 95, 109, 1),
-      '20': rgba(73, 75, 86, 1),
-      '10': rgba(57, 57, 67, 1),
-      '5': rgba(47, 47, 55, 1)
-    ),
-    'red': (
-      '90': rgba(255, 204, 182, 1),
-      '80': rgba(252, 179, 152, 1),
-      '70': rgba(246, 153, 125, 1),
-      '60': rgba(236, 128, 101, 1),
-      '50': rgba(224, 104, 80, 1),
-      '40': rgba(186, 85, 77, 1),
-      '30': rgba(150, 71, 72, 1),
-      '20': rgba(117, 63, 69, 1),
-      '10': rgba(86, 53, 59, 1),
-      '5': rgba(58, 40, 45, 1)
-    ),
-    'green': (
-      '90': rgba(196, 245, 209, 1),
-      '80': rgba(157, 222, 168, 1),
-      '70': rgba(129, 208, 136, 1),
-      '60': rgba(104, 192, 104, 1),
-      '50': rgba(89, 174, 80, 1),
-      '40': rgba(76, 145, 74, 1),
-      '30': rgba(67, 118, 69, 1),
-      '20': rgba(58, 93, 61, 1),
-      '10': rgba(47, 69, 51, 1),
-      '5': rgba(35, 47, 38, 1),
-    ),
-    'yellow': (
-      '90': rgba(255, 252, 191, 1),
-      '80': rgba(255, 241, 143, 1),
-      '70': rgba(255, 223, 96, 1),
-      '60': rgba(253, 199, 48, 1),
-      '50': rgba(238, 171, 0, 1),
-      '40': rgba(196, 137, 13, 1),
-      '30': rgba(157, 108, 23, 1),
-      '20': rgba(122, 84, 29, 1),
-      '10': rgba(91, 64, 31, 1),
-      '5': rgba(64, 47, 29, 1)
-    ),
-    'background': (
-      '50': rgba(34, 34, 41, 1),
-      '0': rgba(28, 27, 33, 1),
-    ),
-    'white': (
-      '50': rgba(255, 255, 255, 1)
-    ),
-    'black': (
-      '50': rgba(28, 27, 33, 1)
-    ),
-    'backdrop': (
-      '50': rgba(144, 148, 153, 0.4)
-    ),
-    'link': (
-      '50': #79c6ff
-    )
-  )
-);
+@use '@tetacom/themes/src/tatneft/presets.scss' as tatneft;
+@use '@tetacom/themes/src/base/presets.scss' as base;
+@import "@tetacom/themes/src/global.tokens.css";
+@import "@tetacom/themes/src/util.scss";
 
-$palettes: 'primary', 'text', 'red', 'green', 'yellow', 'background', 'white', 'backdrop', 'black', 'link';
-$grades: '90', '80', '70', '60', '50', '40', '30', '20', '10', '5', '0';
+$themes: map-collect('themes', tatneft.$presets, base.$presets);
+$shadows: map-collect('shadow', tatneft.$presets, base.$presets);
+
+@import '@tetacom/themes/src/generate.scss';

package/style/presets/font-presets.scss

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

package/style/presets/view-types.scss

@@ -0,0 +1,15 @@
+// Get classes by token type: 'base', 'btn', 'field'
+
+@mixin getView($tokenType) {
+  &_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 {