feat: Switch to 1px outline for all inputs and buttons, as well as use background color in lists (#4276)

## Description

Most controls are affected 2px > 1px
Navigator and project settings lists now use background color instead of
outline

## Steps for reproduction

1. click button
2. 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:
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` file

Author: kof

apps/builder/app/auth/brand-button.tsx

@@ -26,7 +26,7 @@ export const buttonStyle = css({
     boxShadow: theme.shadows.brandElevationBig,
   },
   "&:focus-visible": {
-    outline: `2px solid ${theme.colors.borderFocus}`,
+    outline: `1px solid ${theme.colors.borderFocus}`,
     outlineOffset: 1,
   },
   "&:disabled": {

apps/builder/app/builder/features/project-settings/project-settings.tsx

@@ -9,7 +9,6 @@ import {
   Flex,
   List,
   ListItem,
-  focusRingStyle,
   Text,
 } from "@webstudio-is/design-system";
 import { $isProjectSettingsOpen } from "~/shared/nano-states/seo";
@@ -19,8 +18,6 @@ import { useState } from "react";
 import { SectionMarketplace } from "./section-marketplace";
 import { leftPanelWidth, rightPanelWidth } from "./utils";
 
-const focusOutline = focusRingStyle();
-
 const sectionNames = ["General", "Redirects", "Marketplace"];
 
 type SectionName = (typeof sectionNames)[number];
@@ -72,8 +69,9 @@ export const ProjectSettingsView = ({
                         height: theme.spacing[13],
                         px: theme.spacing[9],
                         outline: "none",
-                        "&:focus-visible": focusOutline,
-                        "&:hover": focusOutline,
+                        "&:focus-visible, &:hover": {
+                          background: theme.colors.backgroundHover,
+                        },
                         "&[aria-current=true]": {
                           background: theme.colors.backgroundItemCurrent,
                           color: theme.colors.foregroundMain,

apps/builder/app/builder/features/sidebar-left/sidebar-tabs.tsx

@@ -6,6 +6,7 @@ import {
   TabsTrigger,
   Tooltip,
   css,
+  focusRingStyle,
   styled,
   theme,
 } from "@webstudio-is/design-system";
@@ -19,17 +20,7 @@ export const SidebarTabs = styled(Tabs, {
   boxSizing: "border-box",
 });
 
-const triggerFocusRing = {
-  "&::after": {
-    content: '""',
-    position: "absolute",
-    inset: 4,
-    outlineWidth: 2,
-    outlineStyle: "solid",
-    outlineColor: theme.colors.borderFocus,
-    borderRadius: theme.borderRadius[3],
-  },
-};
+const triggerFocusRing = focusRingStyle();
 
 const buttonStyle = css({
   position: "relative",

apps/builder/app/builder/features/style-panel/sections/layout/shared/flex-grid.tsx

@@ -76,20 +76,16 @@ export const FlexGrid = () => {
         height: 72,
         padding: theme.spacing[4],
         borderRadius: theme.borderRadius[4],
+        outline: "none",
+        border: `1px solid ${color}`,
         background: theme.colors.backgroundControls,
         alignItems: "center",
         gap: 0,
         gridTemplateColumns: "repeat(3, 1fr)",
         gridTemplateRows: "repeat(3, 1fr)",
         color,
-        outlineStyle: "solid",
-        outlineWidth: styleValueSourceColor === "default" ? 1 : 2,
-        outlineOffset: styleValueSourceColor === "default" ? -1 : -2,
-        outlineColor: color,
         "&:focus-within": {
-          outlineWidth: 2,
-          outlineOffset: -2,
-          outlineColor: theme.colors.borderLocalFlexUi,
+          borderColor: theme.colors.borderLocalFlexUi,
         },
       }}
     >

apps/builder/app/builder/features/style-panel/sections/position/inset-control.tsx

@@ -127,7 +127,8 @@ export const InsetControl = () => {
         height: theme.spacing[18],
         "&:focus-visible": {
           borderRadius: theme.borderRadius[3],
-          outline: `2px solid ${theme.colors.blue10}`,
+          outline: `1px solid ${theme.colors.blue10}`,
+          outlineOffset: -1,
         },
       }}
       onFocus={keyboardNavigation.handleFocus}

apps/builder/app/builder/features/style-panel/sections/space/layout.tsx

@@ -150,7 +150,7 @@ const Container = styled("div", {
   // (both in z-order and in top/left)
   [`&:focus-visible > ${Grid}`]: {
     borderRadius: theme.borderRadius[3],
-    outline: `2px solid ${theme.colors.blue10}`,
+    outline: `1px solid ${theme.colors.borderFocus}`,
   },
 });
 

apps/builder/app/builder/features/style-panel/shared/color-thumb.tsx

@@ -59,6 +59,10 @@ const thumbStyle = css({
   borderRadius: theme.borderRadius[2],
   borderWidth: 0,
   borderStyle: "solid",
+  "&:focus-visible": {
+    outline: `1px solid ${theme.colors.borderFocus}`,
+    outlineOffset: 1,
+  },
 });
 
 type Props = Omit<ComponentProps<"button">, "color"> & {

apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx

@@ -86,8 +86,7 @@ const TextFieldContainer = styled("div", {
   minWidth: 0,
   border: `1px solid ${theme.colors.borderMain}`,
   "&:focus-within": {
-    outline: `2px solid ${theme.colors.borderFocus}`,
-    outlineOffset: -1,
+    borderColor: theme.colors.borderFocus,
   },
 });
 
@@ -173,16 +172,12 @@ const TextFieldBase: ForwardRefRenderFunction<
           {...textFieldProps}
           variant="chromeless"
           css={{
-            color: theme.colors.hiContrast,
             fontVariantNumeric: "tabular-nums",
-            fontFamily: theme.fonts.sans,
-            fontSize: theme.deprecatedFontSize[3],
             lineHeight: 1,
             order: 1,
-            border: "none",
             flex: 1,
             "&:focus-within, &:hover": {
-              outline: "none",
+              borderColor: "transparent",
             },
           }}
           size="1"

apps/builder/app/builder/shared/code-editor-base.tsx

@@ -85,7 +85,6 @@ const editorContentStyle = css({
   userSelect: "text",
   "&:focus-within": {
     borderColor: theme.colors.borderFocus,
-    outline: `1px solid ${theme.colors.borderFocus}`,
   },
   '&[data-invalid="true"]': {
     borderColor: theme.colors.borderDestructiveMain,

apps/builder/app/builder/shared/image-manager/image-thumbnail.tsx

@@ -56,7 +56,7 @@ const ThumbnailContainer = styled(Box, {
     },
     state: {
       selected: {
-        boxShadow: `0px 0px 0px 2px ${theme.colors.blue10}, 0px 0px 0px 2px ${theme.colors.blue10}`,
+        outline: `1px solid ${theme.colors.borderFocus}`,
       },
     },
   },