bootstrap-italia 2.17.2 → 3.0.0-alpha.0

package/src/js/plugins/fonts-loader.js

@@ -6,14 +6,8 @@
  * --------------------------------------------------------------------------
  */
 
-// Create our stylesheet
-export default (path = '/node_modules/bootstrap-italia/dist/fonts') => {
-  if (typeof window === 'undefined' || typeof document === 'undefined') {
-    return
-  }
-  const styleNode = document.createElement('style')
-  const __PUBLIC_PATH__ = window.__PUBLIC_PATH__ ? window.__PUBLIC_PATH__ : path
-  styleNode.innerHTML = `
+// Font CSS generators
+const getTitilliumWebCSS = (basePath) => `
   /* Titillium+Web:300,400,600,700 */
 
   /* titillium-web-300 - latin-ext_latin */
@@ -22,13 +16,13 @@ export default (path = '/node_modules/bootstrap-italia/dist/fonts') => {
     font-style: normal;
     font-weight: 300;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
+    src: url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.eot');
     src: local(''),
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.woff2') format('woff2'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.woff') format('woff'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.ttf') format('truetype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.svg#TitilliumWeb') format('svg');
   }
 
   /* titillium-web-300italic - latin-ext_latin */
@@ -37,13 +31,13 @@ export default (path = '/node_modules/bootstrap-italia/dist/fonts') => {
     font-style: italic;
     font-weight: 300;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.eot'); /* IE9 Compat Modes */
+    src: url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.eot');
     src: local(''),
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.woff2') format('woff2'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.woff') format('woff'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.ttf') format('truetype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.svg#TitilliumWeb') format('svg');
   }
 
   /* titillium-web-regular - latin-ext_latin */
@@ -52,13 +46,13 @@ export default (path = '/node_modules/bootstrap-italia/dist/fonts') => {
     font-style: normal;
     font-weight: 400;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
+    src: url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.eot');
     src: local(''),
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.woff2') format('woff2'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.woff') format('woff'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.ttf') format('truetype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.svg#TitilliumWeb') format('svg');
   }
 
   /* titillium-web-italic - latin-ext_latin */
@@ -67,13 +61,43 @@ export default (path = '/node_modules/bootstrap-italia/dist/fonts') => {
     font-style: italic;
     font-weight: 400;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
+    src: url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.eot');
+    src: local(''),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.woff2') format('woff2'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.woff') format('woff'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.ttf') format('truetype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.svg#TitilliumWeb') format('svg');
+  }
+
+  /* titillium-web-600 - latin-ext_latin */
+  @font-face {
+    font-family: 'Titillium Web';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.eot');
+    src: local(''),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.woff2') format('woff2'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.woff') format('woff'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.ttf') format('truetype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.svg#TitilliumWeb') format('svg');
+  }
+
+  /* titillium-web-600italic - latin-ext_latin */
+  @font-face {
+    font-family: 'Titillium Web';
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.eot');
     src: local(''),
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.woff2') format('woff2'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.woff') format('woff'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.ttf') format('truetype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.svg#TitilliumWeb') format('svg');
   }
 
   /* titillium-web-700 - latin-ext_latin */
@@ -82,13 +106,13 @@ export default (path = '/node_modules/bootstrap-italia/dist/fonts') => {
     font-style: normal;
     font-weight: 700;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
+    src: url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.eot');
     src: local(''),
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.woff2') format('woff2'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.woff') format('woff'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.ttf') format('truetype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.svg#TitilliumWeb') format('svg');
   }
 
   /* titillium-web-700italic - latin-ext_latin */
@@ -97,44 +121,189 @@ export default (path = '/node_modules/bootstrap-italia/dist/fonts') => {
     font-style: italic;
     font-weight: 700;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
+    src: url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.eot');
     src: local(''),
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.woff2') format('woff2'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.woff') format('woff'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.ttf') format('truetype'),
+        url('${basePath}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.svg#TitilliumWeb') format('svg');
   }
-  /* titillium-web-600 - latin-ext_latin */
+`
+
+const getTitilliumSansProCSS = (basePath) => `
+  /* Titillium Sans Pro - Light 300 */
   @font-face {
-    font-family: 'Titillium Web';
+    font-family: 'Titillium Sans Pro';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-Light.woff2') format('woff2'),
+         url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-Light.woff') format('woff');
+  }
+
+  /* Titillium Sans Pro - Light Italic 300 */
+  @font-face {
+    font-family: 'Titillium Sans Pro';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-LightItalic.woff2') format('woff2'),
+         url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-LightItalic.woff') format('woff');
+  }
+
+  /* Titillium Sans Pro - Regular 400 */
+  @font-face {
+    font-family: 'Titillium Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-Regular.woff2') format('woff2'),
+         url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-Regular.woff') format('woff');
+  }
+
+  /* Titillium Sans Pro - Italic 400 */
+  @font-face {
+    font-family: 'Titillium Sans Pro';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-Italic.woff2') format('woff2'),
+         url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-Italic.woff') format('woff');
+  }
+
+  /* Titillium Sans Pro - Semibold 600 */
+  @font-face {
+    font-family: 'Titillium Sans Pro';
     font-style: normal;
     font-weight: 600;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.eot'); /* IE9 Compat Modes */
-    src: local(''),
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+    src: url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-Semibold.woff2') format('woff2'),
+         url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-Semibold.woff') format('woff');
   }
 
