-
Notifications
You must be signed in to change notification settings - Fork 2
Feat: Enable gradients in components #DS-1887 #2062
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
base: main
Are you sure you want to change the base?
Conversation
✅ Deploy Preview for spirit-design-system-storybook canceled.
|
✅ Deploy Preview for spirit-design-system ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hardcoded for demo - will be removed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hardcoded for demo - will be removed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hardcoded for demo - will be removed
Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/14970798900/artifacts/3105458963 |
Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/14971122819/artifacts/3105539236 |
6b85d9d
to
e0c759b
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, good job. I would only open the gradients options to allow users to defined thier custom ones. :)
4a40679
to
e0d08b5
Compare
e0d08b5
to
7e2562e
Compare
[dictionary-color]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#color | ||
[dictionary-gradient]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#gradient | ||
[dictionary-border-properities]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#border-properties |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🔤
<Box padding="space-800" backgroundGradient="secondary"> | ||
Secondary Background Gradient | ||
</Box> | ||
<Box padding="space-800" backgroundGradient={{ mobile: 'primary', tablet: 'secondary', desktop: 'secondary' }}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we omit the desktop value if it is the same?
<Box padding="space-800" backgroundGradient={{ mobile: 'primary', tablet: 'secondary', desktop: 'secondary' }}> | |
<Box padding="space-800" backgroundGradient={{ mobile: 'primary', tablet: 'secondary' }}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Or there is a typo and it should be there:
<Box padding="space-800" backgroundGradient={{ mobile: 'primary', tablet: 'secondary', desktop: 'secondary' }}> | |
<Box padding="space-800" backgroundGradient={{ mobile: 'primary', tablet: 'secondary', desktop: 'primary' }}> |
?
<div class="docs-Stack docs-Stack--start"> | ||
|
||
<p>For demo purposes, the boxes have custom padding.</p> | ||
<div class="bg-gradient-primary p-800">Primary Background Gradient</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Non-related to this PR: p-<space-token>
works, but m-<space-token>
not? Why?
design-tokens
from this PRDescription
Additional context
Issue reference