145 lines
3.0 KiB
TypeScript
145 lines
3.0 KiB
TypeScript
|
import { css } from '@design.estate/dees-element';
|
||
|
|
|
||
|
|
// Font families matching shadcn design
|
||
|
|
export const fontFamilies = {
|
||
|
|
sans: `'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`,
|
||
|
|
mono: `'Geist Mono', 'SF Mono', Monaco, 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace`
|
||
|
|
};
|
||
|
|
|
||
|
|
// Font sizes following shadcn scale
|
||
|
|
export const fontSizes = {
|
||
|
|
xs: '0.75rem', // 12px
|
||
|
|
sm: '0.875rem', // 14px
|
||
|
|
base: '1rem', // 16px
|
||
|
|
lg: '1.125rem', // 18px
|
||
|
|
xl: '1.25rem', // 20px
|
||
|
|
'2xl': '1.5rem', // 24px
|
||
|
|
'3xl': '1.875rem', // 30px
|
||
|
|
'4xl': '2.25rem', // 36px
|
||
|
|
'5xl': '3rem', // 48px
|
||
|
|
'6xl': '3.75rem', // 60px
|
||
|
|
'7xl': '4.5rem', // 72px
|
||
|
|
'8xl': '6rem', // 96px
|
||
|
|
'9xl': '8rem' // 128px
|
||
|
|
};
|
||
|
|
|
||
|
|
// Line heights
|
||
|
|
export const lineHeights = {
|
||
|
|
none: '1',
|
||
|
|
tight: '1.25',
|
||
|
|
snug: '1.375',
|
||
|
|
normal: '1.5',
|
||
|
|
relaxed: '1.625',
|
||
|
|
loose: '2'
|
||
|
|
};
|
||
|
|
|
||
|
|
// Font weights
|
||
|
|
export const fontWeights = {
|
||
|
|
thin: '100',
|
||
|
|
extralight: '200',
|
||
|
|
light: '300',
|
||
|
|
normal: '400',
|
||
|
|
medium: '500',
|
||
|
|
semibold: '600',
|
||
|
|
bold: '700',
|
||
|
|
extrabold: '800',
|
||
|
|
black: '900'
|
||
|
|
};
|
||
|
|
|
||
|
|
// Letter spacing
|
||
|
|
export const letterSpacing = {
|
||
|
|
tighter: '-0.05em',
|
||
|
|
tight: '-0.025em',
|
||
|
|
normal: '0em',
|
||
|
|
wide: '0.025em',
|
||
|
|
wider: '0.05em',
|
||
|
|
widest: '0.1em'
|
||
|
|
};
|
||
|
|
|
||
|
|
// Typography presets matching shadcn components
|
||
|
|
export const typography = {
|
||
|
|
h1: css`
|
||
|
|
font-size: 2.25rem;
|
||
|
|
line-height: 1.25;
|
||
|
|
font-weight: 700;
|
||
|
|
letter-spacing: -0.025em;
|
||
|
|
`,
|
||
|
|
|
||
|
|
h2: css`
|
||
|
|
font-size: 1.875rem;
|
||
|
|
line-height: 1.25;
|
||
|
|
font-weight: 600;
|
||
|
|
letter-spacing: -0.025em;
|
||
|
|
`,
|
||
|
|
|
||
|
|
h3: css`
|
||
|
|
font-size: 1.5rem;
|
||
|
|
line-height: 1.375;
|
||
|
|
font-weight: 600;
|
||
|
|
`,
|
||
|
|
|
||
|
|
h4: css`
|
||
|
|
font-size: 1.25rem;
|
||
|
|
line-height: 1.375;
|
||
|
|
font-weight: 600;
|
||
|
|
`,
|
||
|
|
|
||
|
|
body: css`
|
||
|
|
font-size: 1rem;
|
||
|
|
line-height: 1.5;
|
||
|
|
font-weight: 400;
|
||
|
|
`,
|
||
|
|
|
||
|
|
bodyLarge: css`
|
||
|
|
font-size: 1.125rem;
|
||
|
|
line-height: 1.625;
|
||
|
|
font-weight: 400;
|
||
|
|
`,
|
||
|
|
|
||
|
|
bodySmall: css`
|
||
|
|
font-size: 0.875rem;
|
||
|
|
line-height: 1.5;
|
||
|
|
font-weight: 400;
|
||
|
|
`,
|
||
|
|
|
||
|
|
caption: css`
|
||
|
|
font-size: 0.75rem;
|
||
|
|
line-height: 1.5;
|
||
|
|
font-weight: 400;
|
||
|
|
`,
|
||
|
|
|
||
|
|
code: css`
|
||
|
|
font-family: 'Geist Mono', 'SF Mono', Monaco, 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
line-height: 1.5;
|
||
|
|
font-weight: 400;
|
||
|
|
`,
|
||
|
|
|
||
|
|
button: css`
|
||
|
|
font-size: 0.875rem;
|
||
|
|
line-height: 1;
|
||
|
|
font-weight: 500;
|
||
|
|
letter-spacing: 0.025em;
|
||
|
|
`,
|
||
|
|
|
||
|
|
input: css`
|
||
|
|
font-size: 1rem;
|
||
|
|
line-height: 1.5;
|
||
|
|
font-weight: 400;
|
||
|
|
`
|
||
|
|
};
|
||
|
|
|
||
|
|
// Font loading CSS
|
||
|
|
export const fontLoadingStyles = css`
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Geist Sans';
|
||
|
|
src: url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
|
||
|
|
font-display: swap;
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Geist Mono';
|
||
|
|
src: url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap');
|
||
|
|
font-display: swap;
|
||
|
|
}
|
||
|
|
`;
|