wabtec-internal-volt-basic-components 1.0.0 → 1.2.0

package/dist/collection/components/icon/vds-icon.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
 :root {
   font-family: "Roboto Flex", sans-serif, sans-serif;
   box-sizing: border-box;
@@ -481,6 +480,13 @@
   --height-12:0.75rem;
 }
 
+@font-face {
+  font-family: "Roboto Flex";
+  src: url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");
+  font-weight: 100 1000;
+  font-stretch: 25% 151%;
+  font-style: normal;
+}
 :root body {
   --spacing-00:0rem;
   --spacing-01:0.125rem;
@@ -733,7 +739,15 @@
   --static-dataviz-div-red-blue-650:#163670;
   --static-dataviz-div-red-blue-700:#0B194C;
   --static-white:#ffffff;
+  --static-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --static-white-low:rgba(255, 255, 255, 0.3215686275);
+  --static-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --static-white-lowest:rgba(255, 255, 255, 0.1215686275);
   --static-black:#000000;
+  --static-black-medium:rgba(0, 0, 0, 0.6392156863);
+  --static-black-low:rgba(0, 0, 0, 0.3215686275);
+  --static-black-lower:rgba(0, 0, 0, 0.1607843137);
+  --static-black-lowest:rgba(0, 0, 0, 0.1215686275);
   --elevation-shadow-0:none;
   --elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);
   --elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);
@@ -1446,36 +1460,44 @@
   fill: var(--box-shadow-color-02);
 }
 
