@hsds/utils-fonts
Advanced tools
Comparing version 8.1.0 to 8.1.1
@@ -5,2 +5,9 @@ # Changelog | ||
## [8.1.1](https://github.com/helpscout/hsds/compare/utils-fonts-8.1.0...utils-fonts-8.1.1) (2023-10-23) | ||
### Bug Fixes | ||
* **workspace:** updates babelize target ([d5c720e](https://github.com/helpscout/hsds/commit/d5c720ea4da26f3c5d55ac0c6acc508722716c7c)) | ||
## [8.1.0](https://github.com/helpscout/hsds/compare/utils-fonts-8.0.0...utils-fonts-8.1.0) (2023-10-23) | ||
@@ -7,0 +14,0 @@ |
@@ -1,83 +0,15 @@ | ||
'use strict'; | ||
"use strict"; | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
const FONT_FAMILY = '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'; | ||
const FONT_FAMILY_MONO = '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace'; | ||
const AKTIV_FONT_FAMILY = '"Aktiv Grotesk", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'; | ||
const FONT_SIZE = 13; | ||
const GLOBAL_FONT_SIZE_NAMESPACE = '--HSDSGlobalFontSize'; | ||
const BASE_FONT_SIZE = FONT_SIZE; | ||
const defaultProps = { | ||
baseFontSize: BASE_FONT_SIZE, | ||
fontSize: BASE_FONT_SIZE | ||
}; | ||
const setFontSize = size => { | ||
const computedSize = typeof size === 'number' ? `${size}px` : size; | ||
return `${GLOBAL_FONT_SIZE_NAMESPACE}: ${computedSize}`; | ||
}; | ||
const makeFontFamilyFactory = (fonts, baseFont = FONT_FAMILY) => () => { | ||
if (!fonts) { | ||
return `font-family: ${baseFont};`; | ||
} else { | ||
return ` | ||
font-family: ${fonts}, ${baseFont}; | ||
`; | ||
} | ||
}; | ||
const makeFontFamily = fonts => { | ||
return makeFontFamilyFactory(fonts, FONT_FAMILY); | ||
}; | ||
/** | ||
* Generates the CSS style rules for dynamic font-size based on the global | ||
* font-size. This function uses CSS variables + calc to determine the correct | ||
* font-size, with a fallback for a px font-size for browsers that don't | ||
* support CSS variables (IE). | ||
* | ||
* @param {Object} props The properties. | ||
* @param {string} props.varName The CSS variable namespace. | ||
* @param {number} props.baseFontSize The base font size (13). | ||
* @param {number} props.fontSize The desired font size. | ||
* @returns {string} The compiled CSS styles rules. | ||
*/ | ||
const variableFontSize = (props = defaultProps) => { | ||
const { | ||
varName, | ||
baseFontSize, | ||
fontSize | ||
} = { | ||
...defaultProps, | ||
...props | ||
}; | ||
const variableNameSpace = `--${varName}-${fontSize.toString()}`; | ||
const dynamicProp = `calc( | ||
${fontSize} / ${baseFontSize} * | ||
var(${GLOBAL_FONT_SIZE_NAMESPACE}, ${baseFontSize}px) | ||
)`; | ||
if (varName) { | ||
return ` | ||
${variableNameSpace}: ${dynamicProp}; | ||
font-size: ${fontSize}px; | ||
font-size: var(${variableNameSpace}, ${fontSize}px); | ||
`; | ||
} else { | ||
return ` | ||
font-size: ${fontSize}px; | ||
font-size: ${dynamicProp}; | ||
`; | ||
} | ||
}; | ||
exports.AKTIV_FONT_FAMILY = AKTIV_FONT_FAMILY; | ||
exports.BASE_FONT_SIZE = BASE_FONT_SIZE; | ||
exports.FONT_FAMILY = FONT_FAMILY; | ||
exports.FONT_FAMILY_MONO = FONT_FAMILY_MONO; | ||
exports.FONT_SIZE = FONT_SIZE; | ||
exports.GLOBAL_FONT_SIZE_NAMESPACE = GLOBAL_FONT_SIZE_NAMESPACE; | ||
exports.defaultProps = defaultProps; | ||
exports.makeFontFamily = makeFontFamily; | ||
exports.makeFontFamilyFactory = makeFontFamilyFactory; | ||
exports.setFontSize = setFontSize; | ||
exports.variableFontSize = variableFontSize; | ||
exports.__esModule = true; | ||
var _fonts = require("./fonts.config"); | ||
Object.keys(_fonts).forEach(function (key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (key in exports && exports[key] === _fonts[key]) return; | ||
exports[key] = _fonts[key]; | ||
}); | ||
var _fonts2 = require("./fonts"); | ||
Object.keys(_fonts2).forEach(function (key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (key in exports && exports[key] === _fonts2[key]) return; | ||
exports[key] = _fonts2[key]; | ||
}); |
{ | ||
"name": "@hsds/utils-fonts", | ||
"version": "8.1.0", | ||
"version": "8.1.1", | ||
"main": "./index.cjs.js", | ||
"type": "commonjs" | ||
} |
12039
8
162