Additional .theme-* utilities to replace color background helpers and more (#41978)

* New .theme-* utilities for consuming the existing .theme styles, replace color-background helpers

* Update blue to be less indigo

* Rebuild metadata

* mdx lint

* Fix docs link while here

* Fix up some docs work while here

* links

Author: mdo

README.md

@@ -52,7 +52,7 @@ Several quick start options are available:
 - Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.3.8`
 - Install with [NuGet](https://www.nuget.org/): CSS: `Install-Package bootstrap` Sass: `Install-Package bootstrap.sass`
 
-Read the [Getting started page](https://getbootstrap.com/docs/5.3/getting-started/introduction/) for information on the framework contents, templates, examples, and more.
+Read the [Getting started page](https://getbootstrap.com/docs/5.3/getting-started/) for information on the framework contents, templates, examples, and more.
 
 
 ## Status

dist/css/bootstrap-utilities.metadata.json

@@ -19,7 +19,7 @@
     },
     "aspect-ratio": {
       "class": "ratio",
-      "property": "--bs-ratio",
+      "property": "--ratio",
       "classes": [
         "ratio-auto",
         "ratio-1x1",
@@ -120,7 +120,7 @@
     },
     "focus-ring": {
       "class": "focus-ring",
-      "property": "--bs-focus-ring-color",
+      "property": "--focus-ring-color",
       "classes": [
         "focus-ring-primary",
         "focus-ring-accent",
@@ -522,7 +522,7 @@
     },
     "grid-column-counts": {
       "class": "grid-cols",
-      "property": "--bs-columns",
+      "property": "--columns",
       "classes": [
         "grid-cols-3",
         "grid-cols-4",
@@ -918,6 +918,19 @@
         "fg-emphasis-secondary"
       ]
     },
+    "fg-contrast": {
+      "class": "fg-contrast",
+      "classes": [
+        "fg-contrast-primary",
+        "fg-contrast-accent",
+        "fg-contrast-success",
+        "fg-contrast-danger",
+        "fg-contrast-warning",
+        "fg-contrast-info",
+        "fg-contrast-inverse",
+        "fg-contrast-secondary"
+      ]
+    },
     "fg-opacity": {
       "class": "fg",
       "property": "color",
@@ -934,19 +947,6 @@
         "fg-100"
       ]
     },
-    "fg-contrast": {
-      "class": "fg-contrast",
-      "classes": [
-        "fg-contrast-primary",
-        "fg-contrast-accent",
-        "fg-contrast-success",
-        "fg-contrast-danger",
-        "fg-contrast-warning",
-        "fg-contrast-info",
-        "fg-contrast-inverse",
-        "fg-contrast-secondary"
-      ]
-    },
     "link-opacity": {
       "class": "link",
       "property": "color",
@@ -1077,6 +1077,31 @@
         "bg-100"
       ]
     },
+    "theme-contrast": {
+      "class": "theme-contrast",
+      "classes": [
+        "theme-contrast"
+      ]
+    },
+    "theme-subtle": {
+      "class": "theme-subtle",
+      "classes": [
+        "theme-subtle"
+      ]
+    },
+    "theme-muted": {
+      "class": "theme-muted",
+      "classes": [
+        "theme-muted"
+      ]
+    },
+    "theme-border": {
+      "class": "theme-border",
+      "property": "border",
+      "classes": [
+        "theme-border"
+      ]
+    },
     "gradient": {
       "class": "bg",
       "property": "background-image",

scss/_colors.scss

@@ -3,7 +3,7 @@
 // stylelint-disable hue-degree-notation, @stylistic/number-leading-zero
 
 // Easily convert colors to oklch() with https://oklch.com/
-$new-blue: oklch(60% 0.24 258) !default;
+$new-blue: oklch(60% 0.24 240) !default;
 $new-indigo: oklch(56% 0.26 288) !default;
 $new-violet: oklch(56% 0.24 300) !default;
 $new-purple: oklch(56% 0.24 320) !default;

scss/_progress.scss

@@ -57,10 +57,10 @@ $progress-bar-transition:           width .6s ease !default;
     flex-direction: column;
     justify-content: center;
     overflow: hidden;
-    color: var(--progress-bar-color);
+    color: var(--theme-contrast, var(--progress-bar-color));
     text-align: center;
     white-space: nowrap;
-    background-color: var(--progress-bar-bg);
+    background-color: var(--theme-bg, var(--progress-bar-bg));
     @include transition(var(--progress-bar-transition));
   }
 

scss/_utilities.scss

@@ -735,11 +735,6 @@ $utilities: map.merge(
       class: fg-emphasis,
       values: theme-color-values("text-emphasis"),
     ),
-    "fg-opacity": (
-      class: fg,
-      property: color,
-      values: theme-opacity-values(--fg)
-    ),
     "fg-contrast": (
       property: (
         "--fg": null,
@@ -748,6 +743,11 @@ $utilities: map.merge(
       class: fg-contrast,
       values: theme-color-values("contrast"),
     ),
+    "fg-opacity": (
+      class: fg,
+      property: color,
+      values: theme-opacity-values(--fg)
+    ),
     // scss-docs-end utils-color
     // scss-docs-start utils-links
     "link-opacity": (
@@ -824,6 +824,38 @@ $utilities: map.merge(
       values: theme-opacity-values(--bg)
     ),
     // scss-docs-end utils-bg-color
+    // scss-docs-start utils-theme
+    // Theme style utilities - pair with .theme-{color} to apply coordinated bg + text colors
+    "theme-contrast": (
+      property: (
+        "background-color": var(--theme-bg),
+        "color": var(--theme-contrast)
+      ),
+      class: theme-contrast,
+      values: (null: null)
+    ),
+    "theme-subtle": (
+      property: (
+        "background-color": var(--theme-bg-subtle),
+        "color": var(--theme-text)
+      ),
+      class: theme-subtle,
+      values: (null: null)
+    ),
+    "theme-muted": (
+      property: (
+        "background-color": var(--theme-bg-muted),
+        "color": var(--theme-text-emphasis)
+      ),
+      class: theme-muted,
+      values: (null: null)
+    ),
+    "theme-border": (
+      property: border,
+      class: theme-border,
+      values: (null: var(--border-width) solid var(--theme-border))
+    ),
+    // scss-docs-end utils-theme
     "gradient": (
       property: background-image,
       class: bg,

scss/helpers/_color-bg.scss

@@ -1,4 +1,3 @@
-@forward "color-bg";
 @forward "focus-ring";
 @forward "icon-link";
 @forward "position";

scss/helpers/index.scss

@@ -109,7 +109,6 @@
   icon: magic
   icon_color: orange
   pages:
-    - title: Color & background
     - title: Focus ring
     - title: Icon link
     - title: Position
@@ -128,6 +127,7 @@
       pages:
         - title: Colors
         - title: Background
+        - title: Theme
     - group: Layout
       pages:
         - title: Aspect ratio

site/data/sidebar.yml

@@ -206,6 +206,6 @@ export const direction = 'rtl'
       <a href="#">عد إلى الأعلى</a>
     </p>
     <p class="mb-1">مثال الألبوم هو © Bootstrap ، ولكن يرجى تنزيله وتخصيصه لنفسك!</p>
-    <p class="mb-0">جديد على Bootstrap؟ <a href="/"> تفضل بزيارة الصفحة الرئيسية </a> أو اقرأ <a href={getVersionedDocsPath('/getting-started/introduction')}> دليل البدء </a>.</p>
+    <p class="mb-0">جديد على Bootstrap؟ <a href="/"> تفضل بزيارة الصفحة الرئيسية </a> أو اقرأ <a href={getVersionedDocsPath('/getting-started')}> دليل البدء </a>.</p>
   </div>
 </footer>

site/src/assets/examples/album-rtl/index.astro

@@ -205,6 +205,6 @@ import Placeholder from "@shortcodes/Placeholder.astro"
       <a href="#">Back to top</a>
     </p>
     <p class="mb-1">Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
-    <p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href={getVersionedDocsPath('/getting-started/introduction')}>getting started guide</a>.</p>
+    <p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href={getVersionedDocsPath('/getting-started/')}>getting started guide</a>.</p>
   </div>
 </footer>