Background
The inherited styling (CSS code) of the ReadingList extension uses numerous opinionated styles. Right now it seems like the CSS styling is done to work in a vacuum, which can be problematic. Specifically forward looking to extending it to mobile.
Goal
Review opinionated styling.
Either it's following the design system (and adhere's to lower level, aka MW and Vector styles) or there's a very good reason for an override.
Excerpt:
.readinglists-container { h1 { font-family: @font-family-serif; // Doubtful font-size: @font-size-x-large; // Doubtful font-weight: @font-weight-bold; margin: 0; // Doubtful padding: 0; // Doubtful border-bottom: 0; } h2 { font-family: @font-family-sans; // Doubtful font-size: @font-size-medium; // Doubtful margin: 0; // Doubtful padding: 0; // Doubtful border-bottom: 0; } h3 { color: @color-placeholder; // Doubtful font-size: @font-size-x-small; // Doubtful font-weight: @font-weight-normal; // Doubtful margin: 0; // Doubtful padding: 0; // Doubtful } p { font-size: @font-size-small; // Doubtful margin-top: 0; // Doubtful margin-bottom: 1.5em; // Doubtful padding-bottom: 0; // Doubtful } .readinglists-heading { display: flex; align-items: flex-end; gap: 0.5em; // Should be documented } .readinglists-sort-text { font-size: @font-size-small; font-weight: @font-weight-normal; // Doubtful if taken out of heading element color: @color-placeholder; margin-left: 0.5em; // Should be achieved by Codex Design Tokens }
Acceptance criteria for done
- Design reviews the set
- Engineers remove the unnecessary styles, that are not design intended