From 666bcec19d3f20807183f6d11624737448996e72 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Thu, 21 Mar 2024 15:04:09 +0100
Subject: [PATCH] feat: Make unset property in style panel visibly interactive
 (#3038)

## Description

Many don't realize that properties in style panel are hoverable,
clickable and even have alt+click for reset function



https://github.com/webstudio-is/webstudio/assets/52824/5080c9ec-5f78-4fef-b498-b4fc577536ad




## Code Review

- [ ] hi @TrySound , 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:
5de6)
- [ ] 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.example`
and the `builder/env-check.js` if mandatory
---
 .../style-panel/sections/shared/value-text.tsx         |  6 +-----
 packages/design-system/src/components/label.tsx        | 10 ++++++----
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/shared/value-text.tsx b/apps/builder/app/builder/features/style-panel/sections/shared/value-text.tsx
index d259f080f0..d1d0f2fd0d 100644
--- a/apps/builder/app/builder/features/style-panel/sections/shared/value-text.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/shared/value-text.tsx
@@ -13,7 +13,7 @@ const Container = styled("button", {
   flexWrap: "wrap",
   alignItems: "baseline",
   justifyContent: "center",
-  border: "1px solid transparent",
+  border: "none",
   borderRadius: theme.borderRadius[3],
   padding: `${theme.spacing[2]}`,
 
@@ -30,22 +30,18 @@ const Container = styled("button", {
       local: {
         color: theme.colors.foregroundLocalMain,
         backgroundColor: theme.colors.backgroundLocalMain,
-        borderColor: theme.colors.borderLocalMain,
       },
       overwritten: {
         color: theme.colors.foregroundOverwrittenMain,
         backgroundColor: theme.colors.backgroundOverwrittenMain,
-        borderColor: theme.colors.borderOverwrittenMain,
       },
       preset: {
         color: theme.colors.foregroundMain,
         backgroundColor: theme.colors.backgroundPresetMain,
-        borderColor: theme.colors.borderMain,
       },
       remote: {
         color: theme.colors.foregroundRemoteMain,
         backgroundColor: theme.colors.backgroundRemoteMain,
-        borderColor: theme.colors.borderRemoteMain,
       },
     },
   },
diff --git a/packages/design-system/src/components/label.tsx b/packages/design-system/src/components/label.tsx
index 654269a64f..b2acdae073 100644
--- a/packages/design-system/src/components/label.tsx
+++ b/packages/design-system/src/components/label.tsx
@@ -31,6 +31,7 @@ const StyledLabel = styled(RadixLabel, {
   py: theme.spacing[1],
   border: "1px solid transparent",
   borderRadius: theme.borderRadius[3],
+  transition: "200ms color, 200ms background-color",
 
   // https://github.com/webstudio-is/webstudio/issues/1271#issuecomment-1478436340
   "&:focus-visible": {
@@ -54,11 +55,15 @@ const StyledLabel = styled(RadixLabel, {
     color: {
       default: {
         color: theme.colors.foregroundMain,
+        "&:hover": {
+          px: theme.spacing[3],
+          mx: `calc(${theme.spacing[3]} * -1)`,
+          backgroundColor: theme.colors.backgroundHover,
+        },
       },
       preset: {
         px: theme.spacing[3],
         backgroundColor: theme.colors.backgroundPresetMain,
-        borderColor: theme.colors.borderMain,
         color: theme.colors.foregroundMain,
         "&:hover": {
           backgroundColor: theme.colors.backgroundPresetHover,
@@ -67,7 +72,6 @@ const StyledLabel = styled(RadixLabel, {
       local: {
         px: theme.spacing[3],
         backgroundColor: theme.colors.backgroundLocalMain,
-        borderColor: theme.colors.borderLocalMain,
         color: theme.colors.foregroundLocalMain,
         "&:hover": {
           backgroundColor: theme.colors.backgroundLocalHover,
@@ -76,7 +80,6 @@ const StyledLabel = styled(RadixLabel, {
       overwritten: {
         px: theme.spacing[3],
         backgroundColor: theme.colors.backgroundOverwrittenMain,
-        borderColor: theme.colors.borderOverwrittenMain,
         color: theme.colors.foregroundOverwrittenMain,
         "&:hover": {
           backgroundColor: theme.colors.backgroundOverwrittenHover,
@@ -85,7 +88,6 @@ const StyledLabel = styled(RadixLabel, {
       remote: {
         px: theme.spacing[3],
         backgroundColor: theme.colors.backgroundRemoteMain,
-        borderColor: theme.colors.borderRemoteMain,
         color: theme.colors.foregroundRemoteMain,
         "&:hover": {
           backgroundColor: theme.colors.backgroundRemoteHover,