dss/admin-ui/src/stories/Typography.stories.js

/**
 * Typography - Foundation
 * Font families, sizes, weights, and composed styles
 * @generated 2025-12-12T07:22:24.843821
 */
export default {
  title: 'Foundation/Typography',
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component: 'Typography primitives and composed text styles.'
      }
    }
  }
};

const styles = `
  .typo-container { font-family: system-ui, sans-serif; }
  .section { margin-bottom: 3rem; }
  .section h2 { font-size: 1.25rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; margin-bottom: 1rem; }
  .font-sample { margin-bottom: 1.5rem; }
  .sample-text { font-size: 1.5rem; margin-bottom: 0.25rem; }
  .meta { font-size: 0.75rem; font-family: monospace; }
  .meta .name { font-weight: 600; margin-right: 1rem; }
  .meta .value { color: #6b7280; }
  .size-grid, .weight-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; }
  .size-sample, .weight-sample { text-align: center; min-width: 60px; }
  .size-sample .text { display: block; margin-bottom: 0.25rem; }
  .weight-sample .text { display: block; margin-bottom: 0.25rem; font-size: 1.5rem; }
  .name { font-size: 0.75rem; font-weight: 500; display: block; }
  .value { font-size: 0.65rem; color: #6b7280; font-family: monospace; }
  .props { color: #6b7280; font-family: monospace; }
  .style-sample { margin-bottom: 1rem; border-bottom: 1px solid #f3f4f6; padding-bottom: 1rem; }
  .style-sample .text { margin-bottom: 0.25rem; color: var(--color-foreground, #18181b); }
`;

export const FontFamilies = {
  render: () => `
    <style>${styles}</style>
    <div class="typo-container">
      <div class="section">
        <h2>Font Families</h2>
        
      <div class="font-sample">
        <div class="sample-text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
          The quick brown fox jumps over the lazy dog
        </div>
        <div class="meta">
          <span class="name">sans</span>
          <span class="value">Inter, ui-sans-serif, system-ui, -apple-...</span>
        </div>
      </div>
      <div class="font-sample">
        <div class="sample-text" style="font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">
          The quick brown fox jumps over the lazy dog
        </div>
        <div class="meta">
          <span class="name">serif</span>
          <span class="value">ui-serif, Georgia, Cambria, 'Times New R...</span>
        </div>
      </div>
      <div class="font-sample">
        <div class="sample-text" style="font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;">
          The quick brown fox jumps over the lazy dog
        </div>
        <div class="meta">
          <span class="name">mono</span>
          <span class="value">ui-monospace, SFMono-Regular, 'SF Mono',...</span>
        </div>
      </div>
      </div>
    </div>
  `
};

export const FontSizes = {
  render: () => `
    <style>${styles}</style>
    <div class="typo-container">
      <div class="section">
        <h2>Font Sizes</h2>
        <div class="size-grid">
      <div class="size-sample">
        <span class="text" style="font-size: 0.75rem;">Aa</span>
        <span class="name">xs</span>
        <span class="value">0.75rem</span>
      </div>
      <div class="size-sample">
        <span class="text" style="font-size: 0.875rem;">Aa</span>
        <span class="name">sm</span>
        <span class="value">0.875rem</span>
      </div>
      <div class="size-sample">
        <span class="text" style="font-size: 1rem;">Aa</span>
        <span class="name">base</span>
        <span class="value">1rem</span>
      </div>
      <div class="size-sample">
        <span class="text" style="font-size: 1.125rem;">Aa</span>
        <span class="name">lg</span>
        <span class="value">1.125rem</span>
      </div>
      <div class="size-sample">
        <span class="text" style="font-size: 1.25rem;">Aa</span>
        <span class="name">xl</span>
        <span class="value">1.25rem</span>
      </div>
      <div class="size-sample">
        <span class="text" style="font-size: 1.5rem;">Aa</span>
        <span class="name">2xl</span>
        <span class="value">1.5rem</span>
      </div>
      <div class="size-sample">
        <span class="text" style="font-size: 1.875rem;">Aa</span>
        <span class="name">3xl</span>
        <span class="value">1.875rem</span>
      </div>
      <div class="size-sample">
        <span class="text" style="font-size: 2.25rem;">Aa</span>
        <span class="name">4xl</span>
        <span class="value">2.25rem</span>
      </div>
      <div class="size-sample">
        <span class="text" style="font-size: 3rem;">Aa</span>
        <span class="name">5xl</span>
        <span class="value">3rem</span>
      </div>
      <div class="size-sample">
        <span class="text" style="font-size: 3.75rem;">Aa</span>
        <span class="name">6xl</span>
        <span class="value">3.75rem</span>
      </div>
      <div class="size-sample">
        <span class="text" style="font-size: 4.5rem;">Aa</span>
        <span class="name">7xl</span>
        <span class="value">4.5rem</span>
      </div>
      <div class="size-sample">
        <span class="text" style="font-size: 6rem;">Aa</span>
        <span class="name">8xl</span>
        <span class="value">6rem</span>
      </div>
      <div class="size-sample">
        <span class="text" style="font-size: 8rem;">Aa</span>
        <span class="name">9xl</span>
        <span class="value">8rem</span>
      </div></div>
      </div>
    </div>
  `
};

