Thanks for the auto layout CSS update. Strokes that sit outside the padding the way border-box works, removed mismatches between our components and our CSS.
Inner shadows were missed though? In Figma the offset is measured from the outer edge of the frame, so the stroke eats part of it. In CSS an inset shadow starts at the padding box, right below the border. Same numbers, different result.
A Frame with padding 8 and stroke set to Inside with a weight of 4, and one inner shadow with X 0, Y 8, blur 4, spread 0:
- Figma renders 4px of green. The first 4px of the offset sit underneath the stroke.
- Dev Mode hands out box-shadow: 0 8px 4px 0 #00FE00 inset, which renders 8px of green in the browser.
- Matching Figma requires “0 calc(8px - 4px) 4px 0 #00FE00 inset”, so the visible offset is Y minus the stroke weight.
Could inner shadows follow the same model as the rest of the auto layout change, or get a per effect switch like the Included and Excluded border option? Until then it would already help if Dev Mode subtracted the stroke weight, since that value is what gets copied into code and agents get wrong.