Semantic spacing tokens

Condensed 4px grid. Tighter than shadcn defaults. Not mapped through @theme. Components reference these as arbitrary values: gap-[var(--vueda-gap-sm)], p-[var(--vueda-section-padding)], etc. Semantic spacing tokens provide the published 4px, 8px, and 12px steps.

Name	Light	Dark	Description	Tailwind utility
--vueda-gap-sm	0.25rem		4px — inside-control gap (icon to label, segment to segment).
--vueda-gap-md	0.5rem		8px — between controls in a row.
--vueda-gap-lg	0.75rem		12px — between groups within a section.
--vueda-section-padding	0.75rem		12px — card / panel interior padding.
--vueda-control-px	var( --vueda-control-px-md )		legacy alias for --vueda-control-px-md (12px); retained for consumers that predate the sm / md / lg ladder. Prefer the size-specific token.
--vueda-control-py	0.25rem		4px — legacy vertical padding constant; prefer the height-paired tokens above.

Tokens

--vueda-gap-sm

Field	Value
Light	0.25rem
Source	client/lib/theme/vueda-tailwind/base.css:512

4px — inside-control gap (icon to label, segment to segment).

--vueda-gap-md

Field	Value
Light	0.5rem
Source	client/lib/theme/vueda-tailwind/base.css:513

8px — between controls in a row.

--vueda-gap-lg

Field	Value
Light	0.75rem
Source	client/lib/theme/vueda-tailwind/base.css:514

12px — between groups within a section.

--vueda-section-padding

Field	Value
Light	0.75rem
Source	client/lib/theme/vueda-tailwind/base.css:515

12px — card / panel interior padding.

--vueda-control-px

Field	Value
Light	var( --vueda-control-px-md )
Source	client/lib/theme/vueda-tailwind/base.css:517

legacy alias for --vueda-control-px-md (12px); retained for consumers that predate the sm / md / lg ladder. Prefer the size-specific token.

--vueda-control-py

Field	Value
Light	0.25rem
Source	client/lib/theme/vueda-tailwind/base.css:520

4px — legacy vertical padding constant; prefer the height-paired tokens above.