@theme-ui/color functions do not work in "long-hand" declarations, e.g. boxShadow
See original GitHub issueDescribe the bug
I would have expected that color functions like transparentize('primary', 0.7)
work in template strings for long-hand declarations like boxShadow
, especially since there is no short-hand boxShadowColor
available.
Unfortunately, that does not work.
To Reproduce Steps to reproduce the behavior:
- Install @theme-ui/color@0.3.1
- Declare a style with the sx prop on an element like so:
const Example = props => (
<div
{...props}
sx={{
boxShadow: `0 0 1px 4px ${transparentize('primary', 0.5)}, 0 0 1px 8px ${transparentize('primary', 0.7)}`,
height: `40px`,
width: `40px`,
transition: 'box-shadow 0.25s ease-in-out',
':hover': {
boxShadow: `0 0 1px 12px ${transparentize('primary', 0.7)}, 0 0 1px 20px ${transparentize('primary', 0.9)}`,
},
}}
/>
);
Additional context Workaround using css custom properties:
const Example = props => (
<div
{...props}
sx={{
'--box-shadow-color-light': transparentize('primary', 0.9),
'--box-shadow-color-med': transparentize('primary', 0.7),
'--box-shadow-color-dark': transparentize('primary', 0.5),
boxShadow: `0 0 1px 4px var(--box-shadow-color-dark), 0 0 1px 8px var(--box-shadow-color-med)`,
height: `40px`,
width: `40px`,
transition: 'box-shadow 0.25s ease-in-out',
':hover': {
boxShadow: `0 0 1px 12px var(--box-shadow-color-med), 0 0 1px 20px var(--box-shadow-color-light)`,
},
}}
/>
);
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:5 (5 by maintainers)
Top Results From Across the Web
box-shadow - CSS: Cascading Style Sheets - MDN Web Docs
A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. Try it. CSS...
Read more >Multiple box-shadow declarations in Sass - css - Stack Overflow
This is throwing errors because I guess Sass can't evaluate the $inset variable. The previous example only demonstrates the problem I am having...
Read more >CSS box-shadow property - W3Schools
Example. Add shadows to different <div> elements: #example1 { box-shadow: 5px 10px; } ... If you do not specify the color, the shadow...
Read more >CSS Box Shadow Tutorial: A Step-By-Step Guide (+ Examples)
But don't worry, you don't need all of these declarations all the time. Plus, once you understand how they work, it no longer...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
To use
@theme-ui/color
functions in properties likeboxShadow
, you can manually pass thetheme
object with a functional value (this isn’t an ideal API, but should work with the current release):Just as a side note to your original question. It might be simpler to instead use the
shadows
property on the theme. Your shadows will be more consistent as you won’t need to provide inline values to either theboxShadow
property or thetransparentize
function.