show keywords as border in previews

[stacyk]

Description

When using a keyword like medium for a size (that is part of a @sizes {ruler} map), show those as borders instead of the typical ruler.

Steps to test/reproduce

If running locally, visit the config-scale.html page, look at the pattern sizes (these should be moved to demo)

Show me

REMEMBER: Attach this PR to the Trello card

https://trello.com/c/gAFt8dMk/59-herman-how-should-length-keywords-like-a-medium-border-width-be-previewed

To do

• [x] move border demos to the demo_sizes.html instead of the sizes design tokens
• [x] see if there's a better way to write {% if value == 'thin' or value == 'thick' or value == 'medium' %}

[netlify[bot]]

✅ Deploy Preview for herman-staging ready!

Name	Link
🔨 Latest commit	037bf87120a021c795a9f4b39864f889d57093c1
🔍 Latest deploy log	https://app.netlify.com/sites/herman-staging/deploys/62fe84f33aa452000970545b
😎 Deploy Preview	https://deploy-preview-381--herman-staging.netlify.app/changelog
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[jgerigmeyer]

[Herman] How should length keywords (like a medium border-width) be previewed?