diff --git a/app/assets/stylesheets/bootstrap_css_variable_overrides.css.scss b/app/assets/stylesheets/bootstrap_css_variable_overrides.css.scss
index 6f35058486..d399b3ad21 100644
--- a/app/assets/stylesheets/bootstrap_css_variable_overrides.css.scss
+++ b/app/assets/stylesheets/bootstrap_css_variable_overrides.css.scss
@@ -27,10 +27,15 @@
   --bs-primary: var(--d-primary);
   --bs-primary-rgb: var(--d-primary-rgb);
   --bs-secondary: var(--d-secondary);
+  --bs-secondary-rgb: var(--d-secondary-rgb);
   --bs-success: var(--d-success);
+  --bs-success-rgb: var(--d-success-rgb);
   --bs-info: var(--d-info);
+  --bs-info-rgb: var(--d-info-rgb);
   --bs-warning: var(--d-warning);
+  --bs-warning-rgb: var(--d-warning-rgb);
   --bs-danger: var(--d-danger);
+  --bs-danger-rgb: var(--d-danger-rgb);
   --bs-light: $neutral-90;
   --bs-dark: $neutral-25;
 
diff --git a/app/assets/stylesheets/theme/m3-theme-dark.css.scss b/app/assets/stylesheets/theme/m3-theme-dark.css.scss
index 68df989209..227d8c747b 100644
--- a/app/assets/stylesheets/theme/m3-theme-dark.css.scss
+++ b/app/assets/stylesheets/theme/m3-theme-dark.css.scss
@@ -16,6 +16,7 @@
   --d-secondary-container: #{$secondary-30};
   --d-on-secondary: #{$secondary-20};
   --d-on-secondary-container: #{$secondary-90};
+  --d-secondary-rgb: #{color.red($secondary-80)}, #{color.green($secondary-80)}, #{color.blue($secondary-80)};
 
   // tertiary
   --d-tertiary: #{$tertiary-80};
@@ -45,6 +46,7 @@
   --d-info-container: #{$info-30};
   --d-on-info: #{$info-20};
   --d-on-info-container: #{$info-90};
+  --d-info-rgb: #{color.red($info-80)}, #{color.green($info-80)}, #{color.blue($info-80)};
 
   // success changed from 80 to 70
   --d-success: #{$success-70};
@@ -65,6 +67,7 @@
   --d-warning-container: #{$warning-30};
   --d-on-warning: #{$warning-20};
   --d-on-warning-container: #{$warning-90};
+  --d-warning-rgb: #{color.red($warning-80)}, #{color.green($warning-80)}, #{color.blue($warning-80)};
 
   // red
   --d-red: #{$red-80};
diff --git a/app/assets/stylesheets/theme/m3-theme-light.css.scss b/app/assets/stylesheets/theme/m3-theme-light.css.scss
index a57e61dae8..58657cf744 100644
--- a/app/assets/stylesheets/theme/m3-theme-light.css.scss
+++ b/app/assets/stylesheets/theme/m3-theme-light.css.scss
@@ -18,6 +18,7 @@
   --d-secondary-container: #{$secondary-90};
   --d-on-secondary: #{$secondary-100};
   --d-on-secondary-container: #{$secondary-10};
+  --d-secondary-rgb: #{color.red($secondary-40)}, #{color.green($secondary-40)}, #{color.blue($secondary-40)};
 
   // tertiary
   --d-tertiary: #{$tertiary-40};
@@ -47,6 +48,7 @@
   --d-info-container: #{$info-90};
   --d-on-info: #{$info-100};
   --d-on-info-container: #{$info-10};
+  --d-info-rgb: #{color.red($info-40)}, #{color.green($info-40)}, #{color.blue($info-40)};
 
   // changed from 40 to 60
   --d-success: #{$success-60};
@@ -67,6 +69,7 @@
   --d-warning-container: #{$warning-90};
   --d-on-warning: #{$warning-100};
   --d-on-warning-container: #{$warning-10};
+  --d-warning-rgb: #{color.red($warning-70)}, #{color.green($warning-70)}, #{color.blue($warning-70)};
 
   // red
   --d-red: #{$red-40};