refactor(ui): single field recipe and 11px panel typography

- input tone=default now uses panelFieldBase so every input shares the
  transparent-idle / hover-fill / accent-focus recipe (fixes divergent
  black inputs with stuck accent border, e.g. AI provider setup)
- Normalize field/select/number-field text to 11px; paint-field uses the
  shared transparent field recipe instead of bg-input + undefined shadow
- NumberField root sets 11px so the container no longer inherits body 13px
This commit is contained in:
Danila Poyarkov 2026-07-18 07:37:28 +03:00
parent a170a780da
commit 828a1a7ae4
4 changed files with 9 additions and 10 deletions

View file

@ -4,13 +4,12 @@ export default {
base: 'w-full tabular-nums',
variants: {
tone: {
default:
'rounded border border-border bg-input text-surface outline-none focus:border-accent',
default: panelFieldBase,
panel: panelFieldBase
},
size: {
sm: 'px-2 py-1 text-[11px]',
md: 'px-2 py-1 text-xs'
sm: 'px-2 text-[11px]',
md: 'px-2 text-[11px]'
},
state: panelFieldState
},

View file

@ -4,13 +4,13 @@ const numberFieldTheme = {
slots: {
root: [
panelFieldBase,
'group flex min-h-control flex-1 cursor-ew-resize items-center tabular-nums data-[disabled]:cursor-auto data-[editing]:cursor-auto'
'group flex min-h-control flex-1 cursor-ew-resize items-center text-[11px] tabular-nums data-[disabled]:cursor-auto data-[editing]:cursor-auto'
],
leading:
'flex shrink-0 items-center justify-center self-stretch px-[5px] text-muted select-none [&>*]:pointer-events-none',
field:
'min-w-0 flex-1 cursor-text border-none bg-transparent pr-1.5 font-[inherit] text-xs text-surface outline-none',
display: 'flex flex-1 items-center truncate overflow-hidden text-xs select-none',
'min-w-0 flex-1 cursor-text border-none bg-transparent pr-1.5 font-[inherit] text-[11px] text-surface outline-none',
display: 'flex flex-1 items-center truncate overflow-hidden text-[11px] select-none',
mixed: 'flex-1 text-muted',
value: 'flex-1 text-surface',
suffix: 'shrink-0 pr-1.5 text-muted'

View file

@ -1,6 +1,6 @@
export default {
slots: {
root: 'flex h-control min-w-0 flex-1 items-center overflow-hidden rounded-panel border border-border bg-input shadow-panel-field',
root: 'flex h-control min-w-0 flex-1 items-center overflow-hidden rounded-panel border border-transparent bg-panel-field text-[11px] transition-colors hover:bg-panel-field-hover focus-within:border-panel-focus focus-within:bg-panel-field-hover',
preview: 'flex shrink-0 items-center pl-0.5',
value: 'flex min-w-0 flex-1 items-center px-1.5',
divider: 'h-4 w-px shrink-0 bg-border',

View file

@ -2,10 +2,10 @@ import { panelFieldBase } from './panel/field'
export default {
slots: {
trigger: [panelFieldBase, 'flex items-center justify-between'],
trigger: [panelFieldBase, 'flex items-center justify-between text-[11px]'],
value: 'min-w-0 flex-1 truncate text-left',
content:
'z-[110] min-w-[var(--reka-select-trigger-width)] overflow-hidden border border-border bg-panel',
'z-[110] min-w-[var(--reka-select-trigger-width)] overflow-hidden border border-border bg-panel text-[11px]',
viewport: '',
item: 'relative flex cursor-pointer items-center text-surface outline-none select-none data-[disabled]:pointer-events-none data-[highlighted]:bg-hover data-[disabled]:opacity-50'
},