root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 13 Packages Projects Releases Wiki Activity

Migrate to Sass modules (#41512) 

* Reorganize scss folder

* Migrate to Sass modules

* Migrate docs to Sass modules, comment out docs grid CSS

* Give helpers folder an index.scss, migrate ratio helper to aspect-ratio utility

* Delete node sass Action

* Modify Sass tests to pass for new Sass modules implementation

* Don't disallow calc()

* Move heading classes back to Reboot to prevent a dependency

* Utilities, some helpers, and theme colors

* Temporary fix of docs compilation

* Temporary Bundlewatch fix

* docs fix import to use

* Restyle docs callouts

* Fix docs colors

* Revert typo

* Reintroduce `css-lint-vars` npm script

* Bump to Sass v1.90.x

* Fixes

* more

* Remove

---------

Co-authored-by: Julien Déramond <juderamond@gmail.com>
This commit is contained in:
Mark Otto 2025-08-27 21:14:59 -07:00 committed by Mark Otto
parent ae01f064b0
commit 062e7425b8
133 changed files with 3041 additions and 1880 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.bundlewatch.config.json
View File

@ -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",

49
.github/workflows/node-sass.yml vendored
View File

@ -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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.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

439
package-lock.json generated
View File

@ -83,7 +83,7 @@
"rollup": "^4.52.0",
"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.24.0",
@ -3765,6 +3765,329 @@
"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/@parcel/watcher/node_modules/detect-libc": {
"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,
"optional": true,
"bin": {
"detect-libc": "bin/detect-libc.js"
},
"engines": {
"node": ">=0.10"
}
},
"node_modules/@pkgjs/parseargs": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@ -6851,17 +7174,6 @@
"npm": "1.2.8000 || >= 1.4.16"
}
},
"node_modules/detect-libc": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.0.tgz",
"integrity": "sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==",
"dev": true,
"license": "Apache-2.0",
"optional": true,
"engines": {
"node": ">=8"
}
},
"node_modules/deterministic-object-hash": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/deterministic-object-hash/-/deterministic-object-hash-2.0.2.tgz",
@ -9550,9 +9862,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"
},
@ -14001,6 +14313,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",
@ -16594,14 +16914,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": {
@ -16609,6 +16928,9 @@
},
"engines": {
"node": ">=14.0.0"
},
"optionalDependencies": {
"@parcel/watcher": "^2.4.1"
}
},
"node_modules/sass-formatter": {
@ -16648,70 +16970,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",
@ -16851,6 +17109,17 @@
"@img/sharp-win32-x64": "0.34.4"
}
},
"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",

4
package.json
View File

@ -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.52.0",
"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.24.0",

9
scss/_accordion.scss
View File

@ -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
//

7
scss/_alert.scss
View File

@ -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);

6
scss/_badge.scss
View File

@ -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

7
scss/_banner.scss Normal file
View File

@ -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)
*/

5
scss/_breadcrumb.scss
View File

@ -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};

5
scss/_button-group.scss
View File

@ -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 {

83
scss/_buttons.scss
View File

@ -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
//

6
scss/_card.scss
View File

@ -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
//

7
scss/_carousel.scss
View File

@ -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)

5
scss/_close.scss
View File

