Skip to content

Add shadow-initial and inset-shadow-initial utilities#14468

Merged
adamwathan merged 3 commits into
nextfrom
feat/shadow-initial
Sep 20, 2024
Merged

Add shadow-initial and inset-shadow-initial utilities#14468
adamwathan merged 3 commits into
nextfrom
feat/shadow-initial

Conversation

@adamwathan

Copy link
Copy Markdown
Member

This PR complements #14458 by adding new shadow-initial and inset-shadow-initial utilities that make it possible to "undo" a custom shadow color and revert to the default shadow color for the current shadow size.

For example, in this example the shadow will be red on hover even though the default color for the shadow utility is rgb(0 0 0 / 5%):

<div class="shadow-sm shadow-red-500 hover:shadow">
  <!-- … -->
</div>

This is usually what you want, but if you actually want hover:shadow to apply its default color, you need to know what the color is and add it yourself:

<div class="shadow-sm shadow-red-500 hover:shadow hover:shadow-black/5">
  <!-- … -->
</div>

Using shadow-initial, you can achieve the same thing without having to know what the original color was:

<div class="shadow-sm shadow-red-500 hover:shadow hover:shadow-initial">
  <!-- … -->
</div>

The inset-shadow-initial utility does the same thing for the inset-shadow-* utilities.

@adamwathan adamwathan merged commit eb3bb44 into next Sep 20, 2024
@adamwathan adamwathan deleted the feat/shadow-initial branch September 20, 2024 14:36
adamwathan added a commit that referenced this pull request Sep 20, 2024
This PR complements #14458 by adding new `shadow-initial` and
`inset-shadow-initial` utilities that make it possible to "undo" a
custom shadow color and revert to the default shadow color for the
current shadow size.

For example, in this example the shadow will be red on hover even though
the default color for the `shadow` utility is `rgb(0 0 0 / 5%)`:

```html
<div class="shadow-sm shadow-red-500 hover:shadow">
  <!-- … -->
</div>
```

This is usually what you want, but if you actually want `hover:shadow`
to apply its default color, you need to know what the color is and add
it yourself:

```html
<div class="shadow-sm shadow-red-500 hover:shadow hover:shadow-black/5">
  <!-- … -->
</div>
```

Using `shadow-initial`, you can achieve the same thing without having to
know what the original color was:

```html
<div class="shadow-sm shadow-red-500 hover:shadow hover:shadow-initial">
  <!-- … -->
</div>
```

The `inset-shadow-initial` utility does the same thing for the
`inset-shadow-*` utilities.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants