shared/css/guss-typography/_typography.helpers.scss

// Font scale helpers
// =============================================================================

/**
 * Grab all levels of a font the font-scale
 *
 * @param {String} $name - Name of the font-scale matrix (eg: headline)
 * @param {Map} $font-scale ($font-scale)
 *
 * @example
 *  font-size: get-scale(header);
 *
 * @requires {variable} $font-scale
 *
 * @return {Map}
 *
 * @group typography
 */
@function get-scale($name, $font-scale: $font-scale) {
    @return map-get($font-scale, $name);
}

/**
 * Grab info for a particular level of a font-scale
 *
 * @param {String} $name - Name of the font-scale in the matrix (eg: headline)
 * @param {Number} $level - Level in the matrix
 * @param {Map} $font-scale ($font-scale)
 *
 * @example
 *  font-size: get-scale-level(header, 1);
 *
 * @requires {variable} $font-scale
 * @requires {function} get-scale
 *
 * @return {Map}
 *
 * @group typography
 */
@function get-scale-level($name, $level, $font-scale: $font-scale) {
    @return map-get(get-scale($name, $font-scale), $level);
}

/**
 * Get a font-size for a level in the font-scale matrix
 *
 * @param {String} $name - Name of the font-scale in the matrix (eg: headline)
 * @param {Number} $level - Level in the matrix
 * @param {Map} $font-scale - Configuration
 *
 * @example
 *  font-size: get-font-size(header, 3);
 *
 * @requires {variable} $font-scale
 * @requires {function} convert-to-px
 * @requires {function} get-scale-level
 *
 * @return {Number}
 *
 * @group typography
 */
@function get-font-size($name, $level, $font-scale: $font-scale) {
    @return convert-to-px(map-get(get-scale-level($name, $level, $font-scale), font-size));
}

/**
 * Get a line-height for a level in the font-scale matrix
 *
 * @param {String} $name - Name of the font-scale in the matrix (eg: headline)
 * @param {Number} $level - Level in the matrix
 * @param {Map} $font-scale - Configuration
 *
 * @example
 *  font-size: get-line-height(header, 3);
 *
 * @requires {variable} $font-scale
 * @requires {function} convert-to-px
 * @requires {function} get-scale-level
 *
 * @return {Number}
 *
 * @group typography
 */
@function get-line-height($name, $level, $font-scale: $font-scale) {
    @return convert-to-px(map-get(get-scale-level($name, $level, $font-scale), line-height));
}

/**
 * Turn any value into pixels
 *
 * @param {Number} $value
 *
 * @example
 *  font-size: convert-to-px(14); // 14px
 *
 * @return {Number}
 *
 * @group typography
 */
@function convert-to-px($value) {
    @if (type-of($value) == number and $value != 0) {
        $value: if(unitless($value), $value * 1px, $value);
    }
    @return $value;
}