/* ------------------------------------ *\ Font-size System (CSS Custom Props) \* ------------------------------------ */ /** * Generate global typography variables * * 1. Maps are kept in core/settings. * 2. In order for the following to work, font-size must be defined in the : * html { font-size: var(--bolt-font-size); } */ :root { // Base tokens are for public use and user overrides // Note: user can customize these to generate a different typography system, such as Japanese typography. --bolt-type-font-size: 87.5%; // 14px @include bolt-mq(xsmall) { --bolt-type-font-size: 93.75%; // 15px } @include bolt-mq(xlarge) { --bolt-type-font-size: 100%; // 16px } @each $family in $bolt-type-font-family-system { $family-name: nth($family, 1); $family-value: nth($family, 2); @if $family-name == code or $family-name == fallback { --bolt-type-font-family-#{$family-name}: #{$family-value}; } @else { --bolt-type-font-family-#{$family-name}: #{$family-value}, var(--bolt-type-font-family-fallback); } } @each $size in $bolt-type-font-size-system { $size-name: nth($size, 1); $size-value: nth($size, 2); --bolt-type-font-size-#{$size-name}: #{$size-value}; } @each $weight in $bolt-type-font-weight-system { $weight-name: nth($weight, 1); $weight-value: nth($weight, 2); --bolt-type-font-weight-#{$weight-name}: #{$weight-value}; } @each $height in $bolt-type-line-height-system { $height-name: nth($height, 1); $height-value: nth($height, 2); --bolt-type-line-height-#{$height-name}: #{$height-value}; } @each $height in $bolt-type-line-height-multiplier-system { $height-name: nth($height, 1); $height-value: nth($height, 2); --bolt-type-line-height-multiplier-#{$height-name}: #{$height-value}; } @each $spacing in $bolt-type-letter-spacing-system { $spacing-name: nth($spacing, 1); $spacing-value: nth($spacing, 2); --bolt-type-letter-spacing-#{$spacing-name}: #{$spacing-value}; } }