From 7e7e2458e3905c0eda76c40df1a7ad91d9e4c271 Mon Sep 17 00:00:00 2001
From: Theo Ephraim <theo@systeminit.com>
Date: Tue, 6 Sep 2022 10:57:00 -0700
Subject: [PATCH] chore(web) experiments with css/tailwind tooling

---
 app/web/.eslintignore                         |   1 +
 app/web/README.md                             |  16 +
 app/web/package-lock.json                     | 674 ++++++++++++++++++
 app/web/package.json                          |   4 +
 app/web/postcss.config.js                     |   7 +-
 app/web/src/assets/style/main.css             |   2 +-
 app/web/src/atoms/SiCheckBox.vue              |  38 +-
 .../GenericDiagram/DiagramControls.vue        |  41 +-
 .../GenericDiagram/GenericDiagram.vue         |   5 +-
 app/web/src/ui-lib/Icon.vue                   |  22 +-
 app/web/src/ui-lib/Icon2.vue                  | 265 -------
 app/web/src/utils/style_helpers.ts            |   7 +
 12 files changed, 770 insertions(+), 312 deletions(-)
 create mode 100644 app/web/.eslintignore
 delete mode 100644 app/web/src/ui-lib/Icon2.vue
 create mode 100644 app/web/src/utils/style_helpers.ts

diff --git a/app/web/.eslintignore b/app/web/.eslintignore
new file mode 100644
index 0000000000..231886279c
--- /dev/null
+++ b/app/web/.eslintignore
@@ -0,0 +1 @@
+*.css
\ No newline at end of file
diff --git a/app/web/README.md b/app/web/README.md
index 4b59a31fe3..ba93352d8b 100644
--- a/app/web/README.md
+++ b/app/web/README.md
@@ -55,3 +55,19 @@ This template should help get you started developing with Vue 3 and Typescript i
   - Enable format on save (recommended)
     - add `"editor.formatOnSave": true` to `.vscode/settings.json` file
     - add `"[vue][typescript][javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }` to `.vscode/settings.json` file
+
+### .vscode/settings.json
+```json
+{
+  "editor.formatOnSave": true,
+  "[vue][typescript][javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  // enable tailwind class autocomplete / tooling outside of just "class" in templates
+  "tailwindCSS.experimental.classRegex": [
+    [
+      "tw`([^`]*)", // tw`...`
+    ]
+  ]
+}
+```
diff --git a/app/web/package-lock.json b/app/web/package-lock.json
index 083f225e24..868013eb5e 100644
--- a/app/web/package-lock.json
+++ b/app/web/package-lock.json
@@ -22,6 +22,7 @@
         "@vueuse/rxjs": "^9.1.1",
         "bottlejs": "^2.0.0",
         "chart.js": "^3.7.1",
+        "clsx": "^1.2.1",
         "cm6-theme-basic-light": "^0.2.0",
         "cm6-theme-gruvbox-dark": "^0.2.0",
         "codemirror": "^6.0.1",
@@ -73,6 +74,9 @@
         "eslint-plugin-vue": "^9.4.0",
         "faker": "^6.6.6",
         "postcss": "^8.4.16",
+        "postcss-comment": "^2.0.0",
+        "postcss-each": "^1.1.0",
+        "postcss-nested": "^5.0.6",
         "prettier": "~2.7.1",
         "unplugin-icons": "^0.14.8",
         "vite": "^3.0.9",
@@ -2130,6 +2134,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/cm6-theme-basic-light": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/cm6-theme-basic-light/-/cm6-theme-basic-light-0.2.0.tgz",
@@ -2229,6 +2241,20 @@
       "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==",
       "dev": true
     },
+    "node_modules/copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "is-what": "^3.14.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -2656,6 +2682,20 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
     "node_modules/error-stack-parser": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
@@ -4211,6 +4251,20 @@
         "node": ">=8.12.0"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -4240,6 +4294,28 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4602,6 +4678,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -4778,6 +4862,45 @@
         "node": "> 0.8"
       }
     },
