diff --git a/core/scripts/tokens/utilities.js b/core/scripts/tokens/utilities.js
index 480228dec0..b554f71ac3 100644
--- a/core/scripts/tokens/utilities.js
+++ b/core/scripts/tokens/utilities.js
@@ -69,12 +69,13 @@ function generateTypographyValue(prop, dictionary) {
const fontWeightMap = getTypeMap(dictionary, 'font-weight');
const lineHeightMap = getTypeMap(dictionary, 'line-height');
const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing');
+ const fontStyle = prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal';
// This exact format is needed so that it compiles the tokens with the expected lint rules
return `
$${variablesPrefix}-${prop.name}: (
- font-family: $ionic-font-family,
font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]},
+ font-style: ${fontStyle},
font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]},
letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0},
line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]},
@@ -114,12 +115,13 @@ function generateTypographyUtilityClass(prop, dictionary) {
const fontWeightMap = getTypeMap(dictionary, 'font-weight');
const lineHeightMap = getTypeMap(dictionary, 'line-height');
const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing');
+ const fontStyle = prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal';
// This exact format is needed so that it compiles the tokens with the expected lint rules
return `
.${variablesPrefix}-${prop.name} {
- font-family: $ionic-font-family;
font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]};
+ font-style: ${fontStyle};
font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]};
letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0};
line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]};
diff --git a/core/src/css/ionic/core.ionic.scss b/core/src/css/ionic/core.ionic.scss
index b51f53a54d..84eeec048f 100644
--- a/core/src/css/ionic/core.ionic.scss
+++ b/core/src/css/ionic/core.ionic.scss
@@ -1,6 +1,6 @@
@use "../../themes/ionic/ionic.globals.scss" as globals;
-// Ionic Font Family
+// Ionic Font
// --------------------------------------------------
:root {
@@ -10,7 +10,6 @@
html {
--ionic-dynamic-font: -apple-system-body;
- font-family: #{globals.$ionic-font-family};
}
body {
diff --git a/core/src/css/ionic/typography.ionic.scss b/core/src/css/ionic/typography.ionic.scss
index 6e87435699..afbe10f65d 100644
--- a/core/src/css/ionic/typography.ionic.scss
+++ b/core/src/css/ionic/typography.ionic.scss
@@ -1,91 +1,35 @@
@use "../../themes/ionic/ionic.globals.scss" as globals;
+// TODO(ROU-10833): add font loading solution here, as a @font-face, base64 or cdn
html {
font-family: globals.$ionic-font-family;
}
body {
- font-weight: globals.$ionic-font-weight-regular;
- font-size: globals.$ionic-font-size-350;
-
- line-height: globals.$ionic-line-height-600;
-}
-
-/* Composite utility classes for html headings and font classes, that aggregate size and weight, based on tokens*/
-h1,
-.ionic-heading1,
-h2,
-.ionic-heading2,
-h3,
-.ionic-heading3,
-h4,
-.ionic-heading4,
-h5,
-.ionic-heading5,
-h6,
-.ionic-heading6 {
- color: globals.$ionic-color-neutral-900;
-
- font-weight: globals.$ionic-font-weight-semi-bold;
-}
-
-h1,
-.ionic-heading1 {
- font-size: #{globals.$ionic-font-size-700};
-
- line-height: globals.$ionic-line-height-900;
-}
-
-h2,
-.ionic-heading2 {
- font-size: globals.$ionic-font-size-800;
-
- line-height: globals.$ionic-line-height-800;
+ @include globals.typography(globals.$ionic-body-md-regular);
}
-h3,
-.ionic-heading3 {
- font-size: globals.$ionic-font-size-600;
-
- line-height: globals.$ionic-line-height-800;
+/* Override html headings based on heading tokens */
+h1 {
+ @include globals.typography(globals.$ionic-heading-h1-regular);
}
-h4,
-.ionic-heading4 {
- font-size: globals.$ionic-font-size-550;
-
- line-height: globals.$ionic-line-height-700;
+h2 {
+ @include globals.typography(globals.$ionic-heading-h2-regular);
}
-h5,
-.ionic-heading5 {
- font-size: globals.$ionic-font-size-500;
-
- line-height: globals.$ionic-line-height-700;
+h3 {
+ @include globals.typography(globals.$ionic-heading-h3-regular);
}
-h6,
-.ionic-heading6 {
- font-size: globals.$ionic-font-size-450;
-
- line-height: globals.$ionic-line-height-600;
+h4 {
+ @include globals.typography(globals.$ionic-heading-h4-regular);
}
-.ionic-display-s {
- font-size: globals.$ionic-font-size-800;
- font-weight: globals.$ionic-font-weight-regular;
-
- line-height: globals.$ionic-line-height-500;
-}
-
-.ionic-display-m {
- font-size: globals.$ionic-font-size-900;
- font-weight: globals.$ionic-font-weight-regular;
-
- line-height: globals.$ionic-line-height-600;
+h5 {
+ @include globals.typography(globals.$ionic-heading-h5-regular);
}
-/* Common */
-.ionic-font-italic {
- font-style: italic;
+h6 {
+ @include globals.typography(globals.$ionic-heading-h6-regular);
}
diff --git a/core/src/css/test/typography/basic/index.html b/core/src/css/test/typography/basic/index.html
new file mode 100644
index 0000000000..1a2f1173b6
--- /dev/null
+++ b/core/src/css/test/typography/basic/index.html
@@ -0,0 +1,120 @@
+
+
+
+
+ Typography - Display Tokens
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Typography - Display Tokens
+
+
+
+
+
+
Display
+
lg
+
display-lg-regular
+
display-lg-light
+
sm
+
display-sm-regular
+
display-sm-light
+
+
+
Headings
+
h1
+
heading-h1-regular
+
heading-h1-medium
+
heading-h1-semi-bold
+
heading-h1-bold
+
h2
+
heading-h2-regular
+
heading-h2-medium
+
heading-h2-semi-bold
+
heading-h2-bold
+
h3
+
heading-h3-regular
+
heading-h3-medium
+
heading-h3-semi-bold
+
heading-h3-bold
+
h4
+
heading-h4-regular
+
heading-h4-medium
+
heading-h4-semi-bold
+
heading-h4-bold
+
h5
+
heading-h5-regular
+
heading-h5-medium
+
heading-h5-semi-bold
+
heading-h5-bold
+
h6
+
heading-h6-regular
+
heading-h6-medium
+
heading-h6-semi-bold
+
heading-h6-bold
+
+
+
Body
+
sm
+
ionic-body-sm-regular
+
ionic-body-sm-medium
+
ionic-body-sm-semi-bold
+
ionic-body-sm-bold
+
ionic-body-sm-link
+
ionic-body-sm-italic
+
md
+
ionic-body-md-regular
+
ionic-body-md-medium
+
ionic-body-md-semi-bold
+
ionic-body-md-bold
+
ionic-body-md-link
+
ionic-body-md-italic
+
lg
+
ionic-body-lg-regular
+
ionic-body-lg-medium
+
ionic-body-lg-semi-bold
+
ionic-body-lg-bold
+
ionic-body-lg-link
+
ionic-body-lg-italic
+
+
+
Action
+
ionic-action-sm
+
ionic-action-md
+
ionic-action-lg
+
ionic-action-xl
+
+
+
Overline
+
ionic-overline-regular
+
ionic-overline-medium
+
ionic-overline-semi-bold
+
ionic-overline-bold
+
-
H1: The quick brown fox jumps over the lazy dog
-
H2: The quick brown fox jumps over the lazy dog
-
H3: The quick brown fox jumps over the lazy dog
-
H4: The quick brown fox jumps over the lazy dog
-
H5: The quick brown fox jumps over the lazy dog
-
H6: The quick brown fox jumps over the lazy dog
-
Tag_P FontLarge: The quick brown fox jumps over the lazy dog
-
Tag_None FontMedium: The quick brown fox jumps over the lazydog
-
Tag_Span FontSmall: The quick brown fox jumps over the lazy dog
-
-
Tag H1 - Style Heading 2 - Font Light
- Tag H2 - Style Heading 3 - Font Light
- Tag H3 - Style Heading 4 - Font Regular
- Tag H4 - Style Heading 5 - Font Medium
- Tag H5 - Style Heading 6 - Font Semibold
- Tag H6 - Style Heading 1 - Font Bold
-
- `,
- config
- );
-
- const div = page.locator('div');
- await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-semantic-tags`));
- });
-
- test('should apply the heading classes on ion-text element', async ({ page }) => {
- await page.setContent(
- `
-
-
-
-
Utility class 'ionic-heading1'
-
Utility class 'ionic-heading2'
-
Utility class 'ionic-heading3'
-
Utility class 'ionic-heading4'
-
Utility class 'ionic-heading5'
-
Utility class 'ionic-heading6'
-
-
Utility class 'ionic-font-light'
-
Utility class 'ionic-font-regular'
-
Utility class 'ionic-font-medium'
-
Utility class 'ionic-font-semibold'
-
Utility class 'ionic-font-bold'
-
-
Utility class 'ionic-display-s'
-
Utility class 'ionic-display-m'
-