experimental: Improve readability in advanced section (#4852)

#4816

## Description

Improved readability by:
1. indentation
2. setting gray color for preset properties
3. making colon bolder

<img width="258" alt="image"
src="https://github.com/user-attachments/assets/60528221-35f3-4782-986f-8656a9b6bffd"
/>


## Steps for reproduction

1. click button
4. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx

@@ -288,6 +288,10 @@ const AddProperty = forwardRef<
   );
 });
 
+// Used to indent the values when they are on the next line. This way its easier to see
+// where the property ends and value begins, especially in case of presets.
+const indentation = `20px`;
+
 const AdvancedPropertyLabel = ({
   property,
   onReset,
@@ -334,6 +338,7 @@ const AdvancedPropertyLabel = ({
         text="mono"
         css={{
           backgroundColor: "transparent",
+          marginLeft: `-${indentation}`,
         }}
       >
         {label}
@@ -542,6 +547,7 @@ const AdvancedProperty = memo(
           // with "auto" it will call it with skipped false for all initial elements.
           // 44px is the height of the property row with 2 lines of text. This value can be adjusted slightly.
           containIntrinsicSize: "auto 44px",
+          paddingLeft: indentation,
         }}
         key={property}
         wrap="wrap"
@@ -551,12 +557,20 @@ const AdvancedProperty = memo(
         {isVisible && (
           <>
             <AdvancedPropertyLabel property={property} onReset={onReset} />
-            <Text>:</Text>
-            <AdvancedPropertyValue
-              autoFocus={autoFocus}
-              property={property}
-              onChangeComplete={onChangeComplete}
-            />
+            <Text
+              variant="mono"
+              // Improves the visual separation of value from the property.
+              css={{ textIndent: "-0.5ch", fontWeight: "bold" }}
+            >
+              :
+            </Text>
+            <Box css={{ color: "red" }}>
+              <AdvancedPropertyValue
+                autoFocus={autoFocus}
+                property={property}
+                onChangeComplete={onChangeComplete}
+              />
+            </Box>
           </>
         )}
       </Flex>

packages/design-system/src/components/label.tsx

@@ -64,7 +64,7 @@ const StyledLabel = styled(RadixLabel, {
       },
       preset: {
         backgroundColor: theme.colors.backgroundPresetMain,
-        color: theme.colors.foregroundMain,
+        color: theme.colors.foregroundTextSubtle,
         "&:hover": {
           backgroundColor: theme.colors.backgroundPresetHover,
         },