feat: styles package (#1074)

packages/web/jest.config.js

@@ -13,10 +13,10 @@ module.exports = {
     }),
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     '@standardnotes/toast': 'identity-obj-proxy',
+    '@standardnotes/styles': 'identity-obj-proxy',
   },
   globals: {
     __WEB_VERSION__: '1.0.0',
-    self: {}, // fixes error happening on `import { SKAlert } from 'sn-stylekit'`
   },
   transform: {
     '^.+\\.(ts|tsx)?$': 'ts-jest',

packages/web/package.json

@@ -72,7 +72,7 @@
     "@standardnotes/services": "^1.13.11",
     "@standardnotes/sncrypto-web": "1.10.1",
     "@standardnotes/snjs": "^2.115.6",
-    "@standardnotes/stylekit": "5.29.3",
+    "@standardnotes/styles": "1.0.0",
     "@standardnotes/toast": "1.0.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",

packages/web/src/javascripts/Services/AlertService.ts

@@ -1,6 +1,6 @@
 import { ButtonType, sanitizeHtmlString } from '@standardnotes/snjs'
 import { AlertService } from '@standardnotes/services'
-import { SKAlert } from '@standardnotes/stylekit'
+import { SKAlert } from '@standardnotes/styles'
 
 /** @returns a promise resolving to true if the user confirmed, false if they canceled */
 export function confirmDialog({

packages/web/src/stylesheets/index.css.scss

@@ -1,4 +1,4 @@
-@import '@standardnotes/stylekit/dist/stylekit';
+@import '../../../styles/src/Styles/main.scss';
 @import 'theme';
 @import 'main';
 @import 'ui';