Configure basics using Stitches lib - See https://stitches.dev/docs/installation

Author: Vadorequest

package.json

@@ -117,6 +117,7 @@
     "@fortawesome/react-fontawesome": "0.1.14",
     "@sentry/browser": "6.3.6",
     "@sentry/node": "6.3.6",
+    "@stitches/react": "0.2.2",
     "@types/lodash.isequal": "4.5.5",
     "@unly/simple-logger": "1.0.0",
     "@unly/universal-language-detector": "2.0.3",

src/modules/core/css/stitches.config.ts

@@ -0,0 +1,26 @@
+import { createCss } from '@stitches/react';
+
+export const {
+  styled,
+  css,
+  global,
+  keyframes,
+  getCssString,
+  theme,
+} = createCss({
+  theme: { // TODO Need to have part of our theme configured dynamically (based on the Customer.theme)
+    colors: {
+      gray400: 'gainsboro',
+      gray500: 'lightgray',
+    },
+  },
+  media: {
+    bp1: '(min-width: 480px)',
+  },
+  utils: {
+    marginX: (config) => (value) => ({
+      marginLeft: value,
+      marginRight: value,
+    }),
+  },
+});

yarn.lock

@@ -2681,6 +2681,11 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@stitches/react@0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@stitches/react/-/react-0.2.2.tgz#8a2f8256835510c265ab20820f54a5bb0376bac6"
+  integrity sha512-/qRSX+ANPJg/0eLNr5bEywjkdvIfLbsaG2d8p83wPlI0MA7Yi9FzaRLk2H6DMAdJHuyu6ThY4HfHQIL35buY9g==
+
 "@storybook/addon-a11y@6.2.9":
   version "6.2.9"
   resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-6.2.9.tgz#8386d73343db03c15d07f6bf927a4030d441d1ff"