How do I get UUI CSS custom variables in my Lit Co...
# package-developmentw
Warren Buckley
07/12/2024, 2:47 PMCSS/Lit/UUI CSS custom variables
How do I go about in my component (dashboard) use the CSS variable from the UUI library ?
Warren Buckley
07/12/2024, 2:47 PMSo I am trying to use something like this
padding: var(--uui-box-default-padding);Warren Buckley
07/12/2024, 2:49 PMI 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';Warren Buckley
07/12/2024, 2:49 PMThen tried
import { UUITextStyles as UmbTextStyles } from '@umbraco-cms/backoffice/external/uui';Warren Buckley
07/12/2024, 2:50 PMAnd also this from various locations
import { UUITextStyles as UmbTextStyles } from '@umbraco-ui/uui-css';Warren Buckley
07/12/2024, 2:51 PMBe good to reuse the same CSS variables that UUI library uses so that I can then reuse them for spacing, heights, colors etc
Warren Buckley
07/12/2024, 2:51 PMSo what is the thing I am doing wrong to get the CSS variables ?! 😕
n
nathanwoulfe
07/12/2024, 10:19 PMI'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
Warren Buckley
07/12/2024, 10:31 PMYeh 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.
28 Views