Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

Conversation

MohammedEsafi
Copy link
Contributor

@MohammedEsafi MohammedEsafi commented Oct 6, 2023

WHY are these changes introduced?

Fixes #10914

WHAT is this pull request doing?

  • Adding the appropriate background color to the shadow preview parent container to enhance shadow visibility.
  • Augmented the padding around the shadow preview container to improve the visibility of the shadow.

Before

The shadow of tokens preview in dark mode before the fix

After

The shadow of tokens preview in dark mode after the fix
The shadow of tokens preview in light mode after the fix

🎩 checklist

@MohammedEsafi MohammedEsafi requested a review from a team as a code owner October 6, 2023 20:18
@github-actions github-actions bot added the cla-needed Added by a bot. Contributor needs to sign the CLA Agreement. label Oct 6, 2023
@MohammedEsafi MohammedEsafi changed the title Fix shadow blending issue in dark mode for token previews [polaris.shopify.com] Fix shadow blending issue in dark mode for token previews Oct 6, 2023
@MohammedEsafi
Copy link
Contributor Author

I have signed the CLA!

@github-actions github-actions bot removed the cla-needed Added by a bot. Contributor needs to sign the CLA Agreement. label Oct 6, 2023
@sam-b-rose
Copy link
Member

Hi @MohammedEsafi! Thank you for contributing this fix. I agree, adding the proper background color to see the shadow is needed. We are currently working on a refresh of the site. I will pass this issue along to our design team to ensure we account for this in the new design as well

@MohammedEsafi
Copy link
Contributor Author

Thanks @sam-b-rose 🙌

Copy link
Contributor

@jesstelford jesstelford left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love the contribution, thank you!

Left a couple of suggestions to make it look nice within the new container, then this is good to merge in 👍

@MohammedEsafi MohammedEsafi force-pushed the fix-dark-mode-shadow-issue branch from 30c28bc to 23e8b1d Compare October 13, 2023 08:52
@MohammedEsafi
Copy link
Contributor Author

Thank you for your feedback @jesstelford, fully on board with it! 👍 Your suggestion is now resolved. 🎉

@sam-b-rose sam-b-rose merged commit 4590fd8 into Shopify:main Oct 13, 2023
chloerice pushed a commit that referenced this pull request Oct 25, 2023
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-migrator@0.26.1

### Patch Changes

- Updated dependencies
\[[`f1d256fce`](f1d256f)]:
    -   @shopify/polaris-tokens@8.0.1
    -   @shopify/stylelint-polaris@15.0.1

## @shopify/polaris@12.0.1

### Patch Changes

