feat(classic UI): how to get a minimal barceloneta integration

Explain all the steps to get a custom CSS bundle out of barceloneta theme to style the core/backend parts of Plone Classic UI.

Author: gforcada

docs/classic-ui/theming/from-scratch.md

@@ -123,6 +123,85 @@ yarn dist
 -   Import Boostrap (as basis)
 
 
+#### Minimal backend styling
+
+When creating a theme from scratch, it still makes sense (and saves time) to reuse the barceloneta theme for:
+
+- Plone toolbar
+- add/edit forms
+- control panels
+
+To be able to do so:
+
+- create a new CSS file on your theme like this:
+
+```scss
+// plone variables (used in toolbar)
+// Plone specific colors
+//colors
+$state-draft-color:                 #fab82a!default; // lime-yellow //draft is visible
+$state-pending-color:               #e2e721!default; // orange
+$state-private-color:               #c4183c!default; // red
+$state-internal-color:              #fab82a!default; // is draft
+$state-internally-published-color:  #883dfa!default; // is intranet
+$plone-link-color:                  #007bb1!default; //plone blue made slightly darker for wcag 2.0
+$spacer:                            1rem!default;
+
+// Toolbar
+$plone-toolbar-bg: rgba(0, 0, 0, 0.9);
+$plone-toolbar-submenu-bg: rgba(20, 20, 20, 0.95);
+$plone-toolbar-font-primary: "Roboto Condensed", sans-serif;
+$plone-toolbar-font-secondary: "Roboto", sans-serif;
+$plone-toolbar-separator-color: rgba(255, 255, 255, 0.17);
+$plone-toolbar-link: $plone-link-color;
+$plone-toolbar-text-color: rgba(255, 255, 255, 0.9);
+$plone-toolbar-submenu-text-color: #fff;
+$plone-toolbar-submenu-header-color: lighten(#000, 80%);
+
+$plone-toolbar-locked-color: var(--bs-warning); // is intranet
+
+$plone-toolbar-width: 220px;
+$plone-toolbar-width-collapsed: calc($spacer * 2.25);
+$plone-toolbar-top-height: calc($spacer * 2.5);
+
+@import "bootstrap/scss/bootstrap";
+
+@import "@plone/plonetheme-barceloneta-base/scss/toolbar";
+@import "@plone/plonetheme-barceloneta-base/scss/controlpanels";
+@import "@plone/plonetheme-barceloneta-base/scss/forms";
+```
+
+!!! tip
+    See all the [barceloneta SCSS files](https://github.com/plone/plonetheme.barceloneta/tree/master/scss)
+    that are available and import the ones that you want to use.
+
+Add `@plone/plonetheme-barceloneta-base` as a dependency:
+
+```shell
+yarn add @plone/plonetheme-barceloneta-base
+```
+
+Add a script on `package.json` to compile the CSS:
+
+```json
+  "css-compile-main": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css plone.scss:../static/plone.css"
+```
+
+!!! tip
+    Look at [plonetheme.barcelonta package.json](https://github.com/plone/plonetheme.barceloneta/blob/master/package.json)
+    for a few more scripts to prefix and minify your CSS to get a production ready bundle.
+
+Run the compilation:
+
+```shell
+yarn run css-compile-main
+```
+
+Finally, register the [CSS as a bundle](#bundle-registration).
+
+With this, you will save yourself quite some work on styling the toolbar, the add/edit forms and controlpanels,
+while keeping the rest of your theming on your own.
+
 #### Templates
 
 -   Add `z3c.jbot` overrides