Create/Document SDW Design System

[ninavizz]

The Workstation client's UI visual design direction is "done" from a 1.0 vantage—yay!

Time to document it in Figma, create repeatable components, generalized design guidelines, and all else the team might need to develop QT widgets and layouts from. This ticket is to track that work.

[ninavizz]

FYI @gonzalo-bulnes @creviera

[ninavizz]

Gonzalo asked for buttons, so I kicked this puppy into motion by making buttons! The interactions in Figma are a bit odd... so the "press" state that is only supposed to show for a fraction of a second in real life, shows until the mouse leaves.

• Figma design file
• Buttons in dialogs
  • Need to discuss w/ Allie before this is cleared to move into code.
• Buttons in the primary & login UI windows
  • Updated design Includes "Done/Opened" and "Untouched" states per Seen/Unseen feature; to discuss with Allie.

[ninavizz]

Rad article on Focus indicators (and updated WCAG guidelines): https://www.sarasoueidan.com/blog/focus-indicators/

[gonzalo-bulnes]

Yep, great read @ninavizz. (A lot on that website is well worth reading, by the way! 🍏)

I'd put a conditional warning ⚠️ on the ease of use of the outline property in QSS (Qt's subset of CSS).
I noticed that it seems to be heavily modified by the use that Qt makes of it for focus purposes, and may not behave the way we'd expect coming from CSS perspective. E.g. the outline of a QPushButton (a text box for practical purposes) with padding may be drawn inside the padding, apparently taking hints from the text size without taking the box model into account. I take a mental note of performing some proper testing and confirming, but that surprised me as I was exploring other properties of the Qt buttons, so I'd keep that in mind for now.

[ninavizz]

Mostly done! What remains, is:

• Publishing to the UI Guidelines an updated spec for dialogs—that factors-in Print/Export reconsiliations and centering UI buttons on all dialogs
• Publishing a typography spec for the Client, and pushing dev to prioritize how to do line-spacing in QT
  • Some QT framework needs to be updated for the developers to use the latest version of QT; PyQT, or something else. @creviera knows what the need is, and it's my recommendation that this get prioritized asap so that the paid QT support person can advise the team how to do a full refactoring of dialogs that can include line-height and character-spacing.

Yet to implement from the existing design system:

• Buttons that follow expanded-footprint pattern (same as in SI; per Gonzalos notes above, it is "impractical" for how QT wants buttons made, but I have discussed with Allie) for increased discovery and accessibility.
• Correctly styled links
• Center-aligned buttons with correct spacing between them, on the Dialogs
• Shadoze (note: shadow from the top-bar that lays atop all implied z-axis items "below" it, is the most urgent; as are dialog shadows. Text-box inner-shadows are a styling mechanism alone, and not required for usability.)
• Icons in kebab-menu