@alfalab/core-components-vars 9.6.0 → 9.7.0

package/src/colors-pfm.css

@@ -0,0 +1,68 @@
+:root {
+    --color-static-pfm-custom-blue: #5ea5fb;
+    --color-static-pfm-custom-cyan: #0eafdc;
+    --color-static-pfm-custom-indigo: #909af4;
+    --color-static-pfm-custom-jungle: #22b888;
+    --color-static-pfm-custom-magenta: #f979a4;
+    --color-static-pfm-custom-orange: #fda134;
+    --color-static-pfm-custom-pistachio: #84b219;
+    --color-static-pfm-custom-purple: #b091ee;
+    --color-static-pfm-custom-red: #ff6441;
+    --color-static-pfm-custom-yellow: #f6d400;
+    --color-static-pfm-system-alcohol: #fda134;
+    --color-static-pfm-system-animals: #618805;
+    --color-static-pfm-system-auto: #01a374;
+    --color-static-pfm-system-beauty: #fb9ab6;
+    --color-static-pfm-system-benefits: #dc58c9;
+    --color-static-pfm-system-bonus: #6f6bdf;
+    --color-static-pfm-system-books: #c4abf5;
+    --color-static-pfm-system-business: #0098c2;
+    --color-static-pfm-system-business-trip-payment: #4ec1eb;
+    --color-static-pfm-system-c2c-transfer: #3776e3;
+    --color-static-pfm-system-cafe-restaurants: #739f0c;
+    --color-static-pfm-system-cash-deposit: #5fcc72;
+    --color-static-pfm-system-cash-withdrawal: #6f6bdf;
+    --color-static-pfm-system-cashback: #fd5633;
+    --color-static-pfm-system-charity: #dc58c9;
+    --color-static-pfm-system-clothes-shoes: #049e99;
+    --color-static-pfm-system-construction-repair: #088783;
+    --color-static-pfm-system-credit: #fd5633;
+    --color-static-pfm-system-digital-goods: #4ec1eb;
+    --color-static-pfm-system-dont-remember: #d73b78;
+    --color-static-pfm-system-education: #098d62;
+    --color-static-pfm-system-electronics: #049e99;
+    --color-static-pfm-system-entertainments: #8e60d6;
+    --color-static-pfm-system-expenses-return-payment: #739f0c;
+    --color-static-pfm-system-family: #f399e3;
+    --color-static-pfm-system-fastfood: #9f79e5;
+    --color-static-pfm-system-fines-taxes: #7d83ee;
+    --color-static-pfm-system-flowers: #f6d400;
+    --color-static-pfm-system-fuel-station: #ee8515;
+    --color-static-pfm-system-health: #48c9c5;
+    --color-static-pfm-system-hobby: #ed558e;
+    --color-static-pfm-system-home-repair: #47cc9b;
+    --color-static-pfm-system-internet-tv: #0eafdc;
+    --color-static-pfm-system-investment: #9f79e5;
+    --color-static-pfm-system-jewelry: #fb9ab6;
+    --color-static-pfm-system-mortgage: #ff7958;
+    --color-static-pfm-system-other: #9fa0a8;
+    --color-static-pfm-system-other-expenses: #a8b2f8;
+    --color-static-pfm-system-other-income: #97c537;
+    --color-static-pfm-system-privileges: #5f5f66;
+    --color-static-pfm-system-public-transport: #3776e3;
+    --color-static-pfm-system-refill: #31ba52;
+    --color-static-pfm-system-rent-auto: #01a374;
+    --color-static-pfm-system-safe-box: #01a374;
+    --color-static-pfm-system-salary: #14a741;
+    --color-static-pfm-system-sport-goods: #c4abf5;
+    --color-static-pfm-system-supermarkets: #97c537;
+    --color-static-pfm-system-taxi: #f6d400;
+    --color-static-pfm-system-tobacco: #fb9517;
+    --color-static-pfm-system-transactions: #5ea5fb;
+    --color-static-pfm-system-transfers: #5ea5fb;
+    --color-static-pfm-system-transport: #3776e3;
+    --color-static-pfm-system-travel: #f6d400;
+    --color-static-pfm-system-user-other-expenses: #a8b2f8;
+    --color-static-pfm-system-utilities: #83b8f9;
+    --color-static-pfm-system-vacation-payment: #f6d400;
+}