export const FontWeights = {
  render: () => `
    <style>${styles}</style>
    <div class="typo-container">
      <div class="section">
        <h2>Font Weights</h2>
        <div class="weight-grid">
      <div class="weight-sample">
        <span class="text" style="font-weight: 100;">Aa</span>
        <span class="name">thin</span>
        <span class="value">100</span>
      </div>
      <div class="weight-sample">
        <span class="text" style="font-weight: 200;">Aa</span>
        <span class="name">extralight</span>
        <span class="value">200</span>
      </div>
      <div class="weight-sample">
        <span class="text" style="font-weight: 300;">Aa</span>
        <span class="name">light</span>
        <span class="value">300</span>
      </div>
      <div class="weight-sample">
        <span class="text" style="font-weight: 400;">Aa</span>
        <span class="name">normal</span>
        <span class="value">400</span>
      </div>
      <div class="weight-sample">
        <span class="text" style="font-weight: 500;">Aa</span>
        <span class="name">medium</span>
        <span class="value">500</span>
      </div>
      <div class="weight-sample">
        <span class="text" style="font-weight: 600;">Aa</span>
        <span class="name">semibold</span>
        <span class="value">600</span>
      </div>
      <div class="weight-sample">
        <span class="text" style="font-weight: 700;">Aa</span>
        <span class="name">bold</span>
        <span class="value">700</span>
      </div>
      <div class="weight-sample">
        <span class="text" style="font-weight: 800;">Aa</span>
        <span class="name">extrabold</span>
        <span class="value">800</span>
      </div>
      <div class="weight-sample">
        <span class="text" style="font-weight: 900;">Aa</span>
        <span class="name">black</span>
        <span class="value">900</span>
      </div></div>
      </div>
    </div>
  `
};

export const TextStyles = {
  render: () => `
    <style>${styles}</style>
    <div class="typo-container">
      <div class="section">
        <h2>Composed Text Styles</h2>
        
      <div class="style-sample">
        <div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 3rem; font-weight: 700; line-height: 1;">
          The quick brown fox
        </div>
        <div class="meta">
          <span class="name">heading-1</span>
          <span class="props">3rem / 700</span>
        </div>
      </div>
      <div class="style-sample">
        <div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1.875rem; font-weight: 600; line-height: 1.2;">
          The quick brown fox
        </div>
        <div class="meta">
          <span class="name">heading-2</span>
          <span class="props">1.875rem / 600</span>
        </div>
      </div>
      <div class="style-sample">
        <div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 1.3;">
          The quick brown fox
        </div>
        <div class="meta">
          <span class="name">heading-3</span>
          <span class="props">1.5rem / 600</span>
        </div>
      </div>
      <div class="style-sample">
        <div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.4;">
          The quick brown fox
        </div>
        <div class="meta">
          <span class="name">heading-4</span>
          <span class="props">1.25rem / 600</span>
        </div>
      </div>
      <div class="style-sample">
        <div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5;">
          The quick brown fox
        </div>
        <div class="meta">
          <span class="name">paragraph-regular</span>
          <span class="props">1rem / 400</span>
        </div>
      </div>
      <div class="style-sample">
        <div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5;">
          The quick brown fox
        </div>
        <div class="meta">
          <span class="name">paragraph-bold</span>
          <span class="props">1rem / 500</span>
        </div>
      </div>
      <div class="style-sample">
        <div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; font-weight: 400; line-height: 1.5;">
          The quick brown fox
        </div>
        <div class="meta">
          <span class="name">paragraph-small-regular</span>
          <span class="props">0.875rem / 400</span>
        </div>
      </div>
      </div>
    </div>
  `
};