@stackoverflow/stacks 0.76.0 → 1.0.0-beta.0

package/package.json

@@ -1,87 +1,87 @@
-{
-  "name": "@stackoverflow/stacks",
-  "description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/StackExchange/Stacks.git"
-  },
-  "version": "0.76.0",
-  "files": [
-    "dist",
-    "lib"
-  ],
-  "main": "./dist/js/stacks.js",
-  "types": "./dist/index.d.ts",
-  "style": "./dist/css/stacks.css",
-  "less": "./lib/css/stacks.less",
-  "unpkg": "dist/css/stacks.min.css",
-  "scripts": {
-    "start": "concurrently -n w: npm:start:*",
-    "build": "concurrently -n w: npm:build:*",
-    "build:bundle": "webpack --mode=production",
-    "build:docs": "webpack --mode=production --config ./docs/webpack.config.js && cd ./docs && eleventy",
-    "start:webpack": "webpack --watch --config ./docs/webpack.config.js",
-    "start:eleventy": "cd ./docs && eleventy --serve",
-    "test": "backstop test",
-    "approve": "backstop approve",
-    "prepublishOnly": "npm run build",
-    "lint:eslint": "eslint .",
-    "lint:prettier": "prettier --check . --end-of-line auto"
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@popperjs/core": "^2.11.4",
-    "stimulus": "^2.0.0"
-  },
-  "devDependencies": {
-    "@11ty/eleventy": "^1.0.0",
-    "@highlightjs/cdn-assets": "^11.5.0",
-    "@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",
-    "backstopjs": "^6.0.4",
-    "concurrently": "^7.0.0",
-    "css-loader": "^6.7.1",
-    "cssnano": "^5.1.5",
-    "docsearch.js": "^2.6.3",
-    "eleventy-plugin-highlightjs": "^1.0.0",
-    "eleventy-plugin-nesting-toc": "^1.3.0",
-    "eslint": "^8.12.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-no-unsanitized": "^4.0.1",
-    "grunt-concurrent": "^3.0.0",
-    "jquery": "^3.6.0",
-    "less-loader": "^10.2.0",
-    "list.js": "^2.3.1",
-    "markdown-it": "^12.3.2",
-    "mini-css-extract-plugin": "^2.6.0",
-    "postcss-less": "^6.0.0",
-    "postcss-loader": "^6.2.1",
-    "prettier": "^2.6.1",
-    "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-cli": "^4.9.2",
-    "webpack-merge": "^5.8.0"
-  },
-  "browserslist": [
-    "last 2 versions",
-    "not dead",
-    "not ie > 0",
-    "not op_mini all",
-    "not baidu > 0",
-    "not and_ff > 0",
-    "not and_qq > 0",
-    "not kaios > 0",
-    "not op_mob > 0",
-    "not ie_mob > 0",
-    "not and_uc > 0",
-    "not Samsung > 0",
-    "not Android > 0"
-  ]
-}
+{
+  "name": "@stackoverflow/stacks",
+  "description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/StackExchange/Stacks.git"
+  },
+  "version": "1.0.0-beta.0",
+  "files": [
+    "dist",
+    "lib"
+  ],
+  "main": "./dist/js/stacks.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/css/stacks.css",
+  "less": "./lib/css/stacks.less",
+  "unpkg": "dist/css/stacks.min.css",
+  "scripts": {
+    "start": "concurrently -n w: npm:start:*",
+    "build": "concurrently -n w: npm:build:*",
+    "build:bundle": "webpack --mode=production",
+    "build:docs": "webpack --mode=production --config ./docs/webpack.config.js && cd ./docs && eleventy",
+    "start:webpack": "webpack --watch --config ./docs/webpack.config.js",
+    "start:eleventy": "cd ./docs && eleventy --serve",
+    "test": "backstop test",
+    "approve": "backstop approve",
+    "prepublishOnly": "npm run build",
+    "lint:eslint": "eslint .",
+    "lint:prettier": "prettier --check . --end-of-line auto"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@popperjs/core": "^2.11.4",
+    "stimulus": "^2.0.0"
+  },
+  "devDependencies": {
+    "@11ty/eleventy": "^1.0.0",
+    "@highlightjs/cdn-assets": "^11.5.0",
+    "@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",
+    "backstopjs": "^6.0.4",
+    "concurrently": "^7.1.0",
+    "css-loader": "^6.7.1",
+    "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-config-prettier": "^8.5.0",
+    "eslint-plugin-no-unsanitized": "^4.0.1",
+    "grunt-concurrent": "^3.0.0",
+    "jquery": "^3.6.0",
+    "less-loader": "^10.2.0",
+    "list.js": "^2.3.1",
+    "markdown-it": "^12.3.2",
+    "mini-css-extract-plugin": "^2.6.0",
+    "postcss-less": "^6.0.0",
+    "postcss-loader": "^6.2.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.71.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-merge": "^5.8.0"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "not dead",
+    "not ie > 0",
+    "not op_mini all",
+    "not baidu > 0",
+    "not and_ff > 0",
+    "not and_qq > 0",
+    "not kaios > 0",
+    "not op_mob > 0",
+    "not ie_mob > 0",
+    "not and_uc > 0",
+    "not Samsung > 0",
+    "not Android > 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);
-    }
-}