@stackoverflow/stacks 1.2.0 → 1.3.2

package/lib/css/components/prose.less

@@ -18,14 +18,14 @@
     // Base styling
     font-size: 15px; // Force a font size that doesn’t change at the smallest breakpoint
     line-height: var(--s-prose-line-height);
-    word-wrap: break-word;
+    overflow-wrap: break-word;
 
     p {
         margin-bottom: var(--s-prose-spacing);
     }
 
     pre {
-        word-wrap: normal;
+        overflow-wrap: normal;
     }
 
     code {
@@ -54,10 +54,10 @@
     }
 
     li {
-        word-wrap: break-word;
+        overflow-wrap: break-word;
 
         pre {
-            word-wrap: normal;
+            overflow-wrap: normal;
         }
     }
 

package/lib/css/components/spinner.less

@@ -96,6 +96,44 @@
     }
 }
 
+.is-loading {
+    position: relative;
+    padding-left: 2.2em;
+
+    &:before {
+        content: "";
+        position: absolute;
+        opacity: 0.3;
+        left: 0.6em;
+        top: calc(50% - 0.6em);
+        width: 1.23076923em;
+        height: 1.23076923em;
+        border-width: 2px;
+        border-style: solid;
+        border-color: currentColor;
+        border-radius: var(--br-circle);
+    }
+
+    &:after {
+        content: "";
+        position: absolute;
+        left: 0.6em;
+        top: calc(50% - 0.6em);
+        width: 1.23076923em;
+        height: 1.23076923em;
+        border-width: 2px;
+        border-style: solid;
+        border-color: transparent;
+        border-left-color: currentColor;
+        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
+        filter: invert(0); // (*)
+        transform-origin: 50% 50% 1px; // (*)
+    }
+}
+
 // Keyframes
 @keyframes s-spinner-rotate {
     from {
@@ -104,4 +142,4 @@
     to {
         transform: rotate(360deg);
     }
-}
+}

package/lib/css/components/tables.less

@@ -311,11 +311,7 @@
 
         th:not(.is-enabled),
         td:not(.is-enabled) {
-            opacity: 0.3;
-
-            .highcontrast-mode({
-                opacity: 0.8;
-            });
+            opacity: calc(var(--_o-disabled) * 0.6); // 0.5 * 0.6 = 0.3
         }
     }
 }

package/lib/css/components/topbar.less

@@ -130,6 +130,9 @@
     }
 
     .s-navigation {
+        .s-navigation--item:focus-visible {
+            box-shadow: var(--theme-topbar-search-shadow-focus);
+        }
         .s-navigation--item:not(.is-selected) {
             color: var(--theme-topbar-item-color);
         }
@@ -153,7 +156,7 @@
     // Search input
     --theme-topbar-search-color: @black-700;
     --theme-topbar-search-background: @white;
-    --theme-topbar-search-placeholder: @black-200;
+    --theme-topbar-search-placeholder: @black-400;
     --theme-topbar-search-border: @black-200;
     --theme-topbar-search-border-focus: @blue-300;
     --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);

package/lib/css/components/uploader.less

