Color Variables -- to rgb() or not to rgb()

[tilman-schieber]

All the color variables in liascript are defined as strings and not as css colors. See _settings.colors.scss
Whenever they are used, the rgb()-function is used to convert them.

Is there any specific reason for this? It caused me to stumble a bit when trying to customize the design.

It has the disadvantage that it is inconvenient to overwrite lia-script's css color variables like --color-highlight

So a very common idiom like

   --color-highlight: gold

is not possible.
I would have to look up the rgb value of gold and paste it in.

This also leads to diminished interoperability with other css frameworks:
I noticed this when I wanted to get different colored highlights in alert boxes like this:

   --color-highlight: var(--bs-alert-color)

But all bootstrap color variables are colors and not strings of RGB values so this will not work.

Is it only me or would it be an improvement to put the rgb-to-color conversion with rgb() in _settings.colors.scss and remove them from all the other css settings?

[andre-dietrich]

These base colors are utilized on many different locations in more variables:

LiaScript/src/scss/03_elements/_elements.page.scss

Lines 1 to 22 in 14e97b3

	:root {
	// Basic color definitions
	// Map $global-colors and define global color variables with prefix "lia".
	@each $color, $rgb in $global-colors {
	--lia-#{$color}: #{$rgb};
	}
	}
	// Additional Color Definitions For Default Theme
	:root {
	--color-background: var(--lia-white);
	--color-border: var(--lia-grey-light);
	--color-highlight-dark: var(--lia-turquoise-dark);
	--color-highlight-menu: var(--lia-turquoise);
	--color-highlight: var(--lia-turquoise);
	--color-text: var(--lia-anthracite);
	&.lia-theme-turquoise {
	--color-highlight-dark: var(--lia-turquoise-dark);
	--color-highlight-menu: var(--lia-turquoise-darker);
	--color-highlight: var(--lia-turquoise);
	}

to which later also alpha values are attached ...

LiaScript/src/scss/03_elements/_elements.code.scss

Lines 45 to 62 in 14e97b3

	&__input {
	align-items: center;
	background-color: rgba(var(--lia-white), 0.1);
	border-radius: $global-radius;
	border: 1px solid rgba(var(--lia-white), 0.5);
	color: rgb(var(--lia-white));
	display: flex;
	margin: 1rem 1.6rem;
	padding: 0 0.8rem;
	input {
	background-color: transparent;
	border: 0;
	color: rgb(var(--lia-white));
	line-height: inherit;
	width: 100%;
	}
	}

Unfortunately, using only gold will break the scss ...

The former UI/SCSS developer said, that this is the shortest and optimal way to utilize variables and change them dynamically ... In general, there are 9 base variables that you can use to customize your course, but we did not add this to the documentation, since we did not like how the configuration was done and still seek for another way:

<!--
@custom
  --color-highlight: 2,255,0;
  --color-background: 122,122,122;
  --color-border: 0,0,0;
  --color-highlight-dark: 0,0,0;
  --color-highlight-menu: 0,0,0;
  --color-text: 0,0,255;
  --global-font-size: 1rem;
  --font-size-multiplier: 2;
@end
-->

# Main Title

all variables are:

--color-background
--color-border
--color-highlight-dark
--color-highlight-menu
--color-highlight
--color-text
--global-font-family
--global-font-mono
--global-font-headline
--global-font-size
--font-size-multiplier
--max-editor-line-count

[tilman-schieber]

The background of my question is that I added some colored boxes to my course and I am not the biggest fan of teal bullet points on a red background. So what I was trying to do is changing the highlight color for a specific class. Thats why I dug up --color-highlight.

I can see the reason with the alpha values and it's no problem. I can just change my colors to the rgb-string format.

But I found a small mistake:

https://github.com/LiaScript/LiaScript/blob/14e97b3b7759f4262742f75565a7f4073a19bfc2/src/scss/03_elements/_elements.code.scss#L107C1-L114C45

(why dont I get the nice code snippets? I think I did everything right?)

the last line should be
color: rgba(var(--color-highlight), 0.4);

The same issue repeats in Line 131.

[andre-dietrich]

Thanks, I will fix this ... this was my latest implementation of the CopyCode button 🙈 ...