feat: show unresolved inherited values in style panel (#4990)

Per user request we will not show computed value when inherited from
ancestor.
Chrome devtools seem to show unresolved values in "inherited" section.

<img width="252" alt="image"
src="https://github.com/user-attachments/assets/b7f22ec5-e2ea-47aa-9bad-80622d0aa5f9"
/>

Author: TrySound

apps/builder/app/shared/style-object-model.test.tsx

@@ -954,11 +954,11 @@ test("access cascaded value without resolving", () => {
   ).toEqual({ type: "keyword", value: "initial" });
 });
 
-test("fallback cascaded value to inherited computed value", () => {
+test("fallback cascaded value to initial value", () => {
   const model = createModel({
     css: `
       body {
-        border-top-color: currentcolor;
+        width: 10px;
       }
     `,
     jsx: (
@@ -971,9 +971,32 @@ test("fallback cascaded value to inherited computed value", () => {
     getComputedStyleDecl({
       model,
       instanceSelector: ["box", "body"],
-      property: "border-top-color",
+      property: "width",
+    }).cascadedValue
+  ).toEqual({ type: "keyword", value: "auto" });
+});
+
+test("fallback cascaded value to inherited unresolved value", () => {
+  const model = createModel({
+    css: `
+      body {
+        --color: red;
+        color: var(--color);
+      }
+    `,
+    jsx: (
+      <$.Body ws:id="body" class="body">
+        <$.Box ws:id="box" class="box"></$.Box>
+      </$.Body>
+    ),
+  });
+  expect(
+    getComputedStyleDecl({
+      model,
+      instanceSelector: ["box", "body"],
+      property: "color",
     }).cascadedValue
-  ).toEqual({ type: "keyword", value: "currentColor" });
+  ).toEqual({ type: "var", value: "color" });
 });
 
 test("work with unknown or invalid properties", () => {

apps/builder/app/shared/style-object-model.ts

@@ -342,6 +342,7 @@ export const getComputedStyleDecl = ({
       state,
       property,
     });
+    const inheritedCascadedValue = cascadedValue;
     cascadedValue = cascaded?.value;
     source = cascaded?.source ?? { name: "default" };
 
@@ -372,6 +373,7 @@ export const getComputedStyleDecl = ({
     // defaulting https://drafts.csswg.org/css-cascade-5/#defaulting
     else if (inherited) {
       specifiedValue = inheritedValue;
+      cascadedValue = inheritedCascadedValue;
       source = inheritedSource;
     } else {
       specifiedValue = initialValue;
@@ -436,8 +438,8 @@ export const getComputedStyleDecl = ({
     usedValue = currentColor.usedValue;
   }
 
-  // fallback to inherited value
-  cascadedValue ??= computedValue;
+  // fallback to initial value
+  cascadedValue ??= initialValue;
 
   return { property, source, cascadedValue, computedValue, usedValue };
 };