We're in the process of adopting this spec for our in-house design system's implementation but have encountered issues when we got to React Native style tokens. For example, looking at https://github.com/system-ui/theme-ui/blob/master/packages/preset-tailwind/src/index.js#L445, this seems to be the recommended way to handle shadows:
shadows: {
default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
xl:
'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
none: 'none',
}However this is nowhere compatible with RN's elevation for Android or zIndex & other shadow props for iOS.
@jxnblk @johno wondering you guys' thoughts on this. If the current spec is adequate, how should we structure these tokens in a way that is both conformant and giving a clear indication that these are not 3 separate sets of tokens but one single set being represented in 3 formats for 3 platforms? Or if that the current spec couldn't handle this, what do you plan to do to address this issue?
We're in the process of adopting this spec for our in-house design system's implementation but have encountered issues when we got to React Native style tokens. For example, looking at https://github.com/system-ui/theme-ui/blob/master/packages/preset-tailwind/src/index.js#L445, this seems to be the recommended way to handle shadows:
However this is nowhere compatible with RN's elevation for Android or zIndex & other shadow props for iOS.
@jxnblk @johno wondering you guys' thoughts on this. If the current spec is adequate, how should we structure these tokens in a way that is both conformant and giving a clear indication that these are not 3 separate sets of tokens but one single set being represented in 3 formats for 3 platforms? Or if that the current spec couldn't handle this, what do you plan to do to address this issue?