Style props are a convenient mechanism for modifying styles directly on components with CSS-in-JS. Unfortunately, they also come with a significant runtime cost which negatively impacts our user experience. Because of those concerns, we've introduced new styling utilities that allow you to get the convenience of CSS-in-JS, but has much better runtime performance.
To start, we'll work through the process of migrating a Box component.
| name | palette | cssVar | value | l | c | h | |
|---|---|---|---|---|---|---|---|
| red-50 | red | --cnvs-palette-red-50 | oklch(0.964 0.018 26.1) | 0.964 | 0.018 | 26.1 | |
| red-100 | red | --cnvs-palette-red-100 | oklch(0.922 0.040 27.5) | 0.922 | 0.040 | 27.5 | |
| red-200 | red | --cnvs-palette-red-200 | oklch(0.867 0.071 27.1) | 0.867 | 0.071 | 27.1 | |
| red-300 | red | --cnvs-palette-red-300 | oklch(0.801 0.114 27.1) | 0.801 | 0.114 | 27.1 | |
| red-400 | red | --cnvs-palette-red-400 | oklch(0.729 0.167 26.7) | 0.729 | 0.167 | 26.7 | |
| red-500 | red | --cnvs-palette-red-500 | oklch(0.650 0.211 26.8) | 0.650 | 0.211 | 26.8 | |
| red-600 | red | --cnvs-palette-red-600 | oklch(0.531 0.185 27.6) | 0.531 | 0.185 | 27.6 | |
| red-700 | red | --cnvs-palette-red-700 | oklch(0.449 0.165 27.9) | 0.449 | 0.165 | 27.9 | |
| red-800 | red | --cnvs-palette-red-800 | oklch(0.370 0.135 28.4) | 0.370 | 0.135 | 28.4 |
| name,cssVar,value,red,green,blue | |
| "alert-lightest",-"-cnvs-brand-alert-lightest","rgb(255,238,217)",255,238,217 | |
| "alert-light","--cnvs-brand-alert-light","rgb(252,212,159)",252,212,159 | |
| "alert-base","--cnvs-brand-alert-base","rgb(255,161,38)",255,161,38 | |
| "alert-dark","--cnvs-brand-alert-dark","rgb(243,139,0)",243,139,0 | |
| "alert-darkest","--cnvs-brand-alert-darkest","rgb(192,108,0)",192,108,0 | |
| "alert-accent","--cnvs-brand-alert-accent","rgb(255,255,255)",255,255,255 | |
| "common-focusOutline","--cnvs-brand-common-focus-outline","rgb(8,117,225)",8,117,225 | |
| "common-errorInner","--cnvs-brand-common-error-inner","rgb(222,46,33)",222,46,33 | |
| "common-alertInner","--cnvs-brand-common-alert-inner","rgb(255,161,38)",255,161,38 |
| name | cssVar | value | red | green | blue | |
|---|---|---|---|---|---|---|
| cinnamon-100 | --cnvs-base-palette-cinnamon-100 | rgb(255,239,238) | 255 | 239 | 238 | |
| cinnamon-200 | --cnvs-base-palette-cinnamon-200 | rgb(252,201,197) | 252 | 201 | 197 | |
| cinnamon-300 | --cnvs-base-palette-cinnamon-300 | rgb(255,134,125) | 255 | 134 | 125 | |
| cinnamon-400 | --cnvs-base-palette-cinnamon-400 | rgb(255,83,71) | 255 | 83 | 71 | |
| cinnamon-500 | --cnvs-base-palette-cinnamon-500 | rgb(222,46,33) | 222 | 46 | 33 | |
| cinnamon-600 | --cnvs-base-palette-cinnamon-600 | rgb(163,27,18) | 163 | 27 | 18 | |
| peach-100 | --cnvs-base-palette-peach-100 | rgb(255,243,240) | 255 | 243 | 240 | |
| peach-200 | --cnvs-base-palette-peach-200 | rgb(255,194,179) | 255 | 194 | 179 | |
| peach-300 | --cnvs-base-palette-peach-300 | rgb(255,149,122) | 255 | 149 | 122 |
| [ | |
| { | |
| "city": "New York", | |
| "cityAscii": "New York", | |
| "stateId": "NY", | |
| "stateName": "New York", | |
| "countyFips": "36081", | |
| "countyName": "Queens", | |
| "lat": "40.6943", | |
| "lng": "-73.9249", |
| Date | V8 | V7 | V6 | V5 | V4 | |
|---|---|---|---|---|---|---|
| 2022-05-24 | 0 | 3 | 71 | 12 | 25 | |
| 2022-07-12 | 0 | 25 | 44 | 10 | 23 | |
| 2022-07-25 | 0 | 31 | 41 | 9 | 21 | |
| 2022-08-25 | 0 | 50 | 30 | 9 | 19 | |
| 2022-10-19 | 0 | 65 | 17 | 6 | 15 | |
| 2022-11-01 | 0 | 68 | 15 | 6 | 16 | |
| 2022-12-15 | 18 | 59 | 8 | 5 | 13 | |
| 2023-01-10 | 22 | 51 | 7 | 5 | 12 |
This is not an argument for or against any particular library or solution for styling UI. Instead I’d like to bring a bit of context and nuance to the conversation in a way that doesn’t add to the ongoing flame war.
There are some things Emotion and Styled Components do very well, especially considering the styling landscape when they was created.
