From 4d195a35b5a726a4d6be55135000a217d360071c Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 31 Aug 2026 16:00:58 +0000 Subject: [PATCH 1/5] feat(design-system): default buttons, inputs and selects to the small size Console UI density is dominated by the medium control size, which the vast majority of call sites already override with `small`. Flip the default so untouched call sites get the compact control, and keep `medium` available as an explicit opt-out on Button and Input2. Also correct the Select large padding, which was falling through to the small value, so the three sizes line up with Input2 at 32/40/48px. Co-authored-by: Anna Nguyen --- assets/design-system/src/components/Button.tsx | 4 +++- assets/design-system/src/components/Input2.tsx | 3 ++- assets/design-system/src/components/Select.tsx | 6 +++--- assets/design-system/src/theme.tsx | 15 ++++++++++----- 4 files changed, 18 insertions(+), 10 deletions(-) diff --git a/assets/design-system/src/components/Button.tsx b/assets/design-system/src/components/Button.tsx index c6d851ebbe..09ec211322 100644 --- a/assets/design-system/src/components/Button.tsx +++ b/assets/design-system/src/components/Button.tsx @@ -35,6 +35,7 @@ export type ButtonProps = { innerFlexProps?: FlexProps // flags- keeping this pattern instead of using "size" and "type" for backwards compatibility small?: boolean + medium?: boolean large?: boolean primary?: boolean secondary?: boolean @@ -75,6 +76,7 @@ const Button = memo( disabled, children, small, + medium, large, secondary, tertiary, @@ -97,7 +99,7 @@ const Button = memo( 'auto' ) - const buttonSize = large ? 'large' : small ? 'small' : 'medium' + const buttonSize = large ? 'large' : medium && !small ? 'medium' : 'small' const buttonType = secondary ? 'secondary' : tertiary diff --git a/assets/design-system/src/components/Input2.tsx b/assets/design-system/src/components/Input2.tsx index 7e0cabfb30..65ec08417c 100644 --- a/assets/design-system/src/components/Input2.tsx +++ b/assets/design-system/src/components/Input2.tsx @@ -234,6 +234,7 @@ function Input2({ titleContent, size, small, + medium, large, raised = false, onEnter, @@ -288,7 +289,7 @@ function Input2({ const parentFillLevel = useFillLevel() - size = size || (large ? 'large' : small ? 'small' : 'medium') + size = size || (large ? 'large' : medium && !small ? 'medium' : 'small') inputProps = mergeProps(useFormField()?.fieldProps ?? {}, inputProps) diff --git a/assets/design-system/src/components/Select.tsx b/assets/design-system/src/components/Select.tsx index efc4696ebe..b3c6ef11e3 100644 --- a/assets/design-system/src/components/Select.tsx +++ b/assets/design-system/src/components/Select.tsx @@ -168,7 +168,7 @@ const SelectButtonInner = styled.div<{ display: 'flex', flexDirection: 'row', flexShrink: 1, - padding: `${size === 'medium' ? 9 : 5}px ${theme.spacing.medium}px`, + padding: `${size === 'large' ? 13 : size === 'medium' ? 9 : 5}px ${theme.spacing.medium}px`, width: '100%', '.children': { flexGrow: 1, @@ -221,7 +221,7 @@ function SelectButton({ children, showArrow = true, isOpen, - size = 'medium', + size = 'small', transparent = false, isDisabled, ...props @@ -299,7 +299,7 @@ function Select({ name, triggerButton, placement, - size = 'medium', + size = 'small', width, maxHeight, transparent = false, diff --git a/assets/design-system/src/theme.tsx b/assets/design-system/src/theme.tsx index 5f7229d64f..407733b5c6 100644 --- a/assets/design-system/src/theme.tsx +++ b/assets/design-system/src/theme.tsx @@ -162,7 +162,7 @@ const getHonorableThemeProps = ({ mode }: { mode: ColorMode }) => { Input: { Root: [ { - body2: true, + caption: true, display: 'flex', overflow: 'hidden', justifyContent: 'space-between', @@ -180,6 +180,11 @@ const getHonorableThemeProps = ({ mode }: { mode: ColorMode }) => { borderColor: 'border-outline-focused', }, }, + // multi-line inputs hold prose, so they keep the larger body type + ({ multiline }: any) => + multiline && { + body2: true, + }, ({ valid }: any) => valid && { borderColor: 'border-outline', @@ -203,8 +208,8 @@ const getHonorableThemeProps = ({ mode }: { mode: ColorMode }) => { { width: '100%', flex: '1 1', - height: '38px', - lineHeight: '38px', + height: '30px', + lineHeight: '30px', color: 'text', _placeholder: { color: 'text-xlight', @@ -234,8 +239,8 @@ const getHonorableThemeProps = ({ mode }: { mode: ColorMode }) => { paddingLeft: 'medium', paddingRight: 'medium', lineHeight: 'inherit', - paddingTop: 9, - paddingBottom: 9, + paddingTop: 7, + paddingBottom: 7, }, ({ small }: any) => small && { From 33815a02838c4e2603ebe7d783c5e7a15cb4d3cb Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 31 Aug 2026 16:01:31 +0000 Subject: [PATCH 2/5] feat(design-system): tighten dropdown list item padding Menu rows were 36px tall from 8px vertical padding, which dwarfs the 32px trigger they hang off of. Drop to 4px vertical / 12px horizontal so a menu row matches the control that opened it. Co-authored-by: Anna Nguyen --- assets/design-system/src/components/ListBoxItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/design-system/src/components/ListBoxItem.tsx b/assets/design-system/src/components/ListBoxItem.tsx index 31e2de32a0..a8afd113cd 100644 --- a/assets/design-system/src/components/ListBoxItem.tsx +++ b/assets/design-system/src/components/ListBoxItem.tsx @@ -41,7 +41,7 @@ const ListBoxItemInner = styled.div>( alignItems: 'center', position: 'relative', width: 'auto', - padding: `${theme.spacing.xsmall}px ${theme.spacing.medium}px`, + padding: `${theme.spacing.xxsmall}px ${theme.spacing.small}px`, backgroundColor: 'none', cursor: 'pointer', '&:hover': { @@ -147,7 +147,7 @@ const ListBoxFooterInner = styled.button<{ $focused?: boolean }>( display: 'flex', position: 'relative', width: '100%', - padding: `${theme.spacing.small}px ${theme.spacing.medium}px`, + padding: `${theme.spacing.xsmall}px ${theme.spacing.small}px`, '&:hover': { backgroundColor: theme.mode === 'light' From a16e9461b95c5877a09eeaee3f7e8a6387144285 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 31 Aug 2026 16:07:58 +0000 Subject: [PATCH 3/5] refactor(design-system): simplify size resolution and note the swallowed small prop Co-authored-by: Anna Nguyen --- assets/design-system/src/components/Button.tsx | 3 ++- assets/design-system/src/components/Input2.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/assets/design-system/src/components/Button.tsx b/assets/design-system/src/components/Button.tsx index 09ec211322..7252cabf9a 100644 --- a/assets/design-system/src/components/Button.tsx +++ b/assets/design-system/src/components/Button.tsx @@ -99,7 +99,8 @@ const Button = memo( 'auto' ) - const buttonSize = large ? 'large' : medium && !small ? 'medium' : 'small' + // `small` is the default, but stays destructured so it never reaches the DOM + const buttonSize = large ? 'large' : medium ? 'medium' : 'small' const buttonType = secondary ? 'secondary' : tertiary diff --git a/assets/design-system/src/components/Input2.tsx b/assets/design-system/src/components/Input2.tsx index 65ec08417c..b706e059e0 100644 --- a/assets/design-system/src/components/Input2.tsx +++ b/assets/design-system/src/components/Input2.tsx @@ -289,7 +289,8 @@ function Input2({ const parentFillLevel = useFillLevel() - size = size || (large ? 'large' : medium && !small ? 'medium' : 'small') + // `small` is the default, but stays destructured so it never reaches the DOM + size = size || (large ? 'large' : medium ? 'medium' : 'small') inputProps = mergeProps(useFormField()?.fieldProps ?? {}, inputProps) From aeace24dad90caa835ef4a924f4888997abb7624 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 31 Aug 2026 16:29:39 +0000 Subject: [PATCH 4/5] fix(design-system): let an explicit small prop win over medium Keeps the size chain honest now that small is the default, and stops eslint flagging the prop as unused. --- assets/design-system/src/components/Button.tsx | 3 +-- assets/design-system/src/components/Input2.tsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/assets/design-system/src/components/Button.tsx b/assets/design-system/src/components/Button.tsx index 7252cabf9a..09ec211322 100644 --- a/assets/design-system/src/components/Button.tsx +++ b/assets/design-system/src/components/Button.tsx @@ -99,8 +99,7 @@ const Button = memo( 'auto' ) - // `small` is the default, but stays destructured so it never reaches the DOM - const buttonSize = large ? 'large' : medium ? 'medium' : 'small' + const buttonSize = large ? 'large' : medium && !small ? 'medium' : 'small' const buttonType = secondary ? 'secondary' : tertiary diff --git a/assets/design-system/src/components/Input2.tsx b/assets/design-system/src/components/Input2.tsx index b706e059e0..65ec08417c 100644 --- a/assets/design-system/src/components/Input2.tsx +++ b/assets/design-system/src/components/Input2.tsx @@ -289,8 +289,7 @@ function Input2({ const parentFillLevel = useFillLevel() - // `small` is the default, but stays destructured so it never reaches the DOM - size = size || (large ? 'large' : medium ? 'medium' : 'small') + size = size || (large ? 'large' : medium && !small ? 'medium' : 'small') inputProps = mergeProps(useFormField()?.fieldProps ?? {}, inputProps) From 8a8327d52189b301d9e644dcf9b60054fb756a89 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 31 Aug 2026 17:03:59 +0000 Subject: [PATCH 5/5] fix(design-system): scope the legacy input type change to single-line inputs Setting caption on the honorable Input root also shrank textareas, because honorable resolves the typography flags from props and the caption resolver runs after body2 regardless of declaration order. Put the smaller type on InputBase instead, where multi-line inputs never reach it, and give the large variant its 14px back. --- assets/design-system/src/theme.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/assets/design-system/src/theme.tsx b/assets/design-system/src/theme.tsx index 407733b5c6..3d59ee18b0 100644 --- a/assets/design-system/src/theme.tsx +++ b/assets/design-system/src/theme.tsx @@ -162,7 +162,7 @@ const getHonorableThemeProps = ({ mode }: { mode: ColorMode }) => { Input: { Root: [ { - caption: true, + body2: true, display: 'flex', overflow: 'hidden', justifyContent: 'space-between', @@ -180,11 +180,6 @@ const getHonorableThemeProps = ({ mode }: { mode: ColorMode }) => { borderColor: 'border-outline-focused', }, }, - // multi-line inputs hold prose, so they keep the larger body type - ({ multiline }: any) => - multiline && { - body2: true, - }, ({ valid }: any) => valid && { borderColor: 'border-outline', @@ -210,6 +205,10 @@ const getHonorableThemeProps = ({ mode }: { mode: ColorMode }) => { flex: '1 1', height: '30px', lineHeight: '30px', + // caption type, written out because the `caption` alias resolves from + // props and would drag its own 16px line height along with it + fontSize: 12, + letterSpacing: '0.5px', color: 'text', _placeholder: { color: 'text-xlight', @@ -224,6 +223,7 @@ const getHonorableThemeProps = ({ mode }: { mode: ColorMode }) => { large && { height: '46px', lineHeight: '46px', + fontSize: 14, }, ({ disabled }: any) => disabled && {