…ables (#28797)

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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Both the background color step variables and the text color step
variables are based on the `--ion-color-step-` variables.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The background color step variables are defined based on the
`--ion-background-color-step-` values (not yet defined)
- The text color step variables are defined based on the
`--ion-text-color-step-` values (not yet defined)
- The previous values remain as fallbacks

## Does this introduce a breaking change?

- [ ] Yes
- [x] 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/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

)

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. -->
This PR introduces `high-contrast-light.{always, class, system}.css` and
`high-contrast-dark.{always, class, system}.css` files to add high
contrast themes to Ionic applications. It also defines new color tokens
that meet AAA WCAG criteria for text.

I also added tests to verify that these colors meet said criteria when
used against the correct contrast color.

## Does this introduce a breaking change?

- [ ] Yes
- [x] 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/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Reviews:

We already have test criteria that verifies a) the colors chosen meet
AAA WCAG criteria and b) that the CSS is being generated properly. It
would be good to get manual testing for the `.system.css` stylesheet:

1. Open any test file and make sure the high contrast system file is
loaded:
```html
<link href="../../../../../css/themes/high-contrast-dark.system.css" rel="stylesheet" />
```
2. Enable high contrast on your computer. For macOS, this can be enabled
in Settings > Accessibility > Display > Increase contrast. For iOS, this
can be enabled in Settings > Accessibility > Display & Text size >
Increase contrast. For Android, the system level toggle is only
available in Android 14 in Settings > Accessibility > Color and Motion >
Contrast Level.

