@drivy/cobalt 0.23.0 → 0.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -68,6 +68,7 @@
     "core-js": "3.26.1",
     "css-loader": "6.7.2",
     "eslint": "8.28.0",
+    "file-loader": "6.2.0",
     "jest": "29.3.1",
     "jest-environment-jsdom": "29.3.1",
     "nested-object-access": "^0.2.5",
@@ -133,7 +134,7 @@
   },
   "files": [
     "tokens/**/*",
-    "**/*.{scss,css,d.ts,js,js.map,svg,png,woff,woff2}",
+    "**/*.{scss,css,d.ts,js,js.map,svg,png,woff,woff2,md}",
     ".stylelintrc.js"
   ],
   "publishConfig": {

package/styles/core/fonts.scss

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: "BrownPro";
+  font-style: normal;
+  font-weight: bold;
+  font-display: swap;
+  // path here is related to the root file (here ../core.scss) for the sass resolver
+  // https://webpack.js.org/loaders/sass-loader/
+  src: url("fonts/BrandFont.woff") format("woff");
+}

package/styles/core.scss

@@ -1,3 +1,4 @@
+@import "core/fonts";
 @import "core/palette";
 @import "core/theme";
 @import "core/utilities";

package/styles/fonts/README.md

@@ -0,0 +1,19 @@
+Our official branding font is a licensed paid web font, meaning that we can't distribute it through our NPM package (which uses the MIT license). So you won't find it in our design system, instead we put an [open font licensed](https://en.wikipedia.org/wiki/SIL_Open_Font_License) one as a placeholder ([source](https://fonts.google.com/specimen/Poppins)). If you want to use a diffrent brand font, you can alias that placeholder to use a font on your side instead.
+
+Here how we did it using our builder `Webpack`:
+
+```javascript
+{
+  resolve: {
+    alias: {
+      // alias the path used in the url() in the core/fonts.scss file
+      ["fonts/BrandFont.woff"]: path.resolve(
+        __dirname,
+        "our/path/to/fonts/OurOfficialBrandFont.woff"
+      )
+    }
+  }
+}
+```
+
+You can use another builder as long as it provides a way to alias an asset when importing it or just use the placeholder font.