Repository navigation
chore(git): sync with next - #31717
Merged
Merged
Conversation
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 pull request updates the design tokens package and refines the
visual styling of several Ionic components to improve consistency and
support new elevation/background tokens. The most significant changes
are the adoption of new elevation background variables, updates to
box-shadow levels, and a dependency bump for design tokens.
**Design tokens and dependency updates:**
* Upgraded `outsystems-design-tokens` dependency from version `2.5.0` to
`2.6.0` in both `package.json` and `package-lock.json`, ensuring access
to the latest design primitives and variables.
[[1]](diffhunk://#diff-7f67769260741e2563407af949f7e54fbf0431d1c607933f6e8a8094e3219e26L105-R105)
[[2]](diffhunk://#diff-4ff996db8bece1eded512c3b97a6bde33622f94bb387634ef32496d832d57744L48-R48)
[[3]](diffhunk://#diff-4ff996db8bece1eded512c3b97a6bde33622f94bb387634ef32496d832d57744L9821-R9823)
**Component visual updates:**
* Updated the background and box-shadow variables for `action-sheet`,
`alert`, `modal`, `popover`, and `toast` components to use the new
elevation tokens (e.g., `--background:
#{globals.$ion-bg-surface-elevation-3}` and adjusted shadow levels),
aligning with the new design system elevations.
[[1]](diffhunk://#diff-d464f79e5825edde600e0754205ca6616f51144e197479032e0769f37ebd16f3L10-R10)
[[2]](diffhunk://#diff-438909c1519af97ef543093a884ce54b863b15451c81a7306e14d59439dc9a8fL10-R10)
[[3]](diffhunk://#diff-228f71c817342767c93cf48d915bf8dc88651d7b8b12608a71c74808ea117df8L8-R9)
[[4]](diffhunk://#diff-b7e56735cc2bc5ced6f50c1dff99396f1c03ae73191e179edee23f2143031a6aL10-R11)
[[5]](diffhunk://#diff-a52e63215d50cc125be7eb06adb6419bf4031c54179c93620ac006dee73330b8L8-R8)
**Design token variable management:**
* Moved the definitions for `$ion-primitives-base-white`,
`$ion-primitives-base-black`, and their RGB variants to a new location
in `ionic.vars.scss` to improve organization and maintainability.
[[1]](diffhunk://#diff-1338c32d120b3127caa5ac489c47b1f8366f5f7bb62b4a8be1c4e1ac56cd6f19L26-L29)
[[2]](diffhunk://#diff-1338c32d120b3127caa5ac489c47b1f8366f5f7bb62b4a8be1c4e1ac56cd6f19R362-R365)
* Added new elevation background variables
(`$ion-bg-surface-elevation-2`, `$ion-bg-surface-elevation-3`, and their
RGB variants) to the design token definitions to support the updated
component backgrounds.
## Does this introduce a breaking change?
- [x] Yes
- [ ] 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: ionitron <hi@ionicframework.com>
Co-authored-by: Shane <shane.king@outsystems.com>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Issue number: resolves internal --------- ## What is the current behavior? **Content** On the Ionic theme, `ion-content` still uses the native defaults: the background is `var(--ion-background-color, #fff)` and the text color is `var(--ion-text-color, #000)`. The background does not use the design token, and the text color resets the color already set on `body`, so everything inside the content gets `#000` instead of the default text token. **Colors in dark mode** On the Ionic theme, every bold color's `contrast` uses `$ion-text-inverse` (or `$ion-text-default` for warning/light), which flip with the dark palette. But several bold backgrounds do not flip: - primary, secondary, success and danger stay dark, so components using them (solid buttons, badges, bold chips, toasts, item-options) get near-black text on a dark background (e.g. ~2.5:1 on secondary). - warning stays yellow and light stays white, so they get white text on a light background (white-on-yellow ~2.4:1, white-on-white for light). ## What is the new behavior? **Content** - `ion-content` styles are split per theme (`content.common.scss`, `content.native.scss`, `content.ios.scss`, `content.md.scss`, `content.ionic.scss`), following the pattern used by other components. - On the Ionic theme, the content background now falls back to the body background token: `var(--ion-background-color, $ion-bg-body)`. - On the Ionic theme, the content no longer resets the text color (`--color: currentColor`), so it inherits the default text token set on `body`. - iOS and MD compile to the same CSS as before. The `--background` / `--color` custom properties keep working for consumers. **Colors in dark mode** In the `$ionic-colors` map (`ionic.theme.default.scss`), bold `contrast` values now match how each background behaves in the dark palette: - Backgrounds that stay dark (primary, secondary, success, danger) use `$ion-text-light`, so text stays white in both modes. - Backgrounds that stay light (warning, light) use `$ion-text-dark`, so text stays near-black in both modes. - Backgrounds that are lightened in the dark palette (tertiary, extended colors, medium, dark) keep `$ion-text-inverse`, which flips with the theme to preserve contrast. Light mode is visually unchanged for the `text-light` colors; warning/light text shifts slightly (`#242528` to `#131518`). Reference screenshots were regenerated. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information --------- Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves 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 current behavior? `ion-datetime` supports selecting a single date or multiple individual dates (via the `multiple` boolean prop). There is no way to select a contiguous range of dates with a start and end date. ## What is the new behavior? - Adds a new `selectionMode` prop with `"range"` and `"multiple"` options. Single-date selection remains the default when unset. - Range mode (`selectionMode="range"`) allows users to select a start and end date. The first tap sets the start, the second tap sets the end. Tapping again resets the range. - Range selection is visualized with pill-shaped start/end days and a colored track connecting them, consistent across ionic, iOS, and MD themes. - Today's date retains its blue text color when it falls within a range. - Adds `startDateLabel` and `endDateLabel` props for customizing header text and screen reader announcements. - Adds `--range-background` CSS custom property for theming the range track color. - Adds `range-start`, `range-end`, `range-selection`, and `range-track` CSS shadow parts. - The confirm button is disabled until both start and end dates are selected. - `ion-datetime-button` displays the range as "startDate - endDate". - Readonly ranges display normally (not faded); disabled ranges fade the track and pills equally. - Deprecates the `multiple` boolean prop in favor of `selectionMode="multiple"`. - Range selection only works with `presentation="date"` and `preferWheel="false"`. ## Does this introduce a breaking change? - [ ] Yes - [x] No The `multiple` prop continues to work but is deprecated. A console warning is logged when used. <!-- 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. --> ## Other information - [Datetime - Range Test Page](https://ionic-framework-git-rou-12704-datepicker-range-ionic1.vercel.app/src/components/datetime/test/range/) - [Datetime - Range Styling Test Page](https://ionic-framework-git-rou-12704-datepicker-range-ionic1.vercel.app/src/components/datetime/test/range-styling/) --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
…ic theme (#31697) Issue number: internal (ROU-13188) --------- ## What is the current behavior? In the `ionic` theme, a disabled `ion-accordion` is drawn with a `::before` overlay that uses the shared `disabled-state()` mixin, painting the `state-disabled` token over the whole component. That token is white at 60% opacity in light mode but black at 60% in dark mode. In light mode the white scrim blends into the white surface and looks like a fade, but in dark mode the black scrim turns the accordion surface (`#1a1d21`) into roughly `#0a0c0d` — darker than the page behind it (`#131518`) — so the disabled accordion renders as a black slab. ## What is the new behavior? - The `::before` overlay is removed from the disabled accordion in `accordion.ionic.scss`. - The disabled state is now expressed with colors, matching the design spec: the background stays unchanged, the header title and the content text switch to the `text-disabled` token, and the toggle icon switches to the `icon-disabled` token. - The header and content colors live in `accordion.ionic.scss`; the toggle icon rule lives in `core.ionic.scss` because the icon is injected into the slotted header item (light DOM), like its existing default-state rule. - Verified computed colors: light `#9fa5ad` on a white surface, dark `#505763` on the `#1a1d21` surface, for title, content and icon. - The shared `disabled-state()` mixin and the other components that use it are untouched. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information - Interaction is unchanged: `pointer-events: none` for the disabled state lives in `accordion.common.scss`, and the `disabled` e2e tests (clicks and keyboard) pass. - The `ionic-md` light screenshots for the disabled accordion states will change: `accordion/test/states`, `accordion/test/nested`, `accordion-group/test/states`. - Note when testing with the `states` test page: it sets `color="light"` on `ion-content`, which stays white even with dark tokens; the disabled colors themselves are unaffected by this, since they no longer depend on what is behind the accordion. --------- Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: ionitron <hi@ionicframework.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
package: core
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Sync ionic-modular with next.
ionic-modular's singlecontent.scssandstyleUrl, and droppednext's per-theme content files from feat(colors): update colors to be dark theme compatible #31691. The ionic content changes from feat(colors): update colors to be dark theme compatible #31691 move into tokens in FW-7946ionic-modular'sionic.theme.default.scss, which no longer has$ionic-colors. feat(colors): update colors to be dark theme compatible #31691's ionic contrast fix belongs to the ionic palette work in FW-7558api.txtMerge with a merge commit, not squash.