Toolbar style is broken while creating theme in plone6

I am following 5. Create a theme based on Diazo – Plone 6 Classic UI Theming — Plone Training 2022 documentation but when I install the addon the toolbar's style is broken any way to fix it?

in the theme scss add:

@import "@plone/plonetheme-barceloneta-base/scss/toolbar";

(close to the end)

and add this close to the begin:

// plone variables (used in toolbar)
// Plone specific 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);

And then do:
npm run build

Add any missing plone variable, you can find them in the node_modules/@plone/plonetheme-barceloneta-base/scss/ directory.

The toolbar has been added as a scss separate component recently and if you don't use barceloneta you should include it.

also the right tutorial should be

Also has some useful info.