diff --git a/craft/src/constants/presets.ts b/craft/src/constants/presets.ts index 6c7de6d..8d4c05d 100644 --- a/craft/src/constants/presets.ts +++ b/craft/src/constants/presets.ts @@ -94,3 +94,68 @@ export const DEVICE_WIDTHS: Record = { tablet: '768px', mobile: '375px', }; + +/* ---------- ENH-Foundation shared presets ---------- + Consumed by the reusable StylePanel controls in + src/panels/right/styles/shared.tsx (SizeControl, AspectRatioControl, + BorderControl, etc). Kept in the `{ label, value }` shape used throughout + this file so they drop straight into PresetButtonGrid / ColorSwatchGrid. */ + +// Width/height preset row used by SizeControl (image + video sizing). +export const SIZE_PRESETS = [ + { label: '25%', value: '25%' }, + { label: '50%', value: '50%' }, + { label: '75%', value: '75%' }, + { label: '100%', value: '100%' }, + { label: 'Auto', value: 'auto' }, + { label: 'Full', value: '100vw' }, +]; + +// CSS `aspect-ratio` values. 'Original' (empty string) clears the property. +export const ASPECT_RATIOS = [ + { label: 'Original', value: '' }, + { label: '1:1', value: '1 / 1' }, + { label: '4:3', value: '4 / 3' }, + { label: '3:2', value: '3 / 2' }, + { label: '16:9', value: '16 / 9' }, + { label: '4:5', value: '4 / 5' }, + { label: '9:16', value: '9 / 16' }, +]; + +// box-shadow presets; 'Colored' is the color-aware option (accent-tinted). +export const SHADOW_PRESETS = [ + { label: 'None', value: 'none' }, + { label: 'S', value: '0 1px 2px rgba(0,0,0,0.08)' }, + { label: 'M', value: '0 4px 8px rgba(0,0,0,0.12)' }, + { label: 'L', value: '0 10px 24px rgba(0,0,0,0.18)' }, + { label: 'Colored', value: '0 8px 20px rgba(59,130,246,0.35)' }, +]; + +export const LINE_HEIGHTS = [ + { label: 'Tight', value: '1.1' }, + { label: 'Snug', value: '1.25' }, + { label: 'Normal', value: '1.5' }, + { label: 'Relaxed', value: '1.75' }, + { label: 'Loose', value: '2' }, +]; + +export const LETTER_SPACINGS = [ + { label: 'Tight', value: '-0.02em' }, + { label: 'Normal', value: 'normal' }, + { label: 'Wide', value: '0.05em' }, + { label: 'Wider', value: '0.1em' }, +]; + +export const OBJECT_FIT = [ + { label: 'Cover', value: 'cover' }, + { label: 'Contain', value: 'contain' }, + { label: 'Fill', value: 'fill' }, + { label: 'None', value: 'none' }, +]; + +export const BORDER_STYLES = [ + { label: 'None', value: 'none' }, + { label: 'Solid', value: 'solid' }, + { label: 'Dashed', value: 'dashed' }, + { label: 'Dotted', value: 'dotted' }, +];