+    "node_modules/less": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
+      "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "parse-node-version": "^1.0.1",
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "source-map": "~0.6.0"
+      }
+    },
+    "node_modules/less/node_modules/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,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -4967,6 +5090,43 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/make-dir/node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -4999,6 +5159,20 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -5084,6 +5258,36 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/needle": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-3.1.0.tgz",
+      "integrity": "sha512-gCE9weDhjVGCRqS8dwDR/D3GTAeyXLXuqp7I8EzH6DllZGXSUyxuqqLh+YX9rMAWaaTFyVAg6rHGL25dqvczKw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
+    "node_modules/needle/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
@@ -5326,6 +5530,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5431,6 +5646,121 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-comment": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-comment/-/postcss-comment-2.0.0.tgz",
+      "integrity": "sha512-5zT5iKU7c0tK9KJFNrVf+g1MGTkzf/4V3e0Zzm2g1uoFQC5jeTHmB9O1iAqh97+jnKpc6al204e0pwFUiCwseg==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^6.0.0"
+      }
+    },
+    "node_modules/postcss-comment/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-comment/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-comment/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/postcss-comment/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/postcss-comment/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/postcss-comment/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-comment/node_modules/postcss": {
+      "version": "6.0.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+      "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.1",
+        "source-map": "^0.6.1",
+        "supports-color": "^5.4.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/postcss-comment/node_modules/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,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-comment/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-each": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-each/-/postcss-each-1.1.0.tgz",
+      "integrity": "sha512-YfTPHHAPFVRgEJfLg9RM4R9WYEHVU9Rf1R8QgZfnObwV2dgNqzTLzTl0w5tF71ApFcYLiJAXiTpHAoqJFYcZVw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-simple-vars": "^6.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-import": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
@@ -5523,6 +5853,22 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss-simple-vars": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-6.0.3.tgz",
+      "integrity": "sha512-fkNn4Zio8vN4vIig9IFdb8lVlxWnYR769RgvxCM6YWlFKie/nQaOcaMMMFz/s4gsfHW4/5bJW+i57zD67mQU7g==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.1"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -5594,6 +5940,14 @@
       "integrity": "sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==",
       "dev": true
     },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -5892,6 +6246,33 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sass": {
+      "version": "1.54.7",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.7.tgz",
+      "integrity": "sha512-3q7MQz7sCpVG6TLhUfZwGOcd2/sm2ghYN2JEdRjNiW04ILdvahdo9GuAs+bxsxZ3hDCKv+wUT5w0iFWGU0CxlA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/semver": {
       "version": "7.3.7",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
@@ -8581,6 +8962,11 @@
         "string-width": "^4.2.0"
       }
     },
+    "clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+    },
     "cm6-theme-basic-light": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/cm6-theme-basic-light/-/cm6-theme-basic-light-0.2.0.tgz",
@@ -8658,6 +9044,17 @@
       "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==",
       "dev": true
     },
+    "copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "is-what": "^3.14.1"
+      }
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -8986,6 +9383,17 @@
       "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
       "dev": true
     },
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
     "error-stack-parser": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
@@ -10051,6 +10459,17 @@
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
       "dev": true
     },
+    "iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      }
+    },
     "ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -10063,6 +10482,22 @@
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -10299,6 +10734,14 @@
         "call-bind": "^1.0.2"
       }
     },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -10435,6 +10878,36 @@
       "integrity": "sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==",
       "dev": true
     },
+    "less": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
+      "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "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,
+          "optional": true,
+          "peer": true
+        }
+      }
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -10573,6 +11046,36 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "dev": true,
+          "optional": true,
+          "peer": true
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true,
+          "optional": true,
+          "peer": true
+        }
+      }
+    },
     "mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -10599,6 +11102,14 @@
         "picomatch": "^2.3.1"
       }
     },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -10660,6 +11171,32 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "needle": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-3.1.0.tgz",
