Adjust dark mode colors

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

@@ -1,12 +1,13 @@
 import {
   EnhancedTooltip,
   Text,
+  theme,
   Toolbar,
   ToolbarToggleGroup,
   ToolbarToggleItem,
 } from "@webstudio-is/design-system";
 import { useRef } from "react";
-import { StarIcon, StarSubtleIcon } from "@webstudio-is/icons";
+import { StarIcon } from "@webstudio-is/icons";
 import { useSetInitialCanvasWidth } from ".";
 import { selectedBreakpointIdStore } from "~/shared/nano-states";
 import { groupBreakpoints, isBaseBreakpoint } from "~/shared/breakpoints";
@@ -103,10 +104,16 @@ export const BreakpointsSelector = ({
                     <Text color="subtle">{breakpoint.minWidth}</Text>
                   ) : breakpoint.maxWidth ? (
                     <Text color="subtle">{breakpoint.maxWidth}</Text>
-                  ) : breakpointSelected ? (
-                    <StarIcon size={16} fill="none" />
                   ) : (
-                    <StarSubtleIcon size={16} fill="none" />
+                    <StarIcon
+                      size={16}
+                      fill="none"
+                      style={{
+                        color: breakpointSelected
+                          ? theme.colors.foregroundMain
+                          : theme.colors.foregroundSubtle,
+                      }}
+                    />
                   )}
                 </ToolbarToggleItem>
               </EnhancedTooltip>

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

@@ -83,7 +83,7 @@ export const Inspector = ({ publish, navigatorLayout }: InspectorProps) => {
         <Card
           css={{ p: theme.spacing[9], mt: theme.spacing[9], width: "100%" }}
         >
-          <Text>Select an instance on the canvas</Text>
+          <Text color="main">Select an instance on the canvas</Text>
         </Card>
       </Box>
     );

apps/builder/app/builder/features/style-panel/shared/color-picker.tsx

@@ -29,12 +29,19 @@ extend([namesPlugin]);
 
 const pickerStyle = css({
   padding: theme.spacing[5],
-  background: theme.colors.panel,
+  background: theme.colors.backgroundMenu,
   // @todo this lib doesn't have another way to define styles for inputs
   // we should either submit a PR or replace it
+  boxShadow: "none !important",
   "& input": {
     color: theme.colors.hiContrast,
     background: theme.colors.loContrast,
+    // TODO: (#Webtir) Get rid of "!important" in attributes below
+    border: `1px solid ${theme.colors.borderNeutral} !important`,
+    boxShadow: "none !important",
+  },
+  "& label": {
+    color: `${theme.colors.foregroundMain} !important`,
   },
 });
 

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

@@ -39,7 +39,7 @@ export const StylePanel = ({ selectedInstance, publish }: StylePanelProps) => {
     return (
       <Box css={{ p: theme.spacing[5] }}>
         <Card css={{ p: theme.spacing[9], width: "100%" }}>
-          <Text>Select an instance on the canvas</Text>
+          <Text color="main">Select an instance on the canvas</Text>
         </Card>
       </Box>
     );
@@ -53,7 +53,11 @@ export const StylePanel = ({ selectedInstance, publish }: StylePanelProps) => {
           pb: theme.spacing[9],
         }}
       >
-        <Text css={{ py: theme.spacing[7] }} variant="labelsTitleCase">
+        <Text
+          css={{ py: theme.spacing[7] }}
+          variant="labelsTitleCase"
+          color="main"
+        >
           Style Sources
         </Text>
         <StyleSourcesSection />

apps/builder/app/builder/features/topbar/menu/menu-button.tsx

@@ -3,6 +3,7 @@ import {
   css,
   DropdownMenuTrigger,
   rawTheme,
+  theme,
   toggleItemStyle,
 } from "@webstudio-is/design-system";
 import { HamburgerMenuIcon, WebtirIcon } from "@webstudio-is/icons";
