From 62c4ae17d82aa7b7bbc3cb3ce8eebbe6094e450c Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sun, 22 Dec 2024 19:50:39 +0000 Subject: [PATCH] feat: updated inputs design system (#4635) ## Description Inputs have now in default state no borders but instead a background ## 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 --- .../breakpoints/breakpoints-popover.tsx | 20 +++++++------ .../breakpoints/confirmation-dialog.tsx | 6 +--- .../features/breakpoints/width-input.tsx | 3 +- .../sections/layout/shared/flex-grid.tsx | 10 ++----- .../sections/position/inset-layout.tsx | 2 +- .../style-panel/sections/space/layout.tsx | 8 ++++-- .../style-source/style-source-input.tsx | 7 +++-- .../shared/image-manager/image-info.tsx | 4 +-- .../app/builder/sidebar-left/sidebar-tabs.tsx | 4 +-- .../__generated__/figma-design-tokens.json | 28 +++++++++---------- .../src/__generated__/figma-design-tokens.ts | 22 +++++++-------- .../design-system/src/components/button.tsx | 14 ++-------- .../design-system/src/components/combobox.tsx | 4 ++- .../src/components/input-field.tsx | 5 +++- .../src/components/position-grid.tsx | 2 +- .../src/components/select-button.tsx | 5 +++- .../design-system/src/components/switch.tsx | 6 ++-- .../src/components/text-area.tsx | 5 +++- 18 files changed, 76 insertions(+), 79 deletions(-) diff --git a/apps/builder/app/builder/features/breakpoints/breakpoints-popover.tsx b/apps/builder/app/builder/features/breakpoints/breakpoints-popover.tsx index 81921e2f9033..c9481d683a3d 100644 --- a/apps/builder/app/builder/features/breakpoints/breakpoints-popover.tsx +++ b/apps/builder/app/builder/features/breakpoints/breakpoints-popover.tsx @@ -18,6 +18,7 @@ import { Box, PopoverMenuItemRightSlot, Tooltip, + InputField, } from "@webstudio-is/design-system"; import { BreakpointsEditor } from "./breakpoints-editor"; import { BreakpointsPopoverToolbarButton } from "./breakpoints-popover-toolbar-button"; @@ -94,7 +95,12 @@ export const BreakpointsPopover = () => { - + {view === "confirmation" && breakpointToDelete && ( { )} {view === "initial" && ( <> - + - + readOnly + /> diff --git a/apps/builder/app/builder/features/breakpoints/confirmation-dialog.tsx b/apps/builder/app/builder/features/breakpoints/confirmation-dialog.tsx index aef8d25062aa..4d2155abc5b4 100644 --- a/apps/builder/app/builder/features/breakpoints/confirmation-dialog.tsx +++ b/apps/builder/app/builder/features/breakpoints/confirmation-dialog.tsx @@ -13,11 +13,7 @@ export const ConfirmationDialog = ({ onAbort, }: ConfirmationDialogProps) => { return ( - + {`Are you sure you want to delete "${breakpoint.label}"?`} {`Deleting a breakpoint will also delete all styles associated with this diff --git a/apps/builder/app/builder/features/breakpoints/width-input.tsx b/apps/builder/app/builder/features/breakpoints/width-input.tsx index fc77fabd7936..23e7c4caaef0 100644 --- a/apps/builder/app/builder/features/breakpoints/width-input.tsx +++ b/apps/builder/app/builder/features/breakpoints/width-input.tsx @@ -134,14 +134,13 @@ export const WidthInput = ({ min }: { min: number }) => { PX diff --git a/apps/builder/app/builder/features/style-panel/sections/layout/shared/flex-grid.tsx b/apps/builder/app/builder/features/style-panel/sections/layout/shared/flex-grid.tsx index 4c43926f0bbc..1ab1439dd3af 100644 --- a/apps/builder/app/builder/features/style-panel/sections/layout/shared/flex-grid.tsx +++ b/apps/builder/app/builder/features/style-panel/sections/layout/shared/flex-grid.tsx @@ -49,18 +49,14 @@ export const FlexGrid = () => { flexDirectionValue === "column" || flexDirectionValue === "column-reverse"; let color = theme.colors.foregroundFlexUiMain; - let borderColor = theme.colors.foregroundFlexUiMain; if (styleValueSourceColor === "local") { - borderColor = theme.colors.borderLocalMain; color = theme.colors.foregroundLocalFlexUi; } if (styleValueSourceColor === "overwritten") { - borderColor = theme.colors.borderOverwrittenFlexUi; color = theme.colors.foregroundOverwrittenFlexUi; } if (styleValueSourceColor === "remote") { - borderColor = theme.colors.borderRemoteFlexUi; color = theme.colors.foregroundRemoteFlexUi; } @@ -77,9 +73,8 @@ export const FlexGrid = () => { { minWidth: "auto", color: theme.colors.foregroundFlexUiMain, "&:hover": { - // @todo not clear which token to use here - background: theme.colors.backgroundHover, + background: theme.colors.foregroundFlexUiHover, }, "&:focus": { background: "none", diff --git a/apps/builder/app/builder/features/style-panel/sections/position/inset-layout.tsx b/apps/builder/app/builder/features/style-panel/sections/position/inset-layout.tsx index 701e1fa4433f..731804f27bbe 100644 --- a/apps/builder/app/builder/features/style-panel/sections/position/inset-layout.tsx +++ b/apps/builder/app/builder/features/style-panel/sections/position/inset-layout.tsx @@ -27,7 +27,7 @@ const Trapezoid = styled("div", { const TopBottom = styled(Trapezoid, { zIndex: 0, - backgroundColor: theme.colors.backgroundPanel, + backgroundColor: theme.colors.backgroundSpacingTopBottom, }); const LeftRight = styled(Trapezoid, { diff --git a/apps/builder/app/builder/features/style-panel/sections/space/layout.tsx b/apps/builder/app/builder/features/style-panel/sections/space/layout.tsx index 3d29d2a61317..438803a17613 100644 --- a/apps/builder/app/builder/features/style-panel/sections/space/layout.tsx +++ b/apps/builder/app/builder/features/style-panel/sections/space/layout.tsx @@ -41,7 +41,7 @@ const emulateInnerStroke = ({ }); const ValueArea = styled("path", { - fill: theme.colors.backgroundPanel, + fill: theme.colors.backgroundSpacingTopBottom, variants: { side: { top: { cursor: "n-resize" }, @@ -55,7 +55,11 @@ const ValueArea = styled("path", { fill: theme.colors.backgroundSpacingLeftRight, }, }, - isActive: { true: { fill: theme.colors.backgroundSpacingHover } }, + isActive: { + true: { + fill: theme.colors.backgroundSpacingHover, + }, + }, }, }); diff --git a/apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx b/apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx index a86bf0e478cc..73ecc4ed0f4d 100644 --- a/apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx +++ b/apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx @@ -80,10 +80,13 @@ const TextFieldContainer = styled("div", { alignItems: "center", backgroundColor: theme.colors.backgroundControls, gap: theme.spacing[2], - p: theme.spacing[2], + padding: theme.spacing[2], borderRadius: theme.borderRadius[4], minWidth: 0, - border: `1px solid ${theme.colors.borderMain}`, + border: `1px solid transparent`, + "&:hover": { + borderColor: theme.colors.borderMain, + }, "&:focus-within": { borderColor: theme.colors.borderFocus, }, diff --git a/apps/builder/app/builder/shared/image-manager/image-info.tsx b/apps/builder/app/builder/shared/image-manager/image-info.tsx index 3228d54eea61..02eb0fb51d73 100644 --- a/apps/builder/app/builder/shared/image-manager/image-info.tsx +++ b/apps/builder/app/builder/shared/image-manager/image-info.tsx @@ -50,13 +50,13 @@ export const ImageInfo = ({ asset, onDelete }: ImageInfoProps) => { {"width" in meta && "height" in meta ? ( - + {meta.width} x {meta.height} {" "} - + {getFormattedAspectRatio(meta)} diff --git a/apps/builder/app/builder/sidebar-left/sidebar-tabs.tsx b/apps/builder/app/builder/sidebar-left/sidebar-tabs.tsx index 2449ce2b87f5..4483ec65b323 100644 --- a/apps/builder/app/builder/sidebar-left/sidebar-tabs.tsx +++ b/apps/builder/app/builder/sidebar-left/sidebar-tabs.tsx @@ -34,19 +34,17 @@ const buttonStyle = css({ outline: "none", alignItems: "center", justifyContent: "center", - color: theme.colors.foregroundSubtle, + color: theme.colors.foregroundMain, backgroundColor: theme.colors.backgroundPanel, border: "none", "&:focus-visible": triggerFocusRing, "@hover": { "&:hover": { - color: theme.colors.foregroundMain, backgroundColor: theme.colors.backgroundHover, }, }, '&[data-state="active"]': { - color: theme.colors.foregroundMain, backgroundColor: theme.colors.backgroundHover, }, }); diff --git a/packages/design-system/src/__generated__/figma-design-tokens.json b/packages/design-system/src/__generated__/figma-design-tokens.json index 182e46376c96..ca3f93801c0d 100644 --- a/packages/design-system/src/__generated__/figma-design-tokens.json +++ b/packages/design-system/src/__generated__/figma-design-tokens.json @@ -397,7 +397,7 @@ "description": "primary color, used in button" }, "hover": { - "value": "#dfe3e6", + "value": "#efefef", "type": "color", "description": "hover color for toggle group button, icon button, toggle button, small icon button, small toggle button, nested select button, menu item large" }, @@ -412,7 +412,7 @@ "description": "background color for menu and select menu" }, "controls": { - "value": "#ffffff", + "value": "#f5f5f5", "type": "color", "description": "background color for text input, toggle group, input field, color input, select button, panel button, text-area, search field, checkbox, spacing, flex control" }, @@ -438,7 +438,7 @@ "description": "background color on neutral toast" }, "dark": { - "value": "#7e868c", + "value": "#b2b2b2", "type": "color" } }, @@ -491,7 +491,7 @@ }, "preset": { "main": { - "value": "#e6e8eb", + "value": "#e6e6e6", "type": "color" }, "hover": { @@ -538,7 +538,7 @@ }, "button": { "hover": { - "value": "#ffffff17", + "value": "#00000010", "type": "color", "description": "transparent color to create the hover state for button" }, @@ -575,7 +575,7 @@ "description": "color for the hidden current item in the navigator item component" }, "menu-item-hover": { - "value": "#dfe3e6", + "value": "#efefef", "type": "color", "description": "The hover state on menu item components." } @@ -596,7 +596,7 @@ }, "spacing": { "top-bottom": { - "value": "#f1f3f5", + "value": "#f8f8f8", "type": "color" }, "left-right": { @@ -605,7 +605,7 @@ "description": "Left and right padding and margin background colors for the Position section UI." }, "hover": { - "value": "#d7dbdf", + "value": "#e3e3e3", "type": "color" } }, @@ -819,7 +819,7 @@ }, "border": { "main": { - "value": "#d9d9d9", + "value": "#e6e6e6", "type": "color", "description": "color for separators, panel borders, preset borders, input fields, select buttons, panel buttons, text area, search field, menu, select menu, spacing controls," }, @@ -986,7 +986,7 @@ "description": "color for flex control ui elements" }, "hover": { - "value": "#96c7f2", + "value": "#e3e3e3", "type": "color", "description": "color for hovered state of flex control ui elements" } @@ -1052,7 +1052,7 @@ "type": "color" }, "flex-hover": { - "value": "#96c7f2", + "value": "#e3e3e3", "type": "color", "description": "color for hovered state of flex control ui elements" } @@ -1493,8 +1493,6 @@ }, "$themes": [], "$metadata": { - "tokenSetOrder": [ - "global" - ] + "tokenSetOrder": ["global"] } -} \ No newline at end of file +} diff --git a/packages/design-system/src/__generated__/figma-design-tokens.ts b/packages/design-system/src/__generated__/figma-design-tokens.ts index da9158e1fff2..697d007c76a9 100644 --- a/packages/design-system/src/__generated__/figma-design-tokens.ts +++ b/packages/design-system/src/__generated__/figma-design-tokens.ts @@ -386,15 +386,15 @@ export const color = { black: "#000000", backgroundPanel: "#fff", backgroundPrimary: "#096cff", - backgroundHover: "#dfe3e6", + backgroundHover: "#efefef", backgroundActive: "#096cff", backgroundMenu: "#fff", - backgroundControls: "#ffffff", + backgroundControls: "#f5f5f5", backgroundAssetcardHover: "#e6e8eb", backgroundNeutralMain: "#d7dbdf", backgroundNeutralAccent: "#11181c", backgroundNeutralNotification: "#ffffff", - backgroundNeutralDark: "#7e868c", + backgroundNeutralDark: "#b2b2b2", backgroundDestructiveMain: "#dc2929", backgroundDestructiveNotification: "#ffe9e9", backgroundSuccessMain: "#00894a", @@ -403,7 +403,7 @@ export const color = { backgroundAlertNotification: "#fffbd1", backgroundInfoMain: "#0175dc", backgroundInfoNotification: "#e0f0ff", - backgroundPresetMain: "#e6e8eb", + backgroundPresetMain: "#e6e6e6", backgroundPresetHover: "#dfe3e6", backgroundLocalMain: "#e1f0ff", backgroundLocalHover: "#cee7fe", @@ -412,20 +412,20 @@ export const color = { backgroundInputSelected: "#b7d9f8", backgroundInputDisabled: "#f8f8f8", backgroundInputHighlight: "#b7d9f8", - backgroundButtonHover: "#ffffff17", + backgroundButtonHover: "#00000010", backgroundButtonPressed: "#0000001c", backgroundButtonDisabled: "#e9ebed", backgroundButtonDisabledDark: "#646464", backgroundItemCurrent: "#e1f0ff", backgroundItemCurrentChild: "#fff", backgroundItemCurrentHidden: "#7e868c", - backgroundItemMenuItemHover: "#dfe3e6", + backgroundItemMenuItemHover: "#efefef", backgroundTooltipMain: "#11181c", backgroundTooltipBuilder: "#ffffff", backgroundTooltipDesigner: "#ffffff", - backgroundSpacingTopBottom: "#f1f3f5", + backgroundSpacingTopBottom: "#f8f8f8", backgroundSpacingLeftRight: "#f1f3f5", - backgroundSpacingHover: "#d7dbdf", + backgroundSpacingHover: "#e3e3e3", backgroundStyleSourceToken: "#834df4", backgroundStyleSourceTag: "#d54113", backgroundStyleSourceState: "#00894a", @@ -481,7 +481,7 @@ export const color = { brandSpinnerBlue: "#4a4efa", brandSpinnerPurple: "#e63cfe", brandSpinnerOrange: "#ffae3c", - borderMain: "#d9d9d9", + borderMain: "#e6e6e6", borderFocus: "#096cff", borderMenuInner: "#fcfcfc", borderColorSwatch: "#687076", @@ -512,7 +512,7 @@ export const color = { foregroundDisabled: "#c1c8cd", foregroundHiddenItem: "#7e868c", foregroundFlexUiMain: "#c7c7c7", - foregroundFlexUiHover: "#96c7f2", + foregroundFlexUiHover: "#e3e3e3", foregroundContrastMain: "#ffffff", foregroundContrastSubtle: "#c1c8cd", foregroundLocalMain: "#016ccc", @@ -524,7 +524,7 @@ export const color = { foregroundSuccessText: "#008447", foregroundGridControlsDot: "#c7c7c7", foregroundGridControlsDotHover: "#707375", - foregroundGridControlsFlexHover: "#96c7f2", + foregroundGridControlsFlexHover: "#e3e3e3", foregroundIconSecondary: "#c1c8cd", foregroundIconMain: "#11181c", foregroundMoreSubtle: "#adb1b4", diff --git a/packages/design-system/src/components/button.tsx b/packages/design-system/src/components/button.tsx index aba723fe432a..0a23a8a29802 100644 --- a/packages/design-system/src/components/button.tsx +++ b/packages/design-system/src/components/button.tsx @@ -54,10 +54,6 @@ const foregrounds: Record = { "dark-ghost": theme.colors.foregroundContrastMain, }; -// CSS supports multiple gradients as backgrounds but not multiple colors -const backgroundColors = (base: string, overlay: string) => - `linear-gradient(${overlay}, ${overlay}), linear-gradient(${base}, ${base})`; - const perColorStyle = (variant: ButtonColor) => ({ background: variant === "ghost" || variant === "dark-ghost" @@ -73,10 +69,7 @@ const perColorStyle = (variant: ButtonColor) => ({ background: variant === "gradient" ? `linear-gradient(${theme.colors.backgroundButtonHover}, ${theme.colors.backgroundButtonHover}), ${backgrounds[variant]}` - : backgroundColors( - backgrounds[variant], - theme.colors.backgroundButtonHover - ), + : `oklch(from ${backgrounds[variant]} l c h / 0.8)`, }, "&[data-state=auto]:focus-visible, &[data-state=focus]": { @@ -90,10 +83,7 @@ const perColorStyle = (variant: ButtonColor) => ({ background: variant === "gradient" ? `linear-gradient(${theme.colors.backgroundButtonPressed}, ${theme.colors.backgroundButtonPressed}), ${backgrounds[variant]}` - : backgroundColors( - backgrounds[variant], - theme.colors.backgroundButtonPressed - ), + : `oklch(from ${backgrounds[variant]} l c h / 0.8)`, }, "&:disabled:not([data-state=pending]), &[data-state=disabled], &[aria-disabled=true], &[aria-disabled=true]:hover, &[aria-disabled=true]:visited": diff --git a/packages/design-system/src/components/combobox.tsx b/packages/design-system/src/components/combobox.tsx index b5f948cae037..6d101850480a 100644 --- a/packages/design-system/src/components/combobox.tsx +++ b/packages/design-system/src/components/combobox.tsx @@ -480,7 +480,9 @@ export const Combobox = ({ color={color} suffix={ suffix ?? ( - + + + ) } /> diff --git a/packages/design-system/src/components/input-field.tsx b/packages/design-system/src/components/input-field.tsx index 9657cb483ff9..d12236db55e9 100644 --- a/packages/design-system/src/components/input-field.tsx +++ b/packages/design-system/src/components/input-field.tsx @@ -82,8 +82,11 @@ const containerStyle = css({ minWidth: 0, alignItems: "center", borderRadius: theme.borderRadius[4], - border: `solid 1px ${theme.colors.borderMain}`, + border: `solid 1px transparent`, backgroundColor: theme.colors.backgroundControls, + "&:hover": { + borderColor: theme.colors.borderMain, + }, "&:focus-within": { borderColor: theme.colors.borderFocus, }, diff --git a/packages/design-system/src/components/position-grid.tsx b/packages/design-system/src/components/position-grid.tsx index 01418aa5315c..5e1799484a6b 100644 --- a/packages/design-system/src/components/position-grid.tsx +++ b/packages/design-system/src/components/position-grid.tsx @@ -65,7 +65,7 @@ const dotStyle = css({ borderRadius: "50%", }, "&[data-selected=true], &:hover": { - background: theme.colors.backgroundHover, + background: theme.colors.foregroundGridControlsFlexHover, "&::before": { background: theme.colors.foregroundGridControlsDotHover, }, diff --git a/packages/design-system/src/components/select-button.tsx b/packages/design-system/src/components/select-button.tsx index 9b4f5dd1d82e..4b05140c1108 100644 --- a/packages/design-system/src/components/select-button.tsx +++ b/packages/design-system/src/components/select-button.tsx @@ -27,12 +27,15 @@ const style = css({ display: "flex", alignItems: "center", background: theme.colors.backgroundControls, - border: `1px solid ${theme.colors.borderMain}`, + border: `1px solid transparent`, borderRadius: theme.borderRadius[4], paddingRight: theme.spacing[1], paddingLeft: theme.spacing[1], color: theme.colors.foregroundMain, [chevronColor]: theme.colors.foregroundSubtle, + "&:hover": { + borderColor: theme.colors.borderMain, + }, "&[data-placeholder]:not([data-state=open], :hover, :disabled)": { color: theme.colors.foregroundSubtle, }, diff --git a/packages/design-system/src/components/switch.tsx b/packages/design-system/src/components/switch.tsx index 8a2cd2307dae..5c68a56e21b2 100644 --- a/packages/design-system/src/components/switch.tsx +++ b/packages/design-system/src/components/switch.tsx @@ -8,7 +8,7 @@ import * as Primitive from "@radix-ui/react-switch"; import { type CSS, css, theme } from "../stitches.config"; const padding = theme.spacing[1]; -const thumbOffset = `calc(${padding} + ${theme.spacing[2]})`; +const thumbOffset = `calc(${padding} + ${theme.spacing[1]})`; const switchStyle = css({ all: "unset", // reset