package/src/colors-qualitative.css

@@ -0,0 +1,130 @@
+:root {
+    --color-dark-qualitative-duocolor-set-a-1: #17d055;
+    --color-dark-qualitative-duocolor-set-a-2: #ff5431;
+    --color-dark-qualitative-duocolor-set-b-1: #17d055;
+    --color-dark-qualitative-duocolor-set-b-2: #fda136;
+    --color-dark-qualitative-duocolor-set-c-1: #61a5fd;
+    --color-dark-qualitative-duocolor-set-c-2: #fda136;
+    --color-dark-qualitative-duocolor-set-d-1: #95c535;
+    --color-dark-qualitative-duocolor-set-d-2: #9b96f9;
+    --color-dark-qualitative-duocolor-set-e-1: #0cb5b7;
+    --color-dark-qualitative-duocolor-set-e-2: #fda136;
+    --color-dark-qualitative-duocolor-set-f-1: #fede13;
+    --color-dark-qualitative-duocolor-set-f-2: #9b96f9;
+    --color-dark-qualitative-duocolor-set-g-1: #95c535;
+    --color-dark-qualitative-duocolor-set-g-2: #ce83ea;
+    --color-dark-qualitative-flexible-1: #95c535;
+    --color-dark-qualitative-flexible-10: #8b7ef5;
+    --color-dark-qualitative-flexible-11: #5ecc73;
+    --color-dark-qualitative-flexible-12: #1597c4;
+    --color-dark-qualitative-flexible-13: #fede13;
+    --color-dark-qualitative-flexible-14: #f371c9;
+    --color-dark-qualitative-flexible-2: #478cf2;
+    --color-dark-qualitative-flexible-3: #fd6544;
+    --color-dark-qualitative-flexible-4: #01a374;
+    --color-dark-qualitative-flexible-5: #fda136;
+    --color-dark-qualitative-flexible-6: #c065df;
+    --color-dark-qualitative-flexible-7: #fb93b2;
+    --color-dark-qualitative-flexible-8: #14a741;
+    --color-dark-qualitative-flexible-9: #70dcdf;
+    --color-dark-qualitative-monocolor-blue: #61a5fd;
+    --color-dark-qualitative-monocolor-green: #17d055;
+    --color-dark-qualitative-monocolor-indigo: #9b96f9;
+    --color-dark-qualitative-monocolor-magenta: #fb739c;
+    --color-dark-qualitative-monocolor-orange: #fda136;
+    --color-dark-qualitative-monocolor-pistachio: #95c535;
+    --color-dark-qualitative-monocolor-red: #ff5431;
+    --color-dark-qualitative-monocolor-teal: #0cb5b7;
+    --color-dark-qualitative-monocolor-yellow: #fede13;
+    --color-dark-qualitative-tetracolor-set-a-1: #1597c4;
+    --color-dark-qualitative-tetracolor-set-a-2: #42cca4;
+    --color-dark-qualitative-tetracolor-set-a-3: #c065df;
+    --color-dark-qualitative-tetracolor-set-a-4: #fede13;
+    --color-dark-qualitative-tetracolor-set-b-1: #8b7ef5;
+    --color-dark-qualitative-tetracolor-set-b-2: #42cca4;
+    --color-dark-qualitative-tetracolor-set-b-3: #1597c4;
+    --color-dark-qualitative-tetracolor-set-b-4: #fda136;
+    --color-dark-qualitative-tetracolor-set-c-1: #c065df;
+    --color-dark-qualitative-tetracolor-set-c-2: #42cca4;
+    --color-dark-qualitative-tetracolor-set-c-3: #fede13;
+    --color-dark-qualitative-tetracolor-set-c-4: #ff5431;
+    --color-dark-qualitative-tricolor-set-a-1: #95c535;
+    --color-dark-qualitative-tricolor-set-a-2: #9b96f9;
+    --color-dark-qualitative-tricolor-set-a-3: #fede13;
+    --color-dark-qualitative-tricolor-set-b-1: #42cca4;
+    --color-dark-qualitative-tricolor-set-b-2: #ce83ea;
+    --color-dark-qualitative-tricolor-set-b-3: #fda136;
+    --color-dark-qualitative-tricolor-set-c-1: #ff5431;
+    --color-dark-qualitative-tricolor-set-c-2: #0cb5b7;
+    --color-dark-qualitative-tricolor-set-c-3: #fda136;
+    --color-dark-qualitative-tricolor-set-d-1: #95c535;
+    --color-dark-qualitative-tricolor-set-d-2: #61a5fd;
+    --color-dark-qualitative-tricolor-set-d-3: #ff5431;
+    --color-dark-qualitative-tricolor-set-e-1: #fda136;
+    --color-dark-qualitative-tricolor-set-e-2: #61a5fd;
+    --color-dark-qualitative-tricolor-set-e-3: #fede13;
+    --color-light-qualitative-duocolor-set-a-1: #0cc44d;
+    --color-light-qualitative-duocolor-set-a-2: #ff5431;
+    --color-light-qualitative-duocolor-set-b-1: #0cc44d;
+    --color-light-qualitative-duocolor-set-b-2: #fda136;
+    --color-light-qualitative-duocolor-set-c-1: #478cf2;
+    --color-light-qualitative-duocolor-set-c-2: #fda136;
+    --color-light-qualitative-duocolor-set-d-1: #95c535;
+    --color-light-qualitative-duocolor-set-d-2: #8b7ef5;
+    --color-light-qualitative-duocolor-set-e-1: #019f9c;
+    --color-light-qualitative-duocolor-set-e-2: #fda136;
+    --color-light-qualitative-duocolor-set-f-1: #f6d411;
+    --color-light-qualitative-duocolor-set-f-2: #8b7ef5;
+    --color-light-qualitative-duocolor-set-g-1: #95c535;
+    --color-light-qualitative-duocolor-set-g-2: #c065df;
+    --color-light-qualitative-flexible-1: #95c535;
+    --color-light-qualitative-flexible-10: #7f66e0;
+    --color-light-qualitative-flexible-11: #31ba52;
+    --color-light-qualitative-flexible-12: #0084a9;
+    --color-light-qualitative-flexible-13: #f6d411;
+    --color-light-qualitative-flexible-14: #e552bc;
+    --color-light-qualitative-flexible-2: #3f76e0;
+    --color-light-qualitative-flexible-3: #fd6544;
+    --color-light-qualitative-flexible-4: #008d66;
+    --color-light-qualitative-flexible-5: #fa9313;
+    --color-light-qualitative-flexible-6: #ae4dc7;
+    --color-light-qualitative-flexible-7: #fb739c;
+    --color-light-qualitative-flexible-8: #058f33;
+    --color-light-qualitative-flexible-9: #3fc9cb;
+    --color-light-qualitative-monocolor-blue: #478cf2;
+    --color-light-qualitative-monocolor-green: #0cc44d;
+    --color-light-qualitative-monocolor-indigo: #8b7ef5;
+    --color-light-qualitative-monocolor-magenta: #f15287;
+    --color-light-qualitative-monocolor-orange: #fda136;
+    --color-light-qualitative-monocolor-pistachio: #95c535;
+    --color-light-qualitative-monocolor-red: #ff5431;
+    --color-light-qualitative-monocolor-teal: #019f9c;
+    --color-light-qualitative-monocolor-yellow: #f6d411;
+    --color-light-qualitative-tetracolor-set-a-1: #0084a9;
+    --color-light-qualitative-tetracolor-set-a-2: #14b88c;
+    --color-light-qualitative-tetracolor-set-a-3: #ae4dc7;
+    --color-light-qualitative-tetracolor-set-a-4: #f6d411;
+    --color-light-qualitative-tetracolor-set-b-1: #7f66e0;
+    --color-light-qualitative-tetracolor-set-b-2: #14b88c;
+    --color-light-qualitative-tetracolor-set-b-3: #0084a9;
+    --color-light-qualitative-tetracolor-set-b-4: #fda136;
+    --color-light-qualitative-tetracolor-set-c-1: #ae4dc7;
+    --color-light-qualitative-tetracolor-set-c-2: #14b88c;
+    --color-light-qualitative-tetracolor-set-c-3: #f6d411;
+    --color-light-qualitative-tetracolor-set-c-4: #ff5431;
+    --color-light-qualitative-tricolor-set-a-1: #95c535;
+    --color-light-qualitative-tricolor-set-a-2: #8b7ef5;
+    --color-light-qualitative-tricolor-set-a-3: #f6d411;
+    --color-light-qualitative-tricolor-set-b-1: #14b88c;
+    --color-light-qualitative-tricolor-set-b-2: #c065df;
+    --color-light-qualitative-tricolor-set-b-3: #fda136;
+    --color-light-qualitative-tricolor-set-c-1: #ff5431;
+    --color-light-qualitative-tricolor-set-c-2: #019f9c;
+    --color-light-qualitative-tricolor-set-c-3: #fda136;
+    --color-light-qualitative-tricolor-set-d-1: #95c535;
+    --color-light-qualitative-tricolor-set-d-2: #478cf2;
+    --color-light-qualitative-tricolor-set-d-3: #ff5431;
+    --color-light-qualitative-tricolor-set-e-1: #fda136;
+    --color-light-qualitative-tricolor-set-e-2: #478cf2;
+    --color-light-qualitative-tricolor-set-e-3: #f6d411;
+}

