@alfalab/core-components-vars 9.9.1 → 9.11.0

package/cssm/bundle/site.css

@@ -1368,44 +1368,92 @@
         0 -16px 32px rgba(0, 0, 0, 0.16);
 }
 :root {
-    --border-radius-xs: 2px;
-    --border-radius-s: 4px;
-    --border-radius-m: 8px;
-    --border-radius-l: 12px;
-    --border-radius-xl: 16px;
-    --border-radius-xxl: 20px;
-    --border-radius-3xl: 24px;
+    --border-radius-xs: 2px; /* deprecated */
+    --border-radius-s: 4px; /* deprecated */
+    --border-radius-m: 8px; /* deprecated */
+    --border-radius-l: 12px; /* deprecated */
+    --border-radius-xl: 16px; /* deprecated */
+    --border-radius-xxl: 20px; /* deprecated */
+    --border-radius-3xl: 24px; /* deprecated */
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
+
+    /* новые значения, используйте их */
+    --border-radius-0: 0;
+    --border-radius-4: 4px;
+    --border-radius-6: 6px;
+    --border-radius-8: 8px;
+    --border-radius-10: 10px;
+    --border-radius-12: 12px;
+    --border-radius-16: 16px;
+    --border-radius-20: 20px;
+    --border-radius-24: 24px;
+    --border-radius-36: 36px;
+    --border-radius-64: 64px;
 }
 :root {
-    --gap-3xs: 2px;
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-2s: 14px;
-    --gap-m: 16px;
-    --gap-l: 20px;
-    --gap-xl: 24px;
-    --gap-2xl: 32px;
-    --gap-3xl: 40px;
-    --gap-4xl: 48px;
-    --gap-5xl: 64px;
-    --gap-6xl: 72px;
-    --gap-7xl: 96px;
-    --gap-8xl: 128px;
-    --gap-3xs-neg: -2px;
-    --gap-2xs-neg: -4px;
-    --gap-xs-neg: -8px;
-    --gap-s-neg: -12px;
-    --gap-m-neg: -16px;
-    --gap-l-neg: -20px;
-    --gap-xl-neg: -24px;
-    --gap-2xl-neg: -32px;
-    --gap-3xl-neg: -40px;
-    --gap-4xl-neg: -48px;
-    --gap-5xl-neg: -64px;
-    --gap-6xl-neg: -72px;
-    --gap-7xl-neg: -96px;
-    --gap-8xl-neg: -128px;
+    --gap-3xs: 2px; /* deprecated */
+    --gap-2xs: 4px; /* deprecated */
+    --gap-xs: 8px; /* deprecated */
+    --gap-s: 12px; /* deprecated */
+    --gap-2s: 14px; /* deprecated */
+    --gap-m: 16px; /* deprecated */
+    --gap-l: 20px; /* deprecated */
+    --gap-xl: 24px; /* deprecated */
+    --gap-2xl: 32px; /* deprecated */
+    --gap-3xl: 40px; /* deprecated */
+    --gap-4xl: 48px; /* deprecated */
+    --gap-5xl: 64px; /* deprecated */
+    --gap-6xl: 72px; /* deprecated */
+    --gap-7xl: 96px; /* deprecated */
+    --gap-8xl: 128px; /* deprecated */
+    --gap-3xs-neg: -2px; /* deprecated */
+    --gap-2xs-neg: -4px; /* deprecated */
+    --gap-xs-neg: -8px; /* deprecated */
+    --gap-s-neg: -12px; /* deprecated */
+    --gap-m-neg: -16px; /* deprecated */
+    --gap-l-neg: -20px; /* deprecated */
+    --gap-xl-neg: -24px; /* deprecated */
+    --gap-2xl-neg: -32px; /* deprecated */
+    --gap-3xl-neg: -40px; /* deprecated */
+    --gap-4xl-neg: -48px; /* deprecated */
+    --gap-5xl-neg: -64px; /* deprecated */
+    --gap-6xl-neg: -72px; /* deprecated */
+    --gap-7xl-neg: -96px; /* deprecated */
+    --gap-8xl-neg: -128px; /* deprecated */
+
+    /* новые значения, используйте их */
+    --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-56: 56px;
+    --gap-64: 64px;
+    --gap-72: 72px;
+    --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-56-neg: -56px;
+    --gap-64-neg: -64px;
+    --gap-72-neg: -72px;
+    --gap-80-neg: -80px;
+    --gap-96-neg: -96px;
+    --gap-128-neg: -128px;
 }

