@alfalab/core-components-vars 9.11.0 → 9.12.0

package/cssm/index.css

@@ -1482,6 +1482,7 @@
     --border-radius-16: 16px;
     --border-radius-20: 20px;
     --border-radius-24: 24px;
+    --border-radius-32: 32px;
     --border-radius-36: 36px;
     --border-radius-64: 64px;
 } :root {
@@ -1517,41 +1518,53 @@
 
     /* новые значения, используйте их */
     --gap-0: 0;
-    --gap-2: 2px;
-    --gap-4: 4px;
-    --gap-8: 8px;
-    --gap-12: 12px;
-    --gap-16: 16px;
-    --gap-20: 20px;
-    --gap-24: 24px;
-    --gap-32: 32px;
-    --gap-40: 40px;
-    --gap-48: 48px;
+    --gap-2: var(--gap-3xs);
+    --gap-4: var(--gap-2xs);
+    --gap-8: var(--gap-xs);
+    --gap-12: var(--gap-s);
+    --gap-16: var(--gap-m);
+    --gap-20: var(--gap-l);
+    --gap-24: var(--gap-xl);
+    --gap-32: var(--gap-2xl);
+    --gap-40: var(--gap-3xl);
+    --gap-48: var(--gap-4xl);
     --gap-56: 56px;
-    --gap-64: 64px;
-    --gap-72: 72px;
+    --gap-64: var(--gap-5xl);
+    --gap-72: var(--gap-6xl);
     --gap-80: 80px;
-    --gap-96: 96px;
-    --gap-128: 128px;
-    --gap-2-neg: -2px;
-    --gap-4-neg: -4px;
-    --gap-8-neg: -8px;
-    --gap-12-neg: -12px;
-    --gap-16-neg: -16px;
-    --gap-20-neg: -20px;
-    --gap-24-neg: -24px;
-    --gap-32-neg: -32px;
-    --gap-40-neg: -40px;
-    --gap-48-neg: -48px;
+    --gap-96: var(--gap-7xl);
+    --gap-128: var(--gap-8xl);
+    --gap-2-neg: var(--gap-3xs-neg);
+    --gap-4-neg: var(--gap-2xs-neg);
+    --gap-8-neg: var(--gap-xs-neg);
+    --gap-12-neg: var(--gap-s-neg);
+    --gap-16-neg: var(--gap-m-neg);
+    --gap-20-neg: var(--gap-l-neg);
+    --gap-24-neg: var(--gap-xl-neg);
+    --gap-32-neg: var(--gap-2xl-neg);
+    --gap-40-neg: var(--gap-3xl-neg);
+    --gap-48-neg: var(--gap-4xl-neg);
     --gap-56-neg: -56px;
-    --gap-64-neg: -64px;
-    --gap-72-neg: -72px;
+    --gap-64-neg: var(--gap-5xl-neg);
+    --gap-72-neg: var(--gap-6xl-neg);
     --gap-80-neg: -80px;
-    --gap-96-neg: -96px;
-    --gap-128-neg: -128px;
+    --gap-96-neg: var(--gap-7xl-neg);
+    --gap-128-neg: var(--gap-8xl-neg);
 } :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
+} :root {
+    --focus-color: var(--color-light-status-info);
+    --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+    --disabled-cursor: not-allowed;
+    --arrow-transform: rotate(180deg);
+    --size-xxs-height: 32px;
+    --size-xs-height: 40px;
+    --size-s-height: 48px;
+    --size-m-height: 56px;
+    --size-l-height: 64px;
+    --size-xl-height: 72px;
 }

package/cssm/index.d.ts

@@ -1453,6 +1453,7 @@ export const borderRadius12: "12px";
 export const borderRadius16: "16px";
 export const borderRadius20: "20px";
 export const borderRadius24: "24px";
+export const borderRadius32: "32px";
 export const borderRadius36: "36px";
 export const borderRadius64: "64px";
 export const gap3xs: "2px";
@@ -1485,37 +1486,47 @@ export const gap6xlNeg: "-72px";
 export const gap7xlNeg: "-96px";
 export const gap8xlNeg: "-128px";
 export const gap0: "0";
