@alfalab/core-components 25.5.0 → 25.8.0

package/typography/title-mobile/index.css

@@ -11,72 +11,72 @@
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 }
-.typography__styrene-xlarge_lupx2 {
+.typography__styrene-xlarge_1ary6 {
     font-size: 34px;
     line-height: 40px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-large_lupx2 {
+.typography__styrene-large_1ary6 {
     font-size: 30px;
     line-height: 36px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-medium_lupx2 {
+.typography__styrene-medium_1ary6 {
     font-size: 26px;
     line-height: 32px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-small_lupx2 {
+.typography__styrene-small_1ary6 {
     font-size: 20px;
     line-height: 28px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-xsmall_lupx2 {
+.typography__styrene-xsmall_1ary6 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__system-xlarge_lupx2 {
+.typography__system-xlarge_1ary6 {
     font-size: 34px;
     line-height: 40px;
     font-weight: 600;
 }
-.typography__system-large_lupx2 {
+.typography__system-large_1ary6 {
     font-size: 30px;
     line-height: 36px;
     font-weight: 600;
 }
-.typography__system-medium_lupx2 {
+.typography__system-medium_1ary6 {
     font-size: 26px;
     line-height: 32px;
     font-weight: 600;
 }
-.typography__system-small_lupx2 {
+.typography__system-small_1ary6 {
     font-size: 20px;
     line-height: 28px;
     font-weight: 600;
 }
-.typography__system-xsmall_lupx2 {
+.typography__system-xsmall_1ary6 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 600;
 }
-.typography__bold_lupx2 {
+.typography__bold_1ary6 {
     font-weight: bold;
 }
-.typography__medium_lupx2 {
+.typography__medium_1ary6 {
     font-weight: 500;
 }
-.typography__regular_lupx2 {
+.typography__regular_1ary6 {
     font-weight: normal;
 }

package/typography/title-mobile/index.js

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../colors.module-9a4711ea.js');
+require('../colors.module-b6c5262b.js');
 require('react');
 require('classnames');
 require('../title/component.js');
-require('../common.module-ea379bc2.js');
+require('../common.module-51a60e81.js');
 var titleMobile_component = require('./component.js');
 
 

package/typography/title-responsive/component.js

@@ -1,16 +1,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var colors_module = require('../colors.module-9a4711ea.js');
+var colors_module = require('../colors.module-b6c5262b.js');
 var React = require('react');
 require('classnames');
 var title_component = require('../title/component.js');
-var common_module = require('../common.module-ea379bc2.js');
+var common_module = require('../common.module-51a60e81.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles = {"styrene-xlarge":"typography__styrene-xlarge_1atrn","styrene-large":"typography__styrene-large_1atrn","styrene-medium":"typography__styrene-medium_1atrn","styrene-small":"typography__styrene-small_1atrn","styrene-xsmall":"typography__styrene-xsmall_1atrn","system-xlarge":"typography__system-xlarge_1atrn","system-large":"typography__system-large_1atrn","system-medium":"typography__system-medium_1atrn","system-small":"typography__system-small_1atrn","system-xsmall":"typography__system-xsmall_1atrn","margins-xlarge":"typography__margins-xlarge_1atrn","margins-large":"typography__margins-large_1atrn","margins-medium":"typography__margins-medium_1atrn","margins-small":"typography__margins-small_1atrn","margins-xsmall":"typography__margins-xsmall_1atrn"};
+var styles = {"styrene-xlarge":"typography__styrene-xlarge_ifh4m","styrene-large":"typography__styrene-large_ifh4m","styrene-medium":"typography__styrene-medium_ifh4m","styrene-small":"typography__styrene-small_ifh4m","styrene-xsmall":"typography__styrene-xsmall_ifh4m","system-xlarge":"typography__system-xlarge_ifh4m","system-large":"typography__system-large_ifh4m","system-medium":"typography__system-medium_ifh4m","system-small":"typography__system-small_ifh4m","system-xsmall":"typography__system-xsmall_ifh4m","margins-xlarge":"typography__margins-xlarge_ifh4m","margins-large":"typography__margins-large_ifh4m","margins-medium":"typography__margins-medium_ifh4m","margins-small":"typography__margins-small_ifh4m","margins-xsmall":"typography__margins-xsmall_ifh4m"};
 require('./index.css');
 
 var TitleResponsive = function (props) {

package/typography/title-responsive/index.css

@@ -18,134 +18,134 @@
         'Helvetica Neue', Helvetica, sans-serif;
 }
 /* TODO: поменять медиа-запросы на миксины */
-.typography__styrene-xlarge_1atrn {
+.typography__styrene-xlarge_ifh4m {
     font-size: 34px;
     line-height: 40px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-large_1atrn {
+.typography__styrene-large_ifh4m {
     font-size: 30px;
     line-height: 36px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-medium_1atrn {
+.typography__styrene-medium_ifh4m {
     font-size: 26px;
     line-height: 32px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-small_1atrn {
+.typography__styrene-small_ifh4m {
     font-size: 20px;
     line-height: 28px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-xsmall_1atrn {
+.typography__styrene-xsmall_ifh4m {
     font-size: 16px;
     line-height: 24px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__system-xlarge_1atrn {
+.typography__system-xlarge_ifh4m {
     font-size: 30px;
     line-height: 36px;
     font-weight: 700;
 }
-.typography__system-large_1atrn {
+.typography__system-large_ifh4m {
     font-size: 22px;
     line-height: 26px;
     font-weight: 700;
 }
-.typography__system-medium_1atrn {
+.typography__system-medium_ifh4m {
     font-size: 18px;
     line-height: 22px;
     font-weight: 700;
 }
-.typography__system-small_1atrn {
+.typography__system-small_ifh4m {
     font-size: 18px;
     line-height: 22px;
     font-weight: 700;
 }
-.typography__system-xsmall_1atrn {
+.typography__system-xsmall_ifh4m {
     font-size: 18px;
     line-height: 22px;
     font-weight: 700;
 }
-.typography__margins-xlarge_1atrn {
+.typography__margins-xlarge_ifh4m {
     margin: 0 0 var(--gap-xl);
 }
-.typography__margins-large_1atrn {
+.typography__margins-large_ifh4m {
     margin: var(--gap-3xl) 0 var(--gap-m);
 }
-.typography__margins-medium_1atrn {
+.typography__margins-medium_ifh4m {
     margin: var(--gap-3xl) 0 var(--gap-m);
 }
-.typography__margins-small_1atrn {
+.typography__margins-small_ifh4m {
     margin: var(--gap-3xl) 0 var(--gap-m);
 }
-.typography__margins-xsmall_1atrn {
+.typography__margins-xsmall_ifh4m {
     margin: var(--gap-3xl) 0 var(--gap-m);
 }
 @media screen and (min-width: 600px) {
-    .typography__system-xlarge_1atrn {
+    .typography__system-xlarge_ifh4m {
         font-size: 40px;
         line-height: 48px;
         font-weight: 700;
     }
 
-    .typography__system-large_1atrn {
+    .typography__system-large_ifh4m {
         font-size: 30px;
         line-height: 36px;
         font-weight: 700;
     }
 
-    .typography__system-medium_1atrn {
+    .typography__system-medium_ifh4m {
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
     }
 
-    .typography__system-small_1atrn {
+    .typography__system-small_ifh4m {
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
     }
 
-    .typography__system-xsmall_1atrn {
+    .typography__system-xsmall_ifh4m {
         font-size: 18px;
         line-height: 22px;
         font-weight: 700;
     }
 
-    .typography__margins-xlarge_1atrn {
+    .typography__margins-xlarge_ifh4m {
         margin: 0 0 var(--gap-xl);
     }
 
-    .typography__margins-large_1atrn {
+    .typography__margins-large_ifh4m {
         margin: var(--gap-4xl) 0 var(--gap-xl);
     }
 
-    .typography__margins-medium_1atrn {
+    .typography__margins-medium_ifh4m {
         margin: var(--gap-3xl) 0 var(--gap-m);
     }
 
-    .typography__margins-small_1atrn {
+    .typography__margins-small_ifh4m {
         margin: var(--gap-3xl) 0 var(--gap-m);
     }
 
-    .typography__margins-xsmall_1atrn {
+    .typography__margins-xsmall_ifh4m {
         margin: var(--gap-3xl) 0 var(--gap-m);
     }
 }
 @media screen and (min-width: 1024px) {
-    .typography__styrene-xlarge_1atrn {
+    .typography__styrene-xlarge_ifh4m {
         font-size: 48px;
         line-height: 64px;
         font-weight: 500;
@@ -153,7 +153,7 @@
         font-family: var(--font-family-styrene);
     }
 
-    .typography__styrene-large_1atrn {
+    .typography__styrene-large_ifh4m {
         font-size: 40px;
         line-height: 48px;
         font-weight: 500;
@@ -161,7 +161,7 @@
         font-family: var(--font-family-styrene);
     }
 
-    .typography__styrene-medium_1atrn {
+    .typography__styrene-medium_ifh4m {
         font-size: 32px;
         line-height: 40px;
         font-weight: 500;
@@ -169,7 +169,7 @@
         font-family: var(--font-family-styrene);
     }
 
-    .typography__styrene-small_1atrn {
+    .typography__styrene-small_ifh4m {
         font-size: 24px;
         line-height: 32px;
         font-weight: 500;
@@ -177,7 +177,7 @@
         font-family: var(--font-family-styrene);
     }
 
-    .typography__styrene-xsmall_1atrn {
+    .typography__styrene-xsmall_ifh4m {
         font-size: 20px;
         line-height: 24px;
         font-weight: 500;
@@ -185,53 +185,53 @@
         font-family: var(--font-family-styrene);
     }
 
-    .typography__system-xlarge_1atrn {
+    .typography__system-xlarge_ifh4m {
         font-size: 48px;
         line-height: 52px;
         font-weight: 700;
     }
 
-    .typography__system-large_1atrn {
+    .typography__system-large_ifh4m {
         font-size: 40px;
         line-height: 48px;
         font-weight: 700;
     }
 
-    .typography__system-medium_1atrn {
+    .typography__system-medium_ifh4m {
         font-size: 30px;
         line-height: 36px;
         font-weight: 700;
     }
 
-    .typography__system-small_1atrn {
+    .typography__system-small_ifh4m {
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
     }
 
-    .typography__system-xsmall_1atrn {
+    .typography__system-xsmall_ifh4m {
         font-size: 18px;
         line-height: 22px;
         font-weight: 700;
     }
 
-    .typography__margins-xlarge_1atrn {
+    .typography__margins-xlarge_ifh4m {
         margin: 0 0 var(--gap-xl);
     }
 
-    .typography__margins-large_1atrn {
+    .typography__margins-large_ifh4m {
         margin: var(--gap-4xl) 0 var(--gap-xl);
     }
 
-    .typography__margins-medium_1atrn {
+    .typography__margins-medium_ifh4m {
         margin: var(--gap-4xl) 0 var(--gap-xl);
     }
 
-    .typography__margins-small_1atrn {
+    .typography__margins-small_ifh4m {
         margin: var(--gap-3xl) 0 var(--gap-m);
     }
 
-    .typography__margins-xsmall_1atrn {
+    .typography__margins-xsmall_ifh4m {
         margin: var(--gap-3xl) 0 var(--gap-m);
     }
 }

package/typography/title-responsive/index.js

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../colors.module-9a4711ea.js');
+require('../colors.module-b6c5262b.js');
 require('react');
 require('classnames');
 require('../title/component.js');
-require('../common.module-ea379bc2.js');
+require('../common.module-51a60e81.js');
 var titleResponsive_component = require('./component.js');
 
 

package/vars/colors-addons.css

@@ -1,27 +1,70 @@
 :root {
+    --color-static-corpbg-neutral: #bdc0c2;
+    --color-static-corpbg-primary: #212a33;
+    --color-static-corpbg-secondary: #384048;
+    --color-static-corpbg-tertiary: #7a7f85;
     --color-static-graphic-amethyst: #a489aa;
     --color-static-graphic-blackberry: #bfafc6;
+    --color-static-graphic-blue-chill: #0f9c8c;
     --color-static-graphic-blue-maya: #7eb3ff;
     --color-static-graphic-blue-moody: #7879cf;
     --color-static-graphic-blue-steel: #4f84ba;
     --color-static-graphic-botticelli: #cee5e5;
+    --color-static-graphic-boulder: #7a7a7a;
+    --color-static-graphic-brink-pink: #fc617c;
+    --color-static-graphic-burnt-sienna: #eb7a58;
     --color-static-graphic-carrot: #e8bba3;
+    --color-static-graphic-chatelle: #bfafc6;
+    --color-static-graphic-chathams-blue: #155966;
     --color-static-graphic-chick: #f2db9e;
+    --color-static-graphic-crete: #847128;
+    --color-static-graphic-curious-blue: #2381db;
+    --color-static-graphic-curious-blue-light: #3b99d9;
+    --color-static-graphic-eastern-blue: #269cb3;
+    --color-static-graphic-french-lilac: #d3baed;
+    --color-static-graphic-fuel-yellow: #f29d32;
+    --color-static-graphic-fun-blue: #1d6ab5;
     --color-static-graphic-gallery: #eee;
     --color-static-graphic-green-jungle: #2fc26e;
+    --color-static-graphic-hippie-blue: #5aa4b0;
+    --color-static-graphic-jaffa: #f07134;
+    --color-static-graphic-jaffa-light: #f18836;
+    --color-static-graphic-java: #15c0e0;
+    --color-static-graphic-jungle-green: #2ab79a;
     --color-static-graphic-lavender: #8888ad;
+    --color-static-graphic-mantis: #63cd4f;
+    --color-static-graphic-matisse: #16548f;
+    --color-static-graphic-milano-red: #cd1501;
+    --color-static-graphic-mirage: #1d2434;
+    --color-static-graphic-moon-raker: #e9dbf7;
+    --color-static-graphic-moss-green: #a6d29c;
+    --color-static-graphic-nevada: #626b75;
     --color-static-graphic-olive: #bfd3c9;
+    --color-static-graphic-olivine: #87b965;
     --color-static-graphic-peach: #fcc99b;
     --color-static-graphic-persimmon: #ff5c5c;
+    --color-static-graphic-pewter: #96a5a5;
+    --color-static-graphic-pickled-bluewood: #2d3f50;
+    --color-static-graphic-porsche: #e7b965;
     --color-static-graphic-raspberry: #dfb2bb;
+    --color-static-graphic-red-damask: #da713c;
+    --color-static-graphic-saffron: #f0c330;
     --color-static-graphic-salomie: #fee984;
     --color-static-graphic-sand: #f6bf65;
+    --color-static-graphic-sandy-brown: #f38f6f;
     --color-static-graphic-seawater: #aecfd9;
+    --color-static-graphic-serenade: #fff0e3;
     --color-static-graphic-sky: #a6c0db;
     --color-static-graphic-soft-peach: #f3eaeb;
     --color-static-graphic-solitude: #e8f2fe;
     --color-static-graphic-strawberry: #f8b6a9;
     --color-static-graphic-sundust: #d9d6ce;
+    --color-static-graphic-turkish-rose: #b56a6b;
+    --color-static-graphic-turquoise-blue: #6bd3e6;
+    --color-static-graphic-valencia: #d8463b;
+    --color-static-graphic-waikawa-gray: #5b6d9c;
+    --color-static-graphic-whisper: #f2eff6;
+    --color-static-graphic-zanah: #e1f0de;
     --color-static-local-light-blue: #f5f7f9;
     --color-static-overlay-black-high: rgba(0, 0, 0, 0.32);
     --color-static-overlay-black-low: rgba(0, 0, 0, 0.16);

package/vars/colors-bluetint.css

@@ -32,6 +32,7 @@
     --color-dark-graphic-secondary: #8d8d93;
     --color-dark-graphic-tertiary: #464649;
     --color-dark-specialbg-nulled: rgba(255, 255, 255, 0);
+    --color-dark-specialbg-overlay-fallback: #070707;
     --color-dark-specialbg-primary-grouped: #202022;
     --color-dark-specialbg-secondary-grouped: #2c2c2e;
     --color-dark-specialbg-tertiary-grouped: #3a3a3c;
@@ -85,6 +86,7 @@
     --color-light-graphic-secondary: #8a8a8e;
     --color-light-graphic-tertiary: #c5c5c7;
     --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
+    --color-light-specialbg-overlay-fallback: #5c5c5c;
     --color-light-specialbg-primary-grouped: #f3f4f5;
     --color-light-specialbg-secondary-grouped: #fff;
     --color-light-specialbg-tertiary-grouped: #f3f4f5;
@@ -144,13 +146,27 @@
     --color-dark-bg-primary-inverted-alpha-10: rgba(255, 255, 255, 0.1);
     --color-dark-bg-primary-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-dark-bg-primary-inverted-alpha-20: rgba(255, 255, 255, 0.2);
+    --color-dark-bg-primary-inverted-alpha-30: rgba(255, 255, 255, 0.3);
     --color-dark-bg-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
     --color-dark-bg-primary-inverted-alpha-50: rgba(255, 255, 255, 0.5);
+    --color-dark-bg-primary-inverted-alpha-60: rgba(255, 255, 255, 0.6);
+    --color-dark-bg-primary-inverted-alpha-80: rgba(255, 255, 255, 0.8);
+    --color-dark-bg-primary-inverted-shade-7: rgb(237, 237, 237);
+    --color-dark-bg-primary-inverted-shade-15: rgb(217, 217, 217);
+    --color-dark-bg-primary-inverted-shade-20: rgb(204, 204, 204);
+    --color-dark-bg-secondary-alpha-30: rgba(32, 32, 34, 0.3);
+    --color-dark-bg-secondary-tint-7: rgb(48, 48, 49);
+    --color-dark-bg-secondary-tint-15: rgb(65, 65, 67);
     --color-dark-bg-secondary-inverted-alpha-7: rgba(243, 244, 245, 0.07);
     --color-dark-bg-secondary-inverted-alpha-15: rgba(243, 244, 245, 0.15);
+    --color-dark-bg-secondary-inverted-alpha-30: rgba(243, 244, 245, 0.3);
+    --color-dark-bg-secondary-inverted-shade-7: rgb(226, 227, 228);
+    --color-dark-bg-secondary-inverted-shade-15: rgb(207, 207, 208);
+    --color-dark-bg-secondary-inverted-shade-20: rgb(194, 195, 196);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
     --color-dark-border-tertiary-inverted-alpha-30: rgba(243, 244, 245, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
+    --color-dark-graphic-accent-shade-15: rgb(203, 42, 31);
     --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
     --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
     --color-dark-graphic-negative-shade-30: rgb(152, 20, 8);
@@ -204,13 +220,27 @@
     --color-light-bg-primary-inverted-alpha-10: rgba(18, 18, 18, 0.1);
     --color-light-bg-primary-inverted-alpha-15: rgba(18, 18, 18, 0.15);
     --color-light-bg-primary-inverted-alpha-20: rgba(18, 18, 18, 0.2);
+    --color-light-bg-primary-inverted-alpha-30: rgba(18, 18, 18, 0.3);
     --color-light-bg-primary-inverted-alpha-40: rgba(18, 18, 18, 0.4);
     --color-light-bg-primary-inverted-alpha-50: rgba(18, 18, 18, 0.5);
+    --color-light-bg-primary-inverted-alpha-60: rgba(18, 18, 18, 0.6);
+    --color-light-bg-primary-inverted-alpha-80: rgba(18, 18, 18, 0.8);
+    --color-light-bg-primary-inverted-tint-7: rgb(35, 35, 35);
+    --color-light-bg-primary-inverted-tint-15: rgb(54, 54, 54);
+    --color-light-bg-primary-inverted-tint-20: rgb(65, 65, 65);
+    --color-light-bg-secondary-alpha-30: rgba(243, 244, 245, 0.3);
+    --color-light-bg-secondary-shade-7: rgb(226, 227, 228);
+    --color-light-bg-secondary-shade-15: rgb(207, 207, 208);
     --color-light-bg-secondary-inverted-alpha-7: rgba(32, 32, 34, 0.07);
     --color-light-bg-secondary-inverted-alpha-15: rgba(32, 32, 34, 0.15);
+    --color-light-bg-secondary-inverted-alpha-30: rgba(32, 32, 34, 0.3);
+    --color-light-bg-secondary-inverted-tint-7: rgb(48, 48, 49);
+    --color-light-bg-secondary-inverted-tint-15: rgb(65, 65, 67);
+    --color-light-bg-secondary-inverted-tint-20: rgb(77, 77, 78);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
     --color-light-border-tertiary-inverted-alpha-30: rgba(28, 28, 30, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
+    --color-light-graphic-accent-tint-15: rgb(241, 80, 69);
     --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
     --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
     --color-light-graphic-negative-tint-30: rgb(245, 133, 125);

package/vars/colors-indigo.css

@@ -154,13 +154,27 @@
     --color-dark-bg-primary-inverted-alpha-10: rgba(255, 255, 255, 0.1);
     --color-dark-bg-primary-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-dark-bg-primary-inverted-alpha-20: rgba(255, 255, 255, 0.2);
+    --color-dark-bg-primary-inverted-alpha-30: rgba(255, 255, 255, 0.3);
     --color-dark-bg-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
     --color-dark-bg-primary-inverted-alpha-50: rgba(255, 255, 255, 0.5);
+    --color-dark-bg-primary-inverted-alpha-60: rgba(255, 255, 255, 0.6);
+    --color-dark-bg-primary-inverted-alpha-80: rgba(255, 255, 255, 0.8);
+    --color-dark-bg-primary-inverted-shade-7: rgb(237, 237, 237);
+    --color-dark-bg-primary-inverted-shade-15: rgb(217, 217, 217);
+    --color-dark-bg-primary-inverted-shade-20: rgb(204, 204, 204);
+    --color-dark-bg-secondary-alpha-30: rgba(35, 53, 73, 0.3);
+    --color-dark-bg-secondary-tint-7: rgb(50, 67, 86);
+    --color-dark-bg-secondary-tint-15: rgb(68, 83, 100);
     --color-dark-bg-secondary-inverted-alpha-7: rgba(182, 188, 195, 0.07);
     --color-dark-bg-secondary-inverted-alpha-15: rgba(182, 188, 195, 0.15);
+    --color-dark-bg-secondary-inverted-alpha-30: rgba(182, 188, 195, 0.3);
+    --color-dark-bg-secondary-inverted-shade-7: rgb(169, 175, 181);
+    --color-dark-bg-secondary-inverted-shade-15: rgb(155, 160, 166);
+    --color-dark-bg-secondary-inverted-shade-20: rgb(146, 150, 156);
     --color-dark-bg-tertiary-tint-7: rgb(74, 89, 104);
     --color-dark-border-tertiary-inverted-alpha-30: rgba(182, 188, 195, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
+    --color-dark-graphic-accent-shade-15: rgb(203, 42, 31);
     --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
     --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
     --color-dark-graphic-negative-shade-30: rgb(169, 56, 48);
@@ -182,6 +196,9 @@
     --color-dark-specialbg-component-tint-7: rgb(85, 99, 114);
     --color-dark-specialbg-component-tint-10: rgb(90, 104, 118);
     --color-dark-specialbg-component-tint-30: rgb(127, 137, 149);
+    --color-dark-specialbg-component-alpha-2: rgba(72, 87, 103, 0.02);
+    --color-dark-specialbg-component-alpha-14: rgba(72, 87, 103, 0.14);
+    --color-dark-specialbg-component-alpha-23: rgba(72, 87, 103, 0.23);
     --color-dark-specialbg-component-inverted-shade-15: rgba(9, 26, 45, 0.2095);
     --color-dark-text-link-shade-30: rgb(0, 85, 179);
     --color-dark-text-link-shade-50: rgb(0, 61, 128);
@@ -218,13 +235,27 @@
     --color-light-bg-primary-inverted-alpha-10: rgba(11, 31, 53, 0.1);
     --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
     --color-light-bg-primary-inverted-alpha-20: rgba(11, 31, 53, 0.2);
+    --color-light-bg-primary-inverted-alpha-30: rgba(11, 31, 53, 0.3);
     --color-light-bg-primary-inverted-alpha-40: rgba(11, 31, 53, 0.4);
     --color-light-bg-primary-inverted-alpha-50: rgba(11, 31, 53, 0.5);
+    --color-light-bg-primary-inverted-alpha-60: rgba(11, 31, 53, 0.6);
+    --color-light-bg-primary-inverted-alpha-80: rgba(11, 31, 53, 0.8);
+    --color-light-bg-primary-inverted-tint-7: rgb(28, 47, 67);
+    --color-light-bg-primary-inverted-tint-15: rgb(48, 65, 83);
+    --color-light-bg-primary-inverted-tint-20: rgb(60, 76, 93);
+    --color-light-bg-secondary-alpha-30: rgba(243, 244, 245, 0.3);
+    --color-light-bg-secondary-shade-7: rgb(226, 227, 228);
+    --color-light-bg-secondary-shade-15: rgb(207, 207, 208);
     --color-light-bg-secondary-inverted-alpha-7: rgba(35, 53, 73, 0.07);
     --color-light-bg-secondary-inverted-alpha-15: rgba(35, 53, 73, 0.15);
+    --color-light-bg-secondary-inverted-alpha-30: rgba(35, 53, 73, 0.3);
+    --color-light-bg-secondary-inverted-tint-7: rgb(50, 67, 86);
+    --color-light-bg-secondary-inverted-tint-15: rgb(68, 83, 100);
+    --color-light-bg-secondary-inverted-tint-20: rgb(79, 93, 109);
     --color-light-bg-tertiary-shade-7: rgb(215, 217, 219);
     --color-light-border-tertiary-inverted-alpha-30: rgba(109, 121, 134, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
+    --color-light-graphic-accent-tint-15: rgb(241, 80, 69);
     --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
     --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
     --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
@@ -246,6 +277,9 @@
     --color-light-specialbg-component-shade-7: rgba(10, 29, 49, 0.1351);
     --color-light-specialbg-component-shade-10: rgba(10, 28, 48, 0.163);
     --color-light-specialbg-component-shade-30: rgba(8, 22, 37, 0.349);
+    --color-light-specialbg-component-alpha-2: rgba(11, 31, 53, 0.02);
+    --color-light-specialbg-component-alpha-14: rgba(11, 31, 53, 0.14);
+    --color-light-specialbg-component-alpha-23: rgba(11, 31, 53, 0.23);
     --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.2775);
     --color-light-text-link-tint-30: rgb(77, 162, 255);
     --color-light-text-link-tint-50: rgb(128, 189, 255);

package/vars/colors-transparent.css

@@ -7,6 +7,8 @@
     --color-dynamic-quinary-light: rgba(255, 255, 255, 0.16);
     --color-dynamic-secondary-dark: rgba(0, 0, 0, 0.64);
     --color-dynamic-secondary-light: rgba(255, 255, 255, 0.64);
+    --color-dynamic-senary-dark: rgba(0, 0, 0, 0.12);
+    --color-dynamic-senary-light: rgba(255, 255, 255, 0.12);
     --color-dynamic-tertiary-dark: rgba(0, 0, 0, 0.48);
     --color-dynamic-tertiary-light: rgba(255, 255, 255, 0.48);
     --color-static-primary-dark: rgba(0, 0, 0, 0.8);
@@ -17,6 +19,8 @@
     --color-static-quinary-light: rgba(255, 255, 255, 0.16);
     --color-static-secondary-dark: rgba(0, 0, 0, 0.64);
     --color-static-secondary-light: rgba(255, 255, 255, 0.64);
+    --color-static-senary-dark: rgba(0, 0, 0, 0.12);
+    --color-static-senary-light: rgba(255, 255, 255, 0.12);
     --color-static-tertiary-dark: rgba(0, 0, 0, 0.48);
     --color-static-tertiary-light: rgba(255, 255, 255, 0.48);
 }