feat: improve vertical space usage (#4307)

## Description

- all inputs/buttons have now 24px height
- horizontal paddings on all panels are 12px, vertical 8px - optimized
for better vertical density
- drive-by: removed all old colors, now its all entirely based on
typography collection from figma and so we can now make dark mode
reality

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

.storybook/preview.tsx

@@ -40,8 +40,7 @@ const WaitForFonts = ({ children }) => {
 
 const globalStyles = globalCss({
   body: {
-    backgroundColor: theme.colors.background,
-    color: theme.colors.hiContrast,
+    color: theme.colors.foregroundMain,
     fontFamily: theme.fonts.sans,
   },
 });

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

@@ -186,7 +186,7 @@ export const BreakpointsEditor = ({ onDelete }: BreakpointsEditorProps) => {
   return (
     <Flex direction="column">
       <PanelTitle
-        css={{ px: theme.spacing[9] }}
+        css={{ paddingInline: theme.panel.paddingInline }}
         suffix={
           <IconButton
             onClick={() => {
@@ -209,7 +209,7 @@ export const BreakpointsEditor = ({ onDelete }: BreakpointsEditorProps) => {
         {allBreakpoints.map((breakpoint, index, all) => {
           return (
             <Fragment key={breakpoint.id}>
-              <Box css={{ px: theme.spacing[7], py: theme.spacing[5] }}>
+              <Box css={{ p: theme.panel.padding }}>
                 <BreakpointEditorItem
                   breakpoint={breakpoint}
                   onChangeComplete={handleChangeComplete}

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

@@ -113,7 +113,7 @@ export const BreakpointsPopover = () => {
         )}
         {view === "initial" && (
           <>
-            <Flex css={{ px: theme.spacing[7], py: theme.spacing[5] }} gap="3">
+            <Flex css={{ p: theme.panel.padding }} gap="3">
               <WidthInput min={minCanvasWidth} />
               <Flex align="center" gap="2">
                 <Label>Scale</Label>

apps/builder/app/builder/features/footer/footer.tsx

@@ -11,7 +11,6 @@ export const Footer = () => {
         height: theme.spacing[11],
         background: theme.colors.backgroundTopbar,
         color: theme.colors.foregroundContrastMain,
-        boxShadow: `inset 0 1px 0 0 ${theme.colors.panelOutline}`,
       }}
     >
       <Breadcrumbs />

apps/builder/app/builder/features/inspector/inspector.tsx

@@ -11,7 +11,6 @@ import {
   PanelTabsContent,
   Card,
   Text,
-  Box,
   EnhancedTooltipProvider,
   Flex,
   ScrollArea,
@@ -48,9 +47,8 @@ const InstanceInfo = ({ instance }: { instance: Instance }) => {
       gap="1"
       align="center"
       css={{
-        px: theme.spacing[9],
-        my: theme.spacing[3],
-        height: theme.spacing[13],
+        p: theme.panel.padding,
+        pb: 0,
         color: theme.colors.foregroundSubtle,
       }}
     >
@@ -88,14 +86,12 @@ export const Inspector = ({ navigatorLayout }: InspectorProps) => {
 
   if (selectedInstance === undefined) {
     return (
-      <Box css={{ p: theme.spacing[5], flexBasis: "100%" }}>
+      <Flex css={{ p: theme.spacing[9] }}>
         {/* @todo: use this space for something more usefull: a-la figma's no instance selected sate, maybe create an issue with a more specific proposal? */}
-        <Card
-          css={{ p: theme.spacing[9], mt: theme.spacing[9], width: "100%" }}
-        >
+        <Card css={{ p: theme.spacing[9], width: "100%" }}>
           <Text>Select an instance on the canvas</Text>
         </Card>
-      </Box>
+      </Flex>
     );
   }
 
@@ -183,9 +179,8 @@ export const Inspector = ({ navigatorLayout }: InspectorProps) => {
                 <ScrollArea>
                   <InstanceInfo instance={selectedInstance} />
                   <SettingsPanelContainer
-                    key={
-                      selectedInstance.id /* Re-render when instance changes */
-                    }
+                    // Re-render when instance changes
+                    key={selectedInstance.id}
                     selectedInstance={selectedInstance}
                   />
                 </ScrollArea>

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

@@ -71,7 +71,7 @@ export const ProjectSettingsView = ({
                       css={{
                         position: "relative",
                         height: theme.spacing[13],
-                        px: theme.spacing[9],
+                        paddingInline: theme.panel.paddingInline,
                         outline: "none",
                         "&:focus-visible, &:hover": {
                           background: theme.colors.backgroundHover,
@@ -93,7 +93,7 @@ export const ProjectSettingsView = ({
             </Flex>
           </List>
           <ScrollArea>
-            <Grid gap={2} css={{ my: theme.spacing[5] }}>
+            <Grid gap={2} css={{ py: theme.spacing[5] }}>
               {currentSection === "general" && <SectionGeneral />}
               {currentSection === "redirects" && <SectionRedirects />}
               {currentSection === "publish" && <SectionPublish />}

apps/builder/app/builder/features/project-settings/utils.ts

@@ -3,6 +3,5 @@ import { theme, type CSS } from "@webstudio-is/design-system";
 export const leftPanelWidth = theme.spacing[26];
 export const rightPanelWidth = theme.spacing[35];
 export const sectionSpacing: CSS = {
-  mx: theme.spacing[5],
-  px: theme.spacing[5],
+  paddingInline: theme.panel.paddingInline,
 };

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

@@ -3,11 +3,13 @@ import { SettingsSection } from "./settings-section";
 import { PropsSectionContainer } from "./props-section/props-section";
 import { VariablesSection } from "./variables-section";
 import {
+  Box,
   Flex,
   Link,
   PanelBanner,
   Text,
   rawTheme,
+  theme,
 } from "@webstudio-is/design-system";
 import { UpgradeIcon } from "@webstudio-is/icons";
 import { useStore } from "@nanostores/react";
@@ -21,7 +23,7 @@ export const SettingsPanelContainer = ({
 }) => {
   const { allowDynamicData } = useStore($userPlanFeatures);
   return (
-    <>
+    <Box css={{ pt: theme.spacing[5] }}>
       <SettingsSection />
       <PropsSectionContainer selectedInstance={selectedInstance} />
       <VariablesSection />
@@ -50,6 +52,6 @@ export const SettingsPanelContainer = ({
           </Flex>
         </PanelBanner>
       )}
-    </>
+    </Box>
   );
 };

apps/builder/app/builder/features/settings-panel/settings-section.tsx

@@ -30,12 +30,12 @@ export const SettingsSection = () => {
   });
 
   if (selectedInstance === undefined) {
-    return null;
+    return;
   }
 
   const meta = metas.get(selectedInstance.component);
   if (meta === undefined) {
-    return null;
+    return;
   }
   const placeholder = getInstanceLabel(selectedInstance, meta);
 

apps/builder/app/builder/features/settings-panel/shared.tsx

@@ -266,7 +266,7 @@ export const HorizontalLayout = ({
       gridTemplateColumns: deletable
         ? `${theme.spacing[19]} 1fr max-content`
         : `${theme.spacing[19]} 1fr`,
-      minHeight: theme.spacing[13],
+      minHeight: theme.spacing[12],
     }}
     align="center"
     gap="2"
@@ -303,7 +303,10 @@ export const Row = ({
   children,
   css,
 }: Pick<ComponentProps<typeof Flex>, "css" | "children">) => (
-  <Flex css={{ px: theme.spacing[9], ...css }} direction="column">
+  <Flex
+    css={{ paddingInline: theme.panel.paddingInline, ...css }}
+    direction="column"
+  >
     {children}
   </Flex>
 );