Skip to content

Commit

Permalink
feat(theming): add a global --ion-placeholder-opacity variable (#28944)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
brandyscarney authored Feb 1, 2024
1 parent c487dac commit 4d8aff0
Show file tree
Hide file tree
Showing 3 changed files with 5 additions and 1 deletion.
2 changes: 2 additions & 0 deletions core/src/css/themes/high-contrast-dark.scss
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,8 @@ $colors: (
--ion-color-#{$color-name}-shade: #{map.get($value, shade)};
--ion-color-#{$color-name}-tint: #{map.get($value, tint)};
}

--ion-placeholder-opacity: 0.8;
}

// Toast
Expand Down
2 changes: 2 additions & 0 deletions core/src/css/themes/high-contrast-light.scss
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,8 @@ $colors: (
--ion-color-#{$color-name}-shade: #{map.get($value, shade)};
--ion-color-#{$color-name}-tint: #{map.get($value, tint)};
}

--ion-placeholder-opacity: 0.8;
}

// Toast
Expand Down
2 changes: 1 addition & 1 deletion core/src/themes/ionic.globals.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ $screen-breakpoints: (
// Input placeholder opacity
// Ensures that the placeholder has the
// correct color contrast against the background.
$placeholder-opacity: 0.6 !default;
$placeholder-opacity: var(--ion-placeholder-opacity, 0.6) !default;

$form-control-label-margin: 16px !default;

Expand Down

0 comments on commit 4d8aff0

Please sign in to comment.