-  /* titillium-web-600italic - latin-ext_latin */
+  /* Titillium Sans Pro - Semibold Italic 600 */
   @font-face {
-    font-family: 'Titillium Web';
+    font-family: 'Titillium Sans Pro';
     font-style: italic;
     font-weight: 600;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.eot'); /* IE9 Compat Modes */
-    src: local(''),
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+    src: url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-SemiboldItalic.woff2') format('woff2'),
+         url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-SemiboldItalic.woff') format('woff');
+  }
+
+  /* Titillium Sans Pro - Bold 700 */
+  @font-face {
+    font-family: 'Titillium Sans Pro';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-Bold.woff2') format('woff2'),
+         url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-Bold.woff') format('woff');
+  }
+
+  /* Titillium Sans Pro - Bold Italic 700 */
+  @font-face {
+    font-family: 'Titillium Sans Pro';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-BoldItalic.woff2') format('woff2'),
+         url('${basePath}/Titillium_Sans_Pro/TitilliumSansPro-BoldItalic.woff') format('woff');
+  }
+`
+
+const getTitillioCSS = (basePath) => `
+  /* Titillio - Light 300 */
+  @font-face {
+    font-family: 'Titillio';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url('${basePath}/Titillio/Titillio-Light.woff2') format('woff2'),
+         url('${basePath}/Titillio/Titillio-Light.woff') format('woff'),
+         url('${basePath}/Titillio/Titillio-Light.ttf') format('truetype');
+  }
+
+  /* Titillio - Light Italic 300 */
+  @font-face {
+    font-family: 'Titillio';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url('${basePath}/Titillio/Titillio-LightItalic.woff2') format('woff2'),
+         url('${basePath}/Titillio/Titillio-LightItalic.woff') format('woff'),
+         url('${basePath}/Titillio/Titillio-LightItalic.ttf') format('truetype');
+  }
+
+  /* Titillio - Regular 400 */
+  @font-face {
+    font-family: 'Titillio';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('${basePath}/Titillio/Titillio-Regular.woff2') format('woff2'),
+         url('${basePath}/Titillio/Titillio-Regular.woff') format('woff'),
+         url('${basePath}/Titillio/Titillio-Regular.ttf') format('truetype');
   }
 
+  /* Titillio - Regular Italic 400 */
+  @font-face {
+    font-family: 'Titillio';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url('${basePath}/Titillio/Titillio-RegularItalic.woff2') format('woff2'),
+         url('${basePath}/Titillio/Titillio-RegularItalic.woff') format('woff'),
+         url('${basePath}/Titillio/Titillio-RegularItalic.ttf') format('truetype');
+  }
+
+  /* Titillio - Semibold 600 */
+  @font-face {
+    font-family: 'Titillio';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('${basePath}/Titillio/Titillio-Semibold.woff2') format('woff2'),
+         url('${basePath}/Titillio/Titillio-Semibold.woff') format('woff'),
+         url('${basePath}/Titillio/Titillio-Semibold.ttf') format('truetype');
+  }
+
+  /* Titillio - Semibold Italic 600 */
+  @font-face {
+    font-family: 'Titillio';
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url('${basePath}/Titillio/Titillio-SemiboldItalic.woff2') format('woff2'),
+         url('${basePath}/Titillio/Titillio-SemiboldItalic.woff') format('woff'),
+         url('${basePath}/Titillio/Titillio-SemiboldItalic.ttf') format('truetype');
+  }
+
+  /* Titillio - Bold 700 */
+  @font-face {
+    font-family: 'Titillio';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('${basePath}/Titillio/Titillio-Bold.woff2') format('woff2'),
+         url('${basePath}/Titillio/Titillio-Bold.woff') format('woff'),
+         url('${basePath}/Titillio/Titillio-Bold.ttf') format('truetype');
+  }
+
+  /* Titillio - Bold Italic 700 */
+  @font-face {
+    font-family: 'Titillio';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url('${basePath}/Titillio/Titillio-BoldItalic.woff2') format('woff2'),
+         url('${basePath}/Titillio/Titillio-BoldItalic.woff') format('woff'),
+         url('${basePath}/Titillio/Titillio-BoldItalic.ttf') format('truetype');
+  }
+`
+
+const getLoraCSS = (basePath) => `
   /* Lora:400,700 */
 
   /* lora-regular - latin-ext_latin */
