12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
- $varPre: '';
- @mixin setFontSizes($fontSizes) {
- @each $name, $val in $fontSizes{
- $varName: --#{$varPre}text-#{$name};
- $varLhName: --#{$varPre}text-#{$name}-lineHeight;
- @include render($name, $varName, $varLhName);
- }
- }
- // Font Family
- .font-sans {font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}
- .font-serif {font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;}
- .font-mono {font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
- // FontSize
- $fontSizes: '3xs' 10, '2xs' 11, 'xs' 12, 'mini' 13, 'sm' 14, 'md' 15, 'base' 16, 'lg' 18, 'xl' 20, '2xl' 24, '3xl' 30, '4xl' 36, '5xl' 48, '6xl' 60, '7xl' 72, '8xl' 96, '9xl' 128;
- @mixin render($name, $varName, $varLhName) {
- .text-#{$name} {
- font-size: var($varName);
- line-height: var($varLhName);
- }
- }
- @include setFontSizes($fontSizes);
- // Font Smoothing
- // TODO
- // Font Style
- $fontStyles: italic italic, not-italic normal;
- @each $name, $val in $fontStyles {
- .#{$name} {font-style: #{$val};}
- }
- // Font Weight
- @each $name, $val in thin 100, extralight 200, light 300, normal 400, medium 500, semibold 600, bold 700, extrabold 800, 'black' 900 {
- .font-#{$name} {font-weight: $val;}
- }
- // Font Variant Numeric
- $fontVariantNumerics: 'normal-nums' 'normal','ordinal' 'ordinal','slashed-zero' 'slashed-zero','lining-nums' 'lining-nums','oldstyle-nums' 'oldstyle-nums','proportional-nums' 'proportional-nums','tabular-nums' 'tabular-nums','diagonal-fractions' 'diagonal-fractions','stacked-fractions' 'stacked-fractions';
- @each $name, $val in $fontVariantNumerics {
- .#{$name} {font-variant-numeric: #{$val};}
- }
|