Recommended testing method: use the Tab and Shift+Tab keyboard shortcuts to tab through the different elements in the example. Use the theme switcher button to check the focus styles on both light and dark themes.
We want to avoid showing proeminent focus styles after mouse clicks on button elements. This can be a source of confusion for mouse-centric users, when using subtle focus styles (see e.g. bug 1476296); in my experience it's a very common source of confusion when using more visible focus styles.
The ideal solution would be to use the :focus-visible CSS feature, which is supposed to only activate on certain elements (e.g. text inputs) and/or after keyboard navigation (precise heuristics are left to browser implementation).
Right now, :focus-visible is only implemented behind a flag in Chrome, and Firefox has the older :moz-focusring which sadly seems to work exactly like :focus these days (could be a recent regression). Gecko implementation bug for :focus-visible.
Implementing this design is blocked on Gecko implementing :focus-visible!
We've implemented this example using a JavaScript polyfill (WICG/focus-visible).