A little bit of documentation about CSS and the hook inverse

apidocs/dev/webapp.md

@@ -49,10 +49,35 @@ If your microscope hostname is not `microscope`, you can use local environment f
 
 **Note:** If you have performance issues with lag, this can be caused by mDNS speed for your setup. To avoid mDNS, overload `VITE_MICROSCOPE_HOST` with the IP address of your microscope, rather than the host name.
 
-# Javascript: Formatting and linting
+## Javascript: Formatting and linting
 
 To enforce code style we and quality we use ESLint and Prettier. Both can be run together with the same command.
 
 - To check the for errors and warnings run `npm run lint`
 - To automatically fix errors and warnings run `npm run lint:fix`
 
+## CSS: Workflow
+
+Our CSS global CSS,a dn the CSS of some webapp components is written using the LESS (Leaner Style Sheets) language extension. The LESS is then preprocessed into pure CSS.
+
+For CSS we use UIKit for most of the CSS. Where posdible we use UIKit CSS classes for styling. Some of the UIKit classes have some global modifications in the `webapp/src/assets/less` directory.
+
+For styling in darkmode and light mode we make use of the UIKit `.hook_inverse()` function. Note that this function is not available in components. To create a style which needs to change in dark mode the class (and its inverse) should be defined in `webapp/src/assets/less/variable.less`. For example:
+
+```css
+.ofm-opaque-element{
+    background: #f5f5f5;
+}
+.hook-inverse() {
+    .ofm-opaque-element{
+        background: #282626;
+    }
+}
+```
+
+Defining colours and their inverse globally allows for conisdering the reasoning for the colour and defining a name based on what the colouring is achieving. This helps colouring to be consistent across the application.
+
+For linting CSS we use Stylelint.
+
+- To check the for errors and warnings run `npm run lint:style`
+- To automatically fix errors and warnings run `npm run lint:style:fix`