| 1 | @mixin gl-typescale-ui($selector: 'body') {
|
| 2 | #{$selector} {
|
| 3 | @include gl-font-base;
|
| 4 | @include gl-text-gray-900;
|
| 5 | @include gl-font-regular;
|
| 6 | @include gl-font-weight-normal;
|
| 7 | @include gl-line-height-normal;
|
| 8 | }
|
| 9 |
|
| 10 | h1,
|
| 11 | h2,
|
| 12 | h3,
|
| 13 | h4,
|
| 14 | h5,
|
| 15 | h6,
|
| 16 | .h-display,
|
| 17 | .gl-h1,
|
| 18 | .gl-h2,
|
| 19 | .gl-h3,
|
| 20 | .gl-h4,
|
| 21 | .gl-h5,
|
| 22 | .gl-h6 {
|
| 23 | @include gl-font-weight-bold;
|
| 24 | @include gl-mt-0;
|
| 25 | @include gl-mb-0;
|
| 26 | }
|
| 27 |
|
| 28 | .h-display {
|
| 29 | @include gl-fluid-font-size($min: $gl-font-size-h-display, $max: $gl-font-size-h-display-xl);
|
| 30 | @include gl-fluid-line-height($min: $gl-line-height-32, $max: $gl-line-height-52);
|
| 31 | }
|
| 32 |
|
| 33 | h1,
|
| 34 | .gl-h1 {
|
| 35 | @include gl-fluid-font-size($min: $gl-font-size-h1, $max: $gl-font-size-h1-xl);
|
| 36 | @include gl-fluid-line-height($min: $gl-line-height-28, $max: $gl-line-height-36);
|
| 37 | }
|
| 38 |
|
| 39 | h2,
|
| 40 | .gl-h2 {
|
| 41 | @include gl-fluid-font-size($min: $gl-font-size-h2, $max: $gl-font-size-h2-xl);
|
| 42 | @include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);
|
| 43 | }
|
| 44 |
|
| 45 | h3,
|
| 46 | .gl-h3 {
|
| 47 | @include gl-font-lg;
|
| 48 | @include gl-line-height-20;
|
| 49 | }
|
| 50 |
|
| 51 | h4,
|
| 52 | .gl-h4 {
|
| 53 | @include gl-font-base;
|
| 54 | @include gl-line-height-20;
|
| 55 | }
|
| 56 |
|
| 57 | h5,
|
| 58 | .gl-h5,
|
| 59 | h6,
|
| 60 | .gl-h6 {
|
| 61 | @include gl-font-base;
|
| 62 | @include gl-line-height-20;
|
| 63 | @include gl-text-gray-700;
|
| 64 | }
|
| 65 |
|
| 66 | p,
|
| 67 | .gl-paragraph {
|
| 68 | @include gl-font-base;
|
| 69 | @include gl-line-height-20;
|
| 70 | @include gl-mt-0;
|
| 71 | @include gl-mb-0;
|
| 72 |
|
| 73 | + p,
|
| 74 | + .gl-paragraph {
|
| 75 | @include gl-mt-5;
|
| 76 | }
|
| 77 |
|
| 78 | &.lg {
|
| 79 | @include gl-line-height-24;
|
| 80 | }
|
| 81 | }
|
| 82 |
|
| 83 | .sm {
|
| 84 | @include gl-font-sm;
|
| 85 | }
|
| 86 |
|
| 87 | .lg {
|
| 88 | @include gl-font-lg;
|
| 89 | }
|
| 90 |
|
| 91 | .monospace {
|
| 92 | @include gl-font-monospace;
|
| 93 | }
|
| 94 |
|
| 95 | blockquote {
|
| 96 | @include gl-text-gray-700;
|
| 97 | @include gl-py-3;
|
| 98 | @include gl-pl-6;
|
| 99 | @include gl-my-3;
|
| 100 | @include gl-mx-0;
|
| 101 | @include gl-inset-border-l-4-gray-100;
|
| 102 | }
|
| 103 | }
|