Component Design Audit v1.2

Button

• Should use tokens for colors, not call out to ibm-color variables directly

Checkbox

• Inside needs to be block versus rounded (is this do-able?)
• Investigate using SVG for checkbox icon (is this do-able?)
• The stroke weight of the check is fatter than the dash
• Vertical distance between checkbox groups should be 8px

• remove margin-top from checkbox when placed below a label

Modal

• No drop shadow on modal

• Should have max-width set at 768px, but verify with design that this works 👍

• Should have margin-bottom set to 1rem in form

• Should be calling light field inside of a form (field 02), background should end up being gray10

Notifications

• Height should be 64px with one line of text
• Icon for warning should match circle icon in kit, needs to get added to icon library first (variant of https://carbon-elements.netlify.com/icons/examples/preview/#16%2Fwarning--filled with filled !)
• Icon should be 20x20 variant
• success icon color should be support-02

[jeanservaas]

@emyarod

yes, i’m pretty sure all button colors / interactive states have tokens attached to them… color tokens are definitely the ones that have the steepest learning curve. @shixiedesign is this correct?

[shixiedesign]

Yep here’s the boxnote that hopefully will help you @emyarod. I suggest doing a cmd+f and just quickly see if the component is mentioned:

https://ibm.ent.box.com/notes/346571079971

Please note there’s been a couple of tweaks since this document is made, but it’s largely correct…sorry this must be frustrating! Design should definitely get together and make an update to component specs that reflects tokens soon. Meanwhile feel free to let me or Anna know if you have any question with tokens.