-
Notifications
You must be signed in to change notification settings - Fork 4
Platform UI 2.0 Roadmap ✨
- CSS grid
- Fluid spacing
- Fluid typography
- clamp()
- Fluid spacing
- flexbox gutters
- Logical properties
- Theming
- top-level rounded/square †
† The ability to set corners (buttons, boxes, forms) as rounded to (n) or square at a top level ~ possibly on the body tag or generate a version specific pUI file.
- Preserve current documentation as
/docs/{version number}in an attempt to preserve older SEO traffic
- 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 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
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"
}
];
Custom properties fallbacks to document for theming: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values
Style Dictionary is another tool that could help create design tokens.
- 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
- For example: When opening and closing drawers / accordions / etc, toggle aria attributes such as
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.
- Built out a pen for a CSS Grid replacement for
block-container: Grid System using CSS Grid
- Animations/micro-interactions
- Defensive CSS
- Remove all underscores related to BEM
-
> * + * { margin-block-start: 1.5rem👈🏻
- add uilayer based on Ryan's example https://codepen.io/mrtrimble/pen/YzRYRqZ/9447d96ce5d604bb5e88fbe299fe51d3?editors=1100
As of 7/13/2023, support is wide enough. based on GA, our firefox users are below 3% and the vast majority are above 97
- Vet out usage of SVG only icons instead of icon font
- SVG Spritesheets
- SVG Component
- Some combination of the two
- Rewrite using the
dialogelement - Launchpad examples using color, headers, appended messages...
Consider adding auto sizes. Example: mx-auto to center content.
- Rewrite to encompass CSS logical properties