…iables (#28813)

Issue number: N/A

---------

## What is the current behavior?
The step colors currently check if the modern variables are defined and
use the legacy variables as a fallback, like so:

```scss
$background-color-step-50: var(--ion-background-color-step-50, var(--ion-color-step-50);

...

$text-color-step-950: var(--ion-text-color-step-950, var(--ion-color-step-50);
``` 

This is an issue because when we define the new step variables to be
distributed as part of the light theme, it will always use those
variables and never use the user's defined legacy variables:

```scss
// ionic.theme.default.css

:root {
  --ion-background-color-step-50: #{mix($text-color-value, $background-color-value, 5%)};
}
```

## What is the new behavior?
Switch the order of the step color variables so that the legacy
variables are used first, with the modern variables used as a fallback:

```scss
$background-color-step-50: var(--ion-color-step-50, var(--ion-background-color-step-50);

...

$text-color-step-950: var(--ion-color-step-50, var(--ion-text-color-step-950);
``` 

This will allow a user to override us setting
`--ion-background-color-step-50` with their own `--ion-color-step-50`
variable.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->

With the high contrast themes, the `ion-toast` buttons do not have
sufficient color contrast to satisfy Level AAA.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `ion-toast` buttons satisfy Level AAA color contrast with the high
contrast themes

## Does this introduce a breaking change?

- [ ] Yes
- [x] 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/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

### Testing Locally

In `core/src/components/toast/test/buttons/index.html` add the
stylesheet import either the dark or light high contrast theme:

Dark (high contrast):
```css
<link href="../../../../../css/themes/high-contrast-dark.always.css" rel="stylesheet" />
```

Light (hight contrast):
```css
<link href="../../../../../css/themes/high-contrast-light.always.css" rel="stylesheet" />
```

---------

Co-authored-by: ionitron <hi@ionicframework.com>

…eme (#28814)

- updates the dark theme to include the new modern color tokens `--ion-background-color-step-*` and `--ion-text-color-step-*`
- updates the light theme to set these variables instead of using the fallback

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Range uses an `--ion-color-step-*` token directly. These tokens will be
deprecated soon.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

New token added, while keeping the old one for backwards compatibility.

## Does this introduce a breaking change?

- [ ] Yes
- [x] 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/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Action sheet uses an `--ion-color-step-*` token directly. These tokens
will be deprecated soon.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

New token added, while keeping the old one for backwards compatibility.

## Does this introduce a breaking change?

- [ ] Yes
- [x] 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/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Alert is using the wrong type of step tokens for a couple styles -- only
text elements should use `$text-color-step-*`, while everything else
(including borders) should use `$background-color-step-*`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Tokens updated, including changing the step values so the actual color
resolved remains the same.

## Does this introduce a breaking change?

- [ ] Yes
- [x] 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/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Issue number: internal

---------

## What is the current behavior?
The picker highlight only uses the `--ion-color-step-150` variable with
a fallback to `#eeeeef`.

## What is the new behavior?
The picker highlight falls back to using the
`--ion-background-color-step-150` variable if it is defined but
prioritizes `--ion-color-step-150` if it is also defined. This is the
new step color token added for high-contrast themes.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

No visual diffs are expected.

Issue number: internal

---------

## What is the current behavior?
The segment button checked indicator only uses the
`--ion-color-step-350` variable with a fallback to the
`--ion-background-color`.

## What is the new behavior?
The segment button checked indicator falls back to using the
`--ion-background-color-step-350` variable if it is defined but
prioritizes `--ion-color-step-350` if it is also defined. This is the
new step color token added for high-contrast themes.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

No visual diffs are expected.

… text (#28928)

Issue number: internal

---------

## What is the current behavior?
The toast container background and toast text color were using the
following:

```scss
/// @prop - Background of the toast
$toast-md-background: $text-color-step-200 !default;

/// @prop - Color of the toast
$toast-md-color: $background-color-step-50 !default;
```

Which evaluated to:

```css
:host {
  --background: var(--ion-color-step-800, var(--ion-text-color-step-200, #333333));
  --color: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
}
```

## What is the new behavior?
The variables have been updated so that the `background` variable is
used for the background of the toast container and the `text` variable
is used for the text color of the toast:

```scss
/// @prop - Background of the toast
$toast-md-background: $background-color-step-800 !default;

/// @prop - Color of the toast
$toast-md-color: $text-color-step-950 !default;
```

This evaluates to:

```css
:host {
  --background: var(--ion-color-step-800, var(--ion-background-color-step-800, #333333));
  --color: var(--ion-color-step-50, var(--ion-text-color-step-950, #f2f2f2));
}
```

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

There are no breaking changes as the `--ion-color-step-*` variables
being used are the same, and the `--ion-background-color-step-*` and
`--ion-text-color-step-*` have not been released yet. The fallback
colors when both variables are undefined have also not changed.

## Other information

No visual diffs are expected.

Issue number: internal

---------

## What is the current behavior?
The modal handle only uses the `--ion-color-step-350` variable with a
fallback to `#c0c0be`.

## What is the new behavior?
The modal handle falls back to using the
`--ion-background-color-step-350` variable if it is defined but
prioritizes `--ion-color-step-350` if it is also defined. This is the
new step color token added for high-contrast themes.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

No visual diffs are expected.

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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The breadcrumbs use the `--ion-color-step` tokens or a fallback.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The breadcrumb text colors use the `--ion-color-step` tokens or the
`--ion-text-color-step` tokens or a fallback
- The breadcrumb background colors use the `--ion-color-step` tokens or
the `--ion-background-color-step` tokens or a fallback

## Does this introduce a breaking change?

- [ ] Yes
- [x] 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/.github/CONTRIBUTING.md#footer
for more information.
-->

<!-- 
## Other information

Any other information that is important to this PR such as screenshots
of how the component looks before and after the change. -->

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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The refresher uses the --ion-color-step tokens or a fallback.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The refresher colors use the --ion-color-step tokens or the
--ion-text-color-step tokens or a fallback
- The refresher background colors use the --ion-color-step tokens or the
--ion-background-color-step tokens or a fallback

## Does this introduce a breaking change?

- [ ] Yes
- [x] 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/.github/CONTRIBUTING.md#footer
for more information.
-->

<!-- 
## Other information

Any other information that is important to this PR such as screenshots
of how the component looks before and after the change. -->

Issue number: internal

---------

## What is the current behavior?
Developers are unable to globally change the placeholder opacity for
inputs, textareas, searchbars, and selects. This becomes particularly
problematic when trying to apply a high contrast theme.
 
## What is the new behavior?
- Adds the `--ion-placeholder-opacity` with a fallback of `0.6` (this
fallback is unchanged)
- Sets the `--ion-placeholder-opacity` to `0.8` for the high contrast
light & dark themes

> [!NOTE]
> The ticket says to update the standard light and dark themes to define
`--ion-placeholder-opacity: 0.6`, however, I did not do this because
this is not different than the fallback and therefore does not need to
be defined.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

Documentation pull request:
ionic-team/ionic-docs#3421

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>