From 591d489958e54665df56f366a0ef9c3b07d1ddb7 Mon Sep 17 00:00:00 2001 From: Kirill Shkuratiuk Date: Tue, 14 Jan 2025 23:50:04 +0100 Subject: [PATCH 1/2] feature/adjust-dark-mode-colors --- .../breakpoints/breakpoints-selector.tsx | 15 +- .../features/topbar/menu/menu-button.tsx | 7 +- .../app/builder/features/topbar/topbar.tsx | 7 +- .../breakpoints/get-breakpoint-icon.tsx | 46 +++-- .../components/__DEPRECATED__/text-field.tsx | 11 +- .../design-system/src/components/menu.tsx | 5 +- .../src/components/panel-tabs.tsx | 4 +- .../design-system/src/components/popover.tsx | 4 +- packages/design-system/src/stitches.config.ts | 168 +++++++++++++++++- packages/icons/icons/smartphone-subtle.svg | 4 - packages/icons/icons/smartphone.svg | 6 +- packages/icons/icons/star-subtle.svg | 3 - packages/icons/icons/star.svg | 2 +- packages/icons/icons/tablet-subtle.svg | 4 - packages/icons/icons/tablet.svg | 6 +- packages/icons/icons/webtir.svg | 4 +- packages/icons/src/__generated__/index.ts | 2 - .../src/__generated__/smartphone-subtle.tsx | 15 -- .../icons/src/__generated__/smartphone.tsx | 2 +- packages/icons/src/__generated__/star.tsx | 2 +- packages/icons/src/__generated__/svg/index.ts | 2 - .../__generated__/svg/smartphone-subtle.ts | 1 - .../icons/src/__generated__/svg/smartphone.ts | 2 +- packages/icons/src/__generated__/svg/star.ts | 2 +- .../src/__generated__/svg/tablet-subtle.ts | 1 - .../icons/src/__generated__/svg/tablet.ts | 2 +- .../icons/src/__generated__/svg/webtir.ts | 2 +- .../icons/src/__generated__/tablet-subtle.tsx | 15 -- packages/icons/src/__generated__/tablet.tsx | 2 +- packages/icons/src/__generated__/webtir.tsx | 2 +- 30 files changed, 246 insertions(+), 102 deletions(-) delete mode 100644 packages/icons/icons/smartphone-subtle.svg delete mode 100644 packages/icons/icons/star-subtle.svg delete mode 100644 packages/icons/icons/tablet-subtle.svg delete mode 100644 packages/icons/src/__generated__/smartphone-subtle.tsx delete mode 100644 packages/icons/src/__generated__/svg/smartphone-subtle.ts delete mode 100644 packages/icons/src/__generated__/svg/tablet-subtle.ts delete mode 100644 packages/icons/src/__generated__/tablet-subtle.tsx 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/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/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..48d9d82 100644 --- a/packages/design-system/src/stitches.config.ts +++ b/packages/design-system/src/stitches.config.ts @@ -499,12 +499,178 @@ 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", + + 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 @@ - - - + + + diff --git a/packages/icons/icons/star-subtle.svg b/packages/icons/icons/star-subtle.svg deleted file mode 100644 index bdf5f86..0000000 --- a/packages/icons/icons/star-subtle.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/icons/icons/star.svg b/packages/icons/icons/star.svg index 8d3892b..e52116a 100644 --- a/packages/icons/icons/star.svg +++ b/packages/icons/icons/star.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/icons/icons/tablet-subtle.svg b/packages/icons/icons/tablet-subtle.svg deleted file mode 100644 index 0872a2b..0000000 --- a/packages/icons/icons/tablet-subtle.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/icons/icons/tablet.svg b/packages/icons/icons/tablet.svg index 0eb520c..4921df6 100644 --- a/packages/icons/icons/tablet.svg +++ b/packages/icons/icons/tablet.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/packages/icons/icons/webtir.svg b/packages/icons/icons/webtir.svg index 18751ae..a5dfadf 100644 --- a/packages/icons/icons/webtir.svg +++ b/packages/icons/icons/webtir.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/src/__generated__/index.ts b/packages/icons/src/__generated__/index.ts index bbcacc5..4ea82c2 100644 --- a/packages/icons/src/__generated__/index.ts +++ b/packages/icons/src/__generated__/index.ts @@ -114,7 +114,6 @@ export * from "./section-link"; export * from "./shrink"; export * from "./slot-component"; export * from "./small-x"; -export * from "./smartphone-subtle"; export * from "./smartphone"; export * from "./spinner"; export * from "./star-subtle"; @@ -122,7 +121,6 @@ export * from "./star"; export * from "./subscript"; export * from "./subtract"; export * from "./superscript"; -export * from "./tablet-subtle"; export * from "./tablet"; export * from "./text-align-left"; export * from "./text-italic"; diff --git a/packages/icons/src/__generated__/smartphone-subtle.tsx b/packages/icons/src/__generated__/smartphone-subtle.tsx deleted file mode 100644 index 6cec5d9..0000000 --- a/packages/icons/src/__generated__/smartphone-subtle.tsx +++ /dev/null @@ -1,15 +0,0 @@ -// Generated from icons/smartphone-subtle.svg - -import { forwardRef } from "react"; -import type { IconProps } from "../types"; - -// prettier-ignore -export const SmartphoneSubtleIcon = forwardRef( - ({ color = "currentColor", size = 16, ...props }, forwardedRef) => { - return ( - - ); - } -); - -SmartphoneSubtleIcon.displayName = "SmartphoneSubtleIcon"; diff --git a/packages/icons/src/__generated__/smartphone.tsx b/packages/icons/src/__generated__/smartphone.tsx index a6e546e..c867e9e 100644 --- a/packages/icons/src/__generated__/smartphone.tsx +++ b/packages/icons/src/__generated__/smartphone.tsx @@ -7,7 +7,7 @@ import type { IconProps } from "../types"; export const SmartphoneIcon = forwardRef( ({ color = "currentColor", size = 16, ...props }, forwardedRef) => { return ( - + ); } ); diff --git a/packages/icons/src/__generated__/star.tsx b/packages/icons/src/__generated__/star.tsx index 8722298..28082dc 100644 --- a/packages/icons/src/__generated__/star.tsx +++ b/packages/icons/src/__generated__/star.tsx @@ -7,7 +7,7 @@ import type { IconProps } from "../types"; export const StarIcon = forwardRef( ({ color = "currentColor", size = 16, ...props }, forwardedRef) => { return ( - + ); } ); diff --git a/packages/icons/src/__generated__/svg/index.ts b/packages/icons/src/__generated__/svg/index.ts index 847daaf..76b4485 100644 --- a/packages/icons/src/__generated__/svg/index.ts +++ b/packages/icons/src/__generated__/svg/index.ts @@ -114,7 +114,6 @@ export { SectionLinkIcon } from "./section-link"; export { ShrinkIcon } from "./shrink"; export { SlotComponentIcon } from "./slot-component"; export { SmallXIcon } from "./small-x"; -export { SmartphoneSubtleIcon } from "./smartphone-subtle"; export { SmartphoneIcon } from "./smartphone"; export { SpinnerIcon } from "./spinner"; export { StarSubtleIcon } from "./star-subtle"; @@ -122,7 +121,6 @@ export { StarIcon } from "./star"; export { SubscriptIcon } from "./subscript"; export { SubtractIcon } from "./subtract"; export { SuperscriptIcon } from "./superscript"; -export { TabletSubtleIcon } from "./tablet-subtle"; export { TabletIcon } from "./tablet"; export { TextAlignLeftIcon } from "./text-align-left"; export { TextItalicIcon } from "./text-italic"; diff --git a/packages/icons/src/__generated__/svg/smartphone-subtle.ts b/packages/icons/src/__generated__/svg/smartphone-subtle.ts deleted file mode 100644 index 910055c..0000000 --- a/packages/icons/src/__generated__/svg/smartphone-subtle.ts +++ /dev/null @@ -1 +0,0 @@ -export const SmartphoneSubtleIcon = ``; diff --git a/packages/icons/src/__generated__/svg/smartphone.ts b/packages/icons/src/__generated__/svg/smartphone.ts index a0a3c5f..ec952df 100644 --- a/packages/icons/src/__generated__/svg/smartphone.ts +++ b/packages/icons/src/__generated__/svg/smartphone.ts @@ -1 +1 @@ -export const SmartphoneIcon = ``; +export const SmartphoneIcon = ``; diff --git a/packages/icons/src/__generated__/svg/star.ts b/packages/icons/src/__generated__/svg/star.ts index f0097a2..5f7cb62 100644 --- a/packages/icons/src/__generated__/svg/star.ts +++ b/packages/icons/src/__generated__/svg/star.ts @@ -1 +1 @@ -export const StarIcon = ``; +export const StarIcon = ``; diff --git a/packages/icons/src/__generated__/svg/tablet-subtle.ts b/packages/icons/src/__generated__/svg/tablet-subtle.ts deleted file mode 100644 index 1de675f..0000000 --- a/packages/icons/src/__generated__/svg/tablet-subtle.ts +++ /dev/null @@ -1 +0,0 @@ -export const TabletSubtleIcon = ``; diff --git a/packages/icons/src/__generated__/svg/tablet.ts b/packages/icons/src/__generated__/svg/tablet.ts index afd956e..b4cd555 100644 --- a/packages/icons/src/__generated__/svg/tablet.ts +++ b/packages/icons/src/__generated__/svg/tablet.ts @@ -1 +1 @@ -export const TabletIcon = ``; +export const TabletIcon = ``; diff --git a/packages/icons/src/__generated__/svg/webtir.ts b/packages/icons/src/__generated__/svg/webtir.ts index 87c7ce5..2f2f3f1 100644 --- a/packages/icons/src/__generated__/svg/webtir.ts +++ b/packages/icons/src/__generated__/svg/webtir.ts @@ -1 +1 @@ -export const WebtirIcon = ``; +export const WebtirIcon = ``; diff --git a/packages/icons/src/__generated__/tablet-subtle.tsx b/packages/icons/src/__generated__/tablet-subtle.tsx deleted file mode 100644 index b319a34..0000000 --- a/packages/icons/src/__generated__/tablet-subtle.tsx +++ /dev/null @@ -1,15 +0,0 @@ -// Generated from icons/tablet-subtle.svg - -import { forwardRef } from "react"; -import type { IconProps } from "../types"; - -// prettier-ignore -export const TabletSubtleIcon = forwardRef( - ({ color = "currentColor", size = 16, ...props }, forwardedRef) => { - return ( - - ); - } -); - -TabletSubtleIcon.displayName = "TabletSubtleIcon"; diff --git a/packages/icons/src/__generated__/tablet.tsx b/packages/icons/src/__generated__/tablet.tsx index c99a781..d613c71 100644 --- a/packages/icons/src/__generated__/tablet.tsx +++ b/packages/icons/src/__generated__/tablet.tsx @@ -7,7 +7,7 @@ import type { IconProps } from "../types"; export const TabletIcon = forwardRef( ({ color = "currentColor", size = 16, ...props }, forwardedRef) => { return ( - + ); } ); diff --git a/packages/icons/src/__generated__/webtir.tsx b/packages/icons/src/__generated__/webtir.tsx index 46ab7c7..14a7652 100644 --- a/packages/icons/src/__generated__/webtir.tsx +++ b/packages/icons/src/__generated__/webtir.tsx @@ -7,7 +7,7 @@ import type { IconProps } from "../types"; export const WebtirIcon = forwardRef( ({ color = "currentColor", size = 16, ...props }, forwardedRef) => { return ( - + ); } ); From b33591134abbe1b9c14392baed442a9e2f43a41c Mon Sep 17 00:00:00 2001 From: Kirill Shkuratiuk Date: Thu, 16 Jan 2025 00:35:41 +0100 Subject: [PATCH 2/2] feature/adjust-dark-mode-colors --- .../builder/features/inspector/inspector.tsx | 2 +- .../style-panel/shared/color-picker.tsx | 9 ++++- .../features/style-panel/style-panel.tsx | 8 +++- .../design-system/src/components/card.tsx | 2 +- packages/design-system/src/stitches.config.ts | 38 +++++++++++++------ 5 files changed, 42 insertions(+), 17 deletions(-) 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/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/stitches.config.ts b/packages/design-system/src/stitches.config.ts index 48d9d82..edebc9a 100644 --- a/packages/design-system/src/stitches.config.ts +++ b/packages/design-system/src/stitches.config.ts @@ -519,7 +519,21 @@ export const darkTheme = createTheme({ 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", @@ -543,16 +557,16 @@ export const darkTheme = createTheme({ backgroundInfoNotification: "#edf6ff", //backgroundPresetMain: "#e6e8eb", //backgroundPresetHover: "#dfe3e6", - backgroundLocalMain: "#e1f0ff", - backgroundLocalHover: "#cee7fe", - backgroundRemoteMain: "#ffe8d7", + //backgroundLocalMain: "#e1f0ff", + //backgroundLocalHover: "#cee7fe", + //backgroundRemoteMain: "#ffe8d7", backgroundRemoteHover: "#ffdcc3", backgroundInputSelected: "#b7d9f8", backgroundInputDisabled: "#f8f8f8", backgroundInputHighlight: "#b7d9f8", backgroundButtonHover: "#ffffff17", backgroundButtonPressed: "#0000001c", - backgroundButtonDisabled: "#e9ebed", + //backgroundButtonDisabled: "#e9ebed", backgroundItemCurrent: "#096cff", backgroundItemCurrentChild: "#e1f0ff", backgroundItemCurrentHidden: "#7e868c", @@ -561,8 +575,8 @@ export const darkTheme = createTheme({ backgroundTooltipBuilder: "#ffffff", backgroundTooltipDesigner: "#ffffff", backgroundSpacingTopBottom: "#f1f3f5", - backgroundSpacingLeftRight: "#f1f3f5", - backgroundSpacingHover: "#d7dbdf", + //backgroundSpacingLeftRight: "#f1f3f5", + //backgroundSpacingHover: "#d7dbdf", backgroundStyleSourceToken: "#096cff", backgroundStyleSourceTag: "#d54113", backgroundStyleSourceState: "#00894a", @@ -627,9 +641,9 @@ export const darkTheme = createTheme({ borderContrast: "#ffffff", borderItemChildLine: "#889096", borderItemChildLineCurrent: "#96c7f2", - borderLocalMain: "#b7d9f8", + //borderLocalMain: "#b7d9f8", borderLocalFlexUi: "#096cff", - borderRemoteMain: "#fbc69f", + //borderRemoteMain: "#fbc69f", borderRemoteFlexUi: "#fa934e", borderDestructiveMain: "#d13a3a", borderDestructiveNotification: "#f9c6c6", @@ -650,9 +664,9 @@ export const darkTheme = createTheme({ foregroundFlexUiHover: "#96c7f2", foregroundContrastMain: "#ffffff", foregroundContrastSubtle: "#c1c8cd", - foregroundLocalMain: "#016ccc", + //foregroundLocalMain: "#016ccc", foregroundLocalFlexUi: "#237cff", - foregroundRemoteMain: "#b74900", + //foregroundRemoteMain: "#b74900", foregroundRemoteFlexUi: "#fa934e", foregroundTextMoreSubtle: "#8d949a", foregroundPrimary: "#096cff", @@ -660,8 +674,8 @@ export const darkTheme = createTheme({ foregroundGridControlsDot: "#c7c7c7", foregroundGridControlsDotHover: "#707375", foregroundGridControlsFlexHover: "#96c7f2", - foregroundIconSecondary: "#c1c8cd", - foregroundIconMain: "#11181c", + // foregroundIconSecondary: "#c1c8cd", + // foregroundIconMain: "#11181c", foregroundMoreSubtle: "#adb1b4", foregroundScrollBar: "#a7acaf99", foregroundOverwrittenMain: "#bf0007",