@alfalab/core-components-vars 9.16.0 → 9.18.0

package/src/colors-monochrome-dark.css

@@ -0,0 +1,78 @@
+:root {
+    --color-light-monochrome-black-2: var(--color-dark-monochrome-black-2);
+    --color-light-monochrome-black-2-inverted: var(--color-dark-monochrome-black-2-inverted);
+    --color-light-monochrome-black-4: var(--color-dark-monochrome-black-4);
+    --color-light-monochrome-black-4-inverted: var(--color-dark-monochrome-black-4-inverted);
+    --color-light-monochrome-black-6: var(--color-dark-monochrome-black-6);
+    --color-light-monochrome-black-6-inverted: var(--color-dark-monochrome-black-6-inverted);
+    --color-light-monochrome-black-8: var(--color-dark-monochrome-black-8);
+    --color-light-monochrome-black-8-inverted: var(--color-dark-monochrome-black-8-inverted);
+    --color-light-monochrome-black-10: var(--color-dark-monochrome-black-10);
+    --color-light-monochrome-black-10-inverted: var(--color-dark-monochrome-black-10-inverted);
+    --color-light-monochrome-black-12: var(--color-dark-monochrome-black-12);
+    --color-light-monochrome-black-12-inverted: var(--color-dark-monochrome-black-12-inverted);
+    --color-light-monochrome-black-16: var(--color-dark-monochrome-black-16);
+    --color-light-monochrome-black-16-inverted: var(--color-dark-monochrome-black-16-inverted);
+    --color-light-monochrome-black-20: var(--color-dark-monochrome-black-20);
+    --color-light-monochrome-black-20-inverted: var(--color-dark-monochrome-black-20-inverted);
+    --color-light-monochrome-black-24: var(--color-dark-monochrome-black-24);
+    --color-light-monochrome-black-24-inverted: var(--color-dark-monochrome-black-24-inverted);
+    --color-light-monochrome-black-32: var(--color-dark-monochrome-black-32);
+    --color-light-monochrome-black-32-inverted: var(--color-dark-monochrome-black-32-inverted);
+    --color-light-monochrome-black-40: var(--color-dark-monochrome-black-40);
+    --color-light-monochrome-black-40-inverted: var(--color-dark-monochrome-black-40-inverted);
+    --color-light-monochrome-black-44: var(--color-dark-monochrome-black-44);
+    --color-light-monochrome-black-44-inverted: var(--color-dark-monochrome-black-44-inverted);
+    --color-light-monochrome-black-48: var(--color-dark-monochrome-black-48);
+    --color-light-monochrome-black-48-inverted: var(--color-dark-monochrome-black-48-inverted);
+    --color-light-monochrome-black-56: var(--color-dark-monochrome-black-56);
+    --color-light-monochrome-black-56-inverted: var(--color-dark-monochrome-black-56-inverted);
+    --color-light-monochrome-black-64: var(--color-dark-monochrome-black-64);
+    --color-light-monochrome-black-64-inverted: var(--color-dark-monochrome-black-64-inverted);
+    --color-light-monochrome-black-72: var(--color-dark-monochrome-black-72);
+    --color-light-monochrome-black-72-inverted: var(--color-dark-monochrome-black-72-inverted);
+    --color-light-monochrome-black-80: var(--color-dark-monochrome-black-80);
+    --color-light-monochrome-black-80-inverted: var(--color-dark-monochrome-black-80-inverted);
+    --color-light-monochrome-black-88: var(--color-dark-monochrome-black-88);
+    --color-light-monochrome-black-88-inverted: var(--color-dark-monochrome-black-88-inverted);
+    --color-light-monochrome-black-100: var(--color-dark-monochrome-black-100);
+    --color-light-monochrome-black-100-inverted: var(--color-dark-monochrome-black-100-inverted);
+    --color-light-monochrome-white-2: var(--color-dark-monochrome-white-2);
+    --color-light-monochrome-white-2-inverted: var(--color-dark-monochrome-white-2-inverted);
+    --color-light-monochrome-white-4: var(--color-dark-monochrome-white-4);
+    --color-light-monochrome-white-4-inverted: var(--color-dark-monochrome-white-4-inverted);
+    --color-light-monochrome-white-6: var(--color-dark-monochrome-white-6);
+    --color-light-monochrome-white-6-inverted: var(--color-dark-monochrome-white-6-inverted);
+    --color-light-monochrome-white-8: var(--color-dark-monochrome-white-8);
+    --color-light-monochrome-white-8-inverted: var(--color-dark-monochrome-white-8-inverted);
+    --color-light-monochrome-white-10: var(--color-dark-monochrome-white-10);
+    --color-light-monochrome-white-10-inverted: var(--color-dark-monochrome-white-10-inverted);
+    --color-light-monochrome-white-12: var(--color-dark-monochrome-white-12);
+    --color-light-monochrome-white-12-inverted: var(--color-dark-monochrome-white-12-inverted);
+    --color-light-monochrome-white-16: var(--color-dark-monochrome-white-16);
+    --color-light-monochrome-white-16-inverted: var(--color-dark-monochrome-white-16-inverted);
+    --color-light-monochrome-white-20: var(--color-dark-monochrome-white-20);
+    --color-light-monochrome-white-20-inverted: var(--color-dark-monochrome-white-20-inverted);
+    --color-light-monochrome-white-24: var(--color-dark-monochrome-white-24);
+    --color-light-monochrome-white-24-inverted: var(--color-dark-monochrome-white-24-inverted);
+    --color-light-monochrome-white-32: var(--color-dark-monochrome-white-32);
+    --color-light-monochrome-white-32-inverted: var(--color-dark-monochrome-white-32-inverted);
+    --color-light-monochrome-white-40: var(--color-dark-monochrome-white-40);
+    --color-light-monochrome-white-40-inverted: var(--color-dark-monochrome-white-40-inverted);
+    --color-light-monochrome-white-44: var(--color-dark-monochrome-white-44);
+    --color-light-monochrome-white-44-inverted: var(--color-dark-monochrome-white-44-inverted);
+    --color-light-monochrome-white-48: var(--color-dark-monochrome-white-48);
+    --color-light-monochrome-white-48-inverted: var(--color-dark-monochrome-white-48-inverted);
+    --color-light-monochrome-white-56: var(--color-dark-monochrome-white-56);
+    --color-light-monochrome-white-56-inverted: var(--color-dark-monochrome-white-56-inverted);
+    --color-light-monochrome-white-64: var(--color-dark-monochrome-white-64);
+    --color-light-monochrome-white-64-inverted: var(--color-dark-monochrome-white-64-inverted);
+    --color-light-monochrome-white-72: var(--color-dark-monochrome-white-72);
+    --color-light-monochrome-white-72-inverted: var(--color-dark-monochrome-white-72-inverted);
+    --color-light-monochrome-white-80: var(--color-dark-monochrome-white-80);
+    --color-light-monochrome-white-80-inverted: var(--color-dark-monochrome-white-80-inverted);
+    --color-light-monochrome-white-88: var(--color-dark-monochrome-white-88);
+    --color-light-monochrome-white-88-inverted: var(--color-dark-monochrome-white-88-inverted);
+    --color-light-monochrome-white-100: var(--color-dark-monochrome-white-100);
+    --color-light-monochrome-white-100-inverted: var(--color-dark-monochrome-white-100-inverted);
+}

