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

refactor: add dynamic type sass functions (#27934)

Browse Source
This commit is contained in:
Liam DeBeasi
2023-08-08 10:05:24 -05:00
committed by GitHub
parent 8fae6da3f1
commit 7b458b6a87
30 changed files with 122 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/action-sheet/action-sheet.ios.vars.scss
View File

@@ -50,7 +50,7 @@ $action-sheet-ios-title-padding-start: $action-sheet-
$action-sheet-ios-title-color: $text-color-step-600 !default;
/// @prop - Font size of the action sheet title
$action-sheet-ios-title-font-size: max(13px, 0.8125rem) !default;
$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px) !default;
/// @prop - Font weight of the action sheet title
$action-sheet-ios-title-font-weight: 400 !default;
@@ -75,7 +75,7 @@ $action-sheet-ios-title-border-color: rgba($text-col
// --------------------------------------------------
/// @prop - Font size of the action sheet sub title
$action-sheet-ios-sub-title-font-size: max(13px, 0.8125rem) !default;
$action-sheet-ios-sub-title-font-size: dynamic-font-min(1, 13px) !default;
/// @prop - Padding top of the action sheet sub title
$action-sheet-ios-sub-title-padding-top: 6px !default;
@@ -103,13 +103,13 @@ $action-sheet-ios-button-padding: 14px !default;
$action-sheet-ios-button-text-color: ion-color(primary, base) !default;
/// @prop - Font size of the action sheet button icon
$action-sheet-ios-button-icon-font-size: max(28px, 1.75rem) !default;
$action-sheet-ios-button-icon-font-size: dynamic-font-min(1, 28px) !default;
/// @prop - Padding right of the action sheet button icon
$action-sheet-ios-button-icon-padding-right: .3em !default;
/// @prop - Font size of the action sheet button
$action-sheet-ios-button-font-size: max(20px, 1.25rem) !default;
$action-sheet-ios-button-font-size: dynamic-font-min(1, 20px) !default;
/// @prop - Border color alpha of the action sheet button
$action-sheet-ios-button-border-color-alpha: .08 !default;

8
core/src/components/action-sheet/action-sheet.md.vars.scss
View File

@@ -26,7 +26,7 @@ $action-sheet-md-title-height: 60px !default;
$action-sheet-md-title-color: rgba($text-color-rgb, 0.54) !default;
/// @prop - Font size of the action sheet title
$action-sheet-md-title-font-size: 1rem !default;
$action-sheet-md-title-font-size: dynamic-font(16px) !default;
/// @prop - Padding top of the action sheet title
$action-sheet-md-title-padding-top: 20px !default;
@@ -45,7 +45,7 @@ $action-sheet-md-title-padding-start: $action-sheet-md-title-p
// --------------------------------------------------
/// @prop - Font size of the action sheet sub title
$action-sheet-md-sub-title-font-size: 0.875rem !default;
$action-sheet-md-sub-title-font-size: dynamic-font(14px) !default;
/// @prop - Padding top of the action sheet sub title
$action-sheet-md-sub-title-padding-top: 16px !default;
@@ -70,7 +70,7 @@ $action-sheet-md-button-height: 52px !default;
$action-sheet-md-button-text-color: $text-color-step-150 !default;
/// @prop - Font size of the action sheet button
$action-sheet-md-button-font-size: 1rem !default;
$action-sheet-md-button-font-size: dynamic-font(16px) !default;
/// @prop - Padding top of the action sheet button
$action-sheet-md-button-padding-top: 12px !default;
@@ -91,7 +91,7 @@ $action-sheet-md-button-background: transparent !default;
// --------------------------------------------------
/// @prop - Font size of the icon in the action sheet button
$action-sheet-md-icon-font-size: 1.5rem !default;
$action-sheet-md-icon-font-size: dynamic-font(24px) !default;
/// @prop - Margin top of the icon in the action sheet button
$action-sheet-md-icon-margin-top: 0 !default;

4
core/src/components/back-button/back-button.ios.scss
View File

@@ -29,8 +29,10 @@
* button which is why a maximum font size is applied.
* Also, we want the text to remain readable
* so a minimum font size is applied.
* Using 1.294 instead of 1.3 aligns the text
* with the icon a bit nicer in Firefox.
*/
font-size: clamp(17px, 1.0625rem, 22px);
font-size: dynamic-font-clamp(1, 17px, 1.294);
}
.button-native {

4
core/src/components/back-button/back-button.md.scss
View File

@@ -13,14 +13,14 @@
--color: #{$back-button-md-color};
--icon-margin-end: 0;
--icon-margin-start: 0;
--icon-font-size: 1.5rem;
--icon-font-size: #{dynamic-font(24px)};
--icon-font-weight: normal;
--min-height: 32px;
--min-width: 44px;
--padding-start: 12px;
--padding-end: 12px;
font-size: 0.875rem;
font-size: dynamic-font(14px);
font-weight: 500;
text-transform: uppercase;

2
core/src/components/badge/badge.ios.scss
View File

@@ -14,5 +14,5 @@
* with other components and in case "-apple-system-body" does
* go smaller than 14px in the future.
*/
font-size: max(13px, $badge-font-size);
font-size: dynamic-font-min(1, $badge-baseline-font-size);
}

