Use css variables with sass mixins, rgba (opacity), and tint CSS functions

[christinach]

Use css variables with sass mixins instead of hardcoding the px size. See in lux the heading component and what we replaced with the screen size calculated values: [Example from lux heading component] (https://github.com/pulibrary/lux/blob/b1069387420a2cf60a5d9608e2d5c59baa3abad8/src/elements/Heading.vue#L76)

https://github.com/pulibrary/lux-styleguidist/blob/4cd970272f1a16b4e137bee062b8a1bdf8449779/src/components/LuxHeading.vue#L75

https://github.com/pulibrary/lux-styleguidist/blob/4cd970272f1a16b4e137bee062b8a1bdf8449779/src/components/LuxHeading.vue#L81 https://github.com/pulibrary/lux-styleguidist/blob/4cd970272f1a16b4e137bee062b8a1bdf8449779/src/components/LuxHeading.vue#L87

https://github.com/pulibrary/lux-styleguidist/blob/4cd970272f1a16b4e137bee062b8a1bdf8449779/src/components/LuxHeading.vue#L92

https://github.com/pulibrary/lux-styleguidist/blob/4cd970272f1a16b4e137bee062b8a1bdf8449779/src/components/LuxHeading.vue#L97

See: system.scss

[sdellis]

This is now possible for to applying opacity (rgba) and tinting of css variables using the color-mix syntax. This solves the issue for rgba and tint values as we can replicate the output values as with color-mix, passing in transparent and white as mix colors.

Note: color-mix does not solve the issue for sass mixins.

body {
   --color: #DF00A9;
   background: color-mix(in srgb, var(--color) 70%, transparent);
}

See:

• https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable
• https://caniuse.com/?search=color-mix