package/cssm/gaps.css

@@ -1,31 +1,66 @@
 :root {
-    --gap-3xs: 2px;
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-2s: 14px;
-    --gap-m: 16px;
-    --gap-l: 20px;
-    --gap-xl: 24px;
-    --gap-2xl: 32px;
-    --gap-3xl: 40px;
-    --gap-4xl: 48px;
-    --gap-5xl: 64px;
-    --gap-6xl: 72px;
-    --gap-7xl: 96px;
-    --gap-8xl: 128px;
-    --gap-3xs-neg: -2px;
-    --gap-2xs-neg: -4px;
-    --gap-xs-neg: -8px;
-    --gap-s-neg: -12px;
-    --gap-m-neg: -16px;
-    --gap-l-neg: -20px;
-    --gap-xl-neg: -24px;
-    --gap-2xl-neg: -32px;
-    --gap-3xl-neg: -40px;
-    --gap-4xl-neg: -48px;
-    --gap-5xl-neg: -64px;
-    --gap-6xl-neg: -72px;
-    --gap-7xl-neg: -96px;
-    --gap-8xl-neg: -128px;
+    --gap-3xs: 2px; /* deprecated */
+    --gap-2xs: 4px; /* deprecated */
+    --gap-xs: 8px; /* deprecated */
+    --gap-s: 12px; /* deprecated */
+    --gap-2s: 14px; /* deprecated */
+    --gap-m: 16px; /* deprecated */
+    --gap-l: 20px; /* deprecated */
+    --gap-xl: 24px; /* deprecated */
+    --gap-2xl: 32px; /* deprecated */
+    --gap-3xl: 40px; /* deprecated */
+    --gap-4xl: 48px; /* deprecated */
+    --gap-5xl: 64px; /* deprecated */
+    --gap-6xl: 72px; /* deprecated */
+    --gap-7xl: 96px; /* deprecated */
+    --gap-8xl: 128px; /* deprecated */
+    --gap-3xs-neg: -2px; /* deprecated */
+    --gap-2xs-neg: -4px; /* deprecated */
+    --gap-xs-neg: -8px; /* deprecated */
+    --gap-s-neg: -12px; /* deprecated */
+    --gap-m-neg: -16px; /* deprecated */
+    --gap-l-neg: -20px; /* deprecated */
+    --gap-xl-neg: -24px; /* deprecated */
+    --gap-2xl-neg: -32px; /* deprecated */
+    --gap-3xl-neg: -40px; /* deprecated */
+    --gap-4xl-neg: -48px; /* deprecated */
+    --gap-5xl-neg: -64px; /* deprecated */
+    --gap-6xl-neg: -72px; /* deprecated */
+    --gap-7xl-neg: -96px; /* deprecated */
+    --gap-8xl-neg: -128px; /* deprecated */
+
+    /* новые значения, используйте их */
+    --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-56: 56px;
+    --gap-64: 64px;
+    --gap-72: 72px;
+    --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-56-neg: -56px;
+    --gap-64-neg: -64px;
+    --gap-72-neg: -72px;
+    --gap-80-neg: -80px;
+    --gap-96-neg: -96px;
+    --gap-128-neg: -128px;
 }

package/cssm/index.css

