197 lines
4.7 KiB
TypeScript
197 lines
4.7 KiB
TypeScript
import { css, cssManager } from '@design.estate/dees-element';
|
|
|
|
// Spacing scale
|
|
export const spacing = {
|
|
0: '0px',
|
|
px: '1px',
|
|
0.5: '0.125rem', // 2px
|
|
1: '0.25rem', // 4px
|
|
1.5: '0.375rem', // 6px
|
|
2: '0.5rem', // 8px
|
|
2.5: '0.625rem', // 10px
|
|
3: '0.75rem', // 12px
|
|
3.5: '0.875rem', // 14px
|
|
4: '1rem', // 16px
|
|
5: '1.25rem', // 20px
|
|
6: '1.5rem', // 24px
|
|
7: '1.75rem', // 28px
|
|
8: '2rem', // 32px
|
|
9: '2.25rem', // 36px
|
|
10: '2.5rem', // 40px
|
|
11: '2.75rem', // 44px
|
|
12: '3rem', // 48px
|
|
14: '3.5rem', // 56px
|
|
16: '4rem', // 64px
|
|
20: '5rem', // 80px
|
|
24: '6rem', // 96px
|
|
28: '7rem', // 112px
|
|
32: '8rem', // 128px
|
|
36: '9rem', // 144px
|
|
40: '10rem', // 160px
|
|
44: '11rem', // 176px
|
|
48: '12rem', // 192px
|
|
52: '13rem', // 208px
|
|
56: '14rem', // 224px
|
|
60: '15rem', // 240px
|
|
64: '16rem', // 256px
|
|
72: '18rem', // 288px
|
|
80: '20rem', // 320px
|
|
96: '24rem' // 384px
|
|
};
|
|
|
|
// Border radius
|
|
export const radius = {
|
|
none: '0px',
|
|
sm: '0.125rem', // 2px
|
|
DEFAULT: '0.375rem', // 6px - shadcn default
|
|
md: '0.375rem', // 6px
|
|
lg: '0.5rem', // 8px
|
|
xl: '0.75rem', // 12px
|
|
'2xl': '1rem', // 16px
|
|
'3xl': '1.5rem', // 24px
|
|
full: '9999px'
|
|
};
|
|
|
|
// Box shadows - more subtle for modern look
|
|
export const shadows = {
|
|
none: 'none',
|
|
sm: '0 1px 2px 0 rgb(0 0 0 / 0.03)',
|
|
DEFAULT: '0 2px 8px -2px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.04)',
|
|
md: '0 4px 12px -4px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.04)',
|
|
lg: '0 8px 24px -4px rgb(0 0 0 / 0.1), 0 2px 8px -2px rgb(0 0 0 / 0.04)',
|
|
xl: '0 24px 48px -12px rgb(0 0 0 / 0.18)',
|
|
'2xl': '0 32px 64px -12px rgb(0 0 0 / 0.14)',
|
|
inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.03)',
|
|
// Theme-aware shadows
|
|
card: cssManager.bdTheme(
|
|
'0 2px 8px -2px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.04)',
|
|
'0 2px 8px -2px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2)'
|
|
),
|
|
dropdown: cssManager.bdTheme(
|
|
'0 8px 24px -4px rgb(0 0 0 / 0.1), 0 2px 8px -2px rgb(0 0 0 / 0.04)',
|
|
'0 8px 24px -4px rgb(0 0 0 / 0.3), 0 2px 8px -2px rgb(0 0 0 / 0.2)'
|
|
)
|
|
};
|
|
|
|
// Transitions
|
|
export const transitions = {
|
|
all: 'all 150ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
colors: 'color, background-color, border-color, text-decoration-color, fill, stroke 150ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
opacity: 'opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
shadow: 'box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
transform: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
// Durations
|
|
fast: '150ms',
|
|
normal: '200ms',
|
|
slow: '300ms',
|
|
// Timing functions
|
|
ease: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
|
|
easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
|
|
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)'
|
|
};
|
|
|
|
// Z-index scale
|
|
export const zIndex = {
|
|
0: 0,
|
|
10: 10,
|
|
20: 20,
|
|
30: 30,
|
|
40: 40,
|
|
50: 50,
|
|
dropdown: 1000,
|
|
sticky: 1020,
|
|
fixed: 1030,
|
|
modalBackdrop: 1040,
|
|
modal: 1050,
|
|
popover: 1060,
|
|
tooltip: 1070
|
|
};
|
|
|
|
// Breakpoints
|
|
export const breakpoints = {
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
'2xl': '1536px'
|
|
};
|
|
|
|
// Container sizes
|
|
export const containers = {
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
'2xl': '1536px',
|
|
full: '100%'
|
|
};
|
|
|
|
// Common component sizes
|
|
export const sizes = {
|
|
// Button/Input heights
|
|
sm: '2rem', // 32px
|
|
DEFAULT: '2.5rem', // 40px
|
|
lg: '3rem', // 48px
|
|
|
|
// Icon sizes
|
|
icon: {
|
|
sm: '1rem', // 16px
|
|
DEFAULT: '1.25rem', // 20px
|
|
lg: '1.5rem' // 24px
|
|
}
|
|
};
|
|
|
|
// Animation keyframes
|
|
export const animations = {
|
|
fadeIn: css`
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
`,
|
|
|
|
slideIn: css`
|
|
@keyframes slideIn {
|
|
from { transform: translateY(-10px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
`,
|
|
|
|
slideUp: css`
|
|
@keyframes slideUp {
|
|
from { transform: translateY(10px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
`,
|
|
|
|
scaleIn: css`
|
|
@keyframes scaleIn {
|
|
from { transform: scale(0.95); opacity: 0; }
|
|
to { transform: scale(1); opacity: 1; }
|
|
}
|
|
`,
|
|
|
|
spin: css`
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
`
|
|
};
|
|
|
|
// Focus ring styles
|
|
export const focusRing = css`
|
|
outline: 2px solid transparent;
|
|
outline-offset: 2px;
|
|
&:focus-visible {
|
|
outline-color: ${cssManager.bdTheme('hsl(0 0% 5%)', 'hsl(0 0% 84%)')};
|
|
}
|
|
`;
|
|
|
|
// Disabled styles
|
|
export const disabled = css`
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
`; |