@stackoverflow/stacks 0.76.0 → 1.0.1

package/lib/css/stacks-static.less

@@ -13,48 +13,48 @@
 //      The following items are elements which we DO NOT allow communities
 //      to modify via variables.
 //  ----------------------------------------------------------------------------
-@import "base/_stacks-reset.less";
-@import "base/_stacks-icons.less";
+@import "base/reset.less";
+@import "base/icons.less";
 
 //  --  COMPONENTS
-@import "components/_stacks-activity-indicator.less";
-@import "components/_stacks-avatars.less";
-@import "components/_stacks-badges.less";
-@import "components/_stacks-blank-states.less";
-@import "components/_stacks-breadcrumbs.less";
-@import "components/_stacks-button-groups.less";
-@import "components/_stacks-cards.less";
-@import "components/_stacks-code-blocks.less";
-@import "components/_stacks-collapsible.less";
-@import "components/_stacks-inputs.less";
-@import "components/_stacks-menu.less";
-@import "components/_stacks-modals.less";
-@import "components/_stacks-navigation.less";
-@import "components/_stacks-page-titles.less";
-@import "components/_stacks-popovers.less";
-@import "components/_stacks-post-summary.less";
-@import "components/_stacks-progress-bars.less";
-@import "components/_stacks-prose.less";
-@import "components/_stacks-spinner.less";
-@import "components/_stacks-tables.less";
-@import "components/_stacks-toggle-switches.less";
-@import "components/_stacks-topbar.less";
-@import "components/_stacks-uploader.less";
-@import "components/_stacks-user-cards.less";
-@import "components/_stacks-widget-static.less";
+@import "components/activity-indicator.less";
+@import "components/avatars.less";
+@import "components/badges.less";
+@import "components/blank-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/inputs.less";
+@import "components/menu.less";
+@import "components/modals.less";
+@import "components/navigation.less";
+@import "components/page-titles.less";
+@import "components/popovers.less";
+@import "components/post-summary.less";
+@import "components/progress-bars.less";
+@import "components/prose.less";
+@import "components/spinner.less";
+@import "components/tables.less";
+@import "components/toggle-switches.less";
+@import "components/topbar.less";
+@import "components/uploader.less";
+@import "components/user-cards.less";
+@import "components/widget-static.less";
 
 //  --  LESS CONSTANTS AND MIXINS
-@import "exports/_stacks-exports.less";
+@import "exports/exports.less";
 
 //  --  ATOMIC CLASSES
-@import "atomic/_stacks-borders.less";
-@import "atomic/_stacks-colors.less";
-@import "atomic/_stacks-flex.less";
-@import "atomic/_stacks-grid.less";
-@import "atomic/_stacks-spacing.less";
-@import "atomic/_stacks-typography.less";
-@import "atomic/_stacks-misc.less";
-@import "atomic/_stacks-width-height.less";
+@import "atomic/borders.less";
+@import "atomic/colors.less";
+@import "atomic/flex.less";
+@import "atomic/grid.less";
+@import "atomic/spacing.less";
+@import "atomic/typography.less";
+@import "atomic/misc.less";
+@import "atomic/width-height.less";
 
 /* stylelint-disable */
 #stacks-internals #screen-lg({
@@ -82,5 +82,5 @@
 /* stylelint-enable */
 
 //  --  CONFIG
-@import "base/_stacks-configuration-static.less";
-@import "base/_stacks-internals.less";
+@import "base/configuration-static.less";
+@import "base/internals.less";

package/lib/css/stacks.less

@@ -1,13 +1,13 @@
-//
-//  STACK OVERFLOW
-//  THE COMPLETE STANDALONE STACKS
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  This is where all the magic happens.
-//
-//  ============================================================================
-@import "stacks-static.less";
-@import "stacks-dynamic.less";
+//
+//  STACK OVERFLOW
+//  THE COMPLETE STANDALONE STACKS
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  This is where all the magic happens.
+//
+//  ============================================================================
+@import "stacks-static.less";
+@import "stacks-dynamic.less";

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/StackExchange/Stacks.git"
   },