@@ -143,13 +312,13 @@ export default (path = '/node_modules/bootstrap-italia/dist/fonts') => {
     font-style: normal;
     font-weight: 400;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
+    src: url('${basePath}/Lora/lora-v20-latin-ext_latin-regular.eot');
     src: local(''),
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-regular.svg#Lora') format('svg'); /* Legacy iOS */
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-regular.woff2') format('woff2'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-regular.woff') format('woff'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-regular.ttf') format('truetype'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-regular.svg#Lora') format('svg');
   }
 
   /* lora-700 - latin-ext_latin */
@@ -158,13 +327,13 @@ export default (path = '/node_modules/bootstrap-italia/dist/fonts') => {
     font-style: normal;
     font-weight: 700;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
+    src: url('${basePath}/Lora/lora-v20-latin-ext_latin-700.eot');
     src: local(''),
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-700.svg#Lora') format('svg'); /* Legacy iOS */
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-700.woff2') format('woff2'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-700.woff') format('woff'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-700.ttf') format('truetype'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-700.svg#Lora') format('svg');
   }
 
   /* lora-italic - latin-ext_latin */
@@ -173,13 +342,13 @@ export default (path = '/node_modules/bootstrap-italia/dist/fonts') => {
     font-style: italic;
     font-weight: 400;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
+    src: url('${basePath}/Lora/lora-v20-latin-ext_latin-italic.eot');
     src: local(''),
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-italic.svg#Lora') format('svg'); /* Legacy iOS */
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-italic.woff2') format('woff2'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-italic.woff') format('woff'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-italic.ttf') format('truetype'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-italic.svg#Lora') format('svg');
   }
 
   /* lora-700italic - latin-ext_latin */
@@ -188,15 +357,17 @@ export default (path = '/node_modules/bootstrap-italia/dist/fonts') => {
     font-style: italic;
     font-weight: 700;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
+    src: url('${basePath}/Lora/lora-v20-latin-ext_latin-700italic.eot');
     src: local(''),
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-700italic.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Lora/lora-v20-latin-ext_latin-700italic.svg#Lora') format('svg'); /* Legacy iOS */
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-700italic.woff2') format('woff2'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-700italic.woff') format('woff'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-700italic.ttf') format('truetype'),
+        url('${basePath}/Lora/lora-v20-latin-ext_latin-700italic.svg#Lora') format('svg');
   }
+`
 
+const getRobotoMonoCSS = (basePath) => `
   /* Roboto+Mono:400,700 */
 
   /* roboto-mono-regular - latin-ext_latin */
@@ -205,13 +376,13 @@ export default (path = '/node_modules/bootstrap-italia/dist/fonts') => {
     font-style: normal;
     font-weight: 400;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
+    src: url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.eot');
     src: local(''),
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.woff2') format('woff2'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.woff') format('woff'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.ttf') format('truetype'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.svg#RobotoMono') format('svg');
   }
 
   /* roboto-mono-700 - latin-ext_latin */
@@ -220,13 +391,13 @@ export default (path = '/node_modules/bootstrap-italia/dist/fonts') => {
     font-style: normal;
     font-weight: 700;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
+    src: url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.eot');
     src: local(''),
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.svg#RobotoMono') format('svg'); /* Legacy iOS */
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.woff2') format('woff2'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.woff') format('woff'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.ttf') format('truetype'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.svg#RobotoMono') format('svg');
   }
 
   /* roboto-mono-italic - latin-ext_latin */
@@ -235,13 +406,13 @@ export default (path = '/node_modules/bootstrap-italia/dist/fonts') => {
     font-style: italic;
     font-weight: 400;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
+    src: url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.eot');
     src: local(''),
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.svg#RobotoMono') format('svg'); /* Legacy iOS */
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.woff2') format('woff2'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.woff') format('woff'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.ttf') format('truetype'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.svg#RobotoMono') format('svg');
   }
 
   /* roboto-mono-700italic - latin-ext_latin */
