From 45785ad4012e48a133779bc2c03c7109c9ab913c Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 23 May 2022 20:21:45 +0530
Subject: [PATCH] refactor: organize utility classes into specific files
 (#1041)

---
 .../NoAccountWarning/NoAccountWarning.tsx     |   2 +-
 app/assets/stylesheets/_menus.scss            |   2 +-
 app/assets/stylesheets/_sn.scss               | 719 ------------------
 app/assets/stylesheets/_ui.scss               |  45 --
 app/assets/stylesheets/index.css.scss         |  11 +
 app/assets/stylesheets/utils/_border.scss     |  52 ++
 app/assets/stylesheets/utils/_color.scss      |  75 ++
 app/assets/stylesheets/utils/_height.scss     |  59 ++
 app/assets/stylesheets/utils/_leading.scss    |  11 +
 app/assets/stylesheets/utils/_margin.scss     | 100 +++
 app/assets/stylesheets/utils/_padding.scss    | 153 ++++
 app/assets/stylesheets/utils/_position.scss   | 139 ++++
 app/assets/stylesheets/utils/_width.scss      | 127 ++++
 13 files changed, 729 insertions(+), 766 deletions(-)
 create mode 100644 app/assets/stylesheets/utils/_border.scss
 create mode 100644 app/assets/stylesheets/utils/_color.scss
 create mode 100644 app/assets/stylesheets/utils/_height.scss
 create mode 100644 app/assets/stylesheets/utils/_leading.scss
 create mode 100644 app/assets/stylesheets/utils/_margin.scss
 create mode 100644 app/assets/stylesheets/utils/_padding.scss
 create mode 100644 app/assets/stylesheets/utils/_position.scss
 create mode 100644 app/assets/stylesheets/utils/_width.scss

diff --git a/app/assets/javascripts/Components/NoAccountWarning/NoAccountWarning.tsx b/app/assets/javascripts/Components/NoAccountWarning/NoAccountWarning.tsx
index 6b2527181..52b30c563 100644
--- a/app/assets/javascripts/Components/NoAccountWarning/NoAccountWarning.tsx
+++ b/app/assets/javascripts/Components/NoAccountWarning/NoAccountWarning.tsx
@@ -24,7 +24,7 @@ export const NoAccountWarning = observer(({ appState }: Props) => {
   }, [appState])
 
   return (
-    <div className="mt-5 p-4 rounded-md shadow-sm grid grid-template-cols-1fr">
+    <div className="mt-4 p-4 rounded-md shadow-sm grid grid-template-cols-1fr">
       <h1 className="sk-h3 m-0 font-semibold">Data not backed up</h1>
       <p className="m-0 mt-1 col-start-1 col-end-3">Sign in or register to back up your notes.</p>
       <button className="sn-button small info mt-3 col-start-1 col-end-3 justify-self-start" onClick={showAccountMenu}>
diff --git a/app/assets/stylesheets/_menus.scss b/app/assets/stylesheets/_menus.scss
index 5934765e1..0ad666b14 100644
--- a/app/assets/stylesheets/_menus.scss
+++ b/app/assets/stylesheets/_menus.scss
@@ -20,7 +20,7 @@
 .sn-account-menu,
 .sn-quick-settings-menu {
   z-index: $z-index-footer-bar-item-panel;
-  @extend .bottom-100;
+  @extend .bottom-100\%;
   @extend .left-0;
   @extend .cursor-auto;
 }
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 6e9fce5ff..93d6a3daa 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -1,29 +1,5 @@
 /* Components and utilities that are good candidates for extraction to StyleKit. */
 
-.bg-grey-super-light {
-  background-color: var(--sn-stylekit-grey-super-light);
-}
-
-.h-90vh {
-  height: 90vh;
-}
-
-.h-3 {
-  height: 0.75rem;
-}
-
-.h-26 {
-  width: 6.5rem;
-}
-
-.h-30 {
-  width: 7.5rem;
-}
-
-.h-33 {
-  height: 8.25rem;
-}
-
 .hidden {
   display: none;
 }
@@ -234,460 +210,6 @@
   @extend .font-bold;
 }
 
-.ml-0-important {
-  margin-left: 0rem !important;
-}
-
-.ml-0\.5 {
-  margin-left: 0.125rem;
-}
-
-.sn-component .ml-1\.5 {
-  margin-left: 0.375rem;
-}
-
-.ml-3 {
-  margin-left: 0.75rem;
-}
-
-.sn-component .mr-0 {
-  margin-right: 0;
-}
-
-.mr-2\.5 {
-  margin-right: 0.625rem;
-}
-
-.mr-3 {
-  margin-right: 0.75rem;
-}
-
-.mr-4 {
-  margin-right: 1rem;
-}
-
-.mr-12 {
-  margin-right: 3rem;
-}
-
-.mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-
-.my-0\.5 {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
-}
-
-.my-1\.5 {
-  margin-top: 0.375rem;
-  margin-bottom: 0.375rem;
-}
-
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
-.mt-0 {
-  margin-top: 0;
-}
-
-.mt-0\.5 {
-  margin-top: 0.125rem;
-}
-
-.mt-1\.5 {
-  margin-top: 0.375rem;
-}
-
-.mt-2\.5 {
-  margin-top: 0.625rem;
-}
-
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-
-.mb-3\.5 {
-  margin-bottom: 0.75rem;
-}
-
-.max-w-40\% {
-  max-width: 40%;
-}
-
-.max-w-1\/2 {
-  max-width: 50%;
-}
-
-.max-w-3\/4 {
-  max-width: 75%;
-}
-
-.max-w-80\% {
-  max-width: 80%;
-}
-
-.max-w-68 {
-  max-width: 17rem;
-}
-
-.max-w-72 {
-  max-width: 18rem;
-}
-
-.max-w-76 {
-  max-width: 19rem;
-}
-
-.max-w-89 {
-  max-width: 22.25rem;
-}
-
-.max-w-35ch {
-  max-width: 35ch;
-}
-
-.max-w-full {
-  max-width: 100%;
-}
-
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
-.mb-5 {
-  margin-bottom: 1.25rem;
-}
-.mb-8 {
-  margin-bottom: 2rem;
-}
-
-.w-3 {
-  width: 0.75rem;
-}
-
-.w-6 {
-  width: 1.5rem;
-}
-
-.w-18 {
-  width: 4.5rem;
-}
-
-.w-26 {
-  width: 6.5rem;
-}
-
-.w-30 {
-  width: 7.5rem;
-}
-
-.w-92 {
-  width: 23rem;
-}
-
-.w-200 {
-  width: 50rem;
-}
-
-.min-w-1 {
-  min-width: 0.25rem;
-}
-
-.min-w-2 {
-  min-width: 0.5rem;
-}
-
-.min-w-3 {
-  min-width: 0.75rem;
-}
-
-.min-w-5 {
-  min-width: 1.25rem;
-}
-
-.min-w-6 {
-  min-width: 1.5rem;
-}
-
-.min-w-7 {
-  min-width: 1.75rem;
-}
-
-.min-w-15 {
-  min-width: 3.75rem;
-}
-
-.min-w-70 {
-  min-width: 17.5rem;
-}
-
-.min-w-76 {
-  min-width: 19rem;
-}
-
-.min-w-24 {
-  min-width: 6rem;
-}
-
-.min-w-30 {
-  min-width: 7.5rem;
-}
-
-.min-w-60 {
-  min-width: 15rem;
-}
-
-.min-w-68 {
-  min-width: 17rem;
-}
-
-.min-w-90 {
-  min-width: 22.5rem;
-}
-
-.max-w-200 {
-  max-width: 50rem;
-}
-
-.min-h-1px {
-  min-height: 1px;
-}
-
-.min-h-1 {
-  min-height: 0.25rem;
-}
-
-.min-h-2 {
-  min-height: 0.5rem;
-}
-
-.min-h-3 {
-  min-height: 0.75rem;
-}
-
-.min-h-4 {
-  min-height: 1rem;
-}
-
-.min-h-6 {
-  min-height: 1.5rem;
-}
-
-.min-h-8 {
-  min-height: 2rem;
-}
-
-.min-h-16 {
-  min-height: 4rem;
-}
-
-.max-h-5 {
-  max-height: 1.25rem;
-}
-
-.max-h-110 {
-  max-height: 27.5rem;
-}
-
-.sn-component .border-danger {
-  border-color: var(--sn-stylekit-danger-color);
-}
-
-.border-neutral-contrast-bg {
-  border-color: var(--sn-stylekit-neutral-contrast-color);
-}
-
-.border-secondary {
-  border-color: var(--sn-stylekit-secondary-border-color);
-}
-
-.sn-component .border-r-1px {
-  border-right-width: 1px;
-}
-
-.sn-component .border-l-1px {
-  border-left-width: 1px;
-}
-
-.sn-component .border-t-1px {
-  border-top-width: 1px;
-}
-
-.sn-component .border-b-0 {
-  border-bottom-width: 0;
-}
-
-.border-2 {
-  border-width: 0.5rem;
-}
-
-.bg-inverted-default {
-  background-color: var(--sn-stylekit-contrast-foreground-color);
-}
-
-.color-inverted-default {
-  color: var(--sn-stylekit-background-color);
-}
-
-.p-1 {
-  padding: 0.25rem;
-}
-
-.p-1\.5 {
-  padding: 0.375rem;
-}
-
-.p-4 {
-  padding: 1rem;
-}
-
-.p-4\.5 {
-  padding: 1.125rem;
-}
-
-.p-6 {
-  padding: 1.5rem;
-}
-
-.p-8 {
-  padding: 2rem;
-}
-
-.p-12 {
-  padding: 3rem;
-}
-
-.sn-component .pt-0\.5 {
-  padding-top: 0.125rem;
-}
-
-.pt-1 {
-  padding-top: 0.25rem;
-}
-
-.pt-1\.5 {
-  padding-top: 0.375rem;
-}
-
-.pt-2 {
-  padding-top: 0.5rem;
-}
-
-.pt-3 {
-  padding-top: 0.75rem;
-}
-
-.pt-6 {
-  padding-top: 1.5rem;
-}
-
-.pb-0 {
-  padding-bottom: 0;
-}
-
-.sn-component .pb-1 {
-  padding-bottom: 0.25rem;
-}
-
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
-.pb-2\.5 {
-  padding-bottom: 0.625rem;
-}
-
-.p-4 {
-  padding: 1rem;
-}
-
-.sn-component .pr-4 {
-  padding-left: 1rem;
-}
-
-.sn-component .px-0 {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.px-1\.5 {
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
-}
-
-.px-2\.5 {
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-}
-
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.sn-component .px-4\.5,
-.sn-component .sk-panel .px-4\.5 {
-  padding-left: 1.375rem;
-  padding-right: 1.375rem;
-}
-
-.px-9 {
-  padding-left: 2.25rem;
-  padding-right: 2.25rem;
-}
-
-.px-12 {
-  padding-left: 3rem;
-  padding-right: 3rem;
-}
-
-.py-0\.5 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-}
-
-.sn-component .py-1\.35 {
-  padding-top: 0.3375rem;
-  padding-bottom: 0.3375rem;
-}
-
-.sn-component .py-2\.5 {
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
-}
-
-.py-3\.5 {
-  padding-top: 0.875rem;
-  padding-bottom: 0.875rem;
-}
-
-.py-9 {
-  padding-top: 2.25rem;
-  padding-bottom: 2.25rem;
-}
-
-.py-12 {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
-
-.pl-0 {
-  padding-left: 0;
-}
-
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
 .placeholder-dark-red::placeholder {
   @extend .color-dark-red;
 }
@@ -696,126 +218,6 @@
   font-weight: 500;
 }
 
-.sticky {
-  position: sticky;
-}
-
-.top-4 {
-  top: 1rem;
-}
-
-.top-30\% {
-  top: 30%;
-}
-
-.top-35\% {
-  top: 35%;
-}
-
-.top-40\% {
-  top: 40%;
-}
-
-.-top-0\.25 {
-  top: -0.0625rem;
-}
-
-.bottom-20\% {
-  bottom: 20%;
-}
-
-.bottom-25\% {
-  bottom: 25%;
-}
-
-.bottom-30\% {
-  bottom: 30%;
-}
-
-.bottom-35\% {
-  bottom: 35%;
-}
-
-.bottom-40\% {
-  bottom: 40%;
-}
-
-.left-2 {
-  left: 0.5rem;
-}
-
-.-left-10 {
-  left: -2.5rem;
-}
-
-.-left-28 {
-  left: -7rem;
-}
-
-.-left-16 {
-  left: -4rem;
-}
-
-.-left-40 {
-  left: -10rem;
-}
-
-.-left-56 {
-  left: -14rem;
-}
-
-.right-0 {
-  right: 0;
-}
-
-.right-2 {
-  right: 0.5rem;
-}
-
-.right-4 {
-  right: 1rem;
-}
-
-.-right-2 {
-  right: -0.5rem;
-}
-
-.-right-10 {
-  right: -2.5rem;
-}
-
-.-right-20 {
-  right: -5rem;
-}
-
-.-right-24 {
-  right: -6rem;
-}
-
-.-right-44 {
-  right: -11rem;
-}
-
-.-right-56 {
-  right: -14rem;
-}
-
-.-translate-x-1\/2 {
-  transform: translateX(-50%);
-}
-
-.-translate-y-1\/2 {
-  transform: translateY(-50%);
-}
-
-.translate-x-1\/2 {
-  transform: translateX(50%);
-}
-
-.-bottom-5 {
-  bottom: -1.25rem;
-}
-
 .z-index-1 {
   z-index: 1;
 }
@@ -832,10 +234,6 @@
   cursor: not-allowed;
 }
 
