fix(www): layout for /guidelines/design-tokens + convert to theme-ui (#24569)

* converted guidelines containers from styled-system to theme-ui

* CopyColumn sticky styling fixed for responsive

* fixed the linting issue by converting double quotes to backtick

* guidelines design token page responsive layout fixed

* ContentColumn width changed for mobile

* used Flex from theme-ui instead of styled

* used the Box component from theme-ui inside Layout

* updated the breakpoints

* tweaking

* updated sections with no right padding

* styling updates

* created separate component for <td> with verticalAlignment of top

* added overflowX to the parent div of table on mobile

* fixed the lint error

* moved raw css to sx in containers

* fix: "Font Weights" token column value

`fontWeights[body]` -> `fontWeights.body`

* feat: add "px" column to "Font Sizes" table

Co-authored-by: Florian Kissling <florian.kissling@gmail.com>

yarn.lock

@@ -1898,7 +1898,12 @@
   dependencies:
     "@types/node" "*"
 
-"@types/node@*", "@types/node@^8.5.7":
+"@types/node@*":
+  version "14.0.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.6.tgz#f9e178b2da31a4b0ec60b64649e244c31ce18daf"
+  integrity sha512-FbNmu4F67d3oZMWBV6Y4MaPER+0EpE9eIYf2yaHhCWovc1dlXCZkqGX4NLHfVVr6umt20TNBdRzrNJIzIKfdbw==
+
+"@types/node@^8.5.7":
   version "8.10.61"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.61.tgz#d299136ce54bcaf1abaa4a487f9e4bedf6b0d393"
   integrity sha512-l+zSbvT8TPRaCxL1l9cwHCb0tSqGAGcjPJFItGGYat5oCTiq1uQQKYg5m7AF1mgnEBzFXGLJ2LRmNjtreRX76Q==