feat(unity-react-core): card Carousel active bullet indicator invisib… - #1766
feat(unity-react-core): card Carousel active bullet indicator invisib…#1766spaceperson wants to merge 2 commits into
Conversation
…le on dark gray background
|
Storybook deployed at https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1766/index.html |
|
|
||
| &:focus { | ||
| outline: none; | ||
| &.glide__dark { |
There was a problem hiding this comment.
My opinion style: components should style themselves based on inheritance. (future proof) if a component has a dark class on its root, or if it inherits it from a parent,
<CardWrapper className="gray-dark-bg">
<CardWrapper className="">
or
<CardWrapper className="gray-dark-bg">
The child components should automatically set the correct colors
.gray-dark-bg {
--bullet-border-color: $uds-color-brand-gold;
--bullet-background-color: #333;
}
&:hover {
border: 1px solid var( --bullet-border-color ,#d0d0d0);
background-color: var( --bullet-background-color ,#191919);
}
| <button | ||
| type="button" | ||
| className="glide__bullet" | ||
| className={`glide__bullet ${buttonTheme}`} |
There was a problem hiding this comment.
No need to pass theme prop with the inheritance css vars pattern
There was a problem hiding this comment.
Only commenting in one place, but this pattern for passing the prop buttonTheme={buttonTheme} can be removed in several places
| // &:focus { | ||
| border: 1px solid #d0d0d0; | ||
| background-color: #191919; // rgba(255, 255, 255, 0.5); | ||
| &.glide__dark { |
There was a problem hiding this comment.
Not sure about the class "glide__dark" if possible stick to inheriting the color from using a global class like gray-faint-bg, gray-light-bg, gray-dark-bg
I am open for discussion, if there were reasons or conflicts with doing it this way that you have already explored 😄
| hasPeek = true, | ||
| isDraggable = true, | ||
| hasShadow = true, | ||
| bgColor = "gray-dark-bg" |
There was a problem hiding this comment.
defaulting bgColor to gray-dark-bg changes Testimonial and Image Gallery carousels. preserve the neutral default and apply dark styling only when passed explicitly
… and arrow button styles
4 participants
…le on dark gray background
Description
Checklist
Important Reminders
Links