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

feat(Cards, Timer): added Timer's overMedia variant when used inside cards #1232

Closed
wants to merge 2 commits into from

Conversation

marcoskolodny
Copy link
Collaborator

Issue: Link

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

The text shadow is not very noticeable for non-boxed variant. @yceballost please confirm if the textShadow value is expected (it's written like this in specs)

Copy link
Member

Choose a reason for hiding this comment

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

perhaps you could add another screenshot with a diferent (white-ish) background to make the shadow more noticeable

Copy link
Contributor

@yceballost yceballost Sep 4, 2024

Choose a reason for hiding this comment

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

should be the same text shadow as the rest of the text shadows in display media card and poster card

(in the case of the current cards in web is using 16px, but following specs should be 15px)

const textShadow = withGradient ? '0 0 16px rgba(0,0,0,0.4)' : undefined;

image
https://www.figma.com/design/tKdPOfcUALzVIh5oizFbm7/%F0%9F%94%B8-Cards-Specs?node-id=8080-22155&t=v56aGyafkIMvhA15-4

the use of text shadows is primarily to ensure accessible contrast. If the background photo is dark, it's perfectly fine for the shadow to be less visible, as the background itself already provides the necessary contrast

Copy link

github-actions bot commented Sep 3, 2024

Size stats

master this branch diff
Total JS 12.1 MB 12.1 MB +1.14 kB
JS without icons 2.03 MB 2.03 MB +1.14 kB
Lib overhead 77.1 kB 77.1 kB 0 B
Lib overhead (gzip) 18.9 kB 18.9 kB 0 B

Copy link

github-actions bot commented Sep 3, 2024

Accessibility report
✔️ No issues found

ℹ️ You can run this locally by executing yarn audit-accessibility.

Copy link
Collaborator Author

@marcoskolodny marcoskolodny Sep 3, 2024

Choose a reason for hiding this comment

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

With this context, we can avoid creating a new variant in Mistica. It makes it easy to update the logic for components that require overMedia scenarios, without actually affecting the ones that don't have this variant.

For example, I've already updated all the cards and the Timer.

I've discussed with design team and, at least for now, we won't export this context outside of Mistica. This is because (ideally) we would like to create a new Variant for the ThemeVariant provider to handle this (and if we export this context now, it will be a breaking change when we remove it)

Copy link

github-actions bot commented Sep 3, 2024

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-nlzp17e6t-flows-projects-65bb050e.vercel.app

Built with commit 0fd12b9.
This pull request is being automatically deployed with vercel-action

@marcoskolodny marcoskolodny changed the title feat(OverMediaContext, Cards, Timer): add overMedia context, use it in cards and include overMedia variant for Timer feat(Cards, Timer): added Timer's overMedia variant when used inside cards Sep 3, 2024
@marcoskolodny
Copy link
Collaborator Author

Closing, as we will replace this logic with the new theme variant

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.

3 participants