Merged PR 1405: icon scss

2025-12-31 09:37:15 +01:00 · 2022-10-14 14:24:12 +00:00
parent 3078724ced
commit e1720e6023
11 changed files with 250 additions and 334 deletions
--- a/apps/isa-app/src/assets/icons/icons.css
+++ b/apps/isa-app/src/assets/icons/icons.css
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  font-weight: 100 700;
+  src: url(./materials-icons-outlined.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-weight: 100 700;
+  src: url(./materials-icons-rounded.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Material Symbols Sharp';
+  font-style: normal;
+  font-weight: 100 700;
+  src: url(./materials-icons-sharp.woff2) format('woff2');
+}
--- a/apps/isa-app/src/assets/icons/materials-icons-outlined.woff2
+++ b/apps/isa-app/src/assets/icons/materials-icons-outlined.woff2
--- a/apps/isa-app/src/assets/icons/materials-icons-rounded.woff2
+++ b/apps/isa-app/src/assets/icons/materials-icons-rounded.woff2
--- a/apps/isa-app/src/assets/icons/materials-icons-sharp.woff2
+++ b/apps/isa-app/src/assets/icons/materials-icons-sharp.woff2
--- a/apps/isa-app/src/index.html
+++ b/apps/isa-app/src/index.html
@@ -7,6 +7,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link href="/assets/fonts/fonts.css" rel="stylesheet" />
+    <link href="/assets/icons/icons.css" rel="stylesheet" />
    <link rel="manifest" href="manifest.webmanifest" />
    <meta name="theme-color" content="#1976d2" />
  </head>
--- a/apps/isa-app/src/scss/_components.scss
+++ b/apps/isa-app/src/scss/_components.scss
@@ -0,0 +1 @@
+@import './components/icon';
--- a/apps/isa-app/src/scss/components/_icon.scss
+++ b/apps/isa-app/src/scss/components/_icon.scss
@@ -0,0 +1,121 @@
+@layer components {
+  .icon {
+    --icon-fill: 0;
+    --icon-weight: 400;
+    --icon-grade: 0;
+    --icon-optical-size: 48;
+  }
+
+  .icon,
+  .icon-outlined {
+    font-family: 'Material Symbols Outlined';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .icon-rounded {
+    font-family: 'Material Symbols Rounded';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .icon-sharp {
+    font-family: 'Material Symbols Sharp';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .icon-fill {
+    --icon-fill: 1;
+  }
+
+  .icon-weight-100 {
+    --icon-weight: 100;
+  }
+
+  .icon-weight-200 {
+    --icon-weight: 200;
+  }
+
+  .icon-weight-300 {
+    --icon-weight: 300;
+  }
+
+  .icon-weight-400 {
+    --icon-weight: 400;
+  }
+
+  .icon-weight-500 {
+    --icon-weight: 500;
+  }
+
+  .icon-weight-600 {
+    --icon-weight: 600;
+  }
+
+  .icon-weight-700 {
+    --icon-weight: 700;
+  }
+
+  .icon-grade {
+    --icon-grade: 0;
+  }
+
+  .icon-grade-200 {
+    --icon-grade: 200;
+  }
+
+  .icon-grade--25 {
+    --icon-grade: -25;
+  }
+
+  .icon-optical-size-20 {
+    --icon-optical-size: 20;
+  }
+
+  .icon-optical-size-24 {
+    --icon-optical-size: 24;
+  }
+
+  .icon-optical-size-40 {
+    --icon-optical-size: 40;
+  }
+
+  .icon-optical-size-48 {
+    --icon-optical-size: 48;
+  }
+
+  .icon {
+    font-variation-settings: 'FILL' var(--icon-fill), 'wght' var(--icon-weight), 'GRAD' var(--icon-grade), 'opsz' var(--icon-optical-size);
+  }
+}
--- a/apps/isa-app/src/styles.scss
+++ b/apps/isa-app/src/styles.scss
@@ -1,9 +1,11 @@
 /* You can add global styles to this file, and also import other style files */
@import '~@angular/cdk/overlay-prebuilt.css';

-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import './scss/components';

@import './scss/root';
@import './scss/customer';
--- a/package-lock.json
+++ b/package-lock.json
@@ -3632,42 +3632,17 @@
      "dev": true
    },
    "autoprefixer": {
-      "version": "9.8.8",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz",
-      "integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==",
+      "version": "10.4.12",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.12.tgz",
+      "integrity": "sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q==",
      "dev": true,
      "requires": {
-        "browserslist": "^4.12.0",
-        "caniuse-lite": "^1.0.30001109",
+        "browserslist": "^4.21.4",
+        "caniuse-lite": "^1.0.30001407",
+        "fraction.js": "^4.2.0",
        "normalize-range": "^0.1.2",
-        "num2fraction": "^1.2.2",
-        "picocolors": "^0.2.1",
-        "postcss": "^7.0.32",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
      }
    },
    "aws-sign2": {
@@ -4457,33 +4432,6 @@
        "object-visit": "^1.0.0"
      }
    },
-    "color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "dev": true,
-      "requires": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      },
-      "dependencies": {
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        }
-      }
-    },
    "color-convert": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -4497,16 +4445,6 @@
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
    },
