dynamic-ds 1.0.4 → 1.0.6

package/src/lib/styles/_typography.scss

@@ -0,0 +1,587 @@
+// ============================================================================
+// TYPOGRAPHY SYSTEM - Dynamic Design System
+// ============================================================================
+// Comprehensive typography utilities for consistent text styling
+// ============================================================================
+
+// ============================================================================
+// 1. FONT FAMILY TOKENS
+// ============================================================================
+$font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+$font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+$font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
+
+:root {
+  --font-sans: #{$font-family-sans};
+  --font-mono: #{$font-family-mono};
+  --font-serif: #{$font-family-serif};
+}
+
+// ============================================================================
+// 2. FONT SIZE SCALE (Based on 4px grid, rem units)
+// ============================================================================
+// Using modular scale with 1rem = 16px base
+$font-size-2xs: 0.625rem;    // 10px
+$font-size-xs: 0.75rem;      // 12px
+$font-size-sm: 0.875rem;     // 14px
+$font-size-base: 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
+$font-size-5xl: 3rem;        // 48px
+$font-size-6xl: 3.75rem;     // 60px
+
+$font-sizes-map: (
+  '2xs': $font-size-2xs,
+  'xs': $font-size-xs,
+  'sm': $font-size-sm,
+  'base': $font-size-base,
+  'lg': $font-size-lg,
+  'xl': $font-size-xl,
+  '2xl': $font-size-2xl,
+  '3xl': $font-size-3xl,
+  '4xl': $font-size-4xl,
+  '5xl': $font-size-5xl,
+  '6xl': $font-size-6xl,
+);
+
+:root {
+  --text-2xs: #{$font-size-2xs};
+  --text-xs: #{$font-size-xs};
+  --text-sm: #{$font-size-sm};
+  --text-base: #{$font-size-base};
+  --text-lg: #{$font-size-lg};
+  --text-xl: #{$font-size-xl};
+  --text-2xl: #{$font-size-2xl};
+  --text-3xl: #{$font-size-3xl};
+  --text-4xl: #{$font-size-4xl};
+  --text-5xl: #{$font-size-5xl};
+  --text-6xl: #{$font-size-6xl};
+}
+
+// ============================================================================
+// 3. FONT WEIGHT SCALE
+// ============================================================================
+$font-weight-thin: 100;
+$font-weight-extralight: 200;
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-extrabold: 800;
+$font-weight-black: 900;
+
+$font-weights: (
+  'thin': $font-weight-thin,
+  'extralight': $font-weight-extralight,
+  'light': $font-weight-light,
+  'normal': $font-weight-normal,
+  'medium': $font-weight-medium,
+  'semibold': $font-weight-semibold,
+  'bold': $font-weight-bold,
+  'extrabold': $font-weight-extrabold,
+  'black': $font-weight-black,
+);
+
+:root {
+  --font-thin: #{$font-weight-thin};
+  --font-extralight: #{$font-weight-extralight};
+  --font-light: #{$font-weight-light};
+  --font-normal: #{$font-weight-normal};
+  --font-medium: #{$font-weight-medium};
+  --font-semibold: #{$font-weight-semibold};
+  --font-bold: #{$font-weight-bold};
+  --font-extrabold: #{$font-weight-extrabold};
+  --font-black: #{$font-weight-black};
+}
+
+// ============================================================================
+// 4. LINE HEIGHT SCALE
+// ============================================================================
+$line-height-none: 1;
+$line-height-tight: 1.25;
+$line-height-snug: 1.375;
+$line-height-normal: 1.5;
+$line-height-relaxed: 1.625;
+$line-height-loose: 2;
+
+$line-heights: (
+  'none': $line-height-none,
+  'tight': $line-height-tight,
+  'snug': $line-height-snug,
+  'normal': $line-height-normal,
+  'relaxed': $line-height-relaxed,
+  'loose': $line-height-loose,
+);
+
+:root {
+  --leading-none: #{$line-height-none};
+  --leading-tight: #{$line-height-tight};
+  --leading-snug: #{$line-height-snug};
+  --leading-normal: #{$line-height-normal};
+  --leading-relaxed: #{$line-height-relaxed};
+  --leading-loose: #{$line-height-loose};
+}
+
+// ============================================================================
+// 5. LETTER SPACING SCALE
+// ============================================================================
+$letter-spacing-tighter: -0.05em;
+$letter-spacing-tight: -0.025em;
+$letter-spacing-normal: 0;
+$letter-spacing-wide: 0.025em;
+$letter-spacing-wider: 0.05em;
+$letter-spacing-widest: 0.1em;
+
+$letter-spacings: (
+  'tighter': $letter-spacing-tighter,
+  'tight': $letter-spacing-tight,
+  'normal': $letter-spacing-normal,
+  'wide': $letter-spacing-wide,
+  'wider': $letter-spacing-wider,
+  'widest': $letter-spacing-widest,
+);
+
+:root {
+  --tracking-tighter: #{$letter-spacing-tighter};
+  --tracking-tight: #{$letter-spacing-tight};
+  --tracking-normal: #{$letter-spacing-normal};
+  --tracking-wide: #{$letter-spacing-wide};
+  --tracking-wider: #{$letter-spacing-wider};
+  --tracking-widest: #{$letter-spacing-widest};
+}
+
+// ============================================================================
+// 6. HEADING PRESETS
+// ============================================================================
+// Semantic heading styles combining size, weight, and line-height
+
+:root {
+  // Display headings (for hero sections, landing pages)
+  --heading-display-xl: #{$font-weight-bold} #{$font-size-6xl}/#{$line-height-tight} var(--font-sans);
+  --heading-display-lg: #{$font-weight-bold} #{$font-size-5xl}/#{$line-height-tight} var(--font-sans);
+  --heading-display-md: #{$font-weight-bold} #{$font-size-4xl}/#{$line-height-tight} var(--font-sans);
+  
+  // Standard headings
+  --heading-h1: #{$font-weight-bold} #{$font-size-3xl}/#{$line-height-tight} var(--font-sans);
+  --heading-h2: #{$font-weight-semibold} #{$font-size-2xl}/#{$line-height-snug} var(--font-sans);
+  --heading-h3: #{$font-weight-semibold} #{$font-size-xl}/#{$line-height-snug} var(--font-sans);
+  --heading-h4: #{$font-weight-semibold} #{$font-size-lg}/#{$line-height-normal} var(--font-sans);
+  --heading-h5: #{$font-weight-medium} #{$font-size-base}/#{$line-height-normal} var(--font-sans);
+  --heading-h6: #{$font-weight-medium} #{$font-size-sm}/#{$line-height-normal} var(--font-sans);
+}
+
+// ============================================================================
+// 7. BODY TEXT PRESETS
+// ============================================================================
+:root {
+  --body-lg: #{$font-weight-normal} #{$font-size-lg}/#{$line-height-relaxed} var(--font-sans);
+  --body-base: #{$font-weight-normal} #{$font-size-base}/#{$line-height-normal} var(--font-sans);
+  --body-sm: #{$font-weight-normal} #{$font-size-sm}/#{$line-height-normal} var(--font-sans);
+  --body-xs: #{$font-weight-normal} #{$font-size-xs}/#{$line-height-normal} var(--font-sans);
+}
+
+// ============================================================================
+// 8. UTILITY TEXT PRESETS
+// ============================================================================
+:root {
+  // Labels
+  --label-lg: #{$font-weight-medium} #{$font-size-base}/#{$line-height-tight} var(--font-sans);
+  --label-base: #{$font-weight-medium} #{$font-size-sm}/#{$line-height-tight} var(--font-sans);
+  --label-sm: #{$font-weight-medium} #{$font-size-xs}/#{$line-height-tight} var(--font-sans);
+  
+  // Captions
+  --caption: #{$font-weight-normal} #{$font-size-xs}/#{$line-height-normal} var(--font-sans);
+  --caption-strong: #{$font-weight-medium} #{$font-size-xs}/#{$line-height-normal} var(--font-sans);
+  
+  // Overline (small caps style)
+  --overline: #{$font-weight-semibold} #{$font-size-2xs}/#{$line-height-normal} var(--font-sans);
+  
+  // Code/Monospace
+  --code: #{$font-weight-normal} #{$font-size-sm}/#{$line-height-normal} var(--font-mono);
+  --code-sm: #{$font-weight-normal} #{$font-size-xs}/#{$line-height-normal} var(--font-mono);
+}
+
+// ============================================================================
+// 9. FONT FAMILY UTILITY CLASSES
+// ============================================================================
+.font-sans { font-family: var(--font-sans) !important; }
+.font-mono { font-family: var(--font-mono) !important; }
+.font-serif { font-family: var(--font-serif) !important; }
+
+// ============================================================================
+// 10. FONT SIZE UTILITY CLASSES
+// ============================================================================
+@each $name, $size in $font-sizes-map {
+  .text-#{$name} {
+    font-size: $size !important;
+  }
+}
+
+// ============================================================================
+// 11. FONT WEIGHT UTILITY CLASSES
+// ============================================================================
+@each $name, $weight in $font-weights {
+  .font-#{$name} {
+    font-weight: $weight !important;
+  }
+}
+
+// ============================================================================
+// 12. LINE HEIGHT UTILITY CLASSES
+// ============================================================================
+@each $name, $height in $line-heights {
+  .leading-#{$name} {
+    line-height: $height !important;
+  }
+}
+
+// Fixed line heights (for precise control)
+.leading-3 { line-height: 0.75rem !important; }  // 12px
+.leading-4 { line-height: 1rem !important; }     // 16px
+.leading-5 { line-height: 1.25rem !important; }  // 20px
+.leading-6 { line-height: 1.5rem !important; }   // 24px
+.leading-7 { line-height: 1.75rem !important; }  // 28px
+.leading-8 { line-height: 2rem !important; }     // 32px
+.leading-9 { line-height: 2.25rem !important; }  // 36px
+.leading-10 { line-height: 2.5rem !important; }  // 40px
+
+// ============================================================================
+// 13. LETTER SPACING UTILITY CLASSES
+// ============================================================================
+@each $name, $spacing in $letter-spacings {
+  .tracking-#{$name} {
+    letter-spacing: $spacing !important;
+  }
+}
+
+// ============================================================================
+// 14. TEXT ALIGNMENT UTILITY CLASSES
+// ============================================================================
+.text-left { text-align: left !important; }
+.text-center { text-align: center !important; }
+.text-right { text-align: right !important; }
+.text-justify { text-align: justify !important; }
+.text-start { text-align: start !important; }
+.text-end { text-align: end !important; }
+
+// ============================================================================
+// 15. TEXT DECORATION UTILITY CLASSES
+// ============================================================================
+.underline { text-decoration: underline !important; }
+.overline { text-decoration: overline !important; }
+.line-through { text-decoration: line-through !important; }
+.no-underline { text-decoration: none !important; }
+
+// Decoration styles
+.decoration-solid { text-decoration-style: solid !important; }
+.decoration-double { text-decoration-style: double !important; }
+.decoration-dotted { text-decoration-style: dotted !important; }
+.decoration-dashed { text-decoration-style: dashed !important; }
+.decoration-wavy { text-decoration-style: wavy !important; }
+
+// Decoration thickness
+.decoration-thin { text-decoration-thickness: 1px !important; }
+.decoration-thick { text-decoration-thickness: 2px !important; }
+.decoration-auto { text-decoration-thickness: auto !important; }
+
+// ============================================================================
+// 16. TEXT TRANSFORM UTILITY CLASSES
+// ============================================================================
+.uppercase { text-transform: uppercase !important; }
+.lowercase { text-transform: lowercase !important; }
+.capitalize { text-transform: capitalize !important; }
+.normal-case { text-transform: none !important; }
+
+// ============================================================================
+// 17. TEXT OVERFLOW & WRAPPING UTILITY CLASSES
+// ============================================================================
+.truncate {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+.text-ellipsis { text-overflow: ellipsis !important; }
+.text-clip { text-overflow: clip !important; }
+
+.whitespace-normal { white-space: normal !important; }
+.whitespace-nowrap { white-space: nowrap !important; }
+.whitespace-pre { white-space: pre !important; }
+.whitespace-pre-line { white-space: pre-line !important; }
+.whitespace-pre-wrap { white-space: pre-wrap !important; }
+.whitespace-break-spaces { white-space: break-spaces !important; }
+
+.break-normal { 
+  overflow-wrap: normal !important; 
+  word-break: normal !important; 
+}
+.break-words { overflow-wrap: break-word !important; }
+.break-all { word-break: break-all !important; }
+.break-keep { word-break: keep-all !important; }
+
+// Line clamp utilities (multi-line truncation)
+.line-clamp-1 {
+  display: -webkit-box !important;
+  -webkit-line-clamp: 1 !important;
+  -webkit-box-orient: vertical !important;
+  overflow: hidden !important;
+}
+.line-clamp-2 {
+  display: -webkit-box !important;
+  -webkit-line-clamp: 2 !important;
+  -webkit-box-orient: vertical !important;
+  overflow: hidden !important;
+}
+.line-clamp-3 {
+  display: -webkit-box !important;
+  -webkit-line-clamp: 3 !important;
+  -webkit-box-orient: vertical !important;
+  overflow: hidden !important;
+}
+.line-clamp-4 {
+  display: -webkit-box !important;
+  -webkit-line-clamp: 4 !important;
+  -webkit-box-orient: vertical !important;
+  overflow: hidden !important;
+}
+.line-clamp-5 {
+  display: -webkit-box !important;
+  -webkit-line-clamp: 5 !important;
+  -webkit-box-orient: vertical !important;
+  overflow: hidden !important;
+}
+.line-clamp-none {
+  -webkit-line-clamp: unset !important;
+}
+
+// ============================================================================
+// 18. SEMANTIC HEADING CLASSES
+// ============================================================================
+.display-xl {
+  font: var(--heading-display-xl);
+  color: var(--neutral-color-900);
+}
+.display-lg {
+  font: var(--heading-display-lg);
+  color: var(--neutral-color-900);
+}
+.display-md {
+  font: var(--heading-display-md);
+  color: var(--neutral-color-900);
+}
+
+.heading-h1, h1.ds {
+  font: var(--heading-h1);
+  color: var(--neutral-color-875);
+  margin: 0 0 0.5em;
+}
+.heading-h2, h2.ds {
+  font: var(--heading-h2);
+  color: var(--neutral-color-875);
+  margin: 0 0 0.5em;
+}
+.heading-h3, h3.ds {
+  font: var(--heading-h3);
+  color: var(--neutral-color-850);
+  margin: 0 0 0.5em;
+}
+.heading-h4, h4.ds {
+  font: var(--heading-h4);
+  color: var(--neutral-color-850);
+  margin: 0 0 0.5em;
+}
+.heading-h5, h5.ds {
+  font: var(--heading-h5);
+  color: var(--neutral-color-800);
+  margin: 0 0 0.5em;
+}
+.heading-h6, h6.ds {
+  font: var(--heading-h6);
+  color: var(--neutral-color-800);
+  margin: 0 0 0.5em;
+}
+
+// ============================================================================
+// 19. SEMANTIC BODY TEXT CLASSES
+// ============================================================================
+.body-lg {
+  font: var(--body-lg);
+  color: var(--neutral-color-700);
+}
+.body-base, p.ds {
+  font: var(--body-base);
+  color: var(--neutral-color-700);
+  margin: 0 0 1em;
+}
+.body-sm {
+  font: var(--body-sm);
+  color: var(--neutral-color-600);
+}
+.body-xs {
+  font: var(--body-xs);
+  color: var(--neutral-color-600);
+}
+
+// ============================================================================
+// 20. SEMANTIC UTILITY TEXT CLASSES
+// ============================================================================
+.label-lg {
+  font: var(--label-lg);
+  color: var(--neutral-color-800);
+}
+.label-base {
+  font: var(--label-base);
+  color: var(--neutral-color-800);
+}
+.label-sm {
+  font: var(--label-sm);
+  color: var(--neutral-color-700);
+}
+
+.caption {
+  font: var(--caption);
+  color: var(--neutral-color-500);
+}
+.caption-strong {
+  font: var(--caption-strong);
+  color: var(--neutral-color-600);
+}
+
+.overline-text {
+  font: var(--overline);
+  color: var(--neutral-color-500);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wider);
+}
+
+.code {
+  font: var(--code);
+  color: var(--neutral-color-800);
+  background-color: var(--neutral-color-25);
+  padding: 0.125em 0.25em;
+  border-radius: 0.25em;
+}
+.code-sm {
+  font: var(--code-sm);
+  color: var(--neutral-color-800);
+  background-color: var(--neutral-color-25);
+  padding: 0.125em 0.25em;
+  border-radius: 0.25em;
+}
+
+// ============================================================================
+// 21. VERTICAL RHYTHM HELPERS
+// ============================================================================
+.prose {
+  font: var(--body-base);
+  color: var(--neutral-color-700);
+  max-width: 65ch;
+  
+  > * + * {
+    margin-top: 1.25em;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 2em;
+    margin-bottom: 0.75em;
+  }
+  
+  h1 { font: var(--heading-h1); color: var(--neutral-color-875); }
+  h2 { font: var(--heading-h2); color: var(--neutral-color-875); }
+  h3 { font: var(--heading-h3); color: var(--neutral-color-850); }
+  h4 { font: var(--heading-h4); color: var(--neutral-color-850); }
+  
+  p { margin: 1.25em 0; }
+  
+  ul, ol {
+    padding-left: 1.5em;
+    margin: 1.25em 0;
+  }
+  
+  li {
+    margin: 0.5em 0;
+  }
+  
+  blockquote {
+    border-left: 3px solid var(--primary-300);
+    padding-left: 1em;
+    margin: 1.5em 0;
+    font-style: italic;
+    color: var(--neutral-color-600);
+  }
+  
+  code {
+    font: var(--code);
+    background-color: var(--neutral-color-25);
+    padding: 0.125em 0.25em;
+    border-radius: 0.25em;
+  }
+  
+  pre {
+    background-color: var(--neutral-color-875);
+    color: var(--neutral-color-100);
+    padding: 1em;
+    border-radius: 0.5em;
+    overflow-x: auto;
+    
+    code {
+      background: none;
+      padding: 0;
+      color: inherit;
+    }
+  }
+  
+  a {
+    color: var(--primary-600);
+    text-decoration: underline;
+    
+    &:hover {
+      color: var(--primary-700);
+    }
+  }
+  
+  hr {
+    border: none;
+    border-top: 1px solid var(--neutral-color-100);
+    margin: 2em 0;
+  }
+}
+
+// Compact prose variant
+.prose-sm {
+  @extend .prose;
+  font: var(--body-sm);
+  
+  > * + * {
+    margin-top: 1em;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+  }
+}
+
+// ============================================================================
+// 22. SELECTION STYLING
+// ============================================================================
+::selection {
+  background-color: var(--primary-200);
+  color: var(--primary-900);
+}
+
+.selection-primary::selection,
+.selection-primary *::selection {
+  background-color: var(--primary-200);
+  color: var(--primary-900);
+}
+
+.selection-brand::selection,
+.selection-brand *::selection {
+  background-color: var(--brand-200);
+  color: var(--brand-900);
+}

package/src/lib/styles/system-design.scss

@@ -579,6 +579,21 @@ $radius: (
 }
 
 // ============================================================================
-// 10. ICON SYSTEM
+// 10. TYPOGRAPHY SYSTEM
+// ============================================================================
+@import "typography";
+
+// ============================================================================
+// 11. SPACING & LAYOUT SYSTEM
+// ============================================================================
+@import "spacing";
+
+// ============================================================================
+// 12. ANIMATION SYSTEM
+// ============================================================================
+@import "animations";
+
+// ============================================================================
+// 13. ICON SYSTEM
 // ============================================================================
 @import "icons";