-  "version": "0.76.0",
+  "version": "1.0.1",
   "files": [
     "dist",
     "lib"
@@ -35,19 +35,19 @@
   },
   "devDependencies": {
     "@11ty/eleventy": "^1.0.0",
-    "@highlightjs/cdn-assets": "^11.5.0",
+    "@highlightjs/cdn-assets": "^11.5.1",
     "@stackoverflow/stacks-editor": "^0.4.2",
     "@stackoverflow/stacks-icons": "^2.27.0",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
     "backstopjs": "^6.0.4",
-    "concurrently": "^7.0.0",
+    "concurrently": "^7.1.0",
     "css-loader": "^6.7.1",
-    "cssnano": "^5.1.5",
+    "cssnano": "^5.1.7",
     "docsearch.js": "^2.6.3",
     "eleventy-plugin-highlightjs": "^1.0.0",
     "eleventy-plugin-nesting-toc": "^1.3.0",
-    "eslint": "^8.12.0",
+    "eslint": "^8.13.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-no-unsanitized": "^4.0.1",
     "grunt-concurrent": "^3.0.0",
@@ -58,14 +58,14 @@
     "mini-css-extract-plugin": "^2.6.0",
     "postcss-less": "^6.0.0",
     "postcss-loader": "^6.2.1",
-    "prettier": "^2.6.1",
+    "prettier": "^2.6.2",
     "stylelint": "^14.6.1",
     "stylelint-config-recommended": "^7.0.0",
     "stylelint-config-standard": "^25.0.0",
     "terser-webpack-plugin": "^5.3.1",
     "ts-loader": "^9.2.8",
     "typescript": "^4.6.3",
-    "webpack": "^5.70.0",
+    "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
     "webpack-merge": "^5.8.0"
   },

package/lib/css/atomic/_stacks-spacing.less

@@ -1,168 +0,0 @@
-//
-//  STACK OVERFLOW
-//  SPACING
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  • MARGIN
-//  • PADDING
-//  • POSITIONING
-//
-//  ============================================================================
-//  $   MARGIN
-//  ----------------------------------------------------------------------------
-//  $$  All margin
-#stacks-internals #build-classes(
-    responsive,
-    '.m', { .template(@value) { margin: @value !important; } },
-    0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128 auto -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
-);
-
-//  $$  Top margin
-#stacks-internals #build-classes(
-    responsive,
-    '.mt', { .template(@value) { margin-top: @value !important; } },
-    0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
-);
-
-//  $$ Negative & auto top margin
-#stacks-internals #build-classes(
-    '.mt', { .template(@value) { margin-top: @value !important; } },
-    auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
-);
-
-//  $$  Right margin
-#stacks-internals #build-classes(
-    responsive,
-    '.mr', { .template(@value) { margin-right: @value !important; } },
-    0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
-);
-
-//  $$ Negative & auto right margin
-#stacks-internals #build-classes(
-    '.mr', { .template(@value) { margin-right: @value !important; } },
-    auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
-);
-
-//  $$  Bottom margin
-#stacks-internals #build-classes(
-    responsive,
-    '.mb', { .template(@value) { margin-bottom: @value !important; } },
-    0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
-);
-
-//  $$ Negative & auto bottom margin
-#stacks-internals #build-classes(
-    '.mb', { .template(@value) { margin-bottom: @value !important; } },
-    auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
-);
-
-//  $$  Left margin
-#stacks-internals #build-classes(
-    responsive,
-    '.ml', { .template(@value) { margin-left: @value !important; } },
-    0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
-);
-
-//  $$ Negative & auto left margin
-#stacks-internals #build-classes(
-    '.ml', { .template(@value) { margin-left: @value !important; } },
-    auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
-);
-
-//  $$  X-Axis margin
-#stacks-internals #build-classes(
-    '.mx', { .template(@value) { margin-left: @value !important; margin-right: @value !important; } },
-    0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128 auto -(@su2/2) -@su2 -@su4 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
-);
-
-//  $$  Y-Axis margin
-#stacks-internals #build-classes(
-    '.my', { .template(@value) { margin-top: @value !important; margin-bottom: @value !important; } },
-    0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128 auto -(@su2/2) -@su2 -@su4 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
-);
-
-//  ============================================================================
-//  $   PADDING
-//  ----------------------------------------------------------------------------
-//  $$  All padding
-#stacks-internals #build-classes(
-    responsive,
-    '.p', { .template(@value) { padding: @value !important; } },
-    0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
-);
-
-//  $$  Top Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pt', { .template(@value) { padding-top: @value !important; } },
-    0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
-);
-
-//  $$  Right Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pr', { .template(@value) { padding-right: @value !important; } },
-    0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
-);
-
-//  $$  Bottom Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pb', { .template(@value) { padding-bottom: @value !important; } },
-    0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
-);
-
-//  $$  Left Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pl', { .template(@value) { padding-left: @value !important; } },
-    0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
-);
-
-//  $$  X-Axis Padding
-#stacks-internals #build-classes(
-    '.px', { .template(@value) { padding-left: @value !important; padding-right: @value !important; } },
-    0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
-);
-
-//  $$  Y-Axis Padding
-#stacks-internals #build-classes(
-    '.py', { .template(@value) { padding-top: @value !important; padding-bottom: @value !important; } },
-    0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
-);
-
-//  ============================================================================
-//  $   POSITIONING
-//  ----------------------------------------------------------------------------
-//  $$ Top
-#stacks-internals #build-classes(
-    '.t', { .template(@value) { top: @value !important; } },
-    0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
-);
-
-//  $$ Right
-#stacks-internals #build-classes(
-    '.r', { .template(@value) { right: @value !important; } },
-    0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
-);
-
-//  $$ Bottom
-#stacks-internals #build-classes(
-    '.b', { .template(@value) { bottom: @value !important; } },
-    0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
-);
-
-//  $$ Left
-#stacks-internals #build-classes(
-    '.l', { .template(@value) { left: @value !important; } },
-    0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
-);
-
-//  $$ Inset
-#stacks-internals #build-classes(
-    '.i', { .template(@value) { inset: @value !important; } },
-    0 1px @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
-);