-export const gap2: "2px";
-export const gap4: "4px";
-export const gap8: "8px";
-export const gap12: "12px";
-export const gap16: "16px";
-export const gap20: "20px";
-export const gap24: "24px";
-export const gap32: "32px";
-export const gap40: "40px";
-export const gap48: "48px";
+export const gap2: "var(--gap-3xs)";
+export const gap4: "var(--gap-2xs)";
+export const gap8: "var(--gap-xs)";
+export const gap12: "var(--gap-s)";
+export const gap16: "var(--gap-m)";
+export const gap20: "var(--gap-l)";
+export const gap24: "var(--gap-xl)";
+export const gap32: "var(--gap-2xl)";
+export const gap40: "var(--gap-3xl)";
+export const gap48: "var(--gap-4xl)";
 export const gap56: "56px";
-export const gap64: "64px";
-export const gap72: "72px";
+export const gap64: "var(--gap-5xl)";
+export const gap72: "var(--gap-6xl)";
 export const gap80: "80px";
-export const gap96: "96px";
-export const gap128: "128px";
-export const gap2Neg: "-2px";
-export const gap4Neg: "-4px";
-export const gap8Neg: "-8px";
-export const gap12Neg: "-12px";
-export const gap16Neg: "-16px";
-export const gap20Neg: "-20px";
-export const gap24Neg: "-24px";
-export const gap32Neg: "-32px";
-export const gap40Neg: "-40px";
-export const gap48Neg: "-48px";
+export const gap96: "var(--gap-7xl)";
+export const gap128: "var(--gap-8xl)";
+export const gap2Neg: "var(--gap-3xs-neg)";
+export const gap4Neg: "var(--gap-2xs-neg)";
+export const gap8Neg: "var(--gap-xs-neg)";
+export const gap12Neg: "var(--gap-s-neg)";
+export const gap16Neg: "var(--gap-m-neg)";
+export const gap20Neg: "var(--gap-l-neg)";
+export const gap24Neg: "var(--gap-xl-neg)";
+export const gap32Neg: "var(--gap-2xl-neg)";
+export const gap40Neg: "var(--gap-3xl-neg)";
+export const gap48Neg: "var(--gap-4xl-neg)";
 export const gap56Neg: "-56px";
-export const gap64Neg: "-64px";
-export const gap72Neg: "-72px";
+export const gap64Neg: "var(--gap-5xl-neg)";
+export const gap72Neg: "var(--gap-6xl-neg)";
 export const gap80Neg: "-80px";
-export const gap96Neg: "-96px";
-export const gap128Neg: "-128px";
+export const gap96Neg: "var(--gap-7xl-neg)";
+export const gap128Neg: "var(--gap-8xl-neg)";
 export const fontFamilySystem: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,\n        sans-serif";
 export const fontFamilyStyrene: "'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,\n        'Helvetica Neue', Helvetica, sans-serif";
+export const focusColor: "var(--color-light-status-info)";
+export const fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,\n        sans-serif";
+export const disabledCursor: "not-allowed";
+export const arrowTransform: "rotate(180deg)";
+export const sizeXxsHeight: "32px";
+export const sizeXsHeight: "40px";
+export const sizeSHeight: "48px";
+export const sizeMHeight: "56px";
+export const sizeLHeight: "64px";
+export const sizeXlHeight: "72px";

package/cssm/index.js

@@ -1453,6 +1453,7 @@ module.exports.borderRadius12 = "12px";
 module.exports.borderRadius16 = "16px";
 module.exports.borderRadius20 = "20px";
 module.exports.borderRadius24 = "24px";
+module.exports.borderRadius32 = "32px";
 module.exports.borderRadius36 = "36px";
 module.exports.borderRadius64 = "64px";
 module.exports.gap3xs = "2px";
@@ -1485,37 +1486,47 @@ module.exports.gap6xlNeg = "-72px";
 module.exports.gap7xlNeg = "-96px";
 module.exports.gap8xlNeg = "-128px";
 module.exports.gap0 = "0";
-module.exports.gap2 = "2px";
-module.exports.gap4 = "4px";
-module.exports.gap8 = "8px";
-module.exports.gap12 = "12px";
-module.exports.gap16 = "16px";
-module.exports.gap20 = "20px";
-module.exports.gap24 = "24px";
-module.exports.gap32 = "32px";
-module.exports.gap40 = "40px";
-module.exports.gap48 = "48px";
+module.exports.gap2 = "var(--gap-3xs)";
+module.exports.gap4 = "var(--gap-2xs)";
+module.exports.gap8 = "var(--gap-xs)";
+module.exports.gap12 = "var(--gap-s)";
+module.exports.gap16 = "var(--gap-m)";
+module.exports.gap20 = "var(--gap-l)";
+module.exports.gap24 = "var(--gap-xl)";
+module.exports.gap32 = "var(--gap-2xl)";
+module.exports.gap40 = "var(--gap-3xl)";
+module.exports.gap48 = "var(--gap-4xl)";
 module.exports.gap56 = "56px";