+      "integrity": "sha512-gCE9weDhjVGCRqS8dwDR/D3GTAeyXLXuqp7I8EzH6DllZGXSUyxuqqLh+YX9rMAWaaTFyVAg6rHGL25dqvczKw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
     "node-releases": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
@@ -10830,6 +11367,14 @@
         "callsites": "^3.0.0"
       }
     },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -10901,6 +11446,99 @@
         "source-map-js": "^1.0.2"
       }
     },
+    "postcss-comment": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-comment/-/postcss-comment-2.0.0.tgz",
+      "integrity": "sha512-5zT5iKU7c0tK9KJFNrVf+g1MGTkzf/4V3e0Zzm2g1uoFQC5jeTHmB9O1iAqh97+jnKpc6al204e0pwFUiCwseg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "dev": true
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "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
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-each": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-each/-/postcss-each-1.1.0.tgz",
+      "integrity": "sha512-YfTPHHAPFVRgEJfLg9RM4R9WYEHVU9Rf1R8QgZfnObwV2dgNqzTLzTl0w5tF71ApFcYLiJAXiTpHAoqJFYcZVw==",
+      "dev": true,
+      "requires": {
+        "postcss-simple-vars": "^6.0.0"
+      }
+    },
     "postcss-import": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
@@ -10945,6 +11583,13 @@
         "util-deprecate": "^1.0.2"
       }
     },
+    "postcss-simple-vars": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-6.0.3.tgz",
+      "integrity": "sha512-fkNn4Zio8vN4vIig9IFdb8lVlxWnYR769RgvxCM6YWlFKie/nQaOcaMMMFz/s4gsfHW4/5bJW+i57zD67mQU7g==",
+      "dev": true,
+      "requires": {}
+    },
     "postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -10992,6 +11637,14 @@
       "integrity": "sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==",
       "dev": true
     },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -11187,6 +11840,27 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.54.7",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.7.tgz",
+      "integrity": "sha512-3q7MQz7sCpVG6TLhUfZwGOcd2/sm2ghYN2JEdRjNiW04ILdvahdo9GuAs+bxsxZ3hDCKv+wUT5w0iFWGU0CxlA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "semver": {
       "version": "7.3.7",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
diff --git a/app/web/package.json b/app/web/package.json
index 2d7fd1dc0a..6a8235ccd6 100644
--- a/app/web/package.json
+++ b/app/web/package.json
@@ -39,6 +39,7 @@
     "@vueuse/rxjs": "^9.1.1",
     "bottlejs": "^2.0.0",
     "chart.js": "^3.7.1",
+    "clsx": "^1.2.1",
     "cm6-theme-basic-light": "^0.2.0",
     "cm6-theme-gruvbox-dark": "^0.2.0",
     "codemirror": "^6.0.1",
@@ -90,6 +91,9 @@
     "eslint-plugin-vue": "^9.4.0",
     "faker": "^6.6.6",
     "postcss": "^8.4.16",
+    "postcss-comment": "^2.0.0",
+    "postcss-each": "^1.1.0",
+    "postcss-nested": "^5.0.6",
     "prettier": "~2.7.1",
     "unplugin-icons": "^0.14.8",
     "vite": "^3.0.9",
diff --git a/app/web/postcss.config.js b/app/web/postcss.config.js
index 9652c287f1..53e6b9562c 100644
--- a/app/web/postcss.config.js
+++ b/app/web/postcss.config.js
@@ -1,7 +1,12 @@
 const tailwind = require("tailwindcss");
 const autoprefixer = require("autoprefixer");
+const nestingPlugin = require("tailwindcss/nesting");
+const loopPlugin = require("postcss-each");
+const postcssCommentParser = require("postcss-comment");
+
 const tailwindConfig = require("./tailwind.config.js");
 
 module.exports = {
-  plugins: [tailwind(tailwindConfig), autoprefixer],
+  parser: postcssCommentParser,
+  plugins: [nestingPlugin, loopPlugin, tailwind(tailwindConfig), autoprefixer],
 };
