From e1b59ac63a66c9a5600f01e0c991b592a665880d Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 10 Nov 2026 08:32:58 -0800 Subject: [PATCH] docs(breaking): call the md and ios classes mode classes --- BREAKING.md | 72 ++++++++++++++++++++++++++--------------------------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/BREAKING.md b/BREAKING.md index c14d44c0a57..15a7803637b 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -118,7 +118,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver - `--color` is replaced by `IonChip.hue.subtle.solid.default` for global styles and `--ion-chip-hue-subtle-solid-default-color` for component-specific styles if the chip has a subtle hue and solid fill. - `--color` is replaced by `IonChip.hue.subtle.outline.default` for global styles and `--ion-chip-hue-subtle-outline-default-color` for component-specific styles if the chip has a subtle hue and outline fill. - The `outline` property has been deprecated. To achieve an outlined chip, set the `fill` property to `"outline"`. The class `.chip-outline` has also been updated to `.chip-fill-outline` for clarity. -- Specific theme classes (e.g., `ion-chip.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting. +- Specific mode classes (e.g., `ion-chip.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting. - The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `IonChip.shape.round.border.radius` to specify a different value for global styles and `--ion-chip-shape-round-border-radius` for component-specific styles.

Col

@@ -128,7 +128,7 @@ The following breaking changes apply to `ion-col`: 1. `--ion-grid-column-padding-*` CSS variables have been replaced with per-side, per-breakpoint tokens in the `col` namespace. [1](#version-10x-col-padding-variables) 2. The breakpoint-suffixed `size`, `order` and `offset` properties have been deprecated. [2](#version-10x-col-deprecated-breakpoint-properties) 3. The `push` and `pull` properties have been deprecated. [3](#version-10x-col-deprecated-push-and-pull-properties) -4. Theme classes (`ion-col.md`, `ion-col.ios`) are no longer supported. [4](#version-10x-col-theme-classes) +4. Mode classes (`ion-col.md`, `ion-col.ios`) are no longer supported. [4](#version-10x-col-mode-classes)
Padding variables
@@ -303,9 +303,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has ` ``` -
Theme classes
+
Mode classes
-Remove any instances that target the theme classes: `ion-col.md`, `ion-col.ios`. +Remove any instances that target the mode classes: `ion-col.md`, `ion-col.ios`.

Content

@@ -314,7 +314,7 @@ The following breaking changes apply to `ion-content`: 1. `--background` and `--color` CSS variables have been replaced. 2. `--padding-*` CSS variables are no longer part of the documented public API (but remain functional). 3. `--keyboard-offset`, `--offset-top`, and `--offset-bottom` have been renamed to the `--internal-*` namespace with no replacement. -4. Theme classes (`ion-content.md`, `ion-content.ios`) are no longer supported. +4. Mode classes (`ion-content.md`, `ion-content.ios`) are no longer supported.
Removed CSS variables
@@ -351,9 +351,9 @@ The following CSS variables were previously documented `@prop`s on `ion-content` These are managed by `ion-content` itself (keyboard avoidance and header/footer offsets) and were never intended for consumer override. There is no replacement — any code that was setting them directly should be removed. -
Theme classes
+
Mode classes
-Remove any instances that target the theme classes: `ion-content.md`, `ion-content.ios`. +Remove any instances that target the mode classes: `ion-content.md`, `ion-content.ios`.

Datetime

@@ -365,7 +365,7 @@ The following breaking changes apply to `ion-grid`: 1. `--ion-grid-padding-*` CSS variables have been replaced with per-side, per-breakpoint tokens. [1](#version-10x-grid-padding-variables) 2. `--ion-grid-width-*` CSS variables for the fixed grid have been replaced with per-breakpoint tokens. [2](#version-10x-grid-fixed-width-variables) -3. Theme classes (`ion-grid.md`, `ion-grid.ios`) are no longer supported. [3](#version-10x-grid-theme-classes) +3. Mode classes (`ion-grid.md`, `ion-grid.ios`) are no longer supported. [3](#version-10x-grid-mode-classes)
Padding variables
@@ -381,19 +381,19 @@ Grid padding was a single value per breakpoint and is now set per-side. Use the |---|---|---| | `--ion-grid-width-{bp}` | `IonGrid.breakpoint.{bp}.width` | `--ion-grid-breakpoint-{bp}-width` | -
Theme classes
+
Mode classes
-Remove any instances that target the theme classes: `ion-grid.md`, `ion-grid.ios`. +Remove any instances that target the mode classes: `ion-grid.md`, `ion-grid.ios`.

Image

The following breaking changes apply to `ion-img`: -1. Theme classes (`ion-img.md`, `ion-img.ios`) are no longer supported. +1. Mode classes (`ion-img.md`, `ion-img.ios`) are no longer supported. -
Theme classes
+
Mode classes
-Remove any instances that target the theme classes: `ion-img.md`, `ion-img.ios`. +Remove any instances that target the mode classes: `ion-img.md`, `ion-img.ios`.

Input Otp

@@ -414,17 +414,17 @@ If you were targeting the internals of `ion-input-otp` in your CSS, you will nee - `--inner-padding-end` is replaced by `IonItemDivider.inner.padding.end` for global styles and `--ion-item-divider-inner-padding-end` for component-specific overrides. - `--inner-padding-bottom` is replaced by `IonItemDivider.inner.padding.bottom` for global styles and `--ion-item-divider-inner-padding-bottom` for component-specific overrides. - `--inner-padding-start` is replaced by `IonItemDivider.inner.padding.start` for global styles and `--ion-item-divider-inner-padding-start` for component-specific overrides. -- Specific theme classes (e.g., `ion-item-divider.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting. +- Specific mode classes (e.g., `ion-item-divider.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting.

Menu Toggle

The following breaking changes apply to `ion-menu-toggle`: -1. Theme classes (`ion-menu-toggle.md`, `ion-menu-toggle.ios`) are no longer supported. +1. Mode classes (`ion-menu-toggle.md`, `ion-menu-toggle.ios`) are no longer supported. -
Theme classes
+
Mode classes
-Remove any instances that target the theme classes: `ion-menu-toggle.md`, `ion-menu-toggle.ios`. +Remove any instances that target the mode classes: `ion-menu-toggle.md`, `ion-menu-toggle.ios`.

Radio Group

@@ -439,7 +439,7 @@ Additionally, the `radio-group-wrapper` div element has been removed, causing sl The following breaking changes apply to `ion-ripple-effect`: 1. The previously undocumented `--ripple-opacity` CSS variable has been renamed to `--ion-ripple-effect-opacity`. [1](#version-10x-ripple-effect-opacity-variable) -2. Theme classes (`ion-ripple-effect.md`, `ion-ripple-effect.ios`) are no longer supported. [2](#version-10x-ripple-effect-theme-classes) +2. Mode classes (`ion-ripple-effect.md`, `ion-ripple-effect.ios`) are no longer supported. [2](#version-10x-ripple-effect-mode-classes)
Opacity variable
@@ -449,19 +449,19 @@ The ripple fade opacity is now part of the centralized Ionic Theming system. Use |---|---|---| | `--ripple-opacity` | `IonRippleEffect.opacity` | `--ion-ripple-effect-opacity` | -
Theme classes
+
Mode classes
-Remove any instances that target the theme classes: `ion-ripple-effect.md`, `ion-ripple-effect.ios`. +Remove any instances that target the mode classes: `ion-ripple-effect.md`, `ion-ripple-effect.ios`.

Row

The following breaking changes apply to `ion-row`: -1. Theme classes (`ion-row.md`, `ion-row.ios`) are no longer supported. [1](#version-10x-row-theme-classes) +1. Mode classes (`ion-row.md`, `ion-row.ios`) are no longer supported. [1](#version-10x-row-mode-classes) -
Theme classes
+
Mode classes
-Remove any instances that target the theme classes: `ion-row.md`, `ion-row.ios`. +Remove any instances that target the mode classes: `ion-row.md`, `ion-row.ios`.

Skeleton Text

@@ -469,7 +469,7 @@ The following breaking changes apply to `ion-skeleton-text`: 1. `--background` and `--background-rgb` CSS variables have been replaced with per-state background tokens, each split into an RGB value and an alpha. [1](#version-10x-skeleton-text-replaced-css-variables) 2. `--border-radius` has been replaced. [1](#version-10x-skeleton-text-replaced-css-variables) -3. Theme classes (`ion-skeleton-text.md`, `ion-skeleton-text.ios`) are no longer supported. [2](#version-10x-skeleton-text-theme-classes) +3. Mode classes (`ion-skeleton-text.md`, `ion-skeleton-text.ios`) are no longer supported. [2](#version-10x-skeleton-text-mode-classes)
Replaced CSS variables
@@ -486,9 +486,9 @@ The previously fixed opacities are now adjustable through new per-state alpha to > [!NOTE] > `--background` (the resting color) has been removed with no one-to-one replacement; set `--ion-skeleton-text-default-background-rgb` (and optionally `--ion-skeleton-text-default-background-alpha`) instead. The single `--background-rgb` variable previously tinted both the resting fill and the animated shimmer. It is now split per state, so set both `--ion-skeleton-text-default-background-rgb` and `--ion-skeleton-text-animated-background-rgb` to recolor both. -
Theme classes
+
Mode classes
-Remove any instances that target the theme classes: `ion-skeleton-text.md`, `ion-skeleton-text.ios`. +Remove any instances that target the mode classes: `ion-skeleton-text.md`, `ion-skeleton-text.ios`.

Spinner

@@ -497,7 +497,7 @@ Remove any instances that target the theme classes: `ion-skeleton-text.md`, `ion `--ion-spinner-color` for component-specific styles. - CSS classes now include the property name to improve clarity. - `.spinner-[spinner-name]` → `.spinner-name-[spinner-name]` -- Specific theme classes (e.g., `ion-spinner.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting. +- Specific mode classes (e.g., `ion-spinner.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting.

Split Pane

@@ -508,7 +508,7 @@ Remove any instances that target the theme classes: `ion-skeleton-text.md`, `ion The following breaking changes apply to `ion-text`: 1. The color applied by the `color` prop is now driven by the centralized Ionic Theming system, scoped to the new `hue` property. -2. Theme classes (`ion-text.md`, `ion-text.ios`) are no longer supported. +2. Mode classes (`ion-text.md`, `ion-text.ios`) are no longer supported.
New `hue` property and color tokens
@@ -521,9 +521,9 @@ When `color` is set, the text color now reads from a token instead of `--ion-col | `bold` | `IonText.hue.bold.semantic.default.color` | `--ion-text-hue-bold-semantic-default-color` | | `subtle` | `IonText.hue.subtle.semantic.default.color` | `--ion-text-hue-subtle-semantic-default-color` | -
Theme classes
+
Mode classes
-Remove any instances that target the theme classes: `ion-text.md`, `ion-text.ios`. +Remove any instances that target the mode classes: `ion-text.md`, `ion-text.ios`.

Textarea

@@ -552,7 +552,7 @@ The following breaking changes apply to `ion-thumbnail`: 1. `--size` has been split into separate `--ion-thumbnail-width` and `--ion-thumbnail-height` CSS variables. [1](#version-10x-thumbnail-replaced-css-variables) 2. `--border-radius` has been replaced. [1](#version-10x-thumbnail-replaced-css-variables) -3. Theme classes (`ion-thumbnail.md`, `ion-thumbnail.ios`) are no longer supported. [2](#version-10x-thumbnail-theme-classes) +3. Mode classes (`ion-thumbnail.md`, `ion-thumbnail.ios`) are no longer supported. [2](#version-10x-thumbnail-mode-classes)
Replaced CSS variables
@@ -578,9 +578,9 @@ Use the **parent's** thumbnail tokens instead: | Inside `ion-item` | `IonItem.thumbnail.width` / `IonItem.thumbnail.height` | `--ion-item-thumbnail-width` / `--ion-item-thumbnail-height` | | Inside `ion-item-divider` | `IonItemDivider.thumbnail.width` / `IonItemDivider.thumbnail.height` | `--ion-item-divider-thumbnail-width` / `--ion-item-divider-thumbnail-height` | -
Theme classes
+
Mode classes
-Remove any instances that target the theme classes: `ion-thumbnail.md`, `ion-thumbnail.ios`. +Remove any instances that target the mode classes: `ion-thumbnail.md`, `ion-thumbnail.ios`.

Title

@@ -590,7 +590,7 @@ The following breaking changes apply to `ion-title`: 2. The color applied by the `color` prop is now driven by the centralized Ionic Theming system, scoped to the new `hue` property. [2](#version-10x-title-hue) 3. The size classes now include the property name, and a title without `size` is now `medium`. [3](#version-10x-title-size-classes) 4. The `title-rtl` class has been removed. [4](#version-10x-title-rtl-class) -5. Theme classes (`ion-title.md`, `ion-title.ios`) are no longer supported. [5](#version-10x-title-theme-classes) +5. Mode classes (`ion-title.md`, `ion-title.ios`) are no longer supported. [5](#version-10x-title-mode-classes) 6. In the `md` theme, a tap on the title's padding no longer counts as a tap on the title. [6](#version-10x-title-padding-taps) 7. The `ios` small title has more padding at its sides, and the `md` title has tighter letter spacing. [7](#version-10x-title-spacing) @@ -636,9 +636,9 @@ The classes `ion-title` adds for its size now include the property name. A title +ion-title:dir(rtl) { } ``` -
Theme classes
+
Mode classes
-Remove any instances that target the theme classes: `ion-title.md`, `ion-title.ios`. +Remove any instances that target the mode classes: `ion-title.md`, `ion-title.ios`.
Taps on the title's padding