diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 69e6ca746f2b..adb8fb9c3ead 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -10,27 +10,27 @@ }, { "path": "./dist/css/bootstrap-reboot.css", - "maxSize": "3.5 kB" + "maxSize": "4.25 kB" }, { "path": "./dist/css/bootstrap-reboot.min.css", - "maxSize": "3.25 kB" + "maxSize": "4.25 kB" }, { "path": "./dist/css/bootstrap-utilities.css", - "maxSize": "11.75 kB" + "maxSize": "12.75 kB" }, { "path": "./dist/css/bootstrap-utilities.min.css", - "maxSize": "11.0 kB" + "maxSize": "12.0 kB" }, { "path": "./dist/css/bootstrap.css", - "maxSize": "32.5 kB" + "maxSize": "33.75 kB" }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "30.25 kB" + "maxSize": "31.25 kB" }, { "path": "./dist/js/bootstrap.bundle.js", diff --git a/.github/workflows/node-sass.yml b/.github/workflows/node-sass.yml deleted file mode 100644 index 33478df4f0ba..000000000000 --- a/.github/workflows/node-sass.yml +++ /dev/null @@ -1,49 +0,0 @@ -name: CSS (node-sass) - -on: - push: - branches: - - main - pull_request: - workflow_dispatch: - -env: - FORCE_COLOR: 2 - NODE: 22 - -permissions: - contents: read - -jobs: - css: - runs-on: ubuntu-latest - - steps: - - name: Clone repository - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 - with: - persist-credentials: false - - - name: Set up Node.js - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0 - with: - node-version: "${{ env.NODE }}" - - - name: Build CSS with node-sass - run: | - npx --package node-sass@latest node-sass --version - npx --package node-sass@latest node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/ -o dist-sass/css/ - ls -Al dist-sass/css - - - name: Check built CSS files for Sass variables - shell: bash - run: | - SASS_VARS_FOUND=$(find "dist-sass/css/" -type f -name "*.css" -print0 | xargs -0 --no-run-if-empty grep -F "\$" || true) - if [[ -z "$SASS_VARS_FOUND" ]]; then - echo "All good, no Sass variables found!" - exit 0 - else - echo "Found $(echo "$SASS_VARS_FOUND" | wc -l | bc) Sass variables:" - echo "$SASS_VARS_FOUND" - exit 1 - fi diff --git a/package-lock.json b/package-lock.json index a0961c8f81bf..982928e45de5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -83,7 +83,7 @@ "rollup": "^4.46.3", "rollup-plugin-istanbul": "^5.0.0", "rtlcss": "^4.3.0", - "sass": "1.78.0", + "sass": "^1.90.0", "sass-true": "^9.0.0", "shelljs": "^0.10.0", "stylelint": "^16.23.1", @@ -3291,6 +3291,316 @@ "dev": true, "license": "MIT" }, + "node_modules/@parcel/watcher": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz", + "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "dependencies": { + "detect-libc": "^1.0.3", + "is-glob": "^4.0.3", + "micromatch": "^4.0.5", + "node-addon-api": "^7.0.0" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.5.1", + "@parcel/watcher-darwin-arm64": "2.5.1", + "@parcel/watcher-darwin-x64": "2.5.1", + "@parcel/watcher-freebsd-x64": "2.5.1", + "@parcel/watcher-linux-arm-glibc": "2.5.1", + "@parcel/watcher-linux-arm-musl": "2.5.1", + "@parcel/watcher-linux-arm64-glibc": "2.5.1", + "@parcel/watcher-linux-arm64-musl": "2.5.1", + "@parcel/watcher-linux-x64-glibc": "2.5.1", + "@parcel/watcher-linux-x64-musl": "2.5.1", + "@parcel/watcher-win32-arm64": "2.5.1", + "@parcel/watcher-win32-ia32": "2.5.1", + "@parcel/watcher-win32-x64": "2.5.1" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz", + "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz", + "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz", + "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz", + "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz", + "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-musl": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz", + "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz", + "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz", + "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz", + "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz", + "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz", + "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-ia32": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz", + "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz", + "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -6363,14 +6673,17 @@ } }, "node_modules/detect-libc": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz", - "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", "dev": true, "license": "Apache-2.0", "optional": true, + "bin": { + "detect-libc": "bin/detect-libc.js" + }, "engines": { - "node": ">=8" + "node": ">=0.10" } }, "node_modules/deterministic-object-hash": { @@ -9060,9 +9373,9 @@ } }, "node_modules/immutable": { - "version": "4.3.7", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", - "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==", + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz", + "integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==", "dev": true, "license": "MIT" }, @@ -13511,6 +13824,14 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "dev": true, + "license": "MIT", + "optional": true + }, "node_modules/node-fetch": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", @@ -16102,14 +16423,13 @@ "license": "MIT" }, "node_modules/sass": { - "version": "1.78.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz", - "integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==", + "version": "1.90.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.90.0.tgz", + "integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==", "dev": true, - "license": "MIT", "dependencies": { - "chokidar": ">=3.0.0 <4.0.0", - "immutable": "^4.0.0", + "chokidar": "^4.0.0", + "immutable": "^5.0.2", "source-map-js": ">=0.6.2 <2.0.0" }, "bin": { @@ -16117,6 +16437,9 @@ }, "engines": { "node": ">=14.0.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" } }, "node_modules/sass-formatter": { @@ -16156,70 +16479,6 @@ } } }, - "node_modules/sass/node_modules/chokidar": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", - "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", - "dev": true, - "license": "MIT", - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, - "node_modules/sass/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "license": "ISC", - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/sass/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/sass/node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, - "license": "MIT", - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } - }, "node_modules/sax": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz", @@ -16356,6 +16615,17 @@ "@img/sharp-win32-x64": "0.33.5" } }, + "node_modules/sharp/node_modules/detect-libc": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz", + "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "engines": { + "node": ">=8" + } + }, "node_modules/sharp/node_modules/semver": { "version": "7.7.2", "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz", diff --git a/package.json b/package.json index ad90fa6ffbf9..9548a31bda8a 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "start": "npm-run-all --parallel watch docs-serve", "bundlewatch": "bundlewatch --config .bundlewatch.config.json", "css": "npm-run-all css-compile css-prefix css-rtl css-minify", - "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/", + "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/bootstrap.scss:dist/css/bootstrap.css scss/bootstrap-grid.scss:dist/css/bootstrap-grid.css scss/bootstrap-reboot.scss:dist/css/bootstrap-reboot.css scss/bootstrap-utilities.scss:dist/css/bootstrap-utilities.css", "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"", "css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*", "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache", @@ -172,7 +172,7 @@ "rollup": "^4.46.3", "rollup-plugin-istanbul": "^5.0.0", "rtlcss": "^4.3.0", - "sass": "1.78.0", + "sass": "^1.90.0", "sass-true": "^9.0.0", "shelljs": "^0.10.0", "stylelint": "^16.23.1", diff --git a/scss/_accordion.scss b/scss/_accordion.scss index c2d3b800d124..4ab6a18b1915 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -1,3 +1,12 @@ +@use "config" as *; +@use "variables" as *; +@use "functions" as *; +@use "vendor/rfs" as *; +@use "mixins/border-radius" as *; +@use "mixins/transition" as *; +@use "mixins/box-shadow" as *; +@use "mixins/color-mode" as *; + // // Base styles // diff --git a/scss/_alert.scss b/scss/_alert.scss index b8cff9b71edf..ef504ca4d920 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -1,3 +1,8 @@ +@use "sass:map"; +@use "config" as *; +@use "variables" as *; +@use "mixins/border-radius" as *; + // // Base styles // @@ -57,7 +62,7 @@ // scss-docs-start alert-modifiers // Generate contextual modifier classes for colorizing the alert -@each $state in map-keys($theme-colors) { +@each $state in map.keys($theme-colors) { .alert-#{$state} { --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis); --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); diff --git a/scss/_badge.scss b/scss/_badge.scss index cc3d2695566a..0abaff6523f4 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -1,3 +1,9 @@ +@use "config" as *; +@use "variables" as *; +@use "mixins/border-radius" as *; +@use "mixins/gradients" as *; +@use "vendor/rfs" as *; + // Base class // // Requires one of the contextual, color modifier classes for `color` and diff --git a/scss/_banner.scss b/scss/_banner.scss new file mode 100644 index 000000000000..858d062e4f9b --- /dev/null +++ b/scss/_banner.scss @@ -0,0 +1,7 @@ +$file: "" !default; + +/*! + * Bootstrap #{$file} v6.0.0-dev (https://getbootstrap.com/) + * Copyright 2011-2025 The Bootstrap Authors + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + */ diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index b8252ff2152a..27e19053053e 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -1,3 +1,8 @@ +@use "config" as *; +@use "variables" as *; +@use "mixins/border-radius" as *; +@use "vendor/rfs" as *; + .breadcrumb { // scss-docs-start breadcrumb-css-vars --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; diff --git a/scss/_button-group.scss b/scss/_button-group.scss index f0e3b8820419..f4e8a4a08c25 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -1,3 +1,8 @@ +@use "config" as *; +@use "variables" as *; +@use "mixins/border-radius" as *; +@use "mixins/box-shadow" as *; + // Make the div behave like a button .btn-group, .btn-group-vertical { diff --git a/scss/_buttons.scss b/scss/_buttons.scss index caa4518ac8fc..3be8a88e87a7 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -1,3 +1,86 @@ +@use "sass:color"; +@use "colors" as *; +@use "config" as *; +@use "variables" as *; +@use "functions" as *; +@use "vendor/rfs" as *; +@use "mixins/border-radius" as *; +@use "mixins/box-shadow" as *; +@use "mixins/transition" as *; +@use "mixins/gradients" as *; + +// Button variants +// +// Easily pump out default styles, as well as :hover, :focus, :active, +// and disabled options for all buttons + +// scss-docs-start btn-variant-mixin +@mixin button-variant( + $background, + $border, + $color: color-contrast($background), + $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), + $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), + $hover-color: color-contrast($hover-background), + $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)), + $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), + $active-color: color-contrast($active-background), + $disabled-background: $background, + $disabled-border: $border, + $disabled-color: color-contrast($disabled-background) +) { + --#{$prefix}btn-color: #{$color}; + --#{$prefix}btn-bg: #{$background}; + --#{$prefix}btn-border-color: #{$border}; + --#{$prefix}btn-hover-color: #{$hover-color}; + --#{$prefix}btn-hover-bg: #{$hover-background}; + --#{$prefix}btn-hover-border-color: #{$hover-border}; + --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))}; + --#{$prefix}btn-active-color: #{$active-color}; + --#{$prefix}btn-active-bg: #{$active-background}; + --#{$prefix}btn-active-border-color: #{$active-border}; + --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow}; + --#{$prefix}btn-disabled-color: #{$disabled-color}; + --#{$prefix}btn-disabled-bg: #{$disabled-background}; + --#{$prefix}btn-disabled-border-color: #{$disabled-border}; +} +// scss-docs-end btn-variant-mixin + +// scss-docs-start btn-outline-variant-mixin +@mixin button-outline-variant( + $color, + $color-hover: color-contrast($color), + $active-background: $color, + $active-border: $color, + $active-color: color-contrast($active-background) +) { + --#{$prefix}btn-color: #{$color}; + --#{$prefix}btn-border-color: #{$color}; + --#{$prefix}btn-hover-color: #{$color-hover}; + --#{$prefix}btn-hover-bg: #{$active-background}; + --#{$prefix}btn-hover-border-color: #{$active-border}; + --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)}; + --#{$prefix}btn-active-color: #{$active-color}; + --#{$prefix}btn-active-bg: #{$active-background}; + --#{$prefix}btn-active-border-color: #{$active-border}; + --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow}; + --#{$prefix}btn-disabled-color: #{$color}; + --#{$prefix}btn-disabled-bg: transparent; + --#{$prefix}btn-disabled-border-color: #{$color}; + --#{$prefix}gradient: none; +} +// scss-docs-end btn-outline-variant-mixin + +// scss-docs-start btn-size-mixin +@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { + --#{$prefix}btn-padding-y: #{$padding-y}; + --#{$prefix}btn-padding-x: #{$padding-x}; + @include rfs($font-size, --#{$prefix}btn-font-size); + --#{$prefix}btn-border-radius: #{$border-radius}; +} +// scss-docs-end btn-size-mixin + + // // Base styles // diff --git a/scss/_card.scss b/scss/_card.scss index 5bc84f99cc5d..2c3572c89fbf 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -1,3 +1,9 @@ +@use "config" as *; +@use "variables" as *; +@use "mixins/border-radius" as *; +@use "mixins/box-shadow" as *; +@use "layout/breakpoints" as *; + // // Base styles // diff --git a/scss/_carousel.scss b/scss/_carousel.scss index c99c538e8486..7c6d9672cbf6 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -1,3 +1,10 @@ +@use "config" as *; +@use "variables" as *; +@use "mixins/transition" as *; +@use "mixins/gradients" as *; +@use "mixins/color-mode" as *; +@use "vendor/rfs" as *; + // Notes on the classes: // // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) diff --git a/scss/_close.scss b/scss/_close.scss index d53c96fbff66..98140fb02df5 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -1,3 +1,8 @@ +@use "config" as *; +@use "variables" as *; +@use "mixins/border-radius" as *; +@use "mixins/color-mode" as *; + // Transparent background and border properties included for button version. // iOS requires the button element instead of an anchor tag. // If you want the anchor version, it requires `href="#"`. diff --git a/scss/_colors.scss b/scss/_colors.scss new file mode 100644 index 000000000000..651ebefa0501 --- /dev/null +++ b/scss/_colors.scss @@ -0,0 +1,282 @@ +$blue: #0d6efd !default; +$blue-100: #cfe2ff !default; +$blue-200: #9ec5fe !default; +$blue-300: #6ea8fe !default; +$blue-400: #3d8bfd !default; +$blue-500: $blue !default; +$blue-600: #0a58ca !default; +$blue-700: #084298 !default; +$blue-800: #052c65 !default; +$blue-900: #031633 !default; + +$indigo: #6610f2 !default; +$indigo-100: #e0cffc !default; +$indigo-200: #c29ffa !default; +$indigo-300: #a370f7 !default; +$indigo-400: #8540f5 !default; +$indigo-500: $indigo !default; +$indigo-600: #520dc2 !default; +$indigo-700: #3d0a91 !default; +$indigo-800: #290661 !default; +$indigo-900: #140330 !default; + +$purple: #6f42c1 !default; +$purple-100: #e2d9f3 !default; +$purple-200: #c5b3e6 !default; +$purple-300: #a98eda !default; +$purple-400: #8c68cd !default; +$purple-500: $purple !default; +$purple-600: #59359a !default; +$purple-700: #432874 !default; +$purple-800: #2c1a4d !default; +$purple-900: #160d27 !default; + +$pink: #d63384 !default; +$pink-100: #f7d6e6 !default; +$pink-200: #efadce !default; +$pink-300: #e685b5 !default; +$pink-400: #de5c9d !default; +$pink-500: $pink !default; +$pink-600: #ab296a !default; +$pink-700: #801f4f !default; +$pink-800: #561435 !default; +$pink-900: #2b0a1a !default; + +$red: #dc3545 !default; +$red-100: #f8d7da !default; +$red-200: #f1aeb5 !default; +$red-300: #ea868f !default; +$red-400: #e35d6a !default; +$red-500: $red !default; +$red-600: #b02a37 !default; +$red-700: #842029 !default; +$red-800: #58151c !default; +$red-900: #2c0b0e !default; + +$orange: #fd7e14 !default; +$orange-100: #ffe5d0 !default; +$orange-200: #fecba1 !default; +$orange-300: #feb272 !default; +$orange-400: #fd9843 !default; +$orange-500: $orange !default; +$orange-600: #ca6510 !default; +$orange-700: #984c0c !default; +$orange-800: #653208 !default; +$orange-900: #331904 !default; + +$yellow: #ffc107 !default; +$yellow-100: #fff3cd !default; +$yellow-200: #ffe69c !default; +$yellow-300: #ffda6a !default; +$yellow-400: #ffcd39 !default; +$yellow-500: $yellow !default; +$yellow-600: #cc9a06 !default; +$yellow-700: #997404 !default; +$yellow-800: #664d03 !default; +$yellow-900: #332701 !default; + +$green: #198754 !default; +$green-100: #d1e7dd !default; +$green-200: #a3cfbb !default; +$green-300: #75b798 !default; +$green-400: #479f76 !default; +$green-500: $green !default; +$green-600: #146c43 !default; +$green-700: #0f5132 !default; +$green-800: #0a3622 !default; +$green-900: #051b11 !default; + +$teal: #20c997 !default; +$teal-100: #d2f4ea !default; +$teal-200: #a6e9d5 !default; +$teal-300: #79dfc1 !default; +$teal-400: #4dd4ac !default; +$teal-500: $teal !default; +$teal-600: #1aa179 !default; +$teal-700: #13795b !default; +$teal-800: #0d503c !default; +$teal-900: #06281e !default; + +$cyan: #0dcaf0 !default; +$cyan-100: #cff4fc !default; +$cyan-200: #9eeaf9 !default; +$cyan-300: #6edff6 !default; +$cyan-400: #3dd5f3 !default; +$cyan-500: $cyan !default; +$cyan-600: #0aa2c0 !default; +$cyan-700: #087990 !default; +$cyan-800: #055160 !default; +$cyan-900: #032830 !default; + +$gray: #adb5bd !default; +$gray-100: #f8f9fa !default; +$gray-200: #e9ecef !default; +$gray-300: #dee2e6 !default; +$gray-400: #ced4da !default; +$gray-500: $gray !default; +$gray-600: #6c757d !default; +$gray-700: #495057 !default; +$gray-800: #343a40 !default; +$gray-900: #212529 !default; + +$white: #fff !default; +$black: #000 !default; + +$blues: ( + "blue-100": $blue-100, + "blue-200": $blue-200, + "blue-300": $blue-300, + "blue-400": $blue-400, + "blue-500": $blue-500, + "blue-600": $blue-600, + "blue-700": $blue-700, + "blue-800": $blue-800, + "blue-900": $blue-900 +) !default; + +$indigos: ( + "indigo-100": $indigo-100, + "indigo-200": $indigo-200, + "indigo-300": $indigo-300, + "indigo-400": $indigo-400, + "indigo-500": $indigo-500, + "indigo-600": $indigo-600, + "indigo-700": $indigo-700, + "indigo-800": $indigo-800, + "indigo-900": $indigo-900 +) !default; + +$purples: ( + "purple-100": $purple-100, + "purple-200": $purple-200, + "purple-300": $purple-300, + "purple-400": $purple-400, + "purple-500": $purple-500, + "purple-600": $purple-600, + "purple-700": $purple-700, + "purple-800": $purple-800, + "purple-900": $purple-900 +) !default; + +$pinks: ( + "pink-100": $pink-100, + "pink-200": $pink-200, + "pink-300": $pink-300, + "pink-400": $pink-400, + "pink-500": $pink-500, + "pink-600": $pink-600, + "pink-700": $pink-700, + "pink-800": $pink-800, + "pink-900": $pink-900 +) !default; + +$reds: ( + "red-100": $red-100, + "red-200": $red-200, + "red-300": $red-300, + "red-400": $red-400, + "red-500": $red-500, + "red-600": $red-600, + "red-700": $red-700, + "red-800": $red-800, + "red-900": $red-900 +) !default; + +$oranges: ( + "orange-100": $orange-100, + "orange-200": $orange-200, + "orange-300": $orange-300, + "orange-400": $orange-400, + "orange-500": $orange-500, + "orange-600": $orange-600, + "orange-700": $orange-700, + "orange-800": $orange-800, + "orange-900": $orange-900 +) !default; + +$yellows: ( + "yellow-100": $yellow-100, + "yellow-200": $yellow-200, + "yellow-300": $yellow-300, + "yellow-400": $yellow-400, + "yellow-500": $yellow-500, + "yellow-600": $yellow-600, + "yellow-700": $yellow-700, + "yellow-800": $yellow-800, + "yellow-900": $yellow-900 +) !default; + +$greens: ( + "green-100": $green-100, + "green-200": $green-200, + "green-300": $green-300, + "green-400": $green-400, + "green-500": $green-500, + "green-600": $green-600, + "green-700": $green-700, + "green-800": $green-800, + "green-900": $green-900 +) !default; + +$teals: ( + "teal-100": $teal-100, + "teal-200": $teal-200, + "teal-300": $teal-300, + "teal-400": $teal-400, + "teal-500": $teal-500, + "teal-600": $teal-600, + "teal-700": $teal-700, + "teal-800": $teal-800, + "teal-900": $teal-900 +) !default; + +$cyans: ( + "cyan-100": $cyan-100, + "cyan-200": $cyan-200, + "cyan-300": $cyan-300, + "cyan-400": $cyan-400, + "cyan-500": $cyan-500, + "cyan-600": $cyan-600, + "cyan-700": $cyan-700, + "cyan-800": $cyan-800, + "cyan-900": $cyan-900 +) !default; + +$grays: ( + "gray-100": $gray-100, + "gray-200": $gray-200, + "gray-300": $gray-300, + "gray-400": $gray-400, + "gray-500": $gray-500, + "gray-600": $gray-600, + "gray-700": $gray-700, + "gray-800": $gray-800, + "gray-900": $gray-900 +) !default; + +$colors: ( + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan +) !default; + +$all-colors: ( + "grays": $grays, + "blues": $blues, + "indigos": $indigos, + "purples": $purples, + "pinks": $pinks, + "reds": $reds, + "oranges": $oranges, + "yellows": $yellows, + "greens": $greens, + "teals": $teals, + "cyans": $cyans +) !default; diff --git a/scss/_config.scss b/scss/_config.scss new file mode 100644 index 000000000000..ad98d20ff153 --- /dev/null +++ b/scss/_config.scss @@ -0,0 +1,83 @@ +// Configuration +// +// Variables and settings not related to theme, components, and more go here. It does include layout. + +$prefix: bs- !default; + +$enable-caret: true !default; +$enable-rounded: true !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-reduced-motion: true !default; +$enable-smooth-scroll: true !default; +$enable-grid-classes: true !default; +$enable-container-classes: true !default; +$enable-cssgrid: false !default; +$enable-button-pointers: true !default; +$enable-rfs: true !default; +$enable-validation-icons: true !default; +$enable-negative-margins: false !default; +$enable-deprecation-messages: true !default; +$enable-important-utilities: true !default; + +$enable-dark-mode: true !default; +$color-mode-type: data !default; // `data` or `media-query` + +// more to come here… + +$color-mode-type: "media-query" !default; +$color-contrast-dark: #000 !default; +$color-contrast-light: #fff !default; +$min-contrast-ratio: 4.5 !default; + +// Grid breakpoints +// +// Define the minimum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries. + +// scss-docs-start grid-breakpoints +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px +) !default; +// scss-docs-end grid-breakpoints + +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns: 12 !default; +$grid-gutter-width: 1.5rem !default; +$grid-row-columns: 6 !default; + +// Grid containers +// +// Define the maximum width of `.container` for different screen sizes. + +// scss-docs-start container-max-widths +$container-max-widths: ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1140px, + xxl: 1320px +) !default; +// scss-docs-end container-max-widths + +$container-padding-x: $grid-gutter-width !default; + +$utilities: () !default; + +// Characters which are escaped by the escape-svg function +$escaped-characters: ( + ("<", "%3c"), + (">", "%3e"), + ("#", "%23"), + ("(", "%28"), + (")", "%29"), +) !default; diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 587ebb487cf4..70780dd7151e 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -1,3 +1,14 @@ +@use "sass:map"; +@use "config" as *; +@use "variables" as *; +@use "mixins/caret" as *; +@use "mixins/border-radius" as *; +@use "mixins/box-shadow" as *; +@use "mixins/gradients" as *; +@use "mixins/caret" as *; +@use "vendor/rfs" as *; +@use "layout/breakpoints" as *; + // The dropdown wrapper (`
`) .dropup, .dropend, @@ -85,7 +96,7 @@ // We deliberately hardcode the `bs-` prefix because we check // this custom property in JS to determine Popper's positioning -@each $breakpoint in map-keys($grid-breakpoints) { +@each $breakpoint in map.keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); diff --git a/scss/_forms.scss b/scss/_forms.scss deleted file mode 100644 index 7b17d849ac0f..000000000000 --- a/scss/_forms.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import "forms/labels"; -@import "forms/form-text"; -@import "forms/form-control"; -@import "forms/form-select"; -@import "forms/form-check"; -@import "forms/form-range"; -@import "forms/floating-labels"; -@import "forms/input-group"; -@import "forms/validation"; diff --git a/scss/_functions.scss b/scss/_functions.scss index 9ad74ef6d3db..77187e503d6e 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -1,3 +1,12 @@ +@use "sass:color"; +@use "sass:list"; +@use "sass:map"; +@use "sass:math"; +@use "sass:meta"; +@use "sass:string"; +// @use "variables" as *; +@use "config" as *; + // Bootstrap functions // // Utility mixins and functions for evaluating source code across our variables, maps, and mixins. @@ -8,7 +17,7 @@ $prev-key: null; $prev-num: null; @each $key, $num in $map { - @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" { + @if $prev-num == null or math.unit($num) == "%" or math.unit($prev-num) == "%" { // Do nothing } @else if not comparable($prev-num, $num) { @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; @@ -22,10 +31,10 @@ // Starts at zero // Used to ensure the min-width of the lowest breakpoint starts at 0. -@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") { - @if length($map) > 0 { - $values: map-values($map); - $first-value: nth($values, 1); +@mixin _assert-starts-at-zero($map, $map-name: "$breakpoints") { + @if list.length($map) > 0 { + $values: map.values($map); + $first-value: list.nth($values, 1); @if $first-value != 0 { @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}."; } @@ -34,7 +43,7 @@ // Colors @function to-rgb($value) { - @return red($value), green($value), blue($value); + @return color.channel($value, "red"), color.channel($value, "green"), color.channel($value, "blue"); } // stylelint-disable scss/dollar-variable-pattern @@ -55,10 +64,10 @@ // allow to pass the $key and $value of the map as an function argument $_args: (); @each $arg in $args { - $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg))); + $_args: list.append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg))); } - $_map: map-merge($_map, ($key: call(get-function($func), $_args...))); + $_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...))); } @return $_map; @@ -68,7 +77,7 @@ @function varify($list) { $result: null; @each $entry in $list { - $result: append($result, var(--#{$prefix}#{$entry}), space); + $result: list.append($result, var(--#{$prefix}#{$entry}), space); } @return $result; } @@ -79,7 +88,7 @@ $result: (); @each $key, $value in $map { @if $key != 0 { - $result: map-merge($result, ("n" + $key: (-$value))); + $result: map.merge($result, ("n" + $key: (-$value))); } } @return $result; @@ -89,8 +98,8 @@ @function map-get-multiple($map, $values) { $result: (); @each $key, $value in $map { - @if (index($values, $key) != null) { - $result: map-merge($result, ($key: $value)); + @if (list.index($values, $key) != null) { + $result: map.merge($result, ($key: $value)); } } @return $result; @@ -101,7 +110,7 @@ $merged-maps: (); @each $map in $maps { - $merged-maps: map-merge($merged-maps, $map); + $merged-maps: map.merge($merged-maps, $map); } @return $merged-maps; } @@ -115,10 +124,10 @@ // @param {String} $replace ('') - New value // @return {String} - Updated string @function str-replace($string, $search, $replace: "") { - $index: str-index($string, $search); + $index: string.index($string, $search); @if $index { - @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace); } @return $string; @@ -129,11 +138,11 @@ // Requires the use of quotes around data URIs. @function escape-svg($string) { - @if str-index($string, "data:image/svg+xml") { + @if string.index($string, "data:image/svg+xml") { @each $char, $encoded in $escaped-characters { // Do not escape the url brackets - @if str-index($string, "url(") == 1 { - $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}"); + @if string.index($string, "url(") == 1 { + $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}"); } @else { $string: str-replace($string, $char, $encoded); } @@ -151,7 +160,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1; @function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) { - $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black; + $foregrounds: $color-contrast-light, $color-contrast-dark, #fff, #000; $max-ratio: 0; $max-ratio-color: null; @@ -174,7 +183,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 $l1: luminance($background); $l2: luminance(opaque($background, $foreground)); - @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05)); + @return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05)); } // Return WCAG2.2 relative luminance @@ -182,80 +191,38 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio @function luminance($color) { $rgb: ( - "r": red($color), - "g": green($color), - "b": blue($color) + "r": color.channel($color, "red"), + "g": color.channel($color, "green"), + "b": color.channel($color, "blue") ); @each $name, $value in $rgb { - $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1)); - $rgb: map-merge($rgb, ($name: $value)); + $value: if(math.div($value, 255) < .04045, math.div(math.div($value, 255), 12.92), list.nth($_luminance-list, math.round($value + 1))); + $rgb: map.merge($rgb, ($name: $value)); } - @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722); + @return (map.get($rgb, "r") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722); } // Return opaque color // opaque(#fff, rgba(0, 0, 0, .5)) => #808080 @function opaque($background, $foreground) { - @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%); + @return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%); } // scss-docs-start color-functions -// Tint a color: mix a color with white +// // Tint a color: mix a color with white @function tint-color($color, $weight) { - @return mix(white, $color, $weight); + @return color.mix(white, $color, $weight); } -// Shade a color: mix a color with black +// // Shade a color: mix a color with black @function shade-color($color, $weight) { - @return mix(black, $color, $weight); + @return color.mix(black, $color, $weight); } -// Shade the color if the weight is positive, else tint it +// // Shade the color if the weight is positive, else tint it @function shift-color($color, $weight) { @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight)); } // scss-docs-end color-functions - -@function divide($dividend, $divisor, $precision: 10) { - $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1); - $dividend: abs($dividend); - $divisor: abs($divisor); - @if $dividend == 0 { - @return 0; - } - @if $divisor == 0 { - @error "Cannot divide by 0"; - } - $remainder: $dividend; - $result: 0; - $factor: 10; - @while ($remainder > 0 and $precision >= 0) { - $quotient: 0; - @while ($remainder >= $divisor) { - $remainder: $remainder - $divisor; - $quotient: $quotient + 1; - } - $result: $result * 10 + $quotient; - $factor: $factor * .1; - $remainder: $remainder * 10; - $precision: $precision - 1; - @if ($precision < 0 and $remainder >= $divisor * 5) { - $result: $result + 1; - } - } - $result: $result * $factor * $sign; - $dividend-unit: unit($dividend); - $divisor-unit: unit($divisor); - $unit-map: ( - "px": 1px, - "rem": 1rem, - "em": 1em, - "%": 1% - ); - @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) { - $result: $result * map-get($unit-map, $dividend-unit); - } - @return $result; -} diff --git a/scss/_grid.scss b/scss/_grid.scss deleted file mode 100644 index 048f8009a363..000000000000 --- a/scss/_grid.scss +++ /dev/null @@ -1,39 +0,0 @@ -// Row -// -// Rows contain your columns. - -:root { - @each $name, $value in $grid-breakpoints { - --#{$prefix}breakpoint-#{$name}: #{$value}; - } -} - -@if $enable-grid-classes { - .row { - @include make-row(); - - > * { - @include make-col-ready(); - } - } -} - -@if $enable-cssgrid { - .grid { - display: grid; - grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr); - grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr); - gap: var(--#{$prefix}gap, #{$grid-gutter-width}); - - @include make-cssgrid(); - } -} - - -// Columns -// -// Common styles for small and large grid columns - -@if $enable-grid-classes { - @include make-grid-columns(); -} diff --git a/scss/_helpers.scss b/scss/_helpers.scss deleted file mode 100644 index b22a1b095312..000000000000 --- a/scss/_helpers.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import "helpers/color-bg"; -@import "helpers/colored-links"; -@import "helpers/focus-ring"; -@import "helpers/icon-link"; -@import "helpers/position"; -@import "helpers/stacks"; -@import "helpers/visually-hidden"; -@import "helpers/stretched-link"; -@import "helpers/text-truncation"; -@import "helpers/vr"; diff --git a/scss/_list-group.scss b/scss/_list-group.scss index f7c9ea54c24d..b5bb03d45c34 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -1,3 +1,11 @@ +@use "sass:map"; +@use "colors" as *; +@use "config" as *; +@use "variables" as *; +@use "mixins/border-radius" as *; +@use "vendor/rfs" as *; +@use "layout/breakpoints" as *; + // Base class // // Easily usable on