fix: update to Stacks 1.0.1 (#117)

BREAKING CHANGE: Stacks 1.0 contains breaking changes

package.json

@@ -81,7 +81,7 @@
         "webpack-merge": "^5.8.0"
     },
     "dependencies": {
-        "@stackoverflow/stacks": "^0.76.0",
+        "@stackoverflow/stacks": "^1.0.1",
         "@stackoverflow/stacks-icons": "^2.27.0",
         "@types/markdown-it": "12.2.3",
         "@types/prosemirror-commands": "^1.0.4",

site/site.less

@@ -1,10 +1,7 @@
-@import (reference) "@stackoverflow/stacks/lib/css/exports/_stacks-mixins";
-@import (reference)
-    "@stackoverflow/stacks/lib/css/exports/_stacks-constants-type";
-@import (reference)
-    "@stackoverflow/stacks/lib/css/exports/_stacks-constants-colors";
-@import (reference)
-    "@stackoverflow/stacks/lib/css/exports/_stacks-constants-helpers";
+@import (reference) "@stackoverflow/stacks/lib/css/exports/mixins";
+@import (reference) "@stackoverflow/stacks/lib/css/exports/constants-type";
+@import (reference) "@stackoverflow/stacks/lib/css/exports/constants-colors";
+@import (reference) "@stackoverflow/stacks/lib/css/exports/constants-helpers";
 
 @import "~@stackoverflow/stacks/dist/css/stacks.css";
 

src/styles/custom-components.less

@@ -1,10 +1,7 @@
-@import (reference) "@stackoverflow/stacks/lib/css/exports/_stacks-mixins";
-@import (reference)
-    "@stackoverflow/stacks/lib/css/exports/_stacks-constants-type";
-@import (reference)
-    "@stackoverflow/stacks/lib/css/exports/_stacks-constants-colors";
-@import (reference)
-    "@stackoverflow/stacks/lib/css/exports/_stacks-constants-helpers";
+@import (reference) "@stackoverflow/stacks/lib/css/exports/mixins";
+@import (reference) "@stackoverflow/stacks/lib/css/exports/constants-type";
+@import (reference) "@stackoverflow/stacks/lib/css/exports/constants-colors";
+@import (reference) "@stackoverflow/stacks/lib/css/exports/constants-helpers";
 
 // TODO move this into Stacks!
 .bg-inherit {
@@ -62,16 +59,16 @@
 .s-editor-btn {
     position: relative;
     display: inline-block;
-    padding: @su2;
+    padding: var(--su2);
     border: 1px solid transparent;
-    border-radius: @br-sm;
+    border-radius: var(--br-sm);
     color: var(--black-700);
     background-color: transparent;
     outline: none;
     font-family: inherit;
-    font-size: @fs-body1;
+    font-size: var(--fs-body1);
     font-weight: normal;
-    line-height: @lh-sm;
+    line-height: var(--lh-sm);
     text-align: center;
     text-decoration: none;
     cursor: pointer;
@@ -97,20 +94,20 @@
     }
 
     &:focus {
-        box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+        box-shadow: 0 0 0 var(--su4) var(--focus-ring-muted);
     }
 
     &.s-btn__dropdown {
-        padding-right: @su16;
+        padding-right: var(--su16);
 
         &:after {
-            right: @su4;
+            right: var(--su4);
         }
     }
 
     &.s-editor-btn__dropdown-item {
         display: block;
-        padding: @su4 @su12;
+        padding: var(--su4) var(--su12);
         border: none;
         border-radius: 0;
         color: var(--black-800);
@@ -127,7 +124,7 @@
 }
 
 .s-editor-resizable {
-    max-height: (@s-step * 6); // hmx6
+    max-height: calc(var(--s-step) * 6); // hmx6
     resize: vertical;
 
     // if the user manually resizes (via css resize handle), remove the max-height restriction
@@ -155,7 +152,7 @@
         border-width: 2px;
         border-style: solid;
         border-color: currentColor;
-        border-radius: @br-circle;
+        border-radius: var(--br-circle);
     }
 
     &:after {
@@ -169,7 +166,7 @@
         border-style: solid;
         border-color: transparent;
         border-left-color: currentColor;
-        border-radius: @br-circle;
+        border-radius: var(--br-circle);
         animation: s-spinner-rotate 0.9s infinite
             cubic-bezier(0.5, 0.1, 0.5, 0.9);
         // see _stacks-spinner.less for an explanation of the following two

src/styles/theme.less

@@ -2,7 +2,7 @@
     .hljs-section {
         color: var(--black-800) !important;
         font-weight: bold;
-        font-size: @fs-body2;
+        font-size: var(--fs-body2);
     }
 
     .hljs-link {