-    "color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "dev": true,
-      "requires": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
    "color-support": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -5018,12 +4956,6 @@
        }
      }
    },
-    "css-color-names": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
-      "integrity": "sha512-zj5D7X1U2h2zsXOAM8EyUREBnnts6H+Jm+d1M2DbiQQcUtnqgQsMrdo8JW9R80YFUmIdBZeMu5wvYM7hcgWP/Q==",
-      "dev": true
-    },
    "css-declaration-sorter": {
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
@@ -5307,12 +5239,6 @@
        }
      }
    },
-    "css-unit-converter": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
-      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
-      "dev": true
-    },
    "css-what": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -5577,9 +5503,9 @@
      }
    },
    "defined": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
      "dev": true
    },
    "del": {
@@ -6800,6 +6726,12 @@
      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
      "dev": true
    },
+    "fraction.js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "dev": true
+    },
    "fragment-cache": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -7277,12 +7209,6 @@
        }
      }
    },
-    "hex-color-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
-      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
-      "dev": true
-    },
    "hosted-git-info": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -7336,18 +7262,6 @@
        }
      }
    },
-    "hsl-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
-      "integrity": "sha512-M5ezZw4LzXbBKMruP+BNANf0k+19hDQMgpzBIYnya//Al+fjNct9Wf3b1WedLqdEs2hKBvxq/jh+DsHJLj0F9A==",
-      "dev": true
-    },
-    "hsla-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
-      "integrity": "sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==",
-      "dev": true
-    },
    "html-entities": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz",
@@ -8155,20 +8069,6 @@
      "integrity": "sha512-krO72EO2NptOGAX2KYyqbP9vYMlNAXdB53rq6f8LXY6RY7JdSR/3BD6wLUlPHSAesmY9vstNrjvqGaCiRK/91Q==",
      "dev": true
    },
-    "is-color-stop": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
-      "integrity": "sha512-H1U8Vz0cfXNujrJzEcvvwMDW9Ra+biSYA3ThdQvAnMLJkEHQXn6bWzLkxHtVYJ+Sdbx0b6finn3jZiaVe7MAHA==",
-      "dev": true,
-      "requires": {
-        "css-color-names": "^0.0.4",
-        "hex-color-regex": "^1.1.0",
-        "hsl-regex": "^1.0.0",
-        "hsla-regex": "^1.0.0",
-        "rgb-regex": "^1.0.1",
-        "rgba-regex": "^1.0.0"
-      }
-    },
    "is-core-module": {
      "version": "2.9.0",
      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
@@ -9286,12 +9186,6 @@
      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
      "dev": true
    },
-    "lodash.topath": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
-      "integrity": "sha512-1/W4dM+35DwvE/iEd1M9ekewOSTlpFekhw9mhAtrwjVqUr83/ilQiyAvmg4tVX7Unkcfl1KC+i9WdaT4B6aQcg==",
-      "dev": true
-    },
    "lodash.truncate": {
      "version": "4.4.2",
      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
@@ -9974,12 +9868,6 @@
      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
      "dev": true
    },
-    "modern-normalize": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
-      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
-      "dev": true
-    },
    "moment": {
      "version": "2.29.4",
      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
@@ -10234,15 +10122,6 @@
      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
      "dev": true
    },
-    "node-emoji": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
-      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.21"
-      }
-    },
    "node-fetch": {
      "version": "2.6.7",
      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
@@ -10548,9 +10427,9 @@
      }
    },
    "object-hash": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
-      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
      "dev": true
    },
    "object-inspect": {
@@ -11120,9 +10999,9 @@
      "dev": true
    },
    "postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.18",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
