@tetacom/ng-components 1.0.150 → 1.1.0

package/style/input.scss

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

package/style/layout.scss

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

package/style/library.scss

@@ -3,6 +3,7 @@
   height: 0;
   line-height: 0;
 }
+
 .float {
   &__right {
     float: right;
@@ -12,6 +13,7 @@
     float: left;
   }
 }
+
 .position {
   &-relative {
     position: relative;
@@ -25,6 +27,7 @@
     position: fixed;
   }
 }
+
 .display {
   &-block {
     display: flex !important;
@@ -45,6 +48,10 @@
   &-inline {
     display: inline !important;
   }
+
+  &-none {
+    display: none !important;
+  }
 }
 
 .flex {
@@ -62,6 +69,7 @@
     flex-wrap: nowrap !important;
   }
 }
+
 .align {
   &-center {
     align-items: center;
@@ -83,6 +91,7 @@
     align-items: baseline;
   }
 }
+
 .align-self {
   &-center {
     align-self: center;
@@ -104,6 +113,7 @@
     align-self: baseline;
   }
 }
+
 .justify-content {
   &-between {
     justify-content: space-between;
@@ -125,6 +135,7 @@
     justify-content: center;
   }
 }
+
 .justify-self {
   &-center {
     justify-self: center;
@@ -138,9 +149,11 @@
     justify-self: flex-end;
   }
 }
+
 .nowrap {
   white-space: nowrap;
 }
+
 .overflow {
   &-hidden {
     overflow: hidden;
@@ -178,6 +191,7 @@
     overflow-y: scroll;
   }
 }
+
 .text-align {
   &-center {
     text-align: center;
@@ -191,16 +205,19 @@
     text-align: right;
   }
 }
+
 .cursor-pointer {
   &:hover {
     cursor: pointer;
   }
 }
+
 .text-overflow {
   &-ellipsis {
     text-overflow: ellipsis;
   }
 }
+
 .text-decoration {
   &-none {
     text-decoration: none;

package/style/list.scss

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

package/style/loader.scss

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

package/style/message.scss

@@ -1,26 +1,18 @@
 @import "util/shadow-util.scss";
 
 .message {
-  position: relative;
-  box-shadow: var(--shadow-2);
+  @include shadow(5);
   display: inline-flex;
   flex-direction: column;
   padding: 8px;
   margin: 8px;
   border: solid 0;
-  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%;
+  border-radius: 4px;
+  color: getColorVar('white', '50');
+  width: 240px;
+  @each $paletteName in $palettes {
+    &-#{$paletteName} {
+      background-color: getColorVar($paletteName, '50');
     }
   }
 }

package/style/modal.scss

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

package/style/navigation.scss

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

package/style/presets/color-presets.scss

@@ -1,9 +1,161 @@
-@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";
+$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
+    )
+  )
+);
 
-$themes: map-collect('themes', tatneft.$presets, base.$presets);
-$shadows: map-collect('shadow', tatneft.$presets, base.$presets);
-
-@import '@tetacom/themes/src/generate.scss';
+$palettes: 'primary', 'text', 'red', 'green', 'yellow', 'background', 'white', 'backdrop', 'black', 'link';
+$grades: '90', '80', '70', '60', '50', '40', '30', '20', '10', '5', '0';