feat: styles package (#1074)

2022-06-07 13:49:00 -05:00
parent 6d0b6e9018
commit 31003276b7
40 changed files with 3346 additions and 119 deletions
--- a/packages/styles/.eslintignore
+++ b/packages/styles/.eslintignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+webpack.config.js
--- a/packages/styles/.eslintrc.json
+++ b/packages/styles/.eslintrc.json
@@ -0,0 +1,4 @@
+{
+  "extends": ["../../node_modules/@standardnotes/config/src/.eslintrc"],
+  "ignorePatterns": [".eslintrc.js", "webpack.config.js"]
+}
--- a/packages/styles/.gitignore
+++ b/packages/styles/.gitignore
@@ -0,0 +1 @@
+dist
--- a/packages/styles/linter.tsconfig.json
+++ b/packages/styles/linter.tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../node_modules/@standardnotes/config/src/linter.tsconfig.json"
+}
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@standardnotes/styles",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "webpack --mode='production' && yarn run tsc",
+    "start": "webpack --watch --mode='development'",
+    "lint": "prettier --check *.js"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "css-loader": "~6.6.0",
+    "mini-css-extract-plugin": "^2.5.3",
+    "node-sass": "^7.0.1",
+    "sass-loader": "^12.6.0",
+    "style-loader": "~3.3.1",
+    "webpack": "^5.69.1",
+    "webpack-cli": "^4.9.2"
+  }
+}
--- a/packages/styles/src/Alert/Alert.ts
+++ b/packages/styles/src/Alert/Alert.ts
@@ -0,0 +1,127 @@
+type AlertButtonStyle = 'small' | 'outlined' | 'contrast' | 'neutral' | 'info' | 'warning' | 'danger' | 'success'
+
+type AlertButton = {
+  text: string
+  style: AlertButtonStyle
+  action: () => void
+  primary?: boolean
+}
+
+export class SKAlert {
+  private title?: string
+  private text: string
+  private buttons: AlertButton[]
+  private element!: HTMLDivElement
+  private onElement!: HTMLElement
+
+  constructor({ title, text, buttons }: { title?: string; text: string; buttons?: AlertButton[] }) {
+    this.title = title
+    this.text = text
+    this.buttons = buttons || []
+  }
+
+  buttonsString() {
+    const genButton = function (buttonDesc: AlertButton, index: number) {
+      return `
+        <button id='button-${index}' class='sn-button small ${buttonDesc.style}'>
+          <div class='sk-label'>${buttonDesc.text}</div>
+        </button>
+      `
+    }
+
+    const buttonString = this.buttons
+      .map(function (buttonDesc, index) {
+        return genButton(buttonDesc, index)
+      })
+      .join('')
+
+    const str = `
+      <div class='sk-button-group'>
+        ${buttonString}
+      </div>
+    `
+    return str
+  }
+
+  templateString() {
+    let buttonsTemplate: string
+    let panelStyle: string
+    if (this.buttons) {
+      buttonsTemplate = `
+        <div class="sk-panel-row" style='margin-top: 8px;'>
+          ${this.buttonsString()}
+        </div>
+      `
+      panelStyle = ''
+    } else {
+      buttonsTemplate = ''
+      panelStyle = 'style="padding-bottom: 8px"'
+    }
+    const titleTemplate = this.title ? `<div class='sk-h3 sk-panel-section-title'>${this.title}</div>` : ''
+    const messageTemplate = this.text ? `<p class='sk-p'>${this.text}</p>` : ''
+
+    const template = `
+      <div class="sk-modal">
+        <div class="sk-modal-background"></div>
+        <div class="sk-modal-content">
+          <div class="sn-component">
+            <div class="sk-panel" style='max-width: 500px;'>
+              <div class="sk-panel-content" ${panelStyle}>
+                <div class="sk-panel-section">
+                  ${titleTemplate}
+
+                  <div class="sk-panel-row">
+                    ${messageTemplate}
+                  </div>
+
+                  ${buttonsTemplate}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `
+
+    return template
+  }
+
+  dismiss() {
+    this.onElement.removeChild(this.element)
+  }
+
+  primaryButton() {
+    let primary = this.buttons.find((button) => button.primary === true)
+    if (!primary) {
+      primary = this.buttons[this.buttons.length - 1]
+    }
+    return primary
+  }
+
+  present(onElement?: HTMLElement) {
+    if (!onElement) {
+      onElement = document.body
+    }
+
+    this.onElement = onElement
+
+    this.element = document.createElement('div')
+    this.element.className = 'sn-component'
+    this.element.innerHTML = this.templateString().trim()
+
+    onElement.appendChild(this.element)
+
+    if (this.buttons && this.buttons.length) {
+      this.buttons.forEach((buttonDesc, index) => {
+        const buttonElem = this.element.querySelector(`#button-${index}`) as HTMLButtonElement
+        buttonElem.onclick = () => {
+          buttonDesc.action && buttonDesc.action()
+          this.dismiss()
+        }
+        if (index === 0) {
+          buttonElem.focus()
+        }
+      })
+    }
+  }
+}
--- a/packages/styles/src/Styles/_app-bar.scss
+++ b/packages/styles/src/Styles/_app-bar.scss
@@ -0,0 +1,90 @@
+.sk-app-bar {
+  display: flex;
+  width: 100%;
+  height: 1.625rem;
+  padding: 0 0.65rem;
+  background-color: var(--sn-stylekit-contrast-background-color);
+  color: var(--sn-stylekit-contrast-foreground-color);
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid var(--sn-stylekit-contrast-border-color);
+  user-select: none;
+
+  &.no-edges {
+    border-left: 0;
+    border-right: 0;
+  }
+
+  &.no-bottom-edge {
+    border-bottom: 0;
+  }
+
+  .left,
+  .right {
+    display: flex;
+    height: 100%;
+  }
+
+  .sk-app-bar-item {
+    flex-grow: 1;
+    &:not(:first-child) {
+      margin-left: 0.8125rem;
+    }
+
+    &.border {
+      border-left: 1px solid var(--sn-stylekit-contrast-border-color);
+    }
+
+    > .sk-app-bar-item-column {
+      height: 100%;
+      display: flex;
+      align-items: center;
+
+      &:not(:first-child) {
+        margin-left: 0.40625rem;
+      }
+      &.underline {
+        border-bottom: 2px solid var(--sn-stylekit-info-color);
+      }
+    }
+
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.no-pointer {
+      cursor: default;
+    }
+
+    &:hover {
+      > .sk-label,
+      > .sk-sublabel,
+      > .sk-app-bar-item-column > .sk-label,
+      > .sk-app-bar-item-column > .sk-sublabel {
+        &:not(.subtle) {
+          color: var(--sn-stylekit-info-color);
+        }
+      }
+    }
+
+    > .sk-label,
+    > .sk-app-bar-item-column > .sk-label {
+      font-weight: bold;
+      font-size: var(--sn-stylekit-font-size-h5);
+      white-space: nowrap;
+    }
+
+    > .sk-sublabel,
+    > .sk-app-bar-item-column > .sk-sublabel {
+      font-size: var(--sn-stylekit-font-size-h5);
+      font-weight: normal;
+      white-space: nowrap;
+    }
+
+    .subtle {
+      font-weight: normal;
+      opacity: 0.6;
+    }
+  }
+}
--- a/packages/styles/src/Styles/_menu-panel.scss
+++ b/packages/styles/src/Styles/_menu-panel.scss
@@ -0,0 +1,96 @@
+.sk-menu-panel {
+  // box-shadow: 0px 4px 4px var(--sn-stylekit-shadow-color);
+  background-color: var(--sn-stylekit-background-color);
+  border: 1px solid var(--sn-stylekit-contrast-border-color);
+  border-radius: var(--sn-stylekit-general-border-radius);
+  overflow: scroll;
+  user-select: none;
+
+  // For Windows to hide needless scrollbars
+  overflow-y: auto !important;
+  overflow-x: auto !important;
+
+  .sk-menu-panel-header {
+    padding: 0.65rem 0.8125rem;
+    border-bottom: 1px solid var(--sn-stylekit-contrast-border-color);
+    background-color: var(--sn-stylekit-contrast-background-color);
+    color: var(--sn-stylekit-contrast-foreground-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .sk-menu-panel-header-title {
+    font-weight: bold;
+    font-size: var(--sn-stylekit-font-size-h4);
+  }
+
+  .sk-menu-panel-header-subtitle {
+    margin-top: 0.1625rem;
+    opacity: 0.6;
+  }
+
+  .sk-menu-panel-row {
+    padding: 0.8125rem 0.8125rem;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--sn-stylekit-border-color);
+
+    &:hover {
+      background-color: var(--sn-stylekit-contrast-background-color);
+      color: var(--sn-stylekit-contrast-foreground-color);
+      border-color: var(--sn-stylekit-contrast-border-color);
+    }
+
+    .sk-menu-panel-column {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+
+      &:not(:first-child) {
+        padding-left: 1rem;
+        padding-right: 0.121875rem;
+      }
+
+      &.stretch {
+        width: 100%;
+      }
+
+      .sk-menu-panel-subrows {
+        margin-top: 0.8125rem;
+      }
+
+      /* Nested row */
+      .sk-menu-panel-row,
+      .sk-menu-panel-subrow {
+        border: 1px solid var(--sn-stylekit-contrast-border-color);
+        margin-top: -1px;
+        &:hover {
+          background-color: var(--sn-stylekit-background-color);
+        }
+      }
+
+      .left {
+        display: flex;
+      }
+    }
+
+    .sk-button .sk-label {
+      font-size: var(--sn-stylekit-font-size-h6);
+      font-weight: normal;
+    }
+
+    .sk-label {
+      font-size: var(--sn-stylekit-font-size-p);
+      font-weight: bold;
+    }
+
+    .sk-sublabel {
+      font-size: var(--sn-stylekit-font-size-h5);
+      margin-top: 0.1625rem;
+      opacity: 0.6;
+    }
+  }
+}
--- a/packages/styles/src/Styles/_modal.scss
+++ b/packages/styles/src/Styles/_modal.scss
@@ -0,0 +1,73 @@
+.sk-modal {
+  position: fixed;
+  margin-left: auto;
+  margin-right: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 10000;
+  width: 100vw;
+  height: 100vh;
+
+  background-color: transparent;
+  color: var(--sn-stylekit-contrast-foreground-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .sn-component {
+    height: 100%;
+    .sk-panel {
+      height: 100%;
+    }
+  }
+
+  &.auto-height {
+    > .sk-modal-content {
+      height: auto !important;
+    }
+  }
+
+  &.large {
+    > .sk-modal-content {
+      width: 900px;
+      height: 600px;
+    }
+  }
+
+  &.medium {
+    > .sk-modal-content {
+      width: 700px;
+      height: 500px;
+    }
+  }
+
+  &.small {
+    > .sk-modal-content {
+      width: 700px;
+      height: 344px;
+    }
+  }
+
+  .sk-modal-background {
+    position: absolute;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    background-color: var(--sn-stylekit-contrast-background-color);
+    opacity: 0.7;
+  }
+
+  > .sk-modal-content {
+    overflow-y: auto;
+    width: auto;
+    padding: 0;
+    padding-bottom: 0;
+    min-width: 300px;
+
+    -webkit-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);
+    -moz-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);
+    box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);
+  }
+}
--- a/packages/styles/src/Styles/_normalize.scss
+++ b/packages/styles/src/Styles/_normalize.scss
@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
--- a/packages/styles/src/Styles/_panels.scss
+++ b/packages/styles/src/Styles/_panels.scss
@@ -0,0 +1,219 @@
+.sk-panel {
+  $h-content-padding: 1.625rem;
+  box-shadow: 0px 2px 5px var(--sn-stylekit-shadow-color);
+  background-color: var(--sn-stylekit-background-color);
+  border: 1px solid var(--sn-stylekit-border-color);
+  border-radius: var(--sn-stylekit-general-border-radius);
+  display: flex;
+  flex-direction: column;
+  overflow: auto; // to hide border-radius
+  flex-grow: 1;
+
+  a {
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &.static {
+    box-shadow: none;
+    border: none;
+    border-radius: 0;
+
+    .sk-panel-content {
+      // padding: 0;
+    }
+  }
+
+  .sk-panel-header {
+    flex-shrink: 0; /* Don't allow to condense in height */
+    display: flex;
+    justify-content: space-between;
+    padding: 0.89375rem $h-content-padding;
+    border-bottom: 1px solid var(--sn-stylekit-contrast-border-color);
+    background-color: var(--sn-stylekit-contrast-background-color);
+    color: var(--sn-stylekit-contrast-foreground-color);
+    align-items: center;
+
+    .sk-panel-header-title {
+      font-size: var(--sn-stylekit-font-size-h1);
+      font-weight: 500;
+    }
+
+    .close-button {
+      font-weight: bold;
+    }
+  }
+
+  .sk-footer,
+  .sk-panel-footer {
+    padding: 0.8125rem $h-content-padding;
+    border-top: 1px solid var(--sn-stylekit-border-color);
+    box-sizing: border-box;
+
+    &.extra-padding {
+      padding: 1.625rem $h-content-padding;
+    }
+
+    .left {
+      text-align: left;
+      display: block;
+    }
+
+    .right {
+      text-align: right;
+      display: block;
+    }
+  }
+
+  .sk-panel-content {
+    padding: 1.3rem $h-content-padding;
+    padding-bottom: 0;
+    flex-grow: 1;
+    overflow: scroll;
+    height: 100%;
+
+    // For Windows to hide needless scrollbars
+    overflow-y: auto !important;
+    overflow-x: auto !important;
+
+    .sk-p,
+    .sk-li {
+      color: var(--sn-stylekit-paragraph-text-color);
+      line-height: 1.3;
+    }
+  }
+}
+
+.sk-panel-section {
+  padding-bottom: 1.3rem;
+  display: flex;
+  flex-direction: column;
+
+  &.sk-panel-hero {
+    text-align: center;
+  }
+
+  .sk-p:last-child {
+    margin-bottom: 0;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 1.21875rem;
+    border-bottom: 1px solid var(--sn-stylekit-border-color);
+
+    &.no-border {
+      border-bottom: none;
+    }
+  }
+
+  &:last-child {
+    margin-bottom: 0.5rem;
+  }
+
+  &.no-bottom-pad {
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+
+  .sk-panel-section-title {
+    margin-bottom: 0.40625rem;
+    font-weight: bold;
+    font-size: var(--sn-stylekit-font-size-h3);
+  }
+
+  .sk-panel-section-outer-title {
+    border-bottom: 1px solid var(--sn-stylekit-border-color);
+    padding-bottom: 0.73125rem;
+    margin-top: 1.70625rem;
+    margin-bottom: 15px;
+    font-size: var(--sn-stylekit-font-size-h3);
+  }
+
+  .sk-panel-section-subtitle {
+    @extend .sk-label;
+    font-size: var(--sn-stylekit-font-size-h5);
+    margin-bottom: 2px;
+
+    &.subtle {
+      font-weight: normal;
+      opacity: 0.6;
+    }
+  }
+
+  .text-content {
+    .sk-p {
+      margin-bottom: 0.8175rem;
+    }
+
+    p:first-child {
+      margin-top: 0.24375rem;
+    }
+  }
+}
+
+.sk-panel-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 0.325rem;
+
+  &.centered {
+    justify-content: center;
+  }
+
+  &.justify-right {
+    justify-content: flex-end;
+  }
+
+  &.justify-left {
+    justify-content: flex-start;
+  }
+
+  &.align-top {
+    align-items: flex-start;
+  }
+
+  .sk-panel-column {
+    &.stretch {
+      width: 100%;
+    }
+  }
+
+  &.default-padding,
+  &:not(:last-child) {
+    padding-bottom: 0.325rem;
+  }
+
+  &.condensed {
+    padding-top: 0.1625rem;
+    padding-bottom: 0.1625rem;
+  }
+
+  .sk-p {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.vertical-rule {
+  background-color: var(--sn-stylekit-border-color);
+  height: 1.21875rem;
+  width: 1px;
+}
+
+.sk-panel-form {
+  width: 100%;
+  &.half {
+    width: 50%;
+  }
+
+  .form-submit {
+    margin-top: 0.121875rem;
+  }
+}
+
+.right-aligned {
+  justify-content: flex-end;
+  text-align: right;
+}
--- a/packages/styles/src/Styles/_reach-overrides.scss
+++ b/packages/styles/src/Styles/_reach-overrides.scss
@@ -0,0 +1,3 @@
+[data-reach-custom-checkbox-container] {
+  margin: 0;
+}
--- a/packages/styles/src/Styles/_scrollbar.scss
+++ b/packages/styles/src/Styles/_scrollbar.scss
@@ -0,0 +1,32 @@
+.windows-web,
+.windows-desktop,
+.linux-web,
+.linux-desktop {
+  $thumb-width: 4px;
+
+  ::-webkit-scrollbar {
+    width: 17px;
+    height: 18px;
+    border-left: none;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: $thumb-width solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+    -webkit-border-radius: 10px;
+    background-color: var(--sn-stylekit-scrollbar-thumb-color);
+    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
+  }
+
+  ::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
+  scrollbar-width: thin;
+}
--- a/packages/styles/src/Styles/_sn.scss
+++ b/packages/styles/src/Styles/_sn.scss
@@ -0,0 +1,282 @@
+.sn-button {
+  font-size: 0.8125rem;
+  padding: 0.609375rem;
+  min-height: 1.8125rem;
+  @extend .border-0;
+  @extend .rounded;
+  @extend .border-solid;
+  @extend .cursor-pointer;
+  @extend .capitalize;
+  @extend .font-bold;
+
+  @extend .hover\:brightness-130;
+  @extend .focus\:brightness-130;
+  @extend .focus\:outline-none;
+}
+
+.sn-button.small {
+  font-size: 0.7109375rem;
+  padding: 0.40625rem 0.609375rem;
+}
+
+.sn-button.outlined {
+  @extend .bg-default;
+  @extend .border-1;
+  @extend .border-main;
+  @extend .color-text;
+  @extend .hover\:bg-highlight;
+  @extend .focus\:bg-highlight;
+  @extend .focus\:shadow-none;
+  @extend .focus\:outline-none;
+}
+
+.sn-button.contrast {
+  @extend .hover\:brightness-130;
+  background-color: var(--sn-stylekit-contrast-foreground-color);
+  color: var(--sn-stylekit-contrast-background-color);
+}
+
+.sn-button.neutral {
+  @extend .hover\:brightness-130;
+  @extend .focus\:brightness-130;
+  background-color: var(--sn-stylekit-neutral-color);
+  color: var(--sn-stylekit-neutral-contrast-color);
+}
+
+.sn-button.info {
+  @extend .bg-info;
+  @extend .color-info-contrast;
+}
+
+.sn-button.warning {
+  background-color: var(--sn-stylekit-warning-color);
+  color: var(--sn-stylekit-warning-contrast-color);
+}
+
+.sn-button.danger {
+  background-color: var(--sn-stylekit-danger-color);
+  color: var(--sn-stylekit-danger-contrast-color);
+}
+
+.sn-button.success {
+  background-color: var(--sn-stylekit-success-color);
+  color: var(--sn-stylekit-success-contrast-color);
+}
+
+.sn-dropdown-menu {
+  @extend .items-center;
+  @extend .bg-default;
+  @extend .border-0;
+  @extend .border-main;
+  @extend .rounded;
+  @extend .border-solid;
+  @extend .border-1;
+  @extend .cursor-pointer;
+  @extend .font-normal;
+  @extend .m-h-32;
+  @extend .hover\:bg-highlight;
+  @extend .inline-flex;
+  @extend .justify-center;
+  @extend .leading-4;
+  @extend .focus\:outline-none;
+  @extend .focus\:shadow-none;
+  @extend .px-2;
+  @extend .py-1;
+  @extend .color-text;
+  @extend .text-sm;
+  @extend .w-auto;
+}
+
+.sn-dropdown-menu > .sn-icon:first-child {
+  @extend .mr-2;
+}
+
+.sn-dropdown-menu > .sn-icon:last-child {
+  @extend .ml-2;
+}
+
+.sn-dropdown-menu-list {
+  @extend .absolute;
+  @extend .bg-default;
+  @extend .border-main;
+  @extend .rounded;
+  @extend .box-shadow;
+  @extend .font-normal;
+  @extend .min-w-265px;
+  @extend .mt-2;
+  @extend .focus\:outline-none;
+  @extend .origin-top-right;
+  @extend .py-2;
+  @extend .slide-down-animation;
+  @extend .color-text;
+  @extend .w-56;
+}
+
+.sn-dropdown-menu-list-item {
+  @extend .items-center;
+  @extend .cursor-pointer;
+  @extend .flex;
+  @extend .hover\:bg-highlight;
+  @extend .focus\:outline-none;
+  @extend .focus\:shadow-none;
+  @extend .px-2;
+  @extend .selected\:bg-color;
+  @extend .selected\:fg-color;
+  @extend .text-sm;
+  @extend .m-h-32;
+}
+
+.sn-dropdown-menu-list-item > .sn-icon {
+  @extend .mr-2;
+}
+
+.sn-select {
+  @extend .items-center;
+  @extend .bg-default;
+  @extend .border-0;
+  @extend .border-main;
+  @extend .border-solid;
+  @extend .border-1;
+  @extend .border-box;
+  @extend .rounded;
+  @extend .cursor-pointer;
+  @extend .font-normal;
+  @extend .m-h-32;
+  @extend .hover\:bg-highlight;
+  @extend .inline-flex;
+  @extend .justify-center;
+  @extend .leading-4;
+  @extend .focus\:outline-none;
+  @extend .focus\:shadow-none;
+  @extend .color-text;
+  @extend .text-sm;
+  @extend .w-auto;
+}
+
+.sn-select-button {
+  @extend .items-center;
+  @extend .border-0;
+  @extend .cursor-pointer;
+  @extend .inline-flex;
+  @extend .justify-center;
+  @extend .py-1;
+  @extend .focus\:outline-none;
+  @extend .focus\:shadow-none;
+}
+
+.sn-select-button > .sn-icon:last-child {
+  @extend .ml-2;
+}
+
+.sn-select-list {
+  @extend .bg-default;
+  @extend .border-main;
+  @extend .rounded;
+  @extend .focus\:outline-none;
+  @extend .focus\:shadow-none;
+  @extend .origin-top-right;
+  @extend .color-text;
+  @extend .text-sm;
+}
+
+.sn-select-list-option {
+  @extend .cursor-pointer;
+  @extend .selected\:bg-color;
+  @extend .selected\:fg-color;
+  @extend .font-normal;
+  @extend .text-sm;
+  @extend .py-2;
+}
+
+.sn-select-popover {
+  @extend .border-main;
+  @extend .rounded;
+  @extend .box-shadow;
+  @extend .mt-2;
+  @extend .focus\:outline-none;
+  @extend .focus\:shadow-none;
+  @extend .border-0;
+  @extend .slide-down-animation;
+}
+
+/**
+ * A button that is just an icon. Separated from .sn-button because there
+ * is almost no style overlap.
+ */
+.sn-icon-button {
+  @extend .color-neutral;
+  @extend .min-w-8;
+  @extend .h-8;
+  @extend .flex;
+  @extend .justify-center;
+  @extend .items-center;
+  @extend .border-solid;
+  @extend .border-1;
+  @extend .border-main;
+  @extend .bg-clip-padding;
+  @extend .m-0;
+  @extend .p-0;
+  @extend .bg-transparent;
+  @extend .cursor-pointer;
+  @extend .rounded-full;
+  @extend .hover\:color-text;
+  @extend .focus\:color-text;
+  @extend .hover\:bg-contrast;
+  @extend .focus\:bg-contrast;
+  @extend .focus\:outline-none;
+  @extend .focus\:ring-info;
+}
+
+.sn-icon {
+  @extend .h-5;
+  @extend .w-5;
+  @extend .fill-current;
+
+  &.sn-icon--small {
+    @extend .h-3\.5;
+    @extend .w-3\.5;
+  }
+
+  &.sn-icon--mid {
+    @extend .w-4;
+    @extend .h-4;
+  }
+}
+
+.sn-icon-button.info {
+  @extend .bg-info;
+  @extend .color-info-contrast;
+
+  &:hover,
+  &:focus {
+    @extend .color-info-contrast;
+    @extend .bg-info-dark;
+  }
+}
+
+.sn-full-screen {
+  @extend .h-100vh;
+  @extend .w-100vw;
+
+  @extend .absolute;
+  @extend .top-left-0;
+}
+
+.toast-progress-bar {
+  @extend .rounded;
+  @extend .w-full;
+  @extend .bg-default;
+  @extend .overflow-hidden;
+
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+
+  &__value {
+    @extend .rounded;
+    @extend .h-2;
+    @extend .bg-info;
+
+    border-top-left-radius: 0;
+    transition: width 0.1s;
+  }
+}
--- a/packages/styles/src/Styles/_table.scss
+++ b/packages/styles/src/Styles/_table.scss
@@ -0,0 +1,58 @@
+.sk-panel-table {
+  $border-width: 1px;
+
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: $border-width;
+  padding-top: $border-width;
+
+  .sk-panel-table-item {
+    flex: 45%;
+    flex-flow: wrap;
+    border: 1px solid var(--sn-stylekit-border-color);
+    padding: 0.8125rem;
+    margin-left: -$border-width;
+    margin-top: -$border-width;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    img {
+      max-width: 100%;
+      margin-bottom: 0.8125rem;
+    }
+
+    .sk-panel-table-item-content {
+      display: flex;
+      flex-direction: row;
+    }
+
+    .sk-panel-table-item-column {
+      align-items: center;
+
+      &.stretch {
+        width: 100%;
+      }
+
+      &:not(:first-child) {
+        padding-left: 0.609375rem;
+      }
+
+      &.quarter {
+        flex-basis: 25%;
+      }
+
+      &.three-quarters {
+        flex-basis: 75%;
+      }
+    }
+
+    .sk-panel-table-item-footer {
+      margin-top: 1.015625rem;
+    }
+
+    &.no-border {
+      border: none;
+    }
+  }
+}
--- a/packages/styles/src/Styles/_ui.scss
+++ b/packages/styles/src/Styles/_ui.scss
@@ -0,0 +1,782 @@
+.red {
+  color: var(--sn-stylekit-danger-color);
+}
+
+.tinted {
+  color: var(--sn-stylekit-info-color);
+}
+
+.selectable {
+  user-select: text !important;
+  -ms-user-select: text !important;
+  -moz-user-select: text !important;
+  -webkit-user-select: text !important;
+}
+
+.sk-h1,
+.sk-h2,
+.sk-h3,
+.sk-h4,
+.sk-h5 {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
+.sk-h1 {
+  font-weight: 500;
+  font-size: var(--sn-stylekit-font-size-h1);
+  line-height: 1.54375rem;
+}
+
+.sk-h2 {
+  font-size: var(--sn-stylekit-font-size-h2);
+  line-height: 1.4625rem;
+}
+
+.sk-h3 {
+  font-size: var(--sn-stylekit-font-size-h3);
+  line-height: 1.38125rem;
+}
+
+.sk-h4 {
+  font-size: var(--sn-stylekit-font-size-p);
+  line-height: 1.1375rem;
+}
+
+.sk-h5 {
+  font-size: var(--sn-stylekit-font-size-h5);
+}
+
+.sk-bold {
+  font-weight: bold;
+}
+
+.sk-font-small {
+  font-size: var(--sn-stylekit-font-size-h5);
+}
+
+.sk-font-normal {
+  font-size: var(--sn-stylekit-font-size-p);
+}
+
+.sk-font-large {
+  font-size: var(--sn-stylekit-font-size-h3);
+}
+
+a.sk-a {
+  cursor: pointer;
+  user-select: none;
+
+  &.disabled {
+    color: var(--sn-stylekit-neutral-color);
+    opacity: 0.6;
+  }
+
+  &.boxed {
+    border-radius: var(--sn-stylekit-general-border-radius);
+    padding: 0.24375rem 0.325rem;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &.neutral {
+      background-color: var(--sn-stylekit-neutral-color);
+      color: var(--sn-stylekit-neutral-contrast-color);
+    }
+
+    &.info {
+      background-color: var(--sn-stylekit-info-color);
+      color: var(--sn-stylekit-info-contrast-color);
+    }
+
+    &.warning {
+      background-color: var(--sn-stylekit-warning-color);
+      color: var(--sn-stylekit-warning-contrast-color);
+    }
+
+    &.danger {
+      background-color: var(--sn-stylekit-danger-color);
+      color: var(--sn-stylekit-danger-contrast-color);
+    }
+
+    &.success {
+      background-color: var(--sn-stylekit-success-color);
+      color: var(--sn-stylekit-success-contrast-color);
+    }
+  }
+}
+
+.wrap {
+  word-wrap: break-word;
+}
+
+* {
+  &.sk-base {
+    color: var(--sn-stylekit-foreground-color);
+  }
+
+  &.contrast {
+    color: var(--sn-stylekit-contrast-foreground-color);
+  }
+
+  &.neutral {
+    color: var(--sn-stylekit-neutral-color);
+  }
+
+  &.info {
+    color: var(--sn-stylekit-info-color);
+  }
+
+  &.info-contrast {
+    color: var(--sn-stylekit-info-contrast-color);
+  }
+
+  &.warning {
+    color: var(--sn-stylekit-warning-color);
+  }
+
+  &.danger {
+    color: var(--sn-stylekit-danger-color);
+  }
+
+  &.success {
+    color: var(--sn-stylekit-success-color);
+  }
+
+  &.info-i {
+    color: var(--sn-stylekit-info-color) !important;
+  }
+
+  &.warning-i {
+    color: var(--sn-stylekit-warning-color) !important;
+  }
+
+  &.danger-i {
+    color: var(--sn-stylekit-danger-color) !important;
+  }
+
+  &.success-i {
+    color: var(--sn-stylekit-success-color) !important;
+  }
+
+  &.clear {
+    background-color: transparent;
+    border: none;
+  }
+}
+
+.center-text {
+  text-align: center !important;
+  justify-content: center !important;
+}
+
+p.sk-p {
+  margin: 0.40625rem 0;
+}
+
+input.sk-input {
+  box-sizing: border-box;
+  padding: 0.56875rem 0.65rem;
+  margin: 0.24375rem 0;
+  border: none;
+
+  font-size: var(--sn-stylekit-font-size-h3);
+  width: 100%;
+  outline: 0;
+  resize: none;
+
+  &.clear {
+    // usually sk-inputs should have ui-rect classes like info, warning, etc. If clear, no text color will be assigned unless we do it explicitely.
+    color: var(--sn-stylekit-foreground-color);
+    background-color: transparent;
+    border: none;
+  }
+
+  &.no-border {
+    border: none;
+  }
+}
+
+.sk-label {
+  font-weight: bold;
+
+  &.no-bold {
+    font-weight: normal;
+  }
+}
+
+label.sk-label {
+  margin: 0.56875rem 0;
+  display: block;
+}
+
+label.sk-label input[type='checkbox'],
+input[type='radio'] {
+  width: auto;
+  margin-right: 0.365625rem; /* Space after checkbox */
+  vertical-align: middle;
+}
+
+.sk-horizontal-group {
+  > * {
+    display: inline-block;
+    vertical-align: middle;
+
+    &:not(:first-child) {
+      margin-left: 0.73125rem;
+    }
+  }
+}
+
+.sk-border-bottom {
+  border-bottom: 1px solid var(--sn-stylekit-border-color);
+}
+
+.sk-input-group {
+  @extend .sk-horizontal-group;
+}
+
+.sk-checkbox-group {
+  padding-top: 0.40625rem;
+  padding-bottom: 0.24375rem;
+}
+
+::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: var(--sn-stylekit-input-placeholder-color);
+}
+
+:-ms-input-placeholder {
+  /* Internet Explorer 10-11 */
+  color: var(--sn-stylekit-input-placeholder-color);
+}
+
+::-ms-input-placeholder {
+  /* Microsoft Edge */
+  color: var(--sn-stylekit-input-placeholder-color);
+}
+
+.sk-button-group {
+  &.stretch {
+    display: flex;
+    width: 100%;
+    .sk-button {
+      display: block;
+      flex-grow: 1;
+      text-align: center;
+    }
+  }
+  .sk-button {
+    display: inline-block;
+    vertical-align: middle;
+    // margin-bottom: 5px;
+    &:not(:last-child) {
+      margin-right: 5px;
+      &.featured {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+.sk-segmented-buttons {
+  display: flex;
+  flex-direction: row;
+
+  .sk-button {
+    border-radius: 0;
+    white-space: nowrap;
+    margin: 0;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+
+    &:not(:last-child) {
+      border-right: none;
+      border-radius: 0;
+    }
+
+    &:first-child {
+      border-top-left-radius: var(--sn-stylekit-general-border-radius);
+      border-bottom-left-radius: var(--sn-stylekit-general-border-radius);
+      border-right: none;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--sn-stylekit-general-border-radius);
+      border-bottom-right-radius: var(--sn-stylekit-general-border-radius);
+      border-left: none;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}
+
+.sk-box-group {
+  .sk-box {
+    display: inline-block;
+    // margin-bottom: 5px;
+    &:not(:last-child) {
+      margin-right: 5px;
+    }
+  }
+}
+
+.sk-a.button {
+  text-decoration: none;
+}
+
+.sk-button {
+  display: table;
+  padding: 0.40625rem 0.56875rem;
+  font-size: var(--sn-stylekit-font-size-h5);
+  cursor: pointer;
+  text-align: center;
+  user-select: none;
+
+  &:after {
+    // uncomment to disable hover borders on buttons
+    // color: transparent !important; // no borders for buttons, looks nicer
+  }
+
+  &.no-hover-border {
+    &:after {
+      color: transparent !important;
+    }
+  }
+
+  &.wide {
+    padding: 0.24375rem 1.38125rem;
+  }
+
+  > .sk-label {
+    font-weight: bold;
+    display: block;
+    text-align: center;
+  }
+
+  &.big {
+    font-size: var(--sn-stylekit-font-size-h3);
+    padding: 0.56875rem 2.03125rem;
+  }
+}
+
+.sk-box {
+  @extend .sk-button;
+  padding: 2.03125rem 1.21875rem;
+}
+
+@mixin ui-rect($color, $contrast-color, $hoverable, $border-color: '') {
+  /*
+    If $border-color is supplied, we use traditional borders for rect.
+    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.
+    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders
+  */
+  color: $contrast-color;
+  position: relative;
+  background-color: $color;
+  overflow: hidden;
+  border-radius: var(--sn-stylekit-general-border-radius);
+  /*
+    We use box-shadow instead of border so that the borders are rounded properly around the rect.
+    We keep border-color as well incase the individual elements want a border in some cases.
+  */
+  @if $border-color != '' {
+    // box-shadow: inset 0 0 0 1px $border-color;
+    border-color: $border-color;
+    border: 1px solid $border-color;
+  } @else {
+    // box-shadow: inset 0 0 0 1px $color;
+    border-color: $color;
+  }
+
+  // Make background separately layer so we can set its color using CSS vars
+  // (as opposed to CSS vars in SASS functions, which is impossible).
+
+  * {
+    // required to correctly position other layers on top of background layer.
+    position: relative;
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $color;
+    opacity: 1;
+    border-radius: var(--sn-stylekit-general-border-radius);
+  }
+
+  // Border shadow. Needs to be separate element so that the before element on hover brightness filter doesn't affect border,
+  // and gives contrasting effect
+  &:after {
+    content: '';
+    display: block;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    border-radius: var(--sn-stylekit-general-border-radius);
+    pointer-events: none; // otherwise this rect would block clickable elements
+    // color here refers to shadow color
+    @if $border-color != '' {
+      color: $border-color;
+      border-color: $border-color;
+    } @else {
+      box-shadow: inset 0 0 0 1px;
+      color: $color;
+    }
+  }
+
+  @if $hoverable == true {
+    &:hover {
+      &:before {
+        filter: brightness(130%);
+      }
+    }
+  }
+
+  &.no-bg {
+    background-color: transparent;
+    &:before {
+      content: none;
+    }
+  }
+
+  &.featured {
+    border: none;
+    padding: 0.609375rem 1.015625rem;
+    font-size: var(--sn-stylekit-font-size-h3);
+
+    &:before {
+      opacity: 1;
+    }
+  }
+}
+
+.sk-button.sk-base,
+.sk-box.sk-base,
+.sk-circle.sk-base {
+  @include ui-rect(var(--sn-stylekit-background-color), var(--sn-stylekit-foreground-color), true);
+}
+
+.sk-button.contrast,
+.sk-box.contrast,
+.sk-circle.contrast {
+  @include ui-rect(var(--sn-stylekit-contrast-background-color), var(--sn-stylekit-contrast-foreground-color), true);
+}
+
+.sk-button.sk-secondary,
+.sk-box.sk-secondary,
+.sk-circle.sk-secondary {
+  @include ui-rect(var(--sn-stylekit-secondary-background-color), var(--sn-stylekit-secondary-foreground-color), true);
+}
+
+.sk-button.sk-secondary-contrast,
+.sk-box.sk-secondary-contrast,
+.sk-circle.sk-secondary-contrast {
+  @include ui-rect(
+    var(--sn-stylekit-secondary-contrast-background-color),
+    var(--sn-stylekit-secondary-contrast-foreground-color),
+    true
+  );
+}
+
+.sk-button.neutral,
+.sk-box.neutral,
+.sk-circle.neutral {
+  @include ui-rect(var(--sn-stylekit-neutral-color), var(--sn-stylekit-neutral-contrast-color), true);
+}
+
+.sk-button.info,
+.sk-box.info,
+.sk-circle.info {
+  @include ui-rect(var(--sn-stylekit-info-color), var(--sn-stylekit-info-contrast-color), true);
+}
+
+.sk-button.warning,
+.sk-box.warning,
+.sk-circle.warning {
+  @include ui-rect(var(--sn-stylekit-warning-color), var(--sn-stylekit-warning-contrast-color), true);
+}
+
+.sk-button.danger,
+.sk-box.danger,
+.sk-circle.danger {
+  @include ui-rect(var(--sn-stylekit-danger-color), var(--sn-stylekit-danger-contrast-color), true);
+}
+
+.sk-button.success,
+.sk-box.success,
+.sk-circle.success {
+  @include ui-rect(var(--sn-stylekit-success-color), var(--sn-stylekit-success-contrast-color), true);
+}
+
+.sk-notification.contrast,
+.sk-input.contrast {
+  @include ui-rect(
+    var(--sn-stylekit-contrast-background-color),
+    var(--sn-stylekit-contrast-foreground-color),
+    false,
+    var(--sn-stylekit-contrast-border-color)
+  );
+}
+
+.sk-notification.sk-secondary,
+.sk-input.sk-secondary {
+  @include ui-rect(
+    var(--sn-stylekit-secondary-background-color),
+    var(--sn-stylekit-secondary-foreground-color),
+    false,
+    var(--sn-stylekit-secondary-border-color)
+  );
+}
+
+.sk-notification.sk-secondary-contrast,
+.sk-input.sk-secondary-contrast {
+  @include ui-rect(
+    var(--sn-stylekit-secondary-contrast-background-color),
+    var(--sn-stylekit-secondary-contrast-foreground-color),
+    false,
+    var(--sn-stylekit-secondary-contrast-border-color)
+  );
+}
+
+.sk-notification.sk-base,
+.sk-input.sk-base {
+  @include ui-rect(
+    var(--sn-stylekit-background-color),
+    var(--sn-stylekit-foreground-color),
+    false,
+    var(--sn-stylekit-border-color)
+  );
+}
+
+.sk-notification.neutral,
+.sk-input.neutral {
+  @include ui-rect(var(--sn-stylekit-neutral-color), var(--sn-stylekit-neutral-contrast-color), false);
+}
+
+.sk-notification.info,
+.sk-input.info {
+  @include ui-rect(var(--sn-stylekit-info-color), var(--sn-stylekit-info-contrast-color), false);
+}
+
+.sk-notification.warning,
+.sk-input.warning {
+  @include ui-rect(var(--sn-stylekit-warning-color), var(--sn-stylekit-warning-contrast-color), false);
+}
+
+.sk-notification.danger,
+.sk-input.danger {
+  @include ui-rect(var(--sn-stylekit-danger-color), var(--sn-stylekit-danger-contrast-color), false);
+}
+
+.sk-notification.success,
+.sk-input.success {
+  @include ui-rect(var(--sn-stylekit-success-color), var(--sn-stylekit-success-contrast-color), false);
+}
+
+.sk-notification {
+  padding: 0.89375rem 0.8125rem;
+  margin: 1.1375rem 0;
+  text-align: left;
+  cursor: default;
+
+  &.one-line {
+    padding: 0rem 0.325rem;
+  }
+
+  &.stretch {
+    width: 100%;
+  }
+
+  &.dashed {
+    border-style: dashed;
+    border-width: 2px;
+
+    // represents border element
+    &:after {
+      box-shadow: none;
+    }
+  }
+
+  .sk-notification-title {
+    font-size: var(--sn-stylekit-font-size-h1);
+    font-weight: bold;
+    line-height: 1.54375rem;
+  }
+
+  .sk-notification-text {
+    line-height: 1.21875rem;
+    font-size: var(--sn-stylekit-font-size-p);
+    text-align: left;
+    font-weight: normal;
+  }
+}
+
+.sk-circle {
+  border: 1px solid;
+  cursor: pointer;
+
+  border-color: var(--sn-stylekit-contrast-foreground-color);
+  background-color: var(--sn-stylekit-contrast-background-color);
+
+  padding: 0;
+  border-radius: 50% !important;
+  flex-shrink: 0;
+
+  &:before {
+    border-radius: 50% !important;
+  }
+
+  &:after {
+    border-radius: 50% !important;
+  }
+
+  &.small {
+    width: 11px;
+    height: 11px;
+  }
+}
+
+.sk-spinner {
+  border: 1px solid var(--sn-stylekit-neutral-color);
+  border-radius: 50%;
+  animation: rotate 0.8s infinite linear;
+  border-right-color: transparent;
+
+  &.small {
+    width: 12px;
+    height: 12px;
+  }
+
+  &.info-contrast {
+    border-color: var(--sn-stylekit-info-contrast-color);
+    border-right-color: transparent;
+  }
+
+  &.info {
+    border-color: var(--sn-stylekit-info-color);
+    border-right-color: transparent;
+  }
+
+  &.warning {
+    border-color: var(--sn-stylekit-warning-color);
+    border-right-color: transparent;
+  }
+
+  &.danger {
+    border-color: var(--sn-stylekit-danger-color);
+    border-right-color: transparent;
+  }
+
+  &.success {
+    border-color: var(--sn-stylekit-success-color);
+    border-right-color: transparent;
+  }
+}
+
+.spinner-info {
+  border-color: var(--sn-stylekit-info-color);
+  border-right-color: transparent;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+svg.sk-circular-progress {
+  $pi: 3.14159265358979;
+
+  $circle-size: 18px;
+  $stroke-width: $circle-size * (0.1 / 100) * 100 + 1;
+  $radius: ($circle-size - $stroke-width) / 2;
+  $circumference: ($radius * $pi * 2);
+
+  height: $circle-size;
+  width: $circle-size;
+
+  circle.background {
+    cx: $circle-size / 2;
+    cy: $circle-size / 2;
+    r: $radius;
+    fill: none;
+    stroke: var(--sn-stylekit-contrast-border-color);
+    stroke-width: $stroke-width;
+  }
+
+  circle.progress {
+    cx: $circle-size / 2;
+    cy: $circle-size / 2;
+    r: $radius;
+    fill: none;
+    stroke: var(--sn-stylekit-info-color);
+    stroke-linecap: round;
+    stroke-width: $stroke-width;
+    transition: all 0.5s;
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+
+    @mixin set-progress($progress) {
+      $dash: ($progress * $circumference) / 100;
+      stroke-dasharray: $dash $circumference - $dash;
+    }
+
+    &.p-0 {
+      @include set-progress(0);
+    }
+
+    &.p-10 {
+      @include set-progress(10);
+    }
+
+    &.p-20 {
+      @include set-progress(20);
+    }
+
+    &.p-30 {
+      @include set-progress(30);
+    }
+
+    &.p-40 {
+      @include set-progress(40);
+    }
+
+    &.p-50 {
+      @include set-progress(50);
+    }
+
+    &.p-60 {
+      @include set-progress(60);
+    }
+
+    &.p-70 {
+      @include set-progress(70);
+    }
+
+    &.p-80 {
+      @include set-progress(80);
+    }
+
+    &.p-90 {
+      @include set-progress(90);
+    }
+
+    &.p-100 {
+      @include set-progress(100);
+    }
+  }
+}
--- a/packages/styles/src/Styles/_utils.scss
+++ b/packages/styles/src/Styles/_utils.scss
@@ -0,0 +1,13 @@
+@import 'utils/animation';
+@import 'utils/border';
+@import 'utils/color';
+@import 'utils/display';
+@import 'utils/hover_focus';
+@import 'utils/typography';
+@import 'utils/height';
+@import 'utils/margin';
+@import 'utils/padding';
+@import 'utils/width';
+@import 'utils/transition';
+@import 'utils/cursor';
+@import 'utils/position';
--- a/packages/styles/src/Styles/main.scss
+++ b/packages/styles/src/Styles/main.scss
@@ -0,0 +1,124 @@
+@import 'normalize';
+
+:root {
+  --sn-stylekit-base-font-size: 0.8125rem;
+
+  --sn-stylekit-font-size-p: 0.8125rem;
+  --sn-stylekit-font-size-editor: 0.983125rem;
+
+  --sn-stylekit-font-size-h6: 0.65rem;
+  --sn-stylekit-font-size-h5: 0.73125rem;
+  --sn-stylekit-font-size-h4: 0.8125rem;
+  --sn-stylekit-font-size-h3: 0.89375rem;
+  --sn-stylekit-font-size-h2: 0.975rem;
+  --sn-stylekit-font-size-h1: 1.05625rem;
+
+  --sn-stylekit-neutral-color: #989898;
+  --sn-stylekit-neutral-contrast-color: #ffffff;
+
+  --sn-stylekit-info-color: #086DD6;
+  --sn-stylekit-info-color-darkened: #065cb5;
+  --sn-stylekit-info-contrast-color: #ffffff;
+  --sn-stylekit-info-backdrop-color: #2b6fcf0f;
+
+  --sn-stylekit-success-color: #007662;
+  --sn-stylekit-success-contrast-color: #ffffff;
+
+  --sn-stylekit-warning-color: #EBAD00;
+  --sn-stylekit-warning-contrast-color: #ffffff;
+
+  --sn-stylekit-danger-color: #cc2128;
+  --sn-stylekit-danger-contrast-color: #ffffff;
+
+  --sn-stylekit-shadow-color: #c8c8c8;
+  --sn-stylekit-background-color: #ffffff;
+  // For borders inside background-color
+  --sn-stylekit-border-color: #dfe1e4;
+  --sn-stylekit-foreground-color: #000000;
+  // Colors for layers placed on top of non-prefixed background, border, and foreground
+  --sn-stylekit-contrast-background-color: #f6f6f6;
+  --sn-stylekit-contrast-foreground-color: #2e2e2e;
+  --sn-stylekit-contrast-border-color: #e3e3e3; // For borders inside contrast-background-color
+
+  // Alternative set of background and contrast options
+  --sn-stylekit-secondary-background-color: #f6f6f6;
+  --sn-stylekit-secondary-foreground-color: #2e2e2e;
+  --sn-stylekit-secondary-border-color: #e3e3e3;
+
+  --sn-stylekit-secondary-contrast-background-color: #e3e3e3;
+  --sn-stylekit-secondary-contrast-foreground-color: #2e2e2e;
+  --sn-stylekit-secondary-contrast-border-color: #a2a2a2;
+
+  --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);
+  --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);
+
+  --sn-stylekit-paragraph-text-color: #454545;
+
+  --sn-stylekit-input-placeholder-color: #a8a8a8;
+  --sn-stylekit-input-border-color: #e3e3e3;
+
+  --sn-stylekit-scrollbar-thumb-color: #dfdfdf;
+  --sn-stylekit-scrollbar-track-border-color: #e7e7e7;
+
+  --sn-stylekit-menu-border: none;
+
+  --sn-stylekit-general-border-radius: 2px;
+
+  --sn-stylekit-simplified-chinese-font: 'Microsoft Yahei', '微软雅黑体';
+  --sn-stylekit-monospace-font: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Ubuntu Mono', 'Courier New',
+    monospace;
+  --sn-stylekit-sans-serif-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', var(--sn-stylekit-simplified-chinese-font), sans-serif;
+  --sn-stylekit-editor-font-family: var(--sn-stylekit-sans-serif-font);
+
+  --sn-stylekit-theme-type: light;
+  --sn-stylekit-theme-name: sn-light;
+
+  --sn-stylekit-passive-color-0: #515357;
+  --sn-stylekit-passive-color-1: #72767e;
+  --sn-stylekit-passive-color-2: #bbbec4;
+  --sn-stylekit-passive-color-3: #dfe1e4;
+  --sn-stylekit-passive-color-4: #eeeff1;
+  --sn-stylekit-passive-color-4-opacity-variant: #bbbec43d;
+  --sn-stylekit-passive-color-5: #f4f5f7;
+  --sn-stylekit-passive-color-6: #e5e5e5;
+  --sn-stylekit-passive-color-super-light: #f9f9f9;
+
+  --sn-stylekit-accessory-tint-color-1: #086dd6;
+  --sn-stylekit-accessory-tint-color-2: #ea6595;
+  --sn-stylekit-accessory-tint-color-3: #ebad00;
+  --sn-stylekit-accessory-tint-color-4: #7049cf;
+  --sn-stylekit-accessory-tint-color-5: #1aa772;
+  --sn-stylekit-accessory-tint-color-6: #f28c52;
+}
+
+.sn-component {
+  @import 'panels';
+  @import 'menu-panel';
+  @import 'ui';
+  @import 'app-bar';
+  @import 'table';
+  @import 'modal';
+  @import 'utils';
+  @import 'sn';
+  @import 'reach-overrides';
+
+  font-family: var(--sn-stylekit-sans-serif-font);
+  -webkit-font-smoothing: antialiased;
+
+  &.no-select,
+  .select-none {
+    user-select: none;
+  }
+
+  color: var(--sn-stylekit-foreground-color);
+}
+
+/* Goes outside of .sn-component declaration, as following properties are global */
+input,
+textarea,
+[contenteditable] {
+  caret-color: var(--sn-stylekit-editor-foreground-color);
+}
+
+@import 'scrollbar';
--- a/packages/styles/src/Styles/utils/_animation.scss
+++ b/packages/styles/src/Styles/utils/_animation.scss
@@ -0,0 +1,74 @@
+@keyframes slide-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slide-down-animation {
+  animation: slide-down 0.2s ease;
+}
+
+@keyframes slide-in-right {
+  0% {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.slide-in-right-animation {
+  animation: slide-in-right 0.2s ease;
+}
+
+@keyframes slide-out-left {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+}
+
+.slide-out-left-animation {
+  animation: slide-out-left 0.2s ease;
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.fade-out-animation {
+  animation: fade-out 0.2s ease;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.fade-in-animation {
+  animation: fade-in 0.2s ease;
+}
+
+.animation-fill-forwards {
+  animation-fill-mode: forwards;
+}
--- a/packages/styles/src/Styles/utils/_border.scss
+++ b/packages/styles/src/Styles/utils/_border.scss
@@ -0,0 +1,79 @@
+.no-border {
+  border: none;
+}
+
+.border-0 {
+  border-width: 0px;
+}
+
+.border-1 {
+  border-width: 1px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-b-1 {
+  border-bottom-width: 1px;
+}
+
+.border-main {
+  border-color: var(--sn-stylekit-border-color);
+}
+
+.border-background {
+  border-color: var(--sn-stylekit-background-color);
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
+.border-info {
+  border-color: var(--sn-stylekit-info-color);
+}
+
+.border-neutral {
+  border-color: var(--sn-stylekit-neutral-color);
+}
+
+.border-rounded-md {
+  border-radius: 0.375rem;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.border-solid {
+  border-style: solid;
+}
+
+.border-bottom-solid {
+  border-bottom-style: solid;
+}
+
+.border-box {
+  box-sizing: border-box;
+}
+
+.ring-info {
+  box-shadow: 0 0 0 2px var(--sn-stylekit-info-color);
+}
+
+.inner-ring-info {
+  box-shadow: inset 0 0 0 2px var(--sn-stylekit-info-color);
+}
+
+.shadow-overlay {
+  box-shadow: 0px 4px 24px 0px #00000029;
+}
+
+.border-bottom-1-gray {
+  border-bottom-color: var(--sn-stylekit-border-color);
+}
--- a/packages/styles/src/Styles/utils/_color.scss
+++ b/packages/styles/src/Styles/utils/_color.scss
@@ -0,0 +1,70 @@
+.bg-default {
+  background-color: var(--sn-stylekit-background-color);
+}
+
+.bg-contrast {
+  background-color: var(--sn-stylekit-contrast-background-color);
+}
+
+.bg-border {
+  background-color: var(--sn-stylekit-border-color);
+}
+
+.bg-secondary-contrast {
+  background-color: var(--sn-stylekit-secondary-contrast-background-color);
+}
+
+.bg-clip-padding {
+  background-clip: padding-box;
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+@mixin define-color($name, $source: null) {
+  .bg-#{$name} {
+    background-color: var(--sn-stylekit-#{if($source, $source, $name)});
+  }
+
+  .color-#{$name} {
+    color: var(--sn-stylekit-#{if($source, $source, $name)});
+  }
+}
+
+@include define-color('neutral', 'neutral-color');
+@include define-color('text', 'contrast-foreground-color');
+@include define-color('foreground', 'foreground-color');
+@include define-color('danger', 'danger-color');
+@include define-color('info', 'info-color');
+@include define-color('info-contrast', 'info-contrast-color');
+@include define-color('info-dark', 'info-color-darkened');
+@include define-color('success', 'success-color');
+
+@include define-color('passive-0', 'passive-color-0');
+@include define-color('passive-1', 'passive-color-1');
+@include define-color('passive-2', 'passive-color-2');
+@include define-color('passive-3', 'passive-color-3');
+@include define-color('passive-4', 'passive-color-4');
+@include define-color('passive-4-opacity-variant', 'passive-color-4-opacity-variant');
+@include define-color('passive-5', 'passive-color-5');
+@include define-color('passive-6', 'passive-color-6');
+@include define-color('passive-super-light', 'passive-color-super-light');
+
+@for $i from 1 to 7 {
+  @include define-color('accessory-tint-#{$i}', 'accessory-tint-color-#{$i}');
+}
+
+.selected\:bg-color[data-selected],
+.selected\:bg-color[aria-selected='true'] {
+  background-color: var(--sn-stylekit-passive-color-5);
+}
+
+.selected\:fg-color[data-selected],
+.selected\:fg-color[aria-selected='true'] {
+  color: var(--sn-stylekit-contrast-foreground-color);
+}
+
+.fill-current {
+  fill: currentColor;
+}
--- a/packages/styles/src/Styles/utils/_cursor.scss
+++ b/packages/styles/src/Styles/utils/_cursor.scss
@@ -0,0 +1,3 @@
+.cursor-pointer {
+  cursor: pointer;
+}
--- a/packages/styles/src/Styles/utils/_display.scss
+++ b/packages/styles/src/Styles/utils/_display.scss
@@ -0,0 +1,118 @@
+.inline-flex {
+  display: inline-flex;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.flex-shrink {
+  flex-shrink: 1;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+}
+
+.items-center {
+  align-items: center;
+}
+.items-start {
+  align-items: flex-start;
+}
+.items-end {
+  align-items: flex-end;
+}
+.items-stretch {
+  align-items: stretch;
+}
+
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.justify-start {
+  justify-content: flex-start;
+}
+.justify-end {
+  justify-content: flex-end;
+}
+
+.gap-1 {
+  grid-gap: 0.25rem;
+  gap: 0.25rem;
+}
+.gap-2 {
+  grid-gap: 0.5rem;
+  gap: 0.5rem;
+}
+.gap-3 {
+  grid-gap: 0.75rem;
+  gap: 0.75rem;
+}
+.gap-4 {
+  grid-gap: 1rem;
+  gap: 1rem;
+}
+
+.absolute {
+  position: absolute;
+}
+.fixed {
+  position: fixed;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.origin-top-right {
+  transform-origin: top right;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+.overflow-y-auto {
+  overflow-y: auto;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.flex-basis-55 {
+  flex-basis: 13.75rem;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
--- a/packages/styles/src/Styles/utils/_height.scss
+++ b/packages/styles/src/Styles/utils/_height.scss
@@ -0,0 +1,84 @@
+.h-auto {
+  height: auto;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-100vh {
+  height: 100vh;
+}
+
+.h-90vh {
+  height: 90vh;
+}
+
+.h-0 {
+  height: 0;
+}
+.h-2 {
+  height: 0.5rem;
+}
+.h-3\.5 {
+  height: 0.875rem;
+}
+.h-4 {
+  height: 1rem;
+}
+.h-4\.5 {
+  height: 1.125rem;
+}
+.h-5 {
+  height: 1.25rem;
+}
+.h-6 {
+  height: 1.5rem;
+}
+.h-7 {
+  height: 1.75rem;
+}
+.h-8 {
+  height: 2rem;
+}
+.h-9 {
+  height: 2.25rem;
+}
+.h-10 {
+  height: 2.5rem;
+}
+.h-14 {
+  height: 3.5rem;
+}
+.h-18 {
+  height: 4.5rem;
+}
+.h-25 {
+  height: 6.25rem;
+}
+
+.h-1px {
+  height: 1px;
+}
+.h-20px {
+  height: 20px;
+}
+
+.min-h-0 {
+  min-height: 0;
+}
+
+.min-h-5 {
+  min-height: 1.25rem;
+}
+.m-h-32 {
+  min-height: 2rem;
+}
+
+.min-h-20px {
+  height: 20px;
+}
+
+.max-h-120 {
+  max-height: 30rem;
+}
--- a/packages/styles/src/Styles/utils/_hover_focus.scss
+++ b/packages/styles/src/Styles/utils/_hover_focus.scss
@@ -0,0 +1,101 @@
+.hover\:bg-passive-3:hover {
+  background-color: var(--sn-stylekit-passive-color-3);
+}
+
+.hover\:brightness-130:hover {
+  filter: brightness(130%);
+}
+
+.focus\:brightness-130:focus {
+  filter: brightness(130%);
+}
+
+.hover\:bg-highlight:hover {
+  background-color: var(--sn-stylekit-passive-color-5);
+}
+
+.focus\:bg-highlight:focus {
+  background-color: var(--sn-stylekit-passive-color-5);
+}
+
+.hover\:bg-contrast:hover {
+  @extend .bg-contrast;
+}
+
+.hover\:bg-info-dark:hover {
+  @extend .bg-info-dark;
+}
+.focus\:bg-info-dark:focus {
+  @extend .bg-info-dark;
+}
+
+.focus\:padded-ring-info:focus {
+  box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color);
+}
+
+.focus\:border-bottom:focus {
+  border-bottom: 2px solid var(--sn-stylekit-info-color);
+}
+
+.focus-within\:padded-ring-info:focus-within {
+  box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color);
+}
+
+.focus-within\:border-background:focus-within {
+  border-color: var(--sn-stylekit-background-color);
+}
+
+.box-shadow,
+.box-shadow:focus,
+.box-shadow:focus-within {
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12), 0px 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.focus\:bg-contrast:focus {
+  @extend .bg-contrast;
+}
+
+.hover\:color-text:hover {
+  @extend .color-text;
+}
+
+.focus\:color-text:focus {
+  @extend .color-text;
+}
+
+.hover\:bg-secondary-contrast:hover {
+  @extend .bg-secondary-contrast;
+}
+
+.focus\:bg-secondary-contrast:focus {
+  @extend .bg-secondary-contrast;
+}
+
+.focus\:inner-ring-info:focus {
+  @extend .inner-ring-info;
+}
+
+.focus\:ring-info:focus {
+  @extend .ring-info;
+}
+
+.focus-within\:ring-info:focus-within {
+  @extend .ring-info;
+}
+
+/**
+ * Do not use these rules without explicitly handling focus in a different
+ * way, otherwise keyboard focus will break.
+ */
+.focus\:outline-none:focus {
+  outline: none;
+}
+.focus\:shadow-none:focus {
+  box-shadow: none;
+}
+.focus-within\:outline-none:focus-within {
+  outline: none;
+}
+.focus-within\:shadow-none:focus-within {
+  box-shadow: none;
+}
--- a/packages/styles/src/Styles/utils/_margin.scss
+++ b/packages/styles/src/Styles/utils/_margin.scss
@@ -0,0 +1,86 @@
+.m-0 {
+  margin: 0;
+}
+
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.-mt-1 {
+  margin-top: -0.25rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.-mr-2 {
+  margin-right: -0.5rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mr-1\.5 {
+  margin-right: 0.375rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-10 {
+  margin-right: 2.5rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.ml-1\.5 {
+  margin-left: 0.375rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.ml-6 {
+  margin-left: 1.5rem;
+}
--- a/packages/styles/src/Styles/utils/_padding.scss
+++ b/packages/styles/src/Styles/utils/_padding.scss
@@ -0,0 +1,103 @@
+.p-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.py-1\.75 {
+  padding-top: 0.4375rem;
+  padding-bottom: 0.4375rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-3\.5 {
+  padding-left: 0.875rem;
+  padding-right: 0.875rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
+.pl-3 {
+  padding-left: 0.75rem;
+}
--- a/packages/styles/src/Styles/utils/_position.scss
+++ b/packages/styles/src/Styles/utils/_position.scss
@@ -0,0 +1,40 @@
+.top-0 {
+  top: 0;
+}
+
+.left-0 {
+  left: 0;
+}
+
+.bottom-0 {
+  bottom: 0;
+}
+
+.bottom-6 {
+  bottom: 1.5rem;
+}
+
+.right-0 {
+  right: 0;
+}
+
+.right-6 {
+  right: 1.5rem;
+}
+
+.top-left-0 {
+  @extend .top-0;
+  @extend .left-0;
+}
+
+.-top-10 {
+  top: -2.5rem;
+}
+
+.-left-51 {
+  left: -12.75rem;
+}
+
+.z-index-toast {
+  z-index: 11000;
+}
--- a/packages/styles/src/Styles/utils/_transition.scss
+++ b/packages/styles/src/Styles/utils/_transition.scss
@@ -0,0 +1,15 @@
+.duration-150 {
+  transition-duration: 150ms;
+}
+
+.ease-out {
+  transition-timing-function: ease-out;
+}
+
+.transition-background {
+  transition-property: background;
+}
+
+.transition-transform {
+  transition-property: transform;
+}
--- a/packages/styles/src/Styles/utils/_typography.scss
+++ b/packages/styles/src/Styles/utils/_typography.scss
@@ -0,0 +1,73 @@
+.capitalize {
+  text-transform: capitalize;
+}
+
+.font-normal {
+  font-weight: 300;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-input {
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+}
+
+.text-base {
+  font-size: 1rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.leading-4 {
+  line-height: 1rem;
+}
+
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
--- a/packages/styles/src/Styles/utils/_width.scss
+++ b/packages/styles/src/Styles/utils/_width.scss
@@ -0,0 +1,128 @@
+.w-auto {
+  width: auto;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-100vw {
+  width: 100vw;
+}
+
+.fit-content {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.w-0 {
+  width: 0;
+}
+.w-2 {
+  width: 0.5rem;
+}
+.w-3\.5 {
+  width: 0.875rem;
+}
+.w-4 {
+  width: 1rem;
+}
+.w-5 {
+  width: 1.25rem;
+}
+.w-8 {
+  width: 2rem;
+}
+.w-25 {
+  width: 6.25rem;
+}
+.w-30 {
+  width: 7.5rem;
+}
+.w-55 {
+  width: 13.75rem;
+}
+.w-56 {
+  width: 14rem;
+}
+.w-70 {
+  width: 17.5rem;
+}
+.w-80 {
+  width: 20rem;
+}
+.w-103 {
+  width: 25.75rem;
+}
+.w-125 {
+  width: 31.25rem;
+}
+.w-160 {
+  width: 40rem;
+}
+
+.w-20px {
+  width: 20px;
+}
+
+.min-w-265px {
+  min-width: 265px;
+}
+
+.min-w-20px {
+  min-width: 20px;
+}
+
+.min-w-0 {
+  min-width: 0;
+}
+.min-w-4 {
+  min-width: 1rem;
+}
+.min-w-5 {
+  min-width: 1.25rem;
+}
+.min-w-8 {
+  min-width: 2rem;
+}
+.min-w-20 {
+  min-width: 5rem;
+}
+.min-w-40 {
+  min-width: 10rem;
+}
+.min-w-42 {
+  min-width: 10.5rem;
+}
+.min-w-55 {
+  min-width: 13.75rem;
+}
+.min-w-80 {
+  min-width: 20rem;
+}
+.min-w-max {
+  min-width: max-content;
+}
+
+.max-w-xs {
+  max-width: 20rem;
+}
+.max-w-md {
+  max-width: 28rem;
+}
+
+.max-w-40 {
+  max-width: 10rem;
+}
+
+.max-w-80 {
+  max-width: 20rem;
+}
+
+.max-w-125 {
+  max-width: 31.25rem;
+}
+
+.max-w-290px {
+  max-width: 290px;
+}
--- a/packages/styles/src/index.ts
+++ b/packages/styles/src/index.ts
@@ -0,0 +1 @@
+export * from './Alert/Alert'
--- a/packages/styles/tsconfig.json
+++ b/packages/styles/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../node_modules/@standardnotes/config/src/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "src",
+    "outDir": "dist",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "module": "es2022"
+  },
+  "include": ["src"],
+  "exclude": ["dist", "node_modules"]
+}
--- a/packages/styles/webpack.config.js
+++ b/packages/styles/webpack.config.js
@@ -0,0 +1,49 @@
+const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+module.exports = (_, { mode }) => ({
+  entry: {
+    styles: path.resolve(__dirname, 'src/Styles/main.scss'),
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+  },
+  optimization: {
+    minimize: false,
+    splitChunks: {
+      cacheGroups: {
+        styles: {
+          name: 'styles',
+          type: 'css/mini-extract',
+          chunks: 'all',
+          enforce: true,
+        },
+      },
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(scss|css)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                outputStyle: 'expanded',
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'stylekit.css',
+    }),
+  ],
+})
--- a/packages/toast/.eslintrc.json
+++ b/packages/toast/.eslintrc.json
--- a/packages/web/jest.config.js
+++ b/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',
--- a/packages/web/package.json
+++ b/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",
--- a/packages/web/src/javascripts/Services/AlertService.ts
+++ b/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({
--- a/packages/web/src/stylesheets/index.css.scss
+++ b/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';