Merge pull request #460 from webstudio-is/remove-width-constant

Remove PANEL_WIDTH constant, use token

apps/designer/app/designer/designer.tsx

@@ -38,7 +38,6 @@ import {
 } from "~/shared/nano-states";
 import { useClientSettings } from "./shared/client-settings";
 import { Navigator } from "./features/sidebar-left";
-import { PANEL_WIDTH } from "./shared/constants";
 import { useSetAssets } from "./shared/assets";
 import { getBuildUrl } from "~/shared/router-utils";
 
@@ -179,7 +178,7 @@ const getChromeLayout = ({
 
   if (navigatorLayout === "undocked") {
     return {
-      gridTemplateColumns: `auto ${PANEL_WIDTH}px 1fr ${PANEL_WIDTH}px`,
+      gridTemplateColumns: `auto $spacing$30 1fr $spacing$30`,
       gridTemplateAreas: `
             "header header header header"
             "sidebar navigator main inspector"
@@ -189,7 +188,7 @@ const getChromeLayout = ({
   }
 
   return {
-    gridTemplateColumns: `auto 1fr ${PANEL_WIDTH}px`,
+    gridTemplateColumns: `auto 1fr $spacing$30`,
     gridTemplateAreas: `
           "header header header"
           "sidebar main inspector"
@@ -234,7 +233,7 @@ const NavigatorPanel = ({ publish, isPreviewMode }: NavigatorPanelProps) => {
       <Box
         css={{
           borderRight: "1px solid $slate7",
-          width: PANEL_WIDTH,
+          width: "$spacing$30",
           height: "100%",
         }}
       >

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

@@ -11,7 +11,6 @@ import { panels } from "./panels";
 import type { TabName } from "./types";
 import { isFeatureEnabled } from "~/shared/feature-flags";
 import { useClientSettings } from "~/designer/shared/client-settings";
-import { PANEL_WIDTH } from "~/designer/shared/constants";
 import { Flex } from "@webstudio-is/design-system";
 
 const none = { TabContent: () => null };
@@ -66,7 +65,7 @@ export const SidebarLeft = ({ publish }: SidebarLeftProps) => {
           value={activeTab === "none" ? "" : activeTab}
           css={{
             zIndex: "$1",
-            width: PANEL_WIDTH,
+            width: "$spacing$30",
             // We need the node to be rendered but hidden
             // to keep receiving the drag events.
             visibility:

apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx

@@ -5,7 +5,6 @@ import {
   PopoverHeader,
   PopoverPortal,
 } from "@webstudio-is/design-system";
-import { PANEL_WIDTH } from "~/designer/shared/constants";
 import { MutableRefObject, useRef, useState } from "react";
 
 const usePickerSideOffset = (
@@ -54,7 +53,7 @@ export const ValuePickerPopover = ({
           side="right"
           hideArrow
           align="start"
-          css={{ width: PANEL_WIDTH }}
+          css={{ width: "$spacing$30" }}
         >
           {content}
           <PopoverHeader title={title} />

apps/designer/app/designer/shared/constants/index.ts

@@ -1 +0,0 @@
-export const PANEL_WIDTH = 240;