From 0e7125511b226ae7ffd8116a2f6037526c2dee72 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Mon, 14 Oct 2024 17:16:02 +0300
Subject: [PATCH] experimental: add more hints about css variables (#4282)

Ref https://github.com/webstudio-is/webstudio/issues/3399

Added a few hints

![Screenshot 2024-10-14 at 16 12
07](https://github.com/user-attachments/assets/4a7cf0f8-9cd1-408a-9c16-6cb6c8d77970)
![Screenshot 2024-10-14 at 16 08
04](https://github.com/user-attachments/assets/7d4be8b3-596a-4d07-9761-0677f1acd40b)
![Screenshot 2024-10-14 at 16 07
56](https://github.com/user-attachments/assets/73facdda-724c-4ef8-935e-69cbd0775d6c)
---
 .../panels/navigator/navigator-tree.tsx       | 22 ++++++++++++++++++-
 .../sections/advanced/advanced.tsx            |  4 ++--
 2 files changed, 23 insertions(+), 3 deletions(-)

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 746831a7d753..63144d4960da 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={
+              <Tooltip
+                variant="wrapped"
+                side="bottom"
+                disableHoverableContent={true}
+                content={
+                  <Text>
+                    Variables defined on Global Root are available on every
+                    instance on every page.
+                  </Text>
+                }
+              >
+                <InfoCircleIcon />
+              </Tooltip>
+            }
           >
             <TreeNodeLabel prefix={<MetaIcon icon={rootMeta.icon} />}>
               {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 70331256f325..bf97095f6397 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={
         <PropertyInfo
-          title={label}
+          title={property.startsWith("--") ? "CSS Variable" : label}
           description={description}
           styles={[styleDecl]}
           onReset={() => {