-.hover\:bg-grey-4:hover {
-  background: var(--sn-stylekit-grey-4);
-}
-
 @keyframes slide-up {
   0% {
     opacity: 1;
@@ -851,34 +249,10 @@
   animation: slide-up 0.2s ease;
 }
 
-.bottom-100 {
-  bottom: 100%;
-}
-
 .cursor-auto {
   cursor: auto;
 }
 
-.top-1\/2 {
-  top: 50%;
-}
-
-.top-full {
-  top: 100%;
-}
-
-.left-2 {
-  left: 0.5rem;
-}
-
-.left-1\/2 {
-  left: 50%;
-}
-
-.-translate-1\/2 {
-  transform: translate(-50%, -50%);
-}
-
 .pseudo-radio-btn {
   @extend .w-4;
   @extend .h-4;
@@ -905,26 +279,6 @@
   @extend .rounded-full;
 }
 
-.focus\:bg-info:focus {
-  @extend .bg-info;
-}
-
-.focus\:color-info-contrast:focus {
-  @extend .color-info-contrast;
-}
-
-.hover\:color-foreground:hover {
-  color: var(--sn-stylekit-foreground-color) !important;
-}
-
-.sn-component .bg-info-backdrop {
-  background-color: var(--sn-stylekit-info-backdrop-color);
-}
-
-.focus\:bg-info-backdrop:focus {
-  background-color: var(--sn-stylekit-info-backdrop-color);
-}
-
 .list-style-none {
   list-style-type: none;
 }
@@ -1015,18 +369,6 @@
   }
 }
 