diff --git a/app/web/src/assets/style/main.css b/app/web/src/assets/style/main.css
index b7be56b099..407db8db2a 100644
--- a/app/web/src/assets/style/main.css
+++ b/app/web/src/assets/style/main.css
@@ -37,4 +37,4 @@ body {
 
 .driven-field {
   color: #69c6e3;
-}
+}
\ No newline at end of file
diff --git a/app/web/src/atoms/SiCheckBox.vue b/app/web/src/atoms/SiCheckBox.vue
index 1dd4b4403c..7858625457 100644
--- a/app/web/src/atoms/SiCheckBox.vue
+++ b/app/web/src/atoms/SiCheckBox.vue
@@ -15,8 +15,14 @@
       :disabled="props.disabled"
       :indeterminate.prop="isIndeterminate"
       required
-      class="appearance-none block px-3 py-2 border rounded-sm shadow-sm focus:outline-none sm:text-sm checked:bg-neutral-900 bg-neutral-600 indeterminate:bg-neutral-900"
-      :class="checkBoxClasses"
+      :class="
+        clsx(
+          'appearance-none block px-3 py-2 border rounded-sm shadow-sm focus:outline-none sm:text-sm checked:bg-neutral-900 bg-neutral-600 indeterminate:bg-neutral-900',
+          inError
+            ? 'border-destructive-400 focus:ring-destructive-400 focus:border-destructive-400 checked:border-destructive-400 indeterminate:border-destructive-400'
+            : 'border-neutral-600 focus:ring-action-200 focus:border-action-200 checked:border-neutral-600 indeterminate:border-neutral-600',
+        )
+      "
       @blur="setDirty"
     />
     <div
@@ -50,6 +56,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import _ from "lodash";
+import clsx from "clsx";
 import SiValidation, {
   ValidatorArray,
   ErrorsArray,
@@ -113,30 +120,5 @@ const inputValue = computed<boolean | undefined>({
   },
 });
 
-const isIndeterminate = computed(() => {
-  if (_.isUndefined(props.modelValue)) {
-    return true;
-  } else {
-    return false;
-  }
-});
-
-const checkBoxClasses = computed((): Record<string, boolean> => {
-  if (inError.value) {
-    return {
-      "border-destructive-400": true,
-      "focus:ring-destructive-400": true,
-      "focus:border-destructive-400": true,
-      "checked:border-destructive-400": true,
-      "indeterminate:border-destructive-400": true,
-    };
-  }
-  return {
-    "border-neutral-600": true,
-    "focus:ring-action-200": true,
-    "focus:border-action-200": true,
-    "checked:border-neutral-600": true,
-    "indeterminate:border-neutral-600": true,
-  };
-});
+const isIndeterminate = computed(() => _.isUndefined(props.modelValue));
 </script>
diff --git a/app/web/src/organisms/GenericDiagram/DiagramControls.vue b/app/web/src/organisms/GenericDiagram/DiagramControls.vue
index bca6e893e2..a10929eef1 100644
--- a/app/web/src/organisms/GenericDiagram/DiagramControls.vue
+++ b/app/web/src/organisms/GenericDiagram/DiagramControls.vue
@@ -1,18 +1,26 @@
 <template>
-  <div class="absolute flex left-4 bottom-4 z-20 h-8">
-    <div :class="iconButtonClasses" @click="adjustZoom('down')">
+  <div :class="clsx('absolute flex left-4 bottom-4 z-20 h-8')">
+    <div
+      :class="getButtonClasses(zoomLevel <= MIN_ZOOM)"
+      @click="adjustZoom('down')"
+    >
       <Icon name="minus" size="full" />
     </div>
 
     <Menu>
       <MenuButton
         as="div"
