diff --git a/package-lock.json b/package-lock.json index 29d3197568..38b687b10b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "delay-cli": "^1.1.0", "eslint": "^8.2.0", "eslint-config-xo": "^0.39.0", - "eslint-plugin-import": "^2.25.2", + "eslint-plugin-import": "^2.25.3", "eslint-plugin-unicorn": "^38.0.1", "find-unused-sass-variables": "^3.1.0", "focus-visible": "^5.2.0", @@ -44,15 +44,15 @@ "karma-jasmine": "^4.0.1", "karma-jasmine-html-reporter": "^1.7.0", "karma-rollup-preprocessor": "^7.0.7", - "linkinator": "^2.14.5", + "linkinator": "^2.16.2", "lockfile-lint": "^4.6.2", - "nodemon": "^2.0.14", + "nodemon": "^2.0.15", "npm-run-all": "^4.1.5", "pa11y-ci": "^2.4.2", "pa11y-ci-reporter-html": "^3.0.2", "postcss": "^8.3.11", "postcss-cli": "^9.0.2", - "rollup": "^2.59.0", + "rollup": "^2.60.0", "rollup-plugin-istanbul": "^3.0.0", "rtlcss": "^3.5.0", "sass": "^1.43.4", @@ -60,7 +60,7 @@ "stylelint": "^13.13.1", "stylelint-config-twbs-bootstrap": "^2.2.4", "tarteaucitronjs": "^1.9.5", - "terser": "^5.9.0", + "terser": "^5.10.0", "vnu-jar": "21.10.12" }, "peerDependencies": { @@ -5543,9 +5543,9 @@ } }, "node_modules/eslint-plugin-import": { - "version": "2.25.2", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.2.tgz", - "integrity": "sha512-qCwQr9TYfoBHOFcVGKY9C9unq05uOxxdklmBXLVvcwo68y5Hta6/GzCZEMx2zQiu0woKNEER0LE7ZgaOfBU14g==", + "version": "2.25.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.3.tgz", + "integrity": "sha512-RzAVbby+72IB3iOEL8clzPLzL3wpDrlwjsTBAQXgyp5SeTqqY+0bFubwuo+y/HLhNZcXV4XqTBO4LGsfyHIDXg==", "dev": true, "dependencies": { "array-includes": "^3.1.4", @@ -5553,9 +5553,9 @@ "debug": "^2.6.9", "doctrine": "^2.1.0", "eslint-import-resolver-node": "^0.3.6", - "eslint-module-utils": "^2.7.0", + "eslint-module-utils": "^2.7.1", "has": "^1.0.3", - "is-core-module": "^2.7.0", + "is-core-module": "^2.8.0", "is-glob": "^4.0.3", "minimatch": "^3.0.4", "object.values": "^1.1.5", @@ -8559,9 +8559,9 @@ "dev": true }, "node_modules/linkinator": { - "version": "2.14.5", - "resolved": "https://registry.npmjs.org/linkinator/-/linkinator-2.14.5.tgz", - "integrity": "sha512-0BwL+zY8P+m7pNHJGZxx5/KKBw7UqcoYUropRpon1+E5cf6zLlVRdEWh311JW1Ze1dLGjtHrppymEG21dNHMcg==", + "version": "2.16.2", + "resolved": "https://registry.npmjs.org/linkinator/-/linkinator-2.16.2.tgz", + "integrity": "sha512-5tHSz6gMN0z25+Pk4lZnU0Edr1lJLNuk+MCfQa2NxF4f1rfKS8Lo3JEwxTciVzwVHHdBpydAgmWYOgylNlwyDQ==", "dev": true, "dependencies": { "chalk": "^4.0.0", @@ -9637,21 +9637,21 @@ } }, "node_modules/nodemon": { - "version": "2.0.14", - "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.14.tgz", - "integrity": "sha512-frcpDx+PviKEQRSYzwhckuO2zoHcBYLHI754RE9z5h1RGtrngerc04mLpQQCPWBkH/2ObrX7We9YiwVSYZpFJQ==", + "version": "2.0.15", + "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.15.tgz", + "integrity": "sha512-gdHMNx47Gw7b3kWxJV64NI+Q5nfl0y5DgDbiVtShiwa7Z0IZ07Ll4RLFo6AjrhzMtoEZn5PDE3/c2AbVsiCkpA==", "dev": true, "hasInstallScript": true, "dependencies": { - "chokidar": "^3.2.2", - "debug": "^3.2.6", + "chokidar": "^3.5.2", + "debug": "^3.2.7", "ignore-by-default": "^1.0.1", "minimatch": "^3.0.4", - "pstree.remy": "^1.1.7", + "pstree.remy": "^1.1.8", "semver": "^5.7.1", "supports-color": "^5.5.0", "touch": "^3.1.0", - "undefsafe": "^2.0.3", + "undefsafe": "^2.0.5", "update-notifier": "^5.1.0" }, "bin": { @@ -12156,9 +12156,9 @@ } }, "node_modules/rollup": { - "version": "2.59.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.59.0.tgz", - "integrity": "sha512-l7s90JQhCQ6JyZjKgo7Lq1dKh2RxatOM+Jr6a9F7WbS9WgKbocyUSeLmZl8evAse7y96Ae98L2k1cBOwWD8nHw==", + "version": "2.60.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.60.0.tgz", + "integrity": "sha512-cHdv9GWd58v58rdseC8e8XIaPUo8a9cgZpnCMMDGZFDZKEODOiPPEQFXLriWr/TjXzhPPmG5bkAztPsOARIcGQ==", "dev": true, "bin": { "rollup": "dist/bin/rollup" @@ -13744,9 +13744,9 @@ } }, "node_modules/terser": { - "version": "5.9.0", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.9.0.tgz", - "integrity": "sha512-h5hxa23sCdpzcye/7b8YqbE5OwKca/ni0RQz1uRX3tGh8haaGHqcuSqbGRybuAKNdntZ0mDgFNXPJ48xQ2RXKQ==", + "version": "5.10.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz", + "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==", "dev": true, "dependencies": { "commander": "^2.20.0", @@ -13758,6 +13758,14 @@ }, "engines": { "node": ">=10" + }, + "peerDependencies": { + "acorn": "^8.5.0" + }, + "peerDependenciesMeta": { + "acorn": { + "optional": true + } } }, "node_modules/terser/node_modules/commander": { @@ -14057,27 +14065,9 @@ } }, "node_modules/undefsafe": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.3.tgz", - "integrity": "sha512-nrXZwwXrD/T/JXeygJqdCO6NZZ1L66HrxM/Z7mIq2oPanoN0F1nLx3lwJMu6AwJY69hdixaFQOuoYsMjE5/C2A==", - "dev": true, - "dependencies": { - "debug": "^2.2.0" - } - }, - "node_modules/undefsafe/node_modules/debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/undefsafe/node_modules/ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz", + "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==", "dev": true }, "node_modules/unicode-canonical-property-names-ecmascript": { @@ -18999,9 +18989,9 @@ } }, "eslint-plugin-import": { - "version": "2.25.2", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.2.tgz", - "integrity": "sha512-qCwQr9TYfoBHOFcVGKY9C9unq05uOxxdklmBXLVvcwo68y5Hta6/GzCZEMx2zQiu0woKNEER0LE7ZgaOfBU14g==", + "version": "2.25.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.3.tgz", + "integrity": "sha512-RzAVbby+72IB3iOEL8clzPLzL3wpDrlwjsTBAQXgyp5SeTqqY+0bFubwuo+y/HLhNZcXV4XqTBO4LGsfyHIDXg==", "dev": true, "requires": { "array-includes": "^3.1.4", @@ -19009,9 +18999,9 @@ "debug": "^2.6.9", "doctrine": "^2.1.0", "eslint-import-resolver-node": "^0.3.6", - "eslint-module-utils": "^2.7.0", + "eslint-module-utils": "^2.7.1", "has": "^1.0.3", - "is-core-module": "^2.7.0", + "is-core-module": "^2.8.0", "is-glob": "^4.0.3", "minimatch": "^3.0.4", "object.values": "^1.1.5", @@ -21125,9 +21115,9 @@ "dev": true }, "linkinator": { - "version": "2.14.5", - "resolved": "https://registry.npmjs.org/linkinator/-/linkinator-2.14.5.tgz", - "integrity": "sha512-0BwL+zY8P+m7pNHJGZxx5/KKBw7UqcoYUropRpon1+E5cf6zLlVRdEWh311JW1Ze1dLGjtHrppymEG21dNHMcg==", + "version": "2.16.2", + "resolved": "https://registry.npmjs.org/linkinator/-/linkinator-2.16.2.tgz", + "integrity": "sha512-5tHSz6gMN0z25+Pk4lZnU0Edr1lJLNuk+MCfQa2NxF4f1rfKS8Lo3JEwxTciVzwVHHdBpydAgmWYOgylNlwyDQ==", "dev": true, "requires": { "chalk": "^4.0.0", @@ -21926,20 +21916,20 @@ } }, "nodemon": { - "version": "2.0.14", - "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.14.tgz", - "integrity": "sha512-frcpDx+PviKEQRSYzwhckuO2zoHcBYLHI754RE9z5h1RGtrngerc04mLpQQCPWBkH/2ObrX7We9YiwVSYZpFJQ==", + "version": "2.0.15", + "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.15.tgz", + "integrity": "sha512-gdHMNx47Gw7b3kWxJV64NI+Q5nfl0y5DgDbiVtShiwa7Z0IZ07Ll4RLFo6AjrhzMtoEZn5PDE3/c2AbVsiCkpA==", "dev": true, "requires": { - "chokidar": "^3.2.2", - "debug": "^3.2.6", + "chokidar": "^3.5.2", + "debug": "^3.2.7", "ignore-by-default": "^1.0.1", "minimatch": "^3.0.4", - "pstree.remy": "^1.1.7", + "pstree.remy": "^1.1.8", "semver": "^5.7.1", "supports-color": "^5.5.0", "touch": "^3.1.0", - "undefsafe": "^2.0.3", + "undefsafe": "^2.0.5", "update-notifier": "^5.1.0" }, "dependencies": { @@ -23839,9 +23829,9 @@ } }, "rollup": { - "version": "2.59.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.59.0.tgz", - "integrity": "sha512-l7s90JQhCQ6JyZjKgo7Lq1dKh2RxatOM+Jr6a9F7WbS9WgKbocyUSeLmZl8evAse7y96Ae98L2k1cBOwWD8nHw==", + "version": "2.60.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.60.0.tgz", + "integrity": "sha512-cHdv9GWd58v58rdseC8e8XIaPUo8a9cgZpnCMMDGZFDZKEODOiPPEQFXLriWr/TjXzhPPmG5bkAztPsOARIcGQ==", "dev": true, "requires": { "fsevents": "~2.3.2" @@ -25048,9 +25038,9 @@ } }, "terser": { - "version": "5.9.0", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.9.0.tgz", - "integrity": "sha512-h5hxa23sCdpzcye/7b8YqbE5OwKca/ni0RQz1uRX3tGh8haaGHqcuSqbGRybuAKNdntZ0mDgFNXPJ48xQ2RXKQ==", + "version": "5.10.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz", + "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==", "dev": true, "requires": { "commander": "^2.20.0", @@ -25288,30 +25278,10 @@ } }, "undefsafe": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.3.tgz", - "integrity": "sha512-nrXZwwXrD/T/JXeygJqdCO6NZZ1L66HrxM/Z7mIq2oPanoN0F1nLx3lwJMu6AwJY69hdixaFQOuoYsMjE5/C2A==", - "dev": true, - "requires": { - "debug": "^2.2.0" - }, - "dependencies": { - "debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, - "requires": { - "ms": "2.0.0" - } - }, - "ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true - } - } + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz", + "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==", + "dev": true }, "unicode-canonical-property-names-ecmascript": { "version": "2.0.0", diff --git a/package.json b/package.json index 1d5c2bb2e0..ce8075ceac 100644 --- a/package.json +++ b/package.json @@ -119,7 +119,7 @@ "delay-cli": "^1.1.0", "eslint": "^8.2.0", "eslint-config-xo": "^0.39.0", - "eslint-plugin-import": "^2.25.2", + "eslint-plugin-import": "^2.25.3", "eslint-plugin-unicorn": "^38.0.1", "find-unused-sass-variables": "^3.1.0", "focus-visible": "^5.2.0", @@ -138,15 +138,15 @@ "karma-jasmine": "^4.0.1", "karma-jasmine-html-reporter": "^1.7.0", "karma-rollup-preprocessor": "^7.0.7", - "linkinator": "^2.14.5", + "linkinator": "^2.16.2", "lockfile-lint": "^4.6.2", - "nodemon": "^2.0.14", + "nodemon": "^2.0.15", "npm-run-all": "^4.1.5", "pa11y-ci": "^2.4.2", "pa11y-ci-reporter-html": "^3.0.2", "postcss": "^8.3.11", "postcss-cli": "^9.0.2", - "rollup": "^2.59.0", + "rollup": "^2.60.0", "rollup-plugin-istanbul": "^3.0.0", "rtlcss": "^3.5.0", "sass": "^1.43.4", @@ -154,7 +154,7 @@ "stylelint": "^13.13.1", "stylelint-config-twbs-bootstrap": "^2.2.4", "tarteaucitronjs": "^1.9.5", - "terser": "^5.9.0", + "terser": "^5.10.0", "vnu-jar": "21.10.12" }, "files": [ diff --git a/scss/_maps.scss b/scss/_maps.scss new file mode 100644 index 0000000000..183862288b --- /dev/null +++ b/scss/_maps.scss @@ -0,0 +1,57 @@ +// Re-assigned maps +// +// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more. + +// scss-docs-start theme-colors-rgb +$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default; +// scss-docs-end theme-colors-rgb + +// Boosted mod +$background-colors: map-merge( + $theme-colors, + ( + "success": $supporting-green, + "info": $supporting-blue, + "warning": $supporting-yellow, + "danger": $danger + ) +) !default; +// End mod + +// Utilities maps +// +// Extends the default `$theme-colors` maps to help create our utilities. + +// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign. +// scss-docs-start utilities-colors +$utilities-colors: $theme-colors-rgb !default; +// scss-docs-end utilities-colors + +// scss-docs-start utilities-text-colors +// Boosted mod: content of $utilities-text +$utilities-text: ( + "primary": to-rgb($accessible-orange), + "light": to-rgb($gray-500), + "white": to-rgb($white), + "body": to-rgb($body-color), +) !default; +$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default; +// scss-docs-end utilities-text-colors + +// scss-docs-start utilities-bg-colors +$utilities-bg: map-merge( + $utilities-colors, + ( + "black": to-rgb($black), + "white": to-rgb($white), + "body": to-rgb($body-bg) + ) +) !default; +$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default; +// scss-docs-end utilities-bg-colors + +$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; + +$gutters: $spacers !default; + +$alert-colors: map-remove($theme-colors, "primary", "secondary", "light", "dark") !default; // Boosted mod diff --git a/scss/_variables.scss b/scss/_variables.scss index caf860c2c9..64a6aefbca 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -110,22 +110,6 @@ $theme-colors: ( ) !default; // scss-docs-end theme-colors-map -// scss-docs-start theme-colors-rgb -$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default; -// scss-docs-end theme-colors-rgb - -// Boosted mod -$background-colors: map-merge( - $theme-colors, - ( - "success": $supporting-green, - "info": $supporting-blue, - "warning": $supporting-yellow, - "danger": $danger - ) -) !default; -// End mod - // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast $min-contrast-ratio: 4.5 !default; @@ -441,8 +425,6 @@ $spacers: ( 4: $spacer * 1.5, 5: $spacer * 3, ) !default; - -$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; // scss-docs-end spacer-variables-maps $target-size: 2.75rem !default; // Boosted mod: minimum target size (44×44px) @@ -468,38 +450,6 @@ $body-bg: $white !default; $body-color: $black !default; $body-text-align: null !default; -// Utilities maps -// -// Extends the default `$theme-colors` maps to help create our utilities. - -// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign. -// scss-docs-start utilities-colors -$utilities-colors: $theme-colors-rgb !default; -// scss-docs-end utilities-colors - -// scss-docs-start utilities-text-colors -// Boosted mod: content of $utilities-text -$utilities-text: ( - "primary": to-rgb($accessible-orange), - "light": to-rgb($gray-500), - "white": to-rgb($white), - "body": to-rgb($body-color), -) !default; -$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default; -// scss-docs-end utilities-text-colors - -// scss-docs-start utilities-bg-colors -$utilities-bg: map-merge( - $utilities-colors, - ( - "black": to-rgb($black), - "white": to-rgb($white), - "body": to-rgb($body-bg) - ) -) !default; -$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default; -// scss-docs-end utilities-bg-colors - // Links // // Style anchor elements. @@ -577,8 +527,6 @@ $grid-gutter-width: $spacer !default; $grid-gutter-breakpoint: "md" !default; // Boosted mod: gutter depends on breakpoint $grid-row-columns: 6 !default; -$gutters: $spacers !default; - // Container padding $container-padding-x: $grid-gutter-width * .25 !default; @@ -1612,7 +1560,6 @@ $alert-border-width: $border-width !default; // Boosted mod $alert-padding-sm: $spacer * .5 !default; -$alert-colors: map-remove($theme-colors, "primary", "secondary", "light", "dark") !default; $alert-icons: ( "success": var(--#{$boosted-variable-prefix}success-icon), "info": escape-svg($info-icon), diff --git a/scss/boosted-grid.scss b/scss/boosted-grid.scss index a372182442..ea2b8ffc5e 100644 --- a/scss/boosted-grid.scss +++ b/scss/boosted-grid.scss @@ -11,6 +11,7 @@ */ @import "functions"; @import "variables"; +@import "maps"; @import "mixins/breakpoints"; @import "mixins/container"; diff --git a/scss/boosted-reboot.scss b/scss/boosted-reboot.scss index 360c904eda..419ee00152 100644 --- a/scss/boosted-reboot.scss +++ b/scss/boosted-reboot.scss @@ -13,6 +13,7 @@ @import "functions"; @import "variables"; +@import "maps"; @import "mixins"; @import "root"; @import "reboot"; diff --git a/scss/boosted-utilities.scss b/scss/boosted-utilities.scss index da65a8899f..0e1204cf7c 100644 --- a/scss/boosted-utilities.scss +++ b/scss/boosted-utilities.scss @@ -14,6 +14,7 @@ @import "functions"; @import "variables"; +@import "maps"; @import "mixins"; @import "utilities"; diff --git a/scss/boosted.scss b/scss/boosted.scss index b8f6517a50..6ea687872b 100644 --- a/scss/boosted.scss +++ b/scss/boosted.scss @@ -14,6 +14,7 @@ // Configuration @import "functions"; @import "variables"; +@import "maps"; @import "mixins"; @import "utilities"; diff --git a/site/content/docs/5.1/content/tables.md b/site/content/docs/5.1/content/tables.md index a0f6c3df8a..43a1e0e13a 100644 --- a/site/content/docs/5.1/content/tables.md +++ b/site/content/docs/5.1/content/tables.md @@ -204,7 +204,7 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` ## Vertical alignment -Table cells of `` are always vertical aligned to the bottom. Table cells in `` inherit their alignment from `` and are aligned to the the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed. +Table cells of `` are always vertical aligned to the bottom. Table cells in `` inherit their alignment from `
` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.
diff --git a/site/content/docs/5.1/customize/sass.md b/site/content/docs/5.1/customize/sass.md index f580460606..2c21302eb9 100644 --- a/site/content/docs/5.1/customize/sass.md +++ b/site/content/docs/5.1/customize/sass.md @@ -59,10 +59,15 @@ In your `custom.scss`, you'll import Boosted's source Sass files. You have two o // 3. Include remainder of required Boosted stylesheets @import "../node_modules/boosted/scss/variables"; + +// 4. Include any default map overrides here + +// 5. Include remainder of required parts +@import "../node_modules/boosted/scss/maps"; @import "../node_modules/boosted/scss/mixins"; @import "../node_modules/boosted/scss/root"; -// 4. Include any optional Boosted CSS as needed +// 6. Optionally include any other parts as needed @import "../node_modules/boosted/scss/utilities"; @import "../node_modules/boosted/scss/reboot"; @import "../node_modules/boosted/scss/type"; @@ -71,10 +76,10 @@ In your `custom.scss`, you'll import Boosted's source Sass files. You have two o @import "../node_modules/boosted/scss/grid"; @import "../node_modules/boosted/scss/helpers"; -// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` +// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` @import "../node_modules/boosted/scss/utilities/api"; -// 6. Add additional custom code here +// 8. Add additional custom code here ``` With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Boosted under the `// Optional` section as needed. We suggest using the full import stack from our `boosted.scss` file as your starting point. diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md index a677a60164..c4cc98fb04 100644 --- a/site/content/docs/5.1/migration.md +++ b/site/content/docs/5.1/migration.md @@ -15,6 +15,51 @@ We only replaced `Bootstrap` with `Boosted`—especially in code examples and fi ## v5.2.0 +### New `_maps.scss` + +Boosted v5.2.0 introduced a new Sass file, `_maps.scss`, that pulled out several Sass maps from `_variables.scss` to fix an issue where updates to an original map were not applied to secondary maps that extend them. For example, updates to `$theme-colors` were not being applied to other theme maps that relied on `$theme-colors`, breaking key customization workflows. In short, Sass has a limitation where once a default variable or map has been _used_, it cannot be updated. + +This is why variable customizations in Boosted have to come after `@import "functions"`, but before `@import "variables"` and the rest of our import stack. The same applies to Sass maps—you must override the defaults before the defaults get used. The following maps have been moved to the new `_maps.scss`: + +- `$theme-colors-rgb` +- `$background-colors` +- `$utilities-colors` +- `$utilities-text` +- `$utilities-text-colors` +- `$utilities-bg` +- `$utilities-bg-colors` +- `$negative-spacers` +- `$gutters` +- `$alert-colors` + +Your custom Boosted CSS builds should now look something like this with a separate maps import. + +```diff + // Functions come first + @import "functions"; + // Optional variable overrides here ++ $custom-color: #df711b; ++ $custom-theme-colors: ( ++ "custom": $custom-color ++ ); + // Variables come next + @import "variables"; ++ // Optional Sass map overrides here ++ $theme-colors: map-merge($theme-colors, $custom-theme-colors); ++ ++ // Followed by our default maps ++ @import "maps"; ++ + // Rest of our imports + @import "mixins"; + @import "utilities"; + @import "root"; + @import "reboot"; + // etc +``` + +### Key changes + - **Introduced new `$enable-container-classes` option.** Now when opting into the experimental CSS Grid layout, `.container-*` classes will still be compiled, unless this option is set to `false`. ## Dependencies diff --git a/site/content/docs/5.1/utilities/background.md b/site/content/docs/5.1/utilities/background.md index a717da545c..73d17bfb44 100644 --- a/site/content/docs/5.1/utilities/background.md +++ b/site/content/docs/5.1/utilities/background.md @@ -104,6 +104,14 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen {{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}} +RGB colors are generated from a separate Sass map: + +{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}} + +And background color opacities build on that with their own map that's consumed by the utilities API: + +{{< scss-docs name="utilities-bg-colors" file="scss/_maps.scss" >}} + ### Mixins **No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients. diff --git a/site/content/docs/5.1/utilities/colors.md b/site/content/docs/5.1/utilities/colors.md index d593f89916..78938d1490 100644 --- a/site/content/docs/5.1/utilities/colors.md +++ b/site/content/docs/5.1/utilities/colors.md @@ -107,11 +107,11 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen RGB colors are generated from a separate Sass map: -{{< scss-docs name="theme-colors-rgb" file="scss/_variables.scss" >}} +{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}} And color opacities build on that with their own map that's consumed by the utilities API: -{{< scss-docs name="utilities-text-colors" file="scss/_variables.scss" >}} +{{< scss-docs name="utilities-text-colors" file="scss/_maps.scss" >}} ### Utilities API