@@ -25,6 +26,7 @@ const innerContainerStyle = css({
   transformStyle: "preserve-3d",
   transition: "transform 200ms",
   transform: cssVars.use(containerTransformVar),
+  color: theme.colors.foregroundMain,
 });
 
 const faceStyle = css({
@@ -55,7 +57,10 @@ export const MenuButton = () => {
       aria-label="Menu Button"
     >
       <span className={innerContainerStyle()}>
-        <span className={faceStyle({ front: true })}>
+        <span
+          className={faceStyle({ front: true })}
+          color={theme.colors.foregroundMain}
+        >
           <WebtirIcon width="22" height="22" />
         </span>
         <span className={faceStyle({ back: true })}>

apps/builder/app/builder/features/topbar/topbar.tsx

@@ -63,8 +63,8 @@ export const Topbar = ({ gridArea, project, publish }: TopbarProps) => {
         <Flex
           css={{
             px: theme.spacing[9],
-            // TODO: (#Webtir) Add #F0F0F0 to the color palette
-            backgroundColor: "#F0F0F0",
+            // TODO: (#Webtir) Would be better to use a variable
+            backgroundColor: "$slate4",
             margin: theme.spacing[3],
             padding: theme.spacing[3],
             borderRadius: theme.borderRadius[3],
@@ -77,12 +77,13 @@ export const Topbar = ({ gridArea, project, publish }: TopbarProps) => {
               padding: theme.spacing[3],
               borderRadius: theme.borderRadius[3],
               gap: theme.spacing[3],
+              color: theme.colors.foregroundMain,
             }}
           >
             <Text variant="labelsTitleCase" color="main" truncate>
               {page?.name ?? ""}
             </Text>
-            <CopyIcon color="black" />
+            <CopyIcon />
           </Flex>
           <BreakpointsPopover />
         </Flex>

apps/builder/app/shared/breakpoints/get-breakpoint-icon.tsx

@@ -1,9 +1,5 @@
-import {
-  SmartphoneIcon,
-  SmartphoneSubtleIcon,
-  TabletIcon,
-  TabletSubtleIcon,
-} from "@webstudio-is/icons";
+import { SmartphoneIcon, TabletIcon } from "@webstudio-is/icons";
+import { theme } from "@webstudio-is/design-system";
 
 export const getBreakpointIcon = (breakpoint: {
   maxWidth?: number;
@@ -18,26 +14,40 @@ export const getBreakpointIcon = (breakpoint: {
   const tabletBreakpoint = 991;
 
   if (breakpoint.maxWidth === tabletBreakpoint) {
-    return breakpoint.isSelected ? (
-      <TabletIcon fill="none" size={16} />
-    ) : (
-      <TabletSubtleIcon fill="none" size={16} />
+    return (
+      <TabletIcon
+        size={16}
+        style={{
+          color: breakpoint.isSelected
+            ? theme.colors.foregroundMain
+            : theme.colors.foregroundSubtle,
+        }}
+      />
     );
   }
 
   if (breakpoint.maxWidth === mobileLandscapeBreakpoint) {
-    return breakpoint.isSelected ? (
-      <TabletIcon fill="none" transform="rotate(90 0 0)" />
-    ) : (
-      <TabletSubtleIcon fill="none" transform="rotate(90 0 0)" />
+    return (
+      <TabletIcon
+        transform="rotate(90 0 0)"
+        style={{
+          color: breakpoint.isSelected
+            ? theme.colors.foregroundMain
+            : theme.colors.foregroundSubtle,
+        }}
+      />
     );
   }
 
   if (breakpoint.maxWidth === mobilePortraitBreakpoint) {
-    return breakpoint.isSelected ? (
-      <SmartphoneIcon fill="none" />
-    ) : (
-      <SmartphoneSubtleIcon fill="none" />
+    return (
+      <SmartphoneIcon
+        style={{
+          color: breakpoint.isSelected
+            ? theme.colors.foregroundMain
+            : theme.colors.foregroundSubtle,
+        }}
+      />
     );
   }
 

packages/design-system/src/components/__DEPRECATED__/text-field.tsx

@@ -25,7 +25,7 @@ const getTextFieldSuffixCssVars = (state: "focus" | "hover") => {
 
   return {
     [backgroundColorVar]: theme.colors.slate7,
-    [colorVar]: theme.colors.hiContrast,
+    [colorVar]: theme.colors.foregroundMain,
   };
 };
 
@@ -48,11 +48,11 @@ export const DeprecatedTextFieldInput = styled("input", {
   // Reset
   appearance: "none",
   borderWidth: "0",
-  backgroundColor: "transparent",
+  backgroundColor: theme.colors.backgroundControls,
   boxSizing: "border-box",
   fontFamily: "inherit",
   fontSize: "inherit",
-  color: "inherit",
+  color: theme.colors.foregroundMain,
   padding: "0",
   height: theme.spacing[9],
   flexGrow: 1,
@@ -110,7 +110,7 @@ export const DeprecatedTextFieldContainer = styled("div", {
   flexWrap: "wrap",
   alignItems: "center",
   backgroundColor: theme.colors.backgroundControls,
-  boxShadow: `inset 0 0 0 1px ${theme.colors.slate7}`,
+  border: `solid 1px ${theme.colors.borderNeutral}`,
   color: theme.colors.hiContrast,
   fontVariantNumeric: "tabular-nums",
   gap: theme.spacing[3],
@@ -129,7 +129,7 @@ export const DeprecatedTextFieldContainer = styled("div", {
     backgroundColor: theme.colors.slate2,
   },
   "&:has(input:read-only)": {
-    backgroundColor: "transparent",
+    backgroundColor: theme.colors.backgroundControls,
     "&:focus": {
       boxShadow: `inset 0px 0px 0px 1px ${theme.colors.borderNeutral}`,
     },
@@ -156,6 +156,7 @@ export const DeprecatedTextFieldContainer = styled("div", {
         },
       },
       button: {
+        color: theme.colors.foregroundSubtle,
         "&:hover": getTextFieldSuffixCssVars("hover"),
         "&:focus-within": getTextFieldSuffixCssVars("focus"),
       },

packages/design-system/src/components/card.tsx

@@ -27,7 +27,7 @@ export const Card = styled("div", {
     right: 0,
     bottom: 0,
     left: 0,
-    boxShadow: "inset 0 0 0 1px rgba(0,0,0,.1)",
+    boxShadow: `inset 0 0 0 1px ${theme.colors.slate5}`,
     borderRadius: theme.borderRadius[7],
     pointerEvents: "none",
   },

packages/design-system/src/components/menu.tsx

@@ -80,6 +80,7 @@ export const MenuItemButton = styled("button", menuItemCss, {
   border: "none",
   boxSizing: "border-box",
   width: `calc(100% - ${itemMargin} * 2)`,
+  backgroundColor: "unset",
   "&:focus:not(:focus-visible)": { backgroundColor: "unset" },
   "&:hover:not([diabled])": {
     backgroundColor: theme.colors.backgroundItemMenuItemHover,
@@ -100,7 +101,7 @@ export const menuCss = css({
   borderRadius: theme.borderRadius[6],
   backgroundColor: theme.colors.backgroundMenu,
   border: `1px solid ${theme.colors.borderMain}`,
-  boxShadow: `${theme.shadows.menuDropShadow}, inset 0 0 0 1px ${theme.colors.borderMenuInner}`,
+  boxShadow: `${theme.shadows.menuDropShadow}, inset 0 0 0 1px ${theme.colors.borderNeutral}`,
   padding: `${menuPadding} 0`,
   variants: {
     width: {
@@ -124,7 +125,7 @@ export const subContentProps: Partial<ComponentProps<typeof SubContent>> = {
 // Arrow is hard to implement with just CSS,
 // so we implement it as a component
 const ArrowBackground = styled("path", { fill: theme.colors.backgroundMenu });
-const ArrowInnerBorder = styled("path", { fill: theme.colors.borderMenuInner });
+const ArrowInnerBorder = styled("path", { fill: theme.colors.borderNeutral });
 const ArrowOuterBorder = styled("path", { fill: theme.colors.borderMain });
 const ArrowSgv = styled("svg", { transform: "translateY(-3px)" });
 export const DropdownMenuArrow = () => (

packages/design-system/src/components/panel-tabs.tsx

@@ -19,8 +19,8 @@ export const PanelTabsList = styled(Primitive.List, {
   paddingTop: theme.spacing[3],
   paddingBottom: theme.spacing[3],
   px: theme.spacing[9],
-  // TODO: (#Webtir) Add #F0F0F0 to the color palette
-  backgroundColor: "#F0F0F0",
+  // TODO: (#Webtir) Would be better to use a variable
+  backgroundColor: "$slate4",
   margin: theme.spacing[3],
   padding: theme.spacing[3],
   borderRadius: theme.borderRadius[3],

packages/design-system/src/components/popover.tsx

@@ -9,7 +9,7 @@ export const PopoverPortal = Primitive.Portal;
 
 const contentStyle = css({
   border: `1px solid ${theme.colors.borderMain}`,
-  boxShadow: `${theme.shadows.menuDropShadow}, inset 0 0 0 1px ${theme.colors.borderMenuInner}`,
+  boxShadow: `${theme.shadows.menuDropShadow}, inset 0 0 0 1px ${theme.colors.borderNeutral}`,
   background: theme.colors.backgroundMenu,
   borderRadius: theme.borderRadius[6],
   padding: `${theme.spacing[5]} 0`,
@@ -23,7 +23,7 @@ const contentStyle = css({
 });
 
 const ArrowBackground = styled("path", { fill: theme.colors.backgroundMenu });
-const ArrowInnerBorder = styled("path", { fill: theme.colors.borderMenuInner });
+const ArrowInnerBorder = styled("path", { fill: theme.colors.borderNeutral });
 const ArrowOuterBorder = styled("path", { fill: theme.colors.borderMain });
 const ArrowSgv = styled("svg", { transform: "translateY(-3px)" });
 const Arrow = () => (