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

package/typography/esm/title/index.js

@@ -1,9 +1,9 @@
 import { __assign } from 'tslib';
 import React from 'react';
 import { Title as Title$1 } from './component.js';
-import { c as commonStyles } from '../common.module-8eb87ba7.js';
+import { c as commonStyles } from '../common.module-3a01cbf5.js';
 import 'classnames';
-import '../colors.module-1972613e.js';
+import '../colors.module-7d1dea57.js';
 
 var styles = {"styrene-xlarge":"typography__styrene-xlarge_2fo3k","styrene-large":"typography__styrene-large_2fo3k","styrene-medium":"typography__styrene-medium_2fo3k","styrene-small":"typography__styrene-small_2fo3k","styrene-xsmall":"typography__styrene-xsmall_2fo3k","system-xlarge":"typography__system-xlarge_2fo3k","system-large":"typography__system-large_2fo3k","system-medium":"typography__system-medium_2fo3k","system-small":"typography__system-small_2fo3k","system-xsmall":"typography__system-xsmall_2fo3k","margins-xlarge":"typography__margins-xlarge_2fo3k","margins-large":"typography__margins-large_2fo3k","margins-medium":"typography__margins-medium_2fo3k","margins-small":"typography__margins-small_2fo3k","margins-xsmall":"typography__margins-xsmall_2fo3k","rowLimit1":"typography__rowLimit1_2fo3k","rowLimit2":"typography__rowLimit2_2fo3k","rowLimit3":"typography__rowLimit3_2fo3k"};
 require('./index.css');

package/typography/esm/title-mobile/component.js

@@ -1,9 +1,9 @@
 import { __assign } from 'tslib';
 import React from 'react';
 import { Title } from '../title/component.js';
-import { c as commonStyles } from '../common.module-8eb87ba7.js';
+import { c as commonStyles } from '../common.module-3a01cbf5.js';
 import 'classnames';
-import '../colors.module-1972613e.js';
+import '../colors.module-7d1dea57.js';
 
 var styles = {"styrene-xlarge":"typography__styrene-xlarge_10c84","styrene-large":"typography__styrene-large_10c84","styrene-medium":"typography__styrene-medium_10c84","styrene-small":"typography__styrene-small_10c84","styrene-xsmall":"typography__styrene-xsmall_10c84","system-xlarge":"typography__system-xlarge_10c84","system-large":"typography__system-large_10c84","system-medium":"typography__system-medium_10c84","system-small":"typography__system-small_10c84","system-xsmall":"typography__system-xsmall_10c84"};
 require('./index.css');

package/typography/esm/title-mobile/index.js

@@ -3,5 +3,5 @@ import 'tslib';
 import 'react';
 import '../title/component.js';
 import 'classnames';
-import '../colors.module-1972613e.js';
-import '../common.module-8eb87ba7.js';
+import '../colors.module-7d1dea57.js';
+import '../common.module-3a01cbf5.js';

package/typography/esm/title-responsive/component.js

@@ -1,9 +1,9 @@
 import { __assign } from 'tslib';
 import React from 'react';
 import { Title } from '../title/component.js';
-import { c as commonStyles } from '../common.module-8eb87ba7.js';
+import { c as commonStyles } from '../common.module-3a01cbf5.js';
 import 'classnames';
-import '../colors.module-1972613e.js';
+import '../colors.module-7d1dea57.js';
 
 var styles = {"styrene-xlarge":"typography__styrene-xlarge_7gwto","styrene-large":"typography__styrene-large_7gwto","styrene-medium":"typography__styrene-medium_7gwto","styrene-small":"typography__styrene-small_7gwto","styrene-xsmall":"typography__styrene-xsmall_7gwto","system-xlarge":"typography__system-xlarge_7gwto","system-large":"typography__system-large_7gwto","system-medium":"typography__system-medium_7gwto","system-small":"typography__system-small_7gwto","system-xsmall":"typography__system-xsmall_7gwto","margins-xlarge":"typography__margins-xlarge_7gwto","margins-large":"typography__margins-large_7gwto","margins-medium":"typography__margins-medium_7gwto","margins-small":"typography__margins-small_7gwto","margins-xsmall":"typography__margins-xsmall_7gwto"};
 require('./index.css');

package/typography/esm/title-responsive/index.js

@@ -3,5 +3,5 @@ import 'tslib';
 import 'react';
 import '../title/component.js';
 import 'classnames';
-import '../colors.module-1972613e.js';
-import '../common.module-8eb87ba7.js';
+import '../colors.module-7d1dea57.js';
+import '../common.module-3a01cbf5.js';

package/typography/index.js

@@ -6,10 +6,10 @@ require('./text/component.js');
 require('tslib');
 require('react');
 require('classnames');
-require('./colors.module-67575777.js');
+require('./colors.module-168327cb.js');
 require('./title/index.js');
 require('./title/component.js');
-require('./common.module-b49fc5ec.js');
+require('./common.module-f05add6c.js');
 require('./title-mobile/component.js');
 require('./title-responsive/component.js');
 