@@ -1462,45 +1462,93 @@
     --shadow-xl-hard-up: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32),
         0 -16px 32px rgba(0, 0, 0, 0.16);
 } :root {
-    --border-radius-xs: 2px;
-    --border-radius-s: 4px;
-    --border-radius-m: 8px;
-    --border-radius-l: 12px;
-    --border-radius-xl: 16px;
-    --border-radius-xxl: 20px;
-    --border-radius-3xl: 24px;
+    --border-radius-xs: 2px; /* deprecated */
+    --border-radius-s: 4px; /* deprecated */
+    --border-radius-m: 8px; /* deprecated */
+    --border-radius-l: 12px; /* deprecated */
+    --border-radius-xl: 16px; /* deprecated */
+    --border-radius-xxl: 20px; /* deprecated */
+    --border-radius-3xl: 24px; /* deprecated */
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
+
+    /* новые значения, используйте их */
+    --border-radius-0: 0;
+    --border-radius-4: 4px;
+    --border-radius-6: 6px;
+    --border-radius-8: 8px;
+    --border-radius-10: 10px;
+    --border-radius-12: 12px;
+    --border-radius-16: 16px;
+    --border-radius-20: 20px;
+    --border-radius-24: 24px;
+    --border-radius-36: 36px;
+    --border-radius-64: 64px;
 } :root {
-    --gap-3xs: 2px;
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-2s: 14px;
-    --gap-m: 16px;
-    --gap-l: 20px;
-    --gap-xl: 24px;
-    --gap-2xl: 32px;
-    --gap-3xl: 40px;
-    --gap-4xl: 48px;
-    --gap-5xl: 64px;
-    --gap-6xl: 72px;
-    --gap-7xl: 96px;
-    --gap-8xl: 128px;
-    --gap-3xs-neg: -2px;
-    --gap-2xs-neg: -4px;
-    --gap-xs-neg: -8px;
-    --gap-s-neg: -12px;
-    --gap-m-neg: -16px;
-    --gap-l-neg: -20px;
-    --gap-xl-neg: -24px;
-    --gap-2xl-neg: -32px;
-    --gap-3xl-neg: -40px;
-    --gap-4xl-neg: -48px;
-    --gap-5xl-neg: -64px;
-    --gap-6xl-neg: -72px;
-    --gap-7xl-neg: -96px;
-    --gap-8xl-neg: -128px;
+    --gap-3xs: 2px; /* deprecated */
+    --gap-2xs: 4px; /* deprecated */
+    --gap-xs: 8px; /* deprecated */
+    --gap-s: 12px; /* deprecated */
+    --gap-2s: 14px; /* deprecated */
+    --gap-m: 16px; /* deprecated */
+    --gap-l: 20px; /* deprecated */
+    --gap-xl: 24px; /* deprecated */
+    --gap-2xl: 32px; /* deprecated */
+    --gap-3xl: 40px; /* deprecated */
+    --gap-4xl: 48px; /* deprecated */
+    --gap-5xl: 64px; /* deprecated */
+    --gap-6xl: 72px; /* deprecated */
+    --gap-7xl: 96px; /* deprecated */
+    --gap-8xl: 128px; /* deprecated */
+    --gap-3xs-neg: -2px; /* deprecated */
+    --gap-2xs-neg: -4px; /* deprecated */
+    --gap-xs-neg: -8px; /* deprecated */
+    --gap-s-neg: -12px; /* deprecated */
+    --gap-m-neg: -16px; /* deprecated */
+    --gap-l-neg: -20px; /* deprecated */
+    --gap-xl-neg: -24px; /* deprecated */
+    --gap-2xl-neg: -32px; /* deprecated */
+    --gap-3xl-neg: -40px; /* deprecated */
+    --gap-4xl-neg: -48px; /* deprecated */
+    --gap-5xl-neg: -64px; /* deprecated */
+    --gap-6xl-neg: -72px; /* deprecated */
+    --gap-7xl-neg: -96px; /* deprecated */
+    --gap-8xl-neg: -128px; /* deprecated */
+
+    /* новые значения, используйте их */
+    --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-56: 56px;
+    --gap-64: 64px;
+    --gap-72: 72px;
+    --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-56-neg: -56px;
+    --gap-64-neg: -64px;
+    --gap-72-neg: -72px;
+    --gap-80-neg: -80px;
+    --gap-96-neg: -96px;
+    --gap-128-neg: -128px;
 } :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;

package/cssm/index.d.ts