package/src/colors-qualitative-dark.css

@@ -0,0 +1,68 @@
+:root {
+    --color-light-qualitative-duocolor-set-a-1: var(--color-dark-qualitative-duocolor-set-a-1);
+    --color-light-qualitative-duocolor-set-a-2: var(--color-dark-qualitative-duocolor-set-a-2);
+    --color-light-qualitative-duocolor-set-b-1: var(--color-dark-qualitative-duocolor-set-b-1);
+    --color-light-qualitative-duocolor-set-b-2: var(--color-dark-qualitative-duocolor-set-b-2);
+    --color-light-qualitative-duocolor-set-c-1: var(--color-dark-qualitative-duocolor-set-c-1);
+    --color-light-qualitative-duocolor-set-c-2: var(--color-dark-qualitative-duocolor-set-c-2);
+    --color-light-qualitative-duocolor-set-d-1: var(--color-dark-qualitative-duocolor-set-d-1);
+    --color-light-qualitative-duocolor-set-d-2: var(--color-dark-qualitative-duocolor-set-d-2);
+    --color-light-qualitative-duocolor-set-e-1: var(--color-dark-qualitative-duocolor-set-e-1);
+    --color-light-qualitative-duocolor-set-e-2: var(--color-dark-qualitative-duocolor-set-e-2);
+    --color-light-qualitative-duocolor-set-f-1: var(--color-dark-qualitative-duocolor-set-f-1);
+    --color-light-qualitative-duocolor-set-f-2: var(--color-dark-qualitative-duocolor-set-f-2);
+    --color-light-qualitative-duocolor-set-g-1: var(--color-dark-qualitative-duocolor-set-g-1);
+    --color-light-qualitative-duocolor-set-g-2: var(--color-dark-qualitative-duocolor-set-g-2);
+    --color-light-qualitative-flexible-1: var(--color-dark-qualitative-flexible-1);
+    --color-light-qualitative-flexible-10: var(--color-dark-qualitative-flexible-10);
+    --color-light-qualitative-flexible-11: var(--color-dark-qualitative-flexible-11);
+    --color-light-qualitative-flexible-12: var(--color-dark-qualitative-flexible-12);
+    --color-light-qualitative-flexible-13: var(--color-dark-qualitative-flexible-13);
+    --color-light-qualitative-flexible-14: var(--color-dark-qualitative-flexible-14);
+    --color-light-qualitative-flexible-2: var(--color-dark-qualitative-flexible-2);
+    --color-light-qualitative-flexible-3: var(--color-dark-qualitative-flexible-3);
+    --color-light-qualitative-flexible-4: var(--color-dark-qualitative-flexible-4);
+    --color-light-qualitative-flexible-5: var(--color-dark-qualitative-flexible-5);
+    --color-light-qualitative-flexible-6: var(--color-dark-qualitative-flexible-6);
+    --color-light-qualitative-flexible-7: var(--color-dark-qualitative-flexible-7);
+    --color-light-qualitative-flexible-8: var(--color-dark-qualitative-flexible-8);
+    --color-light-qualitative-flexible-9: var(--color-dark-qualitative-flexible-9);
+    --color-light-qualitative-monocolor-blue: var(--color-dark-qualitative-monocolor-blue);
+    --color-light-qualitative-monocolor-green: var(--color-dark-qualitative-monocolor-green);
+    --color-light-qualitative-monocolor-indigo: var(--color-dark-qualitative-monocolor-indigo);
+    --color-light-qualitative-monocolor-magenta: var(--color-dark-qualitative-monocolor-magenta);
+    --color-light-qualitative-monocolor-orange: var(--color-dark-qualitative-monocolor-orange);
+    --color-light-qualitative-monocolor-pistachio: var(
+        --color-dark-qualitative-monocolor-pistachio
+    );
+    --color-light-qualitative-monocolor-red: var(--color-dark-qualitative-monocolor-red);
+    --color-light-qualitative-monocolor-teal: var(--color-dark-qualitative-monocolor-teal);
+    --color-light-qualitative-monocolor-yellow: var(--color-dark-qualitative-monocolor-yellow);
+    --color-light-qualitative-tetracolor-set-a-1: var(--color-dark-qualitative-tetracolor-set-a-1);
+    --color-light-qualitative-tetracolor-set-a-2: var(--color-dark-qualitative-tetracolor-set-a-2);
+    --color-light-qualitative-tetracolor-set-a-3: var(--color-dark-qualitative-tetracolor-set-a-3);
+    --color-light-qualitative-tetracolor-set-a-4: var(--color-dark-qualitative-tetracolor-set-a-4);
+    --color-light-qualitative-tetracolor-set-b-1: var(--color-dark-qualitative-tetracolor-set-b-1);
+    --color-light-qualitative-tetracolor-set-b-2: var(--color-dark-qualitative-tetracolor-set-b-2);
+    --color-light-qualitative-tetracolor-set-b-3: var(--color-dark-qualitative-tetracolor-set-b-3);
+    --color-light-qualitative-tetracolor-set-b-4: var(--color-dark-qualitative-tetracolor-set-b-4);
+    --color-light-qualitative-tetracolor-set-c-1: var(--color-dark-qualitative-tetracolor-set-c-1);
+    --color-light-qualitative-tetracolor-set-c-2: var(--color-dark-qualitative-tetracolor-set-c-2);
+    --color-light-qualitative-tetracolor-set-c-3: var(--color-dark-qualitative-tetracolor-set-c-3);
+    --color-light-qualitative-tetracolor-set-c-4: var(--color-dark-qualitative-tetracolor-set-c-4);
+    --color-light-qualitative-tricolor-set-a-1: var(--color-dark-qualitative-tricolor-set-a-1);
+    --color-light-qualitative-tricolor-set-a-2: var(--color-dark-qualitative-tricolor-set-a-2);
+    --color-light-qualitative-tricolor-set-a-3: var(--color-dark-qualitative-tricolor-set-a-3);
+    --color-light-qualitative-tricolor-set-b-1: var(--color-dark-qualitative-tricolor-set-b-1);
+    --color-light-qualitative-tricolor-set-b-2: var(--color-dark-qualitative-tricolor-set-b-2);
+    --color-light-qualitative-tricolor-set-b-3: var(--color-dark-qualitative-tricolor-set-b-3);
+    --color-light-qualitative-tricolor-set-c-1: var(--color-dark-qualitative-tricolor-set-c-1);
+    --color-light-qualitative-tricolor-set-c-2: var(--color-dark-qualitative-tricolor-set-c-2);
+    --color-light-qualitative-tricolor-set-c-3: var(--color-dark-qualitative-tricolor-set-c-3);
+    --color-light-qualitative-tricolor-set-d-1: var(--color-dark-qualitative-tricolor-set-d-1);
+    --color-light-qualitative-tricolor-set-d-2: var(--color-dark-qualitative-tricolor-set-d-2);
+    --color-light-qualitative-tricolor-set-d-3: var(--color-dark-qualitative-tricolor-set-d-3);
+    --color-light-qualitative-tricolor-set-e-1: var(--color-dark-qualitative-tricolor-set-e-1);
+    --color-light-qualitative-tricolor-set-e-2: var(--color-dark-qualitative-tricolor-set-e-2);
+    --color-light-qualitative-tricolor-set-e-3: var(--color-dark-qualitative-tricolor-set-e-3);
+}