@@ -250,14 +421,72 @@ export default (path = '/node_modules/bootstrap-italia/dist/fonts') => {
     font-style: italic;
     font-weight: 700;
     font-display: swap;
-    src: url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
+    src: url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.eot');
     src: local(''),
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.woff') format('woff'), /* Modern Browsers */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
-        url('${__PUBLIC_PATH__}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.svg#RobotoMono') format('svg'); /* Legacy iOS */
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.woff2') format('woff2'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.woff') format('woff'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.ttf') format('truetype'),
+        url('${basePath}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.svg#RobotoMono') format('svg');
   }
-  `
+`
+
+const fontGenerators = {
+  'titillium-web': getTitilliumWebCSS,
+  'titillium-sans-pro': getTitilliumSansProCSS,
+  titillio: getTitillioCSS,
+  lora: getLoraCSS,
+  'roboto-mono': getRobotoMonoCSS,
+}
+
+export default (path = '/node_modules/bootstrap-italia/dist/fonts', options = {}) => {
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return
+  }
+
+  // Backward compatibility: if called without options, use legacy behavior
+  if (Object.keys(options).length === 0) {
+    options = {
+      titillium: 'web',
+      fonts: ['titillium', 'lora', 'roboto-mono'],
+    }
+  }
+
+  const {
+    titillium = 'web', // 'web' | 'sans-pro'
+    fonts = ['titillium', 'lora', 'roboto-mono'], // which font families to include
+  } = options
+
+  const titilliumFontId = titillium === 'sans-pro' ? 'titillium-sans-pro' : 'titillium-web'
+  const finalFonts = fonts.map((font) => (font === 'titillium' ? titilliumFontId : font))
+  const __PUBLIC_PATH__ = window.__PUBLIC_PATH__ ? window.__PUBLIC_PATH__ : path
+
+  const cssChunks = finalFonts
+    .filter((fontId) => fontGenerators[fontId]) // only valid fonts
+    .map((fontId) => fontGenerators[fontId](__PUBLIC_PATH__))
+  const finalCSS = cssChunks.join('\n')
+
+  const styleNode = document.createElement('style')
+  styleNode.innerHTML = finalCSS
   document.getElementsByTagName('head')[0].appendChild(styleNode)
 }
+
+/*
+USAGE EXAMPLES:
+
+// Backward compatible
+loadFonts('/fonts');
+
+// Load only Titillium Sans Pro
+loadFonts('/fonts', { titillium: 'sans-pro', fonts: ['titillium'] });
+
+// Load Titillium Sans Pro + Lora (no Roboto Mono)
+loadFonts('/fonts', { titillium: 'sans-pro', fonts: ['titillium', 'lora'] });
+
+// Load all fonts with Titillium Sans Pro as the Titillium variant
+loadFonts('/fonts', { titillium: 'sans-pro' });
+
+POSSIBLE VALUES:
+- titillium: 'web' | 'sans-pro'
+- fonts: ['titillium', 'lora', 'roboto-mono'] (any combination)
+*/

package/src/js/version.js

@@ -8,5 +8,5 @@
 
 // NOTE:bootstrap italia version variable, useful to check for the current version
 
-const BOOTSTRAP_ITALIA_VERSION = '2.17.2'
+const BOOTSTRAP_ITALIA_VERSION = '3.0.0-alpha.0'
 export default BOOTSTRAP_ITALIA_VERSION

package/src/scss/base/_maps.scss

@@ -52,3 +52,14 @@ $utilities-border-colors: map-loop($utilities-border, rgba-css-var, '$key', 'bor
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
 
 $gutters: $spacers !default;
+
+// Colors Palette
+// TODO: Use css variables instead of Sass maps
+$colors-palette: (
+  'primary': $color-primary,
+  'secondary': $color-secondary,
+  'success': $color-success,
+  'warning': $color-warning,
+  'danger': $color-danger,
+  'inverse': $color-inverse,
+) !default;

package/src/scss/base/_mixins.scss

@@ -20,6 +20,7 @@
 
 // Utilities
 @import 'mixins/utilities';
+@import 'mixins/focus';
 
 // Components
 @import 'mixins/alert';
@@ -35,7 +36,7 @@
 // Skins
 @import 'mixins/border-radius';
 @import 'mixins/box-shadow';
-@import 'mixins/gradients';
+@import 'mixins/gradients'; // Disabled as not used in the project
 @import 'mixins/transition';
 
 // Layout