https://discord.umbraco.com
Join Discord
How do I get UUI CSS custom variables in my Lit Component?
# package-development
w
CSS/Lit/UUI CSS custom variables How do I go about in my component (dashboard) use the CSS variable from the UUI library ?
So I am trying to use something like this 
padding: var(--uui-box-default-padding);
The CSS variable comes from UUI library
I have tried importing various things, but only seems to be the text styles from UUI library and nothing more I can get access to. Is there a way to get common sizing variables like this into my work? 
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
Then tried 
import { UUITextStyles as UmbTextStyles } from '@umbraco-cms/backoffice/external/uui';
And also this from various locations 
import { UUITextStyles as UmbTextStyles } from '@umbraco-ui/uui-css';
Be good to reuse the same CSS variables that UUI library uses so that I can then reuse them for spacing, heights, colors etc
So what is the thing I am doing wrong to get the CSS variables ?! 😕
n
I've always just referred to the dev console, inspected :root, and used whatever is available there. No issues with getting things working and looking nice
w
Yeh probably just a me thing and picked some CSS variable that’s only part of that UUI-box component and not on the root. Think VSCode completions probably being not helpful in this case if I can’t access it. Well one for next week. Had forgotten that CSS vars is one thing that does flow down into shadow DOM.
33 Views
PreviousNext
Powered by

Umbraco

A hub and casual space for you to interact with fellow community members and learn more about Umbraco!

Powered by