-module.exports.gap64 = "64px";
-module.exports.gap72 = "72px";
+module.exports.gap64 = "var(--gap-5xl)";
+module.exports.gap72 = "var(--gap-6xl)";
 module.exports.gap80 = "80px";
-module.exports.gap96 = "96px";
-module.exports.gap128 = "128px";
-module.exports.gap2Neg = "-2px";
-module.exports.gap4Neg = "-4px";
-module.exports.gap8Neg = "-8px";
-module.exports.gap12Neg = "-12px";
-module.exports.gap16Neg = "-16px";
-module.exports.gap20Neg = "-20px";
-module.exports.gap24Neg = "-24px";
-module.exports.gap32Neg = "-32px";
-module.exports.gap40Neg = "-40px";
-module.exports.gap48Neg = "-48px";
+module.exports.gap96 = "var(--gap-7xl)";
+module.exports.gap128 = "var(--gap-8xl)";
+module.exports.gap2Neg = "var(--gap-3xs-neg)";
+module.exports.gap4Neg = "var(--gap-2xs-neg)";
+module.exports.gap8Neg = "var(--gap-xs-neg)";
+module.exports.gap12Neg = "var(--gap-s-neg)";
+module.exports.gap16Neg = "var(--gap-m-neg)";
+module.exports.gap20Neg = "var(--gap-l-neg)";
+module.exports.gap24Neg = "var(--gap-xl-neg)";
+module.exports.gap32Neg = "var(--gap-2xl-neg)";
+module.exports.gap40Neg = "var(--gap-3xl-neg)";
+module.exports.gap48Neg = "var(--gap-4xl-neg)";
 module.exports.gap56Neg = "-56px";
-module.exports.gap64Neg = "-64px";
-module.exports.gap72Neg = "-72px";
+module.exports.gap64Neg = "var(--gap-5xl-neg)";
+module.exports.gap72Neg = "var(--gap-6xl-neg)";
 module.exports.gap80Neg = "-80px";
-module.exports.gap96Neg = "-96px";
-module.exports.gap128Neg = "-128px";
+module.exports.gap96Neg = "var(--gap-7xl-neg)";
+module.exports.gap128Neg = "var(--gap-8xl-neg)";
 module.exports.fontFamilySystem = "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,\n        sans-serif";
 module.exports.fontFamilyStyrene = "'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,\n        'Helvetica Neue', Helvetica, sans-serif";
+module.exports.focusColor = "var(--color-light-status-info)";
+module.exports.fontFamily = "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,\n        sans-serif";
+module.exports.disabledCursor = "not-allowed";
+module.exports.arrowTransform = "rotate(180deg)";
+module.exports.sizeXxsHeight = "32px";
+module.exports.sizeXsHeight = "40px";
+module.exports.sizeSHeight = "48px";
+module.exports.sizeMHeight = "56px";
+module.exports.sizeLHeight = "64px";
+module.exports.sizeXlHeight = "72px";

package/esm/index.d.ts

@@ -1453,6 +1453,7 @@ export const borderRadius12: "12px";
 export const borderRadius16: "16px";
 export const borderRadius20: "20px";
 export const borderRadius24: "24px";
+export const borderRadius32: "32px";
 export const borderRadius36: "36px";
 export const borderRadius64: "64px";
 export const gap3xs: "2px";
@@ -1485,37 +1486,47 @@ export const gap6xlNeg: "-72px";
 export const gap7xlNeg: "-96px";
 export const gap8xlNeg: "-128px";
 export const gap0: "0";
-export const gap2: "2px";
-export const gap4: "4px";
-export const gap8: "8px";
-export const gap12: "12px";
-export const gap16: "16px";
-export const gap20: "20px";
-export const gap24: "24px";
-export const gap32: "32px";
-export const gap40: "40px";
-export const gap48: "48px";
+export const gap2: "var(--gap-3xs)";
+export const gap4: "var(--gap-2xs)";
+export const gap8: "var(--gap-xs)";
+export const gap12: "var(--gap-s)";
+export const gap16: "var(--gap-m)";
+export const gap20: "var(--gap-l)";
+export const gap24: "var(--gap-xl)";
+export const gap32: "var(--gap-2xl)";
+export const gap40: "var(--gap-3xl)";
+export const gap48: "var(--gap-4xl)";
 export const gap56: "56px";
