Move icon font to DS, add button icon styles

frontend/package.json

@@ -59,6 +59,7 @@
     "theo": "^8.1.5",
     "ts-node": "~8.3.0",
     "typescript": "~4.2.4",
+    "webfonts-generator": "^0.4.0",
     "webpack-bundle-analyzer": "^4.4.2"
   },
   "dependencies": {
@@ -146,6 +147,7 @@
     "build": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --configuration production --named-chunks --extract-css --source-map",
     "build:watch": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --watch --named-chunks --extract-css",
     "tokens:generate": "theo src/app/spot/styles/tokens/tokens.yml --transform web --format sass,json --dest src/app/spot/styles/tokens/dist",
+    "icon-font:generate": "node ./src/app/spot/icon-font/generate.js ./src/app/spot/icon-font",
     "preserve": "./scripts/link_plugin_placeholder.js",
     "serve": "NG_PERSISTENT_BUILD_CACHE=1 node --max_old_space_size=8096 ./node_modules/@angular/cli/bin/ng serve --host 0.0.0.0 --public-host http://localhost:4200",
     "serve:test": "NG_PERSISTENT_BUILD_CACHE=1 node --max_old_space_size=8096 ./node_modules/@angular/cli/bin/ng serve --host 0.0.0.0 --disable-host-check --public-host http://frontend-test:4200",

frontend/src/app/spot/components/drop-modal/drop-modal.component.html

@@ -6,10 +6,10 @@
   <ng-content select="[slot=body]"></ng-content>
 </div>
 <button
-  class="spot-drop-modal--close-button spot-button spot-button"
+  class="spot-drop-modal--close-button spot-button"
   type="button"
   aria-label="Close"
   (click)="close()"
 >
-  <span class="icon-close"></span>
+  <span class="spot-icon spot-icon_close"></span>
 </button>

frontend/src/app/spot/icon-font/generate.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+
+const webfontsGenerator = require('webfonts-generator');
+const path = require('path');
+const fs = require('fs');
+const glob = require("glob")
+
+const TEMPLATE_DIR = path.resolve(process.argv[2]);
+const CSS_FONT_URL = "../../../../../frontend/src/assets/fonts/openproject_icon/";
+const FONT_DESTINATION = path.resolve(__dirname, '..', '..', '..', '..', '..', 'frontend', 'src', 'assets', 'fonts', 'openproject_icon');
+
+const files = glob.sync(path.join(TEMPLATE_DIR, 'src/*.svg'));
+
+webfontsGenerator({
+  files,
+  "fontName": "openproject-icon-font",
+  "cssFontsUrl": CSS_FONT_URL,
+  "dest": FONT_DESTINATION,
+  "cssDest": path.join(
+    path.resolve(__dirname, '..', 'styles', 'sass', 'common'),
+    'icon.sass',
+  ),
+  "cssTemplate": path.join(TEMPLATE_DIR, "icon.template.sass"),
+  "types": ['woff2', 'woff'],
+  "fixedWidth": true,
+  "descent": 100
+}, function(error) {
+  if (error) {
+    console.log('Failed to build icon font. ', error);
+  }
+});
+
+webfontsGenerator({
+  files,
+  "fontName": "openproject-icon-font",
+  "cssFontsUrl": CSS_FONT_URL,
+  "dest": FONT_DESTINATION,
+  "cssDest": path.join(
+    path.resolve(__dirname, '..', '..', '..', '..', '..', 'frontend', 'src', 'global_styles', 'fonts'),
+    '_openproject_icon_definitions.sass',
+  ),
+  "cssTemplate": path.join(TEMPLATE_DIR, "openproject-icon-font.template.sass"),
+  "classPrefix": "icon-",
+  "baseSelector": ".icon",
+  "html": true,
+  "htmlDest": path.join(
+    path.resolve(__dirname, '..', '..', '..', '..', '..', 'frontend', 'src', 'global_styles', 'fonts'),
+    '_openproject_icon_font.lsg',
+  ),
+  "htmlTemplate": path.join(TEMPLATE_DIR, "openproject-icon-font.template.lsg"),
+  "types": ['woff2', 'woff'],
+  "fixedWidth": true,
+  "descent": 100
+}, function(error) {
+  if (error) {
+    console.log('Failed to build icon font. ', error);
+  }
+});

frontend/src/app/spot/icon-font/icon.template.sass

@@ -0,0 +1,28 @@
+.spot-icon 
+  display: inline-flex
+  justify-content: center
+  align-items: center
+
+  &::before 
+    font-family: "openproject-icon-font"
+    font-style: normal
+    font-weight: normal
+    font-variant: normal
+    font-size: inherit
+    text-transform: none
+    text-decoration: none
+    display: block
+    speak: none
+    line-height: 1
+    -webkit-font-smoothing: antialiased
+    -moz-osx-font-smoothing: grayscale
+
+{{#each codepoints}}
+
+@mixin spot-icon-{{@key}} 
+  content: "\\{{this}}"
+
+.spot-icon_{{@key}}:before 
+  content: "\\{{this}}"
+
+{{/each}}

frontend/src/app/spot/icon-font/openproject-icon-font.template.sass

@@ -0,0 +1,9 @@
+{{#each codepoints}}
+
+@mixin icon-mixin-{{@key}} 
+  content: "\\{{this}}"
+
+.{{../classPrefix}}{{@key}}:before
+  content: "\\{{this}}"
+
+{{/each}}