@drivy/cobalt 0.24.0 → 0.25.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drivy/cobalt",
3
- "version": "0.24.0",
3
+ "version": "0.25.1",
4
4
  "description": "Opinionated design system for Drivy's projects.",
5
5
  "main": "src/index.js",
6
6
  "types": "types/index.d.ts",
@@ -3,5 +3,5 @@
3
3
  font-style: normal;
4
4
  font-weight: bold;
5
5
  font-display: swap;
6
- src: url("fonts/BrownPro-Bold.woff") format("woff");
6
+ src: url("fonts/BrandFont.woff") format("woff");
7
7
  }
@@ -1,14 +1,19 @@
1
- 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`.
1
+ 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 (see `placeholder-BrandFont.woff` [source](https://fonts.google.com/specimen/Poppins)). In order to get that brand font work, you have to use an alias in your builder (like `resolve.alias` for `Webpack`). You can use the placeholder font we provide here or a custom font on your side.
2
2
 
3
- You can do it using a `postinstall` script to automatically doing it when installing/upgrading the Cobalt NPM package:
4
- ```javascript
5
- const path = require("path")
6
- const fs = require("fs-extra")
3
+ Here how we did it using our builder `Webpack`:
7
4
 
8
- fs.copyFileSync(
9
- path.join("<path_to_your_font_to_copy>", "BrownPro-Bold.woff"),
10
- path.join(__dirname, "../node_modules/@drivy/cobalt/styles/fonts/BrownPro-Bold.woff")
11
- )
5
+ ```javascript
6
+ {
7
+ resolve: {
8
+ alias: {
9
+ // alias the path used in the url() in the core/fonts.scss file
10
+ ["fonts/BrandFont.woff"]: path.resolve(
11
+ __dirname,
12
+ "our/path/to/fonts/OurOfficialBrandFont.woff"
13
+ )
14
+ }
15
+ }
16
+ }
12
17
  ```
13
18
 
14
- By doing this, Cobalt will use your provided font when using the `BrownPro` family.
19
+ You can use another builder as long as it provides a way to alias an asset when importing it, then pass your custom font or the placeholder one `placeholder-BrandFont.woff` from this folder.