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:
parent
a170a780da
commit
828a1a7ae4
|
|
@ -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
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue