@tetacom/ng-components 1.0.151 → 1.1.0

package/style/tabs.scss

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

package/style/toggle.scss

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

package/style/tokens/basedark.tokens.css

@@ -0,0 +1,77 @@
+html[data-theme='basedark'] {
+        --color-global-link: #79c6ff;
+  --color-global-white: #ffffff;
+  --color-global-bgcard: #1e1e1e;
+  --color-global-bgmain: #161616;
+  --color-text-5: rgba(255, 255, 255, 0.06);
+  --color-text-10: rgba(255, 255, 255, 0.1);
+  --color-text-20: rgba(255, 255, 255, 0.24);
+  --color-text-30: rgba(255, 255, 255, 0.32);
+  --color-text-40: rgba(255, 255, 255, 0.48);
+  --color-text-50: rgba(255, 255, 255, 0.56);
+  --color-text-60: rgba(255, 255, 255, 0.64);
+  --color-text-70: rgba(255, 255, 255, 0.72);
+  --color-text-80: rgba(255, 255, 255, 0.8);
+  --color-text-90: rgba(255, 255, 255, 0.87);
+  --color-primary-5: #252e54;
+  --color-primary-10: #2b3a6e;
+  --color-primary-20: #344d8d;
+  --color-primary-30: #3d60ad;
+  --color-primary-40: #4476ce;
+  --color-primary-50: #4b8def;
+  --color-primary-60: #62a0f5;
+  --color-primary-70: #7ab3fa;
+  --color-primary-80: #94c5fd;
+  --color-primary-90: #afd6ff;
+  --color-green-5: #232f26;
+  --color-green-10: #2f4533;
+  --color-green-20: #3a5d3d;
+  --color-green-30: #437645;
+  --color-green-40: #4c914a;
+  --color-green-50: #59ae50;
+  --color-green-60: #68c068;
+  --color-green-70: #81d088;
+  --color-green-80: #9ddea8;
+  --color-green-90: #c4f5d1;
+  --color-red-5: #3a282d;
+  --color-red-10: #56353b;
+  --color-red-20: #753f45;
+  --color-red-30: #964748;
+  --color-red-40: #ba554d;
+  --color-red-50: #e06850;
+  --color-red-60: #ec8065;
+  --color-red-70: #f6997d;
+  --color-red-80: #fcb398;
+  --color-red-90: #ffccb6;
+  --color-yellow-5: #402f1d;
+  --color-yellow-10: #5b401f;
+  --color-yellow-20: #7a541d;
+  --color-yellow-30: #9d6c17;
+  --color-yellow-40: #c4890d;
+  --color-yellow-50: #eeab00;
+  --color-yellow-60: #fdc730;
+  --color-yellow-70: #ffdf60;
+  --color-yellow-80: #fff18f;
+  --color-yellow-90: #fffcbf;
+  --color-chart-coffee: #cdbcbc;
+  --color-chart-light-purple: #cfaeff;
+  --color-chart-mandarin: #ffa496;
+  --color-chart-purple: #816af8;
+  --color-chart-green: #59ae50;
+  --color-chart-blue: #286cfd;
+  --color-chart-peach: #ffd297;
+  --color-chart-lemon: #ffe701;
+  --color-chart-light-blue: #83cfff;
+  --color-chart-turquoise: #2bd8c5;
+  --color-chart-cadet-blue: #54adad;
+  --color-chart-red: #e55759;
+  --color-chart-acid-orange: #f67a1a;
+  --color-chart-mustard: #d8b655;
+  --color-chart-orange: #f6b520;
+  --color-chart-light-green: #46d39a;
+  --shadow-1: 0px 1px 0px 0px #0b0b0cff;
+  --shadow-2: 0px 14px 18px 0px #0000004d;
+  --shadow-3: 0px 8px 16px 0px #00000066;
+  --shadow-4: 0px 12px 24px 0px #00000066;
+  --shadow-5: 0px 16px 32px 0px #00000066;
+    }

package/style/tokens/baselight.tokens.css

@@ -0,0 +1,61 @@
+html[data-theme='baselight'] {
+        --color-global-link: #005ab6;
+  --color-global-white: #ffffff;
+  --color-global-bgcard: #ffffff;
+  --color-global-bgmain: #f4f5f7;
+  --color-text-5: rgba(0, 0, 0, 0.04);
+  --color-text-10: rgba(0, 0, 0, 0.1);
+  --color-text-20: rgba(0, 0, 0, 0.16);
+  --color-text-30: rgba(0, 0, 0, 0.28);
+  --color-text-40: rgba(0, 0, 0, 0.44);
+  --color-text-50: rgba(0, 0, 0, 0.56);
+  --color-text-60: rgba(0, 0, 0, 0.64);
+  --color-text-70: rgba(0, 0, 0, 0.72);
+  --color-text-80: rgba(0, 0, 0, 0.8);
+  --color-text-90: rgba(0, 0, 0, 0.87);
+  --color-primary-5: #d9e8ff;
+  --color-primary-10: #adcfff;
+  --color-primary-20: #82b7ff;
+  --color-primary-30: #579fff;
+  --color-primary-40: #3789f4;
+  --color-primary-50: #2173df;
+  --color-primary-60: #2569d3;
+  --color-primary-70: #285fc8;
+  --color-primary-80: #2b57bc;
+  --color-primary-90: #2346a8;
+  --color-green-5: #e6f4f0;
+  --color-green-10: #bbe0d3;
+  --color-green-20: #90cbb5;
+  --color-green-30: #66b596;
+  --color-green-40: #3c9e76;
+  --color-green-50: #148654;
+  --color-green-60: #107744;
+  --color-green-70: #0c6836;
+  --color-green-80: #095828;
+  --color-green-90: #06471c;
+  --color-red-5: #feebe8;
+  --color-red-10: #fac6c0;
+  --color-red-20: #f5a099;
+  --color-red-30: #ee7a73;
+  --color-red-40: #e7534f;
+  --color-red-50: #de2c2c;
+  --color-red-60: #c5242d;
+  --color-red-70: #ab1c2c;
+  --color-red-80: #91162a;
+  --color-red-90: #751026;
+  --color-yellow-5: #fff0cc;
+  --color-yellow-10: #ffe1a3;
+  --color-yellow-20: #ffcf7a;
+  --color-yellow-30: #fdbb52;
+  --color-yellow-40: #f9a429;
+  --color-yellow-50: #f38b01;
+  --color-yellow-60: #d86e00;
+  --color-yellow-70: #bd5400;
+  --color-yellow-80: #9f3d00;
+  --color-yellow-90: #802900;
+  --shadow-1: 0px 4px 4px 0px #0000000f;
+  --shadow-2: 0px 14px 18px 0px #00000014;
+  --shadow-3: 0px 16px 22px 0px #0000001a;
+  --shadow-4: 0px 16px 24px 0px #27272729;
+  --shadow-5: 0px 20px 32px 0px #27272733;
+    }

package/style/tokens/global.tokens.css