@ -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="#"`.

282
scss/_colors.scss Normal file
View File

@ -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;

83
scss/_config.scss Normal file
View File

@ -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;

13
scss/_dropdown.scss
View File

@ -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 (`<div>`)
.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);

9
scss/_forms.scss
View File

@ -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";

115
scss/_functions.scss
View File

@ -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;
}

39
scss/_grid.scss
View File

@ -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();
}

10
scss/_helpers.scss
View File

@ -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";

12
scss/_list-group.scss
View File

@ -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 <ul>, <ol>, or <div>.
@ -121,7 +129,7 @@
//
// Change the layout of list group items from vertical (default) to horizontal.
@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);
@ -182,7 +190,7 @@
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state in map-keys($theme-colors) {
@each $state in map.keys($theme-colors) {
.list-group-item-#{$state} {
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);

316
scss/_maps.scss
View File

@ -1,174 +1,180 @@
// Re-assigned maps
//
// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
// @use "sass:map";
// @use "colors" as *;
// @use "functions" as *;
// @use "config" as *;
// @use "variables" as *;
// scss-docs-start theme-colors-rgb
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
// scss-docs-end theme-colors-rgb
// // 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-text-map
$theme-colors-text: (
"primary": $primary-text-emphasis,
"secondary": $secondary-text-emphasis,
"success": $success-text-emphasis,
"info": $info-text-emphasis,
"warning": $warning-text-emphasis,
"danger": $danger-text-emphasis,
"light": $light-text-emphasis,
"dark": $dark-text-emphasis,
) !default;
// scss-docs-end theme-text-map
// // scss-docs-start theme-colors-rgb
// $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
// // scss-docs-end theme-colors-rgb
// scss-docs-start theme-bg-subtle-map
$theme-colors-bg-subtle: (
"primary": $primary-bg-subtle,
"secondary": $secondary-bg-subtle,
"success": $success-bg-subtle,
"info": $info-bg-subtle,
"warning": $warning-bg-subtle,
"danger": $danger-bg-subtle,
"light": $light-bg-subtle,
"dark": $dark-bg-subtle,
) !default;
// scss-docs-end theme-bg-subtle-map
// // scss-docs-start theme-text-map
// $theme-colors-text: (
// "primary": $primary-text-emphasis,
// "secondary": $secondary-text-emphasis,
// "success": $success-text-emphasis,
// "info": $info-text-emphasis,
// "warning": $warning-text-emphasis,
// "danger": $danger-text-emphasis,
// "light": $light-text-emphasis,
// "dark": $dark-text-emphasis,
// ) !default;
// // scss-docs-end theme-text-map
// scss-docs-start theme-border-subtle-map
$theme-colors-border-subtle: (
"primary": $primary-border-subtle,
"secondary": $secondary-border-subtle,
"success": $success-border-subtle,
"info": $info-border-subtle,
"warning": $warning-border-subtle,
"danger": $danger-border-subtle,
"light": $light-border-subtle,
"dark": $dark-border-subtle,
) !default;
// scss-docs-end theme-border-subtle-map
// // scss-docs-start theme-bg-subtle-map
// $theme-colors-bg-subtle: (
// "primary": $primary-bg-subtle,
// "secondary": $secondary-bg-subtle,
// "success": $success-bg-subtle,
// "info": $info-bg-subtle,
// "warning": $warning-bg-subtle,
// "danger": $danger-bg-subtle,
// "light": $light-bg-subtle,
// "dark": $dark-bg-subtle,
// ) !default;
// // scss-docs-end theme-bg-subtle-map
$theme-colors-text-dark: null !default;
$theme-colors-bg-subtle-dark: null !default;
$theme-colors-border-subtle-dark: null !default;
// // scss-docs-start theme-border-subtle-map
// $theme-colors-border-subtle: (
// "primary": $primary-border-subtle,
// "secondary": $secondary-border-subtle,
// "success": $success-border-subtle,
// "info": $info-border-subtle,
// "warning": $warning-border-subtle,
// "danger": $danger-border-subtle,
// "light": $light-border-subtle,
// "dark": $dark-border-subtle,
// ) !default;
// // scss-docs-end theme-border-subtle-map
@if $enable-dark-mode {
// scss-docs-start theme-text-dark-map
$theme-colors-text-dark: (
"primary": $primary-text-emphasis-dark,
"secondary": $secondary-text-emphasis-dark,
"success": $success-text-emphasis-dark,
"info": $info-text-emphasis-dark,
"warning": $warning-text-emphasis-dark,
"danger": $danger-text-emphasis-dark,
"light": $light-text-emphasis-dark,
"dark": $dark-text-emphasis-dark,
) !default;
// scss-docs-end theme-text-dark-map
// $theme-colors-text-dark: null !default;
// $theme-colors-bg-subtle-dark: null !default;
// $theme-colors-border-subtle-dark: null !default;
// scss-docs-start theme-bg-subtle-dark-map
$theme-colors-bg-subtle-dark: (
"primary": $primary-bg-subtle-dark,
"secondary": $secondary-bg-subtle-dark,
"success": $success-bg-subtle-dark,
"info": $info-bg-subtle-dark,
"warning": $warning-bg-subtle-dark,
"danger": $danger-bg-subtle-dark,
"light": $light-bg-subtle-dark,
"dark": $dark-bg-subtle-dark,
) !default;
// scss-docs-end theme-bg-subtle-dark-map
// @if $enable-dark-mode {
// // scss-docs-start theme-text-dark-map
// $theme-colors-text-dark: (
// "primary": $primary-text-emphasis-dark,
// "secondary": $secondary-text-emphasis-dark,
// "success": $success-text-emphasis-dark,
// "info": $info-text-emphasis-dark,
// "warning": $warning-text-emphasis-dark,
// "danger": $danger-text-emphasis-dark,
// "light": $light-text-emphasis-dark,
// "dark": $dark-text-emphasis-dark,
// ) !default;
// // scss-docs-end theme-text-dark-map
// scss-docs-start theme-border-subtle-dark-map
$theme-colors-border-subtle-dark: (
"primary": $primary-border-subtle-dark,
"secondary": $secondary-border-subtle-dark,
"success": $success-border-subtle-dark,
"info": $info-border-subtle-dark,
"warning": $warning-border-subtle-dark,
"danger": $danger-border-subtle-dark,
"light": $light-border-subtle-dark,
"dark": $dark-border-subtle-dark,
) !default;
// scss-docs-end theme-border-subtle-dark-map
}
// // scss-docs-start theme-bg-subtle-dark-map
// $theme-colors-bg-subtle-dark: (
// "primary": $primary-bg-subtle-dark,
// "secondary": $secondary-bg-subtle-dark,
// "success": $success-bg-subtle-dark,
// "info": $info-bg-subtle-dark,
// "warning": $warning-bg-subtle-dark,
// "danger": $danger-bg-subtle-dark,
// "light": $light-bg-subtle-dark,
// "dark": $dark-bg-subtle-dark,
// ) !default;
// // scss-docs-end theme-bg-subtle-dark-map
// Utilities maps
//
// Extends the default `$theme-colors` maps to help create our utilities.
// // scss-docs-start theme-border-subtle-dark-map
// $theme-colors-border-subtle-dark: (
// "primary": $primary-border-subtle-dark,
// "secondary": $secondary-border-subtle-dark,
// "success": $success-border-subtle-dark,
// "info": $info-border-subtle-dark,
// "warning": $warning-border-subtle-dark,
// "danger": $danger-border-subtle-dark,
// "light": $light-border-subtle-dark,
// "dark": $dark-border-subtle-dark,
// ) !default;
// // scss-docs-end theme-border-subtle-dark-map
// }
// 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
// // Utilities maps
// //
// // Extends the default `$theme-colors` maps to help create our utilities.
// scss-docs-start utilities-text-colors
$utilities-text: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-color)
)
) !default;
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
// // 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
$utilities-text-emphasis-colors: (
"primary-emphasis": var(--#{$prefix}primary-text-emphasis),
"secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
"success-emphasis": var(--#{$prefix}success-text-emphasis),
"info-emphasis": var(--#{$prefix}info-text-emphasis),
"warning-emphasis": var(--#{$prefix}warning-text-emphasis),
"danger-emphasis": var(--#{$prefix}danger-text-emphasis),
"light-emphasis": var(--#{$prefix}light-text-emphasis),
"dark-emphasis": var(--#{$prefix}dark-text-emphasis)
) !default;
// scss-docs-end utilities-text-colors
// // scss-docs-start utilities-text-colors
// $utilities-text: map.merge(
// $utilities-colors,
// (
// "black": to-rgb($black),
// "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-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;
// $utilities-text-emphasis-colors: (
// "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
// "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
// "success-emphasis": var(--#{$prefix}success-text-emphasis),
// "info-emphasis": var(--#{$prefix}info-text-emphasis),
// "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
// "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
// "light-emphasis": var(--#{$prefix}light-text-emphasis),
// "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
// ) !default;
// // scss-docs-end utilities-text-colors
$utilities-bg-subtle: (
"primary-subtle": var(--#{$prefix}primary-bg-subtle),
"secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
"success-subtle": var(--#{$prefix}success-bg-subtle),
"info-subtle": var(--#{$prefix}info-bg-subtle),
"warning-subtle": var(--#{$prefix}warning-bg-subtle),
"danger-subtle": var(--#{$prefix}danger-bg-subtle),
"light-subtle": var(--#{$prefix}light-bg-subtle),
"dark-subtle": var(--#{$prefix}dark-bg-subtle)
) !default;
// scss-docs-end utilities-bg-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-start utilities-border-colors
$utilities-border: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white)
)
) !default;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
// $utilities-bg-subtle: (
// "primary-subtle": var(--#{$prefix}primary-bg-subtle),
// "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
// "success-subtle": var(--#{$prefix}success-bg-subtle),
// "info-subtle": var(--#{$prefix}info-bg-subtle),
// "warning-subtle": var(--#{$prefix}warning-bg-subtle),
// "danger-subtle": var(--#{$prefix}danger-bg-subtle),
// "light-subtle": var(--#{$prefix}light-bg-subtle),
// "dark-subtle": var(--#{$prefix}dark-bg-subtle)
// ) !default;
// // scss-docs-end utilities-bg-colors
$utilities-border-subtle: (
"primary-subtle": var(--#{$prefix}primary-border-subtle),
"secondary-subtle": var(--#{$prefix}secondary-border-subtle),
"success-subtle": var(--#{$prefix}success-border-subtle),
"info-subtle": var(--#{$prefix}info-border-subtle),
"warning-subtle": var(--#{$prefix}warning-border-subtle),
"danger-subtle": var(--#{$prefix}danger-border-subtle),
"light-subtle": var(--#{$prefix}light-border-subtle),
"dark-subtle": var(--#{$prefix}dark-border-subtle)
) !default;
// scss-docs-end utilities-border-colors
// // scss-docs-start utilities-border-colors
// $utilities-border: map.merge(
// $utilities-colors,
// (
// "black": to-rgb($black),
// "white": to-rgb($white)
// )
// ) !default;
// $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
// $utilities-border-subtle: (
// "primary-subtle": var(--#{$prefix}primary-border-subtle),
// "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
// "success-subtle": var(--#{$prefix}success-border-subtle),
// "info-subtle": var(--#{$prefix}info-border-subtle),
// "warning-subtle": var(--#{$prefix}warning-border-subtle),
// "danger-subtle": var(--#{$prefix}danger-border-subtle),
// "light-subtle": var(--#{$prefix}light-border-subtle),
// "dark-subtle": var(--#{$prefix}dark-border-subtle)
// ) !default;
// // scss-docs-end utilities-border-colors
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
// $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
$gutters: $spacers !default;
// $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
// $gutters: $spacers !default;

41
scss/_mixins.scss
View File

@ -1,41 +0,0 @@
// Toggles
//
// Used in conjunction with global variables to enable certain theme features.
// Vendor
@import "vendor/rfs";
// Deprecate
@import "mixins/deprecate";
// Helpers
@import "mixins/breakpoints";
@import "mixins/color-mode";
@import "mixins/color-scheme";
@import "mixins/image";
@import "mixins/resize";
@import "mixins/visually-hidden";
@import "mixins/reset-text";
@import "mixins/text-truncate";
// Utilities
@import "mixins/utilities";
// Components
@import "mixins/backdrop";
@import "mixins/buttons";
@import "mixins/caret";
@import "mixins/pagination";
@import "mixins/lists";
@import "mixins/forms";
@import "mixins/table-variants";
// Skins
@import "mixins/border-radius";
@import "mixins/box-shadow";
@import "mixins/gradients";
@import "mixins/transition";
// Layout
@import "mixins/container";
@import "mixins/grid";

13
scss/_modal.scss
View File

@ -1,3 +1,14 @@
@use "sass:map";
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "mixins/transition" as *;
@use "mixins/gradients" as *;
@use "mixins/backdrop" as *;
@use "vendor/rfs" as *;
@use "layout/breakpoints" as *;
// .modal-open - body class for killing the scroll
// .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal
@ -207,7 +218,7 @@
}
// scss-docs-start modal-fullscreen-loop
@each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");

7
scss/_nav.scss
View File

@ -1,3 +1,10 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/transition" as *;
@use "mixins/gradients" as *;
@use "vendor/rfs" as *;
// Base class
//
// Kickstart any navigation component with a set of style resets. Works with

14
scss/_navbar.scss
View File

@ -1,3 +1,15 @@
@use "sass:map";
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "mixins/gradients" as *;
@use "mixins/transition" as *;
@use "mixins/color-mode" as *;
@use "mixins/deprecate" as *;
@use "vendor/rfs" as *;
@use "layout/breakpoints" as *;
// Navbar
//
// Provide a static navbar from which we expand to create full-width, fixed, and
@ -190,7 +202,7 @@
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map.keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);

12
scss/_offcanvas.scss
View File

@ -1,3 +1,11 @@
@use "sass:map";
@use "config" as *;
@use "variables" as *;
@use "mixins/box-shadow" as *;
@use "mixins/transition" as *;
@use "mixins/backdrop" as *;
@use "layout/breakpoints" as *;
%offcanvas-css-vars {
// scss-docs-start offcanvas-css-vars
--#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
@ -15,7 +23,7 @@
// scss-docs-end offcanvas-css-vars
}
@each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map.keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
@ -24,7 +32,7 @@
}
}
@each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map.keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);

17
scss/_pagination.scss
View File

@ -1,3 +1,20 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/lists" as *;
@use "mixins/border-radius" as *;
@use "mixins/transition" as *;
@use "mixins/gradients" as *;
@use "vendor/rfs" as *;
// scss-docs-start pagination-mixin
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}pagination-padding-x: #{$padding-x};
--#{$prefix}pagination-padding-y: #{$padding-y};
@include rfs($font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-border-radius: #{$border-radius};
}
// scss-docs-end pagination-mixin
.pagination {
// scss-docs-start pagination-css-vars
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};

4
scss/_placeholders.scss
View File

@ -1,3 +1,7 @@
@use "colors" as *;
@use "config" as *;
@use "variables" as *;
.placeholder {
display: inline-block;
min-height: 1em;

7
scss/_popover.scss
View File

@ -1,3 +1,10 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "vendor/rfs" as *;
@use "mixins/reset-text" as *;
.popover {
// scss-docs-start popover-css-vars
--#{$prefix}popover-zindex: #{$zindex-popover};

8
scss/_progress.scss
View File

@ -1,3 +1,11 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/transition" as *;
@use "mixins/gradients" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "vendor/rfs" as *;
// Disable animation if transitions are disabled
// scss-docs-start progress-keyframes

151
scss/_root.scss
View File

@ -1,3 +1,39 @@
@use "sass:meta";
@use "colors" as *;
@use "config" as *;
@use "variables" as *;
@use "theme" as *;
// @use "maps" as *;
@use "vendor/rfs" as *;
@use "mixins/color-mode" as *;
:root {
color-scheme: light dark;
@each $color-group-name, $color-group in $all-colors {
@if meta.type-of($color-group) == "map" {
@each $color-name, $color-value in $color-group {
--#{$prefix}#{$color-name}: #{$color-value};
}
} @else {
--#{$prefix}#{$color-group-name}: #{$color-group};
}
}
@each $color, $value in $theme-colors {
--#{$prefix}#{$color}: #{$value};
}
@each $color-name, $color-map in $new-theme-colors {
@each $key, $value in $color-map {
--#{$prefix}#{$color-name}-#{$key}: #{$value};
}
}
--#{$prefix}black: #{$black};
--#{$prefix}white: #{$white};
}
:root,
[data-bs-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`.
@ -6,33 +42,33 @@
//
// Generate palettes for full colors, grays, and theme colors.
@each $color, $value in $colors {
--#{$prefix}#{$color}: #{$value};
}
// @each $color, $value in $colors {
// --#{$prefix}#{$color}: #{$value};
// }
@each $color, $value in $grays {
--#{$prefix}gray-#{$color}: #{$value};
}
// @each $color, $value in $grays {
// --#{$prefix}gray-#{$color}: #{$value};
// }
@each $color, $value in $theme-colors {
--#{$prefix}#{$color}: #{$value};
}
// @each $color, $value in $theme-colors {
// --#{$prefix}#{$color}: #{$value};
// }
@each $color, $value in $theme-colors-rgb {
--#{$prefix}#{$color}-rgb: #{$value};
}
// @each $color, $value in $theme-colors-rgb {
// --#{$prefix}#{$color}-rgb: #{$value};
// }
@each $color, $value in $theme-colors-text {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}
// @each $color, $value in $theme-colors-text {
// --#{$prefix}#{$color}-text-emphasis: #{$value};
// }
@each $color, $value in $theme-colors-bg-subtle {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
// @each $color, $value in $theme-colors-bg-subtle {
// --#{$prefix}#{$color}-bg-subtle: #{$value};
// }
@each $color, $value in $theme-colors-border-subtle {
--#{$prefix}#{$color}-border-subtle: #{$value};
}
// @each $color, $value in $theme-colors-border-subtle {
// --#{$prefix}#{$color}-border-subtle: #{$value};
// }
--#{$prefix}white-rgb: #{to-rgb($white)};
--#{$prefix}black-rgb: #{to-rgb($black)};
@ -41,8 +77,8 @@
// Note: Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
--#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
--#{$prefix}font-monospace: #{inspect($font-family-monospace)};
--#{$prefix}font-sans-serif: #{meta.inspect($font-family-sans-serif)};
--#{$prefix}font-monospace: #{meta.inspect($font-family-monospace)};
--#{$prefix}gradient: #{$gradient};
// Root and body
@ -50,7 +86,7 @@
@if $font-size-root != null {
--#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{inspect($font-family-base)};
--#{$prefix}body-font-family: #{meta.inspect($font-family-base)};
@include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
@ -58,33 +94,52 @@
--#{$prefix}body-text-align: #{$body-text-align};
}
@each $key, $value in $theme-bgs {
$key: if($key == null, "", "-" + $key);
--#{$prefix}bg#{$key}: #{$value};
}
@each $key, $value in $theme-fgs {
$key: if($key == null, "", "-" + $key);
--#{$prefix}fg#{$key}: #{$value};
}
@each $key, $value in $theme-borders {
$key: if($key == null, "", "-" + $key);
--#{$prefix}border#{$key}: #{$value};
}
--#{$prefix}body-color: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
// --#{$prefix}emphasis-color: #{$body-emphasis-color};
// --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
// --#{$prefix}secondary-color: #{$body-secondary-color};
// --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
// --#{$prefix}secondary-bg: #{$body-secondary-bg};
// --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
// --#{$prefix}tertiary-color: #{$body-tertiary-color};
// --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
// --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
// --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
// scss-docs-end root-body-variables
--#{$prefix}heading-color: #{$headings-color};
--#{$prefix}link-color: #{$link-color};
--#{$prefix}link-color-rgb: #{to-rgb($link-color)};
--#{$prefix}link-decoration: #{$link-decoration};
// --#{$prefix}link-color: #{$link-color};
// --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
// --#{$prefix}link-decoration: #{$link-decoration};
--#{$prefix}link-hover-color: #{$link-hover-color};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
// --#{$prefix}link-hover-color: #{$link-hover-color};
// --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
--#{$prefix}link-color: light-dark(var(--#{$prefix}primary-base), var(--#{$prefix}primary-text));
--#{$prefix}link-decoration: #{$link-decoration};
--#{$prefix}link-hover-color: color-mix(in oklch, var(--#{$prefix}link-color) 90%, #000);
@if $link-hover-decoration != null {
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
@ -151,17 +206,17 @@
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
@each $color, $value in $theme-colors-text-dark {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}
// @each $color, $value in $theme-colors-text-dark {
// --#{$prefix}#{$color}-text-emphasis: #{$value};
// }
@each $color, $value in $theme-colors-bg-subtle-dark {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
// @each $color, $value in $theme-colors-bg-subtle-dark {
// --#{$prefix}#{$color}-bg-subtle: #{$value};
// }
@each $color, $value in $theme-colors-border-subtle-dark {
--#{$prefix}#{$color}-border-subtle: #{$value};
}
// @each $color, $value in $theme-colors-border-subtle-dark {
// --#{$prefix}#{$color}-border-subtle: #{$value};
// }
--#{$prefix}heading-color: #{$headings-color-dark};

15
scss/_spinners.scss
View File

@ -1,3 +1,18 @@
@use "config" as *;
@use "variables" as *;
// scss-docs-start spinner-variables
$spinner-width: 2rem !default;
$spinner-height: $spinner-width !default;
$spinner-vertical-align: -.125em !default;
$spinner-border-width: .25em !default;
$spinner-animation-speed: .75s !default;
$spinner-width-sm: 1rem !default;
$spinner-height-sm: $spinner-width-sm !default;
$spinner-border-width-sm: .2em !default;
// scss-docs-end spinner-variables
//
// Rotating border
//

153
scss/_theme.scss Normal file
View File

@ -0,0 +1,153 @@
@use "sass:meta";
@use "sass:map";
@use "config" as *;
@use "colors" as *;
@function theme-color-values($key) {
$result: ();
@each $color-name, $color-map in $new-theme-colors {
@if map.has-key($color-map, $key) {
$result: map.merge($result, ($color-name: map.get($color-map, $key)));
}
}
@return $result;
}
// Recursive mixin to handle nested maps
@mixin create-css-vars($map, $parent-key: "") {
@each $key, $value in $map {
$current-key: if($parent-key == "", $key, "#{$parent-key}-#{$key}");
@if meta.type-of($value) == "map" {
@include create-css-vars($value, $current-key);
} @else {
--#{$prefix}#{$current-key}: #{$value};
}
}
}
// scss-docs-start theme-colors
$new-theme-colors: (
"primary": (
"base": var(--#{$prefix}blue-500),
"text": light-dark(var(--#{$prefix}blue-600), var(--#{$prefix}blue-300)),
"bg": light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-500)),
"bg-subtle": light-dark(var(--#{$prefix}blue-100), var(--#{$prefix}blue-900)),
"bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}blue-200), var(--#{$prefix}blue-300)), var(--#{$prefix}blue-700)),
"border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}white)
),
"accent": (
"base": var(--#{$prefix}indigo-500),
"text": light-dark(var(--#{$prefix}indigo-600), var(--#{$prefix}indigo-300)),
"bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)),
"bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)),
"bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-300)), var(--#{$prefix}indigo-700)),
"border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}indigo-500) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}white)
),
"danger": (
"base": var(--#{$prefix}red-500),
"text": light-dark(var(--#{$prefix}red-600), var(--#{$prefix}red-300)),
"bg": light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-500)),
"bg-subtle": light-dark(var(--#{$prefix}red-100), var(--#{$prefix}red-900)),
"bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)),
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}red-200), var(--#{$prefix}red-300)), var(--#{$prefix}red-700)),
"border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}white)
),
"warning": (
"base": var(--#{$prefix}yellow-500),
"text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-300)),
"bg": light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-500)),
"bg-subtle": light-dark(var(--#{$prefix}yellow-100), var(--#{$prefix}yellow-900)),
"bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)),
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-300)), var(--#{$prefix}yellow-700)),
"border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}gray-900)
),
"success": (
"base": var(--#{$prefix}green-500),
"text": light-dark(var(--#{$prefix}green-600), var(--#{$prefix}green-300)),
"bg": light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-500)),
"bg-subtle": light-dark(var(--#{$prefix}green-100), var(--#{$prefix}green-900)),
"bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)),
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}green-200), var(--#{$prefix}green-300)), var(--#{$prefix}green-700)),
"border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}green-500) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}white)
),
"info": (
"base": var(--#{$prefix}cyan-500),
"text": light-dark(var(--#{$prefix}cyan-600), var(--#{$prefix}cyan-300)),
"bg": light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-500)),
"bg-subtle": light-dark(var(--#{$prefix}cyan-100), var(--#{$prefix}cyan-900)),
"bg-muted": light-dark(var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-800)),
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-300)), var(--#{$prefix}cyan-700)),
"border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}cyan-500) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}gray-900)
),
"secondary": (
"base": var(--#{$prefix}gray-300),
"text": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
"bg": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
"bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
"bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in oklch, var(--#{$prefix}gray-600), var(--#{$prefix}gray-700))),
"border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, var(--#{$prefix}bg)),
"contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
)
) !default;
// scss-docs-end theme-colors
// mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
$theme-bgs: (
null: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900)),
"1": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-900), var(--#{$prefix}gray-800))),
"2": light-dark(color-mix(in srgb, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-700))),
"3": light-dark(color-mix(in srgb, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in srgb, var(--#{$prefix}gray-700), var(--#{$prefix}gray-600))),
"white": var(--#{$prefix}white),
"black": var(--#{$prefix}black),
"transparent": transparent,
"inherit": inherit,
) !default;
$theme-fgs: (
null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
"1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
"2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
"3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
"white": var(--#{$prefix}white),
"black": var(--#{$prefix}black),
"inherit": inherit,
) !default;
$theme-borders: (
null: light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-700)),
"muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-800)),
"subtle": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900))),
"emphasized": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-600)),
) !default;
// $util-opacity: (
// "10": .1,
// "20": .2,
// "30": .3,
// "40": .4,
// "50": .5,
// "60": .6,
// "70": .7,
// "80": .8,
// "90": .9,
// "100": 1
// ) !default;

5
scss/_toasts.scss
View File

@ -1,3 +1,8 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "vendor/rfs" as *;
.toast {
// scss-docs-start toast-css-vars
--#{$prefix}toast-zindex: #{$zindex-toast};

7
scss/_tooltip.scss
View File

@ -1,3 +1,10 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/deprecate" as *;
@use "vendor/rfs" as *;
@use "mixins/reset-text" as *;
// Base class
.tooltip {
// scss-docs-start tooltip-css-vars

4
scss/_transitions.scss
View File

@ -1,3 +1,7 @@
@use "config" as *;
@use "variables" as *;
@use "mixins/transition" as *;
.fade {
@include transition($transition-fade);

326
scss/_utilities.scss
View File

@ -1,8 +1,13 @@
// Utilities
@use "sass:map";
@use "config" as *;
@use "colors" as *;
@use "variables" as *;
@use "functions" as *;
@use "theme" as *;
$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
$utilities: map.merge(
(
// scss-docs-start utils-vertical-align
"align": (
@ -12,16 +17,23 @@ $utilities: map-merge(
),
// scss-docs-end utils-vertical-align
// scss-docs-start utils-aspect-ratio
"aspect-ratio": (
"aspect-ratio-attr": (
selector: "attr-includes",
class: "ratio-",
property: aspect-ratio,
values: var(--#{$prefix}ratio),
),
"aspect-ratio": (
// property: aspect-ratio,
property: --#{$prefix}ratio,
class: ratio,
values: $aspect-ratios
),
// scss-docs-end utils-aspect-ratio
// scss-docs-start utils-float
"float": (
responsive: true,
property: float,
responsive: true,
values: (
start: left,
end: right,
@ -93,10 +105,10 @@ $utilities: map-merge(
// scss-docs-end utils-shadow
// scss-docs-start utils-focus-ring
"focus-ring": (
css-var: true,
css-variable-name: focus-ring-color,
// css-var: true,
property: --#{$prefix}focus-ring-color,
class: focus-ring,
values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
values: theme-color-values("focus-ring"),
),
// scss-docs-end utils-focus-ring
// scss-docs-start utils-position
@ -141,14 +153,15 @@ $utilities: map-merge(
)
),
"border-top": (
property: border-top,
class: border-top,
property: border-block-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-end": (
property: border-right,
property: border-inline-end,
class: border-end,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
@ -156,49 +169,56 @@ $utilities: map-merge(
)
),
"border-bottom": (
property: border-bottom,
property: border-block-end,
class: border-bottom,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-start": (
property: border-left,
property: border-inline-start,
class: border-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-y": (
property: border-block,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-x": (
property: border-inline,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-color": (
property: border-color,
class: border,
local-vars: (
"border-opacity": 1
),
values: $utilities-border-colors
),
"subtle-border-color": (
property: border-color,
class: border,
values: $utilities-border-subtle
values: theme-color-values("border")
),
"border-width": (
property: border-width,
class: border,
values: $border-widths
),
"border-opacity": (
css-var: true,
class: border-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
// "border-opacity": (
// css-var: true,
// class: border-opacity,
// values: (
// 10: .1,
// 25: .25,
// 50: .5,
// 75: .75,
// 100: 1
// )
// ),
// scss-docs-end utils-borders
// Sizing utilities
// scss-docs-start utils-sizing
@ -326,6 +346,15 @@ $utilities: map-merge(
evenly: space-evenly,
)
),
"justify-self": (
responsive: true,
property: justify-self,
values: (
start: flex-start,
end: flex-end,
center: center,
)
),
"align-items": (
responsive: true,
property: align-items,
@ -382,87 +411,87 @@ $utilities: map-merge(
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
values: map.merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
values: map.merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
values: map.merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
values: map.merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
values: map.merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
values: map.merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
values: map.merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// "negative-margin": (
// responsive: true,
// property: margin,
// class: m,
// values: $negative-spacers
// ),
// "negative-margin-x": (
// responsive: true,
// property: margin-right margin-left,
// class: mx,
// values: $negative-spacers
// ),
// "negative-margin-y": (
// responsive: true,
// property: margin-top margin-bottom,
// class: my,
// values: $negative-spacers
// ),
// "negative-margin-top": (
// responsive: true,
// property: margin-top,
// class: mt,
// values: $negative-spacers
// ),
// "negative-margin-end": (
// responsive: true,
// property: margin-right,
// class: me,
// values: $negative-spacers
// ),
// "negative-margin-bottom": (
// responsive: true,
// property: margin-bottom,
// class: mb,
// values: $negative-spacers
// ),
// "negative-margin-start": (
// responsive: true,
// property: margin-left,
// class: ms,
// values: $negative-spacers
// ),
// Padding utilities
"padding": (
responsive: true,
@ -602,41 +631,43 @@ $utilities: map-merge(
),
// scss-docs-end utils-text
// scss-docs-start utils-color
"color-attr": (
selector: "attr-includes",
class: "color-",
property: color,
values: var(--#{$prefix}color),
),
"color": (
property: --#{$prefix}color,
class: color,
values: map.merge(theme-color-values("text"), $theme-fgs),
),
"color-opacity": (
class: color,
property: color,
class: text,
local-vars: (
"text-opacity": 1
),
values: map-merge(
$utilities-text-colors,
(
"body-secondary": var(--#{$prefix}secondary-color),
"body-tertiary": var(--#{$prefix}tertiary-color),
"body-emphasis": var(--#{$prefix}emphasis-color),
"reset": inherit,
)
)
),
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
10: color-mix(in oklch, var(--#{$prefix}color) 10%, transparent),
20: color-mix(in oklch, var(--#{$prefix}color) 20%, transparent),
30: color-mix(in oklch, var(--#{$prefix}color) 30%, transparent),
40: color-mix(in oklch, var(--#{$prefix}color) 40%, transparent),
50: color-mix(in oklch, var(--#{$prefix}color) 50%, transparent),
60: color-mix(in oklch, var(--#{$prefix}color) 60%, transparent),
70: color-mix(in oklch, var(--#{$prefix}color) 70%, transparent),
80: color-mix(in oklch, var(--#{$prefix}color) 80%, transparent),
90: color-mix(in oklch, var(--#{$prefix}color) 90%, transparent),
100: var(--#{$prefix}color),
)
),
"text-color": (
property: color,
class: text,
values: $utilities-text-emphasis-colors
"contrast-color": (
property: --#{$prefix}color,
class: color-on,
values: theme-color-values("contrast"),
),
// scss-docs-end utils-color
// scss-docs-start utils-links
"link-opacity": (
css-var: true,
property: --#{$prefix}link-opacity,
// css-var: true,
class: link-opacity,
state: hover,
values: (
@ -663,15 +694,16 @@ $utilities: map-merge(
local-vars: (
"link-underline-opacity": 1
),
values: map-merge(
$utilities-links-underline,
(
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
)
)
// values: map.merge(
// $utilities-links-underline,
// (
// // null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
// )
// )
),
"link-underline-opacity": (
css-var: true,
// css-var: true,
property: --#{$prefix}link-underline-opacity,
class: link-underline-opacity,
state: hover,
values: (
@ -685,36 +717,42 @@ $utilities: map-merge(
),
// scss-docs-end utils-links
// scss-docs-start utils-bg-color
"background-color": (
"bg-attr": (
selector: "attr-includes",
class: "bg-",
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
values: var(--#{$prefix}bg),
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent,
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
)
)
"bg-color": (
property: --#{$prefix}bg,
class: bg,
values: map.merge(theme-color-values("bg"), $theme-bgs),
),
"bg-color-subtle": (
property: --#{$prefix}bg,
class: bg-subtle,
values: theme-color-values("bg-subtle"),
),
"bg-color-muted": (
property: --#{$prefix}bg,
class: bg-muted,
values: theme-color-values("bg-muted"),
),
"bg-opacity": (
css-var: true,
class: bg-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
"subtle-background-color": (
property: background-color,
class: bg,
values: $utilities-bg-subtle
property: background-color,
values: (
10: color-mix(in oklch, var(--#{$prefix}bg) 10%, transparent),
20: color-mix(in oklch, var(--#{$prefix}bg) 20%, transparent),
30: color-mix(in oklch, var(--#{$prefix}bg) 30%, transparent),
40: color-mix(in oklch, var(--#{$prefix}bg) 40%, transparent),
50: color-mix(in oklch, var(--#{$prefix}bg) 50%, transparent),
60: color-mix(in oklch, var(--#{$prefix}bg) 60%, transparent),
70: color-mix(in oklch, var(--#{$prefix}bg) 70%, transparent),
80: color-mix(in oklch, var(--#{$prefix}bg) 80%, transparent),
90: color-mix(in oklch, var(--#{$prefix}bg) 90%, transparent),
100: var(--#{$prefix}bg),
)
),
// scss-docs-end utils-bg-color
"gradient": (
@ -734,7 +772,7 @@ $utilities: map-merge(
),
// scss-docs-end utils-interaction
// scss-docs-start utils-border-radius
"rounded": (
"border-radius": (
property: border-radius,
class: rounded,
values: (
@ -744,7 +782,7 @@ $utilities: map-merge(
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
@ -759,7 +797,7 @@ $utilities: map-merge(
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
@ -774,7 +812,7 @@ $utilities: map-merge(
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
@ -789,7 +827,7 @@ $utilities: map-merge(
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
@ -804,7 +842,7 @@ $utilities: map-merge(
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)

144
scss/_variables-dark.scss
View File

@ -8,97 +8,97 @@
// scss-docs-start sass-dark-mode-vars
// scss-docs-start theme-text-dark-variables
$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
$success-text-emphasis-dark: tint-color($success, 40%) !default;
$info-text-emphasis-dark: tint-color($info, 40%) !default;
$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
$light-text-emphasis-dark: $gray-100 !default;
$dark-text-emphasis-dark: $gray-300 !default;
// $primary-text-emphasis-dark: tint-color($primary, 40%) !default;
// $secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
// $success-text-emphasis-dark: tint-color($success, 40%) !default;
// $info-text-emphasis-dark: tint-color($info, 40%) !default;
// $warning-text-emphasis-dark: tint-color($warning, 40%) !default;
// $danger-text-emphasis-dark: tint-color($danger, 40%) !default;
// $light-text-emphasis-dark: $gray-100 !default;
// $dark-text-emphasis-dark: $gray-300 !default;
// scss-docs-end theme-text-dark-variables
// scss-docs-start theme-bg-subtle-dark-variables
$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
$success-bg-subtle-dark: shade-color($success, 80%) !default;
$info-bg-subtle-dark: shade-color($info, 80%) !default;
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
$light-bg-subtle-dark: $gray-800 !default;
$dark-bg-subtle-dark: mix($gray-800, $black) !default;
// $primary-bg-subtle-dark: shade-color($primary, 80%) !default;
// $secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
// $success-bg-subtle-dark: shade-color($success, 80%) !default;
// $info-bg-subtle-dark: shade-color($info, 80%) !default;
// $warning-bg-subtle-dark: shade-color($warning, 80%) !default;
// $danger-bg-subtle-dark: shade-color($danger, 80%) !default;
// $light-bg-subtle-dark: $gray-800 !default;
// $dark-bg-subtle-dark: color.mix($gray-800, $black) !default;
// scss-docs-end theme-bg-subtle-dark-variables
// scss-docs-start theme-border-subtle-dark-variables
$primary-border-subtle-dark: shade-color($primary, 40%) !default;
$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
$success-border-subtle-dark: shade-color($success, 40%) !default;
$info-border-subtle-dark: shade-color($info, 40%) !default;
$warning-border-subtle-dark: shade-color($warning, 40%) !default;
$danger-border-subtle-dark: shade-color($danger, 40%) !default;
$light-border-subtle-dark: $gray-700 !default;
$dark-border-subtle-dark: $gray-800 !default;
// $primary-border-subtle-dark: shade-color($primary, 40%) !default;
// $secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
// $success-border-subtle-dark: shade-color($success, 40%) !default;
// $info-border-subtle-dark: shade-color($info, 40%) !default;
// $warning-border-subtle-dark: shade-color($warning, 40%) !default;
// $danger-border-subtle-dark: shade-color($danger, 40%) !default;
// $light-border-subtle-dark: $gray-700 !default;
// $dark-border-subtle-dark: $gray-800 !default;
// scss-docs-end theme-border-subtle-dark-variables
$body-color-dark: $gray-300 !default;
$body-bg-dark: $gray-900 !default;
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
$body-secondary-bg-dark: $gray-800 !default;
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
$body-emphasis-color-dark: $white !default;
$border-color-dark: $gray-700 !default;
$border-color-translucent-dark: rgba($white, .15) !default;
$headings-color-dark: inherit !default;
$link-color-dark: tint-color($primary, 40%) !default;
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
$code-color-dark: tint-color($code-color, 40%) !default;
$mark-color-dark: $body-color-dark !default;
$mark-bg-dark: $yellow-800 !default;
// $body-color-dark: $gray-300 !default;
// $body-bg-dark: $gray-900 !default;
// $body-secondary-color-dark: rgba($body-color-dark, .75) !default;
// $body-secondary-bg-dark: $gray-800 !default;
// $body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
// $body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%) !default;
// $body-emphasis-color-dark: $white !default;
// $border-color-dark: $gray-700 !default;
// $border-color-translucent-dark: rgba($white, .15) !default;
// $headings-color-dark: inherit !default;
// $link-color-dark: tint-color($primary, 40%) !default;
// $link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
// $code-color-dark: tint-color($code-color, 40%) !default;
// $mark-color-dark: $body-color-dark !default;
// $mark-bg-dark: $yellow-800 !default;
//
// Forms
//
// //
// // Forms
// //
$form-select-indicator-color-dark: $body-color-dark !default;
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
// $form-select-indicator-color-dark: $body-color-dark !default;
// $form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
$form-switch-color-dark: rgba($white, .25) !default;
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
// $form-switch-color-dark: rgba($white, .25) !default;
// $form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
// scss-docs-start form-validation-colors-dark
$form-valid-color-dark: $green-300 !default;
$form-valid-border-color-dark: $green-300 !default;
$form-invalid-color-dark: $red-300 !default;
$form-invalid-border-color-dark: $red-300 !default;
// scss-docs-end form-validation-colors-dark
// // scss-docs-start form-validation-colors-dark
// $form-valid-color-dark: $green-300 !default;
// $form-valid-border-color-dark: $green-300 !default;
// $form-invalid-color-dark: $red-300 !default;
// $form-invalid-border-color-dark: $red-300 !default;
// // scss-docs-end form-validation-colors-dark
//
// Accordion
//
// //
// // Accordion
// //
$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
// $accordion-icon-color-dark: $primary-text-emphasis-dark !default;
// $accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
// scss-docs-end sass-dark-mode-vars
// $accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
// $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
// // scss-docs-end sass-dark-mode-vars
//
// Carousel
//
// //
// // Carousel
// //
// scss-docs-start carousel-dark-variables
$carousel-indicator-active-bg-dark: $black !default;
$carousel-caption-color-dark: $black !default;
$carousel-control-icon-filter-dark: invert(1) grayscale(100) !default;
// scss-docs-end carousel-dark-variables
// // scss-docs-start carousel-dark-variables
// $carousel-indicator-active-bg-dark: $black !default;
// $carousel-caption-color-dark: $black !default;
// $carousel-control-icon-filter-dark: invert(1) grayscale(100) !default;
// // scss-docs-end carousel-dark-variables
//
// Close button
//
// //
// // Close button
// //
$btn-close-filter-dark: invert(1) grayscale(100%) brightness(200%) !default;
// $btn-close-filter-dark: invert(1) grayscale(100%) brightness(200%) !default;

564
scss/_variables.scss
View File

@ -1,309 +1,21 @@
@use "sass:color";
@use "sass:string";
@use "colors" as *;
@use "config" as *;
@use "functions" as *;
// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
// Color system
// scss-docs-start gray-color-variables
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
// scss-docs-end gray-color-variables
// fusv-disable
// scss-docs-start gray-colors-map
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
) !default;
// scss-docs-end gray-colors-map
// fusv-enable
// scss-docs-start color-variables
$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #198754 !default;
$teal: #20c997 !default;
$cyan: #0dcaf0 !default;
// scss-docs-end color-variables
// scss-docs-start colors-map
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"black": $black,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;
// scss-docs-end colors-map
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.2 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG/#contrast-minimum
$min-contrast-ratio: 4.5 !default;
// Customize the light and dark text colors for use in our color contrast function.
$color-contrast-dark: $black !default;
$color-contrast-light: $white !default;
// fusv-disable
$blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 60%) !default;
$blue-300: tint-color($blue, 40%) !default;
$blue-400: tint-color($blue, 20%) !default;
$blue-500: $blue !default;
$blue-600: shade-color($blue, 20%) !default;
$blue-700: shade-color($blue, 40%) !default;
$blue-800: shade-color($blue, 60%) !default;
$blue-900: shade-color($blue, 80%) !default;
$indigo-100: tint-color($indigo, 80%) !default;
$indigo-200: tint-color($indigo, 60%) !default;
$indigo-300: tint-color($indigo, 40%) !default;
$indigo-400: tint-color($indigo, 20%) !default;
$indigo-500: $indigo !default;
$indigo-600: shade-color($indigo, 20%) !default;
$indigo-700: shade-color($indigo, 40%) !default;
$indigo-800: shade-color($indigo, 60%) !default;
$indigo-900: shade-color($indigo, 80%) !default;
$purple-100: tint-color($purple, 80%) !default;
$purple-200: tint-color($purple, 60%) !default;
$purple-300: tint-color($purple, 40%) !default;
$purple-400: tint-color($purple, 20%) !default;
$purple-500: $purple !default;
$purple-600: shade-color($purple, 20%) !default;
$purple-700: shade-color($purple, 40%) !default;
$purple-800: shade-color($purple, 60%) !default;
$purple-900: shade-color($purple, 80%) !default;
$pink-100: tint-color($pink, 80%) !default;
$pink-200: tint-color($pink, 60%) !default;
$pink-300: tint-color($pink, 40%) !default;
$pink-400: tint-color($pink, 20%) !default;
$pink-500: $pink !default;
$pink-600: shade-color($pink, 20%) !default;
$pink-700: shade-color($pink, 40%) !default;
$pink-800: shade-color($pink, 60%) !default;
$pink-900: shade-color($pink, 80%) !default;
$red-100: tint-color($red, 80%) !default;
$red-200: tint-color($red, 60%) !default;
$red-300: tint-color($red, 40%) !default;
$red-400: tint-color($red, 20%) !default;
$red-500: $red !default;
$red-600: shade-color($red, 20%) !default;
$red-700: shade-color($red, 40%) !default;
$red-800: shade-color($red, 60%) !default;
$red-900: shade-color($red, 80%) !default;
$orange-100: tint-color($orange, 80%) !default;
$orange-200: tint-color($orange, 60%) !default;
$orange-300: tint-color($orange, 40%) !default;
$orange-400: tint-color($orange, 20%) !default;
$orange-500: $orange !default;
$orange-600: shade-color($orange, 20%) !default;
$orange-700: shade-color($orange, 40%) !default;
$orange-800: shade-color($orange, 60%) !default;
$orange-900: shade-color($orange, 80%) !default;
$yellow-100: tint-color($yellow, 80%) !default;
$yellow-200: tint-color($yellow, 60%) !default;
$yellow-300: tint-color($yellow, 40%) !default;
$yellow-400: tint-color($yellow, 20%) !default;
$yellow-500: $yellow !default;
$yellow-600: shade-color($yellow, 20%) !default;
$yellow-700: shade-color($yellow, 40%) !default;
$yellow-800: shade-color($yellow, 60%) !default;
$yellow-900: shade-color($yellow, 80%) !default;
$green-100: tint-color($green, 80%) !default;
$green-200: tint-color($green, 60%) !default;
$green-300: tint-color($green, 40%) !default;
$green-400: tint-color($green, 20%) !default;
$green-500: $green !default;
$green-600: shade-color($green, 20%) !default;
$green-700: shade-color($green, 40%) !default;
$green-800: shade-color($green, 60%) !default;
$green-900: shade-color($green, 80%) !default;
$teal-100: tint-color($teal, 80%) !default;
$teal-200: tint-color($teal, 60%) !default;
$teal-300: tint-color($teal, 40%) !default;
$teal-400: tint-color($teal, 20%) !default;
$teal-500: $teal !default;
$teal-600: shade-color($teal, 20%) !default;
$teal-700: shade-color($teal, 40%) !default;
$teal-800: shade-color($teal, 60%) !default;
$teal-900: shade-color($teal, 80%) !default;
$cyan-100: tint-color($cyan, 80%) !default;
$cyan-200: tint-color($cyan, 60%) !default;
$cyan-300: tint-color($cyan, 40%) !default;
$cyan-400: tint-color($cyan, 20%) !default;
$cyan-500: $cyan !default;
$cyan-600: shade-color($cyan, 20%) !default;
$cyan-700: shade-color($cyan, 40%) !default;
$cyan-800: shade-color($cyan, 60%) !default;
$cyan-900: shade-color($cyan, 80%) !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;
// fusv-enable
// scss-docs-start theme-color-variables
$primary: $blue !default;
$primary: $purple-500 !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$success: $green-500 !default;
$info: $cyan-500 !default;
$warning: $yellow-500 !default;
$danger: $red-500 !default;
$light: $gray-100 !default;
$dark: $gray-900 !default;
// scss-docs-end theme-color-variables
@ -321,38 +33,38 @@ $theme-colors: (
) !default;
// scss-docs-end theme-colors-map
// scss-docs-start theme-text-variables
$primary-text-emphasis: shade-color($primary, 60%) !default;
$secondary-text-emphasis: shade-color($secondary, 60%) !default;
$success-text-emphasis: shade-color($success, 60%) !default;
$info-text-emphasis: shade-color($info, 60%) !default;
$warning-text-emphasis: shade-color($warning, 60%) !default;
$danger-text-emphasis: shade-color($danger, 60%) !default;
$light-text-emphasis: $gray-700 !default;
$dark-text-emphasis: $gray-700 !default;
// scss-docs-end theme-text-variables
// // scss-docs-start theme-text-variables
// $primary-text-emphasis: shade-color($primary, 60%) !default;
// $secondary-text-emphasis: shade-color($secondary, 60%) !default;
// $success-text-emphasis: shade-color($success, 60%) !default;
// $info-text-emphasis: shade-color($info, 60%) !default;
// $warning-text-emphasis: shade-color($warning, 60%) !default;
// $danger-text-emphasis: shade-color($danger, 60%) !default;
// $light-text-emphasis: $gray-700 !default;
// $dark-text-emphasis: $gray-700 !default;
// // scss-docs-end theme-text-variables
// scss-docs-start theme-bg-subtle-variables
$primary-bg-subtle: tint-color($primary, 80%) !default;
$secondary-bg-subtle: tint-color($secondary, 80%) !default;
$success-bg-subtle: tint-color($success, 80%) !default;
$info-bg-subtle: tint-color($info, 80%) !default;
$warning-bg-subtle: tint-color($warning, 80%) !default;
$danger-bg-subtle: tint-color($danger, 80%) !default;
$light-bg-subtle: mix($gray-100, $white) !default;
$dark-bg-subtle: $gray-400 !default;
// scss-docs-end theme-bg-subtle-variables
// // scss-docs-start theme-bg-subtle-variables
// $primary-bg-subtle: tint-color($primary, 80%) !default;
// $secondary-bg-subtle: tint-color($secondary, 80%) !default;
// $success-bg-subtle: tint-color($success, 80%) !default;
// $info-bg-subtle: tint-color($info, 80%) !default;
// $warning-bg-subtle: tint-color($warning, 80%) !default;
// $danger-bg-subtle: tint-color($danger, 80%) !default;
// $light-bg-subtle: color.mix($gray-100, $white) !default;
// $dark-bg-subtle: $gray-400 !default;
// // scss-docs-end theme-bg-subtle-variables
// scss-docs-start theme-border-subtle-variables
$primary-border-subtle: tint-color($primary, 60%) !default;
$secondary-border-subtle: tint-color($secondary, 60%) !default;
$success-border-subtle: tint-color($success, 60%) !default;
$info-border-subtle: tint-color($info, 60%) !default;
$warning-border-subtle: tint-color($warning, 60%) !default;
$danger-border-subtle: tint-color($danger, 60%) !default;
$light-border-subtle: $gray-200 !default;
$dark-border-subtle: $gray-500 !default;
// scss-docs-end theme-border-subtle-variables
// // scss-docs-start theme-border-subtle-variables
// $primary-border-subtle: tint-color($primary, 60%) !default;
// $secondary-border-subtle: tint-color($secondary, 60%) !default;
// $success-border-subtle: tint-color($success, 60%) !default;
// $info-border-subtle: tint-color($info, 60%) !default;
// $warning-border-subtle: tint-color($warning, 60%) !default;
// $danger-border-subtle: tint-color($danger, 60%) !default;
// $light-border-subtle: $gray-200 !default;
// $dark-border-subtle: $gray-500 !default;
// // scss-docs-end theme-border-subtle-variables
// Characters which are escaped by the escape-svg function
$escaped-characters: (
@ -363,33 +75,38 @@ $escaped-characters: (
(")", "%29"),
) !default;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
// // Options
// //
// // Quickly modify global styling by enabling or disabling optional features.
$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-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`
// $enable-dark-mode: true !default;
// $color-mode-type: data !default; // `data` or `media-query`
// Prefix for :root CSS variables
// // Prefix for :root CSS variables
// $prefix: bs- !default;
// $color-mode-type: "media-query" !default;
// $color-contrast-dark: #000 !default;
// $color-contrast-light: #fff !default;
// $min-contrast-ratio: 4.5 !default;
$prefix: bs- !default;
// Gradient
//
@ -490,8 +207,8 @@ $grid-breakpoints: (
) !default;
// scss-docs-end grid-breakpoints
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
// Grid containers
@ -508,7 +225,7 @@ $container-max-widths: (
) !default;
// scss-docs-end container-max-widths
@include _assert-ascending($container-max-widths, "$container-max-widths");
// @include _assert-ascending($container-max-widths, "$container-max-widths");
// Grid columns
@ -829,7 +546,8 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
$btn-link-color: var(--#{$prefix}link-color) !default;
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
$btn-link-disabled-color: $gray-600 !default;
$btn-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
$btn-link-color-contrast: color-contrast($link-color) !default;
$btn-link-focus-shadow-rgb: to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: var(--#{$prefix}border-radius) !default;
@ -1192,10 +910,10 @@ $navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-toggler-focus-width: $btn-focus-width !default;
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
$navbar-light-color: color-mix(in srgb, var(--#{$prefix}fg-black) 65%, transparent) !default;
$navbar-light-hover-color: color-mix(in srgb, var(--#{$prefix}fg-black) 80%, transparent) !default;
$navbar-light-active-color: color-mix(in srgb, var(--#{$prefix}fg-black) 100%, transparent) !default;
$navbar-light-disabled-color: color-mix(in srgb, var(--#{$prefix}fg-black) 30%, transparent) !default;
$navbar-light-icon-color: rgba($body-color, .75) !default;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
@ -1369,8 +1087,8 @@ $accordion-button-active-color: var(--#{$prefix}primary-text-emphasis)
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
$accordion-icon-color: $body-color !default;
$accordion-icon-active-color: $primary-text-emphasis !default;
$accordion-icon-color: var(--#{$prefix}body-color) !default;
$accordion-icon-active-color: var(--#{$prefix}primary-text-emphasis) !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default;
@ -1601,7 +1319,7 @@ $breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: null !default;
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
$breadcrumb-divider: quote("/") !default;
$breadcrumb-divider: string.quote("/") !default;
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
$breadcrumb-border-radius: null !default;
// scss-docs-end breadcrumb-variables
@ -1640,21 +1358,6 @@ $carousel-transition: transform $carousel-transition-duration eas
// scss-docs-end carousel-variables
// Spinners
// scss-docs-start spinner-variables
$spinner-width: 2rem !default;
$spinner-height: $spinner-width !default;
$spinner-vertical-align: -.125em !default;
$spinner-border-width: .25em !default;
$spinner-animation-speed: .75s !default;
$spinner-width-sm: 1rem !default;
$spinner-height-sm: $spinner-width-sm !default;
$spinner-border-width-sm: .2em !default;
// scss-docs-end spinner-variables
// Close
// scss-docs-start close-variables
@ -1704,4 +1407,107 @@ $kbd-bg: var(--#{$prefix}body-color) !default;
$pre-color: null !default;
@import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3
// Dark color mode variables
//
// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
//
// Global colors
//
// scss-docs-start sass-dark-mode-vars
// scss-docs-start theme-text-dark-variables
$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
$success-text-emphasis-dark: tint-color($success, 40%) !default;
$info-text-emphasis-dark: tint-color($info, 40%) !default;
$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
$light-text-emphasis-dark: $gray-100 !default;
$dark-text-emphasis-dark: $gray-300 !default;
// scss-docs-end theme-text-dark-variables
// scss-docs-start theme-bg-subtle-dark-variables
$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
$success-bg-subtle-dark: shade-color($success, 80%) !default;
$info-bg-subtle-dark: shade-color($info, 80%) !default;
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
$light-bg-subtle-dark: $gray-800 !default;
$dark-bg-subtle-dark: color.mix($gray-800, $black) !default;
// scss-docs-end theme-bg-subtle-dark-variables
// scss-docs-start theme-border-subtle-dark-variables
$primary-border-subtle-dark: shade-color($primary, 40%) !default;
$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
$success-border-subtle-dark: shade-color($success, 40%) !default;
$info-border-subtle-dark: shade-color($info, 40%) !default;
$warning-border-subtle-dark: shade-color($warning, 40%) !default;
$danger-border-subtle-dark: shade-color($danger, 40%) !default;
$light-border-subtle-dark: $gray-700 !default;
$dark-border-subtle-dark: $gray-800 !default;
// scss-docs-end theme-border-subtle-dark-variables
$body-color-dark: $gray-300 !default;
$body-bg-dark: $gray-900 !default;
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
$body-secondary-bg-dark: $gray-800 !default;
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
$body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%) !default;
$body-emphasis-color-dark: $white !default;
$border-color-dark: $gray-700 !default;
$border-color-translucent-dark: rgba($white, .15) !default;
$headings-color-dark: inherit !default;
$link-color-dark: tint-color($primary, 40%) !default;
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
$code-color-dark: tint-color($code-color, 40%) !default;
$mark-color-dark: $body-color-dark !default;
$mark-bg-dark: $yellow-800 !default;
//
// Forms
//
$form-select-indicator-color-dark: $body-color-dark !default;
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
$form-switch-color-dark: rgba($white, .25) !default;
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
// scss-docs-start form-validation-colors-dark
$form-valid-color-dark: $green-300 !default;
$form-valid-border-color-dark: $green-300 !default;
$form-invalid-color-dark: $red-300 !default;
$form-invalid-border-color-dark: $red-300 !default;
// scss-docs-end form-validation-colors-dark
//
// Accordion
//
$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
// scss-docs-end sass-dark-mode-vars
//
// Carousel
//
// scss-docs-start carousel-dark-variables
$carousel-indicator-active-bg-dark: $black !default;
$carousel-caption-color-dark: $black !default;
$carousel-control-icon-filter-dark: invert(1) grayscale(100) !default;
// scss-docs-end carousel-dark-variables
//
// Close button
//
$btn-close-filter-dark: invert(1) grayscale(100%) brightness(200%) !default;

33
scss/bootstrap-grid.scss vendored
View File

@ -1,25 +1,20 @@
@import "mixins/banner";
@include bsBanner(Grid);
@use "banner" with (
$file: "Grid"
);
$include-column-box-sizing: true !default;
@use "sass:map";
@use "colors" as *;
@use "config" as *;
@use "variables" as *;
@use "functions" as *;
// @use "maps" as *;
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@forward "utilities"; // Make utilities available downstream
@use "utilities" as *; // Bring utilities into the current namespace
@import "mixins/breakpoints";
@import "mixins/container";
@import "mixins/grid";
@import "mixins/utilities";
@forward "layout/containers";
@forward "layout/grid";
@import "vendor/rfs";
@import "containers";
@import "grid";
@import "utilities";
// Only use the utilities we need
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-get-multiple(
$utilities,
@ -59,4 +54,4 @@ $utilities: map-get-multiple(
)
);
@import "utilities/api";
@use "utilities/api";

14
scss/bootstrap-reboot.scss vendored
View File

@ -1,10 +1,6 @@
@import "mixins/banner";
@include bsBanner(Reboot);
@use "banner" with (
$file: "Reboot"
);
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "root";
@import "reboot";
@forward "root";
@forward "content/reboot";

19
scss/bootstrap-utilities.scss vendored
View File

@ -1,19 +1,16 @@
@import "mixins/banner";
@include bsBanner(Utilities);
@use "banner" with (
$file: "Utilities"
);
// Configuration
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
// @forward "variables";
// Layout & components
@import "root";
@use "root" as *;
// Helpers
@import "helpers";
@forward "helpers";
// Utilities
@import "utilities/api";
@use "utilities" as *;
@use "utilities/api";

82
scss/bootstrap.scss vendored
View File

@ -1,52 +1,46 @@
@import "mixins/banner";
@include bsBanner("");
@use "banner";
// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
// Global CSS variables, layer definitions, and configuration
@use "root";
// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";
// Reboot & Content
@use "content";
// Layout
@use "layout";
// Forms
@use "forms";
// Components
@use "accordion";
@use "alert";
@use "badge";
@use "breadcrumb";
@use "buttons";
@use "button-group";
@use "card";
@use "carousel";
@use "close";
@use "dropdown";
@use "list-group";
@use "modal";
@use "nav";
@use "navbar";
@use "offcanvas";
@use "pagination";
@use "placeholders";
@use "popover";
@use "progress";
@use "spinners";
@use "toasts";
@use "tooltip";
@use "transitions";
// Helpers
@import "helpers";
@use "helpers";
// Utilities
@import "utilities/api";
@use "utilities/api";
// scss-docs-end import-stack

7
scss/_images.scss → scss/content/_images.scss
View File

@ -1,3 +1,10 @@
@use "../config" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/image" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
// Responsive images (ensure images don't scale beyond their parents)
//
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.

6
scss/_reboot.scss → scss/content/_reboot.scss
View File

@ -1,3 +1,9 @@
@use "../colors" as *;
@use "../config" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix

36
scss/_tables.scss → scss/content/_tables.scss
View File

@ -1,3 +1,37 @@
@use "sass:color";
@use "sass:map";
@use "sass:math";
@use "../config" as *;
@use "../colors" as *;
@use "../variables" as *;
@use "../functions" as *;
@use "../layout/breakpoints" as *;
// scss-docs-start table-variant
@mixin table-variant($state, $background) {
.table-#{$state} {
$color: color-contrast(opaque($body-bg, $background));
$hover-bg: color.mix($color, $background, math.percentage($table-hover-bg-factor));
$striped-bg: color.mix($color, $background, math.percentage($table-striped-bg-factor));
$active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
$table-border-color: color.mix($color, $background, math.percentage($table-border-factor));
--#{$prefix}table-color: #{$color};
--#{$prefix}table-bg: #{$background};
--#{$prefix}table-border-color: #{$table-border-color};
--#{$prefix}table-striped-bg: #{$striped-bg};
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$prefix}table-active-bg: #{$active-bg};
--#{$prefix}table-active-color: #{color-contrast($active-bg)};
--#{$prefix}table-hover-bg: #{$hover-bg};
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
color: var(--#{$prefix}table-color);
border-color: var(--#{$prefix}table-border-color);
}
}
// scss-docs-end table-variant
//
// Basic Bootstrap table
//
@ -159,7 +193,7 @@
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
@each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@include media-breakpoint-down($breakpoint) {

7
scss/_type.scss → scss/content/_type.scss
View File

@ -1,6 +1,7 @@
//
// Headings
//
@use "../config" as *;
@use "../variables" as *;
@use "../mixins/lists" as *;
@use "../vendor/rfs" as *;
.lead {
@include font-size($lead-font-size);

4
scss/content/index.scss Normal file
View File

@ -0,0 +1,4 @@
@forward "reboot";
@forward "type";
@forward "tables";
@forward "images";

5
scss/forms/_floating-labels.scss
View File

@ -1,3 +1,8 @@
@use "../config" as *;
@use "../variables" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/transition" as *;
.form-floating {
position: relative;

9
scss/forms/_form-check.scss
View File

@ -1,3 +1,12 @@
@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/color-mode" as *;
//
// Check/radio
//

10
scss/forms/_form-control.scss
View File

@ -1,3 +1,11 @@
@use "sass:math";
@use "../config" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *;
@use "../mixins/gradients" as *;
//
// General form controls (plus a few specific high-level interventions)
//
@ -56,7 +64,7 @@
// https://github.com/twbs/bootstrap/issues/23307
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
// Multiply line-height by 1em if it has no unit
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
height: if(math.unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
// Android Chrome type="date" is taller than the other inputs
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM

6
scss/forms/_form-range.scss
View File

@ -1,3 +1,9 @@
@use "../variables" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *;
@use "../mixins/gradients" as *;
// Range
//
// Style range inputs the same across browsers. Vendor-specific rules for pseudo

8
scss/forms/_form-select.scss
View File

@ -1,3 +1,11 @@
@use "../config" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *;
@use "../mixins/color-mode" as *;
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from

2
scss/forms/_form-text.scss
View File

@ -1,3 +1,5 @@
@use "../variables" as *;
@use "../vendor/rfs" as *;
//
// Form text
//

10
scss/forms/_input-group.scss
View File

@ -1,3 +1,9 @@
@use "sass:map";
@use "sass:string";
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
//
// Base styles
//
@ -116,8 +122,8 @@
}
$validation-messages: "";
@each $state in map-keys($form-validation-states) {
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
@each $state in map.keys($form-validation-states) {
$validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
}
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {

2
scss/forms/_labels.scss
View File

@ -1,3 +1,5 @@
@use "../variables" as *;
@use "../vendor/rfs" as *;
//
// Labels
//

171
scss/forms/_validation.scss
View File

@ -1,3 +1,9 @@
@use "../config" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
// Form validation
//
// Provide feedback to users when form field values are valid or invalid. Works
@ -5,6 +11,171 @@
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server-side validation.
// This mixin uses an `if()` technique to be compatible with Dart Sass
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
// scss-docs-start form-validation-mixins
@mixin form-validation-state-selector($state) {
@if ($state == "valid" or $state == "invalid") {
.was-validated #{if(&, "&", "")}:#{$state},
#{if(&, "&", "")}.is-#{$state} {
@content;
}
} @else {
#{if(&, "&", "")}.is-#{$state} {
@content;
}
}
}
@mixin form-validation-state(
$state,
$color,
$icon,
$tooltip-color: color-contrast($color),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
$border-color: $color
) {
.#{$state}-feedback {
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
@include font-size($form-feedback-font-size);
font-style: $form-feedback-font-style;
color: $color;
}
.#{$state}-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem;
@include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height;
color: $tooltip-color;
background-color: $tooltip-bg-color;
@include border-radius($form-feedback-tooltip-border-radius);
}
@include form-validation-state-selector($state) {
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
.form-control {
@include form-validation-state-selector($state) {
border-color: $border-color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-image: escape-svg($icon);
background-repeat: no-repeat;
background-position: right $input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half;
}
&:focus {
border-color: $border-color;
@if $enable-shadows {
@include box-shadow($input-box-shadow, $focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $focus-box-shadow;
}
}
}
}
// stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
}
}
}
.form-select {
@include form-validation-state-selector($state) {
border-color: $border-color;
@if $enable-validation-icons {
&:not([multiple]):not([size]),
&:not([multiple])[size="1"] {
--#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
padding-right: $form-select-feedback-icon-padding-end;
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
}
}
&:focus {
border-color: $border-color;
@if $enable-shadows {
@include box-shadow($form-select-box-shadow, $focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $focus-box-shadow;
}
}
}
}
.form-control-color {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
width: add($form-color-width, $input-height-inner);
}
}
}
.form-check-input {
@include form-validation-state-selector($state) {
border-color: $border-color;
&:checked {
background-color: $color;
}
&:focus {
box-shadow: $focus-box-shadow;
}
~ .form-check-label {
color: $color;
}
}
}
.form-check-inline .form-check-input {
~ .#{$state}-feedback {
margin-left: .5em;
}
}
.input-group {
> .form-control:not(:focus),
> .form-select:not(:focus),
> .form-floating:not(:focus-within) {
@include form-validation-state-selector($state) {
@if $state == "valid" {
z-index: 3;
} @else if $state == "invalid" {
z-index: 4;
}
}
}
}
}
// scss-docs-end form-validation-mixins
// scss-docs-start form-validation-states-loop
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);

9
scss/forms/index.scss Normal file
View File

@ -0,0 +1,9 @@
@forward "labels";
@forward "form-text";
@forward "form-control";
@forward "form-select";
@forward "form-check";
@forward "form-range";
@forward "floating-labels";
@forward "input-group";
@forward "validation";

4
scss/helpers/_color-bg.scss
View File

@ -1,3 +1,7 @@
@use "../colors" as *;
@use "../config" as *;
@use "../variables" as *;
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors {
.text-bg-#{$color} {

30
scss/helpers/_colored-links.scss
View File

@ -1,30 +1,36 @@
@use "../config" as *;
@use "../colors" as *;
@use "../variables" as *;
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors {
@layer helpers {
@each $color, $value in $theme-colors {
.link-#{$color} {
color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-underline-opacity));
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
$hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
}
}
}
}
}
// One-off special link helper as a bridge until v6
.link-body-emphasis {
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
// One-off special link helper as a bridge until v6
.link-body-emphasis {
color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity));
text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity));
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity, .75));
text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity, .75));
}
}
}
}

2
scss/helpers/_focus-ring.scss
View File

@ -1,3 +1,5 @@
@use "../config" as *;
.focus-ring:focus {
outline: 0;
// By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values

4
scss/helpers/_icon-link.scss
View File

@ -1,3 +1,7 @@
@use "../config" as *;
@use "../variables" as *;
@use "../mixins/transition" as *;
.icon-link {
display: inline-flex;
gap: $icon-link-gap;

7
scss/helpers/_position.scss
View File

@ -1,3 +1,8 @@
@use "sass:map";
@use "../config" as *;
@use "../variables" as *;
@use "../layout/breakpoints" as *;
// Shorthand
.fixed-top {
@ -17,7 +22,7 @@
}
// Responsive sticky top and bottom
@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);

2
scss/helpers/_stretched-link.scss
View File

@ -1,3 +1,5 @@
@use "../variables" as *;
//
// Stretched link
//

2
scss/helpers/_text-truncation.scss
View File

@ -1,4 +1,4 @@
//
@use "../mixins/text-truncate" as *;
// Text truncation
//

2
scss/helpers/_visually-hidden.scss
View File

@ -1,3 +1,5 @@
@use "../mixins/visually-hidden" as *;
//
// Visually hidden
//

2
scss/helpers/_vr.scss
View File

@ -1,3 +1,5 @@
@use "../variables" as *;
.vr {
display: inline-block;
align-self: stretch;

10
scss/helpers/index.scss Normal file
View File

@ -0,0 +1,10 @@
@forward "color-bg";
@forward "colored-links";
@forward "focus-ring";
@forward "icon-link";
@forward "position";
@forward "stacks";
@forward "visually-hidden";
@forward "stretched-link";
@forward "text-truncation";
@forward "vr";

14
scss/mixins/_breakpoints.scss → scss/layout/_breakpoints.scss
View File

@ -1,3 +1,7 @@
@use "sass:list";
@use "sass:map";
@use "../config" as *;
// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
@ -14,12 +18,12 @@
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
$n: list.index($breakpoint-names, $name);
@if not $n {
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
}
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
@return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
}
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
@ -27,7 +31,7 @@
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
$min: map.get($breakpoints, $name);
@return if($min != 0, $min, null);
}
@ -41,7 +45,7 @@
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$max: map-get($breakpoints, $name);
$max: map.get($breakpoints, $name);
@return if($max and $max > 0, $max - .02, null);
}

14
scss/_containers.scss → scss/layout/_containers.scss
View File

@ -1,6 +1,20 @@
@use "../config" as *;
@use "breakpoints" as *;
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
// Container mixins
@mixin make-container($gutter: $container-padding-x) {
--#{$prefix}gutter-x: #{$gutter};
--#{$prefix}gutter-y: 0;
width: 100%;
padding-right: calc(var(--#{$prefix}gutter-x) * .5);
padding-left: calc(var(--#{$prefix}gutter-x) * .5);
margin-right: auto;
margin-left: auto;
}
@if $enable-container-classes {
// Single container class with breakpoint max-widths

83
scss/layout/_grid.scss Normal file
View File

@ -0,0 +1,83 @@
@use "sass:map";
@use "../config" as *;
@use "breakpoints" as *;
// mdo-do
// - check gap utilities as replacement for gutter classes from v5
// Row
//
// Rows contain your columns.
:root {
@each $name, $value in $grid-breakpoints {
--#{$prefix}breakpoint-#{$name}: #{$value};
}
}
.grid {
--#{$prefix}columns: #{$grid-columns};
--#{$prefix}rows: 1;
--#{$prefix}gap: #{$grid-gutter-width};
display: grid;
grid-template-rows: repeat(var(--#{$prefix}rows), 1fr);
grid-template-columns: repeat(var(--#{$prefix}columns), 1fr);
gap: var(--#{$prefix}gap);
}
@each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
@if $grid-columns > 0 {
@for $i from 1 through $grid-columns {
.col#{$infix}-#{$i} {
grid-column: auto / span $i;
}
.end#{$infix}-#{$i} {
grid-column-end: $i;
}
}
// Start with `1` because `0` is an invalid value.
// Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
@for $i from 1 through ($grid-columns - 1) {
.col-start#{$infix}-#{$i} {
grid-column-start: $i;
}
}
}
}
}
// mdo-do: add to utilities?
.grid-cols-subgrid {
grid-template-columns: subgrid;
}
.grid-fill {
--#{$prefix}gap: #{$grid-gutter-width};
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
grid-auto-flow: row;
gap: var(--#{$prefix}gap);
}
// mdo-do: add to utilities?
.g-col-auto {
grid-column: auto/auto;
}
// mdo-do: add to utilities?
.grid-cols-3 {
--#{$prefix}columns: 3;
}
.grid-cols-4 {
--#{$prefix}columns: 4;
}
.grid-cols-6 {
--#{$prefix}columns: 6;
}

3
scss/layout/index.scss Normal file
View File

@ -0,0 +1,3 @@
@forward "breakpoints";
@forward "containers";
@forward "grid";

18
scss/mixins/_alert.scss
View File

@ -1,18 +0,0 @@
@include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
// scss-docs-start alert-variant-mixin
@mixin alert-variant($background, $border, $color) {
--#{$prefix}alert-color: #{$color};
--#{$prefix}alert-bg: #{$background};
--#{$prefix}alert-border-color: #{$border};
--#{$prefix}alert-link-color: #{shade-color($color, 20%)};
@if $enable-gradients {
background-image: var(--#{$prefix}gradient);
}
.alert-link {
color: var(--#{$prefix}alert-link-color);
}
}
// scss-docs-end alert-variant-mixin

12
scss/mixins/_border-radius.scss
View File

@ -1,3 +1,9 @@
@use "sass:list";
@use "sass:math";
@use "sass:meta";
@use "../config" as *;
@use "../variables" as *;
// stylelint-disable property-disallowed-list
// Single side border-radius
@ -5,10 +11,10 @@
@function valid-radius($radius) {
$return: ();
@each $value in $radius {
@if type-of($value) == number {
$return: append($return, max($value, 0));
@if meta.type-of($value) == number {
$return: list.append($return, math.max($value, 0));
} @else {
$return: append($return, $value);
$return: list.append($return, $value);
}
}
@return $return;

2
scss/mixins/_box-shadow.scss
View File

@ -1,3 +1,5 @@
@use "../config" as *;
@mixin box-shadow($shadow...) {
@if $enable-shadows {
$result: ();

70
scss/mixins/_buttons.scss
View File

@ -1,70 +0,0 @@
// 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(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

3
scss/mixins/_caret.scss
View File

@ -1,3 +1,6 @@
@use "../config" as *;
@use "../variables" as *;
// scss-docs-start caret-mixins
@mixin caret-down($width: $caret-width) {
border-top: $width solid;

2
scss/mixins/_color-mode.scss
View File

@ -1,3 +1,5 @@
@use "../config" as *;
// scss-docs-start color-mode-mixin
@mixin color-mode($mode: light, $root: false) {
@if $color-mode-type == "media-query" {

11
scss/mixins/_container.scss
View File

@ -1,11 +0,0 @@
// Container mixins
@mixin make-container($gutter: $container-padding-x) {
--#{$prefix}gutter-x: #{$gutter};
--#{$prefix}gutter-y: 0;
width: 100%;
padding-right: calc(var(--#{$prefix}gutter-x) * .5);
padding-left: calc(var(--#{$prefix}gutter-x) * .5);
margin-right: auto;
margin-left: auto;
}

2
scss/mixins/_deprecate.scss
View File

@ -1,3 +1,5 @@
@use "../config" as *;
// Deprecate mixin
//
// This mixin can be used to deprecate mixins or functions.

3
scss/mixins/_gradients.scss
View File

@ -1,3 +1,6 @@
@use "../colors" as *;
@use "../config" as *;
// Gradients
// scss-docs-start gradient-bg-mixin

26
scss/mixins/_list-group.scss
View File

@ -1,26 +0,0 @@
@include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0");
// List Groups
// scss-docs-start list-group-mixin
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
&.list-group-item-action {
&:hover,
&:focus {
color: $color;
background-color: shade-color($background, 10%);
}
&.active {
color: $white;
background-color: $color;
border-color: $color;
}
}
}
}
// scss-docs-end list-group-mixin

10
scss/mixins/_pagination.scss
View File

@ -1,10 +0,0 @@
// Pagination
// scss-docs-start pagination-mixin
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}pagination-padding-x: #{$padding-x};
--#{$prefix}pagination-padding-y: #{$padding-y};
@include rfs($font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-border-radius: #{$border-radius};
}
// scss-docs-end pagination-mixin

2
scss/mixins/_reset-text.scss
View File

@ -1,3 +1,5 @@
@use "../variables" as *;
@mixin reset-text {
font-family: $font-family-base;
// We deliberately do NOT reset font-size or overflow-wrap / word-wrap.

24
scss/mixins/_table-variants.scss
View File

@ -1,24 +0,0 @@
// scss-docs-start table-variant
@mixin table-variant($state, $background) {
.table-#{$state} {
$color: color-contrast(opaque($body-bg, $background));
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
$table-border-color: mix($color, $background, percentage($table-border-factor));
--#{$prefix}table-color: #{$color};
--#{$prefix}table-bg: #{$background};
--#{$prefix}table-border-color: #{$table-border-color};
--#{$prefix}table-striped-bg: #{$striped-bg};
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$prefix}table-active-bg: #{$active-bg};
--#{$prefix}table-active-color: #{color-contrast($active-bg)};
--#{$prefix}table-hover-bg: #{$hover-bg};
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
color: var(--#{$prefix}table-color);
border-color: var(--#{$prefix}table-border-color);
}
}
// scss-docs-end table-variant

11
scss/mixins/_transition.scss
View File

@ -1,10 +1,13 @@
@use "sass:list";
@use "../config" as *;
// stylelint-disable property-disallowed-list
@mixin transition($transition...) {
@if length($transition) == 0 {
@if list.length($transition) == 0 {
$transition: $transition-base;
}
@if length($transition) > 1 {
@if list.length($transition) > 1 {
@each $value in $transition {
@if $value == null or $value == none {
@warn "The keyword 'none' or 'null' must be used as a single argument.";
@ -13,11 +16,11 @@
}
@if $enable-transitions {
@if nth($transition, 1) != null {
@if list.nth($transition, 1) != null {
transition: $transition;
}
@if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
@if $enable-reduced-motion and list.nth($transition, 1) != null and list.nth($transition, 1) != none {
@media (prefers-reduced-motion: reduce) {
transition: none;
}

39
scss/mixins/_utilities.scss
View File

@ -1,37 +1,48 @@
@use "sass:list";
@use "sass:map";
@use "sass:meta";
@use "sass:string";
@use "../config" as *;
// Utility generator
// Used to generate utilities & print utilities
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
$values: map-get($utility, values);
$values: map.get($utility, values);
// If the values are a list or string, convert it into a map
@if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
$values: zip($values, $values);
@if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
// A single value is converted to a map with a null key.
@if list.length($values) == 1 {
$values: (null: list.nth($values, 1));
} @else {
$values: list.zip($values, $values);
}
}
@each $key, $value in $values {
$properties: map-get($utility, property);
$properties: map.get($utility, property);
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
@if type-of($properties) == "string" {
$properties: append((), $properties);
@if meta.type-of($properties) == "string" {
$properties: list.append((), $properties);
}
// Use custom class if present
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
$property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
$property-class: if($property-class == null, "", $property-class);
// Use custom CSS variable name if present, otherwise default to `class`
$css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
$css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
// State params to generate pseudo-classes
$state: if(map-has-key($utility, state), map-get($utility, state), ());
$state: if(map.has-key($utility, state), map.get($utility, state), ());
$infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
$infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.slice($infix, 2), $infix);
// Don't prefix if value key is null (e.g. with shadow class)
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
@if map-get($utility, rfs) {
@if map.get($utility, rfs) {
// Inside the media query
@if $is-rfs-media-query {
$val: rfs-value($value);
@ -44,9 +55,9 @@
}
}
$is-css-var: map-get($utility, css-var);
$is-local-vars: map-get($utility, local-vars);
$is-rtl: map-get($utility, rtl);
$is-css-var: map.get($utility, css-var);
$is-local-vars: map.get($utility, local-vars);
$is-rtl: map.get($utility, rtl);
@if $value != null {
@if $is-rtl == false {

31
scss/mixins/index.scss Normal file
View File

@ -0,0 +1,31 @@
// Toggles
//
// Used in conjunction with global variables to enable certain theme features.
// Vendor
// @forward "vendor/rfs";
// Deprecate
@forward "deprecate";
// Helpers
@forward "color-mode";
@forward "color-scheme";
@forward "image";
@forward "resize";
@forward "visually-hidden";
@forward "reset-text";
@forward "text-truncate";
// Utilities
@forward "utilities";
// Components
@forward "backdrop";
@forward "caret";
// Skins
@forward "border-radius";
@forward "box-shadow";
@forward "gradients";
@forward "transition";

3
scss/tests/jasmine.js
View File

@ -7,7 +7,8 @@ const path = require('node:path')
module.exports = {
spec_dir: 'scss',
// Make Jasmine look for `.test.scss` files
spec_files: ['**/*.{test,spec}.scss'],
// spec_files: ['**/*.{test,spec}.scss'],
spec_files: ['**/_utilities.test.scss'],
// Compile them into JS scripts running `sass-true`
requires: [path.join(__dirname, 'sass-true/register')],
// Ensure we use `require` so that the require.extensions works

7
scss/tests/mixins/_auto-import-of-variables-dark.test.scss
View File

@ -1,7 +0,0 @@
// TODO: this file can be removed safely in v6 when `@import "variables-dark"` will be removed at the end of _variables.scss
@import "../../functions";
@import "../../variables";
// Voluntarily not importing _variables-dark.scss
@import "../../maps";
@import "../../mixins";

8
scss/tests/mixins/_box-shadow.test.scss
View File

@ -1,6 +1,8 @@
@import "../../functions";
@import "../../variables";
@import "../../mixins";
@use "../../functions" as *;
@use "../../variables" as *;
@use "../../mixins" as *;
$true-terminal-output: false;
// Store original value
$original-enable-shadows: $enable-shadows;

1
scss/tests/mixins/_color-modes.test.scss
View File

@ -1,5 +1,6 @@
// stylelint-disable selector-attribute-quotes
@import "../../colors";
@import "../../functions";
@import "../../variables";
@import "../../variables-dark";

3
scss/tests/mixins/_media-query-color-mode-full.test.scss
View File

@ -1,6 +1,7 @@
$color-mode-type: media-query;
$true-terminal-output: false;
@import "../../bootstrap";
@use "../../bootstrap" as *;
@include describe("global $color-mode-type: media-query") {
@include it("compiles entirely Bootstrap CSS with media-query color mode") { // stylelint-disable-line block-no-empty

431
scss/tests/mixins/_utilities.test.scss
View File

@ -1,8 +1,15 @@
@use "../../config" as *;
@use "../../variables" as *;
@use "../../functions" as *;
@use "../../vendor/rfs" as *;
@use "../../mixins/utilities" as *;
$true-terminal-output: false;
$prefix: bs-;
$enable-important-utilities: false;
// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
@import "../../mixins/utilities";
// @import "../../mixins/utilities";
@mixin test-generate-utility($params...) {
@include assert() {
@ -117,7 +124,7 @@ $enable-important-utilities: false;
values: 1rem
)
) {
.padding-1rem {
.padding {
padding: 1rem;
}
}
@ -133,7 +140,7 @@ $enable-important-utilities: false;
values: 1rem
)
) {
.padding-x-1rem {
.padding-x {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
@ -147,7 +154,7 @@ $enable-important-utilities: false;
values: 1rem
)
) {
.padding-inline-start-1rem {
.padding-inline-start {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
@ -176,218 +183,218 @@ $enable-important-utilities: false;
}
}
@include describe("state") {
@include it("Generates selectors for each states") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
state: hover focus,
)
) {
.padding-1rem {
padding: 1rem;
// @include describe("state") {
// @include it("Generates selectors for each states") {
// @include test-generate-utility(
// (
// property: padding,
// values: 1rem,
// state: hover focus,
// )
// ) {
// .padding-1rem {
// padding: 1rem;
// }
// .padding-1rem-hover:hover {
// padding: 1rem;
// }
// .padding-1rem-focus:focus {
// padding: 1rem;
// }
// }
// }
// }
// @include describe("css-var"){
// @include it("sets a CSS variable instead of the property") {
// @include test-generate-utility(
// (
// property: padding,
// css-variable-name: padding,
// css-var: true,
// values: 1rem 2rem
// )
// ) {
// .padding-1rem {
// --bs-padding: 1rem;
// }
// .padding-2rem {
// --bs-padding: 2rem;
// }
// }
// }
// @include it("defaults to class") {
// @include test-generate-utility(
// (
// property: padding,
// class: padding,
// css-var: true,
// values: 1rem 2rem
// )
// ) {
// .padding-1rem {
// --bs-padding: 1rem;
// }
// .padding-2rem {
// --bs-padding: 2rem;
// }
// }
// }
// }
// @include describe("local-vars") {
// @include it("generates the listed variables") {
// @include test-generate-utility(
// (
// property: color,
// class: desaturated-color,
// local-vars: (
// color-opacity: 1,
// color-saturation: .25
// ),
// values: (
// blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
// )
// )
// ) {
// .desaturated-color-blue {
// --bs-color-opacity: 1;
// // Sass compilation will put a leading zero so we want to keep that one
// // stylelint-disable-next-line @stylistic/number-leading-zero
// --bs-color-saturation: 0.25;
// color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
// }
// }
// }
// }
// @include describe("css-var & state") {
// @include it("Generates a rule with for each state with a CSS variable") {
// @include test-generate-utility(
// (
// property: padding,
// css-var: true,
// css-variable-name: padding,
// values: 1rem,
// state: hover focus,
// )
// ) {
// .padding-1rem {
// --bs-padding: 1rem;
// }
// .padding-1rem-hover:hover {
// --bs-padding: 1rem;
// }
// .padding-1rem-focus:focus {
// --bs-padding: 1rem;
// }
// }
// }
// }
// @include describe("rtl") {
// @include it("sets up RTLCSS for removal when false") {
// @include test-generate-utility(
// (
// property: padding,
// values: 1rem,
// rtl: false
// )
// ) {
// /* rtl:begin:remove */
// .padding-1rem {
// padding: 1rem;
// }
// /* rtl:end:remove */
// }
// }
// }
// @include describe("rfs") {
// @include it("sets the fluid value when not inside media query") {
// @include test-generate-utility(
// (
// property: padding,
// values: 1rem,
// rfs: true
// )
// ) {
// .padding-1rem {
// padding: rfs-fluid-value(1rem);
// }
// }
// }
// @include it("sets the value when inside the media query") {
// @include test-generate-utility(
// (
// property: padding,
// values: 1rem,
// rfs: true
// ),
// $is-rfs-media-query: true
// ) {
// .padding-1rem {
// padding: rfs-value(1rem);
// }
// }
// }
// }
}
.padding-1rem-hover:hover {
padding: 1rem;
}
// @include describe("$infix") {
// @include it("inserts the given infix") {
// @include test-generate-utility(
// (
// property: "padding",
// values: (null: 1rem, small: .5rem, large: 2rem)
// ),
// $infix: -sm
// ) {
// .padding-sm {
// padding: 1rem;
// }
.padding-1rem-focus:focus {
padding: 1rem;
}
}
}
}
// .padding-sm-small {
// padding: .5rem;
// }
@include describe("css-var"){
@include it("sets a CSS variable instead of the property") {
@include test-generate-utility(
(
property: padding,
css-variable-name: padding,
css-var: true,
values: 1rem 2rem
)
) {
.padding-1rem {
--bs-padding: 1rem;
}
// .padding-sm-large {
// padding: 2rem;
// }
// }
// }
.padding-2rem {
--bs-padding: 2rem;
}
}
}
// @include it("strips leading - if class is null") {
// @include test-generate-utility(
// (
// property: visibility,
// class: null,
// values: (
// visible: visible,
// invisible: hidden,
// )
// ),
// -sm
// ) {
// .sm-visible {
// visibility: visible;
// }
@include it("defaults to class") {
@include test-generate-utility(
(
property: padding,
class: padding,
css-var: true,
values: 1rem 2rem
)
) {
.padding-1rem {
--bs-padding: 1rem;
}
.padding-2rem {
--bs-padding: 2rem;
}
}
}
}
@include describe("local-vars") {
@include it("generates the listed variables") {
@include test-generate-utility(
(
property: color,
class: desaturated-color,
local-vars: (
color-opacity: 1,
color-saturation: .25
),
values: (
blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
)
)
) {
.desaturated-color-blue {
--bs-color-opacity: 1;
// Sass compilation will put a leading zero so we want to keep that one
// stylelint-disable-next-line @stylistic/number-leading-zero
--bs-color-saturation: 0.25;
color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
}
}
}
}
@include describe("css-var & state") {
@include it("Generates a rule with for each state with a CSS variable") {
@include test-generate-utility(
(
property: padding,
css-var: true,
css-variable-name: padding,
values: 1rem,
state: hover focus,
)
) {
.padding-1rem {
--bs-padding: 1rem;
}
.padding-1rem-hover:hover {
--bs-padding: 1rem;
}
.padding-1rem-focus:focus {
--bs-padding: 1rem;
}
}
}
}
@include describe("rtl") {
@include it("sets up RTLCSS for removal when false") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
rtl: false
)
) {
/* rtl:begin:remove */
.padding-1rem {
padding: 1rem;
}
/* rtl:end:remove */
}
}
}
@include describe("rfs") {
@include it("sets the fluid value when not inside media query") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
rfs: true
)
) {
.padding-1rem {
padding: rfs-fluid-value(1rem);
}
}
}
@include it("sets the value when inside the media query") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
rfs: true
),
$is-rfs-media-query: true
) {
.padding-1rem {
padding: rfs-value(1rem);
}
}
}
}
}
@include describe("$infix") {
@include it("inserts the given infix") {
@include test-generate-utility(
(
property: "padding",
values: (null: 1rem, small: .5rem, large: 2rem)
),
$infix: -sm
) {
.padding-sm {
padding: 1rem;
}
.padding-sm-small {
padding: .5rem;
}
.padding-sm-large {
padding: 2rem;
}
}
}
@include it("strips leading - if class is null") {
@include test-generate-utility(
(
property: visibility,
class: null,
values: (
visible: visible,
invisible: hidden,
)
),
-sm
) {
.sm-visible {
visibility: visible;
}
.sm-invisible {
visibility: hidden;
}
}
}
}
// .sm-invisible {
// visibility: hidden;
// }
// }
// }
// }
}

2
scss/tests/sass-true/runner.js
View File

@ -6,7 +6,7 @@ const { runSass } = require('sass-true')
module.exports = (filename, { describe, it }) => {
const data = fs.readFileSync(filename, 'utf8')
const TRUE_SETUP = '$true-terminal-output: false; @import "true";'
const TRUE_SETUP = '@use "true" as *;'
const sassString = TRUE_SETUP + data
runSass(

37
scss/utilities/_api.scss
View File

@ -1,5 +1,15 @@
// Loop over each breakpoint
@each $breakpoint in map-keys($grid-breakpoints) {
@use "sass:map";
@use "sass:meta";
@use "../config" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../layout/breakpoints" as *;
@use "../mixins/utilities" as *;
@use "../utilities" as *;
@layer utilities {
// Loop over each breakpoint
@each $breakpoint in map.keys($grid-breakpoints) {
// Generate media query if needed
@include media-breakpoint-up($breakpoint) {
@ -9,39 +19,40 @@
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query
@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
@if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix);
}
}
}
}
}
// RFS rescaling
@media (min-width: $rfs-mq-value) {
@each $breakpoint in map-keys($grid-breakpoints) {
// RFS rescaling
@media (min-width: $rfs-mq-value) {
@each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
@if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
// Loop over each utility property
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query
@if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
@if meta.type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix, true);
}
}
}
}
}
}
// Print utilities
@media print {
// Print utilities
@media print {
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Then check if the utility needs print styles
@if type-of($utility) == "map" and map-get($utility, print) == true {
@if meta.type-of($utility) == "map" and map.get($utility, print) == true {
@include generate-utility($utility, "-print");
}
}
}
}

89
scss/vendor/_rfs.scss vendored
View File

@ -1,3 +1,8 @@
@use "sass:map";
@use "sass:math";
@use "sass:meta";
@use "sass:string";
// stylelint-disable scss/dimension-no-non-numeric-values
// SCSS RFS mixin
@ -30,7 +35,7 @@ $rfs-two-dimensional: false !default;
// Factor of decrease
$rfs-factor: 10 !default;
@if type-of($rfs-factor) != number or $rfs-factor <= 1 {
@if meta.type-of($rfs-factor) != number or $rfs-factor <= 1 {
@error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
}
@ -50,71 +55,29 @@ $rfs-safari-iframe-resize-bug-fix: false !default;
$enable-rfs: true !default;
// Cache $rfs-base-value unit
$rfs-base-value-unit: unit($rfs-base-value);
@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;
}
$rfs-base-value-unit: math.unit($rfs-base-value);
// Remove px-unit from $rfs-base-value for calculations
@if $rfs-base-value-unit == px {
$rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
$rfs-base-value: math.div($rfs-base-value, $rfs-base-value * 0 + 1);
}
@else if $rfs-base-value-unit == rem {
$rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
$rfs-base-value: math.div($rfs-base-value, math.div($rfs-base-value * 0 + 1, $rfs-rem-value));
}
// Cache $rfs-breakpoint unit to prevent multiple calls
$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
// Remove unit from $rfs-breakpoint for calculations
@if $rfs-breakpoint-unit-cache == px {
$rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
$rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
}
@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
$rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
$rfs-breakpoint: math.div($rfs-breakpoint, math.div($rfs-breakpoint * 0 + 1, $rfs-rem-value));
}
// Calculate the media query value
$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
@ -190,7 +153,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
// Helper function to get the formatted non-responsive value
@function rfs-value($values) {
// Convert to list
$values: if(type-of($values) != list, ($values,), $values);
$values: if(meta.type-of($values) != list, ($values,), $values);
$val: "";
@ -201,15 +164,15 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
}
@else {
// Cache $value unit
$unit: if(type-of($value) == "number", unit($value), false);
$unit: if(meta.type-of($value) == "number", math.unit($value), false);
@if $unit == px {
// Convert to rem if needed
$val: $val + " " + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
$val: $val + " " + if($rfs-unit == rem, #{math.div($value, $value * 0 + $rfs-rem-value)}rem, $value);
}
@else if $unit == rem {
// Convert to px if needed
$val: $val + " " + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
$val: $val + " " + if($rfs-unit == px, #{math.div($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
} @else {
// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
$val: $val + " " + $value;
@ -218,13 +181,13 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
}
// Remove first space
@return unquote(str-slice($val, 2));
@return string.unquote(string.slice($val, 2));
}
// Helper function to get the responsive value calculated by RFS
@function rfs-fluid-value($values) {
// Convert to list
$values: if(type-of($values) != list, ($values,), $values);
$values: if(meta.type-of($values) != list, ($values,), $values);
$val: "";
@ -234,28 +197,28 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
$val: $val + " 0";
} @else {
// Cache $value unit
$unit: if(type-of($value) == "number", unit($value), false);
$unit: if(meta.type-of($value) == "number", math.unit($value), false);
// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
@if not $unit or $unit != px and $unit != rem {
$val: $val + " " + $value;
} @else {
// Remove unit from $value for calculations
$value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
$value: math.div($value, $value * 0 + if($unit == px, 1, math.div(1, $rfs-rem-value)));
// Only add the media query if the value is greater than the minimum value
@if abs($value) <= $rfs-base-value or not $enable-rfs {
$val: $val + " " + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
$val: $val + " " + if($rfs-unit == rem, #{math.div($value, $rfs-rem-value)}rem, #{$value}px);
}
@else {
// Calculate the minimum value
$value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
$value-min: $rfs-base-value + math.div(abs($value) - $rfs-base-value, $rfs-factor);
// Calculate difference between $value and the minimum value
$value-diff: abs($value) - $value-min;
// Base value formatting
$min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
$min-width: if($rfs-unit == rem, #{math.div($value-min, $rfs-rem-value)}rem, #{$value-min}px);
// Use negative value if needed
$min-width: if($value < 0, -$min-width, $min-width);
@ -264,7 +227,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
$variable-unit: if($rfs-two-dimensional, vmin, vw);
// Calculate the variable width between 0 and $rfs-breakpoint
$variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
$variable-width: #{math.div($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
// Return the calculated value
$val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
@ -274,7 +237,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
}
// Remove first space
@return unquote(str-slice($val, 2));
@return string.unquote(string.slice($val, 2));
}
// RFS mixin

2
site/src/components/DocsSidebar.astro
View File

@ -20,7 +20,7 @@ const sidebar = getData('sidebar')
{group.icon && (
<svg
class="bi me-2"
style={group.icon_color && `color: var(--bs-${group.icon_color});`}
style={group.icon_color && `color: light-dark(var(--bs-${group.icon_color}-500), var(--bs-${group.icon_color}-300));`}
aria-hidden="true"
>
<use xlink:href={`#${group.icon}`} />

Some files were not shown because too many files have changed in this diff Show More