Elsie base design - Githubissues

adobe / storefront-product-listing-page

MIT License

14 stars 32 forks source link

Elsie base design #13

Open kathleentynan opened 9 months ago

kathleentynan commented 9 months ago

Description

This is an experimantal PR to showcase how to implement tokens from the Storefront Base Design

Steps:

map desired tokens in tailwind.config.js to tailwind classes: https://tailwindcss.com/docs/theme
implement using tailwind throughout the app
don't forget to run npm run tailwind:build to build the css
You can also use plain css file to achieve the same styling with tokens

** note - tokens.css does not need to be updated with the tokens if they exist in the app

Screenshots (if appropriate):

before:

Screenshot 2024-02-12 at 11 27 58 AM

After:

Screenshot 2024-02-12 at 11 27 30 AM

Types of changes

[ ] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

[ ] I have signed the Adobe Open Source CLA.
[ ] My code follows the code style of this project.
[ ] My change requires a change to the documentation.
[ ] I have updated the documentation accordingly.
[ ] I have read the CONTRIBUTING document.
[ ] I have added tests to cover my changes.
[ ] All new and existing tests passed.