Open christinach opened 8 months ago
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:
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