File size: 9,512 Bytes
25f22bf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 |
/* Typography System - Enhanced typography classes and utilities */
/* Font Family Classes */
.font-sans {
font-family: var(--font-family-primary);
}
.font-display {
font-family: var(--font-family-display);
}
/* Font Size Classes */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
.text-6xl { font-size: var(--font-size-6xl); }
.text-7xl { font-size: var(--font-size-7xl); }
.text-8xl { font-size: var(--font-size-8xl); }
.text-9xl { font-size: var(--font-size-9xl); }
/* Font Weight Classes */
.font-thin { font-weight: var(--font-weight-thin); }
.font-extralight { font-weight: var(--font-weight-extralight); }
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }
.font-black { font-weight: var(--font-weight-black); }
/* Line Height Classes */
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }
/* Letter Spacing Classes */
.tracking-tighter { letter-spacing: var(--letter-spacing-tighter); }
.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest { letter-spacing: var(--letter-spacing-widest); }
/* Text Color Classes */
.text-primary-50 { color: var(--color-primary-50); }
.text-primary-100 { color: var(--color-primary-100); }
.text-primary-200 { color: var(--color-primary-200); }
.text-primary-300 { color: var(--color-primary-300); }
.text-primary-400 { color: var(--color-primary-400); }
.text-primary-500 { color: var(--color-primary-500); }
.text-primary-600 { color: var(--color-primary-600); }
.text-primary-700 { color: var(--color-primary-700); }
.text-primary-800 { color: var(--color-primary-800); }
.text-primary-900 { color: var(--color-primary-900); }
.text-primary-950 { color: var(--color-primary-950); }
.text-secondary-50 { color: var(--color-secondary-50); }
.text-secondary-100 { color: var(--color-secondary-100); }
.text-secondary-200 { color: var(--color-secondary-200); }
.text-secondary-300 { color: var(--color-secondary-300); }
.text-secondary-400 { color: var(--color-secondary-400); }
.text-secondary-500 { color: var(--color-secondary-500); }
.text-secondary-600 { color: var(--color-secondary-600); }
.text-secondary-700 { color: var(--color-secondary-700); }
.text-secondary-800 { color: var(--color-secondary-800); }
.text-secondary-900 { color: var(--color-secondary-900); }
.text-secondary-950 { color: var(--color-secondary-950); }
.text-accent-50 { color: var(--color-accent-50); }
.text-accent-100 { color: var(--color-accent-100); }
.text-accent-200 { color: var(--color-accent-200); }
.text-accent-300 { color: var(--color-accent-300); }
.text-accent-400 { color: var(--color-accent-400); }
.text-accent-500 { color: var(--color-accent-500); }
.text-accent-600 { color: var(--color-accent-600); }
.text-accent-700 { color: var(--color-accent-700); }
.text-accent-800 { color: var(--color-accent-800); }
.text-accent-900 { color: var(--color-accent-900); }
.text-accent-950 { color: var(--color-accent-950); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-info { color: var(--color-info); }
/* Text Alignment Classes */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
/* Text Transform Classes */
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
/* Text Decoration Classes */
.text-underline { text-decoration: underline; }
.text-line-through { text-decoration: line-through; }
.text-no-underline { text-decoration: none; }
/* Text Overflow Classes */
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-clip {
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
}
/* Responsive Typography */
@media (max-width: 639px) {
.text-4xl { font-size: var(--font-size-3xl); }
.text-5xl { font-size: var(--font-size-4xl); }
.text-6xl { font-size: var(--font-size-5xl); }
.text-7xl { font-size: var(--font-size-6xl); }
.text-8xl { font-size: var(--font-size-7xl); }
.text-9xl { font-size: var(--font-size-8xl); }
}
@media (min-width: 640px) {
.sm\:text-xs { font-size: var(--font-size-xs); }
.sm\:text-sm { font-size: var(--font-size-sm); }
.sm\:text-base { font-size: var(--font-size-base); }
.sm\:text-lg { font-size: var(--font-size-lg); }
.sm\:text-xl { font-size: var(--font-size-xl); }
.sm\:text-2xl { font-size: var(--font-size-2xl); }
.sm\:text-3xl { font-size: var(--font-size-3xl); }
.sm\:text-4xl { font-size: var(--font-size-4xl); }
.sm\:text-5xl { font-size: var(--font-size-5xl); }
.sm\:text-6xl { font-size: var(--font-size-6xl); }
.sm\:text-7xl { font-size: var(--font-size-7xl); }
.sm\:text-8xl { font-size: var(--font-size-8xl); }
.sm\:text-9xl { font-size: var(--font-size-9xl); }
}
@media (min-width: 768px) {
.md\:text-xs { font-size: var(--font-size-xs); }
.md\:text-sm { font-size: var(--font-size-sm); }
.md\:text-base { font-size: var(--font-size-base); }
.md\:text-lg { font-size: var(--font-size-lg); }
.md\:text-xl { font-size: var(--font-size-xl); }
.md\:text-2xl { font-size: var(--font-size-2xl); }
.md\:text-3xl { font-size: var(--font-size-3xl); }
.md\:text-4xl { font-size: var(--font-size-4xl); }
.md\:text-5xl { font-size: var(--font-size-5xl); }
.md\:text-6xl { font-size: var(--font-size-6xl); }
.md\:text-7xl { font-size: var(--font-size-7xl); }
.md\:text-8xl { font-size: var(--font-size-8xl); }
.md\:text-9xl { font-size: var(--font-size-9xl); }
}
@media (min-width: 1024px) {
.lg\:text-xs { font-size: var(--font-size-xs); }
.lg\:text-sm { font-size: var(--font-size-sm); }
.lg\:text-base { font-size: var(--font-size-base); }
.lg\:text-lg { font-size: var(--font-size-lg); }
.lg\:text-xl { font-size: var(--font-size-xl); }
.lg\:text-2xl { font-size: var(--font-size-2xl); }
.lg\:text-3xl { font-size: var(--font-size-3xl); }
.lg\:text-4xl { font-size: var(--font-size-4xl); }
.lg\:text-5xl { font-size: var(--font-size-5xl); }
.lg\:text-6xl { font-size: var(--font-size-6xl); }
.lg\:text-7xl { font-size: var(--font-size-7xl); }
.lg\:text-8xl { font-size: var(--font-size-8xl); }
.lg\:text-9xl { font-size: var(--font-size-9xl); }
}
@media (min-width: 1280px) {
.xl\:text-xs { font-size: var(--font-size-xs); }
.xl\:text-sm { font-size: var(--font-size-sm); }
.xl\:text-base { font-size: var(--font-size-base); }
.xl\:text-lg { font-size: var(--font-size-lg); }
.xl\:text-xl { font-size: var(--font-size-xl); }
.xl\:text-2xl { font-size: var(--font-size-2xl); }
.xl\:text-3xl { font-size: var(--font-size-3xl); }
.xl\:text-4xl { font-size: var(--font-size-4xl); }
.xl\:text-5xl { font-size: var(--font-size-5xl); }
.xl\:text-6xl { font-size: var(--font-size-6xl); }
.xl\:text-7xl { font-size: var(--font-size-7xl); }
.xl\:text-8xl { font-size: var(--font-size-8xl); }
.xl\:text-9xl { font-size: var(--font-size-9xl); }
}
@media (min-width: 1536px) {
.2xl\:text-xs { font-size: var(--font-size-xs); }
.2xl\:text-sm { font-size: var(--font-size-sm); }
.2xl\:text-base { font-size: var(--font-size-base); }
.2xl\:text-lg { font-size: var(--font-size-lg); }
.2xl\:text-xl { font-size: var(--font-size-xl); }
.2xl\:text-2xl { font-size: var(--font-size-2xl); }
.2xl\:text-3xl { font-size: var(--font-size-3xl); }
.2xl\:text-4xl { font-size: var(--font-size-4xl); }
.2xl\:text-5xl { font-size: var(--font-size-5xl); }
.2xl\:text-6xl { font-size: var(--font-size-6xl); }
.2xl\:text-7xl { font-size: var(--font-size-7xl); }
.2xl\:text-8xl { font-size: var(--font-size-8xl); }
.2xl\:text-9xl { font-size: var(--font-size-9xl); }
}
@media (min-width: 1920px) {
.3xl\:text-xs { font-size: var(--font-size-xs); }
.3xl\:text-sm { font-size: var(--font-size-sm); }
.3xl\:text-base { font-size: var(--font-size-base); }
.3xl\:text-lg { font-size: var(--font-size-lg); }
.3xl\:text-xl { font-size: var(--font-size-xl); }
.3xl\:text-2xl { font-size: var(--font-size-2xl); }
.3xl\:text-3xl { font-size: var(--font-size-3xl); }
.3xl\:text-4xl { font-size: var(--font-size-4xl); }
.3xl\:text-5xl { font-size: var(--font-size-5xl); }
.3xl\:text-6xl { font-size: var(--font-size-6xl); }
.3xl\:text-7xl { font-size: var(--font-size-7xl); }
.3xl\:text-8xl { font-size: var(--font-size-8xl); }
.3xl\:text-9xl { font-size: var(--font-size-9xl); }
} |