kolibri-design-system
kolibri-design-system copied to clipboard
Update $core-time value and dropshadows documentation to the latest guidance from the design team
Description
Based on recent guidance (Slack thread) by @jtamiace:
- Updates $core-time value from 0.25s to 0.15s
- Updates guidance for drop shadows depth to:
- "1dp: containers, panels, controls"
- "2dp: cards, app bars, buttons, menu, tooltips, snackbars"
- "6dp: card hover, modal"
- Figma design
Note that KDS consumers currently use more dp values. Here are issues to align products and KDS components with these guidelines at first, and then to remove unused dp.
- https://github.com/learningequality/kolibri-design-system/issues/724
- https://github.com/learningequality/kolibri/issues/12552
- https://github.com/learningequality/kolibri-design-system/issues/725
Changelog
- #723
- Description: Updates $core-time value from 0.25s to 0.15s
- Products impact: User experience - faster transitions
- Addresses: Updates KDS to the latest guidance from the design team
- Components:
KButton,KExternalLink,KRouterLink,KModal,KCard,KIcon,KTabsList,KTabs, and places in consumers that imports$core-time - Breaking: no
- Impacts a11y: no
- Guidance: -
- #723
- Description: Updates drop shadows documentation to the latest guidance from the design team
- Products impact: -
- Addresses: Updates KDS to the latest guidance from the design team
- Components: -
- Breaking: no
- Impacts a11y: no
- Guidance: -
Steps to test
- Preview "Globally available styles", "Elevation and shadow", and "Easing and timing" sections of the Styling documentation preview page
- Try the live hover example in "Easing and timing" section for before/after
Testing checklist
- [x] Contributor has fully tested the PR manually
- [x] If there are any front-end changes, before/after screenshots are included (see docs preview)
- [ ] ~Critical and brittle code paths are covered by unit tests~
- [x] The change is described in the changelog section above
Reviewer guidance
- [ ] Is the code clean and well-commented?
- [ ] Are there tests for this change?
- [ ] Are all UI components LTR and RTL compliant (if applicable)?
- [ ] Add other things to check for here
After review
- [x] The changelog item has been pasted to the `CHANGELOG.md
@jtamiace I'd appreciate if you could read through the update documentation sections I linked in the "Steps to test"
Thanks both