]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
projects / thirdparty / bootstrap.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 6bb799f)
this should be a test v6-scss-example
authorMark Otto <markdotto@gmail.com>
Tue, 3 Mar 2026 18:53:46 +0000 (10:53 -0800)
committerMark Otto <markdotto@gmail.com>
Tue, 3 Mar 2026 18:53:46 +0000 (10:53 -0800)
.gitignore patch | blob | blame | history
.stylelintignore patch | blob | blame | history
examples/sass-customization/custom.scss [new file with mode: 0644] patch | blob
examples/sass-customization/index.html [new file with mode: 0644] patch | blob
package.json patch | blob | blame | history

diff --git a/.gitignore b/.gitignore
index 921024c72c86788d624a982f12a4092e0bb44ea0..0cd73706f0e721e0c902c72aa73dd40aed6be704 100644 (file)
--- 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 b7013de7ef815d8978e7cb07975cd806c4c9a03a..db2be91b4cbc2b5923466028fccab2d7c4d5f4ef 100644 (file)
--- 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 (file)
index 0000000..b0502ab
--- /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 (file)
index 0000000..9e26678
--- /dev/null
+++ b/examples/sass-customization/index.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Bootstrap Sass Customization Example</title>
+    <link href="custom.css" rel="stylesheet">
+  </head>
+  <body class="p-4">
+    <div class="container">
+      <div class="custom-hero mb-4">
+        <h1>Sass Tokens Demo</h1>
+        <p class="fg-2 mb-0">Compiled from local Bootstrap source with custom styles using the token system.</p>
+      </div>
+
+      <h2 class="h5 mb-3">Theme color buttons</h2>
+      <div class="d-flex flex-wrap gap-2 mb-4">
+        <button class="btn btn-solid theme-primary">Primary</button>
+        <button class="btn btn-solid theme-accent">Accent</button>
+        <button class="btn btn-solid theme-success">Success</button>
+        <button class="btn btn-solid theme-danger">Danger</button>
+        <button class="btn btn-solid theme-warning">Warning</button>
+        <button class="btn btn-solid theme-info">Info</button>
+        <button class="btn btn-solid theme-inverse">Inverse</button>
+        <button class="btn btn-solid theme-secondary">Secondary</button>
+      </div>
+
+      <h2 class="h5 mb-3">Alerts</h2>
+      <div class="demo-section">
+        <div class="alert theme-primary" role="alert">
+          <div>A primary alert using theme tokens.</div>
+        </div>
+        <div class="alert theme-success" role="alert">
+          <div>A success alert using theme tokens.</div>
+        </div>
+        <div class="alert theme-danger" role="alert">
+          <div>A danger alert using theme tokens.</div>
+        </div>
+      </div>
+
+      <h2 class="h5 mb-3">Cards</h2>
+      <div class="row g-3">
+        <div class="col-md-4">
+          <div class="card">
+            <div class="card-body">
+              <h5 class="card-title">Default card</h5>
+              <p class="card-text">Using global background and foreground tokens.</p>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div class="card theme-primary">
+            <div class="card-body">
+              <h5 class="card-title">Primary card</h5>
+              <p class="card-text">Themed with primary color tokens.</p>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div class="card theme-success">
+            <div class="card-body">
+              <h5 class="card-title">Success card</h5>
+              <p class="card-text">Themed with success color tokens.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/package.json b/package.json
index 736209f048a81db1f4dfaf06cfae9c1aa8ae71e2..7a917a39fa41ab83300c62237c45a3925b0392cc 100644 (file)
--- 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-*",
Mirror of https://github.com/twbs/bootstrap.git