package/typography/modern/component.js

@@ -4,9 +4,9 @@ import { TitleMobile } from './title-mobile/component.js';
 import { TitleResponsive } from './title-responsive/component.js';
 import 'react';
 import 'classnames';
-import './colors.module-7900da3a.js';
+import './colors.module-0b9dc896.js';
 import './title/component.js';
-import './common.module-b57f0592.js';
+import './common.module-e63b7ae2.js';
 
 const Typography = {
     Title,

package/typography/modern/index.js

@@ -3,9 +3,9 @@ export { typographyPresets } from './presets.js';
 import './text/component.js';
 import 'react';
 import 'classnames';
-import './colors.module-7900da3a.js';
+import './colors.module-0b9dc896.js';
 import './title/index.js';
 import './title/component.js';
-import './common.module-b57f0592.js';
+import './common.module-e63b7ae2.js';
 import './title-mobile/component.js';
 import './title-responsive/component.js';

package/typography/modern/text/component.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
-import { c as colors } from '../colors.module-7900da3a.js';
+import { c as colors } from '../colors.module-0b9dc896.js';
 
 const 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/modern/text/index.js

@@ -1,4 +1,4 @@
 export { Text } from './component.js';
 import 'react';
 import 'classnames';
-import '../colors.module-7900da3a.js';
+import '../colors.module-0b9dc896.js';

package/typography/modern/title/component.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
-import { c as colors } from '../colors.module-7900da3a.js';
+import { c as colors } from '../colors.module-0b9dc896.js';
 
 const Title = forwardRef(({ tag: Component = 'div', view = 'medium', font = 'styrene', weight = font === 'styrene' ? 'medium' : 'bold', defaultMargins = false, color, className, dataTestId, children, rowLimit, styles, ...restProps }, ref) => (React.createElement(Component, { className: cn(styles.component, className, styles[`${font}-${view}`], defaultMargins && styles[`margins-${view}`], styles[weight], color && colors[color], { [styles[`rowLimit${rowLimit}`]]: rowLimit }), "data-test-id": dataTestId, ref: ref, ...restProps }, children)));
 

package/typography/modern/title/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Title as Title$1 } from './component.js';
-import { c as commonStyles } from '../common.module-b57f0592.js';
+import { c as commonStyles } from '../common.module-e63b7ae2.js';
 import 'classnames';
-import '../colors.module-7900da3a.js';
+import '../colors.module-0b9dc896.js';
 
 const styles = {"styrene-xlarge":"typography__styrene-xlarge_2fo3k","styrene-large":"typography__styrene-large_2fo3k","styrene-medium":"typography__styrene-medium_2fo3k","styrene-small":"typography__styrene-small_2fo3k","styrene-xsmall":"typography__styrene-xsmall_2fo3k","system-xlarge":"typography__system-xlarge_2fo3k","system-large":"typography__system-large_2fo3k","system-medium":"typography__system-medium_2fo3k","system-small":"typography__system-small_2fo3k","system-xsmall":"typography__system-xsmall_2fo3k","margins-xlarge":"typography__margins-xlarge_2fo3k","margins-large":"typography__margins-large_2fo3k","margins-medium":"typography__margins-medium_2fo3k","margins-small":"typography__margins-small_2fo3k","margins-xsmall":"typography__margins-xsmall_2fo3k","rowLimit1":"typography__rowLimit1_2fo3k","rowLimit2":"typography__rowLimit2_2fo3k","rowLimit3":"typography__rowLimit3_2fo3k"};
 require('./index.css');

package/typography/modern/title-mobile/component.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Title } from '../title/component.js';
-import { c as commonStyles } from '../common.module-b57f0592.js';
+import { c as commonStyles } from '../common.module-e63b7ae2.js';
 import 'classnames';
-import '../colors.module-7900da3a.js';
+import '../colors.module-0b9dc896.js';
 
 const styles = {"styrene-xlarge":"typography__styrene-xlarge_10c84","styrene-large":"typography__styrene-large_10c84","styrene-medium":"typography__styrene-medium_10c84","styrene-small":"typography__styrene-small_10c84","styrene-xsmall":"typography__styrene-xsmall_10c84","system-xlarge":"typography__system-xlarge_10c84","system-large":"typography__system-large_10c84","system-medium":"typography__system-medium_10c84","system-small":"typography__system-small_10c84","system-xsmall":"typography__system-xsmall_10c84"};
 require('./index.css');

package/typography/modern/title-mobile/index.js

@@ -2,5 +2,5 @@ export { TitleMobile } from './component.js';
 import 'react';
 import '../title/component.js';
 import 'classnames';
-import '../colors.module-7900da3a.js';
-import '../common.module-b57f0592.js';
+import '../colors.module-0b9dc896.js';
+import '../common.module-e63b7ae2.js';

package/typography/modern/title-responsive/component.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Title } from '../title/component.js';
-import { c as commonStyles } from '../common.module-b57f0592.js';
+import { c as commonStyles } from '../common.module-e63b7ae2.js';
 import 'classnames';