package/src/colors-sequential.css

@@ -0,0 +1,170 @@
+:root {
+    --color-dark-sequential-blue-1: #61a5fd;
+    --color-dark-sequential-blue-2: #478cf2;
+    --color-dark-sequential-blue-3: #3f76e0;
+    --color-dark-sequential-blue-4: #3a62c6;
+    --color-dark-sequential-blue-5: #2f51a6;
+    --color-dark-sequential-blue-6: #2a4589;
+    --color-dark-sequential-blue-7: #22396d;
+    --color-dark-sequential-cyan-1: #19afde;
+    --color-dark-sequential-cyan-2: #1597c4;
+    --color-dark-sequential-cyan-3: #0084a9;
+    --color-dark-sequential-cyan-4: #047094;
+    --color-dark-sequential-cyan-5: #105c7a;
+    --color-dark-sequential-cyan-6: #104c67;
+    --color-dark-sequential-cyan-7: #0a3f58;
+    --color-dark-sequential-fuchsia-1: #f371c9;
+    --color-dark-sequential-fuchsia-2: #e552bc;
+    --color-dark-sequential-fuchsia-3: #d03ba5;
+    --color-dark-sequential-fuchsia-4: #b42c90;
+    --color-dark-sequential-fuchsia-5: #962579;
+    --color-dark-sequential-fuchsia-6: #7a2560;
+    --color-dark-sequential-fuchsia-7: #64214d;
+    --color-dark-sequential-green-1: #31ba52;
+    --color-dark-sequential-green-2: #14a741;
+    --color-dark-sequential-green-3: #058f33;
+    --color-dark-sequential-green-4: #0d7a2c;
+    --color-dark-sequential-green-5: #106528;
+    --color-dark-sequential-green-6: #0e5123;
+    --color-dark-sequential-green-7: #0e4320;
+    --color-dark-sequential-indigo-1: #9b96f9;
+    --color-dark-sequential-indigo-2: #8b7ef5;
+    --color-dark-sequential-indigo-3: #7f66e0;
+    --color-dark-sequential-indigo-4: #7053c5;
+    --color-dark-sequential-indigo-5: #5c45a7;
+    --color-dark-sequential-indigo-6: #4d3a88;
+    --color-dark-sequential-indigo-7: #42316e;
+    --color-dark-sequential-jungle-1: #14b88c;
+    --color-dark-sequential-jungle-2: #01a374;
+    --color-dark-sequential-jungle-3: #008d66;
+    --color-dark-sequential-jungle-4: #07785b;
+    --color-dark-sequential-jungle-5: #0b624e;
+    --color-dark-sequential-jungle-6: #0a4f43;
+    --color-dark-sequential-jungle-7: #0f4339;
+    --color-dark-sequential-magenta-1: #fb739c;
+    --color-dark-sequential-magenta-2: #f15287;
+    --color-dark-sequential-magenta-3: #d83b72;
+    --color-dark-sequential-magenta-4: #be2c60;
+    --color-dark-sequential-magenta-5: #9d274f;
+    --color-dark-sequential-magenta-6: #7f2741;
+    --color-dark-sequential-magenta-7: #662335;
+    --color-dark-sequential-orange-1: #f59322;
+    --color-dark-sequential-orange-2: #e88310;
+    --color-dark-sequential-orange-3: #d27016;
+    --color-dark-sequential-orange-4: #b25e17;
+    --color-dark-sequential-orange-5: #924c16;
+    --color-dark-sequential-orange-6: #753f16;
+    --color-dark-sequential-orange-7: #5c3313;
+    --color-dark-sequential-pistachio-1: #84b219;
+    --color-dark-sequential-pistachio-2: #739f0c;
+    --color-dark-sequential-pistachio-3: #618805;
+    --color-dark-sequential-pistachio-4: #517407;
+    --color-dark-sequential-pistachio-5: #45600d;
+    --color-dark-sequential-pistachio-6: #394d0c;
+    --color-dark-sequential-pistachio-7: #30400e;
+    --color-dark-sequential-purple-1: #ce83ea;
+    --color-dark-sequential-purple-2: #c065df;
+    --color-dark-sequential-purple-3: #ae4dc7;
+    --color-dark-sequential-purple-4: #9b3faf;
+    --color-dark-sequential-purple-5: #813294;
+    --color-dark-sequential-purple-6: #6d2b78;
+    --color-dark-sequential-purple-7: #5c2460;
+    --color-dark-sequential-red-1: #fe7a5f;
+    --color-dark-sequential-red-2: #f7553b;
+    --color-dark-sequential-red-3: #e03a27;
+    --color-dark-sequential-red-4: #bf3324;
+    --color-dark-sequential-red-5: #9d2e26;
+    --color-dark-sequential-red-6: #7f2923;
+    --color-dark-sequential-red-7: #672522;
+    --color-dark-sequential-teal-1: #0cb5b7;
+    --color-dark-sequential-teal-2: #019f9c;
+    --color-dark-sequential-teal-3: #088886;
+    --color-dark-sequential-teal-4: #007575;
+    --color-dark-sequential-teal-5: #076063;
+    --color-dark-sequential-teal-6: #0b4e53;
+    --color-dark-sequential-teal-7: #0c424a;
+    --color-light-sequential-blue-1: #478cf2;
+    --color-light-sequential-blue-2: #61a5fd;
+    --color-light-sequential-blue-3: #7eb5fb;
+    --color-light-sequential-blue-4: #a6cbff;
+    --color-light-sequential-blue-5: #c5ddff;
+    --color-light-sequential-blue-6: #d7e7ff;
+    --color-light-sequential-blue-7: #e5f0fe;
+    --color-light-sequential-cyan-1: #1597c4;
+    --color-light-sequential-cyan-2: #19afde;
+    --color-light-sequential-cyan-3: #4ec1e9;
+    --color-light-sequential-cyan-4: #83d5f7;
+    --color-light-sequential-cyan-5: #a6e3fb;
+    --color-light-sequential-cyan-6: #c3ecfd;
+    --color-light-sequential-cyan-7: #def5ff;
+    --color-light-sequential-fuchsia-1: #e552bc;
+    --color-light-sequential-fuchsia-2: #f371c9;
+    --color-light-sequential-fuchsia-3: #f591d3;
+    --color-light-sequential-fuchsia-4: #f9afe0;
+    --color-light-sequential-fuchsia-5: #fbcaf0;
+    --color-light-sequential-fuchsia-6: #ffdafa;
+    --color-light-sequential-fuchsia-7: #ffe9fc;
+    --color-light-sequential-green-1: #14a741;
+    --color-light-sequential-green-2: #31ba52;
+    --color-light-sequential-green-3: #5ecc73;
+    --color-light-sequential-green-4: #85df95;
+    --color-light-sequential-green-5: #a8ecb5;
+    --color-light-sequential-green-6: #c2f3cc;
+    --color-light-sequential-green-7: #dafae2;
+    --color-light-sequential-indigo-1: #8b7ef5;
+    --color-light-sequential-indigo-2: #9b96f9;
+    --color-light-sequential-indigo-3: #acabf7;
+    --color-light-sequential-indigo-4: #c1c5fa;
+    --color-light-sequential-indigo-5: #d2d9fd;
+    --color-light-sequential-indigo-6: #e1e4ff;
+    --color-light-sequential-indigo-7: #eeedff;
+    --color-light-sequential-jungle-1: #01a374;
+    --color-light-sequential-jungle-2: #14b88c;
+    --color-light-sequential-jungle-3: #42cca4;
+    --color-light-sequential-jungle-4: #70debb;
+    --color-light-sequential-jungle-5: #9cecd3;
+    --color-light-sequential-jungle-6: #b8f3e2;
+    --color-light-sequential-jungle-7: #d5fbee;
+    --color-light-sequential-magenta-1: #f15287;
+    --color-light-sequential-magenta-2: #fb739c;
+    --color-light-sequential-magenta-3: #fb93b2;
+    --color-light-sequential-magenta-4: #fdb1c6;
+    --color-light-sequential-magenta-5: #fdcadc;
+    --color-light-sequential-magenta-6: #ffdce5;
+    --color-light-sequential-magenta-7: #ffeaee;
+    --color-light-sequential-orange-1: #e88310;
+    --color-light-sequential-orange-2: #f59322;
+    --color-light-sequential-orange-3: #fea846;
+    --color-light-sequential-orange-4: #febf72;
+    --color-light-sequential-orange-5: #fed397;
+    --color-light-sequential-orange-6: #ffe3bc;
+    --color-light-sequential-orange-7: #ffefd9;
+    --color-light-sequential-pistachio-1: #739f0c;
+    --color-light-sequential-pistachio-2: #84b219;
+    --color-light-sequential-pistachio-3: #95c535;
+    --color-light-sequential-pistachio-4: #aed963;
+    --color-light-sequential-pistachio-5: #c6e791;
+    --color-light-sequential-pistachio-6: #d7f0b1;
+    --color-light-sequential-pistachio-7: #e5f9ce;
+    --color-light-sequential-purple-1: #c065df;
+    --color-light-sequential-purple-2: #ce83ea;
+    --color-light-sequential-purple-3: #d59aec;
+    --color-light-sequential-purple-4: #e0b8f5;
+    --color-light-sequential-purple-5: #ead0fd;
+    --color-light-sequential-purple-6: #f1dfff;
+    --color-light-sequential-purple-7: #faebff;
+    --color-light-sequential-red-1: #f7553b;
+    --color-light-sequential-red-2: #fe7a5f;
+    --color-light-sequential-red-3: #ff967d;
+    --color-light-sequential-red-4: #ffaea3;
+    --color-light-sequential-red-5: #ffc8c5;
+    --color-light-sequential-red-6: #ffdada;
+    --color-light-sequential-red-7: #ffebeb;
+    --color-light-sequential-teal-1: #019f9c;
+    --color-light-sequential-teal-2: #0cb5b7;
+    --color-light-sequential-teal-3: #3fc9cb;
+    --color-light-sequential-teal-4: #70dcdf;
+    --color-light-sequential-teal-5: #98e9e9;
+    --color-light-sequential-teal-6: #b9f1f3;
+    --color-light-sequential-teal-7: #d6f8f9;
+}

package/src/mixins.css

@@ -9,6 +9,7 @@
 
     &::-webkit-scrollbar {
         width: 12px;
+        height: 12px;
     }
 
     &::-webkit-scrollbar-track {
@@ -21,19 +22,32 @@
 
     &::-webkit-scrollbar-thumb {
         background-color: var(--color-light-graphic-primary-alpha-30);
-        border-radius: var(--border-radius-circle) / 6px;
         border-color: transparent;
         border-style: solid;
         border-width: 4px;
         background-clip: padding-box;
+    }
+
+    &::-webkit-scrollbar-thumb:vertical {
+        border-radius: var(--border-radius-circle) / 6px;
         min-height: 40px;
     }
 
-    &::-webkit-scrollbar-thumb:hover {
+    &::-webkit-scrollbar-thumb:vertical:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
     }
 
+    &::-webkit-scrollbar-thumb:horizontal {
+        border-radius: 6px / var(--border-radius-circle);
+        min-width: 40px;
+    }
+
+    &::-webkit-scrollbar-thumb:horizontal:hover {
+        border-radius: 7px / var(--border-radius-circle);
+        border-width: 3px 4px;
+    }
+
     &::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-graphic-primary-alpha-60);
     }