diff --git a/apps/builder/app/builder/features/sidebar-left/panels/navigator/navigator-tree.tsx b/apps/builder/app/builder/features/sidebar-left/panels/navigator/navigator-tree.tsx
index 746831a7d75..63144d4960d 100644
--- a/apps/builder/app/builder/features/sidebar-left/panels/navigator/navigator-tree.tsx
+++ b/apps/builder/app/builder/features/sidebar-left/panels/navigator/navigator-tree.tsx
@@ -10,6 +10,7 @@ import {
ScrollArea,
SmallIconButton,
styled,
+ Text,
theme,
toast,
Tooltip,
@@ -26,7 +27,11 @@ import {
WsComponentMeta,
} from "@webstudio-is/react-sdk";
import { ROOT_INSTANCE_ID, type Instance } from "@webstudio-is/sdk";
-import { EyeconClosedIcon, EyeconOpenIcon } from "@webstudio-is/icons";
+import {
+ EyeconClosedIcon,
+ EyeconOpenIcon,
+ InfoCircleIcon,
+} from "@webstudio-is/icons";
import {
$dragAndDropState,
$editingItemSelector,
@@ -476,6 +481,21 @@ export const NavigatorTree = () => {
onClick: () => $selectedInstanceSelector.set([ROOT_INSTANCE_ID]),
onFocus: () => $selectedInstanceSelector.set([ROOT_INSTANCE_ID]),
}}
+ action={
+
+ Variables defined on Global Root are available on every
+ instance on every page.
+
+ }
+ >
+
+
+ }
>
}>
{rootMeta.label}
diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index 70331256f32..bf97095f639 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -157,7 +157,7 @@ const AdvancedSearch = ({
itemToString={(item) => item?.label ?? ""}
getItemProps={() => ({ text: "sentence" })}
getDescription={(item) => {
- let description = `Unknown CSS property.`;
+ let description = `Create CSS variable.`;
if (item && item.value in propertyDescriptions) {
description =
propertyDescriptions[
@@ -201,7 +201,7 @@ const AdvancedPropertyLabel = ({ property }: { property: StyleProperty }) => {
}}
content={
{