Set sass variables with css variables to allow easy overrides

[frjo]

Fixes #4258

Also clean out unused styling items.

With new dart sass and @use instead of @import it is not possible to override sass variables in a separate file. Using css variabels make it possible again, even easy.

Test Steps

• There should be no change is site styling.

[theskumar]

With the SCSS variables the compiler would have thrown in error, I am thinking this might might make the SCSS code less reliable and prone to error. With tailwind classnames and SCSS variables, we get auto-completion and intellisense, here someone would have remember of all the variables.

My take would be to define all the variables in static_src/tailwind/base/variables.css and then create SCSS variables using those css variables.

Keeps the variables at a single place, avoids big refactor.

I think we can remove a lot these variables, but using TailwindCSS classes as well. e.g. milli ~ text-xs. But that could come in bit later.

NOTE: While the css variables are defined in the base/variables.css it's there only to allow for easier overrides. These variables are then converted to TailwindCSS tokens, then used in the tailwind generated classes.

[theskumar]

In the /tailwind/base/variables.css, we can use the theme() function to pull in the font weights, dimension units, etc. https://tailwindcss.com/docs/functions-and-directives#theme

e..g

:root {
  --font-bold: theme("font.bold.weight")
  --gutters: theme("spacing.4")
}

[frjo]

Good points. I'm now setting the sass variables from css variables that are specified in hypha/static_src/tailwind/base/variables.css.

This will allow people to override almost all settings by setting a css variable in hypha/static_src/sass/custom/_custom.scss.

Most of the css variables are colours. I notice that we use the colours directly, e.g. --color-lightest-blue in many places. I think it would be better to set up more variables like --color-primary: var(--color-light-blue); and use these throughout Hypha.

Many other things we can do to improve styling of Hypha, this is one step.