add ability to access `:root` css variables

hanbollar commented 2 months ago

Linking

Fix https://github.com/Volumetrics-io/mrjs/issues/594

Problem

cant access css root var

Solution

make a way to access css root var

Breaking Change

nope

Notes

see https://github.com/Volumetrics-io/mrjs/pull/605#issuecomment-2089379516

Required to Merge

[x] PASS - all necessary actions must pass (excluding the auto-skipped ones)
[x] TEST IN HEADSET - main dev-testing-example and any of the other examples still work as expected ~~- [ ] VIDEO - if this pr changes something visually - post a video here of it in headset-MR and/or on desktop (depending on what it affects) for the reviewer to reference.~~
[x] TITLE - make sure the pr's title is updated appropriately as it will be used to name the commit on merge - [ ] BREAKING CHANGE
- DOCUMENTATION: This includes any changes to html tags and their components
- make a pr in the documentation repo that updates the manual docs to match the breaking change
- link the pr of the documentation repo here: #pr
- that pr must be approved by @lobau
- SAMPLES/INDEX.HTML: This includes any changes (html tags or otherwise) that must be done to our landing page submodule as an effect of this pr's updates
- make a pr in the mrjs landing page repo that updates the landing page to match the breaking change
- link the pr of the landing page repo here: #pr
- that pr must be approved by @hanbollar

render[bot] commented 2 months ago

Your Render PR Server URL is https://examples-mrjs-pr-605.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-copeohi0si5c739a0v2g.

hanbollar commented 2 months ago

@michaelthatsit vvv

this does add a utils function --> is there a better way to add this in for users instead of a one-off-function, but still allow use with threejs?

the biggest issue is the setStyle function going directly to threejs, so we'd need an in between grabber, which leads to the need for the function anyway

lmk your thoughts ~

hanbollar commented 2 months ago

demo of it working is if you click on the change color button on the main index - it changes from the default color of the button to a specified var

document.querySelector("#button").style.backgroundColor = mrjsUtils.css.getVarFromRoot('--accent');

i'll remove this addition before closing ^^^

michaelthatsit commented 2 months ago

@hanbollar I'm confused as to what this resolves but it looks good.

Does compStyle note resolve colors set via :root variables? It should.

hanbollar commented 2 months ago

@hanbollar I'm confused as to what this resolves but it looks good.

Does compStyle note resolve colors set via :root variables? It should.

@michaelthatsit oh yea it does, that's why im using the getComputedStyle function

it's just that mr-entity.compStyle stored variable will only show the inherited items and items of that mr-entity (ie ones that are already css parameters like root's padding, margin, etc)

but it wont show the new variables a user can create in :root for future use (like in this case --accent or --nav) since those are handled directly by html/css to already convert them from --item to value using var(--item) within the css directly

[[sanity checked by visually reading through items of the following in the sample: console.log(document.querySelector("#button").compStyle);]]

Clearer explanation: this pr is to create a way to access the :root directly s.t. you can access the key:map of variable names to values for use of the css within the js more clearly.

lmk if this makes sense ~

hanbollar commented 2 months ago

related to #612 - do we want this to be a bigger feature or small one-off is fine

Volumetrics-io / mrjs