feat: updated inputs design system (#4635)

## Description

Inputs have now in default state no borders but instead a background

## 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:
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

apps/builder/app/builder/features/breakpoints/breakpoints-popover.tsx

@@ -18,6 +18,7 @@ import {
   Box,
   PopoverMenuItemRightSlot,
   Tooltip,
+  InputField,
 } from "@webstudio-is/design-system";
 import { BreakpointsEditor } from "./breakpoints-editor";
 import { BreakpointsPopoverToolbarButton } from "./breakpoints-popover-toolbar-button";
@@ -94,7 +95,12 @@ export const BreakpointsPopover = () => {
           <BreakpointsPopoverToolbarButton css={{ gap: theme.spacing[5] }} />
         </PopoverTrigger>
       </Tooltip>
-      <PopoverContent sideOffset={0} collisionPadding={4} align="start">
+      <PopoverContent
+        sideOffset={0}
+        collisionPadding={4}
+        align="start"
+        css={{ width: theme.spacing[30] }}
+      >
         {view === "confirmation" && breakpointToDelete && (
           <ConfirmationDialog
             breakpoint={breakpointToDelete}
@@ -115,17 +121,15 @@ export const BreakpointsPopover = () => {
         )}
         {view === "initial" && (
           <>
-            <Flex css={{ p: theme.panel.padding }} gap="3">
+            <Flex css={{ padding: theme.panel.padding }} gap="3">
               <WidthInput min={minCanvasWidth} />
               <Flex align="center" gap="2">
                 <Label>Scale</Label>
-                <Button
-                  color="neutral"
-                  css={{ width: theme.spacing[17] }}
+                <InputField
+                  value={`${Math.round(scale)}%`}
                   tabIndex={-1}
-                >
-                  {Math.round(scale)}%
-                </Button>
+                  readOnly
+                />
               </Flex>
             </Flex>
             <PopoverSeparator />

apps/builder/app/builder/features/breakpoints/confirmation-dialog.tsx

@@ -13,11 +13,7 @@ export const ConfirmationDialog = ({
   onAbort,
 }: ConfirmationDialogProps) => {
   return (
-    <Flex
-      gap="2"
-      direction="column"
-      css={{ px: theme.spacing[11], py: theme.spacing[5], width: 300 }}
-    >
+    <Flex gap="2" direction="column" css={{ padding: theme.spacing[5] }}>
       <Text>{`Are you sure you want to delete "${breakpoint.label}"?`}</Text>
       <Text>
         {`Deleting a breakpoint will also delete all styles associated with this

apps/builder/app/builder/features/breakpoints/width-input.tsx

@@ -134,14 +134,13 @@ export const WidthInput = ({ min }: { min: number }) => {
       <Label htmlFor={id}>Width</Label>
       <InputField
         {...inputProps}
-        css={{ width: theme.spacing[19] }}
         id={id}
         suffix={
           <Text
             variant="unit"
             color="subtle"
             align="center"
-            css={{ width: theme.spacing[10] }}
+            css={{ paddingInline: theme.spacing[3] }}
           >
             PX
           </Text>

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

@@ -49,18 +49,14 @@ export const FlexGrid = () => {
     flexDirectionValue === "column" || flexDirectionValue === "column-reverse";
 
   let color = theme.colors.foregroundFlexUiMain;
-  let borderColor = theme.colors.foregroundFlexUiMain;
 
   if (styleValueSourceColor === "local") {
-    borderColor = theme.colors.borderLocalMain;
     color = theme.colors.foregroundLocalFlexUi;
   }
   if (styleValueSourceColor === "overwritten") {
-    borderColor = theme.colors.borderOverwrittenFlexUi;
     color = theme.colors.foregroundOverwrittenFlexUi;
   }
   if (styleValueSourceColor === "remote") {
-    borderColor = theme.colors.borderRemoteFlexUi;
     color = theme.colors.foregroundRemoteFlexUi;
   }
 
@@ -77,9 +73,8 @@ export const FlexGrid = () => {
     <Grid
       tabIndex={0}
       css={{
-        padding: theme.spacing[2],
+        padding: theme.spacing[3],
         borderRadius: theme.borderRadius[4],
-        outline: `1px solid ${borderColor}`,
         background: theme.colors.backgroundControls,
         alignItems: "center",
         gap: 0,
@@ -120,8 +115,7 @@ export const FlexGrid = () => {
                 minWidth: "auto",
                 color: theme.colors.foregroundFlexUiMain,
                 "&:hover": {
-                  // @todo not clear which token to use here
-                  background: theme.colors.backgroundHover,
+                  background: theme.colors.foregroundFlexUiHover,
                 },
                 "&:focus": {
                   background: "none",

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

@@ -27,7 +27,7 @@ const Trapezoid = styled("div", {
 
 const TopBottom = styled(Trapezoid, {
   zIndex: 0,
-  backgroundColor: theme.colors.backgroundPanel,
+  backgroundColor: theme.colors.backgroundSpacingTopBottom,
 });
 
 const LeftRight = styled(Trapezoid, {

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

@@ -41,7 +41,7 @@ const emulateInnerStroke = ({
 });
 
 const ValueArea = styled("path", {
-  fill: theme.colors.backgroundPanel,
+  fill: theme.colors.backgroundSpacingTopBottom,
   variants: {
     side: {
       top: { cursor: "n-resize" },
@@ -55,7 +55,11 @@ const ValueArea = styled("path", {
         fill: theme.colors.backgroundSpacingLeftRight,
       },
     },
-    isActive: { true: { fill: theme.colors.backgroundSpacingHover } },
+    isActive: {
+      true: {
+        fill: theme.colors.backgroundSpacingHover,
+      },
+    },
   },
 });
 

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

@@ -80,10 +80,13 @@ const TextFieldContainer = styled("div", {
   alignItems: "center",
   backgroundColor: theme.colors.backgroundControls,
   gap: theme.spacing[2],
-  p: theme.spacing[2],
+  padding: theme.spacing[2],
   borderRadius: theme.borderRadius[4],
   minWidth: 0,
-  border: `1px solid ${theme.colors.borderMain}`,
+  border: `1px solid transparent`,
+  "&:hover": {
+    borderColor: theme.colors.borderMain,
+  },
   "&:focus-within": {
     borderColor: theme.colors.borderFocus,
   },

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

@@ -50,13 +50,13 @@ export const ImageInfo = ({ asset, onDelete }: ImageInfoProps) => {
       {"width" in meta && "height" in meta ? (
         <Box css={{ padding: theme.panel.padding }}>
           <Grid columns={2} gap={2} align="center">
-            <Flex align="center" css={{ gap: theme.spacing[3] }}>
+            <Flex align="center" gap={1}>
               <SizeIcon />
               <Text variant="labelsSentenceCase">
                 {meta.width} x {meta.height}
               </Text>
             </Flex>{" "}
-            <Flex align="center" css={{ gap: theme.spacing[3] }}>
+            <Flex align="center" gap={1}>
               <AspectRatioIcon />
               <Text variant="labelsSentenceCase">
                 {getFormattedAspectRatio(meta)}

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

@@ -34,19 +34,17 @@ const buttonStyle = css({
   outline: "none",
   alignItems: "center",
   justifyContent: "center",
-  color: theme.colors.foregroundSubtle,
+  color: theme.colors.foregroundMain,
   backgroundColor: theme.colors.backgroundPanel,
   border: "none",
   "&:focus-visible": triggerFocusRing,
   "@hover": {
     "&:hover": {
-      color: theme.colors.foregroundMain,
       backgroundColor: theme.colors.backgroundHover,
     },
   },
 
   '&[data-state="active"]': {
-    color: theme.colors.foregroundMain,
     backgroundColor: theme.colors.backgroundHover,
   },
 });