@@ -1444,6 +1444,17 @@ export const borderRadiusXxl: "20px";
 export const borderRadius3xl: "24px";
 export const borderRadiusCircle: "50%";
 export const borderRadiusPill: "99px";
+export const borderRadius0: "0";
+export const borderRadius4: "4px";
+export const borderRadius6: "6px";
+export const borderRadius8: "8px";
+export const borderRadius10: "10px";
+export const borderRadius12: "12px";
+export const borderRadius16: "16px";
+export const borderRadius20: "20px";
+export const borderRadius24: "24px";
+export const borderRadius36: "36px";
+export const borderRadius64: "64px";
 export const gap3xs: "2px";
 export const gap2xs: "4px";
 export const gapXs: "8px";
@@ -1473,5 +1484,38 @@ export const gap5xlNeg: "-64px";
 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 gap56: "56px";
+export const gap64: "64px";
+export const gap72: "72px";
+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 gap56Neg: "-56px";
+export const gap64Neg: "-64px";
+export const gap72Neg: "-72px";
+export const gap80Neg: "-80px";
+export const gap96Neg: "-96px";
+export const gap128Neg: "-128px";
 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";

package/cssm/index.js

@@ -1444,6 +1444,17 @@ module.exports.borderRadiusXxl = "20px";
 module.exports.borderRadius3xl = "24px";
 module.exports.borderRadiusCircle = "50%";
 module.exports.borderRadiusPill = "99px";
+module.exports.borderRadius0 = "0";
+module.exports.borderRadius4 = "4px";
+module.exports.borderRadius6 = "6px";
+module.exports.borderRadius8 = "8px";
+module.exports.borderRadius10 = "10px";
+module.exports.borderRadius12 = "12px";
+module.exports.borderRadius16 = "16px";
+module.exports.borderRadius20 = "20px";
+module.exports.borderRadius24 = "24px";
+module.exports.borderRadius36 = "36px";
+module.exports.borderRadius64 = "64px";
 module.exports.gap3xs = "2px";
 module.exports.gap2xs = "4px";
 module.exports.gapXs = "8px";
@@ -1473,5 +1484,38 @@ module.exports.gap5xlNeg = "-64px";
 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.gap56 = "56px";
+module.exports.gap64 = "64px";
+module.exports.gap72 = "72px";
+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.gap56Neg = "-56px";
+module.exports.gap64Neg = "-64px";
+module.exports.gap72Neg = "-72px";
+module.exports.gap80Neg = "-80px";
+module.exports.gap96Neg = "-96px";
+module.exports.gap128Neg = "-128px";
 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";

package/esm/index.d.ts

@@ -1444,6 +1444,17 @@ export const borderRadiusXxl: "20px";
 export const borderRadius3xl: "24px";
 export const borderRadiusCircle: "50%";
 export const borderRadiusPill: "99px";
+export const borderRadius0: "0";
+export const borderRadius4: "4px";
+export const borderRadius6: "6px";
+export const borderRadius8: "8px";
+export const borderRadius10: "10px";
+export const borderRadius12: "12px";
+export const borderRadius16: "16px";
+export const borderRadius20: "20px";
+export const borderRadius24: "24px";
+export const borderRadius36: "36px";
+export const borderRadius64: "64px";
 export const gap3xs: "2px";
 export const gap2xs: "4px";
 export const gapXs: "8px";
@@ -1473,5 +1484,38 @@ export const gap5xlNeg: "-64px";
 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 gap56: "56px";
+export const gap64: "64px";
+export const gap72: "72px";
+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 gap56Neg: "-56px";
+export const gap64Neg: "-64px";
+export const gap72Neg: "-72px";
+export const gap80Neg: "-80px";
+export const gap96Neg: "-96px";
+export const gap128Neg: "-128px";
 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";

package/esm/index.js

@@ -1444,6 +1444,17 @@ export const borderRadiusXxl = "20px";
 export const borderRadius3xl = "24px";
 export const borderRadiusCircle = "50%";
 export const borderRadiusPill = "99px";
