Design Tokens: Switch to using new spacing tokens #1664
Conversation
|
✔️ Deploy Preview for gestalt ready! 🔨 Explore the source changes: a4f365f 🔍 Inspect the deploy log: https://app.netlify.com/sites/gestalt/deploys/6128fe63a463b000080566f6 😎 Browse the preview: https://deploy-preview-1664--gestalt.netlify.app |
| <Table> | ||
| <Table.Header> | ||
| <Table.Row> | ||
| <Table.HeaderCell> |
There was a problem hiding this comment.
This very much seems like something that could use some helper components to abstract the repeated elements…we should avoid hardcoding markup like this when possible
| @@ -8,7 +8,7 @@ | |||
| composes: xsCol12 from "./Column.css"; | |||
| appearance: none; | |||
| min-width: 180px; | |||
| padding: 8px 40px; | |||
| padding: var(--space-200) calc(var(--space-500) + var(--space-200)); | |||
There was a problem hiding this comment.
Oh interesting, I hadn't considered combining tokens to get in-between values. Is this something we want to encourage Pinboard devs to do as well? Or is it something we should advise against?
There was a problem hiding this comment.
This is something we want to avoid, as it defeats the purpose of creating a limited set of tokens. But I put this in as a stress test and to avoid a design decision for right now. But it has been documented as something to re-evaluate once we know these space tokens are good to go in pinboard
Summary
First iteration of testing out design token usage w/i Gestalt components:
Layout.css, TextArea, SearchField, InternalTextField, and FormLabel
Links
Checklist