feat: WP-280 @mixin overlay (#402)

Author: wesleyboar

src/lib/_imports/tools/x-overlay.css

@@ -10,13 +10,19 @@ Styleguide Tools.Mixins.Overlay
 */
 @design-tokens url('../../tokens/v2.json') format('style-dictionary3');
 
-%x-overlay--curtain {
+@define-mixin overlay--curtain {
   color: inherit;
   background-color: rgb( from design-token('color.gray.medium') r g b / 0.65 );
   backdrop-filter: blur(6px);
 }
+%x-overlay--curtain {
+  @mixin overlay--curtain;
+}
 
-%x-overlay--callout {
+@define-mixin overlay--callout {
   color: inherit;
   background-color: rgb( from design-token('color.gray.medium') r g b / 0.90 );
 }
+%x-overlay--callout {
+  @mixin overlay--curtain;
+}