Platform UI 2.0 Roadmap ✨

Goals

• CSS grid
• Fluid spacing
• Fluid typography
• clamp()
• Fluid spacing
• flexbox gutters
• Logical properties
• Theming

PlatformUI website

• Preserve current documentation as /docs/{version number} in an attempt to preserve older SEO traffic

Design Tokens

• Refactor our current sass-map-based variables to leverage CSS Custom Properties and Design Tokens for easy user configuration.
  • CSS Tokenizer, companion article, Stephanie Eckles videos (password: 9jS@daGsS?Ws) and a11y color tokens (first video, :30-:45).
  • Light and Dark themes can be considered post the move to design tokens
  • How does this simplify our current approach to high-contrast mode?
• What are we dropping/keeping in our token file (what we're currently writing to :root
• Naming convention discussion/determination
  • Buttons
  • Backgrounds

Design Tokens example

These are based on Stephanie's a11y tokens, anything else we can generate to :root from Platform UI itself.

module.exports = [
  {
    name: "primary",
    color: "#003f70"
  },
  {
    name: "secondary",
    color: "#91b9dc"
  },
  {
    name: "button-primary",
    color: "#3f7bad"
  },
  {
    name: "button-secondary",
    color: "#e58967"
  },
  {
    name: "message-success",
    color: "green"
  },
  {
    name: "message-error",
    color: "tomato"
  },
  {
    name: "message-warning",
    color: "#866657"
  },
  {
    name: "message-info",
    color: "#3f7bad"
  },
  {
    name: "text",
    color: "#333333"
  },
  {
    name: "link",
    color: "dodgerblue"
  }
];

Concepts

• Accessibility - How far do we want to go? @mrtrimble
  • If we go down this road, consider established ARIA patterns during the re-write
  • The Disclosure pattern is very similar to our loose interpretation of the accordion pattern. Group discussion here.
  • Minimal viable accessibility: Add accessibility features to places that make sense and that someone using our framework may not be able to add themselves
    • For example: When opening and closing drawers / accordions / etc, toggle aria attributes such as aria-expanded.
    • Codepen Example, see toggling of aria-expanded: https://codepen.io/mrtrimble/pen/eYKJLQv/b907599d2d1aa2484c9f2bdddb683079

Layout

Comment Add a grid layout, which I think would be beneficial and cool. Depreciate block-container and replace/clean up the syntax with flex.

Each of these could start with a wrapper called flex-wrapper and grid-wrapper. flex-wrapper would essentially replace block-container.

Just an idea and I wanted to document it somewhere.

Global considerations

• Animations/micro-interactions
• Defensive CSS
• Remove all underscores related to BEM
• > * + * { margin-block-start: 1.5rem 👈🏻

Components

Accordions

Blockquotes

Buttons

Cards

Drawers

Figures

Images

Info Box

Lists

Loaders

Messages

Modals

• Rewrite using the dialog element
• Launchpad examples using color, headers, appended messages...

Pills

Tables

Tabs

Tooltips

Forms

Layout

Menus

Typography

Utilities

Backgrounds

Borders

• CSS logical properties

Cursor

Display

Width

Effects

Overflows

Positioning

Rotating

Readers

Spacers

Consider adding auto sizes. Example: mx-auto to center content.

• Rewrite to encompass CSS logical properties

Transitions

Truncate with Ellipsis

Z-Index