-        class="bg-white border-neutral-300 border text-black dark:bg-black dark:text-white dark:border-black text-center w-20 cursor-pointer mx-2 flex flex-col justify-center"
+        :class="
+          clsx(
+            'bg-white border-neutral-300 border text-black text-center w-20 cursor-pointer mx-2 flex flex-col justify-center',
+            'dark:bg-black dark:text-white dark:border-black',
+          )
+        "
         title="set zoom level"
       >
         {{ roundedZoomPercent }}%
       </MenuButton>
-      <MenuItems as="div" class="absolute mt-[-100%] -top-10 left-6">
+      <MenuItems as="div" class="absolute mt-[-100%] -top-10 left-6 bg-red">
         <SiDropdown>
           <SiDropdownItem
             v-for="zoomOptionAmount in ZOOM_LEVEL_OPTIONS"
@@ -26,11 +34,18 @@
       </MenuItems>
     </Menu>
 
-    <div :class="iconButtonClasses" @click="adjustZoom('up')">
+    <div
+      :class="getButtonClasses(zoomLevel >= MAX_ZOOM)"
+      @click="adjustZoom('up')"
+    >
       <Icon name="plus" size="full" />
     </div>
 
-    <div class="ml-4" :class="iconButtonClasses" @click="emit('open:help')">
+    <div
+      class="ml-4"
+      :class="getButtonClasses(false)"
+      @click="emit('open:help')"
+    >
       <Icon name="help-circle" size="full" />
     </div>
   </div>
@@ -40,9 +55,12 @@
 import { computed } from "vue";
 import _ from "lodash";
 import { Menu, MenuButton, MenuItems } from "@headlessui/vue";
+import clsx from "clsx";
 import SiDropdown from "@/molecules/SiDropdown.vue";
 import SiDropdownItem from "@/atoms/SiDropdownItem.vue";
 import Icon from "@/ui-lib/Icon.vue";
+import { tw } from "@/utils/style_helpers";
+import { MAX_ZOOM, MIN_ZOOM } from "./diagram_constants";
 
 const ZOOM_LEVEL_OPTIONS = [25, 50, 100, 150, 200];
 