package/src/colors-sequential-dark.css

@@ -0,0 +1,98 @@
+:root {
+    --color-light-sequential-blue-1: var(--color-dark-sequential-blue-1);
+    --color-light-sequential-blue-2: var(--color-dark-sequential-blue-2);
+    --color-light-sequential-blue-3: var(--color-dark-sequential-blue-3);
+    --color-light-sequential-blue-4: var(--color-dark-sequential-blue-4);
+    --color-light-sequential-blue-5: var(--color-dark-sequential-blue-5);
+    --color-light-sequential-blue-6: var(--color-dark-sequential-blue-6);
+    --color-light-sequential-blue-7: var(--color-dark-sequential-blue-7);
+    --color-light-sequential-blue-8: var(--color-dark-sequential-blue-8);
+    --color-light-sequential-cyan-1: var(--color-dark-sequential-cyan-1);
+    --color-light-sequential-cyan-2: var(--color-dark-sequential-cyan-2);
+    --color-light-sequential-cyan-3: var(--color-dark-sequential-cyan-3);
+    --color-light-sequential-cyan-4: var(--color-dark-sequential-cyan-4);
+    --color-light-sequential-cyan-5: var(--color-dark-sequential-cyan-5);
+    --color-light-sequential-cyan-6: var(--color-dark-sequential-cyan-6);
+    --color-light-sequential-cyan-7: var(--color-dark-sequential-cyan-7);
+    --color-light-sequential-cyan-8: var(--color-dark-sequential-cyan-8);
+    --color-light-sequential-fuchsia-1: var(--color-dark-sequential-fuchsia-1);
+    --color-light-sequential-fuchsia-2: var(--color-dark-sequential-fuchsia-2);
+    --color-light-sequential-fuchsia-3: var(--color-dark-sequential-fuchsia-3);
+    --color-light-sequential-fuchsia-4: var(--color-dark-sequential-fuchsia-4);
+    --color-light-sequential-fuchsia-5: var(--color-dark-sequential-fuchsia-5);
+    --color-light-sequential-fuchsia-6: var(--color-dark-sequential-fuchsia-6);
+    --color-light-sequential-fuchsia-7: var(--color-dark-sequential-fuchsia-7);
+    --color-light-sequential-fuchsia-8: var(--color-dark-sequential-fuchsia-8);
+    --color-light-sequential-green-1: var(--color-dark-sequential-green-1);
+    --color-light-sequential-green-2: var(--color-dark-sequential-green-2);
+    --color-light-sequential-green-3: var(--color-dark-sequential-green-3);
+    --color-light-sequential-green-4: var(--color-dark-sequential-green-4);
+    --color-light-sequential-green-5: var(--color-dark-sequential-green-5);
+    --color-light-sequential-green-6: var(--color-dark-sequential-green-6);
+    --color-light-sequential-green-7: var(--color-dark-sequential-green-7);
+    --color-light-sequential-green-8: var(--color-dark-sequential-green-8);
+    --color-light-sequential-indigo-1: var(--color-dark-sequential-indigo-1);
+    --color-light-sequential-indigo-2: var(--color-dark-sequential-indigo-2);
+    --color-light-sequential-indigo-3: var(--color-dark-sequential-indigo-3);
+    --color-light-sequential-indigo-4: var(--color-dark-sequential-indigo-4);
+    --color-light-sequential-indigo-5: var(--color-dark-sequential-indigo-5);
+    --color-light-sequential-indigo-6: var(--color-dark-sequential-indigo-6);
+    --color-light-sequential-indigo-7: var(--color-dark-sequential-indigo-7);
+    --color-light-sequential-indigo-8: var(--color-dark-sequential-indigo-8);
+    --color-light-sequential-jungle-1: var(--color-dark-sequential-jungle-1);
+    --color-light-sequential-jungle-2: var(--color-dark-sequential-jungle-2);
+    --color-light-sequential-jungle-3: var(--color-dark-sequential-jungle-3);
+    --color-light-sequential-jungle-4: var(--color-dark-sequential-jungle-4);
+    --color-light-sequential-jungle-5: var(--color-dark-sequential-jungle-5);
+    --color-light-sequential-jungle-6: var(--color-dark-sequential-jungle-6);
+    --color-light-sequential-jungle-7: var(--color-dark-sequential-jungle-7);
+    --color-light-sequential-jungle-8: var(--color-dark-sequential-jungle-8);
+    --color-light-sequential-magenta-1: var(--color-dark-sequential-magenta-1);
+    --color-light-sequential-magenta-2: var(--color-dark-sequential-magenta-2);
+    --color-light-sequential-magenta-3: var(--color-dark-sequential-magenta-3);
+    --color-light-sequential-magenta-4: var(--color-dark-sequential-magenta-4);
+    --color-light-sequential-magenta-5: var(--color-dark-sequential-magenta-5);
+    --color-light-sequential-magenta-6: var(--color-dark-sequential-magenta-6);
+    --color-light-sequential-magenta-7: var(--color-dark-sequential-magenta-7);
+    --color-light-sequential-magenta-8: var(--color-dark-sequential-magenta-8);
+    --color-light-sequential-orange-1: var(--color-dark-sequential-orange-1);
+    --color-light-sequential-orange-2: var(--color-dark-sequential-orange-2);
+    --color-light-sequential-orange-3: var(--color-dark-sequential-orange-3);
+    --color-light-sequential-orange-4: var(--color-dark-sequential-orange-4);
+    --color-light-sequential-orange-5: var(--color-dark-sequential-orange-5);
+    --color-light-sequential-orange-6: var(--color-dark-sequential-orange-6);
+    --color-light-sequential-orange-7: var(--color-dark-sequential-orange-7);
+    --color-light-sequential-orange-8: var(--color-dark-sequential-orange-8);
+    --color-light-sequential-pistachio-1: var(--color-dark-sequential-pistachio-1);
+    --color-light-sequential-pistachio-2: var(--color-dark-sequential-pistachio-2);
+    --color-light-sequential-pistachio-3: var(--color-dark-sequential-pistachio-3);
+    --color-light-sequential-pistachio-4: var(--color-dark-sequential-pistachio-4);
+    --color-light-sequential-pistachio-5: var(--color-dark-sequential-pistachio-5);
+    --color-light-sequential-pistachio-6: var(--color-dark-sequential-pistachio-6);
+    --color-light-sequential-pistachio-7: var(--color-dark-sequential-pistachio-7);
+    --color-light-sequential-pistachio-8: var(--color-dark-sequential-pistachio-8);
+    --color-light-sequential-purple-1: var(--color-dark-sequential-purple-1);
+    --color-light-sequential-purple-2: var(--color-dark-sequential-purple-2);
+    --color-light-sequential-purple-3: var(--color-dark-sequential-purple-3);
+    --color-light-sequential-purple-4: var(--color-dark-sequential-purple-4);
+    --color-light-sequential-purple-5: var(--color-dark-sequential-purple-5);
+    --color-light-sequential-purple-6: var(--color-dark-sequential-purple-6);
+    --color-light-sequential-purple-7: var(--color-dark-sequential-purple-7);
+    --color-light-sequential-purple-8: var(--color-dark-sequential-purple-8);
+    --color-light-sequential-red-1: var(--color-dark-sequential-red-1);
+    --color-light-sequential-red-2: var(--color-dark-sequential-red-2);
+    --color-light-sequential-red-3: var(--color-dark-sequential-red-3);
+    --color-light-sequential-red-4: var(--color-dark-sequential-red-4);
+    --color-light-sequential-red-5: var(--color-dark-sequential-red-5);
+    --color-light-sequential-red-6: var(--color-dark-sequential-red-6);
+    --color-light-sequential-red-7: var(--color-dark-sequential-red-7);
+    --color-light-sequential-red-8: var(--color-dark-sequential-red-8);
+    --color-light-sequential-teal-1: var(--color-dark-sequential-teal-1);
+    --color-light-sequential-teal-2: var(--color-dark-sequential-teal-2);
+    --color-light-sequential-teal-3: var(--color-dark-sequential-teal-3);
+    --color-light-sequential-teal-4: var(--color-dark-sequential-teal-4);
+    --color-light-sequential-teal-5: var(--color-dark-sequential-teal-5);
+    --color-light-sequential-teal-6: var(--color-dark-sequential-teal-6);
+    --color-light-sequential-teal-7: var(--color-dark-sequential-teal-7);
+    --color-light-sequential-teal-8: var(--color-dark-sequential-teal-8);
+}

package/src/gaps.css

@@ -30,7 +30,10 @@
     --gap-8xl-neg: -128px; /* deprecated */
 
     /* новые значения, используйте их */
-    --gap-0: 0;
+
+    /* no-unit может приводить к проблемам в calc (#1559) */
+    /* stylelint-disable-next-line length-zero-no-unit */
+    --gap-0: 0px;
     --gap-2: var(--gap-3xs);
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);

package/src/safe-area.css

@@ -0,0 +1,6 @@
+:root {
+    --sat: env(safe-area-inset-top, var(--gap-0));
+    --sar: env(safe-area-inset-right, var(--gap-0));
+    --sab: env(safe-area-inset-bottom, var(--gap-0));
+    --sal: env(safe-area-inset-left, var(--gap-0));
+}