From: Mark Otto Date: Tue, 3 Mar 2026 18:53:46 +0000 (-0800) Subject: this should be a test X-Git-Url: http://git.ipfire.org/gitweb/index.cgi?a=commitdiff_plain;h=refs%2Fheads%2Fv6-scss-example;p=thirdparty%2Fbootstrap.git this should be a test --- diff --git a/.gitignore b/.gitignore index 921024c72c..0cd73706f0 100644 --- a/.gitignore +++ b/.gitignore @@ -39,6 +39,10 @@ Thumbs.db /js/coverage/ /node_modules/ +# Example compiled output +/examples/**/custom.css +/examples/**/custom.css.map + # Site /site/dist /site/node_modules diff --git a/.stylelintignore b/.stylelintignore index b7013de7ef..db2be91b4c 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1,6 +1,7 @@ **/*.min.css **/dist/ **/vendor/ +/examples/ /_site/ /site/public/ /js/coverage/ diff --git a/examples/sass-customization/custom.scss b/examples/sass-customization/custom.scss new file mode 100644 index 0000000000..b0502ab049 --- /dev/null +++ b/examples/sass-customization/custom.scss @@ -0,0 +1,36 @@ +// Override base color hues and token maps via with() +// Scalar values replace directly; token overrides get merged with defaults. +@use "../../scss/bootstrap" with ( + $new-blue: oklch(55% .28 260), + $new-green: oklch(68% .19 155), + + $root-tokens: ( + --border-radius: 1rem, + --spacer: 2rem, + ), + + $alert-tokens: ( + --alert-padding-x: 2rem, + --alert-padding-y: 2rem, + --alert-border-radius: 2rem, + ), + + $button-sizes: ("xs": null), + $button-variants: ( + "text": null, + "subtle": null, + ), +); + +// Custom styles using Bootstrap's token system +.demo-section { + padding: var(--spacer); + margin-block-end: calc(var(--spacer) * 2); +} + +.custom-hero { + padding: calc(var(--spacer) * 3) calc(var(--spacer) * 2); + color: var(--fg-body); + background-color: var(--bg-1); + border: var(--border-width) solid var(--border-muted); +} diff --git a/examples/sass-customization/index.html b/examples/sass-customization/index.html new file mode 100644 index 0000000000..9e266788d1 --- /dev/null +++ b/examples/sass-customization/index.html @@ -0,0 +1,70 @@ + + + + + + Bootstrap Sass Customization Example + + + +
+
+

Sass Tokens Demo

+

Compiled from local Bootstrap source with custom styles using the token system.

+
+ +

Theme color buttons

+
+ + + + + + + + +
+ +

Alerts

+
+ + + +
+ +

Cards

+
+
+
+
+
Default card
+

Using global background and foreground tokens.

+
+
+
+
+
+
+
Primary card
+

Themed with primary color tokens.

+
+
+
+
+
+
+
Success card
+

Themed with success color tokens.

+
+
+
+
+
+ + diff --git a/package.json b/package.json index 736209f048..7a917a39fa 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "css-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*", "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.tmp.css\"", "css-prefix-examples": "postcss --config build/postcss.config.mjs --replace \"site/src/assets/examples/**/*.css\"", + "example": "sass --no-error-css examples/sass-customization/custom.scss examples/sass-customization/custom.css && postcss --config build/postcss.config.mjs --replace examples/sass-customization/custom.css", "css-test": "jasmine --config=scss/tests/jasmine.js", "js": "npm-run-all js-compile js-minify", "js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",