@@ -62,6 +80,13 @@ function adjustZoom(direction: "up" | "down") {
 
 const roundedZoomPercent = computed(() => Math.round(props.zoomLevel * 100));
 
-const iconButtonClasses =
-  "rounded-full p-1 bg-neutral-600 text-white dark:bg-gray-200 dark:text-black cursor-pointer";
+function getButtonClasses(isDisabled: boolean) {
+  return clsx(
+    tw`rounded-full p-1 bg-neutral-600 text-white`,
+    tw`dark:bg-gray-200 dark:text-black`,
+    isDisabled
+      ? tw`cursor-not-allowed opacity-50`
+      : tw`cursor-pointer hover:scale-110`,
+  );
+}
 </script>
diff --git a/app/web/src/organisms/GenericDiagram/GenericDiagram.vue b/app/web/src/organisms/GenericDiagram/GenericDiagram.vue
index 61856ed76f..d9c2930fd8 100644
--- a/app/web/src/organisms/GenericDiagram/GenericDiagram.vue
+++ b/app/web/src/organisms/GenericDiagram/GenericDiagram.vue
@@ -219,8 +219,9 @@ const gridOrigin = ref<Vector2d>({ x: 0, y: 0 });
 // but there will often probably be some external controls, which can be done using exposed setZoom and update:zoom event
 const zoomLevel = ref(1);
 function setZoom(newZoomLevel: number) {
-  if (newZoomLevel < MIN_ZOOM || newZoomLevel > MAX_ZOOM) return;
-  zoomLevel.value = newZoomLevel;
+  if (newZoomLevel < MIN_ZOOM) zoomLevel.value = MIN_ZOOM;
+  else if (newZoomLevel > MAX_ZOOM) zoomLevel.value = MAX_ZOOM;
+  else zoomLevel.value = newZoomLevel;
 }
 watch(zoomLevel, () => {
   emit("update:zoom", zoomLevel.value);
diff --git a/app/web/src/ui-lib/Icon.vue b/app/web/src/ui-lib/Icon.vue
index 412602b7ad..a1cd07321b 100644
--- a/app/web/src/ui-lib/Icon.vue
+++ b/app/web/src/ui-lib/Icon.vue
@@ -11,15 +11,23 @@
 -->
 
 <template>
-  <div class="icon" :class="sizeClasses">
+  <div
+    class="icon"
+    :class="
+      clsx(
+        'block h-full w-full pointer-events-none transition-transform duration-300',
+        sizeClasses,
+      )
+    "
+  >
     <component
       :is="iconComponent"
       class="icon__svg"
-      :class="{
-        'block h-full w-full pointer-events-none transition-transform duration-300': true,
-        'animate-spin': autoSpin,
-        ...(svgRotateClass && { [svgRotateClass]: true }),
-      }"
+      :class="
+        clsx(svgRotateClass, {
+          'animate-spin': AUTO_SPIN_ICONS.includes(props.name),
+        })
+      "
     />
   </div>
 </template>
@@ -76,6 +84,7 @@ import GitMerge from "~icons/octicon/git-merge-24";
 
 // custom icons
 import Diagram from "@/assets/images/custom-icons/diagram.svg?component";
+import clsx from "clsx";
 
 // restricting the type here (Record<string, FunctionalComponent>) kills our IconName type below
 /* eslint sort-keys: "error" */
@@ -213,5 +222,4 @@ const sizeClasses = computed(() => {
 });
 
 const AUTO_SPIN_ICONS = ["loader", "refresh-active"];
-const autoSpin = computed(() => AUTO_SPIN_ICONS.includes(props.name));
 </script>
diff --git a/app/web/src/ui-lib/Icon2.vue b/app/web/src/ui-lib/Icon2.vue
deleted file mode 100644
index 6c1d53722e..0000000000
--- a/app/web/src/ui-lib/Icon2.vue
+++ /dev/null
@@ -1,265 +0,0 @@
-<!--
-  General Icon component to use throughout the codebase
-
-  Why not just import the icons directly?
-  - single import rather than importing many icons in each file, no need to change import to try different icon
-  - easier to keep icons consistent and swap all icons of a certain type at once (ex: use the same "x-circle" everywhere)
-  - allows multiple aliases for the same icon so the use can be a bit more specific (ex: "qualification-passing")
-  - easier to apply consistent styling throughout
-  - using a simple string lets us easily add `icon` properties on other components (like buttons / form inputs)
-  - rotation helpers so we can use a single icon for each direction of things like arrows / carets
--->
-
-<template>
-  <div class="icon" :class="computedClasses">
-    <component
-      :is="iconComponent"
-      class="icon__svg"
-      :class="svgComputedClasses"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-/* eslint-disable import/no-unresolved,import/extensions,vue/component-tags-order,import/first,import/order */
-
-// browse available icons at https://icones.js.org/ (or https://iconify.design/icon-sets/)
-
-import Loader from "~icons/gg/spinner";
-import Check from "~icons/material-symbols/check";
-import CheckCircle from "~icons/material-symbols/check-circle";
-import AlertTriangle from "~icons/material-symbols/warning";
-import XCircle from "~icons/material-symbols/cancel";
-import QuestionMarkCircle from "~icons/heroicons-solid/question-mark-circle";
-import Play from "~icons/material-symbols/play-arrow-rounded";
-
-import PlusSquare from "~icons/fa/plus-square-o";
-
-import Arrow from "~icons/heroicons-solid/arrow-up";
-import Chevron from "~icons/heroicons-solid/chevron-up";
-
-import Minus from "~icons/heroicons-solid/minus";
-import Plus from "~icons/heroicons-solid/plus";
-import Save from "~icons/heroicons-solid/save";
-import Trash from "~icons/heroicons-solid/trash";
-import X from "~icons/heroicons-solid/x";
-import PlayCircle from "~icons/heroicons-solid/play";
-import Beaker from "~icons/heroicons-solid/beaker";
-import Link from "~icons/heroicons-solid/link";
-import Moon from "~icons/heroicons-solid/moon";
-import Sun from "~icons/heroicons-solid/sun";
-import Eye from "~icons/heroicons-solid/eye";
-import ClipboardCopy from "~icons/heroicons-solid/clipboard-copy";
-import Refresh from "~icons/heroicons-solid/refresh";
-import Pencil from "~icons/heroicons-outline/pencil";
-import Cube from "~icons/heroicons-outline/cube";
-import Clock from "~icons/heroicons-solid/clock";
-import ExclamationCircle from "~icons/heroicons-solid/exclamation-circle";
-import CreditCard from "~icons/heroicons-solid/credit-card";
-import Bell from "~icons/heroicons-solid/bell";
-import Badge from "~icons/heroicons-solid/badge";
-import CheckBadge from "~icons/heroicons-solid/badge-check";
-import DotsHorizontal from "~icons/heroicons-solid/dots-horizontal";
-import DotsVertical from "~icons/heroicons-solid/dots-vertical";
-import Search from "~icons/heroicons-solid/search";
-import Selector from "~icons/heroicons-solid/selector";
-
-// octicons (from github) available as no suffix, -16, -24
-import GitBranch from "~icons/octicon/git-branch-24";
-import GitCommit from "~icons/octicon/git-commit-24";
-import GitMerge from "~icons/octicon/git-merge-24";
-
-// custom icons
-import Diagram from "@/assets/images/custom-icons/diagram.svg?component";
-
-// restricting the type here (Record<string, FunctionalComponent>) kills our IconName type below
-/* eslint sort-keys: "error" */
-const ICON_NAME_MAP = Object.freeze({
-  "alert-triangle": AlertTriangle,
-  badge: Badge,
-  beaker: Beaker,
-  bell: Bell,
-  check: Check,
-  "check-badge": CheckBadge,
-  "check-circle": CheckCircle,
-  "clipboard-copy": ClipboardCopy,
-  clock: Clock,
-  component: Cube,
-  "credit-card": CreditCard,
-  diagram: Diagram,
-  "dots-horizontal": DotsHorizontal,
-  "dots-vertical": DotsVertical,
-  edit: Pencil,
-  "exclamation-circle": ExclamationCircle,
-  eye: Eye,
-  "git-branch": GitBranch,
-  "git-commit": GitCommit,
-  "git-merge": GitMerge,
-  "help-circle": QuestionMarkCircle,
-  link: Link,
-  loader: Loader,
-  minus: Minus,
-  moon: Moon,
-  play: Play,
-  "play-circle": PlayCircle,
-  plus: Plus,
-  "plus-square": PlusSquare,
-  refresh: Refresh,
-  "refresh-active": Refresh,
-  save: Save,
-  search: Search,
-  selector: Selector,
-  sun: Sun,
-  trash: Trash,
-  x: X,
-  "x-circle": XCircle,
-});
-/* eslint-disable sort-keys */
-
-/*
-  additional aliases which makes it easy to be more consistent with icon usage
-  while still allowing us to change icons for specific cases later
-*/
-const ICON_NAME_ALIASES = {
-  "qualification-passed": "check-circle",
-  "qualification-failed": "x-circle",
-};
-
-// these icons are intended to be used with a specific direction, ex: "arrow--down"
-// make sure the base icon is pointing up!
-const SPINNABLE_ICON_NAME_MAP = Object.freeze({
-  arrow: Arrow,
-  // triangle: Triangle,
-  chevron: Chevron,
-});
-
-type RegularIconNames = keyof typeof ICON_NAME_MAP;
-type IconNameAliases = keyof typeof ICON_NAME_ALIASES;
-type SpinnableRawIconNames = keyof typeof SPINNABLE_ICON_NAME_MAP;
-type SpinnableIconNames = `${SpinnableRawIconNames}--${
-  | "left"
-  | "right"
-  | "up"
-  | "down"}`;
-
-export type IconNames = RegularIconNames | IconNameAliases | SpinnableIconNames;
-</script>
-
-<script lang="ts" setup>
-import { computed, FunctionalComponent, PropType } from "vue";
-
-const props = defineProps({
-  name: { type: String as PropType<IconNames>, required: true },
-  rotate: { type: String as PropType<"left" | "right" | "up" | "down"> },
-  size: {
-    type: String as PropType<"xs" | "s" | "m" | "l" | "full">,
-    default: "m",
-  },
-});
-
-const iconComponent = computed(() => {
-  const nameWithoutModifiers = props.name.split("--")[0];
-
-  if (SPINNABLE_ICON_NAME_MAP[nameWithoutModifiers as SpinnableRawIconNames]) {
-    return SPINNABLE_ICON_NAME_MAP[
-      nameWithoutModifiers as SpinnableRawIconNames
-    ] as FunctionalComponent;
-  }
-  if (ICON_NAME_MAP[nameWithoutModifiers as RegularIconNames]) {
-    return ICON_NAME_MAP[
-      nameWithoutModifiers as RegularIconNames
-    ] as FunctionalComponent;
-  }
-  if (ICON_NAME_ALIASES[nameWithoutModifiers as IconNameAliases]) {
-    return ICON_NAME_MAP[
-      ICON_NAME_ALIASES[
-        nameWithoutModifiers as IconNameAliases
-      ] as RegularIconNames
-    ] as FunctionalComponent;
-  }
-
-  return ICON_NAME_MAP["help-circle"] as FunctionalComponent;
-});
-
-const AUTO_SPIN = ["loader", "refresh-active"];
-
-const computedClasses = computed(() => ({
-  [`--size-${props.size}`]: true,
-}));
-
-const svgComputedClasses = computed(() => {
-  let rotate = "";
-  if (props.rotate) rotate = props.rotate;
-  // eslint-disable-next-line prefer-destructuring
-  else if (props.name.includes("--")) rotate = props.name.split("--")[1];
-
-  return {
-    "--spin": AUTO_SPIN.includes(props.name),
-    ...(rotate && { [`--rotate-${rotate}`]: true }),
-  };
-});
-</script>
-
-<style lang="less" scoped>
-.icon {
-  // size classes
-  &.--size-xs {
-    width: 16px;
-    height: 16px;
-  }
-  &.--size-s {
-    width: 20px;
-    height: 20px;
-  }
-  &.--size-m {
-    width: 24px;
-    height: 24px;
-  }
-  &.--size-l {
-    width: 32px;
-    height: 32px;
-  }
-  &.--size-full {
-    width: 100%;
-    height: 100%;
-  }
-
-  > .icon__svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-    transition: 0.2s transform;
-    pointer-events: none; // let parent always handle pointer events
-
-    &.--spin {
-      animation-name: spin;
-      animation-duration: 2000ms;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-    }
-
-    // rotate classes - used for arrow-like icons ex "chevron--down"
-    &.--rotate-up {
-      transform: rotate(0deg);
-    }
-    &.--rotate-right {
-      transform: rotate(90deg);
-    }
-    &.--rotate-down {
-      transform: rotate(180deg);
-    }
-    &.--rotate-left {
-      transform: rotate(270deg);
-    }
-  }
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/app/web/src/utils/style_helpers.ts b/app/web/src/utils/style_helpers.ts
new file mode 100644
index 0000000000..efadc8b5e2
--- /dev/null
+++ b/app/web/src/utils/style_helpers.ts
@@ -0,0 +1,7 @@
+/*
+add the following line to .vscode/settings.json
+"tailwindCSS.experimental.classRegex": [["tw`([^`]*)", // tw`...`]]
+*/
+
+/** noop string template tag used to help IDE enable autocomplete on tailwind classes */
+export const tw = String.raw;