javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(tokens): make font-size use px-to-rem() (#29547)

Browse Source 
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->



## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

This PR intends to make sure all font-size related tokens are generated
suing the px-to-rem() scss function, so that the fonts correctly scale
in runtime to zoom/A11y preferences.
 
- Added new utility to generate the expected css and scss variable using
the px-to-rem()
- Added @use on generated scss and css foundations files.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

---------

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
This commit is contained in:
Bernardo Cardoso
2024-05-31 09:17:31 +01:00
committed by GitHub
parent 59f3d4e988
commit 6246245cac
4 changed files with 53 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
core/scripts/tokens/index.js
View File

@@ -16,6 +16,7 @@ const {
getRgbaValue,
hexToRgb,
generateShadowValue,
generateFontSizeValue,
generateFontFamilyValue,
generateTypographyValue,
generateRgbValue,
@@ -43,6 +44,8 @@ StyleDictionary.registerFormat({
return `--${variablesPrefix}-${prop.name}: ${cssShadow};`;
} else if (prop.attributes.category.match('font-family')) {
return generateFontFamilyValue(prop);
} else if (prop.attributes.category.match('font-size')) {
return generateFontSizeValue(prop);
} else {
const rgb = hexToRgb(prop.value);
prop.value = getRgbaValue(prop.value);
@@ -52,7 +55,11 @@ StyleDictionary.registerFormat({
}
});
return fileHeader({ file }) + ':root {\n' + prefixedVariables.join('\n') + '\n}\n';
return [
fileHeader({ file }),
'@use "../themes/functions.sizes" as font;\n',
':root {\n' + prefixedVariables.join('\n') + '\n}\n',
].join('\n');
},
});
@@ -72,6 +79,8 @@ StyleDictionary.registerFormat({
return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${cssShadow});`;
} else if (prop.attributes.category.match('font-family')) {
return generateFontFamilyValue(prop, 'scss');
} else if (prop.attributes.category.match('font-size')) {
return generateFontSizeValue(prop, 'scss');
} else if (prop['$type'] === 'typography') {
return generateTypographyValue(prop, dictionary);
} else {
@@ -79,7 +88,11 @@ StyleDictionary.registerFormat({
}
});
return fileHeader({ file }) + prefixedVariables.join('\n') + '\n';
return [
fileHeader({ file }),
'@use "../themes/functions.sizes" as font;\n',
prefixedVariables.join('\n') + '\n',
].join('\n');
},
});

10
core/scripts/tokens/utilities.js
View File

@@ -44,6 +44,15 @@ function generateShadowValue(shadow) {
return `${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${shadow.spread} ${color}`;
}
// Generates a valid font-size value from a font-size Design Token structure, while transforming the pixels to rem
function generateFontSizeValue(prop, variableType = 'css') {
return variableType === 'scss'
? `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, font.px-to-rem(${parseInt(
prop.value
)}));`
: `--${variablesPrefix}-${prop.name}: #{font.px-to-rem(${parseInt(prop.value)})};`;
}
// Generates a valid font-family value from a font-family Design Token structure
function generateFontFamilyValue(prop, variableType = 'css') {
// Remove the last word from the token, as it contains the name of the font, which we don't want to be included on the generated variables
@@ -169,6 +178,7 @@ module.exports = {
hexToRgb,
hexToRgba,
generateShadowValue,
generateFontSizeValue,
generateFontFamilyValue,
generateTypographyValue,
generateRgbValue: generateValue,

26
core/src/foundations/ionic.root.scss
View File

@@ -3,6 +3,8 @@
* Ionic Design System
*/
@use "../themes/functions.sizes" as font;
:root {
--ionic-elevation-100: 0px 3px 9px 0px rgba(0, 0, 0, 0.07), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
--ionic-elevation-200: 0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05);
@@ -12,18 +14,18 @@
--ionic-elevation-600: 0px 8px 25px 0px rgba(6, 43, 99, 0.08), 0px 1px 5px 0px rgba(6, 43, 99, 0.05);
--ionic-elevation-700: 0px 15px 32px 0px rgba(6, 43, 99, 0.09), 0px 2px 7px 0px rgba(6, 43, 99, 0.05);
--ionic-elevation-800: 0px 20px 48px 0px rgba(6, 43, 99, 0.12), 0px 3px 14px 0px rgba(6, 43, 99, 0.12);
--ionic-font-size-275: 11px;
--ionic-font-size-300: 12px;
--ionic-font-size-350: 14px;
--ionic-font-size-400: 16px;
--ionic-font-size-450: 18px;
--ionic-font-size-500: 20px;
--ionic-font-size-550: 22px;
--ionic-font-size-600: 24px;
--ionic-font-size-650: 26px;
--ionic-font-size-700: 28px;
--ionic-font-size-800: 32px;
--ionic-font-size-900: 36px;
--ionic-font-size-275: #{font.px-to-rem(11)};
--ionic-font-size-300: #{font.px-to-rem(12)};
--ionic-font-size-350: #{font.px-to-rem(14)};
--ionic-font-size-400: #{font.px-to-rem(16)};
--ionic-font-size-450: #{font.px-to-rem(18)};
--ionic-font-size-500: #{font.px-to-rem(20)};
--ionic-font-size-550: #{font.px-to-rem(22)};
--ionic-font-size-600: #{font.px-to-rem(24)};
--ionic-font-size-650: #{font.px-to-rem(26)};
--ionic-font-size-700: #{font.px-to-rem(28)};
--ionic-font-size-800: #{font.px-to-rem(32)};
--ionic-font-size-900: #{font.px-to-rem(36)};
--ionic-font-weight-thin: 100;
--ionic-font-weight-extra-light: 200;
--ionic-font-weight-light: 300;

26
core/src/foundations/ionic.vars.scss
View File

@@ -3,6 +3,8 @@
* Ionic Design System
*/
@use "../themes/functions.sizes" as font;
$ionic-elevation-100: var(
--ionic-elevation-100,
0px 3px 9px 0px rgba(0, 0, 0, 0.07),
@@ -43,18 +45,18 @@ $ionic-elevation-800: var(
0px 20px 48px 0px rgba(6, 43, 99, 0.12),
0px 3px 14px 0px rgba(6, 43, 99, 0.12)
);
$ionic-font-size-275: var(--ionic-font-size-275, 11px);
$ionic-font-size-300: var(--ionic-font-size-300, 12px);
$ionic-font-size-350: var(--ionic-font-size-350, 14px);
$ionic-font-size-400: var(--ionic-font-size-400, 16px);
$ionic-font-size-450: var(--ionic-font-size-450, 18px);
$ionic-font-size-500: var(--ionic-font-size-500, 20px);
$ionic-font-size-550: var(--ionic-font-size-550, 22px);
$ionic-font-size-600: var(--ionic-font-size-600, 24px);
$ionic-font-size-650: var(--ionic-font-size-650, 26px);
$ionic-font-size-700: var(--ionic-font-size-700, 28px);
$ionic-font-size-800: var(--ionic-font-size-800, 32px);
$ionic-font-size-900: var(--ionic-font-size-900, 36px);
$ionic-font-size-275: var(--ionic-font-size-275, font.px-to-rem(11));
$ionic-font-size-300: var(--ionic-font-size-300, font.px-to-rem(12));
$ionic-font-size-350: var(--ionic-font-size-350, font.px-to-rem(14));
$ionic-font-size-400: var(--ionic-font-size-400, font.px-to-rem(16));
$ionic-font-size-450: var(--ionic-font-size-450, font.px-to-rem(18));
$ionic-font-size-500: var(--ionic-font-size-500, font.px-to-rem(20));
$ionic-font-size-550: var(--ionic-font-size-550, font.px-to-rem(22));
$ionic-font-size-600: var(--ionic-font-size-600, font.px-to-rem(24));
$ionic-font-size-650: var(--ionic-font-size-650, font.px-to-rem(26));
$ionic-font-size-700: var(--ionic-font-size-700, font.px-to-rem(28));
$ionic-font-size-800: var(--ionic-font-size-800, font.px-to-rem(32));
$ionic-font-size-900: var(--ionic-font-size-900, font.px-to-rem(36));
$ionic-font-weight-thin: var(--ionic-font-weight-thin, 100);
$ionic-font-weight-extra-light: var(--ionic-font-weight-extra-light, 200);
$ionic-font-weight-light: var(--ionic-font-weight-light, 300);