feat: preview variable values in autocomplete (#4336)

TrySound · web-flow · commit 0c25e5028b4c · 2024-10-24T12:26:27.000+03:00
Ref #3399 Here added 2 things to improve accessibility of variables for users 1. Added color and unit values preview in autocomplete list 2. Color inputs no longer autocomplete unit values and unit inputs no longer autocomplete color values. ![Screenshot 2024-10-24 at 00 40 15](https://github.com/user-attachments/assets/2406460c-ad68-4657-97ea-0abc4080ce2f) ![Screenshot 2024-10-24 at 00 35 49](https://github.com/user-attachments/assets/36c68bb7-9365-4914-bf3d-4324be7fae96)
diff --git a/apps/builder/app/builder/features/style-panel/controls/color/color-control.tsx b/apps/builder/app/builder/features/style-panel/controls/color/color-control.tsx
@@ -1,7 +1,10 @@
 import type { StyleProperty } from "@webstudio-is/css-engine";
 import { ColorPicker } from "../../shared/color-picker";
 import { styleConfigByName } from "../../shared/configs";
-import { $availableVariables, useComputedStyleDecl } from "../../shared/model";
+import {
+  $availableColorVariables,
+  useComputedStyleDecl,
+} from "../../shared/model";
 import { deleteProperty, setProperty } from "../../shared/use-style-data";
 
 export const ColorControl = ({ property }: { property: StyleProperty }) => {
@@ -19,7 +22,7 @@ export const ColorControl = ({ property }: { property: StyleProperty }) => {
           type: "keyword" as const,
           value: item.name,
         })),
-        ...$availableVariables.get(),
+        ...$availableColorVariables.get(),
       ]}
       onChange={(styleValue) => setValue(styleValue, { isEphemeral: true })}
       onChangeComplete={setValue}
diff --git a/apps/builder/app/builder/features/style-panel/controls/text/text-control.tsx b/apps/builder/app/builder/features/style-panel/controls/text/text-control.tsx
@@ -6,7 +6,10 @@ import {
 } from "../../shared/css-value-input";
 import { styleConfigByName } from "../../shared/configs";
 import { deleteProperty, setProperty } from "../../shared/use-style-data";
-import { $availableVariables, useComputedStyleDecl } from "../../shared/model";
+import {
+  $availableUnitVariables,
+  useComputedStyleDecl,
+} from "../../shared/model";
 
 export const TextControl = ({ property }: { property: StyleProperty }) => {
   const computedStyleDecl = useComputedStyleDecl(property);
@@ -26,7 +29,7 @@ export const TextControl = ({ property }: { property: StyleProperty }) => {
           type: "keyword" as const,
           value: item.name,
         })),
