@design-factory/design-factory 17.1.0 → 18.0.0

package/styles/scss/components/fonts/_fonts-family.scss

@@ -1,9 +1,10 @@
+@use 'sass:meta';
+
 @font-face {
   font-family: 'Source Sans Pro';
-  src: url('#{$font-path}/source-sans-pro-light/source-sans-pro-light.woff2') format('woff2'),
-    url('#{$font-path}/source-sans-pro-light/source-sans-pro-light.woff') format('woff'),
-    url('#{$font-path}/source-sans-pro-light/source-sans-pro-light.ttf') format('truetype'),
-    url('#{$font-path}/source-sans-pro-light/source-sans-pro-light.svg#source_sans_prolight') format('svg');
+  src:
+    url('#{$font-path}/source-sans-pro-light/source-sans-pro-light.woff2') format('woff2'),
+    url('#{$font-path}/source-sans-pro-light/source-sans-pro-light.woff') format('woff');
   font-style: normal;
   font-weight: 100;
   font-display: swap;
@@ -11,10 +12,9 @@
 
 @font-face {
   font-family: 'Source Sans Pro';
-  src: url('#{$font-path}/source-sans-pro-regular/source-sans-pro-regular.woff2') format('woff2'),
-    url('#{$font-path}/source-sans-pro-regular/source-sans-pro-regular.woff') format('woff'),
-    url('#{$font-path}/source-sans-pro-regular/source-sans-pro-regular.ttf') format('truetype'),
-    url('#{$font-path}/source-sans-pro-regular/source-sans-pro-regular.svg#source_sans_proregular') format('svg');
+  src:
+    url('#{$font-path}/source-sans-pro-regular/source-sans-pro-regular.woff2') format('woff2'),
+    url('#{$font-path}/source-sans-pro-regular/source-sans-pro-regular.woff') format('woff');
   font-style: normal;
   font-weight: 400;
   font-display: swap;
@@ -22,10 +22,9 @@
 
 @font-face {
   font-family: 'Source Sans Pro';
-  src: url('#{$font-path}/source-sans-pro-semibold/source-sans-pro-semibold.woff2') format('woff2'),
-    url('#{$font-path}/source-sans-pro-semibold/source-sans-pro-semibold.woff') format('woff'),
-    url('#{$font-path}/source-sans-pro-semibold/source-sans-pro-semibold.ttf') format('truetype'),
-    url('#{$font-path}/source-sans-pro-semibold/source-sans-pro-semibold.svg#source_sans_prosemibold') format('svg');
+  src:
+    url('#{$font-path}/source-sans-pro-semibold/source-sans-pro-semibold.woff2') format('woff2'),
+    url('#{$font-path}/source-sans-pro-semibold/source-sans-pro-semibold.woff') format('woff');
   font-style: normal;
   font-weight: 500;
   font-display: swap;
@@ -33,19 +32,19 @@
 
 @font-face {
   font-family: 'Source Sans Pro';
-  src: url('#{$font-path}/source-sans-pro-bold/source-sans-pro-bold.woff2') format('woff2'),
-    url('#{$font-path}/source-sans-pro-bold/source-sans-pro-bold.woff') format('woff'),
-    url('#{$font-path}/source-sans-pro-bold/source-sans-pro-bold.ttf') format('truetype'),
-    url('#{$font-path}/source-sans-pro-bold/source-sans-pro-bold.svg#source_sans_probold') format('svg');
+  src:
+    url('#{$font-path}/source-sans-pro-bold/source-sans-pro-bold.woff2') format('woff2'),
+    url('#{$font-path}/source-sans-pro-bold/source-sans-pro-bold.woff') format('woff');
   font-style: normal;
   font-weight: 700;
   font-display: swap;
 }
 
-@if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+@if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-Light.woff2') format('woff2'),
+    src:
+      url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-Light.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-Light.woff') format('woff');
     font-style: normal;
     font-weight: 100;
@@ -54,16 +53,18 @@
 
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-LightItalic.woff2') format('woff2'),
+    src:
+      url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-LightItalic.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-LightItalic.woff') format('woff');
     font-style: italic;
     font-weight: 100;
     font-display: swap;
   }
-  
+
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-Bold.woff2') format('woff2'),
+    src:
+      url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-Bold.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-Bold.woff') format('woff');
     font-style: normal;
     font-weight: 700;
@@ -72,16 +73,18 @@
 
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-BoldItalic.woff2') format('woff2'),
+    src:
+      url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-BoldItalic.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-BoldItalic.woff') format('woff');
     font-style: italic;
     font-weight: 700;
     font-display: swap;
   }
-  
+
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-Regular.woff2') format('woff2'),
+    src:
+      url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-Regular.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-Regular.woff') format('woff');
     font-style: normal;
     font-weight: 400;
@@ -90,7 +93,8 @@
 
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-RegularItalic.woff2') format('woff2'),
+    src:
+      url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-RegularItalic.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-RegularItalic.woff') format('woff');
     font-style: italic;
     font-weight: 400;
@@ -99,7 +103,8 @@
 
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-Medium.woff2') format('woff2'),
+    src:
+      url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-Medium.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-Medium.woff') format('woff');
     font-style: normal;
     font-weight: 500;
@@ -108,42 +113,39 @@
 
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-MediumItalic.woff2') format('woff2'),
+    src:
+      url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-MediumItalic.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-MediumItalic.woff') format('woff');
     font-style: italic;
     font-weight: 500;
     font-display: swap;
   }