-export const gap64: "64px";
-export const gap72: "72px";
+export const gap64: "var(--gap-5xl)";
+export const gap72: "var(--gap-6xl)";
 export const gap80: "80px";
-export const gap96: "96px";
-export const gap128: "128px";
-export const gap2Neg: "-2px";
-export const gap4Neg: "-4px";
-export const gap8Neg: "-8px";
-export const gap12Neg: "-12px";
-export const gap16Neg: "-16px";
-export const gap20Neg: "-20px";
-export const gap24Neg: "-24px";
-export const gap32Neg: "-32px";
-export const gap40Neg: "-40px";
-export const gap48Neg: "-48px";
+export const gap96: "var(--gap-7xl)";
+export const gap128: "var(--gap-8xl)";
+export const gap2Neg: "var(--gap-3xs-neg)";
+export const gap4Neg: "var(--gap-2xs-neg)";
+export const gap8Neg: "var(--gap-xs-neg)";
+export const gap12Neg: "var(--gap-s-neg)";
+export const gap16Neg: "var(--gap-m-neg)";
+export const gap20Neg: "var(--gap-l-neg)";
+export const gap24Neg: "var(--gap-xl-neg)";
+export const gap32Neg: "var(--gap-2xl-neg)";
+export const gap40Neg: "var(--gap-3xl-neg)";
+export const gap48Neg: "var(--gap-4xl-neg)";
 export const gap56Neg: "-56px";
-export const gap64Neg: "-64px";
-export const gap72Neg: "-72px";
+export const gap64Neg: "var(--gap-5xl-neg)";
+export const gap72Neg: "var(--gap-6xl-neg)";
 export const gap80Neg: "-80px";
-export const gap96Neg: "-96px";
-export const gap128Neg: "-128px";
+export const gap96Neg: "var(--gap-7xl-neg)";
+export const gap128Neg: "var(--gap-8xl-neg)";
 export const fontFamilySystem: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,\n        sans-serif";
 export const fontFamilyStyrene: "'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,\n        'Helvetica Neue', Helvetica, sans-serif";
+export const focusColor: "var(--color-light-status-info)";
+export const fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,\n        sans-serif";
+export const disabledCursor: "not-allowed";
+export const arrowTransform: "rotate(180deg)";
+export const sizeXxsHeight: "32px";
+export const sizeXsHeight: "40px";
+export const sizeSHeight: "48px";
+export const sizeMHeight: "56px";
+export const sizeLHeight: "64px";
+export const sizeXlHeight: "72px";

package/esm/index.js

@@ -1453,6 +1453,7 @@ export const borderRadius12 = "12px";
 export const borderRadius16 = "16px";
 export const borderRadius20 = "20px";
 export const borderRadius24 = "24px";
+export const borderRadius32 = "32px";
 export const borderRadius36 = "36px";
 export const borderRadius64 = "64px";
 export const gap3xs = "2px";
@@ -1485,37 +1486,47 @@ export const gap6xlNeg = "-72px";
 export const gap7xlNeg = "-96px";
 export const gap8xlNeg = "-128px";
 export const gap0 = "0";
-export const gap2 = "2px";
-export const gap4 = "4px";
-export const gap8 = "8px";
-export const gap12 = "12px";
-export const gap16 = "16px";
-export const gap20 = "20px";
-export const gap24 = "24px";
-export const gap32 = "32px";
-export const gap40 = "40px";
-export const gap48 = "48px";
+export const gap2 = "var(--gap-3xs)";
+export const gap4 = "var(--gap-2xs)";
+export const gap8 = "var(--gap-xs)";
+export const gap12 = "var(--gap-s)";
+export const gap16 = "var(--gap-m)";
+export const gap20 = "var(--gap-l)";
+export const gap24 = "var(--gap-xl)";
+export const gap32 = "var(--gap-2xl)";
+export const gap40 = "var(--gap-3xl)";
+export const gap48 = "var(--gap-4xl)";
 export const gap56 = "56px";
-export const gap64 = "64px";
-export const gap72 = "72px";
+export const gap64 = "var(--gap-5xl)";
+export const gap72 = "var(--gap-6xl)";
 export const gap80 = "80px";