-import '../colors.module-7900da3a.js';
+import '../colors.module-0b9dc896.js';
 
 const styles = {"styrene-xlarge":"typography__styrene-xlarge_7gwto","styrene-large":"typography__styrene-large_7gwto","styrene-medium":"typography__styrene-medium_7gwto","styrene-small":"typography__styrene-small_7gwto","styrene-xsmall":"typography__styrene-xsmall_7gwto","system-xlarge":"typography__system-xlarge_7gwto","system-large":"typography__system-large_7gwto","system-medium":"typography__system-medium_7gwto","system-small":"typography__system-small_7gwto","system-xsmall":"typography__system-xsmall_7gwto","margins-xlarge":"typography__margins-xlarge_7gwto","margins-large":"typography__margins-large_7gwto","margins-medium":"typography__margins-medium_7gwto","margins-small":"typography__margins-small_7gwto","margins-xsmall":"typography__margins-xsmall_7gwto"};
 require('./index.css');

package/typography/modern/title-responsive/index.js

@@ -2,5 +2,5 @@ export { TitleResponsive } from './component.js';
 import 'react';
 import '../title/component.js';
 import 'classnames';
-import '../colors.module-7900da3a.js';
-import '../common.module-b57f0592.js';
+import '../colors.module-0b9dc896.js';
+import '../common.module-e63b7ae2.js';

package/typography/text/component.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
-var colors_module = require('../colors.module-67575777.js');
+var colors_module = require('../colors.module-168327cb.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/typography/text/index.js

@@ -4,7 +4,7 @@ var text_component = require('./component.js');
 require('tslib');
 require('react');
 require('classnames');
-require('../colors.module-67575777.js');
+require('../colors.module-168327cb.js');
 
 
 

package/typography/title/component.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
-var colors_module = require('../colors.module-67575777.js');
+var colors_module = require('../colors.module-168327cb.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/typography/title/index.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var title_component = require('./component.js');
-var common_module = require('../common.module-b49fc5ec.js');
+var common_module = require('../common.module-f05add6c.js');
 require('classnames');
-require('../colors.module-67575777.js');
+require('../colors.module-168327cb.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/typography/title-mobile/component.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var title_component = require('../title/component.js');
-var common_module = require('../common.module-b49fc5ec.js');
+var common_module = require('../common.module-f05add6c.js');
 require('classnames');
-require('../colors.module-67575777.js');
+require('../colors.module-168327cb.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/typography/title-mobile/index.js

@@ -5,8 +5,8 @@ require('tslib');
 require('react');
 require('../title/component.js');
 require('classnames');
-require('../colors.module-67575777.js');
-require('../common.module-b49fc5ec.js');
+require('../colors.module-168327cb.js');
+require('../common.module-f05add6c.js');
 
 
 

package/typography/title-responsive/component.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var title_component = require('../title/component.js');
-var common_module = require('../common.module-b49fc5ec.js');
+var common_module = require('../common.module-f05add6c.js');
 require('classnames');
-require('../colors.module-67575777.js');
+require('../colors.module-168327cb.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/typography/title-responsive/index.js

@@ -5,8 +5,8 @@ require('tslib');
 require('react');
 require('../title/component.js');
 require('classnames');
-require('../colors.module-67575777.js');
-require('../common.module-b49fc5ec.js');
+require('../colors.module-168327cb.js');
+require('../common.module-f05add6c.js');
 
 
 

package/vars/colors-bluetint.css

@@ -241,6 +241,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);
@@ -393,6 +397,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/vars/colors-indigo.css

@@ -241,6 +241,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);
@@ -393,6 +397,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/vars/cssm/bundle/click.css

@@ -241,6 +241,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);
@@ -393,6 +397,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/vars/cssm/bundle/corp.css

@@ -241,6 +241,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);
@@ -393,6 +397,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/vars/cssm/bundle/intranet.css

@@ -241,6 +241,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);
@@ -393,6 +397,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/vars/cssm/bundle/mobile.css

@@ -241,6 +241,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);
@@ -393,6 +397,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/vars/cssm/bundle/site.css

@@ -241,6 +241,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);
@@ -393,6 +397,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/vars/cssm/colors-bluetint.css

@@ -241,6 +241,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);
@@ -393,6 +397,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/vars/cssm/colors-indigo.css

@@ -241,6 +241,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);
@@ -393,6 +397,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/vars/cssm/index.css

@@ -311,6 +311,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);
@@ -463,6 +467,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/vars/dist/colors-bluetint.css

@@ -241,6 +241,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);
@@ -393,6 +397,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/vars/dist/colors-indigo.css

@@ -241,6 +241,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);
@@ -393,6 +397,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/vars/dist/cssm/bundle/click.css

@@ -241,6 +241,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);
@@ -393,6 +397,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/vars/dist/cssm/bundle/corp.css

@@ -241,6 +241,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);
@@ -393,6 +397,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);