mycsslab/src/utilities/typography.css

MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects

/**
 * FluxCSS Typography Utilities
 * Font family, size, weight, and text styling utilities
 */

/* Font Family */
.my-font-sans { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
.my-font-serif { font-family: Georgia, Cambria, 'Times New Roman', Times, serif; }
.my-font-mono { font-family: 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; }

/* Font Size */
.my-text-xs { font-size: 0.75rem; line-height: 1rem; }
.my-text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.my-text-base { font-size: 1rem; line-height: 1.5rem; }
.my-text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.my-text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.my-text-2xl { font-size: 1.5rem; line-height: 2rem; }
.my-text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.my-text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.my-text-5xl { font-size: 3rem; line-height: 1; }
.my-text-6xl { font-size: 3.75rem; line-height: 1; }
.my-text-7xl { font-size: 4.5rem; line-height: 1; }
.my-text-8xl { font-size: 6rem; line-height: 1; }
.my-text-9xl { font-size: 8rem; line-height: 1; }

/* Font Weight */
.my-font-thin { font-weight: 100; }
.my-font-extralight { font-weight: 200; }
.my-font-light { font-weight: 300; }
.my-font-normal { font-weight: 400; }
.my-font-medium { font-weight: 500; }
.my-font-semibold { font-weight: 600; }
.my-font-bold { font-weight: 700; }
.my-font-extrabold { font-weight: 800; }
.my-font-black { font-weight: 900; }

/* Line Height */
.my-leading-none { line-height: 1; }
.my-leading-tight { line-height: 1.25; }
.my-leading-snug { line-height: 1.375; }
.my-leading-normal { line-height: 1.5; }
.my-leading-relaxed { line-height: 1.625; }
.my-leading-loose { line-height: 2; }

/* Letter Spacing */
.my-tracking-tighter { letter-spacing: -0.05em; }
.my-tracking-tight { letter-spacing: -0.025em; }
.my-tracking-normal { letter-spacing: 0em; }
.my-tracking-wide { letter-spacing: 0.025em; }
.my-tracking-wider { letter-spacing: 0.05em; }
.my-tracking-widest { letter-spacing: 0.1em; }

/* Text Alignment */
.my-text-left { text-align: left; }
.my-text-center { text-align: center; }
.my-text-right { text-align: right; }
.my-text-justify { text-align: justify; }

/* Text Decoration */
.my-underline { text-decoration: underline; }
.my-overline { text-decoration: overline; }
.my-line-through { text-decoration: line-through; }
.my-no-underline { text-decoration: none; }

/* Text Transform */
.my-uppercase { text-transform: uppercase; }
.my-lowercase { text-transform: lowercase; }
.my-capitalize { text-transform: capitalize; }
.my-normal-case { text-transform: none; }

/* Text Overflow */
.my-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-text-ellipsis { text-overflow: ellipsis; }
.my-text-clip { text-overflow: clip; }

/* White Space */
.my-whitespace-normal { white-space: normal; }
.my-whitespace-nowrap { white-space: nowrap; }
.my-whitespace-pre { white-space: pre; }
.my-whitespace-pre-line { white-space: pre-line; }
.my-whitespace-pre-wrap { white-space: pre-wrap; }

/* Word Break */
.my-break-normal { overflow-wrap: normal; word-break: normal; }
.my-break-words { overflow-wrap: break-word; }
.my-break-all { word-break: break-all; }

/* Vertical Alignment */
.my-align-baseline { vertical-align: baseline; }
.my-align-top { vertical-align: top; }
.my-align-middle { vertical-align: middle; }
.my-align-bottom { vertical-align: bottom; }
.my-align-text-top { vertical-align: text-top; }
.my-align-text-bottom { vertical-align: text-bottom; }

/* List Style */
.my-list-none { list-style-type: none; }
.my-list-disc { list-style-type: disc; }
.my-list-decimal { list-style-type: decimal; }

/* List Position */
.my-list-inside { list-style-position: inside; }
.my-list-outside { list-style-position: outside; }

/* Text Shadow */
.my-text-shadow-sm { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.my-text-shadow { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.my-text-shadow-md { text-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); }
.my-text-shadow-lg { text-shadow: 0 10px 15px rgba(0, 0, 0, 0.5); }
.my-text-shadow-xl { text-shadow: 0 20px 25px rgba(0, 0, 0, 0.5); }
.my-text-shadow-2xl { text-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); }
.my-text-shadow-none { text-shadow: none; }