dh_demo

DreamHanks demo project
git clone git://git.lair.cx/dh_demo
Log | Files | Refs | README

_typography.scss (2600B)

      1 @use 'sass:map';
      2 @use 'sass:math';
      3 
      4 // https://m3.material.io/styles/typography/type-scale-tokens
      5 
      6 $_font-info: (
      7   'display-large': (
      8     'line-height': 64,
      9     'font-size': 57,
     10     'tracking': 0,
     11     'font-weight': 400
     12   ),
     13   'display-medium': (
     14     'line-height': 52,
     15     'font-size': 45,
     16     'tracking': 0,
     17     'font-weight': 400
     18   ),
     19   'display-small': (
     20     'line-height': 44,
     21     'font-size': 36,
     22     'tracking': 0,
     23     'font-weight': 400
     24   ),
     25   'headline-large': (
     26     'line-height': 40,
     27     'font-size': 32,
     28     'tracking': 0,
     29     'font-weight': 400
     30   ),
     31   'headline-medium': (
     32     'line-height': 36,
     33     'font-size': 28,
     34     'tracking': 0,
     35     'font-weight': 400
     36   ),
     37   'headline-small': (
     38     'line-height': 32,
     39     'font-size': 24,
     40     'tracking': 0,
     41     'font-weight': 400
     42   ),
     43   'title-large': (
     44     'line-height': 28,
     45     'font-size': 22,
     46     'tracking': 0,
     47     'font-weight': 400
     48   ),
     49   'title-medium': (
     50     'line-height': 24,
     51     'font-size': 16,
     52     'tracking': 0.15,
     53     'font-weight': 500
     54   ),
     55   'title-small': (
     56     'line-height': 20,
     57     'font-size': 14,
     58     'tracking': 0.1,
     59     'font-weight': 500
     60   ),
     61   'label-large': (
     62     'line-height': 20,
     63     'font-size': 14,
     64     'tracking': 0.1,
     65     'font-weight': 500
     66   ),
     67   'label-medium': (
     68     'line-height': 16,
     69     'font-size': 12,
     70     'tracking': 0.5,
     71     'font-weight': 500
     72   ),
     73   'label-small': (
     74     'line-height': 16,
     75     'font-size': 11,
     76     'tracking': 0.5,
     77     'font-weight': 500
     78   ),
     79   'body-large': (
     80     'line-height': 24,
     81     'font-size': 16,
     82     'tracking': 0.5,
     83     'font-weight': 400
     84   ),
     85   'body-medium': (
     86     'line-height': 20,
     87     'font-size': 14,
     88     'tracking': 0.25,
     89     'font-weight': 400
     90   ),
     91   'body-small': (
     92     'line-height': 16,
     93     'font-size': 12,
     94     'tracking': 0.4,
     95     'font-weight': 400
     96   ),
     97 );
     98 
     99 @mixin emit() {
    100   @each $key, $font-info in $_font-info {
    101     @content($key, $font-info);
    102   }
    103 }
    104 
    105 @mixin apply($key, $important: false) {
    106   $font: map.get($_font-info, $key);
    107 
    108   $line-height: map.get($font, 'line-height');
    109   $font-size: map.get($font, 'font-size');
    110   $tracking: map.get($font, 'tracking');
    111   $font-weight: map.get($font, 'font-weight');
    112 
    113   @if $important {
    114     line-height: ($line-height * 0.0625rem) !important;
    115     font-size: ($font-size * 0.0625rem) !important;
    116     letter-spacing: (math.div($tracking, $font-size) * 1rem) !important;
    117     font-weight: ($font-weight) !important;
    118   } @else {
    119     line-height: ($line-height * 0.0625rem);
    120     font-size: ($font-size * 0.0625rem);
    121     letter-spacing: (math.div($tracking, $font-size) * 1rem);
    122     font-weight: ($font-weight);
    123   }
    124 }