feat: add smart tokens #163
Conversation
| @@ -20,6 +20,7 @@ light: {backgroundBase : "#FFFFFF",backgroundContrast : "#475A70",backgroundHove | |||
| shadow: {base : "#36485C"}, | |||
| inverted: {backgroundBase : "#2E3A47",backgroundHover : "#36485C",backgroundActive : "#475A70",textEmphasis : "#FFFFFF",textBody : "#F5F7FA"}, | |||
| secondary: {borderBase : "#2E3A47",borderHover : "#212933",borderActive : "#212933",backgroundBase : "#FFFFFF",backgroundHover : "#F5F7FA",backgroundActive : "#E6EDF5",textBase : "#2E3A47",textHover : "#2E3A47",textActive : "#2E3A47"}, | |||
| smart: {backgroundBase : "linear-gradient(65deg, #7495B9 10.68%, #4D7199 38.02%, #2E5988 79.03%)",backgroundHover : "linear-gradient(65deg, #7495B9 10.68%, #4D7199 20.59%, #2E5988 32.55%)",backgroundActive : "linear-gradient(65deg, #4D7199 10.68%, #2E5988 20.59%, #264A6E 32.55%)"}, | |||
There was a problem hiding this comment.
I know RN doesn't support linear gradients, but I was thinking of keeping this for now as smart components are currently limited to the practitioner side, and should not appear on the patient side.
There was a problem hiding this comment.
There are several ways we can do linear-gradients in React Native, we just have to care enough to want a potentially gigantic package in our bundle as a result. https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md#lineargradient has been a good source for me over the years of linear-gradients.
That all being said, perhaps you're right that its good to keep this in the tokens.
There was a problem hiding this comment.
Thanks for the link! I've seen it defined this way in the fs-native repo, but I'm assuming you can't define the linear gradient as I currently have it as a style.
I think this is something we need to dive into a bit more once we move our tokens to Supernova. I know the RN ones aren't as well fleshed out as the web ones, and I recall there being other instances where the RN tokens might not work right now.
Would love to figure out how to keep this in tokens though for more control on our end!
There was a problem hiding this comment.
This is some great points, I'll actually bring this discussion to the meeting Benaiah and Brian and I are doing tomorrow for starting to move tokens into Supernova!
|
lgtm as well! tested locally in storybook 🎉
|
This MR adds the smart color token values and gradient tokens to all of the themes.
The gradients have been broken down into 3 different background tokens (base, hover, active)
UI Kit