@@ -7,106 +7,91 @@
 //  visit https://stackoverflow.design/
 
 .s-uploader {
-    align-items: center;
-    background-color: var(--black-025);
-    border-radius: var(--br-lg);
-    display: flex;
-    min-height: var(--su-static128);
-    justify-content: center;
-    padding: var(--su8) var(--su16);
-    position: relative;
-    text-align: center;
-
-    // Add the dashed border as an SVG background mask
-    &:before {
-        --s-uploader-background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: var(--black-150);
-        -webkit-mask-image: var(--s-uploader-background-image);
-        mask-image: var(--s-uploader-background-image);
-        border-radius: var(--br-lg);
+    --_bg: var(--black-025);
+    --_bg-focus: var(--black-050);
+    --_bg-bc: var(--black-150);
+    --_focus-ring-color: var(--focus-ring);
 
-        .highcontrast-mode({
-            background-color: var(--black-400);
-        });
-    }
+    // Static custom properties (not redefined but repeated enough to warrant a custom property)
+    --_bg-b-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
 
-    &.has-error {
-        background-color: var(--red-050);
+    .highcontrast-mode({
+        --_bg-bc-hc: var(--black-400);
+    });
 
-        &:before {
-            background-color: var(--red-400);
+    &.is-active {
+        --_bg: var(--black-050);
+        --_bg-bc: var(--black-200);
+    }
 
-            .highcontrast-mode({
-                background-color: var(--red-400);
-            });
-        }
+    &.is-disabled {
+        opacity: var(--_o-disabled-static);
+    }
 
-        .s-link {
-            color: var(--red-900);
-        }
+    &.has-error {
+        --_bg: var(--red-050);
+        --_bg-focus: var(--red-100);
+        --_bg-bc: var(--red-400);
+        --_bg-bc-hc-state: var(--red-400);
+        --_focus-ring-color: var(--focus-ring-error);
+        --_link-fc: var(--red-900);
     }
 
     &.has-success {
-        background-color: var(--green-025);
-
-        &:before {
-            background-color: var(--green-400);
-
-            .highcontrast-mode({
-                background-color: var(--green-400);
-            });
-        }
-
-        .s-link {
-            color: var(--green-900);
-        }
+        --_bg: var(--green-025);
+        --_bg-focus: var(--green-050);
+        --_bg-bc: var(--green-400);
+        --_bg-bc-hc-state: var(--green-400);
+        --_focus-ring-color: var(--focus-ring-success);
+        --_link-fc: var(--green-900);
     }
 
     &.has-warning {
-        background-color: var(--yellow-050);
-
-        &:before {
-            background-color: var(--yellow-400);
-
-            .highcontrast-mode({
-                background-color: var(--yellow-400);
-            });
-        }
-
-        .s-link {
-            color: var(--yellow-900);
-        }
+        --_bg: var(--yellow-050);
+        --_bg-focus: var(--yellow-100);
+        --_bg-bc: var(--yellow-400);
+        --_bg-bc-hc-state: var(--yellow-400);
+        --_focus-ring-color: var(--focus-ring-warning);
+        --_link-fc: var(--yellow-900);
     }
 
-    &.is-active {
-        background-color: var(--black-050);
-
-        &:before {
-            background-color: var(--black-200);
-
-            .highcontrast-mode({
-                background-color: var(--black);
-            });
+    &.has-error,
+    &.has-success,
+    &.has-warning {
+        .s-link {
+            color: var(--_link-fc);
         }
     }
 
-    &.is-disabled {
-        opacity: 0.5;
-    }
-
     // This is to for safari shadow DOM
     // see https://github.com/StackExchange/Stacks/pull/690#issuecomment-861028193
     input[type="file"]::file-selector-button {
         cursor: pointer;
     }
-
+    .s-uploader--container {
+        align-items: center;
+        background-color: var(--_bg);
+        border-radius: var(--br-lg);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-height: var(--su-static128);
+        padding: var(--su8) var(--su16);
+        position: relative;
+        text-align: center;
+
+        // Add the dashed border as an SVG background mask
+        &:before {
+            -webkit-mask-image: var(--_bg-b-image);
+            mask-image: var(--_bg-b-image);
+            background-color: var(--_bg-bc-hc-state, var(--_bg-bc-hc, var(--_bg-bc)));
+            content: '';
+            border-radius: var(--br-lg);
+            display: block;
+            position: absolute;
+            inset: 0;
+        }
+    }
     .s-uploader--input {
         cursor: pointer;
         height: 100%;
@@ -114,13 +99,13 @@
         opacity: 0;
         position: absolute;
         width: 100%;
+        z-index: var(--zi-selected);
 
         &:focus:focus-visible + .s-uploader--container {
-            background-color: var(--black-050);
-            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
+            background-color: var(--_bg-focus);
+            box-shadow: 0 0 0 var(--su-static4) var(--_focus-ring-color);
         }
     }
-
     .s-uploader--preview {
         max-width: 100%;
         pointer-events: none;
@@ -185,8 +170,7 @@
                     object-fit: cover;
                 }
                 &:not(img) {
-                    --s-uploader--preview-document-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23535A60' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 3a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H5a2 2 0 01-2-2V3zm7-1.5V6h4.5L10 1.5z'%3E%3C/path%3E%3C/svg%3E");
-                    background-image: var(--s-uploader--preview-document-icon);
+                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23535A60' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 3a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H5a2 2 0 01-2-2V3zm7-1.5V6h4.5L10 1.5z'%3E%3C/path%3E%3C/svg%3E");
                     background-position: center;
                     background-repeat: no-repeat;
                 }
@@ -207,4 +191,6 @@
         top: var(--su8);
         z-index: var(--zi-active);
     }
+
+    position: relative;
 }

package/lib/css/exports/constants-colors.less

@@ -120,6 +120,7 @@
 @yellow-900: hsl(@yellow-h, 84%, 28%);
 
 // Red
+@red-025: hsl(@red-h, 80%, 98%);
 @red-050: hsl(@red-h, 75%, 97%);
 @red-100: hsl(@red-h, 76%, 90%);
 @red-200: hsl(@red-h, 74%, 83%);
@@ -247,7 +248,7 @@
     // Topbar Search input
     --theme-topbar-search-color: var(--black-700);
     --theme-topbar-search-background: var(--white);
-    --theme-topbar-search-placeholder: var(--black-200);
+    --theme-topbar-search-placeholder: var(--black-400);
     --theme-topbar-search-border: var(--black-200);
     --theme-topbar-search-border-focus: var(--blue-300);
     --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
@@ -364,6 +365,7 @@
     --yellow-900: @yellow-900;
 
     // Red
+    --red-025: @red-025;
     --red-050: @red-050;
     --red-100: @red-100;
     --red-200: @red-200;
@@ -409,6 +411,10 @@
     --focus-ring-error: hsla(@red-h, 62%, 47%, 15%);
     --focus-ring-muted: hsla(@black-h, @black-s, 15%, 10%);
 
+    // Opacity
+    --_o-disabled: 0.5;
+    --_o-disabled-static: 0.5;
+
     // Shadows
     --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
     --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
@@ -560,6 +566,7 @@
     --yellow-900: hsl(@yellow-h, 93%, 83.5%);
 
     // Red
+    --red-025: hsl(@red-h + 3, 10%, 24%);
     --red-050: hsl(@red-h + 3, 30%, 26.5%);
     --red-100: hsl(@red-h + 3, 35%, 33%);
     --red-200: hsl(@red-h + 3, 37%, 38.5%);
@@ -605,6 +612,10 @@
     --focus-ring-error: hsla(@red-h, 62%, 52%, 30%);
     --focus-ring-muted: hsla(@black-h, @black-s, 100%, 10%);
 
+    // Opacity
+    --_o-disabled: 0.5;
+    --_o-disabled-static: 0.5;
+
     // Shadows
     --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
     --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
@@ -709,10 +720,10 @@
     --black-900: hsl(@black-h, @black-s, 0%);
 
     // Orange
-    --orange-050: hsl(@orange-h, 100%, 97.5%);
-    --orange-100: hsl(@orange-h, 100%, 94%);
-    --orange-200: hsl(@orange-h, 100%, 88%);
-    --orange-300: hsl(@orange-h, 100%, 82%);
+    --orange-050: hsl(@orange-h, 100%, 93%);
+    --orange-100: hsl(@orange-h, 100%, 90%);
+    --orange-200: hsl(@orange-h, 100%, 86%);
+    --orange-300: hsl(@orange-h, 100%, 81%);
     --orange-400: hsl(@orange-h, 100%, 34%);
     --orange-500: hsl(@orange-h, 100%, 29%);
     --orange-600: hsl(@orange-h, 100%, 24%);
@@ -721,10 +732,10 @@
     --orange-900: hsl(@orange-h, 100%, 8%);
 
     // Blue
-    --blue-050: hsl(@blue-h, 100%, 97.5%);
-    --blue-100: hsl(@blue-h, 100%, 95%);
-    --blue-200: hsl(@blue-h, 100%, 90%);
-    --blue-300: hsl(@blue-h, 100%, 85%);
+    --blue-050: hsl(@blue-h, 100%, 94%);
+    --blue-100: hsl(@blue-h, 100%, 92%);
+    --blue-200: hsl(@blue-h, 100%, 89%);
+    --blue-300: hsl(@blue-h, 100%, 86%);
     --blue-400: hsl(@blue-h, 100%, 25%);
     --blue-500: hsl(@blue-h, 100%, 20%);
     --blue-600: hsl(@blue-h, 100%, 15%);
@@ -733,10 +744,10 @@
     --blue-900: hsl(@blue-h, 100%, 5%);
 
     // Powder
-    --powder-050: hsl(@powder-h, 100%, 97.5%);
-    --powder-100: hsl(@powder-h, 85%, 96%);
-    --powder-200: hsl(@powder-h, 75%, 92%);
-    --powder-300: hsl(@powder-h, 70%, 88%);
+    --powder-050: hsl(@powder-h, 100%, 95%);
+    --powder-100: hsl(@powder-h, 85%, 93%);
+    --powder-200: hsl(@powder-h, 75%, 89%);
+    --powder-300: hsl(@powder-h, 70%, 86%);
     --powder-400: hsl(@powder-h, 55%, 28%);
     --powder-500: hsl(@powder-h, 60%, 24%);
     --powder-600: hsl(@powder-h, 70%, 20%);
@@ -745,11 +756,11 @@
     --powder-900: hsl(@powder-h, 75%, 8%);
 
     // Green
-    --green-025: hsl(@green-h, 100%, 97%);
-    --green-050: hsl(@green-h, 100%, 96%);
-    --green-100: hsl(@green-h, 100%, 94%);
-    --green-200: hsl(@green-h, 100%, 88%);
-    --green-300: hsl(@green-h, 100%, 82%);
+    --green-025: hsl(@green-h, 100%, 94%);
+    --green-050: hsl(@green-h, 100%, 91%);
+    --green-100: hsl(@green-h, 100%, 87%);
+    --green-200: hsl(@green-h, 100%, 83%);
+    --green-300: hsl(@green-h, 100%, 78%);
     --green-400: hsl(@green-h, 100%, 18%);
     --green-500: hsl(@green-h, 100%, 15%);
     --green-600: hsl(@green-h, 100%, 12%);
@@ -758,10 +769,10 @@
     --green-900: hsl(@green-h, 100%, 3%);
 
     // Yellow
-    --yellow-050: hsl(@yellow-h, 100%, 95%);
-    --yellow-100: hsl(@yellow-h, 100%, 92%);
-    --yellow-200: hsl(@yellow-h, 95%, 85%);
-    --yellow-300: hsl(@yellow-h, 95%, 78%);
+    --yellow-050: hsl(@yellow-h, 100%, 92%);
+    --yellow-100: hsl(@yellow-h, 100%, 88%);
+    --yellow-200: hsl(@yellow-h, 95%, 83%);
+    --yellow-300: hsl(@yellow-h, 95%, 75%);
     --yellow-400: hsl(@yellow-h, 100%, 28%);
     --yellow-500: hsl(@yellow-h, 100%, 26%);
     --yellow-600: hsl(@yellow-h, 100%, 23%);
@@ -770,10 +781,11 @@
     --yellow-900: hsl(@yellow-h, 100%, 7%);
 
     // Red
-    --red-050: hsl(@red-h, 100%, 97.5%);
-    --red-100: hsl(@red-h, 100%, 95%);
-    --red-200: hsl(@red-h, 100%, 90%);
-    --red-300: hsl(@red-h, 100%, 85%);
+    --red-025: hsl(@red-h, 100%, 97%);
+    --red-050: hsl(@red-h, 100%, 94%);
+    --red-100: hsl(@red-h, 100%, 92%);
+    --red-200: hsl(@red-h, 100%, 89%);
+    --red-300: hsl(@red-h, 100%, 86%);
     --red-400: hsl(@red-h, 100%, 35%);
     --red-500: hsl(@red-h, 100%, 29%);
     --red-600: hsl(@red-h, 100%, 23%);
@@ -816,6 +828,9 @@
     --focus-ring-error: fade(@red-600, 90%);
     --focus-ring-muted: fade(@black-400, 95%);
 
+    // Opacity
+    --_o-disabled: 0.8;
+
     // Shadows
     --bs-sm: none;
     --bs-md: none;
@@ -865,10 +880,10 @@
     --black-900: hsl(@black-h, @black-s, 100%);
 
     // Orange
-    --orange-050: hsl(@orange-h, 100%, 4%);
-    --orange-100: hsl(@orange-h, 100%, 8%);
-    --orange-200: hsl(@orange-h, 100%, 16%);
-    --orange-300: hsl(@orange-h, 100%, 24%);
+    --orange-050: hsl(@orange-h, 100%, 7%);
+    --orange-100: hsl(@orange-h, 100%, 9%);
+    --orange-200: hsl(@orange-h, 100%, 15%);
+    --orange-300: hsl(@orange-h, 100%, 22%);
     --orange-400: hsl(@orange-h, 100%, 64%);
     --orange-500: hsl(@orange-h, 100%, 71%);
     --orange-600: hsl(@orange-h, 100%, 77%);
@@ -877,10 +892,10 @@
     --orange-900: hsl(@orange-h, 100%, 91%);
 
     // Blue
-    --blue-050: hsl(@blue-h, 100%, 4%);
+    --blue-050: hsl(@blue-h, 100%, 7%);
     --blue-100: hsl(@blue-h, 100%, 11%);
-    --blue-200: hsl(@blue-h, 100%, 18%);
-    --blue-300: hsl(@blue-h, 100%, 25%);
+    --blue-200: hsl(@blue-h, 100%, 17%);
+    --blue-300: hsl(@blue-h, 100%, 24%);
     --blue-400: hsl(@blue-h, 100%, 75%);
     --blue-500: hsl(@blue-h, 100%, 80%);
     --blue-600: hsl(@blue-h, 100%, 85%);
@@ -889,10 +904,10 @@
     --blue-900: hsl(@blue-h, 100%, 95%);
 
     // Powder
-    --powder-050: hsl(@powder-h, 100%, 6%);
-    --powder-100: hsl(@powder-h, 90%, 8%);
+    --powder-050: hsl(@powder-h, 100%, 7%);
+    --powder-100: hsl(@powder-h, 95%, 10%);
     --powder-200: hsl(@powder-h, 80%, 14%);
-    --powder-300: hsl(@powder-h, 60%, 20%);
+    --powder-300: hsl(@powder-h, 76%, 19%);
     --powder-400: hsl(@powder-h, 55%, 72%);
     --powder-500: hsl(@powder-h, 60%, 76%);
     --powder-600: hsl(@powder-h, 70%, 80%);
@@ -901,11 +916,11 @@
     --powder-900: hsl(@powder-h, 75%, 92%);
 
     // Green
-    --green-025: hsl(@green-h, 100%, 3%);
-    --green-050: hsl(@green-h, 100%, 4%);
-    --green-100: hsl(@green-h, 100%, 6%);
-    --green-200: hsl(@green-h, 100%, 12%);
-    --green-300: hsl(@green-h, 100%, 18%);
+    --green-025: hsl(@green-h, 100%, 5%);
+    --green-050: hsl(@green-h, 100%, 6%);
+    --green-100: hsl(@green-h, 100%, 7%);
+    --green-200: hsl(@green-h, 100%, 11%);
+    --green-300: hsl(@green-h, 100%, 15%);
     --green-400: hsl(@green-h, 100%, 65%);
     --green-500: hsl(@green-h, 100%, 71%);
     --green-600: hsl(@green-h, 100%, 77%);
@@ -914,10 +929,10 @@
     --green-900: hsl(@green-h, 100%, 94%);
 
     // Yellow
-    --yellow-050: hsl(@yellow-h, 100%, 4%);
-    --yellow-100: hsl(@yellow-h, 100%, 8%);
-    --yellow-200: hsl(@yellow-h, 95%, 16%);
-    --yellow-300: hsl(@yellow-h, 95%, 24%);
+    --yellow-050: hsl(@yellow-h, 100%, 6%);
+    --yellow-100: hsl(@yellow-h, 100%, 9%);
+    --yellow-200: hsl(@yellow-h, 100%, 14%);
+    --yellow-300: hsl(@yellow-h, 100%, 20%);
     --yellow-400: hsl(@yellow-h, 100%, 55%);
     --yellow-500: hsl(@yellow-h, 100%, 63%);
     --yellow-600: hsl(@yellow-h, 100%, 71%);
@@ -926,10 +941,11 @@
     --yellow-900: hsl(@yellow-h, 100%, 95%);
 
     // Red
-    --red-050: hsl(@red-h, 100%, 4%);
-    --red-100: hsl(@red-h, 100%, 8%);
-    --red-200: hsl(@red-h, 100%, 16%);
-    --red-300: hsl(@red-h, 100%, 24%);
+    --red-025: hsl(@red-h, 100%, 7%);
+    --red-050: hsl(@red-h, 100%, 9%);
+    --red-100: hsl(@red-h, 100%, 12%);
+    --red-200: hsl(@red-h, 100%, 17%);
+    --red-300: hsl(@red-h, 100%, 22%);
     --red-400: hsl(@red-h, 100%, 70%);
     --red-500: hsl(@red-h, 100%, 75%);
     --red-600: hsl(@red-h, 100%, 80%);
@@ -972,6 +988,9 @@
     --fc-medium: var(--black-700);
     --fc-light: var(--black-500);
 
+    // Opacity
+    --_o-disabled: 0.8;
+
     // Shadows
     --bs-sm: none;
     --bs-md: none;

package/lib/css/stacks-dynamic.less

@@ -18,7 +18,6 @@
 @import "base/body.less";
 
 //  --  COMPONENTS
-@import "components/banners.less";
 @import "components/buttons.less";
 @import "components/links.less";
 @import "components/link-previews.less";

package/lib/css/stacks-static.less

@@ -20,13 +20,14 @@
 @import "components/activity-indicator.less";
 @import "components/avatars.less";
 @import "components/badges.less";
-@import "components/blank-states.less";
+@import "components/empty-states.less";
 @import "components/breadcrumbs.less";
 @import "components/button-groups.less";
 @import "components/cards.less";
 @import "components/code-blocks.less";
-@import "components/collapsible.less";
+@import "components/expandable.less";
 @import "components/inputs.less";
+@import "components/labels.less";
 @import "components/menu.less";
 @import "components/modals.less";
 @import "components/navigation.less";