@drivy/cobalt 0.24.0 → 0.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",

package/styles/core/fonts.scss

@@ -3,5 +3,7 @@
   font-style: normal;
   font-weight: bold;
   font-display: swap;
-  src: url("fonts/BrownPro-Bold.woff") format("woff");
+  // 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/fonts/README.md

@@ -1,14 +1,19 @@
-Our official font `BrownPro` in its `Bold` version is a licensed paid web font, meaning that we can't distribute it through our NPM package. So you won't find any font files directly in our design system. If you want to use a font as `Brown-Pro`, just add a font file in this `fonts/` folder named `BrownPro-Bold.woff`.
+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.
 
-You can do it using a `postinstall` script to automatically doing it when installing/upgrading the Cobalt NPM package:
-```javascript
-const path = require("path")
-const fs = require("fs-extra")
+Here how we did it using our builder `Webpack`:
 
-fs.copyFileSync(
-  path.join("<path_to_your_font_to_copy>", "BrownPro-Bold.woff"),
-  path.join(__dirname, "../node_modules/@drivy/cobalt/styles/fonts/BrownPro-Bold.woff")
-)
+```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"
+      )
+    }
+  }
+}
 ```
 
-By doing this, Cobalt will use your provided font when using the `BrownPro` family.
+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.