Scope: Medium enhancements (Cool)

What would change in the production Feathr app (shrike) if Medium enhancements (Cool) is followed as the guide. It lists the changes the prototype makes, such as colors, font weights, restyled chips and the new sidebar, and says plainly where it leaves shrike as it is. The color and weight changes are applied through shrike’s theme and shared components, so they reach the entire app, not only the pages ported into the prototype.

What this direction touches

Components restyled: 29of 320; Colors and font weights change on these existing components. Their typeface, sizes, spacing, shapes, shadows and layout stay as they are. 291 more pick up the new tokens with no component change.; ChangesColor paletteFont weights
Stays as it isTypefaceType scaleCorner radiiShadowsSizing and spacingMotionIconsDark mode
Foundations changed: 2of 10; The building blocks every component in the design system is made from.; ChangesColor paletteFont weights
Stays as it isTypefaceType scaleCorner radiiShadowsSizing and spacingMotionIconsDark mode
Color palettes to design: 1palette; The light palette only, and the tokens that carry it. Dark mode is not part of this direction, so there is no second palette to design.; LightDark (not included)

Shrike at a glance

Measured from shrike’s source (tests, stories and generated files left out). These describe the app itself, so they are the same on every Scope page.

1,965
UI source files: React components and pages across the app, its libraries and its sub-apps; 890
Style files: CSS files that set colors, type, shape and spacing; 1,790
Color token uses: In 419 files; 2,993
Type, shape, shadow and spacing token uses: Font sizes, radii, shadows and spacing; 164
Hard-coded colors: 112 hex and 52 rgb values, in 49 and 32 files, that skip the tokens; 559
Files that import icons: Font Awesome, in four weights

How the numbers above are counted

Components are counted by folder. Each folder holds several files, and the three component packages have 1,902 UI source files in total, so a folder is a smaller unit than the files inside it. This count is conservative: it counts folders, not every component in them.
The states inside each page, such as empty, error, loading and tab states, can’t be counted from the code, so they’re not in any number. That is a reason the work is larger, not a sign that the counts above are wrong.