- [#10792](#10792)
[`2980e9d26`](2980e9d)
Thanks [@SMAKSS](https://github.com/SMAKSS)! - Fixed typos and
`editOnGithubUrl` in docs


- [#10960](#10960)
[`d7e4aa7f9`](d7e4aa7)
Thanks [@oksanashopify](https://github.com/oksanashopify)! - fixed
background-color for unselectable tabel first-child cell


- [#10975](#10975)
[`00952a33a`](00952a3)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed loading
button spinner color


- [#10935](#10935)
[`8568e5141`](8568e51)
Thanks [@gazjones00](https://github.com/gazjones00)! - Fixed an issue
with the `primary` variant styles conflicting with the `tertiary`
variant in `Button`


- [#10934](#10934)
[`de419ba2b`](de419ba)
Thanks [@gazjones00](https://github.com/gazjones00)! - Fixed disabled
state for `monochromePlain` variant in `Button`


- [#10993](#10993)
[`fb508b91c`](fb508b9)
Thanks [@FCalabria](https://github.com/FCalabria)! - Fixed incompatible
type between IndexTable and useIndexResourceState


- [#10998](#10998)
[`bb310cd3a`](bb310cd)
Thanks [@alisterdev](https://github.com/alisterdev)! - Update
SkeletonThumbnail size values to correspond to Thumbnail


- [#10999](#10999)
[`e34a4db32`](e34a4db)
Thanks [@kyledurand](https://github.com/kyledurand)! - Updated
`Checkbox` icon to use tokens vs hard coded value


- [#10910](#10910)
[`65998488f`](6599848)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed negative
margin of `segmented` `ButtonGroup.Item` when child `Button` is
`primary`


- [#11028](#11028)
[`9fb367afd`](9fb367a)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed `buttonFrom`
utility function not mapping boolean variant properties to `variant` and
`tone`

- Updated dependencies
\[[`f1d256fce`](f1d256f)]:
    -   @shopify/polaris-tokens@8.0.1

## @shopify/polaris-tokens@8.0.1

### Patch Changes

- [#10976](#10976)
[`f1d256fce`](f1d256f)
Thanks [@sarahill](https://github.com/sarahill)! - Added descriptions to
color tokens

## @shopify/stylelint-polaris@15.0.1

### Patch Changes

- Updated dependencies
\[[`f1d256fce`](f1d256f)]:
    -   @shopify/polaris-tokens@8.0.1

## polaris.shopify.com@0.59.0

### Minor Changes

- [#11030](#11030)
[`f55a84ce7`](f55a84c)
Thanks [@lgriffee](https://github.com/lgriffee)! - Update
stylelint-polaris version matchups chart

### Patch Changes

- [#10792](#10792)
[`2980e9d26`](2980e9d)
Thanks [@SMAKSS](https://github.com/SMAKSS)! - Fixed typos and
`editOnGithubUrl` in docs


- [#10974](#10974)
[`2b3b61069`](2b3b610)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Removed autoplay
from all videos on Motion design guidance pages


- [#10925](#10925)
[`4590fd828`](4590fd8)
Thanks [@MohammedEsafi](https://github.com/MohammedEsafi)! - Improved
the visibility of shadows in Dark Mode for token previews

- Updated dependencies
\[[`2980e9d26`](2980e9d),
[`d7e4aa7f9`](d7e4aa7),
[`00952a33a`](00952a3),
[`8568e5141`](8568e51),
[`de419ba2b`](de419ba),
[`fb508b91c`](fb508b9),
[`bb310cd3a`](bb310cd),
[`e34a4db32`](e34a4db),
[`f1d256fce`](f1d256f),
[`65998488f`](6599848),
[`9fb367afd`](9fb367a)]:
    -   @shopify/polaris@12.0.1
    -   @shopify/polaris-tokens@8.0.1

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
…n previews (Shopify#10925)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes Shopify#10914

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

- Adding the appropriate background color to the shadow preview parent
container to enhance shadow visibility.
- Augmented the padding around the shadow preview container to improve
the visibility of the shadow.

> Before

![The shadow of tokens preview in dark mode before the
fix](https://github.com/Shopify/polaris/assets/47392041/370d1ff2-1575-4632-a4b4-525e237eb1ce)

> After

![The shadow of tokens preview in dark mode after the
fix](https://github.com/Shopify/polaris/assets/47392041/1ff0cfbe-765b-4a54-bfc7-8d86bfc60c2b)
![The shadow of tokens preview in light mode after the
fix](https://github.com/Shopify/polaris/assets/47392041/c67d42fa-258e-4af6-8c72-42d5b720942d)



### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
ascherkus pushed a commit to ascherkus/polaris that referenced this pull request Feb 19, 2025
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-migrator@0.26.1

### Patch Changes

- Updated dependencies
\[[`f1d256fce`](Shopify@79c5c6a)]:
    -   @shopify/polaris-tokens@8.0.1
    -   @shopify/stylelint-polaris@15.0.1

## @shopify/polaris@12.0.1

### Patch Changes

- [Shopify#10792](Shopify#10792)
[`2980e9d26`](Shopify@7b237af)
Thanks [@SMAKSS](https://github.com/SMAKSS)! - Fixed typos and
`editOnGithubUrl` in docs


- [Shopify#10960](Shopify#10960)
[`d7e4aa7f9`](Shopify@78b5348)
Thanks [@oksanashopify](https://github.com/oksanashopify)! - fixed
background-color for unselectable tabel first-child cell


- [Shopify#10975](Shopify#10975)
[`00952a33a`](Shopify@818bfeb)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed loading
button spinner color


- [Shopify#10935](Shopify#10935)
[`8568e5141`](Shopify@c483172)
Thanks [@gazjones00](https://github.com/gazjones00)! - Fixed an issue
with the `primary` variant styles conflicting with the `tertiary`
variant in `Button`


- [Shopify#10934](Shopify#10934)
[`de419ba2b`](Shopify@d095f27)
Thanks [@gazjones00](https://github.com/gazjones00)! - Fixed disabled
state for `monochromePlain` variant in `Button`


- [Shopify#10993](Shopify#10993)
[`fb508b91c`](Shopify@922f3fd)
Thanks [@FCalabria](https://github.com/FCalabria)! - Fixed incompatible
type between IndexTable and useIndexResourceState


- [Shopify#10998](Shopify#10998)
[`bb310cd3a`](Shopify@e9cee43)
Thanks [@alisterdev](https://github.com/alisterdev)! - Update
SkeletonThumbnail size values to correspond to Thumbnail


- [Shopify#10999](Shopify#10999)
[`e34a4db32`](Shopify@50c5fc8)
Thanks [@kyledurand](https://github.com/kyledurand)! - Updated
`Checkbox` icon to use tokens vs hard coded value


- [Shopify#10910](Shopify#10910)
[`65998488f`](Shopify@bcda058)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed negative
margin of `segmented` `ButtonGroup.Item` when child `Button` is
`primary`


- [Shopify#11028](Shopify#11028)
[`9fb367afd`](Shopify@06d61a1)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed `buttonFrom`
utility function not mapping boolean variant properties to `variant` and
`tone`

- Updated dependencies
\[[`f1d256fce`](Shopify@79c5c6a)]:
    -   @shopify/polaris-tokens@8.0.1

## @shopify/polaris-tokens@8.0.1

### Patch Changes

- [Shopify#10976](Shopify#10976)
[`f1d256fce`](Shopify@79c5c6a)
Thanks [@sarahill](https://github.com/sarahill)! - Added descriptions to
color tokens

## @shopify/stylelint-polaris@15.0.1

### Patch Changes

- Updated dependencies
\[[`f1d256fce`](Shopify@79c5c6a)]:
    -   @shopify/polaris-tokens@8.0.1

## polaris.shopify.com@0.59.0

### Minor Changes

- [Shopify#11030](Shopify#11030)
[`f55a84ce7`](Shopify@5e9235a)
Thanks [@lgriffee](https://github.com/lgriffee)! - Update
stylelint-polaris version matchups chart

### Patch Changes

- [Shopify#10792](Shopify#10792)
[`2980e9d26`](Shopify@7b237af)
Thanks [@SMAKSS](https://github.com/SMAKSS)! - Fixed typos and
`editOnGithubUrl` in docs


- [Shopify#10974](Shopify#10974)
[`2b3b61069`](Shopify@9dc0ea7)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Removed autoplay
from all videos on Motion design guidance pages


- [Shopify#10925](Shopify#10925)
[`4590fd828`](Shopify@5ca919a)
Thanks [@MohammedEsafi](https://github.com/MohammedEsafi)! - Improved
the visibility of shadows in Dark Mode for token previews

- Updated dependencies
\[[`2980e9d26`](Shopify@7b237af),
[`d7e4aa7f9`](Shopify@78b5348),
[`00952a33a`](Shopify@818bfeb),
[`8568e5141`](Shopify@c483172),
[`de419ba2b`](Shopify@d095f27),
[`fb508b91c`](Shopify@922f3fd),
[`bb310cd3a`](Shopify@e9cee43),
[`e34a4db32`](Shopify@50c5fc8),
[`f1d256fce`](Shopify@79c5c6a),
[`65998488f`](Shopify@bcda058),
[`9fb367afd`](Shopify@06d61a1)]:
    -   @shopify/polaris@12.0.1
    -   @shopify/polaris-tokens@8.0.1

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[polaris.shopify.com] Shadow of Tokens Preview Blending with Background in Dark Mode
3 participants