-.leading-140\% {
-  line-height: 140%;
-}
-
-.leading-1\.3 {
-  line-height: 1.3;
-}
-
-.leading-1\.4 {
-  line-height: 1.4;
-}
-
 .dimmed {
   opacity: 0.5;
   cursor: default;
@@ -1049,43 +391,14 @@
   box-shadow: currentcolor 0px -1px 0px 0px inset, currentcolor 0px 1px 0px 0px;
 }
 
-.bg-warning-faded {
-  background-color: rgba(235, 173, 0, 0.08);
-}
-
-.color-warning-contrast {
-  color: var(--warning-text-color);
-}
-
-.bg-info-faded {
-  background-color: rgba(8, 109, 214, 0.08);
-}
-
 .overflow-x-hidden {
   overflow-x: hidden;
 }
 
-.sn-component .border-y-1px {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-}
-
-.sn-component .border-t-0 {
-  border-top-width: 0;
-}
-
-.sn-component .border-l-2px {
-  border-left-width: 2px;
-}
-
 .text-editor {
   font-size: var(--sn-stylekit-font-size-editor);
 }
 
-.sn-component .border-contrast {
-  border-color: var(--sn-stylekit-contrast-border-color);
-}
-
 .resize-none {
   resize: none;
 }
@@ -1098,26 +411,6 @@
   visibility: hidden;
 }
 
