@stackoverflow/stacks 0.74.0 → 1.0.0-beta.0

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

@@ -40,7 +40,7 @@
         &:focus {
             border-color: var(--blue-300);
             // Since the box shadow is overwritten to show a background, we have to re-add the focus outline
-            -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 @su4 var(--focus-ring);
+            -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
         }
     }
 }
@@ -51,10 +51,10 @@
     margin: 0; // A guard against Core's default margins
     padding: @input-padding;
     border: 1px solid var(--bc-darker);
-    border-radius: @br-sm;
+    border-radius: var(--br-sm);
     background-color: var(--white);
     color: var(--fc-dark);
-    font-size: @fs-body1;
+    font-size: var(--fs-body1);
     font-family: inherit;
 
     //  --  INCREASE FONT SIZE FOR MOBILE SAFARI
@@ -105,7 +105,7 @@
 
 .s-input.s-input__search,
 .s-input.s-input__creditcard {
-    padding-left: @su32;
+    padding-left: var(--su-static32);
 }
 
 
@@ -149,10 +149,10 @@ fieldset {
 //  $  LABELS
 //  ============================================================================
 .s-label {
-    padding: 0 @su2; // Helps the label visually line up with inputs
+    padding: 0 var(--su2); // Helps the label visually line up with inputs
     color: var(--fc-dark);
     font-family: inherit;
-    font-size: @fs-body2;
+    font-size: var(--fs-body2);
     font-weight: 600;
 
     &[for] {
@@ -165,12 +165,12 @@ fieldset {
 //      Is this form item required or optional? Flag the status for users.
 //      Default styling is optional.
 .s-label--status {
-    margin-left: @su4;
-    padding: @su2 @su8;
+    margin-left: var(--su4);
+    padding: var(--su2) var(--su8);
     border-radius: 1000px;
     background-color: var(--black-050);
     color: var(--fc-medium);
-    font-size: @fs-caption;
+    font-size: var(--fs-caption);
     font-weight: 400;
     vertical-align: text-bottom;
 
@@ -203,9 +203,9 @@ fieldset {
 //  $  TEXT STYLES
 //  ============================================================================
 .s-description {
-    padding: 0 @su2; // Helps the label visually line up with inputs
+    padding: 0 var(--su2); // Helps the label visually line up with inputs
     color: var(--fc-medium);
-    font-size: @fs-caption;
+    font-size: var(--fs-caption);
 }
 
 .s-label .s-description,
@@ -229,7 +229,7 @@ fieldset {
     color: var(--fc-medium);
     font-family: inherit;
     white-space: nowrap;
-    line-height: @lh-sm;
+    line-height: var(--lh-sm);
 
     &.s-input-fill__clear {
         border-color: transparent;
@@ -238,14 +238,14 @@ fieldset {
 
     &.order-first {
         border-left-width: 1px;
-        border-top-left-radius: @br-sm;
-        border-bottom-left-radius: @br-sm;
+        border-top-left-radius: var(--br-sm);
+        border-bottom-left-radius: var(--br-sm);
     }
 
     &.order-last {
         border-right-width: 1px;
-        border-top-right-radius: @br-sm;
-        border-bottom-right-radius: @br-sm;
+        border-top-right-radius: var(--br-sm);
+        border-bottom-right-radius: var(--br-sm);
     }
 }
 
@@ -265,7 +265,7 @@ fieldset {
     &:after {
         content: "";
         position: absolute;
-        z-index: @zi-selected;
+        z-index: var(--zi-selected);
         right: 13px;
         border-color: currentColor transparent;
         border-style: solid;
@@ -297,15 +297,15 @@ fieldset {
         width: 100%;
         height: 100%; // Fill the height of its parent
         padding: @input-padding;
-        padding-right: @su32;
+        padding-right: var(--su32);
         border: 1px solid var(--bc-darker);
-        border-radius: @br-sm;
+        border-radius: var(--br-sm);
         background-color: var(--white);
         outline: 0;
-        font-size: @fs-body1;
+        font-size: var(--fs-body1);
         font-family: inherit;
         color: var(--black);
-        line-height: @lh-sm;
+        line-height: var(--lh-sm);
 
         &::-moz-focus-inner {
             outline: none !important;
@@ -372,7 +372,7 @@ fieldset {
 //  ----------------------------------------------------------------------------
 .s-checkbox {
     @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-        border-radius: @br-sm;
+        border-radius: var(--br-sm);
         background-position: center center;
         background-repeat: no-repeat;
         background-size: contain;
@@ -394,7 +394,7 @@ fieldset {
 
         &:focus {
             border-color: var(--theme-secondary-300);
-            box-shadow: 0 0 0 @su4 var(--focus-ring);
+            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
         }
     }
 }
@@ -403,7 +403,7 @@ fieldset {
 //  ----------------------------------------------------------------------------
 .s-radio {
     @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-        border-radius: @br-circle;
+        border-radius: var(--br-circle);
 
         &:checked {
             border-color: var(--theme-secondary-400);
@@ -417,7 +417,7 @@ fieldset {
         }
 
         &:focus {
-            box-shadow: 0 0 0 @su4 var(--focus-ring);
+            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
         }
     }
 }
@@ -430,7 +430,7 @@ fieldset {
 & {
     @focus-style: {
         border-color: var(--theme-secondary-300);
-        box-shadow: 0 0 0 @su4 var(--focus-ring);
+        box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
         color: var(--black);
         outline: 0;
 
@@ -485,15 +485,15 @@ fieldset {
     position: relative;
 
     .s-input {
-        padding-right: @su32;
+        padding-right: var(--su32);
     }
 
     .s-select .s-input-icon {
-        right: @su32;
+        right: var(--su32);
     }
 
     .s-textarea {
-        padding-right: @su48;
+        padding-right: var(--su48);
 
         ~ .s-input-icon {
             top: 1.5em;
@@ -517,7 +517,7 @@ fieldset {
         border-color: var(--yellow-600);
 
         &:focus {
-            box-shadow: 0 0 0 @su4 var(--focus-ring-warning);
+            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-warning);
         }
     }
 
@@ -545,7 +545,7 @@ fieldset {
         border-color: var(--red-400);
 
         &:focus {
-            box-shadow: 0 0 0 @su4 var(--focus-ring-error);
+            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
         }
     }
 
@@ -577,7 +577,7 @@ fieldset {
         border-color: var(--green-400);
 
         &:focus {
-            box-shadow: 0 0 0 @su4 var(--focus-ring-success);
+            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
         }
     }
 
@@ -653,8 +653,8 @@ fieldset {
 //      Set some baseline styles
 //  ----------------------------------------------------------------------------
 .s-input-message {
-    padding: @su2;
-    font-size: @fs-caption;
+    padding: var(--su2);
+    font-size: var(--fs-caption);
 }
 
 //  $$  SIZES
@@ -663,25 +663,25 @@ fieldset {
 .s-textarea__sm,
 .s-label__sm,
 .s-select__sm > select {
-    font-size: @fs-caption;
+    font-size: var(--fs-caption);
 }
 .s-input__md,
 .s-textarea__md,
 .s-label__md,
 .s-select__md > select {
-    font-size: @fs-body3;
+    font-size: var(--fs-body3);
 }
 .s-input__lg,
 .s-textarea__lg,
 .s-label__lg,
 .s-select__lg > select {
-    font-size: @fs-title;
+    font-size: var(--fs-title);
 }
 .s-input__xl,
 .s-textarea__xl,
 .s-label__xl,
 .s-select__xl > select {
-    font-size: @fs-headline1;
+    font-size: var(--fs-headline1);
 }
 
 //  $$  PADDING ADJUSTMENTS WITHIN SIZES
@@ -691,7 +691,7 @@ fieldset {
 .s-select__md > select {
     padding-top: 0.5em;
     padding-bottom: 0.5em;
-    border-radius: @br-sm + 1;
+    border-radius: calc(var(--br-sm) + 1px);
 }
 
 .s-textarea__md {
@@ -703,14 +703,14 @@ fieldset {
 .s-textarea__lg,
 .s-select__lg > select {
     padding: 0.45em 0.6em;
-    border-radius: @br-sm + 1;
+    border-radius: calc(var(--br-sm) + 1px);
 }
 
 .s-input__xl,
 .s-textarea__xl,
 .s-select__xl > select {
     padding: 0.4em 0.5em;
-    border-radius: @br-md;
+    border-radius: var(--br-md);
 }
 
 .s-input__md,

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) {