Font.scss 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. $varPre: '';
  2. @mixin setFontSizes($fontSizes) {
  3. @each $name, $val in $fontSizes{
  4. $varName: --#{$varPre}text-#{$name};
  5. $varLhName: --#{$varPre}text-#{$name}-lineHeight;
  6. @include render($name, $varName, $varLhName);
  7. }
  8. }
  9. // Font Family
  10. .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";}
  11. .font-serif {font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;}
  12. .font-mono {font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
  13. // FontSize
  14. $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;
  15. @mixin render($name, $varName, $varLhName) {
  16. .text-#{$name} {
  17. font-size: var($varName);
  18. line-height: var($varLhName);
  19. }
  20. }
  21. @include setFontSizes($fontSizes);
  22. // Font Smoothing
  23. // TODO
  24. // Font Style
  25. $fontStyles: italic italic, not-italic normal;
  26. @each $name, $val in $fontStyles {
  27. .#{$name} {font-style: #{$val};}
  28. }
  29. // Font Weight
  30. @each $name, $val in thin 100, extralight 200, light 300, normal 400, medium 500, semibold 600, bold 700, extrabold 800, 'black' 900 {
  31. .font-#{$name} {font-weight: $val;}
  32. }
  33. // Font Variant Numeric
  34. $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';
  35. @each $name, $val in $fontVariantNumerics {
  36. .#{$name} {font-variant-numeric: #{$val};}
  37. }