-export const gap96 = "96px";
-export const gap128 = "128px";
-export const gap2Neg = "-2px";
-export const gap4Neg = "-4px";
-export const gap8Neg = "-8px";
-export const gap12Neg = "-12px";
-export const gap16Neg = "-16px";
-export const gap20Neg = "-20px";
-export const gap24Neg = "-24px";
-export const gap32Neg = "-32px";
-export const gap40Neg = "-40px";
-export const gap48Neg = "-48px";
+export const gap96 = "var(--gap-7xl)";
+export const gap128 = "var(--gap-8xl)";
+export const gap2Neg = "var(--gap-3xs-neg)";
+export const gap4Neg = "var(--gap-2xs-neg)";
+export const gap8Neg = "var(--gap-xs-neg)";
+export const gap12Neg = "var(--gap-s-neg)";
+export const gap16Neg = "var(--gap-m-neg)";
+export const gap20Neg = "var(--gap-l-neg)";
+export const gap24Neg = "var(--gap-xl-neg)";
+export const gap32Neg = "var(--gap-2xl-neg)";
+export const gap40Neg = "var(--gap-3xl-neg)";
+export const gap48Neg = "var(--gap-4xl-neg)";
 export const gap56Neg = "-56px";
-export const gap64Neg = "-64px";
-export const gap72Neg = "-72px";
+export const gap64Neg = "var(--gap-5xl-neg)";
+export const gap72Neg = "var(--gap-6xl-neg)";
 export const gap80Neg = "-80px";
-export const gap96Neg = "-96px";
-export const gap128Neg = "-128px";
+export const gap96Neg = "var(--gap-7xl-neg)";
+export const gap128Neg = "var(--gap-8xl-neg)";
 export const fontFamilySystem = "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,\n        sans-serif";
 export const fontFamilyStyrene = "'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,\n        'Helvetica Neue', Helvetica, sans-serif";
+export const focusColor = "var(--color-light-status-info)";
+export const fontFamily = "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,\n        sans-serif";
+export const disabledCursor = "not-allowed";
+export const arrowTransform = "rotate(180deg)";
+export const sizeXxsHeight = "32px";
+export const sizeXsHeight = "40px";
+export const sizeSHeight = "48px";
+export const sizeMHeight = "56px";
+export const sizeLHeight = "64px";
+export const sizeXlHeight = "72px";

package/gaps.css

@@ -31,36 +31,36 @@
 
     /* новые значения, используйте их */
     --gap-0: 0;
-    --gap-2: 2px;
-    --gap-4: 4px;
-    --gap-8: 8px;
-    --gap-12: 12px;
-    --gap-16: 16px;
-    --gap-20: 20px;
-    --gap-24: 24px;
-    --gap-32: 32px;
-    --gap-40: 40px;
-    --gap-48: 48px;
+    --gap-2: var(--gap-3xs);
+    --gap-4: var(--gap-2xs);
+    --gap-8: var(--gap-xs);
+    --gap-12: var(--gap-s);
+    --gap-16: var(--gap-m);
+    --gap-20: var(--gap-l);
+    --gap-24: var(--gap-xl);
+    --gap-32: var(--gap-2xl);
+    --gap-40: var(--gap-3xl);
+    --gap-48: var(--gap-4xl);
     --gap-56: 56px;
-    --gap-64: 64px;
-    --gap-72: 72px;
+    --gap-64: var(--gap-5xl);
+    --gap-72: var(--gap-6xl);
     --gap-80: 80px;
-    --gap-96: 96px;
-    --gap-128: 128px;
-    --gap-2-neg: -2px;
-    --gap-4-neg: -4px;
-    --gap-8-neg: -8px;
-    --gap-12-neg: -12px;
-    --gap-16-neg: -16px;
-    --gap-20-neg: -20px;
-    --gap-24-neg: -24px;
-    --gap-32-neg: -32px;
-    --gap-40-neg: -40px;
-    --gap-48-neg: -48px;
+    --gap-96: var(--gap-7xl);
+    --gap-128: var(--gap-8xl);
+    --gap-2-neg: var(--gap-3xs-neg);
+    --gap-4-neg: var(--gap-2xs-neg);
+    --gap-8-neg: var(--gap-xs-neg);
+    --gap-12-neg: var(--gap-s-neg);
+    --gap-16-neg: var(--gap-m-neg);
+    --gap-20-neg: var(--gap-l-neg);
+    --gap-24-neg: var(--gap-xl-neg);
+    --gap-32-neg: var(--gap-2xl-neg);
+    --gap-40-neg: var(--gap-3xl-neg);
+    --gap-48-neg: var(--gap-4xl-neg);
     --gap-56-neg: -56px;