-
 } @else {
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-thin/amadeus-thin.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-thin/amadeus-thin.woff') format('woff'),
-      url('#{$font-path}/amadeus-thin/amadeus-thin.ttf') format('truetype'),
-      url('#{$font-path}/amadeus-thin/amadeus-thin.svg#amadeusthin') format('svg');
+    src:
+      url('#{$font-path}/amadeus-thin/amadeus-thin.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-thin/amadeus-thin.woff') format('woff');
     font-style: normal;
     font-weight: 100;
     font-display: swap;
   }
-  
+
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-bold/amadeus-bold.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-bold/amadeus-bold.woff') format('woff'),
-      url('#{$font-path}/amadeus-bold/amadeus-bold.ttf') format('truetype'),
-      url('#{$font-path}/amadeus-bold/amadeus-bold.svg#amadeusbold') format('svg');
+    src:
+      url('#{$font-path}/amadeus-bold/amadeus-bold.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-bold/amadeus-bold.woff') format('woff');
     font-style: normal;
     font-weight: 700;
     font-display: swap;
   }
-  
+
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-regular/amadeus-regular.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-regular/amadeus-regular.woff') format('woff'),
-      url('#{$font-path}/amadeus-regular/amadeus-regular.ttf') format('truetype'),
-      url('#{$font-path}/amadeus-regular/amadeus-regular.svg#amadeusregular') format('svg');
+    src:
+      url('#{$font-path}/amadeus-regular/amadeus-regular.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-regular/amadeus-regular.woff') format('woff');
     font-style: normal;
     font-weight: 400;
     font-display: swap;
@@ -152,10 +154,7 @@
 
 @font-face {
   font-family: 'Design-Factory-icon';
-  src: url('#{$font-path}/icon-font/light/df-light-300.woff2') format('woff2'),
-    url('#{$font-path}/icon-font/light/df-light-300.woff') format('woff'),
-    url('#{$font-path}/icon-font/light/df-light-300.ttf') format('truetype'),
-    url('#{$font-path}/icon-font/light/df-light-300.svg#df-light-300') format('svg');
+  src: url('#{$font-path}/df-icons/df-icons-light.woff2') format('woff2');
   font-style: normal;
   font-weight: 300;
   font-display: block;
@@ -163,11 +162,68 @@
 
 @font-face {
   font-family: 'Design-Factory-icon';
-  src: url('#{$font-path}/icon-font/solid/df-solid-900.woff2') format('woff2'),
-    url('#{$font-path}/icon-font/solid/df-solid-900.woff') format('woff'),
-    url('#{$font-path}/icon-font/solid/df-solid-900.ttf') format('truetype'),
-    url('#{$font-path}/icon-font/solid/df-solid-900.svg#df-solid-900') format('svg');
+  src: url('#{$font-path}/df-icons/df-icons-solid.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+}
+
+/*!
+ * Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+
+@font-face {
+  font-family: 'Font Awesome 6 Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: block;
+  src: url('#{$font-path}/font-awesome/fa-light-300.woff2') format('woff2');
+}
+
+.fal,
+.fa-light {
+  font-family: 'Font Awesome 6 Pro', sans-serif;
+  font-weight: 300 !important;
+}
+
+/*!
+ * Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+
+@font-face {
+  font-family: 'Font Awesome 6 Pro';
   font-style: normal;
   font-weight: 900;
   font-display: block;
+  src: url('#{$font-path}/font-awesome/fa-solid-900.woff2') format('woff2');
+}
+
+.fas,
+.fa-solid {
+  font-family: 'Font Awesome 6 Pro', sans-serif;
+  font-weight: 900 !important;
+}
+
+/*!
+ * Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+
+@font-face {
+  font-family: 'Font Awesome 6 Brands';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url('#{$font-path}/font-awesome/fa-brands-400.woff2') format('woff2');
+}
+
+.fab,
+.fa-brands {
+  font-family: 'Font Awesome 6 Brands', sans-serif !important;
+  font-weight: 400;
 }

package/styles/scss/components/fonts/_fonts.scss

@@ -73,7 +73,7 @@ mark {
   padding-bottom: var(--#{$prefix}recommend-padding-bottom);
   margin-bottom: var(--#{$prefix}recommend-margin-bottom);
   &:before {
-    @extend %df-icon-style;
+    font-family: $df-font-awesome-font-family;
     font-weight: $df-icon-solid-font-weight;
     margin-inline-end: $df-recommend-icon-margin-inline-end;
   }
@@ -82,20 +82,20 @@ mark {
 .df-recommend {
   color: var(--#{$prefix}recommend-color);
   &:before {
-    content: '\ea19'; // icon-check-circle
+    content: '\f058'; // fa-check-circle
   }
 }
 
 .df-not-recommend {
   color: var(--#{$prefix}recommend-not-color);
   &:before {
-    content: '\ec97'; // icon-minus-circle
+    content: '\f056'; // fa-minus-circle
   }
 }
 
 .df-warning {
   color: var(--#{$prefix}recommend-warning-color);
   &:before {
-    content: '\eafc'; // icon-exclamation-triangle
+    content: '\f071'; // fa-exclamation-triangle
   }
 }