update

2025-07-14 10:13:02 +00:00
parent b49707a727
commit ba791ee18a
7 changed files with 2852 additions and 1273 deletions
--- a/ts_web/elements/00fonts.ts
+++ b/ts_web/elements/00fonts.ts
@@ -0,0 +1,145 @@
+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;
+  }
+`;