@repobit/dex-system-design 0.21.1 → 0.22.0

package/src/components/pricing-cards/pricing-card.stories.js

@@ -1,10 +1,10 @@
 import { html } from 'lit';
-import './pricing-card.js'; 
+import './pricing-card.js';
 
 export default {
-  title: 'Components/Pricing Cards', 
+  title    : 'Components/Pricing Cards',
   component: 'bd-pricing-container',
-   tags: ["autodocs"],
+  tags     : ["autodocs"]
 };
 
 const Template = () => html`<bd-pricing-container></bd-pricing-container>`;

package/src/tokens/fonts.stories.js

@@ -2,22 +2,218 @@ import { html } from 'lit';
 
 export default {
   title: 'Design Tokens/Fonts',
+  tags : ['autodocs'],
+
+  argTypes: {
+    sampleText: {
+      control    : 'text',
+      description: 'Text sample to display',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'The quick brown fox jumps over the lazy dog.' }
+      }
+    },
+    fontSize: {
+      control    : { type: 'select' },
+      options    : ['small', 'medium', 'large', 'xlarge'],
+      description: 'Font size demonstration',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'medium' }
+      }
+    }
+  },
+
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# Font Tokens & Typography System
+
+Design tokens and typography system using IBM Plex font family.
+
+## Overview
+
+This system uses IBM Plex as the primary font family with CSS custom properties for consistent typography across the application.
+
+## Font Families
+
+### IBM Plex Sans
+Primary font for UI text, headings, and body content.
+
+**CSS Custom Property:** \`--font-family-sans\`
+
+### IBM Plex Mono
+Monospaced font for code, technical content, and data display.
+
+**CSS Custom Property:** \`--font-family-mono\`
+
+## Usage
+
+### In CSS
+\`\`\`css
+/* Using CSS custom properties */
+.element {
+  font-family: var(--font-family-sans);
+  font-weight: 600;
+}
+
+.code-block {
+  font-family: var(--font-family-mono);
+  font-size: 0.875rem;
+}
+\`\`\`
+
+### In HTML with Classes
+\`\`\`html
+<div class="sans-normal">Regular text</div>
+<div class="sans-semibold">Semi-bold text</div>
+<div class="mono-regular">Code example</div>
+\`\`\`
+
+## Available Weights & Styles
+
+### IBM Plex Sans
+| Class | Weight | Style | Use Case |
+|-------|--------|-------|----------|
+| \`.sans-normal\` | 400 | Normal | Body text, paragraphs |
+| \`.sans-semibold\` | 600 | Normal | Subheadings, emphasis |
+| \`.sans-bold\` | 700 | Normal | Headings, titles |
+| \`.sans-italic\` | 400 | Italic | Quotes, highlights |
+
+### IBM Plex Mono
+| Class | Weight | Style | Use Case |
+|-------|--------|-------|----------|
+| \`.mono-regular\` | 400 | Normal | Code snippets, technical text |
+| \`.mono-bold\` | 700 | Normal | Important code, errors |
+| \`.mono-italic\` | 400 | Italic | Comments, annotations |
+
+## CSS Custom Properties
+
+\`\`\`css
+:root {
+  /* Font families */
+  --font-family-sans: 'IBM Plex Sans', Arial, sans-serif;
+  --font-family-mono: 'IBM Plex Mono', monospace;
+  
+  /* Font sizes */
+  --font-size-xs: 0.75rem;   /* 12px */
+  --font-size-sm: 0.875rem;  /* 14px */
+  --font-size-md: 1rem;      /* 16px */
+  --font-size-lg: 1.125rem;  /* 18px */
+  --font-size-xl: 1.25rem;   /* 20px */
+  --font-size-2xl: 1.5rem;   /* 24px */
+  --font-size-3xl: 1.875rem; /* 30px */
+  --font-size-4xl: 2.25rem;  /* 36px */
+  
+  /* Line heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+}
+\`\`\`
+
+## Best Practices
+
+1. **Use semantic HTML**: Always use proper heading tags (h1-h6) for structure
+2. **Respect hierarchy**: Maintain consistent font size hierarchy
+3. **Contrast ratio**: Ensure minimum 4.5:1 contrast for normal text
+4. **Line length**: Keep line length between 50-75 characters for readability
+5. **Responsive**: Use relative units (rem, em) for font sizes
+
+## Browser Support
+
+IBM Plex is supported in all modern browsers:
+- Chrome 60+
+- Firefox 55+
+- Safari 11+
+- Edge 79+
+
+## Loading Fonts
+
+Fonts are loaded via \`@font-face\` declarations in the global styles:
+
+\`\`\`css
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/ibm-plex-sans-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: url('/fonts/ibm-plex-sans-italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url('/fonts/ibm-plex-sans-semibold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/ibm-plex-sans-bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/ibm-plex-mono-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 400;
+  src: url('/fonts/ibm-plex-mono-italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/ibm-plex-mono-bold.woff2') format('woff2');
+}
+\`\`\`
+        `
+      }
+    }
+  }
 };
 
