Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: missing elevated card shadow on dark mode #6185

Merged
merged 4 commits into from
Dec 11, 2024

Conversation

tiffanynwyeung
Copy link
Member

@tiffanynwyeung tiffanynwyeung commented Nov 20, 2024

Description of changes

This change fixes missing box shadows on the elevated variation of the Card component. This is because dark mode shadow colors are not defined so it defaults to the light mode shadows, which are extremely difficult to spot in dark mode.

This change also visually changes/affects the dark mode versions of other components that use box shadows in general: Authenticator, Menu, and Slider Field.

  • adds dark box shadow colors to dark mode override
Component Before After
Card
Authenticator
Menu
Slider Field (thumb)

Issue #, if available

Fixes #5893.

Description of how you validated changes

Checklist

  • Have read the Pull Request Guidelines
  • PR description included
  • yarn test passes and tests are updated/added
  • PR title and commit messages follow conventional commit syntax
  • If this change should result in a version bump, changeset added (This can be done after creating the PR.) This does not apply to changes made to docs, e2e, examples, or other private packages.

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Copy link

changeset-bot bot commented Nov 20, 2024

🦋 Changeset detected

Latest commit: f3f4a52

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 14 packages
Name Type
@aws-amplify/ui Patch
@aws-amplify/ui-react-auth Patch
@aws-amplify/ui-react-core-auth Patch
@aws-amplify/ui-react-core-notifications Patch
@aws-amplify/ui-react-core Patch
@aws-amplify/ui-react-liveness Patch
@aws-amplify/ui-react-native-auth Patch
@aws-amplify/ui-react-native Patch
@aws-amplify/ui-react-notifications Patch
@aws-amplify/ui-react-storage Patch
@aws-amplify/ui-react Patch
@aws-amplify/ui-vue Patch
@aws-amplify/ui-angular Patch
@aws-amplify/ui-react-geo Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

shadow: {
primary: { value: 'hsla(100, 100%, 100%, 0.25)' },
secondary: { value: 'hsla(100, 100%, 100%, 0.15)' },
tertiary: { value: 'hsla(100, 100%, 100%, 0.05)' },
Copy link
Member

Choose a reason for hiding this comment

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

Nit: Is this tertiary value being used anywhere besides the slider? The alpha of 0.05 makes sense to match the light mode counterpart, but it's so subtle in dark mode that I can't even see it. Would it make sense to consider increasing the tertiary alpha value for dark mode?

Copy link
Member

@jordanvn jordanvn left a comment

Choose a reason for hiding this comment

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

Looks good to me. Tertiary shadow is a bit hard for me to see on dark mode, but the slider already has a very subtle shadow to begin with, so could just be my opinion. Not blocking

Copy link
Contributor

@dbanksdesign dbanksdesign left a comment

Choose a reason for hiding this comment

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

LGTM!

@tiffanynwyeung tiffanynwyeung merged commit 96be188 into main Dec 11, 2024
35 checks passed
@tiffanynwyeung tiffanynwyeung deleted the add-dark-mode-shadows branch December 11, 2024 20:27
@github-actions github-actions bot mentioned this pull request Dec 11, 2024
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.

Add a shadow to an elevated Card component in dark mode
4 participants