@@ -0,0 +1,235 @@
+:root {
+        --font-h1-font-size: 92;
+  --font-h1-text-decoration: none;
+  --font-h1-font-family: Inter;
+  --font-h1-font-weight: 600;
+  --font-h1-font-style: normal;
+  --font-h1-font-stretch: normal;
+  --font-h1-letter-spacing: 0.15;
+  --font-h1-line-height: 110.4;
+  --font-h1-paragraph-indent: 0;
+  --font-h1-paragraph-spacing: 0;
+  --font-h1-text-case: none;
+  --font-h2-font-size: 60;
+  --font-h2-text-decoration: none;
+  --font-h2-font-family: Inter;
+  --font-h2-font-weight: 600;
+  --font-h2-font-style: normal;
+  --font-h2-font-stretch: normal;
+  --font-h2-letter-spacing: 0.15;
+  --font-h2-line-height: 72;
+  --font-h2-paragraph-indent: 0;
+  --font-h2-paragraph-spacing: 0;
+  --font-h2-text-case: none;
+  --font-h3-font-size: 48;
+  --font-h3-text-decoration: none;
+  --font-h3-font-family: Inter;
+  --font-h3-font-weight: 600;
+  --font-h3-font-style: normal;
+  --font-h3-font-stretch: normal;
+  --font-h3-letter-spacing: 0.15;
+  --font-h3-line-height: 57.6;
+  --font-h3-paragraph-indent: 0;
+  --font-h3-paragraph-spacing: 0;
+  --font-h3-text-case: none;
+  --font-h4-font-size: 35;
+  --font-h4-text-decoration: none;
+  --font-h4-font-family: Inter;
+  --font-h4-font-weight: 600;
+  --font-h4-font-style: normal;
+  --font-h4-font-stretch: normal;
+  --font-h4-letter-spacing: 0.15;
+  --font-h4-line-height: 44;
+  --font-h4-paragraph-indent: 0;
+  --font-h4-paragraph-spacing: 0;
+  --font-h4-text-case: none;
+  --font-h5-font-size: 28;
+  --font-h5-text-decoration: none;
+  --font-h5-font-family: Inter;
+  --font-h5-font-weight: 500;
+  --font-h5-font-style: normal;
+  --font-h5-font-stretch: normal;
+  --font-h5-letter-spacing: 0.15;
+  --font-h5-line-height: 33.6;
+  --font-h5-paragraph-indent: 0;
+  --font-h5-paragraph-spacing: 0;
+  --font-h5-text-case: none;
+  --font-h6-font-size: 20;
+  --font-h6-text-decoration: none;
+  --font-h6-font-family: Inter;
+  --font-h6-font-weight: 500;
+  --font-h6-font-style: normal;
+  --font-h6-font-stretch: normal;
+  --font-h6-letter-spacing: 0.15;
+  --font-h6-line-height: 28;
+  --font-h6-paragraph-indent: 0;
+  --font-h6-paragraph-spacing: 0;
+  --font-h6-text-case: none;
+  --font-title1-font-size: 16;
+  --font-title1-text-decoration: none;
+  --font-title1-font-family: Inter;
+  --font-title1-font-weight: 500;
+  --font-title1-font-style: normal;
+  --font-title1-font-stretch: normal;
+  --font-title1-letter-spacing: 0.024;
+  --font-title1-line-height: 24;
+  --font-title1-paragraph-indent: 0;
+  --font-title1-paragraph-spacing: 0;
+  --font-title1-text-case: none;
+  --font-title2-font-size: 14;
+  --font-title2-text-decoration: none;
+  --font-title2-font-family: Inter;
+  --font-title2-font-weight: 500;
+  --font-title2-font-style: normal;
+  --font-title2-font-stretch: normal;
+  --font-title2-letter-spacing: 0;
+  --font-title2-line-height: 20;
+  --font-title2-paragraph-indent: 0;
+  --font-title2-paragraph-spacing: 0;
+  --font-title2-text-case: none;
+  --font-title3-font-size: 12;
+  --font-title3-text-decoration: none;
+  --font-title3-font-family: Inter;
+  --font-title3-font-weight: 500;
+  --font-title3-font-style: normal;
+  --font-title3-font-stretch: normal;
+  --font-title3-letter-spacing: 0;
+  --font-title3-line-height: 16;
+  --font-title3-paragraph-indent: 0;
+  --font-title3-paragraph-spacing: 0;
+  --font-title3-text-case: none;
+  --font-body1-font-size: 16;
+  --font-body1-text-decoration: none;
+  --font-body1-font-family: Inter;
+  --font-body1-font-weight: 400;
+  --font-body1-font-style: normal;
+  --font-body1-font-stretch: normal;
+  --font-body1-letter-spacing: 0;
+  --font-body1-line-height: 24;
+  --font-body1-paragraph-indent: 0;
+  --font-body1-paragraph-spacing: 10;
+  --font-body1-text-case: none;
+  --font-body2-font-size: 14;
+  --font-body2-text-decoration: none;
+  --font-body2-font-family: Inter;
+  --font-body2-font-weight: 400;
+  --font-body2-font-style: normal;
+  --font-body2-font-stretch: normal;
+  --font-body2-letter-spacing: 0;
+  --font-body2-line-height: 20;
+  --font-body2-paragraph-indent: 0;
+  --font-body2-paragraph-spacing: 8;
+  --font-body2-text-case: none;
+  --font-body3-font-size: 12;
+  --font-body3-text-decoration: none;
+  --font-body3-font-family: Inter;
+  --font-body3-font-weight: 400;
+  --font-body3-font-style: normal;
+  --font-body3-font-stretch: normal;
+  --font-body3-letter-spacing: 0;
+  --font-body3-line-height: 16;
+  --font-body3-paragraph-indent: 0;
+  --font-body3-paragraph-spacing: 6;
+  --font-body3-text-case: none;
+  --font-button1-font-size: 13;
+  --font-button1-text-decoration: none;
+  --font-button1-font-family: Inter;
+  --font-button1-font-weight: 500;
+  --font-button1-font-style: normal;
+  --font-button1-font-stretch: normal;
+  --font-button1-letter-spacing: 0;
+  --font-button1-line-height: 20;
+  --font-button1-paragraph-indent: 0;
+  --font-button1-paragraph-spacing: 0;
+  --font-button1-text-case: none;
+  --font-button2-font-size: 11;
+  --font-button2-text-decoration: none;
+  --font-button2-font-family: Inter;
+  --font-button2-font-weight: 500;
+  --font-button2-font-style: normal;
+  --font-button2-font-stretch: normal;
+  --font-button2-letter-spacing: 0;
+  --font-button2-line-height: 16;
+  --font-button2-paragraph-indent: 0;
+  --font-button2-paragraph-spacing: 0;
+  --font-button2-text-case: none;
+  --font-button3-font-size: 10;
+  --font-button3-text-decoration: none;
+  --font-button3-font-family: Inter;
+  --font-button3-font-weight: 500;
+  --font-button3-font-style: normal;
+  --font-button3-font-stretch: normal;
+  --font-button3-letter-spacing: 0;
+  --font-button3-line-height: 14;
+  --font-button3-paragraph-indent: 0;
+  --font-button3-paragraph-spacing: 0;
+  --font-button3-text-case: none;
+  --font-caption-font-size: 11;
+  --font-caption-text-decoration: none;
+  --font-caption-font-family: Inter;
+  --font-caption-font-weight: 400;
+  --font-caption-font-style: normal;
+  --font-caption-font-stretch: normal;
+  --font-caption-letter-spacing: 0;
+  --font-caption-line-height: 16;
+  --font-caption-paragraph-indent: 0;
+  --font-caption-paragraph-spacing: 0;
+  --font-caption-text-case: none;
+  --font-caption-semi-font-size: 11;
+  --font-caption-semi-text-decoration: none;
+  --font-caption-semi-font-family: Inter;
+  --font-caption-semi-font-weight: 600;
+  --font-caption-semi-font-style: normal;
+  --font-caption-semi-font-stretch: normal;
+  --font-caption-semi-letter-spacing: 0;
+  --font-caption-semi-line-height: 16;
+  --font-caption-semi-paragraph-indent: 0;
+  --font-caption-semi-paragraph-spacing: 0;
+  --font-caption-semi-text-case: none;
+  --font-overline-font-size: 10;
+  --font-overline-text-decoration: none;
+  --font-overline-font-family: Inter;
+  --font-overline-font-weight: 600;
+  --font-overline-font-style: normal;
+  --font-overline-font-stretch: normal;
+  --font-overline-letter-spacing: 1.5;
+  --font-overline-line-height: 12;
+  --font-overline-paragraph-indent: 0;
+  --font-overline-paragraph-spacing: 0;
+  --font-overline-text-case: uppercase;
+  --spacing-2: 2px;
+  --spacing-4: 4px;
+  --spacing-6: 6px;
+  --spacing-8: 8px;
+  --spacing-10: 10px;
+  --spacing-12: 12px;
+  --spacing-14: 14px;
+  --spacing-16: 16px;
+  --spacing-18: 18px;
+  --spacing-20: 20px;
+  --spacing-22: 22px;
+  --spacing-24: 24px;
+  --spacing-26: 26px;
+  --spacing-28: 28px;
+  --spacing-30: 30px;
+  --spacing-32: 32px;
+  --radius-0: 0px;
+  --radius-2: 2px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-10: 10px;
+  --radius-12: 12px;
+  --radius-14: 14px;
+  --radius-16: 16px;
+  --radius-18: 18px;
+  --radius-20: 20px;
+  --radius-22: 22px;
+  --radius-24: 24px;
+  --radius-btn-brick: 0px;
+  --radius-btn-round: 8px;
+  --radius-btn-circle: 24px;
+  --radius-field-brick: 0px;
+  --radius-field-round: 8px;
+  --radius-field-circle: 24px;
+    }