diff --git a/apps/builder/app/builder/features/breakpoints/breakpoints-selector.tsx b/apps/builder/app/builder/features/breakpoints/breakpoints-selector.tsx
index 964ec31..f40d7f1 100644
--- a/apps/builder/app/builder/features/breakpoints/breakpoints-selector.tsx
+++ b/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 = ({
{breakpoint.minWidth}
) : breakpoint.maxWidth ? (
{breakpoint.maxWidth}
- ) : breakpointSelected ? (
-
) : (
-
+
)}
diff --git a/apps/builder/app/builder/features/inspector/inspector.tsx b/apps/builder/app/builder/features/inspector/inspector.tsx
index 56efbb2..3ac8cbd 100644
--- a/apps/builder/app/builder/features/inspector/inspector.tsx
+++ b/apps/builder/app/builder/features/inspector/inspector.tsx
@@ -83,7 +83,7 @@ export const Inspector = ({ publish, navigatorLayout }: InspectorProps) => {
- Select an instance on the canvas
+ Select an instance on the canvas
);
diff --git a/apps/builder/app/builder/features/style-panel/shared/color-picker.tsx b/apps/builder/app/builder/features/style-panel/shared/color-picker.tsx
index 39714da..56bd17d 100644
--- a/apps/builder/app/builder/features/style-panel/shared/color-picker.tsx
+++ b/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`,
},
});
diff --git a/apps/builder/app/builder/features/style-panel/style-panel.tsx b/apps/builder/app/builder/features/style-panel/style-panel.tsx
index b771cf6..ff1c73c 100644
--- a/apps/builder/app/builder/features/style-panel/style-panel.tsx
+++ b/apps/builder/app/builder/features/style-panel/style-panel.tsx
@@ -39,7 +39,7 @@ export const StylePanel = ({ selectedInstance, publish }: StylePanelProps) => {
return (
- Select an instance on the canvas
+ Select an instance on the canvas
);
@@ -53,7 +53,11 @@ export const StylePanel = ({ selectedInstance, publish }: StylePanelProps) => {
pb: theme.spacing[9],
}}
>
-
+
Style Sources
diff --git a/apps/builder/app/builder/features/topbar/menu/menu-button.tsx b/apps/builder/app/builder/features/topbar/menu/menu-button.tsx
index de06356..f545060 100644
--- a/apps/builder/app/builder/features/topbar/menu/menu-button.tsx
+++ b/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"
>
-
+
diff --git a/apps/builder/app/builder/features/topbar/topbar.tsx b/apps/builder/app/builder/features/topbar/topbar.tsx
index 280e90b..133f967 100644
--- a/apps/builder/app/builder/features/topbar/topbar.tsx
+++ b/apps/builder/app/builder/features/topbar/topbar.tsx
@@ -63,8 +63,8 @@ export const Topbar = ({ gridArea, project, publish }: TopbarProps) => {
{
padding: theme.spacing[3],
borderRadius: theme.borderRadius[3],
gap: theme.spacing[3],
+ color: theme.colors.foregroundMain,
}}
>
{page?.name ?? ""}
-
+
diff --git a/apps/builder/app/shared/breakpoints/get-breakpoint-icon.tsx b/apps/builder/app/shared/breakpoints/get-breakpoint-icon.tsx
index f577f27..1393532 100644
--- a/apps/builder/app/shared/breakpoints/get-breakpoint-icon.tsx
+++ b/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 ? (
-
- ) : (
-
+ return (
+
);
}
if (breakpoint.maxWidth === mobileLandscapeBreakpoint) {
- return breakpoint.isSelected ? (
-
- ) : (
-
+ return (
+
);
}
if (breakpoint.maxWidth === mobilePortraitBreakpoint) {
- return breakpoint.isSelected ? (
-
- ) : (
-
+ return (
+
);
}
diff --git a/packages/design-system/src/components/__DEPRECATED__/text-field.tsx b/packages/design-system/src/components/__DEPRECATED__/text-field.tsx
index faa4180..8ead4ee 100644
--- a/packages/design-system/src/components/__DEPRECATED__/text-field.tsx
+++ b/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"),
},
diff --git a/packages/design-system/src/components/card.tsx b/packages/design-system/src/components/card.tsx
index 66ec25a..69e295e 100644
--- a/packages/design-system/src/components/card.tsx
+++ b/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",
},
diff --git a/packages/design-system/src/components/menu.tsx b/packages/design-system/src/components/menu.tsx
index b9dd788..13ad0dc 100644
--- a/packages/design-system/src/components/menu.tsx
+++ b/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> = {
// 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 = () => (
diff --git a/packages/design-system/src/components/panel-tabs.tsx b/packages/design-system/src/components/panel-tabs.tsx
index 7a51ffc..093cb2e 100644
--- a/packages/design-system/src/components/panel-tabs.tsx
+++ b/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],
diff --git a/packages/design-system/src/components/popover.tsx b/packages/design-system/src/components/popover.tsx
index 790159f..e3fc6bc 100644
--- a/packages/design-system/src/components/popover.tsx
+++ b/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 = () => (
diff --git a/packages/design-system/src/stitches.config.ts b/packages/design-system/src/stitches.config.ts
index 8730e9c..edebc9a 100644
--- a/packages/design-system/src/stitches.config.ts
+++ b/packages/design-system/src/stitches.config.ts
@@ -499,12 +499,192 @@ export const darkTheme = createTheme({
muted: "$slate8",
primary: "$blue10",
canvas: "hsl(0 0% 15%)",
- panel: "$slate3",
+ panel: "$slate2",
+ backgroundPanel: "$slate2",
+ backgroundMenu: "$slate2",
+ backgroundControls: "$slate3",
+ backgroundPresetMain: "$slate5",
+ backgroundHover: "$slate6",
+ backgroundCanvas: "$slate5",
+ borderMain: "$slate5",
+ borderNeutral: "$slate4",
+ backgroundNeutralMain: "$slate4",
+ foregroundMain: "$slate11",
+ backgroundItemMenuItemHover: "$slate6",
panelOutline: "hsl(0deg 0% 100% / 10%)",
transparentPanel: "hsl(0 100% 100% / 97%)",
shadowLight: "hsl(206 22% 7% / 35%)",
shadowDark: "hsl(206 22% 7% / 20%)",
background: "$slate12",
text: "$slate1",
+ foregroundFlexUiMain: "$slate9",
+ backgroundPresetHover: "$slate6",
+ backgroundSpacingLeftRight: "$slate4",
+ backgroundSpacingHover: "$slate6",
+ foregroundIconMain: "$slate11",
+ backgroundLocalMain: "$blueA6",
+ backgroundLocalHover: "$blue4",
+ borderLocalMain: "$slate6",
+ foregroundLocalMain: "$blueA11",
+ foregroundRemoteMain: "$orangeA11",
+ backgroundRemoteMain: "$orangeA3",
+ borderRemoteMain: "$orange4",
+ backgroundButtonDisabled: "$slate8",
+
+ // TODO: (#Webtir) The following are the default colors for the light mode
+ // The ones that are commented out are adjusted to satisfy the dark mode
+ // Other ones have to be adjusted as well
+ white: "#ffffff",
+ black: "#000000",
+ //backgroundPanel: "#f8f8f8",
+ backgroundPrimary: "#096cff",
+ //backgroundHover: "#dfe3e6",
+ backgroundActive: "#096cff",
+ //backgroundMenu: "#ededed",
+ //backgroundControls: "#ffffff",
+ backgroundAssetcardHover: "#e6e8eb",
+ //backgroundNeutralMain: "#d7dbdf",
+ backgroundNeutralAccent: "#11181c",
+ backgroundNeutralNotification: "#ffffff",
+ backgroundNeutralDark: "#7e868c",
+ backgroundDestructiveMain: "#dc2929",
+ backgroundDestructiveNotification: "#ffefef",
+ backgroundSuccessMain: "#00894a",
+ backgroundSuccessNotification: "#e9f9ee",
+ backgroundAlertMain: "#f5d90a",
+ backgroundAlertNotification: "#fffbd1",
+ backgroundInfoMain: "#0175dc",
+ backgroundInfoNotification: "#edf6ff",
+ //backgroundPresetMain: "#e6e8eb",
+ //backgroundPresetHover: "#dfe3e6",
+ //backgroundLocalMain: "#e1f0ff",
+ //backgroundLocalHover: "#cee7fe",
+ //backgroundRemoteMain: "#ffe8d7",
+ backgroundRemoteHover: "#ffdcc3",
+ backgroundInputSelected: "#b7d9f8",
+ backgroundInputDisabled: "#f8f8f8",
+ backgroundInputHighlight: "#b7d9f8",
+ backgroundButtonHover: "#ffffff17",
+ backgroundButtonPressed: "#0000001c",
+ //backgroundButtonDisabled: "#e9ebed",
+ backgroundItemCurrent: "#096cff",
+ backgroundItemCurrentChild: "#e1f0ff",
+ backgroundItemCurrentHidden: "#7e868c",
+ //backgroundItemMenuItemHover: "#d3d3d3",
+ backgroundTooltipMain: "#11181c",
+ backgroundTooltipBuilder: "#ffffff",
+ backgroundTooltipDesigner: "#ffffff",
+ backgroundSpacingTopBottom: "#f1f3f5",
+ //backgroundSpacingLeftRight: "#f1f3f5",
+ //backgroundSpacingHover: "#d7dbdf",
+ backgroundStyleSourceToken: "#096cff",
+ backgroundStyleSourceTag: "#d54113",
+ backgroundStyleSourceState: "#00894a",
+ backgroundStyleSourceNeutral: "#687076",
+ backgroundStyleSourceDisabled: "#9da2a6",
+ backgroundStyleSourceGradientToken:
+ "linear-gradient(90deg, #096cff00 0%, #096cff 31.87%)",
+ backgroundStyleSourceGradientTag:
+ "linear-gradient(90deg, #d5411300 0%, #d54113 31.87%)",
+ backgroundStyleSourceGradientUnselected:
+ "linear-gradient(90deg, #68707600 0%, #687076 31.87%)",
+ backgroundStyleSourceBreakpoint: "#bd2fdb",
+ //backgroundCanvas: "#c7c7c7",
+ backgroundTopbar: "#2d2d2d",
+ backgroundGradientPrimary:
+ "linear-gradient(135deg, #1774ff 0%, #bd2fdb 100%)",
+ backgroundGradientVertical:
+ "linear-gradient(180deg, #096cff 0%, #096cff 0.01%, #bd2fdb 100%)",
+ backgroundGradientHorizontal:
+ "linear-gradient(90deg, #4a4efa 0%, #bd2fdb 100%)",
+ backgroundGradientHorizontalReverse:
+ "linear-gradient(90deg, #bd2fdb 0%, #4a4efa 100%)",
+ backgroundMenuHint: "#dedede",
+ backgroundTopbarHover: "#383838",
+ backgroundWorkspace: "#a9a9a9",
+ backgroundIconSubtle: "#3e3e3e",
+ backgroundPrimaryLight: "#2e82ff",
+ backgroundOverwrittenMain: "#ffd9d9",
+ backgroundOverwrittenHover: "#fec4c4",
+ brandBackgroundProjectCardFront:
+ "linear-gradient(0deg, #fbf8ff 0%, #e2e2e2 100%)",
+ brandBackgroundProjectCardBack:
+ "linear-gradient(0deg, #fbf8ff 0%, #c7c7c7 100%)",
+ brandBackgroundProjectCardTextArea: "#ffffff",
+ brandBackgroundPublishedMain: "#39fbbb",
+ brandBackgroundGradient:
+ "linear-gradient(180deg, #e63cfe 0%, #ffae3c 100%)",
+ brandBackgroundPublishedContrast: "#ebfffc",
+ brandBackgroundDashboard: "#ededed",
+ brandBackgroundRegularButtonSelected:
+ "linear-gradient(180deg, #bffeec 0%, #fbfff6 100%)",
+ brandBackgroundCtaButton:
+ "linear-gradient(135deg, #4a4efa 0%, #bd2fdb 100%)",
+ brandForegroundPublished: "#00894a",
+ brandBorderPublished: "#ebfffc",
+ brandBorderFullGradient:
+ "linear-gradient(135deg, #92fddc 0%, #7d7ffb 31.94%, #ed72fe 64.24%, #fdd791 100%)",
+ brandBorderNavbar:
+ "linear-gradient(90deg, #39fbbb00 0%, #39fbbb 20%, #4a4efa 40.03%, #e63cfe 60.02%, #ffae3c 80.04%, #ffae3c00 100%, #ffae3c00 100%)",
+ brandSpinnerTurquoise: "#39fbbb",
+ brandSpinnerBlue: "#4a4efa",
+ brandSpinnerPurple: "#e63cfe",
+ brandSpinnerOrange: "#ffae3c",
+ //borderMain: "#c1c8cd",
+ borderFocus: "#096cff",
+ borderMenuInner: "#fcfcfc",
+ borderColorSwatch: "#687076",
+ //borderNeutral: "#e8e8e8",
+ borderSuccess: "#00894a",
+ borderAlert: "#e2c802",
+ borderInfo: "#096cff",
+ borderContrast: "#ffffff",
+ borderItemChildLine: "#889096",
+ borderItemChildLineCurrent: "#96c7f2",
+ //borderLocalMain: "#b7d9f8",
+ borderLocalFlexUi: "#096cff",
+ //borderRemoteMain: "#fbc69f",
+ borderRemoteFlexUi: "#fa934e",
+ borderDestructiveMain: "#d13a3a",
+ borderDestructiveNotification: "#f9c6c6",
+ borderDark: "#595c5d",
+ borderOverwrittenMain: "#fdaaab",
+ borderOverwrittenFlexUi: "#dc3d43",
+ borderPrimary: "#096cff",
+ //foregroundMain: "#11181c",
+ foregroundSubtle: "#707375",
+ foregroundCategoryLabel: "#889096",
+ foregroundTextSubtle: "#687076",
+ foregroundDestructive: "#d13a3a",
+ foregroundSuccess: "#00b661",
+ foregroundInfo: "#096cff",
+ foregroundDisabled: "#c1c8cd",
+ foregroundHiddenItem: "#7e868c",
+ //foregroundFlexUiMain: "#c7c7c7",
+ foregroundFlexUiHover: "#96c7f2",
+ foregroundContrastMain: "#ffffff",
+ foregroundContrastSubtle: "#c1c8cd",
+ //foregroundLocalMain: "#016ccc",
+ foregroundLocalFlexUi: "#237cff",
+ //foregroundRemoteMain: "#b74900",
+ foregroundRemoteFlexUi: "#fa934e",
+ foregroundTextMoreSubtle: "#8d949a",
+ foregroundPrimary: "#096cff",
+ foregroundSuccessText: "#008447",
+ foregroundGridControlsDot: "#c7c7c7",
+ foregroundGridControlsDotHover: "#707375",
+ foregroundGridControlsFlexHover: "#96c7f2",
+ // foregroundIconSecondary: "#c1c8cd",
+ // foregroundIconMain: "#11181c",
+ foregroundMoreSubtle: "#adb1b4",
+ foregroundScrollBar: "#a7acaf99",
+ foregroundOverwrittenMain: "#bf0007",
+ foregroundOverwrittenFlexUi: "#dc3d43",
+ foregroundInversePrimary: "#ff22ae",
+ maintenanceLight: "#ededed",
+ maintenanceMedium: "#c7c7c7",
+ maintenanceDark: "#858585",
+ maintenanceSpacerViz: "#f9c6c6",
+ backgrondMenuHint: "#dedede",
},
});
diff --git a/packages/icons/icons/smartphone-subtle.svg b/packages/icons/icons/smartphone-subtle.svg
deleted file mode 100644
index 07370c9..0000000
--- a/packages/icons/icons/smartphone-subtle.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/packages/icons/icons/smartphone.svg b/packages/icons/icons/smartphone.svg
index 32d1d20..90af60d 100644
--- a/packages/icons/icons/smartphone.svg
+++ b/packages/icons/icons/smartphone.svg
@@ -1,4 +1,4 @@
-