@stackoverflow/stacks 0.76.0 → 1.0.1

package/lib/css/components/{_stacks-link-previews.less → link-previews.less}

@@ -11,7 +11,7 @@
 //  ----------------------------------------------------------------------------
 .s-link-preview {
     border: 1px solid var(--bc-medium);
-    border-radius: @br-sm;
+    border-radius: var(--br-sm);
     text-align: left;
     box-shadow: var(--bs-sm);
 }
@@ -19,19 +19,19 @@
 .s-link-preview--header {
     display: flex;
     background: var(--black-025);
-    border-top-left-radius: @br-sm;
-    border-top-right-radius: @br-sm;
+    border-top-left-radius: var(--br-sm);
+    border-top-right-radius: var(--br-sm);
     border-bottom: 1px solid var(--bc-medium);
-    padding: @su12 @su8;
+    padding: var(--su12) var(--su8);
 }
 
 .s-link-preview--icon {
-    margin-right: @su8;
+    margin-right: var(--su8);
     color: var(--black-800); // Set the default color of the integration's icon. Most likely this will be overridden by the integration icon's native colors.
 }
 
 .s-link-preview--title {
-    font-size: @fs-body3;
+    font-size: var(--fs-body3);
     font-weight: bold;
     color: var(--black-900);
 }
