From 48de0b5a102ef688a142e0b5db976d89f4b3543b Mon Sep 17 00:00:00 2001
From: Bartosz-Do <xbartoszdobija@gmail.com>
Date: Tue, 11 Aug 2026 20:14:18 +0200
Subject: [PATCH] Fix broken CSS custom property references in SCSS (#2845)

---
 core/scss/_props.scss               | 1 +
 core/scss/_variables.scss           | 7 ++++---
 core/scss/ui/_accordion.scss        | 1 +
 core/scss/vendor/_stars-rating.scss | 4 ++--
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/core/scss/_props.scss b/core/scss/_props.scss
index c6828d9de..2b9b75e5b 100644
--- a/core/scss/_props.scss
+++ b/core/scss/_props.scss
@@ -26,6 +26,7 @@
   --gray-950: #{$gray-950};
 
   --white: #{$white};
+  --white-lt: color-mix(in oklab, var(--white) 10%, transparent);
   --black: #{$black};
   --dark: #{$dark};
   --light: #{$light};
diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index efeed4168..3158acfa9 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -727,8 +727,8 @@ $backdrop-opacity: 0.32 !default;
 $backdrop-blur: 4px !default;
 $backdrop-bg: light-dark(var(--gray-800), var(--black)) !default;
 $backdrops: (
-  dark: color-mix(in sRGB, var(--color-dark), transparent var(--backdrop-opacity)),
-  light: color-mix(in sRGB, var(--color-light), transparent var(--backdrop-opacity)),
+  dark: color-mix(in sRGB, var(--dark), transparent var(--backdrop-opacity)),
+  light: color-mix(in sRGB, var(--light), transparent var(--backdrop-opacity)),
 ) !default;
 
 // Gradient
@@ -786,7 +786,7 @@ $kbd-padding-y: 0.25rem !default;
 $kbd-font-weight: var(--font-weight-medium) !default;
 $kbd-font-size: var(--font-size-h5) !default;
 $kbd-border: var(--border-width) var(--border-style) var(--border-color) !default;
-$kbd-color: var(--text-secondary-dark) !default;
+$kbd-color: var(--secondary-color) !default;
 $kbd-bg: var(--code-bg) !default;
 $kbd-border-radius: var(--border-radius) !default;
 $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
@@ -1312,6 +1312,7 @@ $accordion-button-active-color: inherit !default;
 $accordion-btn-gap: 0.75rem !default;
 $accordion-header-gap: 1rem !default;
 $accordion-tabs-gap: 0.75rem !default;
+$accordion-btn-focus-box-shadow: $focus-ring-box-shadow !default;
 // scss-docs-end accordion-variables
 
 // Carousel
diff --git a/core/scss/ui/_accordion.scss b/core/scss/ui/_accordion.scss
index 4bd1774c4..148d44e98 100644
--- a/core/scss/ui/_accordion.scss
+++ b/core/scss/ui/_accordion.scss
@@ -18,6 +18,7 @@
   --accordion-body-padding-y: #{$accordion-body-padding-y};
   --accordion-btn-gap: #{$accordion-btn-gap};
   --accordion-header-gap: #{$accordion-header-gap};
+  --accordion-btn-focus-box-shadow: #{$accordion-btn-focus-box-shadow};
 
   display: flex;
   flex-direction: column;
diff --git a/core/scss/vendor/_stars-rating.scss b/core/scss/vendor/_stars-rating.scss
index 0376ecc4f..1a1663916 100644
--- a/core/scss/vendor/_stars-rating.scss
+++ b/core/scss/vendor/_stars-rating.scss
@@ -8,8 +8,8 @@
 
 [data-star-rating] {
   svg {
-    width: var(--icon-size, --gl-star-size);
-    height: var(--icon-size, --gl-star-size);
+    width: var(--icon-size, var(--gl-star-size));
+    height: var(--icon-size, var(--gl-star-size));
   }
 
   :not(.gl-active) > .gl-star-full {