-.color-neutral-contrast {
-  color: var(--sn-stylekit-neutral-contrast-color);
-}
-
-.color-warning {
-  color: var(--sn-stylekit-warning-color);
-}
-
-.active\:bg-info:active {
-  background-color: var(--sn-stylekit-info-color);
-}
-
-.active\:border-info:active {
-  border-color: var(--sn-stylekit-info-color);
-}
-
-.active\:color-neutral-contrast:active {
-  color: var(--sn-stylekit-neutral-contrast-color);
-}
-
 .break-word {
   word-break: break-word;
 }
@@ -1171,18 +464,6 @@
   appearance: none;
 }
 
-.sn-component .focus\:bg-default:focus {
-  background-color: var(--sn-stylekit-background-color);
-}
-
-.sn-component .hover\:bg-default:hover {
-  background-color: var(--sn-stylekit-background-color);
-}
-
-.sn-component .hover\:bg-grey-5:hover {
-  background-color: var(--sn-stylekit-grey-5);
-}
-
 .sn-component .progress-bar {
   border-radius: 0.5rem;
   background-color: var(--sn-stylekit-contrast-background-color);
diff --git a/app/assets/stylesheets/_ui.scss b/app/assets/stylesheets/_ui.scss
index 16aab03b2..c4cc26129 100644
--- a/app/assets/stylesheets/_ui.scss
+++ b/app/assets/stylesheets/_ui.scss
@@ -105,51 +105,6 @@ $screen-md-max: ($screen-lg-min - 1) !default;
   }
 }
 