5
core/src/components/badge/badge.vars.scss
View File

@@ -18,8 +18,11 @@ $badge-padding-start: $badge-padding-end !default;
/// @prop - Minimum width of the badge
$badge-min-width: 10px !default;
/// @prop - Baseline font size of the badge
$badge-baseline-font-size: 13px !default;
/// @prop - Font size of the badge
$badge-font-size: 0.8125rem !default;
$badge-font-size: dynamic-font($badge-baseline-font-size) !default;
/// @prop - Font weight of the badge
$badge-font-weight: bold !default;

6
core/src/components/breadcrumb/breadcrumb.ios.scss
View File

@@ -17,7 +17,7 @@
* Breadcrumbs can be placed in the content too, so
* we add a min font size to keep the text legible.
*/
font-size: clamp(16px, #{$breadcrumb-font-size}, 22px);
font-size: dynamic-font-clamp(1, $breadcrumb-baseline-font-size, 1.375);
}
:host(.breadcrumb-active) {
@@ -66,7 +66,7 @@
::slotted(ion-icon) {
color: $breadcrumb-ios-icon-color;
font-size: min(1.125rem, 22px);
font-size: dynamic-font-max(18px, 1.2);
}
::slotted(ion-icon[slot="start"]) {
@@ -102,5 +102,5 @@
}
.breadcrumbs-collapsed-indicator ion-icon {
font-size: min(1.375rem, 22px);
font-size: dynamic-font-max(22px, 1);
}

2
core/src/components/breadcrumb/breadcrumb.md.scss
View File

@@ -53,7 +53,7 @@
::slotted(ion-icon) {
color: $breadcrumb-md-icon-color;
font-size: 1.125rem;
font-size: dynamic-font(18px);
}
::slotted(ion-icon[slot="start"]) {

2
core/src/components/breadcrumb/breadcrumb.scss
View File

@@ -156,5 +156,5 @@
.breadcrumbs-collapsed-indicator ion-icon {
margin-top: 1px;
font-size: 1.375rem;
font-size: dynamic-font(22px);
}

4
core/src/components/breadcrumb/breadcrumb.vars.scss
View File

@@ -6,8 +6,10 @@
/// @prop - Font weight of the breadcrumb
$breadcrumb-font-weight: 400 !default;
$breadcrumb-baseline-font-size: 16px !default;
/// @prop - Font size of the breadcrumb
$breadcrumb-font-size: 1rem !default;
$breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size) !default;
/// @prop - Color of the breadcrumb separator
$breadcrumb-separator-color: var(--ion-color-step-550, #73849a) !default;

8
core/src/components/button/button.ios.vars.scss
View File

@@ -36,7 +36,7 @@ $button-ios-border-radius: 14px !default;
/// @prop - Font size of the button text
/// The maximum font size is calculated by taking the default font size
/// and multiplying it by 3, since 310% of the default is the maximum
$button-ios-font-size: min(1rem, 48px) !default;
$button-ios-font-size: dynamic-font-max(16px, 3) !default;
/// @prop - Font weight of the button text
$button-ios-font-weight: 500 !default;
@@ -87,7 +87,7 @@ $button-ios-large-border-radius: 16px !default;
/// @prop - Font size of the large button
/// The maximum font size is calculated by taking the default font size
/// and multiplying it by 3, since 310% of the default is the maximum
$button-ios-large-font-size: min(1.25rem, 60px) !default;
$button-ios-large-font-size: dynamic-font-max(20px, 3) !default;
// iOS Small Button
@@ -114,7 +114,7 @@ $button-ios-small-border-radius: 6px !default;
/// @prop - Font size of the small button
/// The maximum font size is calculated by taking the default font size
/// and multiplying it by 3, since 310% of the default is the maximum
$button-ios-small-font-size: min(0.8125rem, 39px) !default;
$button-ios-small-font-size: dynamic-font-max(13px, 3) !default;
// iOS Outline Button
@@ -159,7 +159,7 @@ $button-ios-outline-background-color-focused: ion-color(primary, base, $
/// @prop - Font size of the clear button
/// The maximum font size is calculated by taking the default font size
/// and multiplying it by 3, since 310% of the default is the maximum
$button-ios-clear-font-size: min(1.0625rem, 51px) !default;
$button-ios-clear-font-size: dynamic-font-max(17px, 3) !default;
/// @prop - Font weight of the clear button
$button-ios-clear-font-weight: normal !default;

6
core/src/components/button/button.md.vars.scss
View File

@@ -34,7 +34,7 @@ $button-md-height: 36px !default;
$button-md-border-radius: 4px !default;
/// @prop - Font size of the button text
$button-md-font-size: 0.875rem !default;
$button-md-font-size: dynamic-font(14px) !default;
/// @prop - Font weight of the button text
$button-md-font-weight: 500 !default;
@@ -78,7 +78,7 @@ $button-md-large-padding-start: $button-md-large-padding
$button-md-large-height: 2.8em !default;
/// @prop - Font size of the large button
$button-md-large-font-size: 1.25rem !default;
$button-md-large-font-size: dynamic-font(20px) !default;
// Material Design Small Button
@@ -100,7 +100,7 @@ $button-md-small-padding-start: $button-md-small-padding
$button-md-small-height: 2.1em !default;
/// @prop - Font size of the small button
$button-md-small-font-size: 0.8125rem !default;
$button-md-small-font-size: dynamic-font(13px) !default;
// Material Design Outline Button

10
core/src/components/card-content/card-content.ios.scss
View File

@@ -14,14 +14,14 @@
h1 {
@include margin(0, 0, 2px);
font-size: 1.5rem;
font-size: dynamic-font(24px);
font-weight: normal;
}
h2 {
@include margin(2px, 0);
font-size: 1rem;
font-size: dynamic-font(16px);
font-weight: normal;
}
@@ -31,17 +31,17 @@
h6 {
@include margin(2px, 0);
font-size: 0.875rem;
font-size: dynamic-font(14px);
font-weight: normal;
}
p {
@include margin(0, 0, 2px);
font-size: 0.875rem;
font-size: dynamic-font(14px);
}
}
ion-card-header + .card-content-ios {
padding-top: 0;
}
}

2
core/src/components/card-content/card-content.ios.vars.scss
View File

@@ -16,4 +16,4 @@ $card-ios-padding-bottom: $card-ios-padding-top !default;
$card-ios-padding-start: $card-ios-padding-top !default;
/// @prop - Font size of the card
$card-ios-font-size: 1rem !default;
$card-ios-font-size: dynamic-font(16px) !default;

8
core/src/components/card-content/card-content.md.scss
View File

@@ -14,14 +14,14 @@
h1 {
@include margin(0, 0, 2px);
font-size: 1.5rem;
font-size: dynamic-font(24px);
font-weight: normal;
}
h2 {
@include margin(2px, 0);
font-size: 1rem;
font-size: dynamic-font(16px);
font-weight: normal;
}
@@ -31,14 +31,14 @@
h6 {
@include margin(2px, 0);
font-size: 0.875rem;
font-size: dynamic-font(14px);
font-weight: normal;
}
p {
@include margin(0, 0, 2px);
font-size: 0.875rem;
font-size: dynamic-font(14px);
font-weight: normal;
line-height: 1.5;

2
core/src/components/card-content/card-content.md.vars.scss
View File

@@ -16,7 +16,7 @@ $card-md-padding-bottom: 13px !default;
$card-md-padding-start: 16px !default;
/// @prop - Font size of the card
$card-md-font-size: 0.875rem !default;
$card-md-font-size: dynamic-font(14px) !default;
/// @prop - Line height of the card
$card-md-line-height: 1.5 !default;

2
core/src/components/card-subtitle/card-subtitle.ios.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the card subtitle
$card-ios-subtitle-font-size: 0.75rem !default;
$card-ios-subtitle-font-size: dynamic-font(12px) !default;
/// @prop - Font weight of the card subtitle
$card-ios-subtitle-font-weight: 700 !default;

2
core/src/components/card-subtitle/card-subtitle.md.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the card subtitle
$card-md-subtitle-font-size: 0.875rem !default;
$card-md-subtitle-font-size: dynamic-font(14px) !default;
/// @prop - Padding top of the card subtitle
$card-md-subtitle-padding-top: 0 !default;

2
core/src/components/card-title/card-title.ios.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the card title
$card-ios-title-font-size: 1.75rem !default;
$card-ios-title-font-size: dynamic-font(28px) !default;
/// @prop - Font weight of the card title
$card-ios-title-font-weight: 700 !default;

2
core/src/components/card-title/card-title.md.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the card title
$card-md-title-font-size: 1.25rem !default;
$card-md-title-font-size: dynamic-font(20px) !default;
/// @prop - Padding top of the card title
$card-md-title-padding-top: 0 !default;

2
core/src/components/card/card.ios.vars.scss
View File

@@ -25,7 +25,7 @@ $card-ios-box-shadow: 0 4px 16px $card-ios-box-shadow-color !de
$card-ios-border-radius: 8px !default;
/// @prop - Font size of the card
$card-ios-font-size: 0.875rem !default;
$card-ios-font-size: dynamic-font(14px) !default;
/// @prop - Transition timing function of the card
$card-ios-transition-timing-function: cubic-bezier(0.12, 0.72, 0.29, 1) !default;

2
core/src/components/card/card.md.vars.scss
View File

@@ -22,7 +22,7 @@ $card-md-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0
$card-md-border-radius: 4px !default;
/// @prop - Font size of the card
$card-md-font-size: 0.875rem !default;
$card-md-font-size: dynamic-font(14px) !default;
/// @prop - Line height of the card
$card-md-line-height: 1.5 !default;

2
core/src/components/datetime-button/datetime-button.scss
View File

@@ -29,7 +29,7 @@
color: $text-color;
font-family: inherit;
font-size: 1rem;
font-size: dynamic-font(16px);
cursor: pointer;

2
core/src/components/loading/loading.ios.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the loading wrapper
$loading-ios-font-size: 0.875rem !default;
$loading-ios-font-size: dynamic-font(14px) !default;
/// @prop - Padding top of the loading wrapper
$loading-ios-padding-top: 24px !default;

2
core/src/components/loading/loading.md.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the loading wrapper
$loading-md-font-size: 0.875rem !default;
$loading-md-font-size: dynamic-font(14px) !default;
/// @prop - Padding top of the loading wrapper
$loading-md-padding-top: 24px !default;

2
core/src/components/reorder/reorder.ios.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the reorder icon
$reorder-ios-icon-font-size: 2.125rem !default;
$reorder-ios-icon-font-size: dynamic-font(34px) !default;
/// @prop - Opacity of the reorder icon
$reorder-ios-icon-opacity: .4 !default;

2
core/src/components/reorder/reorder.md.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font size of the reorder icon
$reorder-md-icon-font-size: 1.9375rem !default;
$reorder-md-icon-font-size: dynamic-font(31px) !default;
/// @prop - Opacity of the reorder icon
$reorder-md-icon-opacity: .3 !default;

2
core/src/components/reorder/reorder.scss
View File

@@ -24,5 +24,5 @@
* icons resize with Dynamic Type.
*/
::slotted(ion-icon) {
font-size: 1rem;
font-size: dynamic-font(16px);
}

63
core/src/themes/ionic.functions.font.scss Normal file
View File

@@ -0,0 +1,63 @@
@use "sass:math";
$baselineSize: 16px !default;
$baselineUnit: 1rem !default;
/**
* 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);
}

3
core/src/themes/ionic.globals.scss
View File

@@ -5,6 +5,9 @@
// Global Color Functions
@import "./ionic.functions.color";
// Global Font Functions
@import "./ionic.functions.font";
// Global Mixins
@import "./ionic.mixins";