linter

apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx

@@ -1,8 +1,6 @@
 import { useState } from "react";
 import { useSubscribe, type Publish } from "~/shared/pubsub";
-
 import {
-  Box,
   SidebarTabs,
   SidebarTabsContent,
   SidebarTabsList,

apps/designer/app/designer/features/style-panel/controls/color/color-control.tsx

@@ -7,16 +7,15 @@ import {
   Popover,
   PopoverTrigger,
   PopoverContent,
+  PopoverPortal,
   TextField,
   Tooltip,
+  css,
 } from "@webstudio-is/design-system";
 import { PropertyName } from "../../shared/property-name";
 import { getFinalValue } from "../../shared/get-final-value";
 import type { ControlProps } from "../../style-sections";
 import { StyleConfig } from "../../shared/configs";
-import { PopoverPortal } from "@webstudio-is/design-system";
-import { css } from "@webstudio-is/design-system";
-import { styled } from "@webstudio-is/design-system";
 
 const stringifyRGBA = (color: RGBColor) => {
   const { r, g, b, a = 1 } = color;
@@ -24,7 +23,7 @@ const stringifyRGBA = (color: RGBColor) => {
   return `rgba(${r},${g},${b},${a})`;
 };
 
-const StyledPicker = styled(SketchPicker, {
+const pickerStyle = css({
   padding: "$2",
   background: "$panel",
   // @todo this lib doesn't have another way to define styles for inputs
@@ -35,6 +34,13 @@ const StyledPicker = styled(SketchPicker, {
   },
 });
 
+const defaultPickerStyles = {
+  default: {
+    // Workaround to allow overrides using className
+    picker: { padding: "", background: "" },
+  },
+};
+
 type ColorPickerProps = {
   onChange: (value: string) => void;
   onChangeComplete: (value: string) => void;
@@ -98,7 +104,7 @@ const ColorPicker = ({
       </PopoverTrigger>
       <PopoverPortal>
         <PopoverContent>
-          <StyledPicker
+          <SketchPicker
             color={value}
             onChange={(color: ColorResult) =>
               onChange(stringifyRGBA(color.rgb))
@@ -108,12 +114,8 @@ const ColorPicker = ({
             }}
             // @todo to remove both when we have preset colors
             presetColors={[]}
-            styles={{
-              default: {
-                // Workaround to allow overrides over styled()
-                picker: { padding: null, background: null },
-              },
-            }}
+            className={pickerStyle()}
+            styles={defaultPickerStyles}
           />
         </PopoverContent>
       </PopoverPortal>

apps/designer/app/designer/features/style-panel/controls/font-family/font-family-control.tsx

@@ -20,7 +20,7 @@ const textFieldStyle = {
 export const FontFamilyControl = ({
   currentStyle,
   inheritedStyle,
-  setProperty,
+  //setProperty,
   styleConfig,
 }: ControlProps) => {
   // @todo show which instance we inherited the value from
@@ -32,7 +32,7 @@ export const FontFamilyControl = ({
 
   if (value === undefined) return null;
 
-  const setValue = setProperty(styleConfig.property);
+  //const setValue = setProperty(styleConfig.property);
 
   return (
     <Grid columns={2}>
@@ -41,17 +41,16 @@ export const FontFamilyControl = ({
       <Popover>
         <PopoverTrigger asChild aria-label="Share project">
           <TextField
-            ref={(element) => {
-              if (element) console.log(element.offsetLeft);
-            }}
             css={textFieldStyle}
             spellCheck={false}
             readOnly
             defaultValue={value.value}
-            onClick={() => {}}
+            onClick={() => {
+              // @todo show font picker
+            }}
             onKeyDown={(event) => {
               if (event.key === "Enter") {
-                console.log("show font picker");
+                // @todo show font picker
               }
             }}
           />

apps/designer/app/designer/features/style-panel/search.tsx

@@ -1,5 +1,5 @@
-import { useState } from "react";
-import { css, IconButton, TextField } from "@webstudio-is/design-system";
+import { KeyboardEvent, useState } from "react";
+import { IconButton, TextField } from "@webstudio-is/design-system";
 import { Cross2Icon, MagnifyingGlassIcon } from "@webstudio-is/icons";
 import { components } from "@webstudio-is/react-sdk";
 import type { SelectedInstanceData } from "~/shared/canvas-components";
@@ -32,7 +32,7 @@ export const Search = ({ onSearch, selectedInstanceData }: SearchProps) => {
       onReset={() => {
         setSearch("");
       }}
-      onKeyDown={(event) => {
+      onKeyDown={(event: KeyboardEvent<HTMLFormElement>) => {
         if (event.key === "Escape") {
           event.currentTarget.reset();
         }

apps/designer/app/designer/features/style-panel/shared/configs.ts

@@ -90,9 +90,9 @@ const getControl = (property: StyleProperty): Control => {
     case "placeContent": {
       return "Empty";
     }
-    case "fontFamily": {
-      return "FontFamily";
-    }
+    //case "fontFamily": {
+    //  return "FontFamily";
+    //}
   }
 
   return "Text";

apps/designer/app/designer/features/topbar/publish.tsx

@@ -10,6 +10,7 @@ import {
   PopoverPortal,
   TextField,
   Text,
+  __DEPRECATED__Text,
   Label,
   Link,
   useId,

apps/designer/package.json

@@ -24,7 +24,6 @@
     "@remix-run/serve": "^1.6.4",
     "@remix-run/vercel": "^1.6.4",
     "@sentry/remix": "^7.5.0",
-    "@stitches/react": "^1.2.7",
     "@vercel/node": "^2.4.1",
     "@webstudio-is/asset-uploader": "*",
     "@webstudio-is/design-system": "*",

packages/design-system/package.json

@@ -60,6 +60,7 @@
     "@radix-ui/react-toggle-group": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
     "@radix-ui/react-use-layout-effect": "^1.0.0",
+    "@stitches/react": "^1.2.8",
     "@webstudio-is/icons": "*",
     "react-hot-toast": "^2.3.0"
   },

yarn.lock

@@ -3669,7 +3669,7 @@
   resolved "https://registry.yarnpkg.com/@stitches/core/-/core-1.2.8.tgz#dce3b8fdc764fbc6dbea30c83b73bfb52cf96173"
   integrity sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==
 
-"@stitches/react@^1.2.7":
+"@stitches/react@^1.2.8":
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/@stitches/react/-/react-1.2.8.tgz#954f8008be8d9c65c4e58efa0937f32388ce3a38"
   integrity sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==