+      "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==",
      "dev": true,
      "requires": {
        "nanoid": "^3.3.4",
@@ -11849,13 +11728,12 @@
      }
    },
    "postcss-js": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
-      "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
      "dev": true,
      "requires": {
-        "camelcase-css": "^2.0.1",
-        "postcss": "^8.1.6"
+        "camelcase-css": "^2.0.1"
      }
    },
    "postcss-lab-function": {
@@ -12426,6 +12304,21 @@
        "postcss-selector-not": "^4.0.0"
      },
      "dependencies": {
+        "autoprefixer": {
+          "version": "9.8.8",
+          "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz",
+          "integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==",
+          "dev": true,
+          "requires": {
+            "browserslist": "^4.12.0",
+            "caniuse-lite": "^1.0.30001109",
+            "normalize-range": "^0.1.2",
+            "num2fraction": "^1.2.2",
+            "picocolors": "^0.2.1",
+            "postcss": "^7.0.32",
+            "postcss-value-parser": "^4.1.0"
+          }
+        },
        "picocolors": {
          "version": "0.2.1",
          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
@@ -12825,12 +12718,6 @@
        }
      }
    },
-    "pretty-hrtime": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-      "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
-      "dev": true
-    },
    "pretty-quick": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-2.0.2.tgz",
@@ -13308,26 +13195,6 @@
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
    },
-    "purgecss": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.1.3.tgz",
-      "integrity": "sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==",
-      "dev": true,
-      "requires": {
-        "commander": "^8.0.0",
-        "glob": "^7.1.7",
-        "postcss": "^8.3.5",
-        "postcss-selector-parser": "^6.0.6"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "8.3.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-          "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-          "dev": true
-        }
-      }
-    },
    "q": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/q/-/q-1.4.1.tgz",
@@ -13579,24 +13446,6 @@
        "strip-indent": "^3.0.0"
      }
    },
-    "reduce-css-calc": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
-      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
-      "dev": true,
-      "requires": {
-        "css-unit-converter": "^1.1.1",
-        "postcss-value-parser": "^3.3.0"
-      },
-      "dependencies": {
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
    "reflect-metadata": {
      "version": "0.1.13",
      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
@@ -14001,18 +13850,6 @@
      "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==",
      "dev": true
    },
-    "rgb-regex": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
-      "integrity": "sha512-gDK5mkALDFER2YLqH6imYvK6g02gpNGM4ILDZ472EwWfXZnC2ZEpoB2ECXTyOVUKuk/bPJZMzwQPBYICzP+D3w==",
-      "dev": true
-    },
-    "rgba-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
-      "integrity": "sha512-zgn5OjNQXLUTdq8m17KdaicF6w89TZs8ZU8y0AYENIU6wG8GG6LLm0yLSiPY8DmaYmHdgRW8rnApjoT0fQRfMg==",
-      "dev": true
-    },
    "rimraf": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -14538,23 +14375,6 @@
      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
      "dev": true
    },
-    "simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "dev": true,
-      "requires": {
-        "is-arrayish": "^0.3.1"
-      },
-      "dependencies": {
-        "is-arrayish": {
-          "version": "0.3.2",
-          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-          "dev": true
-        }
-      }
-    },
    "slash": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -15386,6 +15206,21 @@
            "color-convert": "^2.0.1"
          }
        },
+        "autoprefixer": {
+          "version": "9.8.8",
+          "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz",
+          "integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==",
+          "dev": true,
+          "requires": {
+            "browserslist": "^4.12.0",
+            "caniuse-lite": "^1.0.30001109",
+            "normalize-range": "^0.1.2",
+            "num2fraction": "^1.2.2",
+            "picocolors": "^0.2.1",
+            "postcss": "^7.0.32",
+            "postcss-value-parser": "^4.1.0"
+          }
+        },
        "balanced-match": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
