Coding Design Systems | ep04 | Open Props · Part 2 with Adam Argyle
Every Tuesday at 5:30PM UTC, join @Georges_Gomes, @m4d_z, and their guests in a new live coding session about Design Systems, on Backlight.dev!
⎯⎯⎯ In this episode ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
0:00 - Intro
1:13 - What is Open Props?
1:39 - Creating a new branch for updates
6:36 - The importance of community
9:20 - Open Props Starter Kit overview in Backlight
14:07 - Fixing Dark theme
17:35 - Creating a palette/color component to pick color tokens
20:30 - About the :where selector
24:18 - Theming with Open Props
32:53 - Animating the documentation
42:19 - Dealing with Sizes, accessibility and readability
51:55 - Using the color-scheme property to improve UX
56:40 - Outro
⎯⎯⎯ Description ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
This week we’re pleased to welcome Adam Argyle (@argyleink) on the show! An occasion to talk about Open Props and improve our Tech Sample demoing it in Backlight.
We discuss on CSS specificity, Custom Properties, animations and transitions, and way more. Then we create a palette component, dedicated to our very specific needs in our Design System, based on Open Props Custom Properties collection.
⎯⎯⎯ Resources ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
- Open Props: https://open-props.style/
- Open Props Starter Kit in Backlight: https://backlight.dev/review/Tve1ObNsVqRX7NlkUnzD/readme/doc/index.md?p=doc&utm_campaign=sessions%3Acds
- Open Props Open Source Design System Starter Kit: https://github.com/divriots/starter-open-props
- 🪄 Backlight Design Systems Editor: https://backlight.dev/?utm_campaign=sessions%3Acds
- 🐥 Adam Argyle: https://twitter.com/argyleink
- 🐥 Georges Gomes: https://twitter.com/georges_gomes
- 🐥 m4dz: https://twitter.com/m4d_z