+export const borderRadius0 = "0";
+export const borderRadius4 = "4px";
+export const borderRadius6 = "6px";
+export const borderRadius8 = "8px";
+export const borderRadius10 = "10px";
+export const borderRadius12 = "12px";
+export const borderRadius16 = "16px";
+export const borderRadius20 = "20px";
+export const borderRadius24 = "24px";
+export const borderRadius36 = "36px";
+export const borderRadius64 = "64px";
 export const gap3xs = "2px";
 export const gap2xs = "4px";
 export const gapXs = "8px";
@@ -1473,5 +1484,38 @@ export const gap5xlNeg = "-64px";
 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 gap56 = "56px";
+export const gap64 = "64px";
+export const gap72 = "72px";
+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 gap56Neg = "-56px";
+export const gap64Neg = "-64px";
+export const gap72Neg = "-72px";
+export const gap80Neg = "-80px";
+export const gap96Neg = "-96px";
+export const gap128Neg = "-128px";
 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";

package/gaps.css

@@ -1,31 +1,66 @@
 :root {
-    --gap-3xs: 2px;
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-2s: 14px;
-    --gap-m: 16px;
-    --gap-l: 20px;
-    --gap-xl: 24px;
-    --gap-2xl: 32px;
-    --gap-3xl: 40px;
-    --gap-4xl: 48px;
-    --gap-5xl: 64px;
-    --gap-6xl: 72px;
-    --gap-7xl: 96px;
-    --gap-8xl: 128px;
-    --gap-3xs-neg: -2px;
-    --gap-2xs-neg: -4px;
-    --gap-xs-neg: -8px;
-    --gap-s-neg: -12px;
-    --gap-m-neg: -16px;
-    --gap-l-neg: -20px;
-    --gap-xl-neg: -24px;
-    --gap-2xl-neg: -32px;
-    --gap-3xl-neg: -40px;
-    --gap-4xl-neg: -48px;
-    --gap-5xl-neg: -64px;
-    --gap-6xl-neg: -72px;
-    --gap-7xl-neg: -96px;
-    --gap-8xl-neg: -128px;
+    --gap-3xs: 2px; /* deprecated */
+    --gap-2xs: 4px; /* deprecated */
+    --gap-xs: 8px; /* deprecated */
+    --gap-s: 12px; /* deprecated */
+    --gap-2s: 14px; /* deprecated */
+    --gap-m: 16px; /* deprecated */
+    --gap-l: 20px; /* deprecated */
+    --gap-xl: 24px; /* deprecated */
+    --gap-2xl: 32px; /* deprecated */
+    --gap-3xl: 40px; /* deprecated */
+    --gap-4xl: 48px; /* deprecated */
+    --gap-5xl: 64px; /* deprecated */
+    --gap-6xl: 72px; /* deprecated */
+    --gap-7xl: 96px; /* deprecated */
+    --gap-8xl: 128px; /* deprecated */
+    --gap-3xs-neg: -2px; /* deprecated */
+    --gap-2xs-neg: -4px; /* deprecated */
+    --gap-xs-neg: -8px; /* deprecated */
+    --gap-s-neg: -12px; /* deprecated */
+    --gap-m-neg: -16px; /* deprecated */
+    --gap-l-neg: -20px; /* deprecated */
+    --gap-xl-neg: -24px; /* deprecated */
+    --gap-2xl-neg: -32px; /* deprecated */
+    --gap-3xl-neg: -40px; /* deprecated */
+    --gap-4xl-neg: -48px; /* deprecated */
+    --gap-5xl-neg: -64px; /* deprecated */
+    --gap-6xl-neg: -72px; /* deprecated */
+    --gap-7xl-neg: -96px; /* deprecated */
+    --gap-8xl-neg: -128px; /* deprecated */
+
+    /* новые значения, используйте их */
+    --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-56: 56px;
+    --gap-64: 64px;
+    --gap-72: 72px;
+    --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-56-neg: -56px;
+    --gap-64-neg: -64px;
+    --gap-72-neg: -72px;
+    --gap-80-neg: -80px;
+    --gap-96-neg: -96px;
+    --gap-128-neg: -128px;
 }