-:host(.color-brand-0) {
-  fill: #ffffff;
+:host(.color-static-brand-0) {
+  fill: var(--static-brand-0);
+  color: var(--static-brand-0);
 }
 
-:host(.color-brand-50) {
-  fill: #E6F2F8;
+:host(.color-static-brand-50) {
+  fill: var(--static-brand-50);
+  color: var(--static-brand-50);
 }
 
-:host(.color-brand-100) {
-  fill: #CCE5F1;
+:host(.color-static-brand-100) {
+  fill: var(--static-brand-100);
+  color: var(--static-brand-100);
 }
 
-:host(.color-brand-200) {
-  fill: #99CBE3;
+:host(.color-static-brand-200) {
+  fill: var(--static-brand-200);
+  color: var(--static-brand-200);
 }
 
-:host(.color-brand-300) {
-  fill: #66B1D5;
+:host(.color-static-brand-300) {
+  fill: var(--static-brand-300);
+  color: var(--static-brand-300);
 }
 
-:host(.color-brand-400) {
-  fill: #3397C7;
+:host(.color-static-brand-400) {
+  fill: var(--static-brand-400);
+  color: var(--static-brand-400);
 }
 
-:host(.color-brand-500) {
-  fill: #007DBA;
+:host(.color-static-brand-500) {
+  fill: var(--static-brand-500);
+  color: var(--static-brand-500);
 }
 
-:host(.color-brand-main) {
-  fill: #007DBA;
+:host(.color-static-brand-main) {
+  fill: var(--static-brand-main);
+  color: var(--static-brand-main);
 }
 
 .color-brand {
@@ -1486,76 +1508,94 @@
   color: #007DBA;
 }
 
-:host(.color-brand-600) {
-  fill: #056CA0;
+:host(.color-static-brand-600) {
+  fill: var(--static-brand-600);
+  color: var(--static-brand-600);
 }
 
-:host(.color-brand-700) {
-  fill: #095B87;
+:host(.color-static-brand-700) {
+  fill: var(--static-brand-700);
+  color: var(--static-brand-700);
 }
 
-:host(.color-brand-800) {
-  fill: #0E4A6C;
+:host(.color-static-brand-800) {
+  fill: var(--static-brand-800);
+  color: var(--static-brand-800);
 }
 
-:host(.color-brand-900) {
-  fill: #133953;
+:host(.color-static-brand-900) {
+  fill: var(--static-brand-900);
+  color: var(--static-brand-900);
 }
 
-:host(.color-brand-950) {
-  fill: #153147;
+:host(.color-static-brand-950) {
+  fill: var(--static-brand-950);
+  color: var(--static-brand-950);
 }
 
-:host(.color-brand-1000) {
-  fill: #041821;
+:host(.color-static-brand-1000) {
+  fill: var(--static-brand-1000);
+  color: var(--static-brand-1000);
 }
 
-:host(.color-brand-1000-medium) {
-  fill: rgba(4, 24, 33, 0.6392156863);
+:host(.color-static-brand-1000-medium) {
+  fill: var(--static-brand-1000-medium);
+  color: var(--static-brand-1000-medium);
 }
 
-:host(.color-brand-1000-low) {
-  fill: rgba(4, 24, 33, 0.3215686275);
+:host(.color-static-brand-1000-low) {
+  fill: var(--static-brand-1000-low);
+  color: var(--static-brand-1000-low);
 }
 
-:host(.color-brand-1000-lower) {
-  fill: rgba(4, 24, 33, 0.1607843137);
+:host(.color-static-brand-1000-lower) {
+  fill: var(--static-brand-1000-lower);
+  color: var(--static-brand-1000-lower);
 }
 
-:host(.color-brand-1000-lowest) {
-  fill: rgba(4, 24, 33, 0.0784313725);
+:host(.color-static-brand-1000-lowest) {
+  fill: var(--static-brand-1000-lowest);
+  color: var(--static-brand-1000-lowest);
 }
 
-:host(.color-green-0) {
-  fill: #ffffff;
+:host(.color-static-green-0) {
+  fill: var(--static-green-0);
+  color: var(--static-green-0);
 }
 
-:host(.color-green-50) {
-  fill: #F2F7E8;
+:host(.color-static-green-50) {
+  fill: var(--static-green-50);
+  color: var(--static-green-50);
 }
 
-:host(.color-green-100) {
-  fill: #E5EED1;
+:host(.color-static-green-100) {
+  fill: var(--static-green-100);
+  color: var(--static-green-100);
 }
 
-:host(.color-green-200) {
-  fill: #CBDEA3;
+:host(.color-static-green-200) {
+  fill: var(--static-green-200);
+  color: var(--static-green-200);
 }
 
-:host(.color-green-300) {
-  fill: #B2CE76;
+:host(.color-static-green-300) {
+  fill: var(--static-green-300);
+  color: var(--static-green-300);
 }
 
-:host(.color-green-400) {
-  fill: #98BE48;
+:host(.color-static-green-400) {
+  fill: var(--static-green-400);
+  color: var(--static-green-400);
 }
 
-:host(.color-green-500) {
-  fill: #7FAE1B;
+:host(.color-static-green-500) {
+  fill: var(--static-green-500);
+  color: var(--static-green-500);
 }
 
-:host(.color-green-main) {
-  fill: #7FAE1B;
+:host(.color-static-green-main) {
+  fill: var(--static-green-main);
+  color: var(--static-green-main);
 }
 
 .color-green {
@@ -1566,56 +1606,69 @@
   color: #7FAE1B;
 }
 
-:host(.color-green-600) {
-  fill: #6B9321;
+:host(.color-static-green-600) {
+  fill: var(--static-green-600);
+  color: var(--static-green-600);
 }
 
-:host(.color-green-700) {
-  fill: #557827;
+:host(.color-static-green-700) {
+  fill: var(--static-green-700);
+  color: var(--static-green-700);
 }
 
-:host(.color-green-800) {
-  fill: #415E2D;
+:host(.color-static-green-800) {
+  fill: var(--static-green-800);
+  color: var(--static-green-800);
 }
 
-:host(.color-green-900) {
-  fill: #2C4333;
+:host(.color-static-green-900) {
+  fill: var(--static-green-900);
+  color: var(--static-green-900);
 }
 
-:host(.color-green-950) {
-  fill: #223637;
+:host(.color-static-green-950) {
+  fill: var(--static-green-950);
+  color: var(--static-green-950);
 }
 
-:host(.color-yellow-0) {
-  fill: #ffffff;
+:host(.color-static-yellow-0) {
+  fill: var(--static-yellow-0);
+  color: var(--static-yellow-0);
 }
 
-:host(.color-yellow-50) {
-  fill: #FFF9E5;
+:host(.color-static-yellow-50) {
+  fill: var(--static-yellow-50);
+  color: var(--static-yellow-50);
 }
 
-:host(.color-yellow-100) {
-  fill: #FEF3CC;
+:host(.color-static-yellow-100) {
+  fill: var(--static-yellow-100);
+  color: var(--static-yellow-100);
 }
 
-:host(.color-yellow-200) {
-  fill: #FEE899;
+:host(.color-static-yellow-200) {
+  fill: var(--static-yellow-200);
+  color: var(--static-yellow-200);
 }
 
-:host(.color-yellow-300) {
-  fill: #FEDC66;
+:host(.color-static-yellow-300) {
+  fill: var(--static-yellow-300);
+  color: var(--static-yellow-300);
 }
 
-:host(.color-yellow-400) {
-  fill: #FED133;
+:host(.color-static-yellow-400) {
+  fill: var(--static-yellow-400);
+  color: var(--static-yellow-400);
 }
 
-:host(.color-yellow-500) {
-  fill: #FEC600;
+:host(.color-static-yellow-500) {
+  fill: var(--static-yellow-500);
+  color: var(--static-yellow-500);
 }
 
-:host(.color-yellow-main) {
-  fill: #FEC600;
+:host(.color-static-yellow-main) {
+  fill: var(--static-yellow-main);
+  color: var(--static-yellow-main);
 }
 
 .color-yellow {
@@ -1626,56 +1679,69 @@
   color: #FEC600;
 }
 
-:host(.color-yellow-600) {
-  fill: #D0A60B;
+:host(.color-static-yellow-600) {
+  fill: var(--static-yellow-600);
+  color: var(--static-yellow-600);
 }
 
-:host(.color-yellow-700) {
-  fill: #A18717;
+:host(.color-static-yellow-700) {
+  fill: var(--static-yellow-700);
+  color: var(--static-yellow-700);
 }
 
-:host(.color-yellow-800) {
-  fill: #746722;
+:host(.color-static-yellow-800) {
+  fill: var(--static-yellow-800);
+  color: var(--static-yellow-800);
 }
 
-:host(.color-yellow-900) {
-  fill: #46482E;
+:host(.color-static-yellow-900) {
+  fill: var(--static-yellow-900);
+  color: var(--static-yellow-900);
 }
 
-:host(.color-yellow-950) {
-  fill: #2F3834;
+:host(.color-static-yellow-950) {
+  fill: var(--static-yellow-950);
+  color: var(--static-yellow-950);
 }
 
-:host(.color-red-0) {
-  fill: #ffffff;
+:host(.color-static-red-0) {
+  fill: var(--static-red-0);
+  color: var(--static-red-0);
 }
 
-:host(.color-red-50) {
-  fill: #FEECEB;
+:host(.color-static-red-50) {
+  fill: var(--static-red-50);
+  color: var(--static-red-50);
 }
 
-:host(.color-red-100) {
-  fill: #FCD9D6;
+:host(.color-static-red-100) {
+  fill: var(--static-red-100);
+  color: var(--static-red-100);
 }
 
-:host(.color-red-200) {
-  fill: #FAB3AE;
+:host(.color-static-red-200) {
+  fill: var(--static-red-200);
+  color: var(--static-red-200);
 }
 
-:host(.color-red-300) {
-  fill: #F78E86;
+:host(.color-static-red-300) {
+  fill: var(--static-red-300);
+  color: var(--static-red-300);
 }
 
-:host(.color-red-400) {
-  fill: #F5685E;
+:host(.color-static-red-400) {
+  fill: var(--static-red-400);
+  color: var(--static-red-400);
 }
 
-:host(.color-red-500) {
-  fill: #F34336;
+:host(.color-static-red-500) {
+  fill: var(--static-red-500);
+  color: var(--static-red-500);
 }
 
-:host(.color-red-main) {
-  fill: #F34336;
+:host(.color-static-red-main) {
+  fill: var(--static-red-main);
+  color: var(--static-red-main);
 }
 
 .color-red {
@@ -1686,56 +1752,69 @@
   color: #F34336;
 }
 
-:host(.color-red-600) {
-  fill: #C83E38;
+:host(.color-static-red-600) {
+  fill: var(--static-red-600);
+  color: var(--static-red-600);
 }
 
-:host(.color-red-700) {
-  fill: #9D3A3A;
+:host(.color-static-red-700) {
+  fill: var(--static-red-700);
+  color: var(--static-red-700);
 }
 
-:host(.color-red-800) {
-  fill: #72363B;
+:host(.color-static-red-800) {
+  fill: var(--static-red-800);
+  color: var(--static-red-800);
 }
 
-:host(.color-red-900) {
-  fill: #47323D;
+:host(.color-static-red-900) {
+  fill: var(--static-red-900);
+  color: var(--static-red-900);
 }
 
-:host(.color-red-950) {
-  fill: #2E2B3A;
+:host(.color-static-red-950) {
+  fill: var(--static-red-950);
+  color: var(--static-red-950);
 }
 
-:host(.color-grey-0) {
-  fill: #ffffff;
+:host(.color-static-grey-0) {
+  fill: var(--static-grey-0);
+  color: var(--static-grey-0);
 }
 
-:host(.color-grey-50) {
-  fill: #f7f7f7;
+:host(.color-static-grey-50) {
+  fill: var(--static-grey-50);
+  color: var(--static-grey-50);
 }
 
-:host(.color-grey-100) {
-  fill: #EEEEEE;
+:host(.color-static-grey-100) {
+  fill: var(--static-grey-100);
+  color: var(--static-grey-100);
 }
 
-:host(.color-grey-200) {
-  fill: #DEDEDE;
+:host(.color-static-grey-200) {
+  fill: var(--static-grey-200);
+  color: var(--static-grey-200);
 }
 
-:host(.color-grey-300) {
-  fill: #CDCDCD;
+:host(.color-static-grey-300) {
+  fill: var(--static-grey-300);
+  color: var(--static-grey-300);
 }
 
-:host(.color-grey-400) {
-  fill: #BDBDBD;
+:host(.color-static-grey-400) {
+  fill: var(--static-grey-400);
+  color: var(--static-grey-400);
 }
 
-:host(.color-grey-500) {
-  fill: #ADADAD;
+:host(.color-static-grey-500) {
+  fill: var(--static-grey-500);
+  color: var(--static-grey-500);
 }
 
-:host(.color-grey-main) {
-  fill: #ADADAD;
+:host(.color-static-grey-main) {
+  fill: var(--static-grey-main);
+  color: var(--static-grey-main);
 }
 
 .color-grey {
@@ -1746,56 +1825,69 @@
   color: #ADADAD;
 }
 
-:host(.color-grey-600) {
-  fill: #8F9295;
+:host(.color-static-grey-600) {
+  fill: var(--static-grey-600);
+  color: var(--static-grey-600);
 }
 
-:host(.color-grey-700) {
-  fill: #71787F;
+:host(.color-static-grey-700) {
+  fill: var(--static-grey-700);
+  color: var(--static-grey-700);
 }
 
-:host(.color-grey-800) {
-  fill: #535D67;
+:host(.color-static-grey-800) {
+  fill: var(--static-grey-800);
+  color: var(--static-grey-800);
 }
 
-:host(.color-grey-900) {
-  fill: #364351;
+:host(.color-static-grey-900) {
+  fill: var(--static-grey-900);
+  color: var(--static-grey-900);
 }
 
-:host(.color-grey-950) {
-  fill: #273646;
+:host(.color-static-grey-950) {
+  fill: var(--static-grey-950);
+  color: var(--static-grey-950);
 }
 
-:host(.color-orange-0) {
-  fill: #ffffff;
+:host(.color-static-orange-0) {
+  fill: var(--static-orange-0);
+  color: var(--static-orange-0);
 }
 
-:host(.color-orange-50) {
-  fill: #FFF3EB;
+:host(.color-static-orange-50) {
+  fill: var(--static-orange-50);
+  color: var(--static-orange-50);
 }
 
-:host(.color-orange-100) {
-  fill: #FFE7D7;
+:host(.color-static-orange-100) {
+  fill: var(--static-orange-100);
+  color: var(--static-orange-100);
 }
 
-:host(.color-orange-200) {
-  fill: #FFD0B0;
+:host(.color-static-orange-200) {
+  fill: var(--static-orange-200);
+  color: var(--static-orange-200);
 }
 
-:host(.color-orange-300) {
-  fill: #FFB988;
+:host(.color-static-orange-300) {
+  fill: var(--static-orange-300);
+  color: var(--static-orange-300);
 }
 
-:host(.color-orange-400) {
-  fill: #FFA261;
+:host(.color-static-orange-400) {
+  fill: var(--static-orange-400);
+  color: var(--static-orange-400);
 }
 
-:host(.color-orange-500) {
-  fill: #FF8B3A;
+:host(.color-static-orange-500) {
+  fill: var(--static-orange-500);
+  color: var(--static-orange-500);
 }
 
-:host(.color-orange-main) {
-  fill: #FF8B3A;
+:host(.color-static-orange-main) {
+  fill: var(--static-orange-main);
+  color: var(--static-orange-main);
 }
 
 .color-orange {
@@ -1806,30 +1898,77 @@
   color: #FF8B3A;
 }
 
-:host(.color-orange-600) {
-  fill: #D17739;
+:host(.color-static-orange-600) {
+  fill: var(--static-orange-600);
+  color: var(--static-orange-600);
 }
 
-:host(.color-orange-700) {
-  fill: #A2633A;
+:host(.color-static-orange-700) {
+  fill: var(--static-orange-700);
+  color: var(--static-orange-700);
 }
 
-:host(.color-orange-800) {
-  fill: #745039;
+:host(.color-static-orange-800) {
+  fill: var(--static-orange-800);
+  color: var(--static-orange-800);
 }
 
-:host(.color-orange-900) {
-  fill: #463C3A;
+:host(.color-static-orange-900) {
+  fill: var(--static-orange-900);
+  color: var(--static-orange-900);
 }
 
-:host(.color-orange-950) {
-  fill: #2F323A;
+:host(.color-static-orange-950) {
+  fill: var(--static-orange-950);
+  color: var(--static-orange-950);
 }
 
-:host(.color-white) {
+:host(.color-static-white) {
   fill: var(--static-white);
+  color: var(--static-white);
+}
+
+:host(.color-static-white-medium) {
+  fill: var(--static-white-medium);
+  color: var(--static-white-medium);
+}
+
+:host(.color-static-white-low) {
+  fill: var(--static-white-low);
+  color: var(--static-white-low);
+}
+
+:host(.color-static-white-lower) {
+  fill: var(--static-white-lower);
+  color: var(--static-white-lower);
+}
+
+:host(.color-static-white-lowest) {
+  fill: var(--static-white-lowest);
+  color: var(--static-white-lowest);
 }
 
-:host(.color-black) {
+:host(.color-static-black) {
   fill: var(--static-black);
+  color: var(--static-black);
+}
+
+:host(.color-static-black-medium) {
+  fill: var(--static-black-medium);
+  color: var(--static-black-medium);
+}
+
+:host(.color-static-black-low) {
+  fill: var(--static-black-low);
+  color: var(--static-black-low);
+}
+
+:host(.color-static-black-lower) {
+  fill: var(--static-black-lower);
+  color: var(--static-black-lower);
+}
+
+:host(.color-static-black-lowest) {
+  fill: var(--static-black-lowest);
+  color: var(--static-black-lowest);
 }