-        ...$availableVariables.get(),
+        ...$availableUnitVariables.get(),
       ]}
       onChange={(styleValue) => {
         setIntermediateValue(styleValue);
diff --git a/apps/builder/app/builder/features/style-panel/sections/borders/border-color.tsx b/apps/builder/app/builder/features/style-panel/sections/borders/border-color.tsx
@@ -4,7 +4,10 @@ import { styleConfigByName } from "../../shared/configs";
 import { rowCss } from "./utils";
 import { PropertyLabel, PropertyValueTooltip } from "../../property-label";
 import { ColorPicker } from "../../shared/color-picker";
-import { $availableVariables, useComputedStyles } from "../../shared/model";
+import {
+  $availableColorVariables,
+  useComputedStyles,
+} from "../../shared/model";
 import { createBatchUpdate } from "../../shared/use-style-data";
 
 export const properties = [
@@ -58,7 +61,7 @@ export const BorderColor = () => {
                   type: "keyword" as const,
                   value: item.name,
                 })),
-                ...$availableVariables.get(),
+                ...$availableColorVariables.get(),
               ]}
               onChange={(styleValue) => {
                 const batch = createBatchUpdate();
diff --git a/apps/builder/app/builder/features/style-panel/sections/borders/border-property.tsx b/apps/builder/app/builder/features/style-panel/sections/borders/border-property.tsx
@@ -15,7 +15,7 @@ import {
   deleteProperty,
   setProperty,
 } from "../../shared/use-style-data";
-import { $availableVariables, useComputedStyles } from "../../shared/model";
+import { $availableUnitVariables, useComputedStyles } from "../../shared/model";
 
 export const BorderProperty = ({
   individualModeIcon,
@@ -83,7 +83,7 @@ export const BorderProperty = ({
                 type: "keyword" as const,
                 value: item.name,
               })),
-              ...$availableVariables.get(),
+              ...$availableUnitVariables.get(),
             ]}
             value={value}
             setValue={(newValue, options) => {
diff --git a/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx b/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx
@@ -54,7 +54,7 @@ import { PropertyInfo, PropertyLabel } from "../../property-label";
 import {
   useComputedStyles,
   useComputedStyleDecl,
-  $availableVariables,
+  $availableUnitVariables,
 } from "../../shared/model";
 import type { ComputedStyleDecl } from "~/shared/style-object-model";
 
@@ -161,7 +161,7 @@ const GapInput = ({
             type: "keyword" as const,
             value: item.name,
           })),
-          ...$availableVariables.get(),
+          ...$availableUnitVariables.get(),
         ]}
         onChange={(styleValue) => {
           onIntermediateChange(styleValue);
diff --git a/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx b/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx
@@ -17,7 +17,7 @@ import { theme } from "@webstudio-is/design-system";
 import { getInsetModifiersGroup, getSpaceModifiersGroup } from "./scrub";
 import type { SpaceStyleProperty } from "../space/types";
 import type { InsetProperty } from "../position/inset-layout";
-import { $availableVariables } from "../../shared/model";
+import { $availableUnitVariables } from "../../shared/model";
 
 const slideUpAndFade = keyframes({
   "0%": { opacity: 0, transform: "scale(0.8)" },
@@ -50,7 +50,7 @@ const Input = ({
       property={property}
       value={value}
       intermediateValue={intermediateValue}
-      getOptions={() => $availableVariables.get()}
+      getOptions={() => $availableUnitVariables.get()}
       onChange={(styleValue) => {
         setIntermediateValue(styleValue);
         if (styleValue === undefined) {
diff --git a/apps/builder/app/builder/features/style-panel/sections/transforms/transform-rotate.tsx b/apps/builder/app/builder/features/style-panel/sections/transforms/transform-rotate.tsx
@@ -8,7 +8,10 @@ import type { StyleValue } from "@webstudio-is/css-engine";
 import { propertySyntaxes } from "@webstudio-is/css-data";
 import { CssValueInputContainer } from "../../shared/css-value-input";
 import { PropertyInlineLabel } from "../../property-label";
-import { $availableVariables, useComputedStyleDecl } from "../../shared/model";
+import {
+  $availableUnitVariables,
+  useComputedStyleDecl,
+} from "../../shared/model";
 import { updateTransformFunction } from "./transform-utils";
 
 export const RotatePanelContent = () => {
@@ -48,7 +51,7 @@ export const RotatePanelContent = () => {
         <CssValueInputContainer
           styleSource="local"
           property="rotate"
-          getOptions={() => $availableVariables.get()}
+          getOptions={() => $availableUnitVariables.get()}
           value={rotateX}
           setValue={(value, options) =>
             updateTransformFunction(styleDecl, "rotateX", value, options)
@@ -68,7 +71,7 @@ export const RotatePanelContent = () => {
         <CssValueInputContainer
           styleSource="local"
           property="rotate"
-          getOptions={() => $availableVariables.get()}
+          getOptions={() => $availableUnitVariables.get()}
           value={rotateY}
           setValue={(value, options) =>
             updateTransformFunction(styleDecl, "rotateY", value, options)
@@ -88,7 +91,7 @@ export const RotatePanelContent = () => {
         <CssValueInputContainer
           styleSource="local"
           property="rotate"
-          getOptions={() => $availableVariables.get()}
+          getOptions={() => $availableUnitVariables.get()}
           value={rotateZ}
           setValue={(value, options) =>
             updateTransformFunction(styleDecl, "rotateZ", value, options)
diff --git a/apps/builder/app/builder/features/style-panel/sections/transforms/transform-scale.tsx b/apps/builder/app/builder/features/style-panel/sections/transforms/transform-scale.tsx
@@ -25,7 +25,10 @@ import {
 } from "../../shared/use-style-data";
 import type { IntermediateStyleValue } from "../../shared/css-value-input/css-value-input";
 import { PropertyInlineLabel } from "../../property-label";
-import { $availableVariables, useComputedStyleDecl } from "../../shared/model";
+import {
+  $availableUnitVariables,
+  useComputedStyleDecl,
+} from "../../shared/model";
 
 const property: StyleProperty = "scale";
 
@@ -97,7 +100,7 @@ export const ScalePanelContent = () => {
           <CssValueInput
             styleSource="local"
             property={property}
-            getOptions={() => $availableVariables.get()}
+            getOptions={() => $availableUnitVariables.get()}
             value={scaleX}
             intermediateValue={intermediateScalingX}
             onChange={(value) => {
@@ -138,7 +141,7 @@ export const ScalePanelContent = () => {
           <CssValueInput
             styleSource="local"
             property={property}
-            getOptions={() => $availableVariables.get()}
+            getOptions={() => $availableUnitVariables.get()}
             value={scaleY}
             intermediateValue={intermediateScalingY}
             onChange={(value) => {
@@ -179,7 +182,7 @@ export const ScalePanelContent = () => {
           <CssValueInput
             styleSource="local"
             property={property}
-            getOptions={() => $availableVariables.get()}
+            getOptions={() => $availableUnitVariables.get()}
             value={scaleZ}
             intermediateValue={intermediateScalingZ}
             onChange={(value) => {
diff --git a/apps/builder/app/builder/features/style-panel/sections/transforms/transform-translate.tsx b/apps/builder/app/builder/features/style-panel/sections/transforms/transform-translate.tsx
@@ -8,7 +8,10 @@ import {
   type StyleUpdateOptions,
 } from "../../shared/use-style-data";
 import { PropertyInlineLabel } from "../../property-label";
-import { $availableVariables, useComputedStyleDecl } from "../../shared/model";
+import {
+  $availableUnitVariables,
+  useComputedStyleDecl,
+} from "../../shared/model";
 
 const property: StyleProperty = "translate";
 
@@ -58,7 +61,7 @@ export const TranslatePanelContent = () => {
         <CssValueInputContainer
           styleSource="local"
           property={property}
-          getOptions={() => $availableVariables.get()}
+          getOptions={() => $availableUnitVariables.get()}
           value={translateX}
           setValue={(newValue, options) => setAxis(0, newValue, options)}
           deleteProperty={(property, options) =>
@@ -78,7 +81,7 @@ export const TranslatePanelContent = () => {
         <CssValueInputContainer
           styleSource="local"
           property={property}
-          getOptions={() => $availableVariables.get()}
+          getOptions={() => $availableUnitVariables.get()}
           value={translateY}
           setValue={(newValue, options) => setAxis(1, newValue, options)}
           deleteProperty={(property, options) =>
@@ -98,7 +101,7 @@ export const TranslatePanelContent = () => {
         <CssValueInputContainer
           styleSource="local"
           property={property}
-          getOptions={() => $availableVariables.get()}
+          getOptions={() => $availableUnitVariables.get()}
           value={translateZ}
           setValue={(newValue, options) => setAxis(2, newValue, options)}
           deleteProperty={(property, options) =>
diff --git a/apps/builder/app/builder/features/style-panel/sections/transitions/transition-content.tsx b/apps/builder/app/builder/features/style-panel/sections/transitions/transition-content.tsx
@@ -23,7 +23,11 @@ import { CssValueInputContainer } from "../../shared/css-value-input";
 import { parseCssFragment } from "../../shared/css-fragment";
 import { PropertyInlineLabel } from "../../property-label";
 import { TransitionProperty } from "./transition-property";
-import { $availableVariables, useComputedStyles } from "../../shared/model";
+import {
+  $availableVariables,
+  $availableUnitVariables,
+  useComputedStyles,
+} from "../../shared/model";
 import {
   editRepeatedStyleItem,
   setRepeatedStyleItem,
@@ -139,7 +143,7 @@ export const TransitionContent = ({ index }: { index: number }) => {
         <CssValueInputContainer
           property="transitionDuration"
           styleSource="local"
-          getOptions={() => $availableVariables.get()}
+          getOptions={() => $availableUnitVariables.get()}
           value={duration ?? properties.transitionDuration.initial}
           deleteProperty={() => {}}
           setValue={(value, options) => {
@@ -164,7 +168,7 @@ export const TransitionContent = ({ index }: { index: number }) => {
         <CssValueInputContainer
           property="transitionDelay"
           styleSource="local"
-          getOptions={() => $availableVariables.get()}
+          getOptions={() => $availableUnitVariables.get()}
           value={delay ?? properties.transitionDelay.initial}
           deleteProperty={() => {}}
           setValue={(value, options) => {
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-fragment.tsx b/apps/builder/app/builder/features/style-panel/shared/css-fragment.tsx
@@ -7,7 +7,6 @@ import {
   completionKeymap,
   type CompletionSource,
 } from "@codemirror/autocomplete";
-import { toValue } from "@webstudio-is/css-engine";
 import { parseCss } from "@webstudio-is/css-data";
 import { css as style } from "@webstudio-is/design-system";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";
@@ -51,7 +50,7 @@ const scopeCompletionSource: CompletionSource = (context) => {
   const search = word.text;
   const availableVariables = $availableVariables.get();
   const options = availableVariables.map((varValue) => ({
-    label: toValue(varValue),
+    label: `--var(${varValue.value})`,
     displayLabel: `--${varValue.value}`,
   }));
   const matches = matchSorter(options, search, {
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx
@@ -16,6 +16,7 @@ import {
   theme,
   Flex,
   styled,
+  Text,
 } from "@webstudio-is/design-system";
 import type {
   KeywordValue,
@@ -51,6 +52,7 @@ import {
 import { convertUnits } from "./convert-units";
 import { mergeRefs } from "@react-aria/utils";
 import { composeEventHandlers } from "~/shared/event-utils";
+import { ColorThumb } from "../color-thumb";
 
 // We need to enable scrub on properties that can have numeric value.
 const canBeNumber = (property: StyleProperty, value: CssValueInputValue) => {
@@ -275,14 +277,20 @@ const initialValue: IntermediateStyleValue = {
 };
 
 const itemToString = (item: CssValueInputValue | null) => {
-  return item === null
-    ? ""
-    : item.type === "keyword" || item.type === "var"
-      ? // E.g. we want currentcolor to be lower case
-        toValue(item).toLocaleLowerCase()
-      : item.type === "intermediate" || item.type === "unit"
-        ? String(item.value)
-        : toValue(item);
+  if (item === null) {
+    return "";
+  }
+  if (item.type === "var") {
+    return `var(--${item.value})`;
+  }
+  if (item.type === "keyword") {
+    // E.g. we want currentcolor to be lower case
+    return toValue(item).toLocaleLowerCase();
+  }
+  if (item.type === "intermediate" || item.type === "unit") {
+    return String(item.value);
+  }
+  return toValue(item);
 };
 
 const Description = styled(Box, { width: theme.spacing[27] });
@@ -734,9 +742,28 @@ export const CssValueInput = ({
                     {...getItemProps({ item, index })}
                     key={index}
                   >
-                    {item.type === "var"
-                      ? `--${item.value}`
-                      : itemToString(item)}
+                    {item.type === "var" ? (
+                      <Flex justify="between" align="center" grow gap={2}>
+                        <Box>--{item.value}</Box>
+                        {item.fallback?.type === "unit" && (
+                          <Text variant="small" color="subtle">
+                            {toValue(item.fallback)}
+                          </Text>
+                        )}
+                        {item.fallback?.type === "rgb" && (
+                          <ColorThumb
+                            color={{
+                              r: item.fallback.r,
+                              g: item.fallback.g,
+                              b: item.fallback.b,
+                              a: item.fallback.alpha,
+                            }}
+                          />
+                        )}
+                      </Flex>
+                    ) : (
+                      itemToString(item)
+                    )}
                   </ComboboxListboxItem>
                 ))}
               </ComboboxScrollArea>
diff --git a/apps/builder/app/builder/features/style-panel/shared/model.tsx b/apps/builder/app/builder/features/style-panel/shared/model.tsx
diff --git a/apps/builder/app/canvas/shared/styles.ts b/apps/builder/app/canvas/shared/styles.ts
diff --git a/packages/css-engine/src/schema.ts b/packages/css-engine/src/schema.ts