-.m-0 {
-  margin: 0;
-}
-
-.mb-0 {
-  margin-bottom: 0;
-}
-
-.mt-1 {
-  margin-top: 0.203125rem;
-}
-.mt-2 {
-  margin-top: 0.40625rem;
-}
-.mt-3 {
-  margin-top: 0.609375rem;
-}
-.mt-5 {
-  margin-top: 1.015625rem;
-}
-.mt-8 {
-  margin-top: 2rem;
-}
-
-.p-0 {
-  padding: 0rem;
-}
-.p-4 {
-  padding: 0.8125rem;
-}
-
-.pt-0 {
-  padding-top: 0;
-}
-
-.px-3 {
-  padding-left: 0.609375rem;
-  padding-right: 0.609375rem;
-}
-
-.py-2 {
-  padding-top: 0.40625rem;
-  padding-bottom: 0.40625rem;
-}
-
 .border-0 {
   border-width: 0px;
 }
diff --git a/app/assets/stylesheets/index.css.scss b/app/assets/stylesheets/index.css.scss
index b91b1a2ee..9687ed632 100644
--- a/app/assets/stylesheets/index.css.scss
+++ b/app/assets/stylesheets/index.css.scss
@@ -16,3 +16,14 @@
 @import 'focused';
 @import 'sn';
 @import 'columns';