@@ -60,18 +60,18 @@ a.s-link-preview--title {
 }
 
 .s-link-preview--details {
-    font-size: @fs-caption;
+    font-size: var(--fs-caption);
     color: var(--black-500);
-    margin-top: @su2;
+    margin-top: var(--su2);
 
     #stacks-internals #screen-sm({
-        margin-top: @su4;
+        margin-top: var(--su4);
     });
 }
 
 .s-link-preview--body {
-    padding: @su12;
-    font-size: @fs-body2;
+    padding: var(--su12);
+    font-size: var(--fs-body2);
 
     *:last-child {
         margin-bottom: 0;
@@ -90,11 +90,11 @@ a.s-link-preview--title {
     display: flex;
     justify-content: space-between;
     background: var(--black-025);
-    border-bottom-left-radius: @br-sm;
-    border-bottom-right-radius: @br-sm;
+    border-bottom-left-radius: var(--br-sm);
+    border-bottom-right-radius: var(--br-sm);
     border-top: 1px solid var(--bc-medium);
-    padding: @su12;
-    font-size: @fs-caption;
+    padding: var(--su12);
+    font-size: var(--fs-caption);
 
     #stacks-internals #screen-sm({
         flex-direction: column;
@@ -110,11 +110,11 @@ a.s-link-preview--title {
 
 .s-link-preview--misc {
     color: var(--black-500);
-    padding-left: @su4;
+    padding-left: var(--su4);
 
     #stacks-internals #screen-sm({
         padding-left: 0;
-        padding-top: @su2;
+        padding-top: var(--su2);
     });
 }
 

package/lib/css/components/{_stacks-links.less → links.less}

@@ -102,12 +102,12 @@ a,
         &:after {
             content: "";
             position: absolute;
-            z-index: @zi-active;
+            z-index: var(--zi-active);
             top: calc(50% - 2px);
             right: 0;
             border-style: solid;
-            border-width: @su4;
-            border-top-width: @su4;
+            border-width: var(--su-static4);
+            border-top-width: var(--su-static4);
             border-bottom-width: 0;
             border-color: currentColor transparent;
             pointer-events: none;
@@ -171,7 +171,7 @@ button.s-link {
     display: block;
     width: 100%;
     color: var(--black-600);
-    padding: @su6 @su12;
+    padding: var(--su6) var(--su12);
 
     // Normalize for when applying to a button
     cursor: pointer;

package/lib/css/components/{_stacks-menu.less → menu.less}

@@ -11,18 +11,18 @@
     .list-reset;
 
     .s-menu--title {
-        padding: @su8 @su12;
+        padding: var(--su8) var(--su12);
         text-transform: uppercase;
-        font-size: @fs-fine;
+        font-size: var(--fs-fine);
         color: var(--black-600);
     }
 
     li + .s-menu--title {
-        margin-top: @su12;
+        margin-top: var(--su12);
     }
 
     .s-menu--divider {
-        margin: @su8 0;
+        margin: var(--su8) 0;
         height: 1px;
         background-color: var(--bc-light);
 
@@ -33,7 +33,7 @@
 
     .s-menu--label {
         cursor: pointer;
-        padding: @su12;
+        padding: var(--su12);
         border-top: 1px solid var(--bc-light);
 
         .dark-mode({

package/lib/css/components/{_stacks-modals.less → modals.less}

@@ -17,7 +17,7 @@
     display: flex;
     visibility: hidden;
     position: fixed;
-    z-index: @zi-hide; // Make sure it's also below everything so we can't interact with it.
+    z-index: var(--zi-hide); // Make sure it's also below everything so we can't interact with it.
 
     // This fills the entire viewport without having to worry about size.
     top: 0;
@@ -29,27 +29,27 @@
     background-color: fade(@black-900, 50%); // Background remains fixed
     opacity: 0;
     backface-visibility: hidden;
-    transition: opacity 100ms @te-smooth 0s, z-index 0s 100ms, visibility 0s 100ms; // Transition out
+    transition: opacity 100ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms; // Transition out
     will-change: visibility, z-index, opacity; // Not supported in Edge
 
     &[aria-hidden="false"],
     &[aria-hidden="false"] .s-modal--dialog {
         visibility: visible;
-        z-index: @zi-modals;
+        z-index: var(--zi-modals);
         opacity: 1;
         transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-        transition: opacity 100ms @te-smooth 10ms, z-index 0s 0s, visibility 0s 0s, transform 100ms @te-smooth 10ms, transform 100ms @te-smooth 10ms; // Transition in
+        transition: opacity 100ms var(--te-smooth) 10ms, z-index 0s 0s, visibility 0s 0s, transform 100ms var(--te-smooth) 10ms, transform 100ms var(--te-smooth) 10ms; // Transition in
     }
 }
 
 .s-modal--dialog {
     overflow-y: auto;
     visibility: hidden;
-    z-index: @zi-hide; // Make sure it's also below everything so we can't interact with it.
+    z-index: var(--zi-hide); // Make sure it's also below everything so we can't interact with it.
     max-width: 600px;
     max-height: 100%;
-    padding: @su24;
-    border-radius: @br-lg;
+    padding: var(--su24);
+    border-radius: var(--br-lg);
     background-color: var(--white);
     box-shadow: var(--bs-lg);
     opacity: 0;
@@ -62,7 +62,7 @@
 
     @scrollbar-styles();
 
-    transition: opacity 200ms @te-smooth 0s, z-index 0s 100ms, visibility 0s 100ms, transform 100ms @te-smooth 0s, transform 100ms @te-smooth 0s; // Transition out
+    transition: opacity 200ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms, transform 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s; // Transition out
     will-change: visibility, z-index, opacity, transform; // Not supported by Edge
 
     .s-modal[aria-hidden="false"] & {
@@ -73,9 +73,9 @@
 //  [1] To override .s-btn class attributes
 .s-modal--close {
     position: absolute !important; // [1]
-    top: @su8;
-    right: @su8;
-    padding: @su12 !important; // [1]
+    top: var(--su8);
+    right: var(--su8);
+    padding: var(--su12) !important; // [1]
 
     .svg-icon {
         margin: 0 !important;
@@ -86,20 +86,20 @@
 //  $   DIALOG PIECES
 //  ----------------------------------------------------------------------------
 .s-modal--header {
-    margin-bottom: @su16;
+    margin-bottom: var(--su16);
     color: var(--fc-dark);
-    font-size: @fs-headline1;
+    font-size: var(--fs-headline1);
     font-weight: normal;
-    line-height: @lh-sm;
+    line-height: var(--lh-sm);
 }
 
 .s-modal--body {
-    margin-bottom: @su24;
+    margin-bottom: var(--su24);
     color: var(--fc-medium);
 }
 
 .s-modal--footer {
-    margin-top: @su24;
+    margin-top: var(--su24);
 }
 
 
@@ -116,11 +116,11 @@
 }
 
 .s-modal.s-modal__celebration .s-modal--dialog {
-    padding-top: @su64;
+    padding-top: var(--su64);
     .bg-confetti-animated;
 
     .s-modal--close {
-        top: @su48;
+        top: var(--su48);
     }
 }
 
@@ -128,6 +128,6 @@
 //  $   SIZES
 //  ----------------------------------------------------------------------------
 .s-modal__full {
-    max-width: calc(~"100% - @{su48}");
-    max-height: calc(~"100% - @{su48}");
+    max-width: calc(100% - var(--su48));
+    max-height: calc(100% - var(--su48));
 }

package/lib/css/components/{_stacks-navigation.less → navigation.less}

@@ -15,8 +15,8 @@
 //  ----------------------------------------------------------------------------
 .s-navigation {
     display: flex;
-    margin: -@su2;
-    padding: @su2 0;
+    margin: calc(var(--su2) * -1);
+    padding: var(--su2) 0;
     flex-wrap: wrap;
 
     // If the s-navigation is a list, let's reset all the properties
@@ -25,7 +25,7 @@
     .s-navigation--item {
         display: flex;
         align-items: center;
-        padding: @su6 @su12;
+        padding: var(--su6) var(--su12);
         position: relative;
 
         // Reset some things for when the navigation item is also a button
@@ -36,7 +36,7 @@
         cursor: pointer;
         user-select: auto;
         border-radius: 1000px;
-        margin: @su2;
+        margin: var(--su2);
         white-space: nowrap;
         color: var(--black-600);
 
@@ -72,12 +72,12 @@
             &:after {
                 content: "";
                 position: absolute;
-                z-index: @zi-active;
+                z-index: var(--zi-active);
                 top: calc(50% - 2px);
                 right: 0.9em;
                 border-style: solid;
-                border-width: @su4;
-                border-top-width: @su4;
+                border-width: var(--su-static4);
+                border-top-width: var(--su-static4);
                 border-bottom-width: 0;
                 border-color: currentColor transparent;
                 pointer-events: none;
@@ -104,10 +104,10 @@
     }
 
     .s-navigation--title {
-        font-size: @fs-fine;
+        font-size: var(--fs-fine);
         font-weight: bold;
-        margin-top: @su16;
-        padding: @su6 @su12;
+        margin-top: var(--su16);
+        padding: var(--su6) var(--su12);
         text-transform: uppercase;
 
         &:first-child {
@@ -135,8 +135,8 @@
     //  ----------------------------------------------------------------------------
     &.s-navigation__sm {
         .s-navigation--item {
-            padding: @su4 @su12;
-            font-size: @fs-caption;
+            padding: var(--su4) var(--su12);
+            font-size: var(--fs-caption);
 
             &.s-navigation--item__dropdown {
                 padding-right: 2em;

package/lib/css/components/{_stacks-notices.less → notices.less}

@@ -15,24 +15,24 @@
 //  ----------------------------------------------------------------------------
 //  $$  FILLED, MUTED
 .s-notice {
-    padding: @su16;
+    padding: var(--su16);
     border: 1px solid transparent;
-    border-radius: @br-sm;
+    border-radius: var(--br-sm);
     color: var(--fc-medium);
-    font-size: @fs-body1;
+    font-size: var(--fs-body1);
 
     .s-toast & {
         max-width: 44rem;
         width: 100%;
-        padding-top: @su8;
-        padding-bottom: @su8;
+        padding-top: var(--su8);
+        padding-bottom: var(--su8);
         box-shadow: var(--bs-sm);
         pointer-events: all;
     }
 
     .s-notice--btn {
         color: var(--fc-dark);
-        padding: @su8;
+        padding: var(--su8);
     }
 }
 
@@ -211,20 +211,20 @@
     position: fixed;
     display: flex;
     justify-content: center;
-    top: @su16;
-    left: @su8;
-    right: @su8;
+    top: var(--su16);
+    left: var(--su8);
+    right: var(--su8);
     opacity: 0;
-    z-index: @zi-modals + 1; // Toasts should appear above modals
+    z-index: calc(var(--zi-modals) + 1); // Toasts should appear above modals
     transform: translate3d(0, -66px, 0);
-    transition: transform 100ms @te-smooth-slow 0s, opacity 60ms @te-smooth-slow 0ms, visibility 0s 150ms;
+    transition: transform 100ms var(--te-smooth-slow) 0s, opacity 60ms var(--te-smooth-slow) 0ms, visibility 0s 150ms;
     pointer-events: none;
 
     &[aria-hidden="false"] {
         visibility: visible;
         opacity: 1;
         transform: translate3d(0, 0, 0);
-        transition: visibility 0s 0s, opacity 100ms @te-smooth 0s, transform 100ms @te-smooth 0s;
+        transition: visibility 0s 0s, opacity 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
     }
 
     @media (prefers-reduced-motion) {

package/lib/css/components/{_stacks-page-titles.less → page-titles.less}

@@ -16,7 +16,7 @@
     justify-content: space-between;
     align-items: flex-end;
     width: 100%;
-    padding-bottom: @su16;
+    padding-bottom: var(--su16);
     border-bottom: 1px solid var(--bc-medium);
 
     #stacks-internals #screen-md({
@@ -27,34 +27,34 @@
     .s-page-title--header {
         margin: 0;
         margin-bottom: 0;
-        font-size: @fs-headline1;
+        font-size: var(--fs-headline1);
         color: var(--fc-dark);
-        line-height: @lh-sm;
+        line-height: var(--lh-sm);
         font-weight: normal;
     }
 
     .s-page-title--description {
         color: var(--fc-light);
-        margin-top: @su4;
+        margin-top: var(--su4);
         margin-bottom: 0;
-        font-size: @fs-body2;
+        font-size: var(--fs-body2);
     }
 
     .s-page-title--actions {
-        margin-left: @su8;
+        margin-left: var(--su8);
         flex-shrink: 0;
 
         #stacks-internals #screen-md({
-            margin-top: @su8;
+            margin-top: var(--su8);
             margin-left: 0;
         });
     }
 
     .s-breadcrumbs {
-        margin-bottom: @su8;
+        margin-bottom: var(--su8);
 
         #stacks-internals #screen-sm({
-            margin-bottom: @su2;
+            margin-bottom: var(--su2);
         });
     }
 }

package/lib/css/components/{_stacks-pagination.less → pagination.less}

@@ -15,19 +15,19 @@
 .s-pagination {
     display: flex;
     flex-wrap: wrap;
-    margin-left: -@su2;
-    margin-right: -@su2;
+    margin-left: calc(var(--su2) * -1);
+    margin-right: calc(var(--su2) * -1);
 }
 
 .s-pagination--item {
-    margin-left: @su2;
-    margin-right: @su2;
-    padding: 0 @su8;
+    margin-left: var(--su2);
+    margin-right: var(--su2);
+    padding: 0 var(--su8);
     background-color: transparent;
-    border-radius: @br-sm;
+    border-radius: var(--br-sm);
     border: 1px solid var(--bc-medium);
-    font-size: @fs-body1;
-    line-height: @lh-xl;
+    font-size: var(--fs-body1);
+    line-height: var(--lh-xl);
     color: var(--fc-medium);
 
     .highcontrast-mode({ text-decoration: none; });

package/lib/css/components/{_stacks-popovers.less → popovers.less}

@@ -19,14 +19,14 @@
     display: none;
     position: absolute;
     max-width: 24rem;
-    padding: @su12;
-    z-index: @zi-popovers;
-    border-radius: @br-md;
+    padding: var(--su12);
+    z-index: var(--zi-popovers);
+    border-radius: var(--br-md);
     border: 1px solid var(--bc-medium);
     background-color: var(--white);
     box-shadow: var(--bs-md);
     color: var(--fc-dark);
-    font-size: @fs-body1;
+    font-size: var(--fs-body1);
     min-width: 12rem;
     width: 100%;
 
@@ -53,7 +53,7 @@
     .s-popover--arrow__bc,
     .s-popover--arrow__bl,
     .s-popover--arrow__br {
-        bottom: -@su6;
+        bottom: calc(var(--su6) * -1);
 
         &:after {
             bottom: 1px;
@@ -69,7 +69,7 @@
     .s-popover--arrow__tc,
     .s-popover--arrow__tl,
     .s-popover--arrow__tr {
-        top: -@su6;
+        top: calc(var(--su6) * -1);
 
         &:after {
             top: 1px;
@@ -85,7 +85,7 @@
     .s-popover--arrow__rc,
     .s-popover--arrow__rt,
     .s-popover--arrow__rb {
-        right: -@su6;
+        right: calc(var(--su6) * -1);
 
         &:after {
             right: 1px;
@@ -101,7 +101,7 @@
     .s-popover--arrow__lc,
     .s-popover--arrow__lt,
     .s-popover--arrow__lb {
-        left: -@su6;
+        left: calc(var(--su6) * -1);
 
         &:after {
             left: 1px;
@@ -115,22 +115,22 @@
 
     .s-popover--arrow__tc,
     .s-popover--arrow__bc {
-        left: calc(50% - @su6);
+        left: calc(50% - var(--su6));
     }
 
     .s-popover--arrow__lc,
     .s-popover--arrow__rc {
-        top: calc(50% - @su6);
+        top: calc(50% - var(--su6));
     }
 
     .s-popover--arrow__tr,
     .s-popover--arrow__br {
-        right: @su12;
+        right: var(--su12);
     }
 
     .s-popover--arrow__rb,
     .s-popover--arrow__lb {
-        bottom: @su12;
+        bottom: var(--su12);
     }
 }
 
@@ -140,9 +140,9 @@
 
 .s-popover--close {
     float: right; // Use floats for title wrapping
-    top: -@su8; // Compensate for s-popover's padding
-    right: -@su8; // Compensate for s-popover's padding
-    padding: @su8 !important;
+    top: calc(var(--su8) * -1); // Compensate for s-popover's padding
+    right: calc(var(--su8) * -1); // Compensate for s-popover's padding
+    padding: var(--su8) !important;
 }
 
 //  ============================================================================
@@ -169,8 +169,8 @@
 .s-popover--arrow:after {
     position: absolute;
     display: block;
-    width: @su12;
-    height: @su12;
+    width: var(--su12);
+    height: var(--su12);
     z-index: -1;
 }