@stackoverflow/stacks 0.76.0 → 1.0.1

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

@@ -45,7 +45,7 @@
 
         // When the button is active or selected, it should pop above its siblings
         &.is-selected {
-            z-index: @zi-selected;
+            z-index: var(--zi-selected);
         }
 
         .highcontrast-mode({
@@ -60,7 +60,7 @@
         });
 
         &:active {
-            z-index: @zi-active;
+            z-index: var(--zi-active);
         }
 
         #stacks-internals #screen-sm({

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

@@ -22,13 +22,13 @@
         padding: 0.8em;
         color: var(--theme-button-color);
         border: 1px solid transparent;
-        border-radius: @br-sm;
+        border-radius: var(--br-sm);
         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;
@@ -70,7 +70,7 @@
 
         &:focus {
             outline: none;
-            box-shadow: 0 0 0 @su4 var(--focus-ring);
+            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
         }
 
         &[disabled] {
@@ -85,7 +85,7 @@
             box-shadow: none;
 
             &:focus {
-                box-shadow: 0 0 0 @su4 var(--focus-ring);
+                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
             }
         }
 
@@ -95,12 +95,12 @@
             &:after {
                 content: "";
                 position: absolute;
-                z-index: @zi-active;
+                z-index: var(--zi-active);
                 top: calc(50% - 2px);
                 right: 0.8em;
                 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;
@@ -109,7 +109,7 @@
 
         &.s-btn__xs {
             padding: 0.6em;
-            font-size: @fs-fine;
+            font-size: var(--fs-fine);
 
             &.s-btn__dropdown {
                 padding-right: 1.5em;
@@ -117,15 +117,15 @@
                 &:after {
                     top: calc(50% - 2px);
                     right: 0.6em;
-                    border-width: @su4 - 1px;
-                    border-top-width: @su4 - 1px;
+                    border-width: calc(var(--su-static4) - var(--su-static1));
+                    border-top-width: calc(var(--su-static4) - var(--su-static1));
                     border-bottom-width: 0;
                 }
             }
         }
 
         &.s-btn__sm {
-            font-size: @fs-caption;
+            font-size: var(--fs-caption);
 
             &.s-btn__dropdown {
                 padding-right: 2.05em;
@@ -134,8 +134,8 @@
 
         &.s-btn__md {
             padding: 0.7em;
-            border-radius: @br-sm + 1;
-            font-size: @fs-body3;
+            border-radius: calc(var(--br-sm) + 1px);
+            font-size: var(--fs-body3);
 
             &.s-btn__dropdown {
                 padding-right: 1.8em;
@@ -143,8 +143,8 @@
                 &:after {
                     top: calc(50% - 2px);
                     right: 0.7em;
-                    border-width: @su4 + 1px;
-                    border-top-width: @su4 + 1px;
+                    border-width: calc(var(--su-static4) + var(--su-static1));
+                    border-top-width: calc(var(--su-static4) + var(--su-static1));
                     border-bottom-width: 0;
                 }
             }
@@ -153,10 +153,10 @@
         .s-btn--badge {
             opacity: 0.5;
             display: inline-block;
-            border-radius: @br-sm;
-            padding: @su2 (@su4 - 1px);
-            font-size: @fs-caption;
-            line-height: @lh-xs;
+            border-radius: var(--br-sm);
+            padding: var(--su2) calc(var(--su4) - var(--su1));
+            font-size: var(--fs-caption);
+            line-height: var(--lh-xs);
             background-color: currentColor;
 
             .highcontrast-mode({ opacity: 0.8; });
@@ -214,7 +214,7 @@
 
         &:focus {
             .highcontrast-mode({
-                box-shadow: 0 0 0 @su4 var(--focus-ring);
+                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
             });
         }
 
@@ -250,7 +250,7 @@
         }
 
         &:focus {
-            box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
         }
 
         &.is-selected {
@@ -258,7 +258,7 @@
             background-color: var(--black-075);
 
             &:focus {
-                box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
             }
         }
 
@@ -303,8 +303,8 @@
             }
 
             &:focus {
-                box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
-                .highcontrast-mode({ box-shadow: 0 0 0 @su4 var(--focus-ring-muted); });
+                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
+                .highcontrast-mode({ box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted); });
             }
 
             &.is-selected {
@@ -321,7 +321,7 @@
                 });
 
                 &:focus {
-                    box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+                    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
                 }
             }
         }
