@alfalab/core-components 41.7.0-beta.2 → 41.7.0-beta.3

package/themes/corp.css

@@ -379,6 +379,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(74, 89, 104);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(11, 31, 53, 0.15);
     --color-dark-border-underline-alpha-30: rgba(109, 121, 134, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(182, 188, 195, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -531,6 +535,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(33, 49, 68);
     --color-light-bg-secondary-inverted-shade-15: rgb(30, 45, 62);
     --color-light-bg-tertiary-shade-7: rgb(215, 217, 219);
+    --color-light-border-key-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-light-border-key-alpha-15: rgba(11, 31, 53, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(182, 188, 195, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(109, 121, 134, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);

package/themes/dark.css

@@ -146,6 +146,10 @@
     --color-light-bg-secondary-inverted-shade-7: var(--color-dark-bg-secondary-inverted-tint-7);
     --color-light-bg-secondary-inverted-shade-15: var(--color-dark-bg-secondary-inverted-tint-15);
     --color-light-bg-tertiary-shade-7: var(--color-dark-bg-tertiary-tint-7);
+    --color-light-border-key-alpha-7: var(--color-dark-border-key-alpha-7);
+    --color-light-border-key-alpha-15: var(--color-dark-border-key-alpha-15);
+    --color-light-border-key-inverted-alpha-7: var(--color-dark-border-key-inverted-alpha-7);
+    --color-light-border-key-inverted-alpha-15: var(--color-dark-border-key-inverted-alpha-15);
     --color-light-border-underline-alpha-30: var(--color-dark-border-underline-alpha-30);
     --color-light-border-underline-inverted-alpha-30: var(
         --color-dark-border-underline-inverted-alpha-30

package/themes/dist/click.css

@@ -379,6 +379,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(0, 0, 0, 0.15);
     --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -531,6 +535,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
     --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
+    --color-light-border-key-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-light-border-key-alpha-15: rgba(0, 0, 0, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);

package/themes/dist/compiled/mobile-dark-bluetint.css

@@ -77,6 +77,8 @@
         background-color: #fff;
     } .badge__dot_57ay1.badge__outlineCount_57ay1 {
     border: 1px solid #121212;
+}.divider__component_1ban7 {
+    border-bottom: 1px solid #2b2b2e;
 }.checkbox__box_1648f {
     color: #0e0e0e;
     background-color: #0e0e0e;
@@ -149,8 +151,6 @@
     color: #f15045;
 } .checkbox-group__hint_bjcbm {
     color: rgba(235, 235, 245, 0.54);
-}.divider__component_1ban7 {
-    border-bottom: 1px solid #2b2b2e;
 }.code-input__error_10my0 {
     color: #f15045;
 } @keyframes code-input__shake_10my0 {
@@ -805,7 +805,52 @@
             background-color: rgb(35, 35, 35);
         } .tag__component_17fot.tag__checked_17fot:active:not(:disabled) {
             background-color: rgb(54, 54, 54);
-        }.underlay__background-accent_dwgtq {
+        }.typography__tertiary_ee4fm {
+    color: rgba(235, 235, 245, 0.32);
+} .typography__disabled_ee4fm {
+    color: rgba(235, 235, 245, 0.2);
+} .typography__accent_ee4fm {
+    color: #ef3124;
+} .typography__primary_ee4fm {
+    color: #fff;
+} .typography__attention_ee4fm {
+    color: #cb830f;
+} .typography__positive_ee4fm {
+    color: #13a463;
+} .typography__secondary_ee4fm {
+    color: rgba(235, 235, 245, 0.54);
+} .typography__tertiary-inverted_ee4fm {
+    color: rgba(60, 60, 67, 0.4);
+} .typography__primary-inverted_ee4fm {
+    color: #0e0e0e;
+} .typography__secondary-inverted_ee4fm {
+    color: rgba(60, 60, 67, 0.66);
+} .typography__link_ee4fm {
+    color: #0072ef;
+} .typography__negative_ee4fm {
+    color: #f15045;
+} .typography__static-primary-light_ee4fm {
+    color: #fff;
+} .typography__static-secondary-light_ee4fm {
+    color: rgba(235, 235, 245, 0.54);
+} .typography__static-tertiary-light_ee4fm {
+    color: rgba(235, 235, 245, 0.32);
+} .typography__static-primary-dark_ee4fm {
+    color: #0e0e0e;
+} .typography__static-secondary-dark_ee4fm {
+    color: rgba(60, 60, 67, 0.66);
+} .typography__static-tertiary-dark_ee4fm {
+    color: rgba(60, 60, 67, 0.4);
+} .typography__static-accent_ee4fm {
+    color: #ef3124;
+}
+
+
+
+
+@media screen and (min-width: 600px) {
+} @media screen and (min-width: 1024px) {
+}.underlay__background-accent_dwgtq {
             background-color: #ef3124;
         } .underlay__background-info_dwgtq {
             background-color: #001c3c;
@@ -944,52 +989,7 @@
         border-color: rgba(255, 255, 255, 0.11);
     } .underlay__border-color-specialbg-tertiary-transparent-inverted_dwgtq {
         border-color: rgba(11, 31, 53, 0.1);
-    }.typography__tertiary_ee4fm {
-    color: rgba(235, 235, 245, 0.32);
-} .typography__disabled_ee4fm {
-    color: rgba(235, 235, 245, 0.2);
-} .typography__accent_ee4fm {
-    color: #ef3124;
-} .typography__primary_ee4fm {
-    color: #fff;
-} .typography__attention_ee4fm {
-    color: #cb830f;
-} .typography__positive_ee4fm {
-    color: #13a463;
-} .typography__secondary_ee4fm {
-    color: rgba(235, 235, 245, 0.54);
-} .typography__tertiary-inverted_ee4fm {
-    color: rgba(60, 60, 67, 0.4);
-} .typography__primary-inverted_ee4fm {
-    color: #0e0e0e;
-} .typography__secondary-inverted_ee4fm {
-    color: rgba(60, 60, 67, 0.66);
-} .typography__link_ee4fm {
-    color: #0072ef;
-} .typography__negative_ee4fm {
-    color: #f15045;
-} .typography__static-primary-light_ee4fm {
-    color: #fff;
-} .typography__static-secondary-light_ee4fm {
-    color: rgba(235, 235, 245, 0.54);
-} .typography__static-tertiary-light_ee4fm {
-    color: rgba(235, 235, 245, 0.32);
-} .typography__static-primary-dark_ee4fm {
-    color: #0e0e0e;
-} .typography__static-secondary-dark_ee4fm {
-    color: rgba(60, 60, 67, 0.66);
-} .typography__static-tertiary-dark_ee4fm {
-    color: rgba(60, 60, 67, 0.4);
-} .typography__static-accent_ee4fm {
-    color: #ef3124;
-}
-
-
-
-
-@media screen and (min-width: 600px) {
-} @media screen and (min-width: 1024px) {
-}
+    }
 .steps__option_sgdf5 {
     color: #fff;
     background: #303032
@@ -1234,28 +1234,7 @@
 } .popover__arrow_lbzjc:after {
     background-color: #121212;
     border: 1px solid transparent;
-}.pagination__component_16yb7 {
-    color: #fff;
-}
-.pagination__dots_1h11o {
-    color: rgba(235, 235, 245, 0.54);
-}
-
-.pagination__tag_agsdl.pagination__tag_agsdl {
-    color: rgba(235, 235, 245, 0.54)
-} .pagination__tag_agsdl.pagination__tag_agsdl:hover:not(:disabled) {
-        background-color: #2c2c2e;
-        color: #fff;
-    } .pagination__tag_agsdl.pagination__tag_agsdl:active:not(:disabled) {
-        background-color: #3a3a3c;
-    } .pagination__tag_agsdl.pagination__tag_agsdl.pagination__checked_agsdl {
-        background-color: #f3f4f5;
-        color: #0e0e0e;
-    } .pagination__tag_agsdl.pagination__tag_agsdl.pagination__checked_agsdl:hover:not(:disabled) {
-        color: #0e0e0e;
-    } .pagination__tag_agsdl.pagination__tag_agsdl.pagination__checked_agsdl:active:not(:disabled) {
-        color: #fff;
-    }.button__accent_1ax6m {
+}.button__accent_1ax6m {
     color: #fff;
     background-color: #ef3124;
     border: 1px solid transparent
@@ -1584,30 +1563,28 @@
         color: rgba(14, 14, 14, 0.3)
     } .button__component_zn53q[disabled].button__ghost_zn53q.button__loading_zn53q {
             color: #0e0e0e;
-        }.chart__coreChart_1yhvr .recharts-text tspan {
-        fill: #fff;
-    }
-@keyframes chart__showDot_1scai {
+        }.pagination__component_16yb7 {
+    color: #fff;
 }
-
-.chart__tickText_11m3x {
-    fill: #fff;
-} .chart__circle_11m3x {
-    fill: #121212;
-} .chart__circle_11m3x {
-    fill: #121212;
+.pagination__dots_1h11o {
+    color: rgba(235, 235, 245, 0.54);
 }
-.chart__tooltip_18obg {
-    background-color: #121212;
-    border: 1px solid #2b2b2e;
-    box-shadow: 0 24px 32px rgba(0, 0, 0, 0.08), 0 20px 24px rgba(0, 0, 0, 0.08),
-        0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-} .chart__tooltipArrow_18obg {
-    border: 1px solid #2b2b2e;
-    background-color: #121212;
-} .chart__tooltipArrow_18obg:before {
-    border-color: transparent #121212 transparent transparent;
-}.comment__component_gw0is {
+
+.pagination__tag_agsdl.pagination__tag_agsdl {
+    color: rgba(235, 235, 245, 0.54)
+} .pagination__tag_agsdl.pagination__tag_agsdl:hover:not(:disabled) {
+        background-color: #2c2c2e;
+        color: #fff;
+    } .pagination__tag_agsdl.pagination__tag_agsdl:active:not(:disabled) {
+        background-color: #3a3a3c;
+    } .pagination__tag_agsdl.pagination__tag_agsdl.pagination__checked_agsdl {
+        background-color: #f3f4f5;
+        color: #0e0e0e;
+    } .pagination__tag_agsdl.pagination__tag_agsdl.pagination__checked_agsdl:hover:not(:disabled) {
+        color: #0e0e0e;
+    } .pagination__tag_agsdl.pagination__tag_agsdl.pagination__checked_agsdl:active:not(:disabled) {
+        color: #fff;
+    }.comment__component_gw0is {
     background-color: #202022;
 }.circular-progress-bar__backgroundCircle_yrslb,
 .circular-progress-bar__progressCircle_yrslb {
@@ -1638,6 +1615,29 @@
         color: #85858d;
     }.list-header__filled_1vb2k {
     background-color: rgba(255, 255, 255, 0.1);
+}.chart__coreChart_1yhvr .recharts-text tspan {
+        fill: #fff;
+    }
+@keyframes chart__showDot_1scai {
+}
+
+.chart__tickText_11m3x {
+    fill: #fff;
+} .chart__circle_11m3x {
+    fill: #121212;
+} .chart__circle_11m3x {
+    fill: #121212;
+}
+.chart__tooltip_18obg {
+    background-color: #121212;
+    border: 1px solid #2b2b2e;
+    box-shadow: 0 24px 32px rgba(0, 0, 0, 0.08), 0 20px 24px rgba(0, 0, 0, 0.08),
+        0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+} .chart__tooltipArrow_18obg {
+    border: 1px solid #2b2b2e;
+    background-color: #121212;
+} .chart__tooltipArrow_18obg:before {
+    border-color: transparent #121212 transparent transparent;
 }.list__list_1nxgg {
     color: #fff;
 }
@@ -1756,19 +1756,31 @@
 .confirmation__typographyTheme_vtc6a.confirmation__typographyTheme_vtc6a {
     color: rgba(235, 235, 245, 0.54);
 }.custom-button__customButton_s3lv0.custom-button__white_s3lv0 * {
-        color: #fff;
+        color: #0e0e0e;
     } .custom-button__customButton_s3lv0.custom-button__black_s3lv0 * {
+        color: #fff;
+    } .custom-button__customButton_s3lv0.custom-button__static-white_s3lv0 * {
+        color: #fff;
+    } .custom-button__customButton_s3lv0.custom-button__static-black_s3lv0 * {
         color: #0e0e0e;
     } .custom-button__customButton_s3lv0:before {
         background-color: rgba(0, 0, 0, 0);
     } .custom-button__customButton_s3lv0.custom-button__darkening_s3lv0:hover:before {
-            background-color: rgba(0, 0, 0, 0.07);
+            background-color: rgba(255, 255, 255, 0.07);
         } .custom-button__customButton_s3lv0.custom-button__darkening_s3lv0:active:before {
-            background-color: rgba(0, 0, 0, 0.15);
-        } .custom-button__customButton_s3lv0.custom-button__lightening_s3lv0:hover:before {
             background-color: rgba(255, 255, 255, 0.15);
+        } .custom-button__customButton_s3lv0.custom-button__lightening_s3lv0:hover:before {
+            background-color: rgba(0, 0, 0, 0.07);
         } .custom-button__customButton_s3lv0.custom-button__lightening_s3lv0:active:before {
-            background-color: rgba(255, 255, 255, 0.2);
+            background-color: rgba(0, 0, 0, 0.15);
+        } .custom-button__customButton_s3lv0.custom-button__static-darkening_s3lv0:hover:before {
+            background-color: rgba(0, 0, 0, 0.07);
+        } .custom-button__customButton_s3lv0.custom-button__static-darkening_s3lv0:active:before {
+            background-color: rgba(0, 0, 0, 0.15);
+        } .custom-button__customButton_s3lv0.custom-button__static-lightening_s3lv0:hover:before {
+            background-color: rgba(255, 255, 255, 0.07);
+        } .custom-button__customButton_s3lv0.custom-button__static-lightening_s3lv0:active:before {
+            background-color: rgba(255, 255, 255, 0.15);
         } .custom-button__customButton_s3lv0:disabled.custom-button__white_s3lv0 * {
         color: #fff;
     } .custom-button__customButton_s3lv0:disabled.custom-button__black_s3lv0 * {
@@ -1937,6 +1949,10 @@
 } .input__error_gtxgo {
     color: #ef3124;
     caret-color: #ef3124;
+}.pattern-lock__error_7mq6g {
+    color: #f15045;
+} @media screen and (min-width: 360px) {
+} @media screen and (min-width: 390px) {
 }.pass-code__error_1osw8 {
     color: #f15045;
 }
@@ -1963,25 +1979,7 @@
         color: #fff;
     } .pass-code__ghost_ytnmr.pass-code__ghost_ytnmr:active {
         background: rgba(255, 255, 255, 0.11);
-    }.pattern-lock__error_7mq6g {
-    color: #f15045;
-} @media screen and (min-width: 360px) {
-} @media screen and (min-width: 390px) {
-}.pure-cell__focused_1qo83 {
-    outline: 2px solid #0072ef;
-}
-
-
-
-.pure-cell__categoryPercent_1xicb {
-    background-color: #202022;
-}
-
-
-
-
-
-.file-upload-item__component_vtenn {
+    }.file-upload-item__component_vtenn {
     color: rgba(235, 235, 245, 0.54);
     box-shadow: 0 -1px 0 0 #2b2b2e inset
 } .file-upload-item__icon_vtenn {
@@ -2018,7 +2016,21 @@
 } .navigation-bar__button_kkbwo.navigation-bar__mobile_kkbwo {
         background: rgba(255, 255, 255, 0.06);
         color: #85858d;
-    }.plate__component_kerpp {
+    }.pure-cell__focused_1qo83 {
+    outline: 2px solid #0072ef;
+}
+
+
+
+.pure-cell__categoryPercent_1xicb {
+    background-color: #202022;
+}
+
+
+
+
+
+.plate__component_kerpp {
     color: #fff
 } .plate__focused_kerpp {
     outline: 2px solid #0072ef;

package/themes/dist/corp.css

@@ -379,6 +379,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(74, 89, 104);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(11, 31, 53, 0.15);
     --color-dark-border-underline-alpha-30: rgba(109, 121, 134, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(182, 188, 195, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -531,6 +535,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(33, 49, 68);
     --color-light-bg-secondary-inverted-shade-15: rgb(30, 45, 62);
     --color-light-bg-tertiary-shade-7: rgb(215, 217, 219);
+    --color-light-border-key-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-light-border-key-alpha-15: rgba(11, 31, 53, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(182, 188, 195, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(109, 121, 134, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);

package/themes/dist/dark.css

@@ -146,6 +146,10 @@
     --color-light-bg-secondary-inverted-shade-7: var(--color-dark-bg-secondary-inverted-tint-7);
     --color-light-bg-secondary-inverted-shade-15: var(--color-dark-bg-secondary-inverted-tint-15);
     --color-light-bg-tertiary-shade-7: var(--color-dark-bg-tertiary-tint-7);
+    --color-light-border-key-alpha-7: var(--color-dark-border-key-alpha-7);
+    --color-light-border-key-alpha-15: var(--color-dark-border-key-alpha-15);
+    --color-light-border-key-inverted-alpha-7: var(--color-dark-border-key-inverted-alpha-7);
+    --color-light-border-key-inverted-alpha-15: var(--color-dark-border-key-inverted-alpha-15);
     --color-light-border-underline-alpha-30: var(--color-dark-border-underline-alpha-30);
     --color-light-border-underline-inverted-alpha-30: var(
         --color-dark-border-underline-inverted-alpha-30

package/themes/dist/intranet.css

@@ -379,6 +379,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(0, 0, 0, 0.15);
     --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -531,6 +535,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
     --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
+    --color-light-border-key-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-light-border-key-alpha-15: rgba(0, 0, 0, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);

package/themes/dist/mixins/dark.css

@@ -146,6 +146,10 @@
     --color-light-bg-secondary-inverted-shade-7: var(--color-dark-bg-secondary-inverted-tint-7);
     --color-light-bg-secondary-inverted-shade-15: var(--color-dark-bg-secondary-inverted-tint-15);
     --color-light-bg-tertiary-shade-7: var(--color-dark-bg-tertiary-tint-7);
+    --color-light-border-key-alpha-7: var(--color-dark-border-key-alpha-7);
+    --color-light-border-key-alpha-15: var(--color-dark-border-key-alpha-15);
+    --color-light-border-key-inverted-alpha-7: var(--color-dark-border-key-inverted-alpha-7);
+    --color-light-border-key-inverted-alpha-15: var(--color-dark-border-key-inverted-alpha-15);
     --color-light-border-underline-alpha-30: var(--color-dark-border-underline-alpha-30);
     --color-light-border-underline-inverted-alpha-30: var(
         --color-dark-border-underline-inverted-alpha-30

package/themes/dist/mobile.css

@@ -379,6 +379,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(0, 0, 0, 0.15);
     --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -531,6 +535,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
     --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
+    --color-light-border-key-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-light-border-key-alpha-15: rgba(0, 0, 0, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);

package/themes/dist/site.css

@@ -379,6 +379,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(74, 89, 104);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(11, 31, 53, 0.15);
     --color-dark-border-underline-alpha-30: rgba(109, 121, 134, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(182, 188, 195, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -531,6 +535,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(33, 49, 68);
     --color-light-bg-secondary-inverted-shade-15: rgb(30, 45, 62);
     --color-light-bg-tertiary-shade-7: rgb(215, 217, 219);
+    --color-light-border-key-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-light-border-key-alpha-15: rgba(11, 31, 53, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(182, 188, 195, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(109, 121, 134, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);

package/themes/intranet.css

@@ -379,6 +379,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(0, 0, 0, 0.15);
     --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -531,6 +535,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
     --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
+    --color-light-border-key-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-light-border-key-alpha-15: rgba(0, 0, 0, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);

package/themes/mixins/dark.css

@@ -146,6 +146,10 @@
     --color-light-bg-secondary-inverted-shade-7: var(--color-dark-bg-secondary-inverted-tint-7);
     --color-light-bg-secondary-inverted-shade-15: var(--color-dark-bg-secondary-inverted-tint-15);
     --color-light-bg-tertiary-shade-7: var(--color-dark-bg-tertiary-tint-7);
+    --color-light-border-key-alpha-7: var(--color-dark-border-key-alpha-7);
+    --color-light-border-key-alpha-15: var(--color-dark-border-key-alpha-15);
+    --color-light-border-key-inverted-alpha-7: var(--color-dark-border-key-inverted-alpha-7);
+    --color-light-border-key-inverted-alpha-15: var(--color-dark-border-key-inverted-alpha-15);
     --color-light-border-underline-alpha-30: var(--color-dark-border-underline-alpha-30);
     --color-light-border-underline-inverted-alpha-30: var(
         --color-dark-border-underline-inverted-alpha-30

package/themes/mobile.css

@@ -379,6 +379,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(0, 0, 0, 0.15);
     --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -531,6 +535,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
     --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
+    --color-light-border-key-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-light-border-key-alpha-15: rgba(0, 0, 0, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);

package/themes/site.css

@@ -379,6 +379,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(74, 89, 104);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(11, 31, 53, 0.15);
     --color-dark-border-underline-alpha-30: rgba(109, 121, 134, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(182, 188, 195, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -531,6 +535,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(33, 49, 68);
     --color-light-bg-secondary-inverted-shade-15: rgb(30, 45, 62);
     --color-light-bg-tertiary-shade-7: rgb(215, 217, 219);
+    --color-light-border-key-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-light-border-key-alpha-15: rgba(11, 31, 53, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(182, 188, 195, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(109, 121, 134, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);

package/typography/component.js

@@ -7,9 +7,9 @@ var titleResponsive_component = require('./title-responsive/component.js');
 require('tslib');
 require('react');
 require('classnames');
-require('./colors.module-67575777.js');
+require('./colors.module-168327cb.js');
 require('./title/component.js');
-require('./common.module-b49fc5ec.js');
+require('./common.module-f05add6c.js');
 
 var Typography = {
     Title: title_index.Title,

package/typography/esm/component.js

@@ -5,9 +5,9 @@ import { TitleResponsive } from './title-responsive/component.js';
 import 'tslib';
 import 'react';
 import 'classnames';
-import './colors.module-1972613e.js';
+import './colors.module-7d1dea57.js';
 import './title/component.js';
-import './common.module-8eb87ba7.js';
+import './common.module-3a01cbf5.js';
 
 var Typography = {
     Title: Title,

package/typography/esm/index.js

@@ -4,9 +4,9 @@ import './text/component.js';
 import 'tslib';
 import 'react';
 import 'classnames';
-import './colors.module-1972613e.js';
+import './colors.module-7d1dea57.js';
 import './title/index.js';
 import './title/component.js';
-import './common.module-8eb87ba7.js';
+import './common.module-3a01cbf5.js';
 import './title-mobile/component.js';
 import './title-responsive/component.js';

package/typography/esm/text/component.js

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
-import { c as colors } from '../colors.module-1972613e.js';
+import { c as colors } from '../colors.module-7d1dea57.js';
 
 var styles = {"paragraph":"typography__paragraph_1oway","paragraphWithMargins":"typography__paragraphWithMargins_1oway","primary-large":"typography__primary-large_1oway","primary-medium":"typography__primary-medium_1oway","primary-small":"typography__primary-small_1oway","secondary-large":"typography__secondary-large_1oway","secondary-medium":"typography__secondary-medium_1oway","secondary-small":"typography__secondary-small_1oway","component":"typography__component_1oway","caps":"typography__caps_1oway","bold":"typography__bold_1oway","medium":"typography__medium_1oway","regular":"typography__regular_1oway","monospace":"typography__monospace_1oway","rowLimit1":"typography__rowLimit1_1oway","rowLimit2":"typography__rowLimit2_1oway","rowLimit3":"typography__rowLimit3_1oway"};
 require('./index.css');

package/typography/esm/text/index.js

@@ -2,4 +2,4 @@ export { Text } from './component.js';
 import 'tslib';
 import 'react';
 import 'classnames';
-import '../colors.module-1972613e.js';
+import '../colors.module-7d1dea57.js';

package/typography/esm/title/component.js

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
-import { c as colors } from '../colors.module-1972613e.js';
+import { c as colors } from '../colors.module-7d1dea57.js';
 
 var Title = forwardRef(function (_a, ref) {
     var _b;