@stackoverflow/stacks 0.75.0 → 1.0.0

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

@@ -29,7 +29,7 @@
     }
 
     code {
-        font-size: @fs-body1;
+        font-size: var(--fs-body1);
         font-family: var(--ff-mono);
     }
 
@@ -102,31 +102,31 @@
     }
 
     h1 {
-        font-size: @fs-headline1;
+        font-size: var(--fs-headline1);
         margin-bottom: 0.6em;
     }
 
     h2 {
-        font-size: @fs-title;
+        font-size: var(--fs-title);
         margin-bottom: 0.7em;
     }
 
     h3 {
-        font-size: @fs-subheading;
+        font-size: var(--fs-subheading);
         margin-bottom: 0.74em;
     }
 
     h4 {
-        font-size: @fs-body3;
+        font-size: var(--fs-body3);
         margin-bottom: 1em;
     }
 
     h5 {
-        font-size: @fs-body2;
+        font-size: var(--fs-body2);
     }
 
     h6 {
-        font-size: @fs-body1;
+        font-size: var(--fs-body1);
     }
 
     img,
@@ -322,8 +322,8 @@
             top: 0;
             bottom: 0;
             left: 0;
-            width: @su4;
-            border-radius: @su8;
+            width: var(--su4);
+            border-radius: var(--su-static8);
             background: var(--black-150);
 
             .highcontrast-mode({
@@ -352,10 +352,10 @@
     // ----------------------------------------------------------------------------
     .spoiler {
         background: var(--black-050);
-        border-radius: @br-md;
+        border-radius: var(--br-md);
         color: var(--black-800);
         cursor: pointer;
-        min-height: @su48; // TODO: Let's find a solution that doesn't have a magic number
+        min-height: var(--su-static48); // TODO: Let's find a solution that doesn't have a magic number
 
         > * {
             visibility: hidden; // hidden elements don't respond to mouse events, but still retain their space
@@ -381,7 +381,7 @@
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='rgb(132, 141, 149)' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 17A8 8 0 119 1a8 8 0 010 16zM8 4v6h2V4H8zm0 8v2h2v-2H8z'%3E%3C/path%3E%3C/svg%3E");
             background-repeat: no-repeat;
             background-position: center right;
-            font-size: @fs-body1;
+            font-size: var(--fs-body1);
             color: var(--black-500);
             padding-right: 22px;
             position: absolute;
@@ -404,13 +404,13 @@
         margin: 0 0.1em;
         padding: 0.1em 0.6em;
         font-family: var(--ff-sans);
-        font-size: @fs-fine;
+        font-size: var(--fs-fine);
         line-height: var(--s-prose-line-height);
         color: var(--black-800);
         text-shadow: 0 1px 0 var(--white);
         background-color: var(--black-075);
         border: 1px solid var(--black-300);
-        border-radius: @br-sm;
+        border-radius: var(--br-sm);
         box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 @white;
         overflow-wrap: break-word;
 
@@ -425,10 +425,10 @@
     //  $ CODE STYLES
     // ----------------------------------------------------------------------------
     *:not(.s-code-block) > code {
-        padding: @su2 @su4;
+        padding: var(--su2) var(--su4);
         color: var(--black-800);
         background-color: var(--black-075);
-        border-radius: @br-sm;
+        border-radius: var(--br-sm);
     }
 
     // When contained within a link, we want the code to be link-colored
@@ -442,15 +442,15 @@
     }
 
     pre:not(.s-code-block) {
-        padding: @su12;
+        padding: var(--su12);
         color: var(--highlight-color);
         width: auto;
         max-height: 600px;
         overflow: auto;
-        font-size: @fs-body1;
-        line-height: @lh-md;
+        font-size: var(--fs-body1);
+        line-height: var(--lh-md);
         background-color: var(--highlight-bg);
-        border-radius: @br-md;
+        border-radius: var(--br-md);
 
         // Reset the code element when contained within a <pre>
         code {
@@ -463,41 +463,41 @@
     }
 
     &.s-prose__xs {
-        font-size: @fs-caption;
-        line-height: @lh-sm;
+        font-size: var(--fs-caption);
+        line-height: var(--lh-sm);
     }
 
     &.s-prose__sm {
-        font-size: @fs-body1;
-        line-height: @lh-md;
+        font-size: var(--fs-body1);
+        line-height: var(--lh-md);
     }
 
     &.s-prose__md {
-        font-size: @fs-body3;
-        line-height: @lh-xl;
+        font-size: var(--fs-body3);
+        line-height: var(--lh-xl);
     }
 
     &.s-prose__xs,
     &.s-prose__sm,
     &.s-prose__md {
         h1 {
-            font-size: @fs-headline1-relative;
+            font-size: var(--fs-headline1-relative);
         }
 
         h2 {
-            font-size: @fs-title-relative;
+            font-size: var(--fs-title-relative);
         }
 
         h3 {
-            font-size: @fs-subheading-relative;
+            font-size: var(--fs-subheading-relative);
         }
 
         h4 {
-            font-size: @fs-body3-relative;
+            font-size: var(--fs-body3-relative);
         }
 
         h5 {
-            font-size: @fs-body2-relative;
+            font-size: var(--fs-body2-relative);
         }
     }
 }

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

@@ -15,8 +15,8 @@
 
 .s-spinner {
     position: relative;
-    width: @su24;
-    height: @su24;
+    width: var(--su-static24);
+    height: var(--su-static24);
     text-align: left; // When within a parent that has text-align: center, the spinner's entire container spins, not just the spinner. Let's force text-align left so things spin internally.
 
     &:before,
@@ -26,7 +26,7 @@
         width: 100%;
         height: 100%;
         border: 3px solid currentColor;
-        border-radius: @br-circle;
+        border-radius: var(--br-circle);
     }
     &:before {
         opacity: 0.25;
@@ -40,8 +40,8 @@
     }
 
     &.s-spinner__xs {
-        width: @su12;
-        height: @su12;
+        width: var(--su-static12);
+        height: var(--su-static12);
         &:before,
         &:after {
             border-width: 1px;
@@ -49,29 +49,29 @@
     }
 
     &.s-spinner__sm {
-        width: @su16;
-        height: @su16;
+        width: var(--su-static16);
+        height: var(--su-static16);
         &:before,
         &:after {
-            border-width: @su2;
+            border-width: var(--su-static2);
         }
     }
 
     &.s-spinner__md {
-        width: @su32;
-        height: @su32;
+        width: var(--su-static32);
+        height: var(--su-static32);
         &:before,
         &:after {
-            border-width: @su4;
+            border-width: var(--su-static4);
         }
     }
 
     &.s-spinner__lg {
-        width: @su48;
-        height: @su48;
+        width: var(--su-static48);
+        height: var(--su-static48);
         &:before,
         &:after {
-            border-width: @su6;
+            border-width: var(--su-static6);
         }
     }
 

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

@@ -40,11 +40,11 @@
     max-width: 100%;
     border-collapse: collapse;
     border-spacing: 0;
-    font-size: @fs-body1;
+    font-size: var(--fs-body1);
 
     th,
     td {
-        padding: @su8;
+        padding: var(--su8);
         border-top: 1px solid var(--bc-medium);
         border-left: 1px solid var(--bc-medium);
         border-right: 1px solid var(--bc-medium);
@@ -53,7 +53,7 @@
         text-align: left;
 
         &.s-table--bulk {
-            width: @su32 - @su2;
+            width: calc(var(--su32) - var(--su2));
         }
 
         .s-checkbox {
@@ -71,7 +71,7 @@
         vertical-align: bottom;
         white-space: nowrap;
         background-color: var(--black-025);
-        line-height: @lh-sm;
+        line-height: var(--lh-sm);
     }
 
     //  When in a table body, don't make it bold.
@@ -87,7 +87,7 @@
 
     //  If two table bodies are next to each other, visually separate them
     tbody + tbody {
-        border-top: @su2 solid var(--bc-medium);
+        border-top: var(--su-static2) solid var(--bc-medium);
     }
 }
 
@@ -181,14 +181,14 @@
     &.s-table__sm {
         th,
         td {
-            padding: @su4;
+            padding: var(--su4);
         }
     }
     //  --  LARGE
     &.s-table__lg {
         th,
         td {
-            padding: @su12;
+            padding: var(--su12);
         }
     }
 
@@ -215,7 +215,7 @@
         //  to achieve the same effect a 2px gray border achieves.
         tbody + tbody {
             border-color: transparent;
-            border-width: @su12;
+            border-width: var(--su-static12);
         }
     }
 
@@ -268,8 +268,8 @@
     .s-table--totals {
         th,
         td {
-            padding-top: @su12;
-            font-size: @fs-subheading;
+            padding-top: var(--su12);
+            font-size: var(--fs-subheading);
             font-weight: bold;
         }
     }

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

@@ -66,17 +66,16 @@
 //      The same style is applied to all tags. Do not modify the core style.
 //  ---------------------------------------------------------------------------
 .s-tag {
-    #stacks-internals #load-config();
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 0;
-    padding-left: @su4;
-    padding-right: @su4;
+    padding-left: var(--su4);
+    padding-right: var(--su4);
     border-style: solid;
     border-width: 1px;
-    border-radius: @br-sm;
-    font-size: @fs-caption;
+    border-radius: var(--br-sm);
+    font-size: var(--fs-caption);
     line-height: 1.846153846;
     text-decoration: none;
     vertical-align: middle;
@@ -92,32 +91,31 @@
 
     //  -- SIZES
     &.s-tag__xs {
-        font-size: @fs-fine;
+        font-size: var(--fs-fine);
         line-height: 1.4;
-        padding-left: @su2;
-        padding-right: @su2;
+        padding-left: var(--su2);
+        padding-right: var(--su2);
     }
     &.s-tag__sm {
-        font-size: @fs-caption;
+        font-size: var(--fs-caption);
         line-height: 1.5;
     }
     &.s-tag__md {
-        padding-left: @su6;
-        padding-right: @su6;
-        font-size: @fs-body2;
+        padding-left: var(--su6);
+        padding-right: var(--su6);
+        font-size: var(--fs-body2);
         line-height: 1.733333333;
     }
     &.s-tag__lg {
-        padding-left: @su6;
-        padding-right: @su6;
-        border-radius: @br-sm + 1;
-        font-size: @fs-subheading;
+        padding-left: var(--su6);
+        padding-right: var(--su6);
+        border-radius: calc(var(--br-sm) + 1px);
+        font-size: var(--fs-subheading);
         line-height: 1.684210526;
     }
 }
 
 a.s-tag:not(.is-selected) {
-    #stacks-internals #load-config();
     .s-tag-hover-styles(var(--theme-tag-hover-border-color), var(--theme-tag-hover-background-color), var(--theme-tag-hover-color));
 }
 
@@ -129,11 +127,11 @@ a.s-tag:not(.is-selected) {
     align-content: center;
     align-self: center;
     justify-content: center;
-    width: @su16;
-    height: @su16;
-    margin-left: @su4;
-    padding: (@su2 / 2);
-    border-radius: @br-sm;
+    width: var(--su-static16);
+    height: var(--su-static16);
+    margin-left: var(--su4);
+    padding: var(--su1);
+    border-radius: var(--br-sm);
     cursor: pointer;
 
     &:hover {
@@ -147,9 +145,9 @@ a.s-tag:not(.is-selected) {
 .s-tag--sponsor {
     display: inline-flex;
     align-self: center;
-    margin: -(@su2 + 1) @su4 -(@su2) -(@su2);
-    max-width: 18px;
-    border-radius: @br-sm - 1;
+    margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) calc(var(--su2) * -1);
+    max-width: calc(var(--su-static16) + var(--su-static2));
+    border-radius: calc(var(--br-sm) - 1px);
 
     .svg-icon,
     img {
@@ -166,46 +164,40 @@ a.s-tag:not(.is-selected) {
 //  $$  Required Tag
 //  ---------------------------------------------------------------------------
 .s-tag__required {
-    #stacks-internals #load-config();
-    .s-tag-styles(@tags-required-border, @tags-required-background, @tags-required-color);
+    .s-tag-styles(var(--bc-darker), var(--black-075), var(--black-700));
 
     &.is-selected {
-        .s-tag-selected-styles(@tags-required-selected-border, @tags-required-selected-background, @tags-required-selected-color);
+        .s-tag-selected-styles(var(--black-500), var(--black-200), var(--black-900));
     }
 }
 a.s-tag__required:not(.is-selected) {
-    #stacks-internals #load-config();
-    .s-tag-hover-styles(@tags-required-hover-border, @tags-required-hover-background, @tags-required-hover-color);
+    .s-tag-hover-styles(var(--black-300), var(--black-100), var(--black-800));
 }
 
 //  $$  Moderator Tag
 //  ---------------------------------------------------------------------------
 .s-tag__moderator {
-    #stacks-internals #load-config();
-    .s-tag-styles(@tags-moderator-border, @tags-moderator-background, @tags-moderator-color);
+    .s-tag-styles(var(--red-200), var(--red-050), var(--red-800));
 
     &.is-selected {
-        .s-tag-selected-styles(@tags-moderator-selected-border, @tags-moderator-selected-background, @tags-moderator-selected-color);
+        .s-tag-selected-styles(var(--red-400), var(--red-200), var(--red-800));
     }
 }
 a.s-tag__moderator:not(.is-selected) {
-    #stacks-internals #load-config();
-    .s-tag-hover-styles(@tags-moderator-hover-border, @tags-moderator-hover-background, @tags-moderator-hover-color);
+    .s-tag-hover-styles(var(--red-300), var(--red-100), var(--red-900));
 }
 
 //  $$  Muted Tag
 //  ---------------------------------------------------------------------------
 .s-tag__muted {
-    #stacks-internals #load-config();
-    .s-tag-styles(@tags-muted-border, @tags-muted-background, @tags-muted-color);
+    .s-tag-styles(transparent, var(--black-075), var(--black-700));
 
     &.is-selected {
-        .s-tag-selected-styles(@tags-muted-selected-border, @tags-muted-selected-background, @tags-muted-selected-color);
+        .s-tag-selected-styles(transparent, var(--black-200), var(--black-900));
     }
 }
 a.s-tag__muted:not(.is-selected) {
-    #stacks-internals #load-config();
-    .s-tag-hover-styles(@tags-muted-hover-border, @tags-muted-hover-background, @tags-muted-hover-color);
+    .s-tag-hover-styles(transparent, var(--black-100), var(--black-800));
 }
 
 //  $$  Tag with Icons (watched, ignored)
@@ -220,7 +212,7 @@ a.s-tag__muted:not(.is-selected) {
         display: block;
         width: 14px;
         height: 14px;
-        margin-right: @su2;
+        margin-right: var(--su2);
         background-color: currentColor;
         position: absolute;
         left: 4px;

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

@@ -69,11 +69,11 @@
         }
 
         &:focus + .s-toggle-switch--indicator {
-            box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
         }
 
         &:checked:focus + .s-toggle-switch--indicator {
-            box-shadow: 0 0 0 @su4 var(--focus-ring-success);
+            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
         }
     }
 
@@ -97,7 +97,7 @@
             padding: 0.5em 0.7em;
             border-radius: 1000px;
             color: var(--black-500);
-            font-size: @fs-body1;
+            font-size: var(--fs-body1);
             font-weight: 400;
             line-height: 1;
             text-align: center;
@@ -133,11 +133,11 @@
             }
 
             &:focus + label.s-toggle-switch--label-off {
-                box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
             }
 
             &:focus + label:not(.s-toggle-switch--label-off) {
-                box-shadow: 0 0 0 @su4 var(--focus-ring-success);
+                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
             }
         }
     }