Can we get an example of how to create a simple bulma scss theme?

[stemid]

This is about The Docs

Overview of the problem

This is about the Bulma Docs I'm using Bulma version 1.0.0 My browser is: Firefox 124.0.1 This is a Sass issue: I'm using version 1.75.0 I am sure this issue is not a duplicate, I searched for scss theme example but couldn't find anything exactly similar. This should really be in Discussions imho.

Description

Bulma is supposed to be a simple CSS framework but I guess I'm too simpleminded to understand how to create your own theme. The terminology used in the docs is so foreign to me, and I have 20 years of programming experience. I would love to see an example.

I've tried googling site:github.com bulma scss theme to get one but I can't find any that is just one file showing me how to use the with keyword and how to define the colors I want to use.

I am already using sass to generate my css but the theme is the only thing I have been unable to customize so far.

The one theme I did find on github that I wanted was 5 years old and does not use the with keyword at all.

[stemid]

I think I figured it out finally, I had to get some variables from this page and further I used inspect in Firefox to see other variables not listed there.

I still don't understand how to name the theme and have multiple, but I don't care because it's just for my personal site anyways.

So this is my first draft Nord theme.

// Set your brand colors
$nord0Black: #2e3440;
$nord1Black: #3b4252;
$nord2Black: #434c5e;
$nord3Black: #4c566a;

$nord4White: #d8dee9;
$nord5White: #e5e9f0;
$nord6White: #eceff4;

$nord7Blue: #8fbcbb;
$nord8Blue: #88c0d0;
$nord9Blue: #81a1c1;
$nord10Blue: #5e81ac;

$nord11Red: #bf616a;
$nord12Orange: #d08770;
$nord13Yellow: #ebcb8b;
$nord14Green: #a3be8c;
$nord15Purple: #b48ead;

// Path to Bulma's sass folder
@use "bulma/sass" with (
  $black: $nord0Black,
  $white: $nord6White,
  $blue: $nord10Blue,
  $red: $nord11Red,
  $orange: $nord12Orange,
  $yellow: $nord13Yellow,
  $green: $nord14Green,
  $purple: $nord15Purple,

  $primary: $nord7Blue,
  $link: $nord8Blue,
  $success: $nord14Green,
  $info: $nord7Blue,
  $warning: $nord11Red,
  $dark: $nord0Black,

  $background: $nord0Black,
  $border: $nord8Blue,
  $code: $nord3Black,
  $pre: $nord3Black,
  $shadow-color: $nord2Black,

  $body-background-color: $nord0Black,

  $control-border-width: 2px,
  $input-shadow: none
);

ul.taxonomy-list > li {
  display: inline;
}