Atomic CSS (Sprinkles) vs Runtime CSS in JS

[slainless]

Asking for thought/feedback regarding this from developer perspective...

I feel like using atomic css style in conjuction with vanilla-extract is a bit unfriendly in terms of DX. I just feel like it's too constraining, compared to using a simple runtime css in js. Lately, I feel like adding @emotion/css to do the job of styling minor element on the fly, something like this?

import { color } from '../theme/vanilla-extract-vars.css'

function AppPage() {
  return <div className={css`
    border: 1px solid ${color.gray};
  `}/>
}

I know that there will be tradeoff (runtime burden from emotion and improved DX, at least for me) and even defeating the purpose of using vanilla-extract in the first place, but what do you think?