From fe3f30ff2f5110996681bc02ec3b732591846f03 Mon Sep 17 00:00:00 2001
From: Amy Sorto <8575252+amysorto@users.noreply.github.com>
Date: Thu, 29 Aug 2024 11:07:38 -0700
Subject: [PATCH] fix(material/core): Allow system variables to be formatted
 for opacity (#29665)

(cherry picked from commit 90eea1bf7084ea7098676ca9988624802f27884c)
---
 src/material/core/style/_sass-utils.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/material/core/style/_sass-utils.scss b/src/material/core/style/_sass-utils.scss
index 92735c5cf77f..0d51c92e0f32 100644
--- a/src/material/core/style/_sass-utils.scss
+++ b/src/material/core/style/_sass-utils.scss
@@ -77,6 +77,10 @@ $use-system-typography-variables: false;
       $opacity: ($opacity * 100) + '%';
     }
 
+    @if (is-css-var-name($opacity)) {
+      $opacity: calc(var($opacity) * 100%);
+    }
+
     @if (is-css-var-name($color)) {
       $color: var($color);
     }