package/lib/css/atomic/_stacks-width-height.less

@@ -1,195 +0,0 @@
-//
-//  STACK OVERFLOW
-//  WIDTH & HEIGHT
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  • WIDTH
-//      • PERCENTAGE
-//      • STATIC
-//  • MAX-WIDTH
-//  • MIN-WIDTH
-//  • HEIGHT
-//      • PERCENTAGE
-//      • STATIC
-//  • MAX-HEIGHT
-//  • MIN-HEIGHT
-//
-//  ============================================================================
-//  $  WIDTH
-//  ----------------------------------------------------------------------------
-//  $$  PERCENTAGE AND VIEWPORT UNITS
-.w0 { width: 0 !important; }
-.w10 { width: 10% !important; }
-.w20 { width: 20% !important; }
-#stacks-internals #responsify('.w25', { width: 25% !important; });
-.w30 { width: 30% !important; }
-#stacks-internals #responsify('.w33', { width: 33.33333% !important; });
-.w40 { width: 40% !important; }
-#stacks-internals #responsify('.w50', { width: 50% !important; });
-.w60 { width: 60% !important; }
-#stacks-internals #responsify('.w66', { width: 66.66667% !important; });
-.w70 { width: 70% !important; }
-#stacks-internals #responsify('.w75', { width: 75% !important; });
-.w80 { width: 80% !important; }
-.w90 { width: 90% !important; }
-#stacks-internals #responsify('.w100', { width: 100% !important; });
-#stacks-internals #responsify('.w-auto', { width: auto !important; });
-#stacks-internals #responsify('.w-screen', { width: 100vw !important; });
-
-
-//  $$  STATIC
-.ws0,
-.w0 { width: 0 !important; }
-.ws1 { width: @s-step !important; }
-.ws2 { width: @s-step * 2 !important; }
-.ws3 { width: @s-step * 3 !important; }
-.ws4 { width: @s-step * 4 !important; }
-.ws5 { width: @s-step * 5 !important; }
-.ws6 { width: @s-step * 6 !important; }
-.ws7 { width: @s-step * 7 !important; }
-.ws8 { width: @s-step * 8 !important; }
-.ws9 { width: @s-step * 9 !important; }
-.ws10 { width: @s-step * 10 !important; }
-.ws11 { width: @s-step * 11 !important; }
-.ws12 { width: @s-full !important; }
-
-//  $$  SPACING UNITS
-.w2 { width: @su2 !important; }
-.w4 { width: @su4 !important; }
-.w6 { width: @su6 !important; }
-.w8 { width: @su8 !important; }
-.w12 { width: @su12 !important; }
-.w16 { width: @su16 !important; }
-.w24 { width: @su24 !important; }
-.w32 { width: @su32 !important; }
-.w48 { width: @su48 !important; }
-.w64 { width: @su64 !important; }
-.w96 { width: @su96 !important; }
-.w128 { width: @su128 !important; }
-
-//  ============================================================================
-//  $  MAX-WIDTH
-//  ----------------------------------------------------------------------------
-.wmx0 { max-width: 0 !important; }
-.wmx1 { max-width: @s-step !important; }
-.wmx2 { max-width: @s-step * 2 !important; }
-.wmx25 { max-width: 25% !important; }
-.wmx3 { max-width: @s-step * 3 !important; }
-.wmx4 { max-width: @s-step * 4 !important; }
-.wmx5 { max-width: @s-step * 5 !important; }
-.wmx50 { max-width: 50% !important; }
-.wmx6 { max-width: @s-step * 6 !important; }
-.wmx7 { max-width: @s-step * 7 !important; }
-.wmx75 { max-width: 75% !important; }
-.wmx8 { max-width: @s-step * 8 !important; }
-.wmx9 { max-width: @s-step * 9 !important; }
-.wmx10 { max-width: @s-step * 10 !important; }
-.wmx11 { max-width: @s-step * 11 !important; }
-.wmx12 { max-width: @s-full !important; }
-#stacks-internals #responsify('.wmx100', { max-width: 100% !important; });
-#stacks-internals #responsify('.wmx-initial', { max-width: initial !important; });
-#stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; });
-
-//  ============================================================================
-//  $  MIN-WIDTH
-//  ----------------------------------------------------------------------------
-.wmn0 { min-width: 0 !important; }
-.wmn1 { min-width: @s-step !important; }
-.wmn2 { min-width: @s-step * 2 !important; }
-.wmn25 { min-width: 25% !important; }
-.wmn3 { min-width: @s-step * 3 !important; }
-.wmn4 { min-width: @s-step * 4 !important; }
-.wmn5 { min-width: @s-step * 5 !important; }
-.wmn50 { min-width: 50% !important; }
-.wmn6 { min-width: @s-step * 6 !important; }
-.wmn7 { min-width: @s-step * 7 !important; }
-.wmn75 { min-width: 75% !important; }
-.wmn8 { min-width: @s-step * 8 !important; }
-.wmn9 { min-width: @s-step * 9 !important; }
-.wmn10 { min-width: @s-step * 10 !important; }
-.wmn11 { min-width: @s-step * 11 !important; }
-.wmn12 { min-width: @s-full !important; }
-#stacks-internals #responsify('.wmn100', { min-width: 100% !important; });
-#stacks-internals #responsify('.wmn-initial', { min-width: initial !important; });
-
-//  ============================================================================
-//  $  HEIGHT
-//  ----------------------------------------------------------------------------
-//  $$  PERCENTAGE AND VIEWPORT UNITS
-.h0 { height: 0 !important; }
-#stacks-internals #responsify('.h100', { height: 100% !important; });
-#stacks-internals #responsify('.h-auto', { height: auto !important; });
-#stacks-internals #responsify('.h-screen', { height: 100vh !important; });
-
-//  $$  STATIC
-.hs0,
-.h0 { height: 0 !important; }
-.hs1 { height: @s-step !important; }
-.hs2 { height: @s-step * 2 !important; }
-.hs3 { height: @s-step * 3 !important; }
-.hs4 { height: @s-step * 4 !important; }
-.hs5 { height: @s-step * 5 !important; }
-.hs6 { height: @s-step * 6 !important; }
-.hs7 { height: @s-step * 7 !important; }
-.hs8 { height: @s-step * 8 !important; }
-.hs9 { height: @s-step * 9 !important; }
-.hs10 { height: @s-step * 10 !important; }
-.hs11 { height: @s-step * 11 !important; }
-.hs12 { height: @s-full !important; }
-
-//  $$  SPACING UNITS
-.h2 { height: @su2 !important; }
-.h4 { height: @su4 !important; }
-.h6 { height: @su6 !important; }
-.h8 { height: @su8 !important; }
-.h12 { height: @su12 !important; }
-.h16 { height: @su16 !important; }
-.h24 { height: @su24 !important; }
-.h32 { height: @su32 !important; }
-.h48 { height: @su48 !important; }
-.h64 { height: @su64 !important; }
-.h96 { height: @su96 !important; }
-.h128 { height: @su128 !important; }
-
-//  ============================================================================
-//  $  MAX-HEIGHT
-//  ----------------------------------------------------------------------------
-.hmx0 { max-height: 0 !important; }
-.hmx1 { max-height: @s-step !important; }
-.hmx2 { max-height: @s-step * 2 !important; }
-.hmx3 { max-height: @s-step * 3 !important; }
-.hmx4 { max-height: @s-step * 4 !important; }
-.hmx5 { max-height: @s-step * 5 !important; }
-.hmx6 { max-height: @s-step * 6 !important; }
-.hmx7 { max-height: @s-step * 7 !important; }
-.hmx8 { max-height: @s-step * 8 !important; }
-.hmx9 { max-height: @s-step * 9 !important; }
-.hmx10 { max-height: @s-step * 10 !important; }
-.hmx11 { max-height: @s-step * 11 !important; }
-.hmx12 { max-height: @s-full !important; }
-#stacks-internals #responsify('.hmx100', { max-height: 100% !important; });
-#stacks-internals #responsify('.hmx-initial', { max-height: initial !important; });
-#stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; });
-
-//  ============================================================================
-//  $  MIN-HEIGHT
-//  ----------------------------------------------------------------------------
-.hmn0 { min-height: 0 !important; }
-.hmn1 { min-height: @s-step !important; }
-.hmn2 { min-height: @s-step * 2 !important; }
-.hmn3 { min-height: @s-step * 3 !important; }
-.hmn4 { min-height: @s-step * 4 !important; }
-.hmn5 { min-height: @s-step * 5 !important; }
-.hmn6 { min-height: @s-step * 6 !important; }
-.hmn7 { min-height: @s-step * 7 !important; }
-.hmn8 { min-height: @s-step * 8 !important; }
-.hmn9 { min-height: @s-step * 9 !important; }
-.hmn10 { min-height: @s-step * 10 !important; }
-.hmn11 { min-height: @s-step * 11 !important; }
-.hmn12 { min-height: @s-full !important; }
-#stacks-internals #responsify('.hmn100', { min-height: 100% !important; });
-#stacks-internals #responsify('.hmn-initial', { min-height: initial !important; });
-#stacks-internals #responsify('.hmx-screen', { min-height: 100vh !important; });