+
+.sn-component {
+  @import './utils/padding';
+  @import './utils/margin';
+  @import './utils/width';
+  @import './utils/height';
+  @import './utils/color';
+  @import './utils/border';
+  @import './utils/position';
+  @import './utils/leading';
+}
diff --git a/app/assets/stylesheets/utils/_border.scss b/app/assets/stylesheets/utils/_border.scss
new file mode 100644
index 000000000..209389d14
--- /dev/null
+++ b/app/assets/stylesheets/utils/_border.scss
@@ -0,0 +1,52 @@
+.border-danger {
+  border-color: var(--sn-stylekit-danger-color);
+}
+
+.border-neutral-contrast-bg {
+  border-color: var(--sn-stylekit-neutral-contrast-color);
+}
+
+.border-secondary {
+  border-color: var(--sn-stylekit-secondary-border-color);
+}
+
+.border-contrast {
+  border-color: var(--sn-stylekit-contrast-border-color);
+}
+
+.active\:border-info:active {
+  border-color: var(--sn-stylekit-info-color);
+}
+
+.border-t-0 {
+  border-top-width: 0;
+}
+
+.border-t-1px {
+  border-top-width: 1px;
+}
+
+.border-b-0 {
+  border-bottom-width: 0;
+}
+
+.border-l-1px {
+  border-left-width: 1px;
+}
+
+.border-l-2px {
+  border-left-width: 2px;
+}
+
+.border-r-1px {
+  border-right-width: 1px;
+}
+
+.border-y-1px {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
diff --git a/app/assets/stylesheets/utils/_color.scss b/app/assets/stylesheets/utils/_color.scss
new file mode 100644
index 000000000..14be39daa
--- /dev/null
+++ b/app/assets/stylesheets/utils/_color.scss
@@ -0,0 +1,75 @@
+.bg-grey-super-light {
+  background-color: var(--sn-stylekit-grey-super-light);
+}
+
+.bg-inverted-default {
+  background-color: var(--sn-stylekit-contrast-foreground-color);
+}
+
+.hover\:bg-grey-4:hover {
+  background: var(--sn-stylekit-grey-4);
+}
+
+.focus\:bg-info:focus {
+  @extend .bg-info;
+}
+
+.bg-info-backdrop {
+  background-color: var(--sn-stylekit-info-backdrop-color);
+}
+
+.focus\:bg-info-backdrop:focus {
+  background-color: var(--sn-stylekit-info-backdrop-color);
+}
+
+.active\:bg-info:active {
+  background-color: var(--sn-stylekit-info-color);
+}
+
+.focus\:bg-default:focus {
+  background-color: var(--sn-stylekit-background-color);
+}
+
+.hover\:bg-default:hover {
+  background-color: var(--sn-stylekit-background-color);
+}
+
+.hover\:bg-grey-5:hover {
+  background-color: var(--sn-stylekit-grey-5);
+}
+
+.bg-warning-faded {
+  background-color: rgba(235, 173, 0, 0.08);
+}
+
+.bg-info-faded {
+  background-color: rgba(8, 109, 214, 0.08);
+}
+
+.color-inverted-default {
+  color: var(--sn-stylekit-background-color);
+}
+
+.focus\:color-info-contrast:focus {
+  @extend .color-info-contrast;
+}
+
+.hover\:color-foreground:hover {
+  color: var(--sn-stylekit-foreground-color) !important;
+}
+
+.color-neutral-contrast {
+  color: var(--sn-stylekit-neutral-contrast-color);
+}
+
+.color-warning {
+  color: var(--sn-stylekit-warning-color);
+}
+
+.active\:color-neutral-contrast:active {
+  color: var(--sn-stylekit-neutral-contrast-color);
+}
+
+.color-warning-contrast {
+  color: var(--warning-text-color);
+}
diff --git a/app/assets/stylesheets/utils/_height.scss b/app/assets/stylesheets/utils/_height.scss
new file mode 100644
index 000000000..f4ff14bbd
--- /dev/null
+++ b/app/assets/stylesheets/utils/_height.scss
@@ -0,0 +1,59 @@
+.h-3 {
+  height: 0.75rem;
+}
+
+.h-26 {
+  width: 6.5rem;
+}
+
+.h-30 {
+  width: 7.5rem;
+}
+
+.h-33 {
+  height: 8.25rem;
+}
+
+.h-90vh {
+  height: 90vh;
+}
+
+.min-h-1px {
+  min-height: 1px;
+}
+
+.min-h-1 {
+  min-height: 0.25rem;
+}
+
+.min-h-2 {
+  min-height: 0.5rem;
+}
+
+.min-h-3 {
+  min-height: 0.75rem;
+}
+
+.min-h-4 {
+  min-height: 1rem;
+}
+
+.min-h-6 {
+  min-height: 1.5rem;
+}
+
+.min-h-8 {
+  min-height: 2rem;
+}
+
+.min-h-16 {
+  min-height: 4rem;
+}
+
+.max-h-5 {
+  max-height: 1.25rem;
+}
+
+.max-h-110 {
+  max-height: 27.5rem;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/utils/_leading.scss b/app/assets/stylesheets/utils/_leading.scss
new file mode 100644
index 000000000..4a8e42fe3
--- /dev/null
+++ b/app/assets/stylesheets/utils/_leading.scss
@@ -0,0 +1,11 @@
+.leading-140\% {
+  line-height: 140%;
+}
+
+.leading-1\.3 {
+  line-height: 1.3;
+}
+
+.leading-1\.4 {
+  line-height: 1.4;
+}
diff --git a/app/assets/stylesheets/utils/_margin.scss b/app/assets/stylesheets/utils/_margin.scss
new file mode 100644
index 000000000..93d7c3765
--- /dev/null
+++ b/app/assets/stylesheets/utils/_margin.scss
@@ -0,0 +1,100 @@
+.mt-0 {
+  margin-top: 0;
+}
+
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
+
+.mt-1\.5 {
+  margin-top: 0.375rem;
+}
+
+.mt-2\.5 {
+  margin-top: 0.625rem;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-3\.5 {
+  margin-bottom: 0.75rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.ml-0-important {
+  margin-left: 0rem !important;
+}
+
+.ml-0\.5 {
+  margin-left: 0.125rem;
+}
+
+.ml-1\.5 {
+  margin-left: 0.375rem;
+}
+
+.ml-3 {
+  margin-left: 0.75rem;
+}
+
+.mr-0 {
+  margin-right: 0;
+}
+
+.mr-2\.5 {
+  margin-right: 0.625rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.mr-12 {
+  margin-right: 3rem;
+}
+
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.my-0\.5 {
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
+}
+
+.my-1\.5 {
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
diff --git a/app/assets/stylesheets/utils/_padding.scss b/app/assets/stylesheets/utils/_padding.scss
new file mode 100644
index 000000000..161df3af0
--- /dev/null
+++ b/app/assets/stylesheets/utils/_padding.scss
@@ -0,0 +1,153 @@
+.p-0 {
+  padding: 0;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-4\.5 {
+  padding: 1.125rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.p-8 {
+  padding: 2rem;
+}
+
+.p-12 {
+  padding: 3rem;
+}
+
+.pt-0 {
+  padding-top: 0;
+}
+
+.pt-0\.5 {
+  padding-top: 0.125rem;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+.pt-1\.5 {
+  padding-top: 0.375rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
+.pb-0 {
+  padding-bottom: 0;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pb-2\.5 {
+  padding-bottom: 0.625rem;
+}
+
+.pl-0 {
+  padding-left: 0;
+}
+
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
+.pr-4 {
+  padding-left: 1rem;
+}
+
+.px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-4\.5,
+.sk-panel .px-4\.5 {
+  padding-left: 1.375rem;
+  padding-right: 1.375rem;
+}
+
+.px-9 {
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+}
+
+.px-12 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+.py-1\.35 {
+  padding-top: 0.3375rem;
+  padding-bottom: 0.3375rem;
+}
+
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
+.py-3\.5 {
+  padding-top: 0.875rem;
+  padding-bottom: 0.875rem;
+}
+
+.py-9 {
+  padding-top: 2.25rem;
+  padding-bottom: 2.25rem;
+}
+
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
diff --git a/app/assets/stylesheets/utils/_position.scss b/app/assets/stylesheets/utils/_position.scss
new file mode 100644
index 000000000..c0ffdff6e
--- /dev/null
+++ b/app/assets/stylesheets/utils/_position.scss
@@ -0,0 +1,139 @@
+.sticky {
+  position: sticky;
+}
+
+.top-4 {
+  top: 1rem;
+}
+
+.top-30\% {
+  top: 30%;
+}
+
+.top-35\% {
+  top: 35%;
+}
+
+.top-40\% {
+  top: 40%;
+}
+
+.top-1\/2 {
+  top: 50%;
+}
+
+.top-full {
+  top: 100%;
+}
+
+.-top-0\.25 {
+  top: -0.0625rem;
+}
+
+.bottom-20\% {
+  bottom: 20%;
+}
+
+.bottom-25\% {
+  bottom: 25%;
+}
+
+.bottom-30\% {
+  bottom: 30%;
+}
+
+.bottom-35\% {
+  bottom: 35%;
+}
+
+.bottom-40\% {
+  bottom: 40%;
+}
+
+.bottom-100\% {
+  bottom: 100%;
+}
+
+.-bottom-5 {
+  bottom: -1.25rem;
+}
+
+.left-2 {
+  left: 0.5rem;
+}
+
+.left-1\/2 {
+  left: 50%;
+}
+
+.-left-10 {
+  left: -2.5rem;
+}
+
+.-left-28 {
+  left: -7rem;
+}
+
+.-left-16 {
+  left: -4rem;
+}
+
+.-left-40 {
+  left: -10rem;
+}
+
+.-left-56 {
+  left: -14rem;
+}
+
+.right-0 {
+  right: 0;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
+.-right-2 {
+  right: -0.5rem;
+}
+
+.-right-10 {
+  right: -2.5rem;
+}
+
+.-right-20 {
+  right: -5rem;
+}
+
+.-right-24 {
+  right: -6rem;
+}
+
+.-right-44 {
+  right: -11rem;
+}
+
+.-right-56 {
+  right: -14rem;
+}
+
+.translate-x-1\/2 {
+  transform: translateX(50%);
+}
+
+.-translate-1\/2 {
+  transform: translate(-50%, -50%);
+}
+
+.-translate-x-1\/2 {
+  transform: translateX(-50%);
+}
+
+.-translate-y-1\/2 {
+  transform: translateY(-50%);
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/utils/_width.scss b/app/assets/stylesheets/utils/_width.scss
new file mode 100644
index 000000000..b70d69190
--- /dev/null
+++ b/app/assets/stylesheets/utils/_width.scss
@@ -0,0 +1,127 @@
+.w-3 {
+  width: 0.75rem;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-18 {
+  width: 4.5rem;
+}
+
+.w-26 {
+  width: 6.5rem;
+}
+
+.w-30 {
+  width: 7.5rem;
+}
+
+.w-92 {
+  width: 23rem;
+}
+
+.w-200 {
+  width: 50rem;
+}
+
+.min-w-1 {
+  min-width: 0.25rem;
+}
+
+.min-w-2 {
+  min-width: 0.5rem;
+}
+
+.min-w-3 {
+  min-width: 0.75rem;
+}
+
+.min-w-5 {
+  min-width: 1.25rem;
+}
+
+.min-w-6 {
+  min-width: 1.5rem;
+}
+
+.min-w-7 {
+  min-width: 1.75rem;
+}
+
+.min-w-15 {
+  min-width: 3.75rem;
+}
+
+.min-w-24 {
+  min-width: 6rem;
+}
+
+.min-w-30 {
+  min-width: 7.5rem;
+}
+
+.min-w-60 {
+  min-width: 15rem;
+}
+
+.min-w-68 {
+  min-width: 17rem;
+}
+
+.min-w-70 {
+  min-width: 17.5rem;
+}
+
+.min-w-76 {
+  min-width: 19rem;
+}
+
+.min-w-90 {
+  min-width: 22.5rem;
+}
+
+.max-w-68 {
+  max-width: 17rem;
+}
+
+.max-w-72 {
+  max-width: 18rem;
+}
+
+.max-w-76 {
+  max-width: 19rem;
+}
+
+.max-w-89 {
+  max-width: 22.25rem;
+}
+
+.max-w-200 {
+  max-width: 50rem;
+}
+
+.max-w-35ch {
+  max-width: 35ch;
+}
+
+.max-w-40\% {
+  max-width: 40%;
+}
+
+.max-w-1\/2 {
+  max-width: 50%;
+}
+
+.max-w-3\/4 {
+  max-width: 75%;
+}
+
+.max-w-80\% {
+  max-width: 80%;
+}
+
+.max-w-full {
+  max-width: 100%;
+}