chore(study): introduce opacity tokens

scss/_utilities.scss

@@ -42,13 +42,26 @@ $utilities: map-merge(
       property: opacity,
       values: (
         0: 0,
-        25: .25,
+        25: .25, // TODO: do we apply the closest value or do we keep the exact value?
         50: .5,
         75: .75,
         100: 1,
       )
     ),
     // scss-docs-end utils-opacity
+    // scss-docs-start utils-opacity-uds
+    "opacity-uds": (
+      property: opacity,
+      values: (
+        transparent: $opacity-transparent,
+        weaker: $opacity-weaker,
+        weak: $opacity-weak,
+        medium: $opacity-medium,
+        emphasis: $opacity-emphasis,
+        opaque: $opacity-opaque
+      )
+    ),
+    // scss-docs-end utils-opacity-uds
     // scss-docs-start utils-overflow
     "overflow": (
       property: overflow,

scss/_variables.scss

@@ -1,4 +1,5 @@
 @import "color-palette";
+@import "tokens";
 
 // Variables
 //
@@ -376,6 +377,18 @@ $light-border-subtle:     $light !default; // Boosted mod: instead of `$gray-200
 $dark-border-subtle:      $dark !default; // Boosted mod: instead of `$gray-500`
 // scss-docs-end theme-border-subtle-variables
 
+// Boosted mod
+// Semantic tokens
+
+// Opacity
+$opacity-transparent:   $opacity-0 !default;
+$opacity-weaker:        $opacity-100 !default;
+$opacity-weak:          $opacity-300 !default;
+$opacity-medium:        $opacity-500 !default;
+$opacity-emphasis:      $opacity-700 !default;
+$opacity-opaque:        $opacity-900 !default;
+// End mod
+
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (
   ("<", "%3c"),
@@ -1915,7 +1928,7 @@ $modal-content-box-shadow-xs:       var(--#{$prefix}box-shadow-sm) !default;
 $modal-content-box-shadow-sm-up:    var(--#{$prefix}box-shadow) !default;
 
 $modal-backdrop-bg:                 $black !default;
-$modal-backdrop-opacity:            .5 !default;
+$modal-backdrop-opacity:            $opacity-emphasis !default;
 
 $modal-header-border-color:         null !default; // Boosted mod
 $modal-header-border-width:         $modal-content-border-width !default;

site/content/docs/5.3/content/reboot.md

@@ -140,8 +140,8 @@ These `<hr>` 2nd, 3rd and 4th variants can not be used because they do not respe
   <hr>
 </div>
 
-<hr class="border border-danger border-2 opacity-50">
-<hr class="border border-primary border-3 opacity-75">
+<hr class="border border-danger border-2 opacity-50"> <!-- TODO -->
+<hr class="border border-primary border-3 opacity-75"> <!-- TODO -->
 {{< /example >}}
 
 ## Lists

site/content/docs/5.3/utilities/opacity.md

@@ -9,7 +9,40 @@ aliases:
   - "/docs/utilities/opacity/"
 ---
 
-The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent.
+The `opacity` property sets the opacity level for an element.
+
+The opacity level describes the semantic transparency level, where `opaque` is not transparent at all, `emphasis` to `weaker` are various levels of transparency, and `transparent` is completely transparent.
+
+Set the opacity of an element using `.opacity-{value}` utilities.
+
+<!--TODO-->
+
+<div class="bd-example d-sm-flex">
+  <div class="opacity-opaque p-3 m-2 bg-primary fw-bold"></div>
+  <div class="opacity-emphasis p-3 m-2 bg-primary fw-bold"></div>
+  <div class="opacity-medium p-3 m-2 bg-primary fw-bold"></div>
+  <div class="opacity-weak p-3 m-2 bg-primary fw-bold"></div>
+  <div class="opacity-weaker p-3 m-2 bg-primary fw-bold"></div>
+  <div class="opacity-transparent p-3 m-2 bg-primary fw-bold"></div>
+</div>
+
+```html
+<div class="opacity-opaque">...</div>
+<div class="opacity-emphasis">...</div>
+<div class="opacity-medium">...</div>
+<div class="opacity-weak">...</div>
+<div class="opacity-weaker">...</div>
+<div class="opacity-transparent">...</div>
+```
+
+
+## Bootstrap utilities
+
+<!--TODO: hide-->
+
+The `opacity` property sets the opacity level for an element.
+
+The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent.
 
 Set the `opacity` of an element using `.opacity-{value}` utilities.
 
@@ -41,3 +74,5 @@ Set the `opacity` of an element using `.opacity-{value}` utilities.
 Opacity utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
 {{< scss-docs name="utils-opacity" file="scss/_utilities.scss" >}}
+
+{{< scss-docs name="utils-opacity-uds" file="scss/_utilities.scss" >}}