-    --gap-64-neg: -64px;
-    --gap-72-neg: -72px;
+    --gap-64-neg: var(--gap-5xl-neg);
+    --gap-72-neg: var(--gap-6xl-neg);
     --gap-80-neg: -80px;
-    --gap-96-neg: -96px;
-    --gap-128-neg: -128px;
+    --gap-96-neg: var(--gap-7xl-neg);
+    --gap-128-neg: var(--gap-8xl-neg);
 }

package/index.css

@@ -6,4 +6,5 @@
 @import './border-radius.css';
 @import './gaps.css';
 @import './typography.css';
+@import './common.css';
 @import './mixins.css';

package/index.d.ts

@@ -1453,6 +1453,7 @@ export const borderRadius12: "12px";
 export const borderRadius16: "16px";
 export const borderRadius20: "20px";
 export const borderRadius24: "24px";
+export const borderRadius32: "32px";
 export const borderRadius36: "36px";
 export const borderRadius64: "64px";
 export const gap3xs: "2px";
@@ -1485,37 +1486,47 @@ export const gap6xlNeg: "-72px";
 export const gap7xlNeg: "-96px";
 export const gap8xlNeg: "-128px";
 export const gap0: "0";
-export const gap2: "2px";
-export const gap4: "4px";
-export const gap8: "8px";
-export const gap12: "12px";
-export const gap16: "16px";
-export const gap20: "20px";
-export const gap24: "24px";
-export const gap32: "32px";
-export const gap40: "40px";
-export const gap48: "48px";
+export const gap2: "var(--gap-3xs)";
+export const gap4: "var(--gap-2xs)";
+export const gap8: "var(--gap-xs)";
+export const gap12: "var(--gap-s)";
+export const gap16: "var(--gap-m)";
+export const gap20: "var(--gap-l)";
+export const gap24: "var(--gap-xl)";
+export const gap32: "var(--gap-2xl)";
+export const gap40: "var(--gap-3xl)";
+export const gap48: "var(--gap-4xl)";
 export const gap56: "56px";
-export const gap64: "64px";
-export const gap72: "72px";
+export const gap64: "var(--gap-5xl)";
+export const gap72: "var(--gap-6xl)";
 export const gap80: "80px";
-export const gap96: "96px";
-export const gap128: "128px";
-export const gap2Neg: "-2px";
-export const gap4Neg: "-4px";
-export const gap8Neg: "-8px";
-export const gap12Neg: "-12px";
-export const gap16Neg: "-16px";
-export const gap20Neg: "-20px";
-export const gap24Neg: "-24px";
-export const gap32Neg: "-32px";
-export const gap40Neg: "-40px";
-export const gap48Neg: "-48px";
+export const gap96: "var(--gap-7xl)";
+export const gap128: "var(--gap-8xl)";
+export const gap2Neg: "var(--gap-3xs-neg)";
+export const gap4Neg: "var(--gap-2xs-neg)";
+export const gap8Neg: "var(--gap-xs-neg)";
+export const gap12Neg: "var(--gap-s-neg)";
+export const gap16Neg: "var(--gap-m-neg)";
+export const gap20Neg: "var(--gap-l-neg)";
+export const gap24Neg: "var(--gap-xl-neg)";
+export const gap32Neg: "var(--gap-2xl-neg)";
+export const gap40Neg: "var(--gap-3xl-neg)";
+export const gap48Neg: "var(--gap-4xl-neg)";
 export const gap56Neg: "-56px";
-export const gap64Neg: "-64px";
-export const gap72Neg: "-72px";
+export const gap64Neg: "var(--gap-5xl-neg)";
+export const gap72Neg: "var(--gap-6xl-neg)";
 export const gap80Neg: "-80px";
-export const gap96Neg: "-96px";
-export const gap128Neg: "-128px";
+export const gap96Neg: "var(--gap-7xl-neg)";
+export const gap128Neg: "var(--gap-8xl-neg)";
 export const fontFamilySystem: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,\n        sans-serif";
 export const fontFamilyStyrene: "'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,\n        'Helvetica Neue', Helvetica, sans-serif";
+export const focusColor: "var(--color-light-status-info)";
+export const fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,\n        sans-serif";
+export const disabledCursor: "not-allowed";
+export const arrowTransform: "rotate(180deg)";
+export const sizeXxsHeight: "32px";
+export const sizeXsHeight: "40px";
+export const sizeSHeight: "48px";
+export const sizeMHeight: "56px";
+export const sizeLHeight: "64px";
+export const sizeXlHeight: "72px";