-export const FontFace = () => html`
+const Template = (args) => html`
   <style>
     section {
       margin-bottom: 24px;
+      padding: 16px;
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
     h3 {
       font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
       font-weight: 600;
       font-size: 1.2rem;
       margin-bottom: 12px;
+      color: #333;
+      border-bottom: 2px solid #f0f0f0;
+      padding-bottom: 8px;
     }
     .sample {
       margin-bottom: 12px;
       font-size: 1.1rem;
+      line-height: 1.5;
+      padding: 8px;
+      background: #fafafa;
+      border-radius: 4px;
     }
     .sans-normal {
       font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
@@ -43,31 +239,162 @@ export const FontFace = () => html`
       font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
       font-weight: 400;
       font-style: normal;
+      background: #f5f5f5;
+      border-left: 3px solid #ddd;
     }
     .mono-bold {
       font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
       font-weight: 700;
       font-style: normal;
+      background: #f5f5f5;
+      border-left: 3px solid #ddd;
     }
     .mono-italic {
       font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
       font-weight: 400;
       font-style: italic;
+      background: #f5f5f5;
+      border-left: 3px solid #ddd;
+    }
+    .font-info {
+      font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
+      font-size: 0.85rem;
+      color: #666;
+      margin-top: 4px;
+      padding-left: 12px;
+    }
+    .token-display {
+      background: #2d2d2d;
+      color: #fff;
+      padding: 12px;
+      border-radius: 4px;
+      font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
+      font-size: 0.9rem;
+      margin-top: 16px;
+    }
+    .token-property {
+      color: #9cdcfe;
+    }
+    .token-value {
+      color: #ce9178;
     }
   </style>
 
   <section>
     <h3>IBM Plex Sans - Weights & Styles</h3>
-    <div class="sample sans-normal">Regular 400 - The quick brown fox jumps over the lazy dog.</div>
-    <div class="sample sans-semibold">SemiBold 600 - The quick brown fox jumps over the lazy dog.</div>
-    <div class="sample sans-bold">Bold 700 - The quick brown fox jumps over the lazy dog.</div>
-    <div class="sample sans-italic">Italic 400 - The quick brown fox jumps over the lazy dog.</div>
+    <div class="sample sans-normal">
+      ${args.sampleText}
+      <div class="font-info">font-family: var(--font-family-sans); font-weight: 400;</div>
+    </div>
+    <div class="sample sans-semibold">
+      ${args.sampleText}
+      <div class="font-info">font-family: var(--font-family-sans); font-weight: 600;</div>
+    </div>
+    <div class="sample sans-bold">
+      ${args.sampleText}
+      <div class="font-info">font-family: var(--font-family-sans); font-weight: 700;</div>
+    </div>
+    <div class="sample sans-italic">
+      ${args.sampleText}
+      <div class="font-info">font-family: var(--font-family-sans); font-weight: 400; font-style: italic;</div>
+    </div>
   </section>
 
   <section>
     <h3>IBM Plex Mono - Weights & Styles</h3>
-    <div class="sample mono-regular">Regular 400 - The quick brown fox jumps over the lazy dog.</div>
-    <div class="sample mono-bold">Bold 700 - The quick brown fox jumps over the lazy dog.</div>
-    <div class="sample mono-italic">Italic 400 - The quick brown fox jumps over the lazy dog.</div>
+    <div class="sample mono-regular">
+      ${args.sampleText}
+      <div class="font-info">font-family: var(--font-family-mono); font-weight: 400;</div>
+    </div>
+    <div class="sample mono-bold">
+      ${args.sampleText}
+      <div class="font-info">font-family: var(--font-family-mono); font-weight: 700;</div>
+    </div>
+    <div class="sample mono-italic">
+      ${args.sampleText}
+      <div class="font-info">font-family: var(--font-family-mono); font-weight: 400; font-style: italic;</div>
+    </div>
+  </section>
+
+  <section>
+    <h3>CSS Custom Properties</h3>
+    <div class="token-display">
+      <span class="token-property">--font-family-sans</span>: <span class="token-value">'IBM Plex Sans', Arial, sans-serif</span>;<br>
+      <span class="token-property">--font-family-mono</span>: <span class="token-value">'IBM Plex Mono', monospace</span>;<br><br>
+      <span class="token-property">.sans-normal</span> {<br>
+      &nbsp;&nbsp;<span class="token-property">font-family</span>: <span class="token-value">var(--font-family-sans)</span>;<br>
+      &nbsp;&nbsp;<span class="token-property">font-weight</span>: <span class="token-value">400</span>;<br>
+      }<br><br>
+      <span class="token-property">.mono-regular</span> {<br>
+      &nbsp;&nbsp;<span class="token-property">font-family</span>: <span class="token-value">var(--font-family-mono)</span>;<br>
+      &nbsp;&nbsp;<span class="token-property">font-weight</span>: <span class="token-value">400</span>;<br>
+      }
+    </div>
   </section>
 `;
+
+export const Default = Template.bind({});
+Default.args = {
+  sampleText: 'The quick brown fox jumps over the lazy dog.',
+  fontSize  : 'medium'
+};
+
+export const CustomText = Template.bind({});
+CustomText.args = {
+  sampleText: 'Typography is the craft of arranging type to make language visible.',
+  fontSize  : 'medium'
+};
+
+export const TechnicalExample = () => html`
+  <style>
+    .code-example {
+      background: #1e1e1e;
+      color: #d4d4d4;
+      padding: 20px;
+      border-radius: 8px;
+      font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
+      font-size: 0.9rem;
+      line-height: 1.6;
+      margin: 16px 0;
+    }
+    .code-comment { color: #6a9955; }
+    .code-keyword { color: #569cd6; }
+    .code-string { color: #ce9178; }
+    .code-function { color: #dcdcaa; }
+    .code-number { color: #b5cea8; }
+  </style>
+
+  <section style="background: white; padding: 20px; border-radius: 8px;">
+    <h3 class="sans-semibold">Real-world Usage Example</h3>
+    
+    <div class="sans-normal" style="margin-bottom: 16px;">
+      This is regular body text using IBM Plex Sans. It's used for most UI text and content.
+    </div>
+    
+    <div class="sans-bold" style="margin-bottom: 16px;">
+      This is a bold heading using IBM Plex Sans. Perfect for section titles.
+    </div>
+    
+    <h4 class="sans-semibold" style="margin: 16px 0 8px 0;">Code Example:</h4>
+    <div class="code-example">
+      <span class="code-comment">// JavaScript function example</span><br>
+      <span class="code-keyword">function</span> <span class="code-function">calculateTotal</span>(<span class="code-keyword">items</span>) {<br>
+      &nbsp;&nbsp;<span class="code-keyword">let</span> total = <span class="code-number">0</span>;<br>
+      &nbsp;&nbsp;<span class="code-keyword">for</span> (<span class="code-keyword">let</span> item <span class="code-keyword">of</span> items) {<br>
+      &nbsp;&nbsp;&nbsp;&nbsp;total += item.price * item.quantity;<br>
+      &nbsp;&nbsp;}<br>
+      &nbsp;&nbsp;<span class="code-keyword">return</span> total.<span class="code-function">toFixed</span>(<span class="code-number">2</span>);<br>
+      }<br><br>
+      <span class="code-comment">// Configuration object</span><br>
+      <span class="code-keyword">const</span> config = {<br>
+      &nbsp;&nbsp;apiUrl: <span class="code-string">'https://api.example.com/v1'</span>,<br>
+      &nbsp;&nbsp;timeout: <span class="code-number">5000</span>,<br>
+      &nbsp;&nbsp;retries: <span class="code-number">3</span><br>
+      };
+    </div>
+    
+    <div class="sans-italic" style="margin-top: 16px; color: #666;">
+      Note: Code blocks use IBM Plex Mono for better readability of technical content.
+    </div>
+  </section>
+`;