@lux-design-system/font 1.0.0-alpha.0 → 1.0.0-alpha.1

package/README.md

@@ -1,32 +1,42 @@
 # Font assets voor het LUX Design System
 
-Deze package bevat de lettertypes RijksoverheidSerif en RijksoverheidSans die het LUX Design System gebruikt.  
+Deze package bevat de referenties naar de lettertypes RijksoverheidSerif en RijksoverheidSans die het LUX Design System gebruikt.  
 **Let op:** Deze fonts zijn auteurrechtelijk beschermd. Lees meer op [Gebruiksvoorwaarden typografie](https://www.rijkshuisstijl.nl/publiek/modules/product/DigitalStyleGuide/default/index.aspx?ItemId=10370) op Rijkshuisstijl.nl
 
 ## Installeren
 
 ### NPM
 
-`npm install @lux-design-system/fonts --save-dev`
+`npm install @lux-design-system/font --save-dev`
 
 ### Yarn
 
-`yarn add @lux-design-system/fonts --dev`
+`yarn add @lux-design-system/font --dev`
 
 ### PNPM
 
-`pnpm add -D @lux-design-system/fonts --save-dev`
+`pnpm add -D @lux-design-system/font --save-dev`
 
-Daarna zijn de volgende fonts beschikbaar:
+Daarna zijn de volgende `@font-face` `font-family`s beschikbaar:
 
-* RO Sans Web Text Regular
-* RO Sans Web Text Bold
-* RO Sans Web Text Italic
+- RijksoverheidSansWebText, in regular, bold en italic
+- RijksoverheidSerifWeb, in regular, bold en italic
+
+_De fonts worden vanwege copyright niet mee gepubliceerd._
 
 ## Bestanden
 
-### `index.css`
+### `dist/index.css`
+
 Hierin staan de definities en font-family-namen die binnen LUX worden gebruikt.
 
-Dit bestand kun je importeren of invoegen in je website of applicatie
+Dit bestand kun je importeren of invoegen in je website of applicatie. De font-bestanden zal je zelf naar de folder moeten kopieren.
+
+### `dist/ro-font-face-mixin.scss` en `index.scss`
+
+De SCSS mixin waarin de definities opgebouwd worden, deze kan je in je eigen buildproces meenemen en daarmee je eigen folder opgeven waar de font-bestanden zijn gekopieerd.
+Een voorbeeld staat in `index.scss`.
+
+## Eigen (online) font gebruiken?
 
+Dan heb je deze package niet nodig.

package/dist/index.css

@@ -1,34 +1,36 @@
 @font-face {
   font-style: normal;
   font-weight: 400;
-  src:
-    local("ROsanswebtextregular"),
-    url("ROsanswebtextregular.woff") format("woff"),
-    url("ROsanswebtextregular.eot") format("embedded-opentype"),
-    url("ROsanswebtextregular.ttf") format("truetype");
+  src: local("ROsanswebtextregular"), url("./ROsanswebtextregular.woff") format("woff"), url("./ROsanswebtextregular.eot") format("embedded-opentype"), url("./ROsanswebtextregular.ttf") format("truetype");
   font-family: "RijksoverheidSansWebText";
 }
-
 @font-face {
   font-style: normal;
   font-weight: 700;
-  src:
-    local("ROsanswebtextbold"),
-    url("ROsanswebtextbold.woff") format("woff"),
-    url("ROsanswebtextbold.eot") format("embedded-opentype"),
-    url("ROsanswebtextbold.ttf") format("truetype");
+  src: local("ROsanswebtextbold"), url("./ROsanswebtextbold.woff") format("woff"), url("./ROsanswebtextbold.eot") format("embedded-opentype"), url("./ROsanswebtextbold.ttf") format("truetype");
   font-family: "RijksoverheidSansWebText";
 }
-
 @font-face {
   font-style: italic;
   font-weight: 400;
-  src:
-    local("ROsanswebtextitalic"),
-    url("ROsanswebtextitalic.woff") format("woff"),
-    url("ROsanswebtextitalic.eot") format("embedded-opentype"),
-    url("ROsanswebtextitalic.ttf") format("truetype");
+  src: local("ROsanswebtextitalic"), url("./ROsanswebtextitalic.woff") format("woff"), url("./ROsanswebtextitalic.eot") format("embedded-opentype"), url("./ROsanswebtextitalic.ttf") format("truetype");
   font-family: "RijksoverheidSansWebText";
 }
-
-/* TODO: Serif toevoegen */
+@font-face {
+  font-style: normal;
+  font-weight: 400;
+  src: local("ROserifwebregular"), url("./ROserifwebregular.woff") format("woff"), url("./ROserifwebregular.eot") format("embedded-opentype"), url("./ROserifwebregular.ttf") format("truetype");
+  font-family: "RijksoverheidSerifWeb";
+}
+@font-face {
+  font-style: normal;
+  font-weight: 700;
+  src: local("ROserifwebbold"), url("./ROserifwebbold.woff") format("woff"), url("./ROserifwebbold.eot") format("embedded-opentype"), url("./ROserifwebbold.ttf") format("truetype");
+  font-family: "RijksoverheidSerifWeb";
+}
+@font-face {
+  font-style: italic;
+  font-weight: 400;
+  src: local("ROserifwebitalic"), url("./ROserifwebitalic.woff") format("woff"), url("./ROserifwebitalic.eot") format("embedded-opentype"), url("./ROserifwebitalic.ttf") format("truetype");
+  font-family: "RijksoverheidSerifWeb";
+}

package/dist/index.scss

@@ -0,0 +1,5 @@
+@import "ro-font-face-mixin";
+
+$lux-font-folder: "." !default;
+
+@include ro-font-face($lux-font-folder);

package/dist/ro-font-face-mixin.scss

@@ -0,0 +1,67 @@
+@mixin ro-font-face($folder: ".") {
+  @font-face {
+    font-style: normal;
+    font-weight: 400;
+    src:
+      local("ROsanswebtextregular"),
+      url("#{$folder}/ROsanswebtextregular.woff") format("woff"),
+      url("#{$folder}/ROsanswebtextregular.eot") format("embedded-opentype"),
+      url("#{$folder}/ROsanswebtextregular.ttf") format("truetype");
+    font-family: "RijksoverheidSansWebText";
+  }
+
+  @font-face {
+    font-style: normal;
+    font-weight: 700;
+    src:
+      local("ROsanswebtextbold"),
+      url("#{$folder}/ROsanswebtextbold.woff") format("woff"),
+      url("#{$folder}/ROsanswebtextbold.eot") format("embedded-opentype"),
+      url("#{$folder}/ROsanswebtextbold.ttf") format("truetype");
+    font-family: "RijksoverheidSansWebText";
+  }
+
+  @font-face {
+    font-style: italic;
+    font-weight: 400;
+    src:
+      local("ROsanswebtextitalic"),
+      url("#{$folder}/ROsanswebtextitalic.woff") format("woff"),
+      url("#{$folder}/ROsanswebtextitalic.eot") format("embedded-opentype"),
+      url("#{$folder}/ROsanswebtextitalic.ttf") format("truetype");
+    font-family: "RijksoverheidSansWebText";
+  }
+
+  @font-face {
+    font-style: normal;
+    font-weight: 400;
+    src:
+      local("ROserifwebregular"),
+      url("#{$folder}/ROserifwebregular.woff") format("woff"),
+      url("#{$folder}/ROserifwebregular.eot") format("embedded-opentype"),
+      url("#{$folder}/ROserifwebregular.ttf") format("truetype");
+    font-family: "RijksoverheidSerifWeb";
+  }
+
+  @font-face {
+    font-style: normal;
+    font-weight: 700;
+    src:
+      local("ROserifwebbold"),
+      url("#{$folder}/ROserifwebbold.woff") format("woff"),
+      url("#{$folder}/ROserifwebbold.eot") format("embedded-opentype"),
+      url("#{$folder}/ROserifwebbold.ttf") format("truetype");
+    font-family: "RijksoverheidSerifWeb";
+  }
+
+  @font-face {
+    font-style: italic;
+    font-weight: 400;
+    src:
+      local("ROserifwebitalic"),
+      url("#{$folder}/ROserifwebitalic.woff") format("woff"),
+      url("#{$folder}/ROserifwebitalic.eot") format("embedded-opentype"),
+      url("#{$folder}/ROserifwebitalic.ttf") format("truetype");
+    font-family: "RijksoverheidSerifWeb";
+  }
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.1",
   "author": "Community for NL Design System",
   "description": "Font assets for LUX, the Design System for Logius, based on the NL Design System architecture",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -18,14 +18,17 @@
   ],
   "scripts": {
     "clean:dist": "rimraf dist/",
-    "create:dist": "cpy . ../../dist/ --cwd=src",
+    "create:dist": "cpy src/**/*.scss dist/",
     "prebuild": "npm run clean:dist",
-    "build": "npm run create:dist",
+    "build:css": "sass src/index.scss:dist/index.css --no-source-map --verbose",
+    "build": "npm-run-all create:dist build:css",
     "prepack": "npm run build"
   },
   "devDependencies": {
     "cpy-cli": "5.0.0",
-    "rimraf": "5.0.7"
+    "sass": "1.77.4",
+    "rimraf": "5.0.7",
+    "npm-run-all": "4.1.5"
   },
   "repository": {
     "type": "git+ssh",