Try out adding a tokens Sass directory

scss/_variables.scss

@@ -1,5 +1,8 @@
-@import "color-palette";
-@import "tokens";
+@import "tokens/raw";
+@import "tokens/semantic";
+@import "tokens/component";
+@import "color-palette"; // TODO: should be in "tokens/raw"
+
 
 // Variables
 //
@@ -377,22 +380,6 @@ $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
-// scss-docs-start opacities-variables-maps
-$opacities: (
-  "transparent": $opacity-0,
-  "weaker":      $opacity-100,
-  "weak":        $opacity-300,
-  "medium":      $opacity-500,
-  "emphasis":    $opacity-700,
-  "opaque":      $opacity-900
-) !default;
-// scss-docs-end opacities-variables-maps
-// End mod
-
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (
   ("<", "%3c"),
@@ -1933,7 +1920,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:            map-get($opacities, "emphasis") !default;
+$modal-backdrop-opacity:            $overlays-modal-backdrop-opacity !default;
 
 $modal-header-border-color:         null !default; // Boosted mod
 $modal-header-border-width:         $modal-content-border-width !default;

scss/tokens/_component.scss

@@ -0,0 +1,6 @@
+//// Component applications
+//// Depends on semantic applications
+
+// Overlays/modals
+
+$overlays-modal-backdrop-opacity: map-get($opacities, "emphasis") !default;

scss/_tokens.scss → scss/tokens/_raw.scss

@@ -1,3 +1,6 @@
+//// Raw primitive values
+//// Insertion of brand foundations
+
 // Opacity
 
 $opacity-0:   0 !default;

scss/tokens/_semantic.scss

@@ -0,0 +1,15 @@
+//// Semantic applications
+//// Depends on raw primitive values
+
+// Opacity
+
+// scss-docs-start opacities-variables-maps
+$opacities: (
+  "transparent": $opacity-0,
+  "weaker":      $opacity-100,
+  "weak":        $opacity-300,
+  "medium":      $opacity-500,
+  "emphasis":    $opacity-700,
+  "opaque":      $opacity-900
+) !default;
+// scss-docs-end opacities-variables-maps

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

@@ -77,7 +77,7 @@ Set the `opacity` of an element using `.opacity-{value}` utilities.
 
 Opacity utilities are declared via Sass map and then generated with our utilities API.
 
-{{< scss-docs name="opacities-variables-maps" file="scss/_variables.scss" >}}
+{{< scss-docs name="opacities-variables-maps" file="scss/tokens/_semantic.scss" >}}
 
 ### Sass utilities API