Override inherited with html style (#1773)

Html styles override inherited styles. This fixes the issue with link
inheriting from body instead of showing predefined in browser style.

<img width="281" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5635476/f854b55a-ec6d-40e8-8fa0-11b7d13cddf1">

<img width="321" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5635476/52823ecd-f6ee-4788-91ef-b4cb635bc1aa">

apps/builder/app/builder/features/style-panel/shared/style-info.ts

@@ -78,6 +78,7 @@ export type StyleValueInfo = {
   cascaded?: CascadedValueInfo;
   inherited?: InheritedValueInfo;
   preset?: StyleValue;
+  htmlValue?: StyleValue;
 };
 
 export type StyleInfo = {
@@ -132,6 +133,11 @@ export const getStyleSource = (
       return "preset";
     }
   }
+  for (const info of styleValueInfos) {
+    if (info?.htmlValue !== undefined) {
+      return "default";
+    }
+  }
   for (const info of styleValueInfos) {
     if (info?.inherited !== undefined) {
       return "remote";
@@ -581,8 +587,8 @@ export const useStyleInfo = () => {
     for (const property of styleProperties) {
       // temporary solution until we start computing all styles from data
       const computed = browserStyle?.[property];
+      const htmlValue = htmlStyle?.[property];
       const defaultValue =
-        htmlStyle?.[property] ??
         CUSTOM_DEFAULT_VALUES[property] ??
         properties[property as keyof typeof properties].initial;
       const preset = presetStyle?.[property];
@@ -597,6 +603,7 @@ export const useStyleInfo = () => {
         previousSource?.value ??
         cascaded?.value ??
         preset ??
+        htmlValue ??
         inherited?.value ??
         defaultValue;
       if (value) {
@@ -609,6 +616,7 @@ export const useStyleInfo = () => {
             cascaded,
             inherited,
             preset,
+            htmlValue,
             currentColor: computed,
           };
         } else {
@@ -620,6 +628,7 @@ export const useStyleInfo = () => {
             cascaded,
             inherited,
             preset,
+            htmlValue,
           };
         }
       }

packages/react-sdk/src/css/normalize.ts

@@ -63,18 +63,7 @@ export const i = baseStyle;
 
 export const img = baseStyle;
 
-export const a = [
-  ...baseStyle,
-  {
-    property: "color",
-    value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 },
-  },
-  {
-    state: ":visited",
-    property: "color",
-    value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 },
-  },
-] satisfies Styles;
+export const a = baseStyle;
 export const li = baseStyle;
 export const ul = baseStyle;
 export const ol = baseStyle;