@alfalab/core-components-vars 9.11.1 → 9.13.0

package/index.d.ts

@@ -1445,14 +1445,15 @@ export const borderRadius3xl: "24px";
 export const borderRadiusCircle: "50%";
 export const borderRadiusPill: "99px";
 export const borderRadius0: "0";
-export const borderRadius4: "4px";
+export const borderRadius2: "var(--border-radius-xs)";
+export const borderRadius4: "var(--border-radius-s)";
 export const borderRadius6: "6px";
-export const borderRadius8: "8px";
+export const borderRadius8: "var(--border-radius-m)";
 export const borderRadius10: "10px";
-export const borderRadius12: "12px";
-export const borderRadius16: "16px";
-export const borderRadius20: "20px";
-export const borderRadius24: "24px";
+export const borderRadius12: "var(--border-radius-l)";
+export const borderRadius16: "var(--border-radius-xl)";
+export const borderRadius20: "var(--border-radius-xxl)";
+export const borderRadius24: "var(--border-radius-3xl)";
 export const borderRadius32: "32px";
 export const borderRadius36: "36px";
 export const borderRadius64: "64px";
@@ -1486,37 +1487,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/index.js

@@ -1445,14 +1445,15 @@ module.exports.borderRadius3xl = "24px";
 module.exports.borderRadiusCircle = "50%";
 module.exports.borderRadiusPill = "99px";
 module.exports.borderRadius0 = "0";
-module.exports.borderRadius4 = "4px";
+module.exports.borderRadius2 = "var(--border-radius-xs)";
+module.exports.borderRadius4 = "var(--border-radius-s)";
 module.exports.borderRadius6 = "6px";
-module.exports.borderRadius8 = "8px";
+module.exports.borderRadius8 = "var(--border-radius-m)";
 module.exports.borderRadius10 = "10px";
-module.exports.borderRadius12 = "12px";
-module.exports.borderRadius16 = "16px";
-module.exports.borderRadius20 = "20px";
-module.exports.borderRadius24 = "24px";
+module.exports.borderRadius12 = "var(--border-radius-l)";
+module.exports.borderRadius16 = "var(--border-radius-xl)";
+module.exports.borderRadius20 = "var(--border-radius-xxl)";
+module.exports.borderRadius24 = "var(--border-radius-3xl)";
 module.exports.borderRadius32 = "32px";
 module.exports.borderRadius36 = "36px";
 module.exports.borderRadius64 = "64px";
@@ -1486,37 +1487,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/mixins.css

@@ -29,7 +29,7 @@
     }
 
     &::-webkit-scrollbar-thumb:vertical {
-        border-radius: var(--border-radius-circle) / 6px;
+        border-radius: var(--border-radius-circle) / var(--border-radius-6);
         min-height: 40px;
     }
 
@@ -39,7 +39,7 @@
     }
 
     &::-webkit-scrollbar-thumb:horizontal {
-        border-radius: 6px / var(--border-radius-circle);
+        border-radius: var(--border-radius-6) / var(--border-radius-circle);
         min-width: 40px;
     }
 
@@ -90,7 +90,7 @@
     -webkit-tap-highlight-color: transparent;
     outline: none;
     border: 0;
-    margin: 0;
+    margin: var(--gap-0);
     box-shadow: none;
     border-radius: 0;
     user-select: none;

package/modern/index.d.ts

@@ -1445,14 +1445,15 @@ export const borderRadius3xl: "24px";
 export const borderRadiusCircle: "50%";
 export const borderRadiusPill: "99px";
 export const borderRadius0: "0";
-export const borderRadius4: "4px";
+export const borderRadius2: "var(--border-radius-xs)";
+export const borderRadius4: "var(--border-radius-s)";
 export const borderRadius6: "6px";
-export const borderRadius8: "8px";
+export const borderRadius8: "var(--border-radius-m)";
 export const borderRadius10: "10px";
-export const borderRadius12: "12px";
-export const borderRadius16: "16px";
-export const borderRadius20: "20px";
-export const borderRadius24: "24px";
+export const borderRadius12: "var(--border-radius-l)";
+export const borderRadius16: "var(--border-radius-xl)";
+export const borderRadius20: "var(--border-radius-xxl)";
+export const borderRadius24: "var(--border-radius-3xl)";
 export const borderRadius32: "32px";
 export const borderRadius36: "36px";
 export const borderRadius64: "64px";
@@ -1486,37 +1487,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/modern/index.js

@@ -1445,14 +1445,15 @@ export const borderRadius3xl = "24px";
 export const borderRadiusCircle = "50%";
 export const borderRadiusPill = "99px";
 export const borderRadius0 = "0";
-export const borderRadius4 = "4px";
+export const borderRadius2 = "var(--border-radius-xs)";
+export const borderRadius4 = "var(--border-radius-s)";
 export const borderRadius6 = "6px";
-export const borderRadius8 = "8px";
+export const borderRadius8 = "var(--border-radius-m)";
 export const borderRadius10 = "10px";
-export const borderRadius12 = "12px";
-export const borderRadius16 = "16px";
-export const borderRadius20 = "20px";
-export const borderRadius24 = "24px";
+export const borderRadius12 = "var(--border-radius-l)";
+export const borderRadius16 = "var(--border-radius-xl)";
+export const borderRadius20 = "var(--border-radius-xxl)";
+export const borderRadius24 = "var(--border-radius-3xl)";
 export const borderRadius32 = "32px";
 export const borderRadius36 = "36px";
 export const borderRadius64 = "64px";
@@ -1486,37 +1487,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/moderncssm/border-radius.css

@@ -0,0 +1,26 @@
+:root {
+    --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-2: var(--border-radius-xs);
+    --border-radius-4: var(--border-radius-s);
+    --border-radius-6: 6px;
+    --border-radius-8: var(--border-radius-m);
+    --border-radius-10: 10px;
+    --border-radius-12: var(--border-radius-l);
+    --border-radius-16: var(--border-radius-xl);
+    --border-radius-20: var(--border-radius-xxl);
+    --border-radius-24: var(--border-radius-3xl);
+    --border-radius-32: 32px;
+    --border-radius-36: 36px;
+    --border-radius-64: 64px;
+}