feat: make loading screen background dark (#4449)

## Description

A better looking loading screen

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

Author: kof

apps/builder/app/builder/builder.css

@@ -6,6 +6,11 @@ body {
   overflow: hidden;
   overscroll-behavior: contain;
   -webkit-font-smoothing: antialiased;
+  /* 
+    This is the top bar and loading screen color (--colors-backgroundTopbar).
+    We are setting it to avoid a white screen flash when opening project from the dashboard.
+   */
+  background-color: #2d2d2d;
 }
 
 [data-radix-scroll-area-viewport] {

apps/builder/app/builder/builder.tsx

@@ -104,7 +104,7 @@ const SidePanel = ({
         fg: 0,
         // Left sidebar tabs won't be able to pop out to the right if we set overflowX to auto.
         //overflowY: "auto",
-        bc: theme.colors.backgroundPanel,
+        backgroundColor: theme.colors.backgroundPanel,
         height: "100%",
         ...css,
       }}
@@ -413,7 +413,6 @@ export const Builder = ({
                     ? false
                     : true
                 }
-                backgroundColor={theme.colors.backgroundTopbar}
               />
             }
           />

apps/builder/app/builder/shared/loading.tsx

@@ -5,11 +5,9 @@ import { useInterval } from "~/shared/hook-utils/use-interval";
 
 export const LoadingBackground = ({
   show,
-  backgroundColor,
   onTransitionEnd,
 }: {
   show: boolean;
-  backgroundColor: string;
   onTransitionEnd?: () => void;
 }) => {
   const [transitionEnded, setTransitionEnded] = useState(false);
@@ -26,7 +24,7 @@ export const LoadingBackground = ({
         transitionDuration: "300ms",
         pointerEvents: "none",
         transitionProperty: "opacity",
-        backgroundColor,
+        backgroundColor: theme.colors.backgroundTopbar,
         opacity: show ? 1 : 0,
         isolation: "isolate",
       }}
@@ -83,7 +81,6 @@ export const Loading = ({ state }: { state: LoadingState }) => {
     >
       <LoadingBackground
         show={state.state !== "ready"}
-        backgroundColor={theme.colors.backgroundCanvas}
         onTransitionEnd={() => {
           setTransitionEnded(true);
         }}
@@ -96,10 +93,7 @@ export const Loading = ({ state }: { state: LoadingState }) => {
           gap="3"
           css={{ isolation: "isolate" }}
         >
-          <WebstudioIcon
-            size={60}
-            style={{ filter: "drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.7))" }}
-          />
+          <WebstudioIcon size={60} />
           <Progress value={fakeProgress} />
         </Flex>
       )}

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

@@ -104,7 +104,7 @@ export const SidebarTabsContent = styled(TabsContent, {
   top: 0,
   left: "100%",
   height: "100%",
-  bc: theme.colors.backgroundPanel,
+  backgroundColor: theme.colors.backgroundPanel,
   outline: "none",
   // Drawing border this way to ensure content still has full width, avoid subpixels and give layout round numbers
   "&::after": {

apps/builder/app/dashboard/header.tsx

@@ -27,7 +27,7 @@ import type { UserPlanFeatures } from "~/shared/db/user-plan-features.server";
 
 const containerStyle = css({
   px: theme.spacing[13],
-  bc: theme.colors.backgroundPanel,
+  backgroundColor: theme.colors.backgroundPanel,
   height: theme.spacing[15],
   boxShadow: theme.shadows.brandElevationBig,
 });

packages/design-system/src/components/list-position-indicator.tsx

@@ -27,7 +27,7 @@ const CircleOutline = styled(Box, {
   left: -CIRCLE_SIZE / 2 - OUTLINE_WIDTH,
   borderRadius: "50%",
   pointerEvents: "none",
-  bc: theme.colors.borderContrast,
+  backgroundColor: theme.colors.borderContrast,
 });
 
 const Circle = styled(Box, {