diff --git a/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx b/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx
index bad2166485..abc70be177 100644
--- a/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx
+++ b/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,
diff --git a/apps/designer/app/designer/features/style-panel/controls/color/color-control.tsx b/apps/designer/app/designer/features/style-panel/controls/color/color-control.tsx
index 7844d82df6..2625a3e521 100644
--- a/apps/designer/app/designer/features/style-panel/controls/color/color-control.tsx
+++ b/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 = ({
-
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}
/>
diff --git a/apps/designer/app/designer/features/style-panel/controls/font-family/font-family-control.tsx b/apps/designer/app/designer/features/style-panel/controls/font-family/font-family-control.tsx
index 14b486dd1d..7c0659571c 100644
--- a/apps/designer/app/designer/features/style-panel/controls/font-family/font-family-control.tsx
+++ b/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 (
@@ -41,17 +41,16 @@ export const FontFamilyControl = ({
{
- 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
}
}}
/>
diff --git a/apps/designer/app/designer/features/style-panel/search.tsx b/apps/designer/app/designer/features/style-panel/search.tsx
index 68cf947a06..b547278880 100644
--- a/apps/designer/app/designer/features/style-panel/search.tsx
+++ b/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) => {
if (event.key === "Escape") {
event.currentTarget.reset();
}
diff --git a/apps/designer/app/designer/features/style-panel/shared/configs.ts b/apps/designer/app/designer/features/style-panel/shared/configs.ts
index 3a18f3fbfc..cbdf44a614 100644
--- a/apps/designer/app/designer/features/style-panel/shared/configs.ts
+++ b/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";
diff --git a/apps/designer/app/designer/features/topbar/publish.tsx b/apps/designer/app/designer/features/topbar/publish.tsx
index 747a01a6c3..411e00ec2a 100644
--- a/apps/designer/app/designer/features/topbar/publish.tsx
+++ b/apps/designer/app/designer/features/topbar/publish.tsx
@@ -10,6 +10,7 @@ import {
PopoverPortal,
TextField,
Text,
+ __DEPRECATED__Text,
Label,
Link,
useId,
diff --git a/apps/designer/package.json b/apps/designer/package.json
index 5c7f39c1db..c23a3ced3d 100644
--- a/apps/designer/package.json
+++ b/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": "*",
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 4712a8807d..219b9ac416 100644
--- a/packages/design-system/package.json
+++ b/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"
},
diff --git a/yarn.lock b/yarn.lock
index 56cfe39fd6..aca7adcc70 100644
--- a/yarn.lock
+++ b/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==