@@ -15577,6 +15412,12 @@
        "has-flag": "^3.0.0"
      }
    },
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true
+    },
    "svg-tags": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -15618,110 +15459,56 @@
      }
    },
    "tailwindcss": {
-      "version": "2.2.19",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.19.tgz",
-      "integrity": "sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
+      "integrity": "sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==",
      "dev": true,
      "requires": {
-        "arg": "^5.0.1",
-        "bytes": "^3.0.0",
-        "chalk": "^4.1.2",
-        "chokidar": "^3.5.2",
-        "color": "^4.0.1",
-        "cosmiconfig": "^7.0.1",
-        "detective": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "color-name": "^1.1.4",
+        "detective": "^5.2.1",
        "didyoumean": "^1.2.2",
        "dlv": "^1.1.3",
-        "fast-glob": "^3.2.7",
-        "fs-extra": "^10.0.0",
-        "glob-parent": "^6.0.1",
-        "html-tags": "^3.1.0",
-        "is-color-stop": "^1.1.0",
-        "is-glob": "^4.0.1",
-        "lodash": "^4.17.21",
-        "lodash.topath": "^4.5.2",
-        "modern-normalize": "^1.1.0",
-        "node-emoji": "^1.11.0",
+        "fast-glob": "^3.2.11",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "lilconfig": "^2.0.6",
        "normalize-path": "^3.0.0",
-        "object-hash": "^2.2.0",
-        "postcss-js": "^3.0.3",
-        "postcss-load-config": "^3.1.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.14",
+        "postcss-import": "^14.1.0",
+        "postcss-js": "^4.0.0",
+        "postcss-load-config": "^3.1.4",
        "postcss-nested": "5.0.6",
-        "postcss-selector-parser": "^6.0.6",
-        "postcss-value-parser": "^4.1.0",
-        "pretty-hrtime": "^1.0.3",
-        "purgecss": "^4.0.3",
+        "postcss-selector-parser": "^6.0.10",
+        "postcss-value-parser": "^4.2.0",
        "quick-lru": "^5.1.1",
-        "reduce-css-calc": "^2.1.8",
-        "resolve": "^1.20.0",
-        "tmp": "^0.2.1"
+        "resolve": "^1.22.1"
      },
      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
        "arg": {
          "version": "5.0.2",
          "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
          "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
          "dev": true
        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true
        },
-        "fs-extra": {
-          "version": "10.1.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
-          "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+        "postcss-import": {
+          "version": "14.1.0",
+          "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+          "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
          "dev": true,
          "requires": {
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^6.0.1",
-            "universalify": "^2.0.0"
-          }
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "jsonfile": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.6",
-            "universalify": "^2.0.0"
+            "postcss-value-parser": "^4.0.0",
+            "read-cache": "^1.0.0",
+            "resolve": "^1.1.7"
          }
        },
        "quick-lru": {
@@ -15730,29 +15517,16 @@
          "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
          "dev": true
        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+        "resolve": {
+          "version": "1.22.1",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+          "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
          "dev": true,
          "requires": {
-            "has-flag": "^4.0.0"
+            "is-core-module": "^2.9.0",
+            "path-parse": "^1.0.7",
+            "supports-preserve-symlinks-flag": "^1.0.0"
          }
-        },
-        "tmp": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
-          "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
-          "dev": true,
-          "requires": {
-            "rimraf": "^3.0.0"
-          }
-        },
-        "universalify": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-          "dev": true
        }
      }
    },
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
    "@types/node": "^18.6.1",
    "@types/object-hash": "^2.1.0",
    "@types/uuid": "^8.3.0",
+    "autoprefixer": "^10.4.12",
    "codelyzer": "^6.0.0",
    "husky": "^4.2.3",
    "jasmine-core": "~3.8.0",
@@ -107,7 +108,7 @@
    "ng-swagger-gen": "^2.3.1",
    "ngrx-store-freeze": "^0.2.4",
    "npm-run-all": "^4.1.5",
-    "postcss": "^8.2.1",
+    "postcss": "^8.4.18",
    "postcss-loader": "^4.1.0",
    "postcss-scss": "^3.0.4",
    "prettier": "2.0.1",
@@ -116,7 +117,7 @@
    "sass": "^1.37.5",
    "stylelint": "^13.7.2",
    "stylelint-config-standard": "^20.0.0",
-    "tailwindcss": "^2.0.3",
+    "tailwindcss": "^3.1.8",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.3.5"
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,12 +1,8 @@
 const { guessProductionMode } = require('@ngneat/tailwind');

 module.exports = {
-  prefix: '',
-  purge: {
-    enabled: guessProductionMode(),
-    content: ['./apps/**/*.{html,ts}'],
-  },
-  darkMode: false, // or 'media' or 'class'
+  content: ['./apps/**/*.{html,ts}'],
+  darkMode: 'media', // or 'media' or 'class'
  theme: {
    screens: {
      tablet: '640px',