Merge branch 'main' into global-focus-varsglobal-focus-vars

1 files changed, 44 insertions, 8 deletions

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 3c927cf59..960d6f1ad 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -24,6 +24,19 @@ $utilities: map-merge(
       )
     ),
     // scss-docs-end utils-float
+    // Opacity utilities
+    // scss-docs-start utils-opacity
+    "opacity": (
+      property: opacity,
+      values: (
+        0: 0,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1,
+      )
+    ),
+    // scss-docs-end utils-opacity
     // scss-docs-start utils-overflow
     "overflow": (
       property: overflow,
@@ -501,32 +514,55 @@ $utilities: map-merge(
     "color": (
       property: color,
       class: text,
+      local-vars: (
+        "text-opacity": 1
+      ),
       values: map-merge(
-        $theme-colors,
+        $utilities-text-colors,
         (
-          "white": $white,
-          "body": $body-color,
           "muted": $text-muted,
-          "black-50": rgba($black, .5),
-          "white-50": rgba($white, .5),
+          "black-50": rgba($black, .5), // deprecated
+          "white-50": rgba($white, .5), // deprecated
           "reset": inherit,
         )
       )
     ),
+    "text-opacity": (
+      css-var: true,
+      class: text-opacity,
+      values: (
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1
+      )
+    ),
     // scss-docs-end utils-color
     // scss-docs-start utils-bg-color
     "background-color": (
       property: background-color,
       class: bg,
+      local-vars: (
+        "bg-opacity": 1
+      ),
       values: map-merge(
-        $theme-colors,
+        $utilities-bg-colors,
         (
-          "body": $body-bg,
-          "white": $white,
           "transparent": transparent
         )
       )
     ),
+    "bg-opacity": (
+      css-var: true,
+      class: bg-opacity,
+      values: (
+        10: .1,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1
+      )
+    ),
     // scss-docs-end utils-bg-color
     "gradient": (
       property: background-image,