rgba() function miscalculates color from CSS variable - css

Question

I have the following CSS:
.form-search {
.form-control {
border-color: rgba(var(--shade-l6), .5);
background-color: rgba(var(--shade-l6), .5);
}
}
The variable is defined as follows:
:root {
--shade-l6: #{lighten($light, 6)};
}
.dynamic {
#media all and (prefers-color-scheme: dark) {
--shade-l6: #{lighten($dark, 6)};
}
}
.dark {
--shade-l6: #{lighten($dark, 6)};
}
The expected result would be for the background and border to take on the same color. However, when I take a look at this the endresult is as follows:
The background takes on a light color as expected, but the border is dark. The border will be light in dark mode.
When applying the variables through SCSS directly like shown below, the expected result is given.
.form-search {
.form-control {
border-color: rgba(lighten($light, 6), .5);
background-color: rgba(lighten($light, 6), .5);
}
}
What am I doing wrong here?

Answer 1

The sass rgba function does not work with CSS vars. You can do as you've posted at the end of your question and use a SCSS variable. Alternatively, you can define your CSS variable as the 3 RGB values that rgba would normally be looking for
:root {
--shade-l6: 235, 239, 243;
}
.form-search {
.form-control {
border-color: rgba(var(--shade-l6), .5);
background-color: rgba(var(--shade-l6), .5);
}
}

Answer 2

This is a bit more complex than it looks because it is easy to mix up the CSS and the SCSS color functions.
CSS rgb takes a r,g,b color value but not a hex value
SCSS rgba takes a color value but not a CSS variable
To make this work you need to
Convert the color to r,g,b format
Trick SCSS function to render the CSS rgba function
Something like this:
SCSS
// SCSS color variables
$light: orange;
$dark : orangered;
// Function to convert a color to rgb format r,g,b
#function rgb-format($color){
#return red($color), green($color), blue($color);
}
// Create CSS variables as rgb format
// e.g --shade-l6: 255, 176, 31;
:root {
--shade-l6: #{rgb-format(lighten($light, 6))};
}
.dynamic {
#media all and (prefers-color-scheme: dark) {
--shade-l6: #{rgb-format(lighten($dark, 6))};
}
}
.dark {
--shade-l6: #{rgb-format(lighten($dark, 6))};
}
// Pass the CSS vars to the CSS rgba function bypassing the
// SCSS function by uppercasing the first letter...
// SCSS will not understand this and simply render what is there
// - in this case the CSS rgba function
.form-search {
.form-control {
border-color: Rgba(var(--shade-l6), .5);
background-color: Rgba(var(--shade-l6), .5);
}
}
CSS Output
:root {
--shade-l6: 255, 176, 31;
}
#media all and (prefers-color-scheme: dark) {
.dynamic {
--shade-l6: 255, 91, 31;
}
}
.dark {
--shade-l6: 255, 91, 31;
}
.form-search .form-control {
border-color: Rgba(var(--shade-l6), 0.5);
background-color: Rgba(var(--shade-l6), 0.5);
}