mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
6e8bf4914f
Issue number: N/A --------- ## What is the current behavior? Currently, every Sass variable in Ionic has the `!default` flag added to the end. From the [Sass variables documentation](https://sass-lang.com/documentation/variables/): > Normally when you assign a value to a variable, if that variable already had a value, its old value is overwritten. But if you’re writing a Sass library, you might want to allow your users to configure your library’s variables before you use them to generate CSS. > > To make this possible, Sass provides the `!default` flag. This assigns a value to a variable only if that variable isn’t defined or its value is [null](https://sass-lang.com/documentation/values/null). Otherwise, the existing value will be used. In past versions of Ionic Framework, developers wrote Sass variables to rebuild Ionic Framework using their own values. In the latest versions of Ionic Framework, this is not possible. ## What is the new behavior? Removes the `!default` flag from all Sass variables. ## Does this introduce a breaking change? - [ ] Yes - [x] No ------- Co-authored-by: brandyscarney <brandyscarney@users.noreply.github.com>
64 lines
2.4 KiB
SCSS
64 lines
2.4 KiB
SCSS
@use "sass:math";
|
|
|
|
$baselineSize: 16px;
|
|
$baselineUnit: 1rem;
|
|
|
|
/**
|
|
* Convert a font size to a dynamic font size.
|
|
* Fonts that participate in Dynamic Type should use
|
|
* dynamic font sizes.
|
|
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
* @param unit (optional) - The unit to convert to. Use this if you want to
|
|
* convert to a unit other than $baselineUnit.
|
|
*/
|
|
@function dynamic-font($size, $unit: $baselineUnit) {
|
|
@return (math.div($size, $baselineSize)) * $unit;
|
|
}
|
|
|
|
/**
|
|
* Convert a font size to a dynamic font size but impose
|
|
* a maximum font size.
|
|
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
* convert to a unit other than $baselineUnit.
|
|
*/
|
|
@function dynamic-font-max($size, $maxScale, $unit: $baselineUnit) {
|
|
$baseScale: dynamic-font($size, $unit);
|
|
$maxScale: $size * $maxScale;
|
|
|
|
@return min($baseScale, $maxScale);
|
|
}
|
|
|
|
/**
|
|
* Convert a font size to a dynamic font size but impose
|
|
* a minimum font size.
|
|
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
* convert to a unit other than $baselineUnit.
|
|
*/
|
|
@function dynamic-font-min($minScale, $size, $unit: $baselineUnit) {
|
|
$baseScale: dynamic-font($size, $unit);
|
|
$minScale: $size * $minScale;
|
|
|
|
@return max($minScale, $baseScale);
|
|
}
|
|
|
|
/**
|
|
* Convert a font size to a dynamic font size but impose
|
|
* maximum and minimum font sizes.
|
|
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
* convert to a unit other than $baselineUnit.
|
|
*/
|
|
@function dynamic-font-clamp($minScale, $baseSize, $maxScale, $unit: $baselineUnit) {
|
|
$baseScale: dynamic-font($baseSize, $unit);
|
|
$maxScale: $baseSize * $maxScale;
|
|
$minScale: $baseSize * $minScale;
|
|
|
|
@return clamp($minScale, $baseScale, $maxScale);
|
|
}
|