feat(breadcrumb): support dynamic type (#27759)

ionic-team · Aug 18, 2023 · 0dd8897 · 0dd8897
1 parent 99a0556
commit 0dd8897
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/core/src/components/breadcrumb/breadcrumb.ios.scss b/core/src/components/breadcrumb/breadcrumb.ios.scss
@@ -10,6 +10,14 @@
   --color-hover: #{$breadcrumb-ios-color-active};
   --color-focused: var(--color-active);
   --background-focused: #{$breadcrumb-ios-background-focused};
+
+  /**
+   * Main content should be prioritized
+   * on iOS, so we set max font size for breadcrumbs.
+   * 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);
 }
 
 :host(.breadcrumb-active) {
@@ -58,7 +66,7 @@
 ::slotted(ion-icon) {
   color: $breadcrumb-ios-icon-color;
 
-  font-size: 18px;
+  font-size: min(1.125rem, 22px);
 }
 
 ::slotted(ion-icon[slot="start"]) {
@@ -92,3 +100,7 @@
 .breadcrumbs-collapsed-indicator:focus {
   background: $breadcrumb-ios-indicator-background-focused;
 }
+
+.breadcrumbs-collapsed-indicator ion-icon {
+  font-size: min(1.375rem, 22px);
+}
diff --git a/core/src/components/breadcrumb/breadcrumb.md.scss b/core/src/components/breadcrumb/breadcrumb.md.scss
@@ -53,7 +53,7 @@
 ::slotted(ion-icon) {
   color: $breadcrumb-md-icon-color;
 
-  font-size: 18px;
+  font-size: 1.125rem;
 }
 
 ::slotted(ion-icon[slot="start"]) {

diff --git a/core/src/components/breadcrumb/breadcrumb.scss b/core/src/components/breadcrumb/breadcrumb.scss
@@ -156,5 +156,5 @@
 .breadcrumbs-collapsed-indicator ion-icon {
   margin-top: 1px;
 
-  font-size: 22px;
+  font-size: 1.375rem;
 }
diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss
@@ -7,7 +7,7 @@
 $breadcrumb-font-weight:         400 !default;
 
 /// @prop - Font size of the breadcrumb
-$breadcrumb-font-size:           16px !default;
+$breadcrumb-font-size:           1rem !default;
 
 /// @prop - Color of the breadcrumb separator
 $breadcrumb-separator-color:     var(--ion-color-step-550, #73849a) !default;