argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.

Home Page:https://open-props.style

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Document jit-props and JS import shadows gotchas

argyleink opened this issue · comments

The supporting props for shadows (strength and color) only ship the light versions in the JS bundle, and the JS bundle is what jit-props uses to resolve values. Documentation should articulate this current limitation as well as suggest ways to resolve for now.

Seems like shadow strength and color are static values that you can override. So, as a work around, I'm currently just taking their default values and including it in my app.css file in the :root selector.

:root {
  /* open-props doesn't include these for jit-props*/
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
}

yep, that's the workaround! here's the light/dark for folks to grab if they need in the meantime

html {
    --shadow-strength: 1%;
    --shadow-color: 220 3% 15%;
}

@media (--OSdark) {
    html {
        --shadow-strength: 25%;
        --shadow-color: 220 40% 2%;
    }
}