@@ -351,8 +351,8 @@
         }
 
         &:focus {
-            box-shadow: 0 0 0 @su4 var(--focus-ring-error);
-            .highcontrast-mode({ box-shadow: 0 0 0 @su4 var(--focus-ring-error); });
+            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
+            .highcontrast-mode({ box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error); });
         }
 
         &.is-selected {
@@ -360,7 +360,7 @@
             background-color: var(--red-200);
 
             &:focus {
-                box-shadow: 0 0 0 @su4 var(--focus-ring-error);
+                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
             }
         }
 
@@ -386,7 +386,7 @@
                 color: var(--white);
 
                 &:focus {
-                    box-shadow: 0 0 0 @su4 var(--focus-ring-error);
+                    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
                 }
 
                 .s-btn--number {
@@ -407,7 +407,7 @@
             }
 
             &:focus {
-                box-shadow: 0 0 0 @su4 var(--focus-ring-error);
+                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
             }
 
             &.is-selected {
@@ -416,7 +416,7 @@
                 box-shadow: none;
 
                 &:focus {
-                    box-shadow: 0 0 0 @su4 var(--focus-ring-error);
+                    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
                 }
                 .highcontrast-mode({
                     .s-btn--number {
@@ -452,6 +452,13 @@
                 color: var(--white);
             }
         });
+        .light-mode-forced({
+            box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
+
+            &:not(.is-selected) {
+                color: var(--white);
+            }
+        });
 
         &:hover,
         &:focus,
@@ -467,7 +474,7 @@
 
         &:focus {
             .highcontrast-mode({
-                box-shadow: 0 0 0 @su4 var(--focus-ring);
+                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
             });
         }
 
@@ -502,7 +509,7 @@
         }
 
         &:focus {
-            box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
         }
     }
 
@@ -543,7 +550,7 @@
         }
 
         &:focus {
-            box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
         }
     }
 
@@ -604,7 +611,7 @@
             vertical-align: baseline;
             margin-top: -0.3em;         // [1]
             margin-bottom: -0.3em;      // [1]
-            transition: opacity 200ms @te-smooth; // Animate the transition to .is-loading
+            transition: opacity 200ms var(--te-smooth); // Animate the transition to .is-loading
         }
     }
 
@@ -626,7 +633,7 @@
                 border-width: 2px;
                 border-style: solid;
                 border-color: currentColor;
-                border-radius: @br-circle;
+                border-radius: var(--br-circle);
             }
 
             &:after {
@@ -640,9 +647,9 @@
                 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
+                // see spinner.less for an explanation of the following two
                 filter: invert(0); // (*)
                 transform-origin: 50% 50% 1px; // (*)
             }

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

@@ -14,9 +14,9 @@
 //  $   BASE STYLE
 //  ----------------------------------------------------------------------------
 .s-card {
-    padding: @su12;
+    padding: var(--su12);
     border: 1px solid var(--bc-medium);
-    border-radius: @br-sm;
+    border-radius: var(--br-sm);
     background-color: var(--white);
 
     p:last-of-type {

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

@@ -8,14 +8,14 @@
 //
 
 pre.s-code-block {
-    font-size: @fs-body1;
+    font-size: var(--fs-body1);
     font-family: var(--ff-mono);
-    line-height: @lh-md;
+    line-height: var(--lh-md);
     color: var(--highlight-color);
     background-color: var(--highlight-bg);
-    border-radius: @br-md;
+    border-radius: var(--br-md);
     margin: 0;
-    padding: @su12;
+    padding: var(--su12);
     overflow: auto;
 
     @scrollbar-styles();
@@ -117,10 +117,10 @@ pre.s-code-block .s-code-block--line-numbers {
     border-style: solid;
     border-color: var(--bc-medium);
     border-right-width: 1px;
-    margin: -@su12;
-    margin-right: @su12;
-    padding: @su12;
-    padding-right: @su6;
+    margin: calc(var(--su12) * -1);
+    margin-right: var(--su12);
+    padding: var(--su12);
+    padding-right: var(--su6);
     background-color: var(--black-050);
 
     .dark-mode({

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,