package/lib/css/exports/_stacks-constants-helpers.less

@@ -1,139 +0,0 @@
-//
-//  STACK OVERFLOW
-//  CONSTANTS -- HELPERS
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  These are helper variables to quickly set values.
-//  These SHOULD NOT be reset.
-//
-//  Table of Contents
-//  • z-index (zi-)
-//  • border-radius (br-)
-//  • box-shadow (bs-)
-//  • spacing units (su-)
-//  • transition easings (te-)
-//
-//  ============================================================================
-//  $   Z-INDEX (zi-)
-//      Used for a bird's eye view of components dependent on the z-axis.
-//      Try to avoid customizing these.
-//  ----------------------------------------------------------------------------
-@zi-hide:               -1;     //  Hide something all the elements
-@zi-base:               0;      //  Reset to 0
-@zi-selected:           25;     //  Pop above siblings
-@zi-active:             30;     //  Pop above selected siblings
-@zi-dropdown:           1000;   //  Dropdowns
-@zi-popovers:           2000;   //  Popovers, Popups, Autocompletes
-@zi-tooltips:           3000;   //  Tooltips
-@zi-banners:            4000;   //  Banners
-@zi-navigation:         5000;   //  Navigation Bars
-@zi-navigation-fixed:   5050;   //  Fixed navigation bars
-@zi-modals:             9000;   //  Modals
-@zi-modals-background:  @zi-modals - 50;
-
-//  ============================================================================
-//  $   RESPONSIVE BREAKPOINTS
-//  ----------------------------------------------------------------------------
-@breakpoint-lg: 1264px;
-@breakpoint-md: 980px;
-@breakpoint-sm: 640px;
-
-//  ============================================================================
-//  $   BORDER RADIUS (br-)
-//  ----------------------------------------------------------------------------
-@br-sm:                 3px;
-@br-md:                 5px;
-@br-lg:                 7px;
-@br-circle:             50%;
-
-//  ============================================================================
-//  $  SPACING UNITS (su-)
-//  ----------------------------------------------------------------------------
-@su1:                   1px;
-@su2:                   2px;
-@su4:                   4px;
-@su6:                   6px;
-@su8:                   8px;
-@su12:                  12px;
-@su16:                  16px;
-@su24:                  24px;
-@su32:                  32px;
-@su48:                  48px;
-@su64:                  64px;
-@su96:                  96px;
-@su128:                 128px;
-
-
-//  ============================================================================
-//  $  SIZING UNITS (su-)
-//  ----------------------------------------------------------------------------
-@s-full: 97.2307692rem; // Based on a pixel size of 1264px;
-@s-step: (@s-full / 12);
-
-// TODO These helpers allow us to create our own timing functions with
-// cubic-bezier ~ but perhaps the default timing functions are acceptable?
-
-//  ============================================================================
-//  $   TRANSITION EASINGS (te-)
-//  ----------------------------------------------------------------------------
-@te-smooth-slow:        cubic-bezier(0.25, 0.46, 0.45, 0.94);       // easeOutQuad
-@te-smooth:             cubic-bezier(0.165, 0.84, 0.44, 1);         // easeOutQuart
-@te-smooth-quick:       cubic-bezier(0.19, 1, 0.22, 1);             // easeOutExpo
-@te-back-out:           cubic-bezier(0.175, 0.885, 0.32, 1.275);    // easeOutBack
-@te-back-in-out:        cubic-bezier(0.68, -0.55, 0.265, 1.55);     // easeInOutBack
-@te-ease-in:            cubic-bezier(0.47, 0, 0.745, 0.715);        // easeIn
-@te-ease-in-out:        cubic-bezier(0.445, 0.05, 0.55, 0.95);      // easeInOut
-@te-ease-out:           cubic-bezier(0.39, 0.575, 0.565, 1);        // easeOut
-
-@default-transition-duration:       0.1s;
-@transition-time:                   @default-transition-duration;
-
-
-//  ============================================================================
-//  $   SCROLLBAR STYLING
-//  ----------------------------------------------------------------------------
-@scrollbar-styles: {
-    &::-webkit-scrollbar {
-        width: @su12 - @su2;
-        height: @su12 - @su2;
-        background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-track {
-        border-radius: @su12 - @su2;
-        background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        border-radius: @su12 - @su2;
-        background-color: var(--scrollbar);
-    }
-
-    &::-webkit-scrollbar-corner {
-        background-color: transparent;
-        border-color: transparent;
-    }
-
-    scrollbar-color: var(--scrollbar) transparent;
-}
-
-//  ============================================================================
-//  $   FOCUS STYLING
-//  ----------------------------------------------------------------------------
-@focus-styles: {
-    // Hide focus styles if they're not needed, for example,
-    // when an element receives focus via the mouse.
-    &:focus:not(:focus-visible) {
-        outline: none;
-        box-shadow: none;
-    }
-
-    // Show focus styles on keyboard focus.
-    &:focus-visible {
-        outline: none;
-        box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
-    }
-}