refactor: organize utility classes into specific files (#1041)

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;
+}

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);
+}

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;
+}

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;
+}

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;
+}

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;
+}

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%);
+}

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%;
+}