You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.3 KiB
39 lines
1.3 KiB
/** |
|
* Spacing System |
|
* Define consistent spacing variables based on an 8px base unit |
|
* This creates a predictable rhythm across the entire application |
|
*/ |
|
|
|
:root { |
|
/* Base spacing unit: 8px */ |
|
--spacing-base: 0.5rem; /* 8px */ |
|
|
|
/* Spacing scale (multiples of base unit) */ |
|
--spacing-0: 0; |
|
--spacing-1: 0.25rem; /* 4px - micro spacing */ |
|
--spacing-2: 0.5rem; /* 8px - small spacing */ |
|
--spacing-3: 1rem; /* 16px - medium spacing */ |
|
--spacing-4: 1.5rem; /* 24px - large spacing */ |
|
--spacing-5: 2rem; /* 32px - xl spacing */ |
|
--spacing-6: 3rem; /* 48px - xxl spacing */ |
|
--spacing-7: 4rem; /* 64px - huge spacing */ |
|
--spacing-8: 6rem; /* 96px - massive spacing */ |
|
|
|
/* Common use-case aliases */ |
|
--spacing-xs: var(--spacing-1); |
|
--spacing-sm: var(--spacing-2); |
|
--spacing-md: var(--spacing-3); |
|
--spacing-lg: var(--spacing-4); |
|
--spacing-xl: var(--spacing-5); |
|
--spacing-2xl: var(--spacing-6); |
|
--spacing-3xl: var(--spacing-7); |
|
--spacing-4xl: var(--spacing-8); |
|
|
|
/* Component-specific spacing */ |
|
--button-padding-y: var(--spacing-2); |
|
--button-padding-x: var(--spacing-4); |
|
--card-padding: var(--spacing-4); |
|
--input-padding: var(--spacing-2); |
|
--section-spacing: var(--spacing-6); |
|
} |
|
|
|
|